/* ==========================================================
   PROGRESS — new.progressnaukajezykow.pl
   System wizualny: tokeny + typografia + hero + sekcje + spine.
   Zaklada Bootstrap 5 (grid/nav) i assets/css/fonts.css
   zaladowane PRZED tym plikiem (albo importowane ponizej).
   ========================================================== */

@import url("fonts.css");

:root{
  --navy:  #0B2A3A;
  --abyss: #071620;
  --ink:   #143845;
  --muted: #5C7683;
  --paper: #F2F6F7;
  --line:  #DCE7EA;
  --lime:  #9ACA3C;
  --teal:  #3FBB8F;
  --cyan:  #17A9D6;
  --grad: linear-gradient(115deg, var(--lime) 0%, var(--teal) 48%, var(--cyan) 100%);

  --font-display: 'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-body: 1.0625rem;
  --fs-sm:   0.9rem;
  --fs-h4:   1.375rem;
  --fs-h3:   1.75rem;
  --fs-h2:   clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h1:   clamp(2.15rem, 1.2rem + 4vw, 3.75rem);
  --fs-teaser: clamp(1.5rem, 1rem + 2.6vw, 2.75rem);

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7.5rem;

  --line-max: 38rem;
  --spine-gutter: 3.25rem; /* miejsce zarezerwowane na pionowy pasek postępu, desktop */
  --anchor-offset: 25vh; /* zapas nad sekcja przy wejsciu z #id w adresie — patrz
                             scroll-margin-top na .section nizej i scrollToPendingHash
                             w main.js (wartosc tam musi byc z tym zsynchronizowana) */
}

/* ---------- reset / base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* dla blob-a kursora, ktory moze lekko wystawac poza viewport */
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--navy);
  margin:0 0 var(--space-2);
}
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
p{ margin:0 0 var(--space-2); max-width:var(--line-max); }
p:last-child{ margin-bottom:0; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:.2em;
}

.wrap{
  max-width:68rem;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
}
@media (min-width: 992px){
  /* zostawiamy oddech po prawej na pionowy spine, zeby nic sie nie zachodzilo */
  .wrap{ padding-right:calc(var(--spine-gutter) + clamp(1.25rem, 4vw, 3rem)); }
}

/* ---------- przyciski ---------- */
.btn-progress{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  text-decoration:none; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-progress:hover{ transform:translateY(-1px); }
.btn-progress--solid{ background:var(--navy); color:#fff; }
.btn-progress--solid:hover{ background:#164156; }
.btn-progress--ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:inherit; }
.btn-progress--ghost:hover{ border-color:rgba(255,255,255,.7); }

/* ==========================================================
   TLO-GLOW — kursor (albo autonomiczny dryf na dotyku) jest
   SRODKIEM trzech nakladajacych sie gradientow radialnych, ktore
   SA tlem strony (nie plywajacym ksztaltem na wierzchu). Rozmiar
   jest CELOWO staly i niewielki, niezaleznie od tego, czy kursor
   sie rusza, czy stoi w miejscu — JS (main.js/initBlob) steruje
   wylacznie POZYCJA bloba, nigdy jego skala.
   ========================================================== */
.blob-cursor{
  position:fixed; top:0; left:0;
  width:4rem; height:4rem;
  margin:-2rem 0 0 -2rem;
  z-index:0; /* POD tresc (.section ma z-index:1) — blob miesza sie z tlem
                strony, nie z samym tekstem, ktory renderuje sie czysto
                nad nim niezaleznie od trybu mieszania kolorow */
  pointer-events:none;
  background:linear-gradient(120deg, var(--lime), var(--teal), var(--cyan), var(--lime));
  background-size:400% 400%;
  mix-blend-mode:exclusion;
  animation:blobWobble 9s ease-in-out infinite, blobShift 12s ease infinite;
}
@media (max-width: 575.98px){
  .blob-cursor{ width:2.5rem; height:2.5rem; margin:-1.25rem 0 0 -1.25rem; }
}
@keyframes blobWobble{
  0%,100%{ border-radius:43% 77% 80% 40% / 40% 40% 80% 80%; }
  20%{ border-radius:47% 73% 61% 59% / 47% 75% 45% 73%; }
  40%{ border-radius:46% 74% 74% 46% / 74% 58% 62% 46%; }
  60%{ border-radius:52% 48% 39% 61% / 40% 40% 80% 80%; }
  80%{ border-radius:50% 70% 52% 68% / 51% 61% 59% 69%; }
}
@keyframes blobShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
@media (prefers-reduced-motion: reduce){ .blob-cursor{ display:none; } }

/* ==========================================================
   SPINE — pionowy pasek postepu + mozg, globalny, cala strona.
   ========================================================== */
.progress-spine{
  position:fixed;
  top:0; right:clamp(.75rem, 2vw, 1.5rem);
  height:100vh;
  width:2.25rem;
  display:flex; flex-direction:column; align-items:center;
  z-index:20;
  pointer-events:none;
}
.progress-spine__brain{
  position:relative;
  width:1.9rem; height:1.9rem;
  margin-top:1.25rem;
  flex:0 0 auto;
}
.progress-spine__brain img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.progress-spine__brain .base{ opacity:.22; filter:grayscale(1) brightness(1.7); }
.progress-spine__brain .fill{ clip-path:inset(100% 0 0 0); }
.progress-spine__track{
  position:relative;
  flex:1 1 auto;
  width:2px;
  margin-top:.6rem;
  background:rgba(11,42,58,.12);
  border-radius:2px;
  overflow:hidden;
}
.progress-spine__fill{
  position:absolute; left:0; right:0; bottom:0;
  top:auto; height:0%;
  background:var(--grad);
  border-radius:2px;
}
@media (max-width: 991.98px){
  .progress-spine{ width:3px; right:0; }
  .progress-spine__brain{ display:none; }
  .progress-spine__track{ margin-top:0; width:3px; }
}

/* ==========================================================
   STICKY NAV — ukryta, dopoki nie wyjdziesz z hero (patrz JS)
   ========================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:15;
  background:rgba(242,246,247,.88);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .35s ease;
}
.site-nav.is-visible{ transform:translateY(0); }
.site-nav__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:.85rem; }
.site-nav__brand{ font-family:var(--font-display); font-weight:600; color:var(--navy); text-decoration:none; }
.site-nav__links{ display:flex; gap:1.25rem; font-size:.92rem; }
.site-nav__links a{ text-decoration:none; color:var(--ink); }
.site-nav__links a:hover{ color:var(--navy); }

/* ==========================================================
   HERO — plansza na cala wysokosc ekranu, tekst wysrodkowany
   w obu osiach. Cala sekwencja (niemiecki -> dekodowanie -> hint
   -> finalowy naglowek) jest przypieta i sterowana scrollem.
   ========================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh; /* prawdziwa widoczna wysokosc na mobile — 100vh tradycyjnie oznacza
                         NAJWIEKSZA mozliwa wysokosc (pasek adresu schowany), nie to, co
                         faktycznie widac. To dokladnie dlatego blad odtwarzal sie na realnym
                         telefonie, a nie w emulacji DevTools, ktora tej dynamiki nie symuluje. */
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:var(--abyss); color:#EAF3F6;
  overflow:hidden;
}
.hero.js-decode{
  height:100vh !important;
  height:100dvh !important;
  max-height:none !important;
}
.hero-stage{ position:relative; z-index:1; max-width:46rem; width:100%; padding-inline:1.5rem; }
.hero-decode-group{
  position:fixed; left:0; right:0; top:0; /* "top" ustawiany przez JS — patrz layoutHero() */
  z-index:1;
  max-width:46rem; margin-inline:auto;
  padding-inline:1.5rem;
}
.hero-final{
  position:fixed; left:0; right:0; top:0; /* "top" ustawiany przez JS po realnym
                                              zmierzeniu dolnej krawedzi cytatu —
                                              nie zgadywany procentem wysokosci */
  z-index:1;
  max-width:56rem; margin-inline:auto; /* szerszy niz hero-decode-group, zeby zmiescic zdjecie obok tekstu */
  padding-inline:1.5rem;
  text-align:left;
}
.hero-final__photo{
  position:absolute;
  left:clamp(-10rem, -6vw, -1rem);
  top:0;
}
.hero-final__photo-placeholder{
  height:clamp(16rem, 58vh, 34rem);
  width:auto;
  aspect-ratio:3 / 4;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
  border:1.5px dashed rgba(255,255,255,.35);
  border-radius:1rem;
  color:#7FA7B6;
  font-family:var(--font-mono); font-size:.7rem; text-align:center; line-height:1.4;
  padding:1rem;
}
/* .hero-final__photo-img: docelowe zdjecie (wyciete tlo, PNG). Celowo BEZ aspect-ratio —
   b.png ma inne proporcje niz placeholder (3:4), a wymuszony aspect-ratio na <img>
   rozciagnalby/scisnal obraz (domyslny object-fit:fill). Sama wysokosc + width:auto
   pozwala przegladarce policzyc szerokosc z NATURALNYCH proporcji pliku, bez znieksztalcen. */
.hero-final__photo-img{
  display:block;
  height:clamp(16rem, 58vh, 34rem);
  width:auto;
  filter:drop-shadow(0 20px 45px rgba(0,0,0,.45));
}
.hero-final__content{
  margin-left:clamp(11rem, 22vw, 18rem); /* miejsce na zdjecie wystajace w lewo, zeby tekst na nie nie nachodzil */
}
.hero-final .hero-sub{ margin-inline:0; }
.hero-final .hero-cta{ justify-content:flex-start; }
@media (max-width:575.98px){
  .hero-final{ text-align:center; }
  .hero-final__photo{ display:none; } /* A2/B2: zdjecie w hero ukryte na mobile — zostaje tylko naglowek/tekst/przyciski */
  .hero-final__content{ margin-left:0; }
  .hero-final .hero-sub{ margin-inline:auto; }
  .hero-final .hero-cta{ justify-content:center; }
  .hero-final__photo-placeholder{
    height:auto;
    width:min(65vw, 13rem, 26vh);
  }
}

.hero-decode{
  font-family:var(--font-mono);
  font-size:var(--fs-teaser);
  font-weight:500;
  color:#8FE0C4;
  margin:0;
  line-height:1.3;
  min-height:2.6em;
  max-width:none; /* nadpisuje globalne p{max-width:38rem} — patrz notatka wyzej w historii zmian */
}
.hero-decode__author{
  position:absolute; left:0; right:0; top:100%; margin-top:.65rem;
  display:block;
  font-family:var(--font-body);
  font-size:.85rem;
  color:#5C8CA0;
}
.hero.js-decode .hero-decode__author{ opacity:0; } /* JS odslania po dojsciu dekodowania do konca — imienia wlasnego nie ma sensu "dekodowac" */
.hero-hint{
  position:absolute; left:0; right:0; top:100%;
  margin-top:2.5rem; /* miejsce na linie autora ponizej cytatu, jej dlugosc jest stala, wiec staly odstep jest bezpieczny */
  font-family:var(--font-body);
  font-size:1rem;
  color:#7FA7B6;
  max-width:none;
}

.hero-final .hero-headline{
  color:#fff; font-size:var(--fs-h1); line-height:1.08; margin:0 0 var(--space-2);
  text-wrap:balance; /* mniej sierotek/bekartow w naglowku przy roznych szerokosciach ekranu */
}
.hero-headline__brand{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block;
}
.hero-sub{
  color:#B9D3DB; font-size:1.05rem; max-width:34rem; margin-inline:auto;
  text-wrap:pretty; /* gdzie wspierane: lepszy podzial linii w akapicie */
}
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top:var(--space-3); }

.hero.js-decode .hero-hint{ opacity:0; }
.hero.js-decode .hero-final{ opacity:0; transform:translateY(14px); }

.hero-stage{
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
/*.hero.js-decode.is-complete .hero-stage{
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
zakommentowane - powodowało bugi w wyświetlaniu, do przemyślenia czy nie trzeba wyciąć całkowicie
*/

.hero-scrollhint{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  z-index:1;
  color:rgba(255,255,255,.55);
  opacity:0;
  transition:opacity .6s ease;
}
.hero-scrollhint.is-visible{ opacity:1; }
.hero-scrollhint svg{ display:block; animation:scrollhint-bounce 1.8s ease-in-out infinite; }
@keyframes scrollhint-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(.35rem); }
}
.hero.js-decode.is-past .hero-scrollhint{ opacity:0 !important; }
.hero.js-decode.is-past{ overflow-y:visible; }

@media (prefers-reduced-motion: reduce){
  .hero.js-decode .hero-hint{ opacity:1; }
  .hero.js-decode .hero-final{ opacity:1; transform:none; }
  .hero-scrollhint{ display:none; }
  .blob-cursor{ display:none; }
  .progress-spine{ display:none; }
}
@media (max-width: 575.98px){
  .hero-scrollhint{ bottom:1.25rem; }
}

/* ==========================================================
   SEKCJE
   ========================================================== */
.section{
  position:relative; z-index:1; padding-block:var(--space-5);
  scroll-margin-top:var(--anchor-offset); /* patrz main.js: scrollToPendingHash() —
     zapas nad sekcja przy wejsciu z #id w adresie, zeby naglowek ladowal
     sie W SRODKU okna reveal-up, a nie tuz za jego koncem */
}
.section + .section{ border-top:1px solid var(--line); }
.section__head{ max-width:34rem; margin-bottom:var(--space-3); }

/* .reveal-up: ten sam idiom co .paced-list/.why-list li (fade + translateY
   odslaniane w rytm scrolla), tylko jako generyczna klasa do wielokrotnego
   uzytku na nowych blokach (zalozycielka / insights / profile) zamiast
   powielania tej samej logiki pod nowa nazwa za kazdym razem. */
.reveal-up{ opacity:0; transform:translateY(28px); }
@media (prefers-reduced-motion: reduce){ .reveal-up{ opacity:1; transform:none; } }

/* ==========================================================
   EXPLORE — 4 duze kafelki-przyciski do glownych podstron.
   To realne linki, wiec w odroznieniu od reszty sekcji maja
   hover-feedback — tu jest ono uzasadnione (afordancja klikalnosci),
   nie ozdoba jak przy niekilalnych kartach nizej na stronie.
   ========================================================== */
.explore-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1.25rem;
}
.explore-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.85rem;
  aspect-ratio:1;
  padding:1.5rem;
  border-radius:1rem;
  background:var(--grad);
  background-size:220% 220%;
  color:#fff; text-decoration:none; text-align:center;
  transition:background-position .4s ease, transform .2s ease;
}
.explore-tile:nth-child(1){ background-position:0% 50%; }
.explore-tile:nth-child(2){ background-position:35% 50%; }
.explore-tile:nth-child(3){ background-position:65% 50%; }
.explore-tile:nth-child(4){ background-position:100% 50%; }
.explore-tile:hover, .explore-tile:focus-visible{ transform:translateY(-3px); background-position:100% 100%; }
.explore-tile__icon{ width:2.5rem; height:2.5rem; }
.explore-tile__label{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; }
@media (max-width:767.98px){ .explore-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:575.98px){
  .explore-grid{ grid-template-columns:1fr; }
  .explore-tile{ aspect-ratio:auto; flex-direction:row; justify-content:flex-start; text-align:left; padding:1.1rem 1.25rem; }
}

.method p{ max-width:42rem; }
.method-figure{
  display:flex; align-items:center; gap:1.25rem;
  margin-top:var(--space-3);
  padding:1.25rem;
  background:#fff; border:1px solid var(--line); border-radius:1rem;
  max-width:30rem;
}
.method-figure__photo{
  width:4.5rem; height:4.5rem; border-radius:50%;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-mono); font-size:.65rem; text-align:center;
  flex:0 0 auto;
  overflow:hidden;
}
.method-figure__name{ font-family:var(--font-display); font-weight:600; color:var(--navy); }
.method-figure__role{ font-size:var(--fs-sm); color:var(--muted); }

.why-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-2);
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}
.why-list li{ position:relative; padding-left:1.15rem; max-width:30rem; }
.why-list li.reveal{ opacity:0; transform:translateY(24px); }
.why-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--grad);
}

/* ==========================================================
   FOUNDER — sekcja o zalozycielce. Zdjecie (docelowo wyciete
   tlo, PNG) "wystaje" ponad gorna krawedz sekcji (ujemny margines
   + z-index) i wychodzi na dolna czesc hero — stad zamierzony
   "hero image" efekt zamiast zwyklego, zamknietego w ramce zdjecia.
   ========================================================== */
.founder__wrap{
  display:grid;
  grid-template-columns:minmax(14rem, 20rem) 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.founder__media{ position:relative; }
.founder__photo-frame{
  position:relative;
  margin-top:-6rem; /* "wystaje" ponad gorna krawedz sekcji, na hero powyzej */
  z-index:2;
}
.founder__photo-frame::before{
  content:"";
  position:absolute; inset:-2rem;
  background:var(--grad);
  filter:blur(2.75rem);
  opacity:.32;
  border-radius:43% 77% 80% 40% / 40% 40% 80% 80%; /* echo ksztaltu .blob-cursor */
  z-index:-1;
}
.founder__photo-placeholder{
  aspect-ratio:3 / 4;
  width:min(19rem, 70vw);
  margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
  border:2px dashed rgba(11,42,58,.28);
  border-radius:1.25rem;
  background:rgba(255,255,255,.55);
  color:var(--muted);
  font-family:var(--font-mono); font-size:.78rem; text-align:center; line-height:1.5;
  padding:1.5rem;
}
/* .founder__photo: uzyte w index.html jako <img src="assets/a.png">, zamiast
   .founder__photo-placeholder — bez ramki, bo zdjecie ma juz wyciete tlo.
   Celowo bez aspect-ratio — width:auto (domyslne dla <img>) samo liczy wysokosc
   z NATURALNYCH proporcji pliku, wiec nie ma znieksztalcenia niezaleznie od
   dokladnego stosunku szerokosci do wysokosci zdjecia. */
.founder__photo{
  width:min(19rem, 70vw); margin-inline:auto; display:block;
  filter:drop-shadow(0 20px 40px rgba(7,22,32,.28));
}
.founder__name{
  margin:1.25rem 0 .1rem; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--navy);
  max-width:none;
}
.founder__role{
  margin:0; text-align:center; font-size:.85rem; color:var(--muted); max-width:none;
}
.founder__stats{
  display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap;
  width:min(19rem, 70vw); margin:1.35rem auto 0;
}
.founder__stat{ text-align:center; }
.founder__stat b{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:1.5rem; color:var(--navy); line-height:1;
}
.founder__stat span{ display:block; margin-top:.3rem; font-size:.7rem; color:var(--muted); line-height:1.3; }
.founder__lead{
  font-family:var(--font-display); font-weight:500; font-size:1.2rem; color:var(--navy);
}
.founder__credential{
  margin:var(--space-3) 0;
  padding-left:1.1rem;
  border-left:3px solid var(--teal);
}
.founder__credential-label{
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted); margin:0 0 .35rem;
}
.founder__credential-title{ font-style:italic; color:var(--ink); margin:0; max-width:none; }
/* .cta-box: generyczny "nastepny krok" box (delikatnie inne tlo, lewy gradientowy
   pasek, wyrazny przycisk) — uzywany tutaj i ponownie na koncu sekcji profili. */
.cta-box{
  position:relative;
  max-width:38rem; margin:var(--space-4) auto 0;
  padding:1.5rem 1.75rem 1.5rem 2rem;
  background:rgba(63,187,143,.06);
}
.cta-box::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad);
}
.cta-box p{ margin-bottom:1rem; }
@media (max-width:767.98px){
  .founder__wrap{ grid-template-columns:1fr; }
  .founder__photo-frame{ margin-top:-3rem; }
}

/* ==========================================================
   CTA-CONSULT — samodzielna sekcja z zaproszeniem na bezplatna
   konsultacje, miedzy zalozycielka a oferta. Ciemny motyw (jak
   hero/insights). To ten sam .cta-box co reszta strony (lewy
   gradientowy pasek + wyrazny przycisk), tylko z kolorami
   dopasowanymi do ciemnego tla i bez gornego marginesu — sekcja
   ma juz wlasny padding-block z .section.
   ========================================================== */
.cta-consult{ background:var(--abyss); color:#EAF3F6; }
.cta-consult .cta-box{
  margin:0 auto;
  background:rgba(255,255,255,.06);
}
.cta-consult .cta-box p{ color:#EAF3F6; }

/* ==========================================================
   INSIGHTS — "czy wiesz, ze" ciekawostki z neurolingwistyki,
   tlo abyss (jak hero). Karty jako mini-notki badawcze: naroznikowe
   "nawiasy" zamiast zaokraglonej ramki + cienia, numer w stopce
   dziala jak prawdziwy odnosnik do przypisu (nie ozdoba).
   TRESC PONIZEJ TO CELOWO LOREM IPSUM — podmienic po research.
   ========================================================== */
.insights{ background:var(--abyss); color:#EAF3F6; }
.insights .section__head{ color:#fff; max-width:38rem; }
.insights h2{ color:#fff; }
.insight-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--space-3); margin-top:var(--space-3);
}
.insight-card{
  position:relative;
  padding:1.75rem 1.5rem 1.5rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:.4rem;
}
.insight-card::before, .insight-card::after{
  content:""; position:absolute; top:-1px; width:1.1rem; height:1.1rem;
  border-top:2px solid var(--teal);
}
.insight-card::before{ left:-1px; border-left:2px solid var(--teal); }
.insight-card::after{ right:-1px; border-right:2px solid var(--cyan); }
.insight-card__claim{
  font-family:var(--font-display); font-weight:500; font-size:1.15rem;
  color:#fff; margin:0 0 .75rem; max-width:none;
}
.insight-card__body{ color:#B9D3DB; font-size:.95rem; margin:0; max-width:none; }
.insight-card__cite{
  margin:1.1rem 0 0; padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--font-mono); font-size:.75rem; color:#5C8CA0; max-width:none;
}
.insight-card__cite-num{ display:inline-block; margin-right:.5rem; color:#8FE0C4; }
.insight-card__cite a{ text-decoration:underline; text-underline-offset:2px; }
.insight-card__cite a:hover, .insight-card__cite a:focus-visible{ color:#8FE0C4; }
.insight-punchline{
  text-align:center; margin-top:var(--space-4);
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); color:#fff;
}
@media (max-width:767.98px){ .insight-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   PROFILES — "dla kogo", tlo paper. Nie karty w stylu insights
   (zeby trzy sekcje pod rzad nie uzywaly tej samej formy) — blok
   tekstu z lewym akcentem, ten sam jezyk co kropki w .paced-list/
   .why-list (marker w kolorze marki), tylko przelozony na uklad
   blokowy zamiast listy wypunktowanej.
   ========================================================== */
.profiles__intro{ margin-top:.5rem; }
.profile-list{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--space-3) var(--space-4);
  margin-top:var(--space-3);
}
.profile-block{ padding-left:1.1rem; border-left:2px solid var(--teal); }
.profile-block:nth-child(3n+2){ border-left-color:var(--cyan); }
.profile-block:nth-child(3n){ border-left-color:var(--lime); }
.profile-block__q{
  font-family:var(--font-display); font-weight:500; font-size:1.2rem;
  color:var(--navy); margin:0 0 .5rem;
}
.profile-block__a{ margin:0; }
@media (max-width:767.98px){ .profile-list{ grid-template-columns:1fr; } }

/* ==========================================================
   CREDENTIALS — certyfikaty/szkolenia: siatka miniatur realnych
   skanow (assets/cert/NN.jpg), klikanych do powiekszenia w
   lightboksie. Ciemny motyw (jak hero/insights). Bez opisow pod
   miniaturami — podpis pojawia sie dopiero w lightboksie.
   ========================================================== */
.credentials{ background:var(--abyss); color:#EAF3F6; }
.credentials .section__head{ color:#fff; }
.credentials h2{ color:#fff; }
.credentials-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.25rem; margin-top:var(--space-3);
}
.credential-thumb{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:2481 / 3509; /* proporcje skanow (A4, 300 dpi) — miejsce jest zarezerwowane,
                               zanim obraz sie doczyta, wiec lazy-loading nie przesuwa layoutu
                               (a ScrollTrigger liczy pozycje na ostatecznych wymiarach) */
  border:1px solid rgba(255,255,255,.18);
  border-radius:.5rem;
  background:rgba(255,255,255,.06);
  text-decoration:none;
  cursor:zoom-in;
  transition:border-color .2s ease;
}
.credential-thumb:hover, .credential-thumb:focus-visible{ border-color:var(--teal); }
.credential-thumb img{ width:100%; height:100%; object-fit:cover; }
/* znaczek lupy: afordancja "to sie powieksza" — przy hoverze/fokusie, a na dotyku (brak hovera) staly */
.credential-thumb__zoom{
  position:absolute; right:.6rem; bottom:.6rem;
  width:2.25rem; height:2.25rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(7,22,32,.78); color:#fff;
  opacity:0; transition:opacity .2s ease;
}
.credential-thumb:hover .credential-thumb__zoom,
.credential-thumb:focus-visible .credential-thumb__zoom{ opacity:1; }
@media (hover:none){ .credential-thumb__zoom{ opacity:1; } }
@media (max-width:767.98px){ .credentials-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:575.98px){ .credentials-grid{ gap:.75rem; } }

/* ==========================================================
   LIGHTBOX — podglad certyfikatu na caly ekran. Domyslnie skan
   jest dopasowany do okna (widac calosc); klik / przycisk lupy
   powieksza go do ok. 1600 px szerokosci (max. rozmiar oryginalu),
   a wtedy mozna go przewijac lub przeciagac (mysz), zeby odczytac
   drobny druk. Logika: initCredentialsLightbox() w main.js.
   ========================================================== */
.lightbox{
  --lb-pad-t:3.75rem; --lb-pad-b:4.5rem; --lb-pad-x:5rem;
  position:fixed; inset:0; z-index:50;
  background:rgba(7,22,32,.94);
  opacity:0; visibility:hidden; pointer-events:none; /* visibility (nie tylko opacity), zeby przyciski
                                                         zamknietego lightboxa nie lapaly fokusu z Tab */
  transition:opacity .25s ease, visibility 0s linear .25s;
  touch-action:none;
}
.lightbox.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .25s ease, visibility 0s;
}
.lightbox__stage{
  position:absolute; inset:0;
  display:flex; /* margin:auto na obrazku wysrodkowuje go, a przy powiekszeniu nie ucina lewej/gornej krawedzi */
  padding:var(--lb-pad-t) var(--lb-pad-x) var(--lb-pad-b);
  overflow:hidden;
  touch-action:none;
}
.lightbox.is-zoomed .lightbox__stage{
  overflow:auto;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y;
}
.lightbox__img{
  display:block; flex:none; margin:auto;
  width:auto; height:auto;
  max-width:100%;
  max-height:calc(100vh - var(--lb-pad-t) - var(--lb-pad-b));
  max-height:calc(100dvh - var(--lb-pad-t) - var(--lb-pad-b));
  background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  cursor:zoom-in;
  user-select:none; -webkit-user-select:none;
  transition:opacity .2s ease;
}
.lightbox.is-zoomed .lightbox__img{
  max-width:none; max-height:none;
  width:min(2481px, max(1600px, 100vw)); /* nie wiecej niz natywne 2481 px oryginalu */
  cursor:zoom-out;
}
.lightbox.is-dragging .lightbox__img{ cursor:grabbing; }
.lightbox.is-loading .lightbox__img{ opacity:0; }
.lightbox__spinner{
  position:absolute; top:50%; left:50%;
  width:2rem; height:2rem; margin:-1rem 0 0 -1rem;
  border:2px solid rgba(255,255,255,.2); border-top-color:var(--teal); border-radius:50%;
  opacity:0; pointer-events:none;
  animation:lightbox-spin .8s linear infinite;
}
.lightbox.is-loading .lightbox__spinner{ opacity:1; transition:opacity .2s ease .2s; } /* opoznienie: brak mignieciu przy szybkim (cache) ladowaniu */
@keyframes lightbox-spin{ to{ transform:rotate(360deg); } }

.lightbox__btn{
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; padding:0;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.12); color:#EAF3F6;
  cursor:pointer;
  transition:background-color .15s ease;
}
.lightbox__btn:hover{ background:rgba(255,255,255,.22); }
.lightbox__btn svg{ display:block; width:1.35rem; height:1.35rem; }
.lightbox__tools{ position:absolute; top:.75rem; right:.75rem; display:flex; gap:.5rem; }
.lightbox__zoom .icon-zoom-out{ display:none; }
.lightbox.is-zoomed .lightbox__zoom .icon-zoom-in{ display:none; }
.lightbox.is-zoomed .lightbox__zoom .icon-zoom-out{ display:block; }
.lightbox__nav{ position:absolute; top:50%; margin-top:-1.375rem; }
.lightbox__nav--prev{ left:1rem; }
.lightbox__nav--next{ right:1rem; }
.lightbox.is-single .lightbox__nav, .lightbox.is-single .lightbox__counter{ display:none; }
.lightbox__bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:.85rem 5rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  text-align:center;
  pointer-events:none; /* klik w tlo/podpis nadal trafia w .lightbox__stage (zamkniecie) */
}
.lightbox__caption{ margin:0; color:#EAF3F6; font-weight:500; max-width:none; }
.lightbox__counter{ margin:0; font-family:var(--font-mono); font-size:.75rem; color:#5C8CA0; max-width:none; }
@media (max-width:767.98px){
  .lightbox{ --lb-pad-t:3.5rem; --lb-pad-b:4.75rem; --lb-pad-x:.75rem; }
  .lightbox__nav{ top:auto; bottom:.75rem; margin-top:0; } /* strzalki schodza do dolu, obok podpisu */
  .lightbox__nav--prev{ left:.75rem; }
  .lightbox__nav--next{ right:.75rem; }
  .lightbox__bar{ padding:.85rem 4.5rem 1.25rem; }
}

footer.site-footer{
  position:relative; z-index:1; padding-block:var(--space-4);
  color:var(--muted); font-size:.88rem; text-align:center;
}
footer.site-footer a{ text-decoration:underline; text-underline-offset:2px; }

@media (max-width: 575.98px){
  .hero{ padding-block:var(--space-4); min-height:auto; }
}