/* ============ Archivo Black — self-hosted (RODO: bez Google Fonts CDN) ============ */
/* latin-ext (polskie znaki) */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ PFS landing — scoped under .pfs ============ */
.pfs *,.pfs *::before,.pfs *::after{box-sizing:border-box}
.pfs{
  --teal:#1cb5b5; --teal-dark:#0e7c7c; --teal-soft:#e6f7f7;
  --yellow:#ffc72c; --blue:#1f5fd1; --blue-soft:#eaf1ff;
  --red:#e63946; --ink:#0b1320; --cream:#fbfaf6; --gray:#eef0f3;
  --f-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-disp:"Archivo Black",system-ui,sans-serif;
  background:var(--cream); color:var(--ink); font-family:var(--f-body);
  -webkit-font-smoothing:antialiased; line-height:1.4;
}
.pfs img{max-width:100%; display:block}
.pfs a{color:inherit; text-decoration:none}
.pfs button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
.pfs h1,.pfs h2,.pfs h3,.pfs h4{margin:0; font-family:var(--f-disp); font-style:italic; text-transform:uppercase; letter-spacing:-.01em}
.pfs p{margin:0}
.pfs ::selection{background:var(--yellow); color:var(--ink)}

.pfs-wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.pfs-eyebrow{font-family:var(--f-disp); color:var(--blue); font-size:13px; letter-spacing:.18em}
.pfs-section{padding:80px 20px}
@media (min-width:640px){ .pfs-section{padding:112px 20px} }

/* Hero */
.pfs-hero{position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--teal); color:#fff}
.pfs-hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; mix-blend-mode:luminosity}
.pfs-hero__grad{position:absolute; inset:0; background:linear-gradient(to top, var(--teal-dark), rgba(28,181,181,.7) 60%, rgba(28,181,181,.4))}
.pfs-hero__dots{position:absolute; inset:0; opacity:.2; background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0); background-size:22px 22px}
.pfs-hero__inner{position:relative; z-index:1; max-width:1120px; margin:0 auto; width:100%; padding:112px 20px 64px}
.pfs-hero h1{font-size:clamp(48px, 9vw, 128px); line-height:.9; margin-bottom:24px; text-shadow:0 4px 20px rgba(0,0,0,.25)}
.pfs-hero h1 span{color:var(--yellow)}
.pfs-hero__sub{font-size:clamp(17px,2vw,22px); color:rgba(255,255,255,.95); max-width:640px; margin-bottom:32px; font-weight:500}
.pfs-btn-row{display:flex; flex-wrap:wrap; gap:12px}
.pfs-btn{display:inline-block; padding:16px 28px; border-radius:18px; font-family:var(--f-disp); text-transform:uppercase; letter-spacing:-.01em; font-size:16px; transition:transform .15s, filter .15s, background .15s}
.pfs-btn:active{transform:scale(.96)}
.pfs-btn--primary{background:var(--yellow); color:var(--ink); box-shadow:0 20px 40px rgba(0,0,0,.2)}
.pfs-btn--primary:hover{filter:brightness(1.1)}
.pfs-btn--ghost{background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(6px); font-family:var(--f-body); font-weight:700; text-transform:none; letter-spacing:0}
.pfs-btn--ghost:hover{background:rgba(255,255,255,.25)}
.pfs-btn--dark{background:var(--ink); color:#fff; padding:20px 32px; font-size:18px; box-shadow:0 20px 40px rgba(0,0,0,.15)}
.pfs-btn--dark:hover{transform:scale(1.03)}

/* Differentiators */
.pfs-diff{background:var(--gray)}
.pfs-head{max-width:640px; margin-bottom:48px}
.pfs-head h2{font-size:clamp(28px,4vw,54px); line-height:1.05; margin-top:12px}
.pfs-hl-teal{color:var(--teal)}
.pfs-hl-blue{color:var(--blue)}
.pfs-hl-yellow{color:var(--yellow)}
.pfs-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:640px){ .pfs-grid--diff{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .pfs-grid--diff{grid-template-columns:repeat(3,1fr)} }
.pfs-card{background:var(--cream); border:1px solid rgba(0,0,0,.05); border-radius:24px; padding:28px; transition:transform .2s, box-shadow .2s, border-color .2s}
.pfs-card:hover{transform:translateY(-4px); border-color:rgba(28,181,181,.4); box-shadow:0 10px 30px rgba(0,0,0,.06)}
.pfs-card--accent{background:var(--teal); color:#fff; border:0; box-shadow:0 20px 40px rgba(28,181,181,.2)}
@media (min-width:640px){ .pfs-card--wide{grid-column:span 2} }
@media (min-width:1024px){ .pfs-card--wide{grid-column:span 1} }
.pfs-card__emoji{font-size:36px; margin-bottom:20px; transition:transform .2s; transform-origin:left}
.pfs-card:hover .pfs-card__emoji{transform:scale(1.1)}
.pfs-card h3{font-size:20px; margin-bottom:8px}
.pfs-card p{font-size:14px; opacity:.75; line-height:1.55}
.pfs-card--accent p{opacity:.95; color:#fff}

/* Missions */
.pfs-missions{background:var(--teal-soft)}
.pfs-missions__layout{display:grid; grid-template-columns:1fr; gap:24px; align-items:stretch}
@media (min-width:1024px){ .pfs-missions__layout{grid-template-columns:1fr 1.3fr} }
.pfs-mlist{display:flex; flex-direction:column; gap:12px}
.pfs-mbtn{display:flex; align-items:center; gap:16px; text-align:left; padding:20px; border-radius:20px; background:rgba(255,255,255,.6); border:1px solid #fff; transition:background .15s, box-shadow .15s}
.pfs-mbtn:hover{background:#fff}
.pfs-mbtn.is-active{background:#fff; box-shadow:0 20px 40px rgba(0,0,0,.08)}
.pfs-mbtn__code{flex-shrink:0; width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-family:var(--f-disp); font-size:18px; background:var(--teal-soft); color:var(--teal-dark)}
.pfs-mbtn.is-active .pfs-mbtn__code{color:#fff}
.pfs-mbtn.is-active[data-a="teal"] .pfs-mbtn__code{background:var(--teal)}
.pfs-mbtn.is-active[data-a="yellow"] .pfs-mbtn__code{background:var(--yellow); color:var(--ink)}
.pfs-mbtn.is-active[data-a="blue"] .pfs-mbtn__code{background:var(--blue)}
.pfs-mbtn.is-active[data-a="red"] .pfs-mbtn__code{background:var(--red)}
.pfs-mbtn__title{font-family:var(--f-disp); font-style:italic; text-transform:uppercase; font-size:15px; line-height:1.15}
.pfs-mbtn__hint{font-size:12px; margin-top:4px; color:rgba(11,19,32,.45)}
.pfs-mbtn.is-active .pfs-mbtn__hint{color:rgba(11,19,32,.6)}
.pfs-mstage{position:relative; border-radius:24px; overflow:hidden; min-height:360px; box-shadow:0 20px 40px rgba(0,0,0,.1)}
@media (min-width:640px){ .pfs-mstage{min-height:480px} }
.pfs-mstage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .4s}
.pfs-mstage__grad{position:absolute; inset:0; background:linear-gradient(to top, var(--ink), rgba(11,19,32,.4) 55%, transparent)}
.pfs-mstage__cap{position:absolute; inset:auto 0 0 0; padding:28px; color:#fff}
.pfs-mstage__cap h3{font-size:clamp(22px,3vw,36px); line-height:1.1; margin-bottom:8px}
.pfs-mstage__cap p{max-width:420px; color:rgba(255,255,255,.85)}

/* Benefits */
.pfs-benefits{background:var(--yellow); color:var(--ink)}
.pfs-benefits h2{font-size:clamp(28px,5.5vw,72px); line-height:.95; max-width:720px}
.pfs-blist{display:grid; gap:14px; list-style:none; padding:0; margin:0}
.pfs-blist li{display:flex; align-items:center; gap:20px; background:var(--ink); color:#fff; padding:20px; border-radius:18px; transition:transform .2s}
.pfs-blist li:hover{transform:translateX(4px)}
.pfs-blist .ico{font-size:28px; flex-shrink:0}
.pfs-blist .txt{font-family:var(--f-disp); font-style:italic; text-transform:uppercase; font-size:clamp(15px,2vw,24px); line-height:1.15}
.pfs-blist .num{margin-left:auto; font-family:var(--f-disp); color:var(--yellow); font-size:20px}

/* Voices */
.pfs-voices{background:#fff}
.pfs-vgrid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:640px){ .pfs-vgrid{grid-template-columns:1fr 1fr; gap:20px} }
.pfs-vcell{border-radius:24px; padding:20px; border:1px solid rgba(0,0,0,.05)}
.pfs-vcell[data-tint="teal"]{background:var(--teal-soft)}
.pfs-vcell[data-tint="cream"]{background:var(--cream)}
.pfs-vcell[data-tint="blue"]{background:var(--blue-soft)}
.pfs-bubble{display:flex; align-items:flex-end; gap:8px}
.pfs-avatar{flex-shrink:0; width:40px; height:40px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-disp); text-transform:uppercase; font-size:14px; box-shadow:0 4px 10px rgba(0,0,0,.15)}
.pfs-vc{display:flex; flex-direction:column; min-width:0; flex:1}
.pfs-vc__name{font-size:11px; font-weight:600; color:rgba(11,19,32,.6); margin-bottom:4px; padding-left:4px}
.pfs-msg{color:#fff; border-radius:24px; border-bottom-left-radius:8px; padding:12px; display:flex; align-items:center; gap:12px; box-shadow:0 10px 24px rgba(0,0,0,.1)}
.pfs-play{flex-shrink:0; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.95); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .12s}
.pfs-play:hover{transform:scale(1.05)}
.pfs-play:active{transform:scale(.95)}
.pfs-play svg{width:14px; height:14px}
.pfs-wave{display:flex; align-items:center; gap:3px; height:32px; flex:1}
.pfs-wave span{width:3px; border-radius:2px; background:rgba(255,255,255,.85); transform-origin:center; transform:scaleY(.5); animation:pfs-wave 1.1s ease-in-out infinite paused}
.pfs-msg.is-play .pfs-wave span{animation-play-state:running}
.pfs-vcell[data-tint="cream"] .pfs-wave span{background:rgba(11,19,32,.7)}
@keyframes pfs-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.pfs-time{flex-shrink:0; font-size:12px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.9); font-family:ui-monospace,Menlo,Consolas,monospace}
.pfs-vcell[data-tint="cream"] .pfs-time{color:rgba(11,19,32,.7)}
.pfs-vnote{margin-top:32px; text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:rgba(11,19,32,.4); font-family:ui-monospace,Menlo,Consolas,monospace}

/* Vibe */
.pfs-vibe{background:#fff; overflow:hidden; padding:80px 0}
@media (min-width:640px){ .pfs-vibe{padding:112px 0} }
.pfs-vibe__head{max-width:1120px; margin:0 auto 40px; padding:0 20px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.pfs-vibe__head h2{font-size:clamp(28px,4vw,54px); line-height:1.05; margin-top:12px}
.pfs-vibe__hint{display:none; font-size:12px; color:rgba(11,19,32,.4); text-transform:uppercase; letter-spacing:.2em; font-family:ui-monospace,Menlo,Consolas,monospace}
@media (min-width:640px){ .pfs-vibe__hint{display:block} }
.pfs-scroller{display:flex; gap:16px; overflow-x:auto; padding:0 20px 32px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.pfs-scroller::-webkit-scrollbar{height:6px}
.pfs-scroller::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15); border-radius:999px}
.pfs-vcard{position:relative; flex-shrink:0; width:78vw; aspect-ratio:3/4; border-radius:24px; overflow:hidden; scroll-snap-align:center; box-shadow:0 10px 30px rgba(0,0,0,.1)}
@media (min-width:640px){ .pfs-vcard{width:340px} }
.pfs-vcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s}
.pfs-vcard:hover img{transform:scale(1.05)}
.pfs-vcard__grad{position:absolute; inset:0; background:linear-gradient(to top, var(--ink), transparent)}
.pfs-vcard__cap{position:absolute; left:20px; right:20px; bottom:20px; color:#fff}
.pfs-vcard__code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:var(--yellow)}
.pfs-vcard__label{font-family:var(--f-disp); font-style:italic; text-transform:uppercase; font-size:18px; line-height:1.1; margin-top:4px}
.pfs-quotes{max-width:1120px; margin:40px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:640px){ .pfs-quotes{grid-template-columns:repeat(3,1fr)} }
.pfs-quote{background:var(--cream); border-left:4px solid var(--teal); border-radius:16px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,.04)}
.pfs-quote blockquote{margin:0; color:rgba(11,19,32,.9); font-weight:500; line-height:1.35}
.pfs-quote figcaption{margin-top:16px; font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:var(--blue); font-weight:700}

/* Practical */
.pfs-practical{background:var(--teal-soft)}
.pfs-practical .pfs-grid{grid-template-columns:1fr; gap:12px}
@media (min-width:640px){ .pfs-practical .pfs-grid{grid-template-columns:1fr 1fr} }
.pfs-qa{background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:18px; padding:24px; transition:border-color .15s, box-shadow .15s}
.pfs-qa:hover{border-color:rgba(28,181,181,.5); box-shadow:0 6px 18px rgba(0,0,0,.05)}
.pfs-qa h4{font-family:var(--f-disp); font-style:normal; font-size:15px; color:var(--teal-dark); margin-bottom:8px; text-transform:uppercase}
.pfs-qa p{font-size:14px; color:rgba(11,19,32,.75); line-height:1.55}
.pfs-practical__note{margin-top:32px; text-align:center; color:rgba(11,19,32,.6); font-size:14px}

/* Rewards */
.pfs-rewards{background:var(--blue); color:#fff}
.pfs-rewards__grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center}
@media (min-width:1024px){ .pfs-rewards__grid{grid-template-columns:1fr 1fr} }
.pfs-rewards__img{position:relative; aspect-ratio:1/1; border-radius:24px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.2); order:2}
@media (min-width:1024px){ .pfs-rewards__img{order:1} }
.pfs-rewards__img img{width:100%; height:100%; object-fit:cover}
.pfs-rewards__txt{order:1}
@media (min-width:1024px){ .pfs-rewards__txt{order:2} }
.pfs-rewards .pfs-eyebrow{color:var(--yellow)}
.pfs-rewards h2{font-size:clamp(28px,5.5vw,72px); line-height:.95; margin:12px 0 24px}
.pfs-rewards h2 span{color:var(--yellow)}
.pfs-rewards__lead{color:rgba(255,255,255,.85); font-size:18px; line-height:1.5; margin-bottom:32px; max-width:520px}
.pfs-tags{display:flex; flex-wrap:wrap; gap:12px}
.pfs-tag{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600}

/* FAQ */
.pfs-faq{background:#fff}
.pfs-faq__head{max-width:720px; margin:0 auto 40px; text-align:center}
.pfs-faq__head h2{font-size:clamp(28px,4vw,54px); line-height:1.05; margin-top:12px}
.pfs-faq__list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.pfs-faq__item{border-radius:18px; border:1px solid rgba(0,0,0,.05); background:var(--cream); transition:background .15s, border-color .15s}
.pfs-faq__item.is-open{background:var(--teal-soft); border-color:var(--teal)}
.pfs-faq__q{width:100%; text-align:left; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--f-disp); font-style:italic; text-transform:uppercase; font-size:15px; letter-spacing:-.01em}
.pfs-faq__plus{flex-shrink:0; width:32px; height:32px; border-radius:999px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; transition:transform .2s}
.pfs-faq__item.is-open .pfs-faq__plus{transform:rotate(45deg)}
.pfs-faq__a{max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 24px}
.pfs-faq__item.is-open .pfs-faq__a{max-height:400px; padding-bottom:24px}
.pfs-faq__a p{font-size:14px; color:rgba(11,19,32,.75); line-height:1.55}

/* Final CTA */
.pfs-cta{background:var(--yellow); color:var(--ink); position:relative; overflow:hidden; padding:96px 20px}
@media (min-width:640px){ .pfs-cta{padding:128px 20px} }
.pfs-cta__dots{position:absolute; inset:0; opacity:.3; background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,.35) 1px, transparent 0); background-size:22px 22px}
.pfs-cta__inner{position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center}
.pfs-cta__chip{display:inline-block; background:var(--ink); color:var(--yellow); padding:4px 14px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; margin-bottom:24px}
.pfs-cta h2{font-size:clamp(36px,7vw,96px); line-height:.95; margin-bottom:24px}
.pfs-cta h2 span{color:var(--blue)}
.pfs-cta__lead{color:rgba(11,19,32,.8); font-size:18px; margin:0 auto 40px; max-width:520px; font-weight:500}

/* =========================================================================
   KONIEC CSS PRZENIESIONEGO 1:1 Z PROJEKTU.
   Poniżej jedyne świadome odstępstwo — patrz specyfikacja §6.5.

   Poprawka poziomego scrolla na telefonach. W projekcie waveform (34 słupki
   po 3px + 33 odstępy po 3px = 201px minimalnej szerokości) jako element flex
   nie mógł się skurczyć poniżej swojej treści i rozpychał dymek poza ekran:
   przy oknie 375px strona miała 456px szerokości i przewijała się w bok.
   Autor projektu widział ten problem połowicznie — dał min-width:0 na .pfs-vc,
   ale pominął .pfs-vcell (element gridu, domyślnie min-width:auto) i .pfs-wave.

   flex-shrink:0 na słupkach jest konieczne: bez niego same odstępy (99px)
   przekraczają dostępne ~88px, słupki kurczą się do zera i waveform znika.
   Z przycinaniem widać 15 z 34 słupków. Desktop bez zmian — tam waveform ma
   243px, czyli więcej niż 201px potrzebne na komplet słupków.
   ========================================================================= */
.pfs-vcell{min-width:0}
.pfs-wave{min-width:0; overflow:hidden}
.pfs-wave span{flex-shrink:0}

/* =========================================================================
   Pasek logotypów FE / RP / UE + wartość projektu (FERS), na samej górze.
   Odtwarza klasy Tailwinda z template-parts/topbar-fers.php jako scoped CSS,
   bo landing nie ładuje main.css. Markup w template-parts/uczniow/fers-bar.php.
   ========================================================================= */
.pfs-fers{background:#f3f4f6; color:var(--ink); font-family:var(--f-body); font-size:12px; line-height:1.4; width:100%}
.pfs-fers__inner{display:flex; flex-wrap:wrap; gap:32px; padding:32px 48px; justify-content:center; align-items:center; margin:0 auto}
@media (min-width:768px){ .pfs-fers__inner{padding:16px 48px} }
.pfs-fers svg{display:block; flex-shrink:0; height:auto}
.pfs-fers__sep{width:1px; height:40px; background:#d1d5db; display:none; flex-shrink:0}
@media (min-width:768px){ .pfs-fers__sep{display:block} }
.pfs-fers__txt b{font-weight:700}