/* ============================================================
   GrowthKing - portfolio.css
   Tylko strona /portfolio. Ciemne hero jak /oferta i /kontakt,
   pod nim siatka marek na jasnym tle (strona konczy sie jasno pod stopka).
   Kierunek (Bartosz, 22.10): premium i spokojnie. Duzo powietrza,
   logo w kolorze na neutralnej scenie, typografia niesie hierarchie,
   pastylki bez ikon i bez kolorow kategorii. Bez filtrow.
   ============================================================ */

/* ============ HERO ============ */
.pf-hero{background:radial-gradient(720px 420px at 78% 22%,rgba(0,85,255,.38),transparent 64%),radial-gradient(620px 360px at 30% 0%,rgba(193,18,31,.14),transparent 58%),linear-gradient(135deg,#05070d 0%,#0B1828 54%,#1a1a1a 100%);color:#fff;padding:170px 0 88px}
.pf-hero .eyebrow{color:#fff}
.pf-hero .eyebrow::before{background:url("logo-fav-white.svg") center/contain no-repeat}
.pf-hero h1{color:#fff;font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:600;line-height:1.04;max-width:18ch}
.pf-lead{margin-top:20px;color:rgba(255,255,255,.74);font-size:1.1rem;line-height:1.7;max-width:62ch}
/* Liczniki jako jeden rzad z cienkimi przedzialkami, nie kafle. */
.pf-stats{display:flex;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);max-width:760px}
.pf-stats>div{flex:1;padding-right:28px}
.pf-stats>div+div{padding-left:28px;border-left:1px solid rgba(255,255,255,.12)}
.pf-stats dt{font-family:var(--font-head);font-weight:700;font-size:3.2rem;line-height:.9;color:#fff}
.pf-stats dd{margin-top:10px;color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.4;max-width:22ch}

/* ============ MARKI ============ */
.pf-list{background:var(--bg-base)}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

.pf-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(11,24,40,.07);border-radius:22px;overflow:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .3s}
.pf-card:hover{transform:translateY(-6px);border-color:rgba(11,24,40,.12);box-shadow:0 28px 56px -32px rgba(11,24,40,.32)}

/* Scena logo: neutralne tlo, logo w kolorach marki. Bez numeracji (Bartosz, 22.10). */
.pf-stage{position:relative;aspect-ratio:16/10;display:grid;place-items:center;margin:8px 8px 0;border-radius:16px;background:#F4F5F8;overflow:hidden}
.pf-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 50% 120%,rgba(44,127,255,.07),transparent 70%);opacity:0;transition:opacity .5s}
.pf-card:hover .pf-stage::after{opacity:1}
.pf-stage img{position:relative;z-index:1;max-height:48px;max-width:58%;width:auto;height:auto;object-fit:contain;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pf-card:hover .pf-stage img{transform:scale(1.05)}
.pf-stage.is-tall img{max-height:74px}
.pf-stage.is-square img,.pf-stage.is-portrait img{max-height:92px}
.pf-stage.is-blend img{mix-blend-mode:multiply;max-height:96px}

.pf-body{display:flex;flex-direction:column;flex:1;padding:26px 28px 26px}
.pf-branza{font-size:.86rem;color:var(--g500)}
.pf-name{margin-top:4px;font-family:var(--font-head);font-weight:700;font-size:1.95rem;line-height:1.02;color:var(--ink)}
.pf-body p{margin-top:14px;color:var(--g700);font-size:.97rem;line-height:1.65}

/* Stopka karty zawsze na dole, niezaleznie od dlugosci opisu. */
.pf-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:22px}
.pf-body p+.pf-foot{margin-top:auto}
.pf-body p{margin-bottom:22px}
.pf-pins{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pf-pins li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#F3F4F7;color:var(--g700);font-size:.8rem;font-weight:500;line-height:1.2;white-space:nowrap}
.pf-pins li.is-intl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.pf-more{font-size:.88rem;font-weight:500;color:var(--blue-strong);text-decoration:underline;text-decoration-color:rgba(29,63,214,.3);text-underline-offset:4px;transition:text-decoration-color .2s}
.pf-more:hover{text-decoration-color:currentColor}

/* ============ MOBILE ============ */
@media (max-width:1024px){
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pf-hero{padding:140px 0 64px}
  .pf-stats{margin-top:36px;padding-top:22px}
  .pf-stats>div{padding-right:14px}
  .pf-stats>div+div{padding-left:14px}
  .pf-stats dt{font-size:2.3rem}
  .pf-stats dd{font-size:.78rem}
  .pf-grid{grid-template-columns:1fr;gap:16px}
  .pf-stage{aspect-ratio:2/1}
  .pf-body{padding:22px 22px 22px}
  .pf-name{font-size:1.75rem}
}
@media (prefers-reduced-motion:reduce){
  .pf-card,.pf-stage img{transition:none}
  .pf-card:hover{transform:none}
  .pf-card:hover .pf-stage img{transform:none}
}