/* ============================================================
   home.css - strona glowna (index.html). Przebudowa od podstaw 2026-10-07.

   Narracja (StoryBrand): hero (kim jestesmy i co robimy) -> problem klienta
   z danymi -> nasza przewaga (trzy kompetencje) -> misja -> od czego zaczac
   (sciezki + Kompas) -> plan w czterech etapach -> dowody -> FAQ -> kontakt.

   Jeden motyw ruchu na calej stronie: linia, ktora sie wypelnia (wykres pod
   danymi, postep etapow) i rzeczy, ktore sie zbiegaja (diagram kompetencji).
   Ruch tylko transform i opacity, zawsze z wersja dla "ogranicz ruch"
   (stan poczatkowy wlacza klasa .js-reveal, ktorej przy ograniczonym ruchu nie ma).

   Hero, pasek logotypow, opinie, FAQ i CTA to komponenty z base.css.
   Mapa Kompasu: assets/css/kompas-mapa.css. Fonty wylacznie z tokenow base.css.
   ============================================================ */

/* ---------- Rytm: sekcje strony glownej oddychaja bardziej niz domyslne --sec-y ---------- */
.hm-sec{padding:clamp(var(--s8), 40px + 4vw, var(--s16)) 0;}

/* ---------- Naglowek sekcji: pionowo, bez podpisu w rogu ---------- */
.hm-head{max-width:880px;margin-bottom:var(--s8);}
.hm-head .mono{display:block;margin-bottom:var(--s3);}
.hm-head .lead{margin-top:var(--s3);max-width:60ch;}
/* akcent drugiej czesci naglowka: ten sam gradient co .sec-head h2 b w base.css */
.hm-head h2 b,.hm-mission-head h2 b{font-weight:500;background-image:var(--fn-accent);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:gradDrift 18s ease-in-out infinite;}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .hm-head h2 b,.hm-mission-head h2 b{color:var(--acc-2);}
}

/* ---------- 1. Hero: pierwotny komponent z base.css, inna tresc ----------
   Bez malego logo nad haslem (2026-10-07: "malutkie logo nie pasuje"): marke niesie logo
   w nawigacji i duze "A" w tle zdjecia, a nazwa i kategoria stoja w etykiecie nad h1.
   Zdjecie bez zmian (ten sam plik, srcset i kadr). */
.hm-hero-kicker{display:block;margin-bottom:var(--s3);}
/* Zdjecie dosuniete do dolnej krawedzi hero (bez przycinania i bez obrobki). Kontener 21:9 liczy
   proporcje razem z bocznym paddingiem, wiec jest o ok. 3% nizszy niz zdjecie 2000x857 i object-fit:contain
   zostawial pusty pasek miedzy zdjeciem a paskiem logotypow (2026-10-07). Teraz ewentualny pasek jest
   na samej gorze, pod przyklejona nawigacja. Tylko uklad desktopowy: telefon i niskie okna maja
   w base.css wlasne kadrowanie. */
@media (min-aspect-ratio:11/10) and (min-width:640px) and (min-height:701px){
  .hero-photo{object-position:right bottom;}
  .hero-photo-light{background-position:right bottom;}
}
@media (min-aspect-ratio:11/10) and (min-width:640px) and (min-height:701px) and (max-width:900px){
  .hero-photo-light{background-position:center bottom;}
}
@media(min-width:1001px){
  .hero-text-col{min-height:auto;align-items:center;padding-top:120px;padding-bottom:56px;}
  .hero-main{max-width:min(48%,600px);}
  .hero-main h1{max-width:none;}
  .hero-main .lead{max-width:52ch;}
}

/* ---------- 2. Problem: manifest + dane ----------
   Manifest to h2 sekcji. Slowa przygasza psai.js ([data-manifest] -> .is-scrub, style
   w base.css), wiec bez skryptu tekst jest w pelnym kolorze. */
.hm-manifest{max-width:30ch;margin-bottom:var(--s12);}

/* Wiersze danych: liczba ze wskaznikiem po lewej, objaw i zrodlo po prawej.
   Wskaznik ma widoczny tor (0-100%), zeby czytal sie jak wykres, a nie urwana linia. */
.hm-data{list-style:none;max-width:1040px;margin:0;padding:0;border-top:1px solid var(--ink-80);}
.hm-data li{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--s3) var(--s8);align-items:start;
  padding:var(--s4) 0;border-bottom:1px solid var(--ink-80);}
.hm-data-fig{display:grid;gap:12px;}
.hm-data-num{font-family:var(--mono);font-size:var(--fs-stat-num);font-weight:500;line-height:1;letter-spacing:-.02em;
  color:var(--white);white-space:nowrap;}
.hm-data-num small{margin:0 6px;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-50);vertical-align:middle;}
.hm-meter{display:block;height:4px;border-radius:2px;background:var(--ink-80);overflow:hidden;}
.hm-meter i{display:block;height:100%;background:var(--fn-accent);transform-origin:left center;transform:scaleX(var(--v));
  transition:transform 1200ms var(--ease) calc(var(--d,0ms) + 250ms);}
.hm-meter.is-low i{background:var(--grey-50);}
.hm-meter-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:center;gap:12px;}
.hm-meter-row small{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);}
.js-reveal .hm-data li:not(.visible) .hm-meter i{transform:scaleX(0);}
.hm-data-txt h3{margin:0 0 8px;font-size:var(--fs-card-h-lg);font-weight:500;line-height:1.3;letter-spacing:-.01em;}
.hm-data-txt p{max-width:52ch;color:var(--grey-30);font-size:var(--fs-body);line-height:1.55;}
.hm-data cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:var(--fs-label-sm);
  text-transform:uppercase;letter-spacing:.06em;}
.hm-data cite a{color:var(--grey-50);}
.hm-data cite a:hover{color:var(--white);}
.hm-bridge{max-width:52ch;margin-top:var(--s6);font-size:var(--fs-lead);color:var(--white);}

/* ---------- 3. Przewaga: diagram trzech kompetencji + wiersze ----------
   Kazda kompetencja ma jeden kolor z gradientu marki (fiolet, blekit, turkus); w czesci
   wspolnej wszystkich trzech gradient powoli sie obraca, a na nim znak PSAI.
   Wejscie (animacje CSS, nie przejscia, zeby opoznienia nie spowalnialy potem hovera):
   kola zbiegaja sie do srodka i jednoczesnie rysuja obrys, potem wyrasta czesc wspolna.
   Wskazanie wiersza podswietla jego kolo i przygasza reszte (home.js ustawia data-on). */
.hm-trio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center;}
.hm-venn{width:100%;max-width:520px;margin:0;}
.hm-venn svg{display:block;width:100%;height:auto;overflow:visible;}
.hm-c{fill-opacity:.08;stroke-width:1.1;
  transition:fill-opacity 450ms var(--ease),stroke-opacity 450ms var(--ease);}
.hm-c-psy{--tx:-34px;--ty:-20px;--vd:0ms;fill:var(--acc-1);stroke:var(--acc-1);}
.hm-c-ux{--tx:34px;--ty:-20px;--vd:140ms;fill:var(--acc-2);stroke:var(--acc-2);}
.hm-c-ai{--tx:0px;--ty:40px;--vd:280ms;fill:var(--acc-3);stroke:var(--acc-3);}
.hm-vcore{opacity:.45;transform-origin:220px 205px;transition:opacity 450ms var(--ease);}
.hm-vlogo{color:var(--white);transform-origin:220px 205px;}
.hm-vt{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  fill:var(--grey-30);text-anchor:middle;transition:fill 450ms var(--ease);}

.hm-trio[data-on] .hm-c{fill-opacity:.03;stroke-opacity:.3;}
.hm-trio[data-on] .hm-vcore{opacity:.25;}
.hm-trio[data-on] .hm-vt{fill:var(--grey-50);}
.hm-trio[data-on="psy"] .hm-c-psy,
.hm-trio[data-on="ux"] .hm-c-ux,
.hm-trio[data-on="ai"] .hm-c-ai{fill-opacity:.2;stroke-opacity:1;}
.hm-trio[data-on="psy"] .hm-vt-psy,
.hm-trio[data-on="ux"] .hm-vt-ux,
.hm-trio[data-on="ai"] .hm-vt-ai{fill:var(--white);}

.js-reveal .hm-venn:not(.visible) .hm-c,
.js-reveal .hm-venn:not(.visible) .hm-vcore,
.js-reveal .hm-venn:not(.visible) .hm-vlogo{opacity:0;}
.js-reveal .hm-venn.visible .hm-c{animation:hm-venn-move 1300ms cubic-bezier(.16,1,.3,1) var(--vd) backwards,
  hm-venn-draw 1700ms cubic-bezier(.65,0,.35,1) var(--vd) backwards;}
.js-reveal .hm-venn.visible .hm-vcore{animation:hm-venn-pop 900ms cubic-bezier(.16,1,.3,1) 900ms backwards;}
.js-reveal .hm-venn.visible .hm-vlogo{animation:hm-venn-pop 700ms cubic-bezier(.16,1,.3,1) 1150ms backwards;}
@keyframes hm-venn-move{from{transform:translate(var(--tx),var(--ty));opacity:0;}40%{opacity:1;}}
/* kreska tylko na czas rysowania (pathLength=1); po animacji obrys jest ciagly */
@keyframes hm-venn-draw{from{stroke-dasharray:1 1;stroke-dashoffset:1;}to{stroke-dasharray:1 1;stroke-dashoffset:0;}}
@keyframes hm-venn-pop{from{transform:scale(.7);opacity:0;}}

/* Wiersze: kolorowy pierscien przy nazwie to legenda diagramu */
.hm-comp li[data-k="psy"]{--k:var(--acc-1);}
.hm-comp li[data-k="ux"]{--k:var(--acc-2);}
.hm-comp li[data-k="ai"]{--k:var(--acc-3);}
.hm-comp h3::before{content:"";display:inline-block;width:14px;height:14px;margin-right:18px;vertical-align:.14em;
  border:1.5px solid var(--k);border-radius:50%;background:color-mix(in srgb, var(--k) 18%, transparent);}
.hm-comp li > *{transition:opacity 300ms var(--ease);}
.hm-trio[data-on] .hm-comp li > *{opacity:.4;}
.hm-trio[data-on="psy"] .hm-comp li[data-k="psy"] > *,
.hm-trio[data-on="ux"] .hm-comp li[data-k="ux"] > *,
.hm-trio[data-on="ai"] .hm-comp li[data-k="ai"] > *{opacity:1;}

.hm-comp{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-80);}
.hm-comp li{padding:var(--s4) 0;border-bottom:1px solid var(--ink-80);}
.hm-comp h3{margin:0 0 var(--s2);}
.hm-comp-claim{margin-bottom:8px;font-size:var(--fs-card-h-lg);font-weight:500;line-height:1.35;color:var(--white);}
.hm-comp-claim + p{max-width:56ch;color:var(--grey-30);font-size:var(--fs-body);line-height:1.65;}

/* Liczby pod przewaga */
.hm-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s8);}
.hm-proof > div{padding:0 24px 0 0;}
.hm-proof > div + div{padding-left:24px;border-left:1px solid var(--ink-80);}
.hm-proof dt{font-family:var(--mono);font-size:var(--fs-stat-num-sm);font-weight:500;line-height:1;color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums;}
.hm-proof dd{margin:10px 0 0;font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);}

/* ---------- 4. Misja: deklaracja po lewej, cztery zobowiazania po prawej ---------- */
.hm-mission{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start;}
.hm-mission-head{position:sticky;top:120px;}
.hm-mission-head .mono{display:block;margin-bottom:var(--s3);}
.hm-mission-head h2{margin-bottom:var(--s3);max-width:15ch;}
.hm-mission-head p{margin-bottom:var(--s4);max-width:40ch;color:var(--grey-30);font-size:var(--fs-body);line-height:1.65;}
.hm-mission-list{margin:0;border-top:1px solid var(--ink-80);}
.hm-mission-list > div{padding:var(--s4) 0;border-bottom:1px solid var(--ink-80);}
.hm-mission-list dt{font-size:var(--fs-quote-emphasis);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:var(--white);}
.hm-mission-list dd{margin:12px 0 0;max-width:52ch;color:var(--grey-30);font-size:var(--fs-body);line-height:1.65;}

/* ---------- 5. Od czego zaczac: sciezki jako indeks + panel Kompasu z mapa ---------- */
.hm-start{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:start;}
.hm-paths{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-80);}
.hm-path{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px var(--s4);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--ink-80);color:inherit;text-decoration:none;}
.hm-path h3{grid-column:1;margin:0;}
.hm-path p{grid-column:1;max-width:56ch;color:var(--grey-30);font-size:var(--fs-body);line-height:1.6;}
.hm-path-go{grid-column:2;grid-row:1 / span 2;font-size:var(--fs-quote-emphasis);line-height:1;color:var(--grey-50);
  transition:transform 200ms var(--ease),color 200ms var(--ease);}
.hm-path:hover .hm-path-go,.hm-path:focus-visible .hm-path-go{transform:translateX(6px);color:var(--white);}
.hm-path:focus-visible{outline:2px solid var(--acc-2);outline-offset:4px;border-radius:var(--r);}

.hm-kompas{padding:var(--s4);border:1px solid var(--ink-80);border-radius:var(--r);background:var(--ink-90);}
.hm-kompas .mono{display:block;margin-bottom:var(--s2);}
.hm-kompas h3{margin:0 0 var(--s2);font-size:var(--fs-quote-emphasis);line-height:1.15;letter-spacing:-.02em;}
.hm-kompas > p{margin-bottom:var(--s4);color:var(--grey-30);font-size:var(--fs-body);line-height:1.6;}
.hm-kompas .kmap-wrap{margin-bottom:var(--s4);}
.hm-kompas .kp i{background:var(--ink-90);}

/* ---------- 6. Etapy: cztery kolumny, gorna linia kazdej wypelnia sie po kolei ----------
   Jeden gradient rozciagniety na cztery odcinki (background-size 400%), zeby linia
   czytala sie jako jeden postep, nie cztery ozdoby. */
.hm-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--ink-80);border-radius:var(--r);background:var(--black);overflow:hidden;}
.hm-stages li{position:relative;display:flex;flex-direction:column;padding:var(--s4) 26px;border-left:1px solid var(--ink-80);}
.hm-stages li:first-child{border-left:0;}
.hm-stages li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--fn-accent);background-size:400% 100%;background-position:calc(var(--i,0) * 33.333%) 0;
  transform-origin:left center;transition:transform 600ms var(--ease) calc(var(--i,0) * 200ms + 300ms);}
.js-reveal .hm-stages:not(.visible) li::before{transform:scaleX(0);}
.hm-stage-nr{font-family:var(--mono);font-size:var(--fs-stat-num-sm);font-weight:500;line-height:1;color:var(--acc-2);}
.hm-stages h3{margin:var(--s3) 0 8px;font-size:var(--fs-card-h-lg);font-weight:500;line-height:1.3;letter-spacing:-.01em;}
.hm-stages p{margin-bottom:var(--s3);color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.6;}
/* "Dostajecie" zawsze przy dolnej krawedzi, wiec linie podzialu w czterech kolumnach sa na jednej wysokosci */
.hm-stage-out{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--ink-80);color:var(--white);font-size:var(--fs-body-sm);line-height:1.5;}
.hm-stage-out .mono{display:block;margin-bottom:6px;}

/* ---------- 9. Kontakt: wezwanie po lewej, przebieg pierwszej rozmowy po prawej ---------- */
.hm-close{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:end;}
.hm-close-copy h2{max-width:16ch;margin-bottom:var(--s3);}
/* gradient z base.css (:is(h1,h2) > b); waga jak w pozostalych naglowkach strony glownej */
.hm-close-copy h2 b{font-weight:500;}
.hm-close-copy .lead{margin-bottom:var(--s6);}
.hm-close-copy .hero-actions{display:flex;flex-wrap:wrap;gap:var(--s2);}
.hm-close-steps h3{margin:0 0 var(--s2);}
.hm-close-steps ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-80);}
.hm-close-steps li{padding:18px 0;border-bottom:1px solid var(--ink-80);color:var(--white);font-size:var(--fs-body);line-height:1.5;}
.hm-close-steps p{margin-top:var(--s3);color:var(--grey-50);font-size:var(--fs-body-sm);line-height:1.6;}

/* ---------- 7-8. Drobne ---------- */
.hm-more{margin-top:var(--s6);}
.hm-sub{margin:var(--s8) 0 var(--s4);font-size:var(--fs-quote-emphasis);line-height:1.2;}
.hm-all{display:inline-block;margin-top:var(--s4);font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.1em;color:var(--grey-50);text-decoration:none;transition:var(--t-ui);}
.hm-all:hover{color:var(--white);}

/* ---------- Ograniczony ruch: wszystko od razu na miejscu ---------- */
@media(prefers-reduced-motion:reduce){
  .hm-head h2 b,.hm-mission-head h2 b{animation:none;}
  .hm-c,.hm-vcore,.hm-vt,.hm-comp li > *,.hm-meter i,.hm-stages li::before,.hm-path-go{transition:none;}
}

/* ---------- Tablet i telefon ---------- */
@media(max-width:1000px){
  .hm-data li{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:var(--s3) var(--s6);}
  .hm-trio{grid-template-columns:1fr;gap:var(--s6);}
  .hm-venn{max-width:420px;margin:0 auto;}
  .hm-start{grid-template-columns:1fr;gap:var(--s6);}
  .hm-kompas{max-width:600px;}
  .hm-stages{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hm-stages li:nth-child(3){border-left:0;}
  .hm-stages li:nth-child(n+3){border-top:1px solid var(--ink-80);}
  .hm-proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) 0;}
  .hm-proof > div:nth-child(3){padding-left:0;border-left:0;}
  .hm-close{grid-template-columns:1fr;gap:var(--s6);align-items:start;}
}
@media(max-width:900px){
  .hm-mission{grid-template-columns:1fr;gap:var(--s6);}
  .hm-mission-head{position:static;}
}
@media(max-width:700px){
  .hm-manifest{margin-bottom:var(--s8);}
  .hm-data li{grid-template-columns:1fr;gap:var(--s3);}
  .hm-data-fig{max-width:320px;}
  .hm-venn{max-width:340px;}
  .hm-kompas{padding:var(--s3) 20px;}
  /* na waskiej mapie podpisy nachodza na siebie: zostaja tylko dwa bieguny (ryzyko i cel) */
  .hm-kompas .kp:not(.is-risk):not(.is-good) b,
  .hm-kompas .kmapf-risk span{display:none;}
  .hm-stages{grid-template-columns:1fr;}
  .hm-stages li{border-left:0;}
  .hm-stages li + li{border-top:1px solid var(--ink-80);}
}