:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --t-12:12px;--t-14:14px;--t-16:16px;--t-18:18px;--t-20:20px;--t-24:24px;
  --t-30:30px;--t-36:36px;--t-48:48px;--t-60:60px;--t-72:72px;
  --lh-tekst:1.5;--lh-naglowek:1.1;
  --gutter:20px;--rama-max:1280px;
  --sekcja:var(--s-8);--karta:var(--s-5);
  --h1:var(--t-48);--h2:var(--t-30);--h3:var(--t-20);
}
@media (min-width:390px){:root{--gutter:24px}}
@media (min-width:768px){:root{--gutter:32px;--sekcja:var(--s-9);--karta:var(--s-6);
  --h1:var(--t-72);--h2:var(--t-48);--h3:var(--t-24)}}
body{font-size:var(--t-16);line-height:var(--lh-tekst)}
.rama{max-width:calc(var(--rama-max) + 2 * var(--gutter));margin-inline:auto;
  padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding-top:var(--sekcja);padding-bottom:var(--sekcja)}

/* SEMFLEX, strona na pięciu wizjach. Czerń, biel, jeden czerwony akcent w kadrze. */
:root{--tusz:#0B0C0B;--pow:#141514;--biel:#F2F0EB;--t2:#CFCEC8;--t3:#A3A29C;--linia:#2A2B29;
  --czerwien:#EC1C24;--ease:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Archivo',system-ui,-apple-system,sans-serif;background:var(--tusz);color:var(--biel);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--biel);outline-offset:3px}

/* nagłówek: przyklejony, z własnym tłem po przewinięciu */
.nav{position:sticky;top:0;z-index:20;transition:background-color 240ms linear}
.nav.tlo{background:var(--tusz)}
.nav__in{display:flex;justify-content:space-between;align-items:center;min-height:72px}
.nav__logo{display:block}
.logo{display:block;height:28px;width:auto;overflow:visible}
@media (min-width:768px){.logo--nav{height:36px}}
.logo--stopka{height:40px}
.nav__menu{display:flex;gap:var(--s-5);align-items:center}
.nav__menu a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-16);font-weight:500;text-decoration:none}
.nav__menu a:hover{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.nav__menu .nav__glowny{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
@media (max-width:767px){.nav__menu a:not(.nav__glowny){display:none}}

.przycisk{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-left:var(--s-5);padding-right:var(--s-5);
  background:var(--biel);color:var(--tusz);font-size:var(--t-16);font-weight:600;text-decoration:none;transition:background-color 240ms var(--ease)}
.przycisk:hover{background:#fff}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) left calc(100% - 8px)/100% 1px no-repeat;transition:background-size 400ms var(--ease)}
.link:hover{background-size:0 1px;animation:kreska 600ms var(--ease) 120ms forwards}
@keyframes kreska{from{background-size:0 1px}to{background-size:100% 1px}}
.link--czerwony{color:var(--czerwien);font-size:var(--t-20);font-weight:700;background-size:100% 2px}
.link--czerwony:hover{animation-name:kreska2}
@keyframes kreska2{from{background-size:0 2px}to{background-size:100% 2px}}

/* wspólne role pisma */
.h2{font-size:var(--h2);line-height:1.04;letter-spacing:-.02em;font-weight:800;font-variation-settings:'wdth' 104}
.lead{font-size:var(--t-18);line-height:1.45;color:var(--t2);max-width:34em}
.tekst{font-size:var(--t-16);color:var(--t2);max-width:34em}

/* ═══ 1 · HERO: hala, pasy składają obraz i hasło ═══ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;margin-top:-72px;padding-top:72px;padding-bottom:0}
.kv,.kv-pasy{position:absolute;inset:0;z-index:0}
.kv img{width:100%;height:100%;object-fit:cover;transform:translateY(calc(var(--kv-dy,0) * 1%))}
.pasy-gotowe .kv img{visibility:hidden}
.kv-pasy{overflow:hidden;pointer-events:none}
.kv-pas{position:absolute;left:0;right:0;background-repeat:no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,12,11,.7) 0,rgba(11,12,11,0) 140px),linear-gradient(to top,rgba(11,12,11,.92) 0,rgba(11,12,11,.5) 36%,rgba(11,12,11,0) 64%)}
.hero>.rama{position:relative;z-index:2;width:100%}
.hero .scena{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:var(--s-7);padding-bottom:var(--s-7)}
.haslo{position:relative;font-weight:800;font-variation-settings:'wdth' 112;
  font-size:clamp(var(--t-48),min(10.6vw,17svh),176px);line-height:.92;letter-spacing:-.02em}
.haslo .l{display:block}
.haslo .m{display:inline}
.pas{position:absolute;inset:0;pointer-events:none;will-change:transform}
.pas>.l{display:block}
.js .haslo.pasy .haslo__tekst{color:transparent}
.hero .dol{display:flex;flex-direction:column;gap:var(--s-5);margin-top:var(--s-6)}
.hero .pod{font-size:var(--t-18);line-height:1.4;color:#DEDDD7;max-width:30em}
.hero .pod b{color:var(--biel);font-weight:600}
.js .pojaw{animation:pojaw 800ms var(--ease) 900ms both}
@keyframes pojaw{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:767px){
  .haslo{font-variation-settings:'wdth' 78;font-size:clamp(var(--t-48),min(16vw,9.6svh),72px)}
  .haslo .m{display:block}
  .hero{--kv-dy:-15}
  .uslugi .odslona{aspect-ratio:1/1}
  .uslugi .odslona img{object-position:50% 12%}
  .hero .pod{font-size:var(--t-16)}
  .hero .przycisk{width:100%}
  .hero::after{background:linear-gradient(to bottom,rgba(11,12,11,.75) 0,rgba(11,12,11,0) 120px),linear-gradient(to top,rgba(11,12,11,.96) 0,rgba(11,12,11,.7) 42%,rgba(11,12,11,0) 62%)}
}
@media (min-width:900px){
  .hero .dol{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s-5);align-items:end;margin-top:var(--s-7)}
  .hero .pod{grid-column:1/7}
  .hero .akcja{grid-column:9/13;justify-self:end;display:flex;gap:var(--s-5);align-items:center}
}

/* ═══ 2 · USŁUGI: dłoń w świetle, obraz odsłaniany pasami ═══ */
.uslugi__siatka{display:grid;grid-template-columns:1fr;gap:var(--s-7)}
.odslona{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--tusz)}
.odslona picture,.panorama picture{display:block;height:100%}
.odslona img{width:100%;height:100%;object-fit:cover}
.odslona__pasy{position:absolute;inset:0;display:flex;flex-direction:column}
.odslona__pasy i{flex:1;background:var(--tusz);transform-origin:var(--o,left) center}
.uslugi__glowa .lead{margin-top:var(--s-5)}
.usl{margin-top:var(--s-7);border-top:1px solid var(--linia)}
.usl li{display:grid;grid-template-columns:1fr;gap:var(--s-2);padding-top:var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid var(--linia)}
.usl h3{font-size:var(--h3);line-height:1.2;font-weight:700}
.usl h3 a{text-decoration:none}
.usl h3 a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.usl p{font-size:var(--t-16);color:var(--t2);max-width:34em}
.usl small{display:block;font-size:var(--t-14);color:var(--t3)}
@media (min-width:900px){
  .uslugi__siatka{grid-template-columns:repeat(12,1fr);column-gap:var(--s-5)}
  .uslugi__obraz{grid-column:1/6}
  .uslugi__obraz .odslona{position:sticky;top:96px;aspect-ratio:auto;height:calc(100svh - 160px)}
  .uslugi__tresc{grid-column:7/13}
}

/* ═══ 3 · STUDIUM: most, panorama prowadzona przewijaniem ═══ */
.studium{padding-top:0;padding-bottom:0;position:relative}
.panorama{position:sticky;top:0;overflow:hidden;height:100svh;background:var(--tusz)}
.studium__panel{position:relative;z-index:2;margin-top:-28svh;padding-top:28svh;
  background:linear-gradient(to bottom,rgba(11,12,11,0) 0,rgba(11,12,11,.88) 22svh,var(--tusz) 40svh)}
.panorama img{position:absolute;top:0;left:0;height:100%;width:136%;max-width:none;object-fit:cover;object-position:60% 50%}
.studium__tekst{padding-top:var(--s-7);padding-bottom:var(--sekcja)}
.studium__tekst .lead{margin-top:var(--s-5)}
.wyniki{margin-top:var(--s-6);display:grid;gap:var(--s-4);max-width:40em}
.wyniki li{font-size:var(--t-18);line-height:1.45;color:var(--t2)}
.wyniki li b{color:var(--biel);font-weight:700}
.studium__tekst .link{margin-top:var(--s-5)}
@media (min-width:900px){
  .studium__siatka{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s-5)}
  .studium__siatka>.h2{grid-column:1/7;grid-row:1}
  .studium__siatka>.reszta{grid-column:1/7;grid-row:2}
  .studium__siatka>.liczby{grid-column:8/13;grid-row:1/3;margin-top:0}
}

/* ═══ 4 · PROCES ═══ */
.proces ol{margin:var(--s-7) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-6);counter-reset:k}
.proces li{border-top:1px solid var(--linia);padding-top:var(--s-5)}
.proces li .nr{display:block;font-size:var(--t-20);font-weight:700;color:var(--czerwien);line-height:1.2;margin-bottom:var(--s-2)}
.proces h3{font-size:var(--h3);line-height:1.2;font-weight:700}
.proces p{margin-top:var(--s-2);color:var(--t2);max-width:34em}
@media (min-width:900px){.proces ol{grid-template-columns:repeat(2,1fr);column-gap:var(--s-7)}}

/* ═══ 5 · NARZĘDZIA: lustra, odbicia zbiegają się w środku sekcji ═══ */
.narz__siatka{display:grid;grid-template-columns:1fr;gap:var(--s-7)}
.odbicia{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--tusz)}
.odbicia picture{display:block;height:100%}
.odbicia img{width:100%;height:100%;object-fit:cover}
.odbicia__pasy{position:absolute;inset:0}
.odbicia__pas{position:absolute;left:-6%;right:-6%;background-repeat:no-repeat}
.odbicia.pasy-gotowe img{visibility:hidden}
.narz__tresc .lead{margin-top:var(--s-5)}
.narz__lista{margin-top:var(--s-7);display:grid;gap:var(--s-5)}
.narz__lista li{border-top:1px solid var(--linia);padding-top:var(--s-4)}
.narz__lista b{display:block;font-size:var(--h3);line-height:1.2;font-weight:700}
.narz__lista span{display:block;margin-top:var(--s-2);color:var(--t2);max-width:34em}
@media (min-width:900px){
  .narz__siatka{grid-template-columns:repeat(12,1fr);column-gap:var(--s-5);align-items:start}
  .narz__tresc{grid-column:1/7}
  .narz__obraz{grid-column:8/13;position:sticky;top:96px}
  .narz__lista{grid-template-columns:1fr 1fr;column-gap:var(--s-6)}
}

/* ═══ 6 · KREDYT ═══ */
.kredyt{border-top:1px solid var(--linia)}
.kredyt h2{max-width:20em}
.kredyt p{margin-top:var(--s-4);color:var(--t2);max-width:34em}
.kredyt small{display:block;margin-top:var(--s-4);font-size:var(--t-14);color:var(--t3);max-width:40em}
.kredyt .link{margin-top:var(--s-4)}

/* ═══ 7 · KONTAKT: tancerka, światło rozcierane jak tusz ═══ */
.kontakt{position:relative;padding-top:0}
.tusz{position:relative;overflow:hidden;height:min(86svh,820px);background:var(--tusz)}
.tusz picture{display:block;height:100%}
.tusz img,.tusz canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tusz canvas{opacity:0;transition:opacity 300ms linear;touch-action:pan-y}
.tusz.gl-gotowe canvas{opacity:1}
.tusz.gl-gotowe img{visibility:hidden}
.tusz::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(11,12,11,1) 0,rgba(11,12,11,.6) 30%,rgba(11,12,11,0) 58%)}
.kontakt__tresc{position:relative;z-index:2;margin-top:calc(-1 * min(30svh,280px))}
.kontakt .lead{margin-top:var(--s-5)}
.kontakt__akcje{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-5);align-items:center}
.dane{margin-top:var(--s-8);display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.dane h3{font-size:var(--h3);line-height:1.2;font-weight:700}
.dane dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-2) var(--s-5);font-size:var(--t-16)}
.dane dt{color:var(--t3)}
@media (min-width:900px){
  .kontakt__siatka{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s-5)}
  .kontakt__glowa{grid-column:1/8}
  .dane{grid-column:9/13;margin-top:0;align-self:end}
}

/* stopka */
.stopka{border-top:1px solid var(--linia);padding-top:var(--s-8);padding-bottom:var(--s-7);font-size:var(--t-14);color:var(--t3)}
.stopka__siatka{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
.stopka b{display:block;color:var(--biel);font-size:var(--t-16);font-weight:600;margin-bottom:var(--s-2)}
.stopka a{text-decoration:none;display:inline-flex;min-height:32px;align-items:center}
.stopka a:hover{text-decoration:underline}
.stopka__ai{margin-top:var(--s-7);font-size:var(--t-14);color:var(--t2)}
.stopka__dol{margin-top:var(--s-2)}
.kadr-podpis{position:absolute;left:50%;transform:translateX(-50%);width:100%;max-width:calc(var(--rama-max) + 2 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);bottom:var(--s-4);z-index:3;font-size:var(--t-14);color:var(--t2);margin:0}
@media (min-width:900px){.stopka__siatka{grid-template-columns:5fr 3fr 3fr}}

/* czerwony pas: jedna mechanika, wysunięcie od lewej (logo przy wejściu, pasek postępu przy przewijaniu) */
.logo__pas{transform-box:fill-box;transform-origin:left center}
.js .logo--nav .logo__pas{animation:pas 900ms var(--ease) 250ms both}
.js .logo--stopka .logo__pas{transform:scaleX(0);transition:transform 900ms var(--ease)}
.js .logo--stopka.widoczny .logo__pas{transform:none}
@keyframes pas{from{transform:scaleX(0)}to{transform:none}}
.postep{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--czerwien);transform-origin:left;transform:scaleX(0)}
/* nagłówki sekcji odsłaniane maską przy wejściu w kadr */
.js .h2.maska{clip-path:inset(0 0 100% 0);transform:translateY(24px);transition:clip-path 900ms var(--ease),transform 900ms var(--ease)}
.js .h2.maska.widoczny{clip-path:inset(-10% -2% -20% -2%);transform:none}
/* partner i chmura narzędzi */
.partner-sek{border-top:1px solid var(--linia)}
.partner{display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap}
.partner__znak{flex:none;display:block;background:#fff;padding:var(--s-2)}
.partner__znak img{width:160px;height:160px}
.partner .lead{margin-top:var(--s-4);max-width:30em}
.chmura__tytul{margin-top:var(--s-8);font-size:var(--h3);line-height:1.2;font-weight:700}
.chmura{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);font-weight:800;font-size:clamp(var(--t-30),5vw,var(--t-72));line-height:1;letter-spacing:-.02em;color:var(--t2)}
.chmura li{font-variation-settings:'wdth' var(--w,100)}
.chmura li:nth-child(3n+1){--w:125}.chmura li:nth-child(3n+2){--w:80}.chmura li:nth-child(3n){--w:100}
.chmura.zywa{position:relative;display:block;height:clamp(360px,52vw,560px);touch-action:pan-y}
.chmura.zywa li{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;transition:color 300ms linear;cursor:default;user-select:none}
.chmura li.akcent{color:var(--czerwien)}
/* studium: liczby jako duża typografia, każda ze zdaniem */
.liczby{margin-top:var(--s-7);display:grid;gap:var(--s-6)}
.liczby div{border-top:1px solid var(--linia);padding-top:var(--s-4);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s-5);align-items:baseline}
.liczby dt{font-size:var(--t-72);line-height:1;font-weight:800;letter-spacing:-.02em;font-variation-settings:'wdth' 112;font-variant-numeric:tabular-nums}
.liczby div:first-child dt{color:var(--czerwien)}
.liczby dd{margin:0;font-size:var(--t-16);color:var(--t2)}
@media (max-width:599px){.liczby dt{font-size:var(--t-60)}}
/* galaktyka narzędzi: bez JS lista grup, z JS płótno */
.narzedzia-ai .lead{margin-top:var(--s-5)}
.galaktyka{margin-top:var(--s-7);display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-6)}
.galaktyka .g{display:block;font-size:var(--t-14);color:var(--t3);margin-bottom:var(--s-2)}
.galaktyka ul li{font-size:var(--t-20);font-weight:700;line-height:1.35}
.galaktyka--plotno{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.galaktyka__tor{height:170svh;margin-top:var(--s-6)}
.galaktyka__plotno{display:block;position:sticky;top:72px;width:100%;height:calc(100svh - 72px);touch-action:pan-y}
/* tagi studium: obrys 1 px, wysunięcie od lewej jak czerwony pas */
.tagi{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tagi li{display:inline-flex;align-items:center;min-height:32px;padding-left:var(--s-3);padding-right:var(--s-3);border:1px solid rgba(242,240,235,.38);font-size:var(--t-14);font-weight:600;color:var(--t2)}
.tagi .tagi__akcent{border-color:var(--czerwien);color:var(--biel)}
.js .tagi li{clip-path:inset(0 100% 0 0);transition:clip-path 700ms var(--ease)}
.js .tagi.widoczny li{clip-path:inset(0 0 0 0)}
.js .tagi.widoczny li:nth-child(2){transition-delay:70ms}.js .tagi.widoczny li:nth-child(3){transition-delay:140ms}
.js .tagi.widoczny li:nth-child(4){transition-delay:210ms}.js .tagi.widoczny li:nth-child(5){transition-delay:280ms}.js .tagi.widoczny li:nth-child(6){transition-delay:350ms}
.studium__tekst .tagi+.link{margin-top:var(--s-4)}
@media (prefers-reduced-motion:reduce){
  .js .tagi li{clip-path:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .odslona__pasy{display:none}
  .js .h2.maska{clip-path:none;transform:none}
  .js .logo--stopka .logo__pas{transform:none}
}