/* Surferzy Wiedzy · makieta wersji 7 · wspólny arkusz stylów dla wszystkich zakładek
   System marki z prezentacji 2026. Zasady z oceny UX:
   - Oswald tylko w H1, H2 i liczbach; reszta Montserrat, tytuły kart w zwykłej pisowni
   - cień nagłówka tylko w hero i jednym haśle (.cien), belka krótka i z odstępem
   - jeden przycisk główny na sekcję, reszta jako .link-strzalka
   - na różu i turkusie tekst czarny; biały tylko na magencie i czerni; cytryna tylko dekoracja */

:root{
  --roz:#F3C4C1; --roz-jasny:#FBE9E7;
  /* paleta z propozycji Bartka (zmiana Agaty nr 42, 30.10.2026). Było: turkus #83D0D3, turkus-jasny #E3F4F5,
     turkus-tekst #1F7A7E, musztarda #FCBE41, cytryna #FFEC00, czern #111111, tekst #1D1D1D, tekst-cichy #5E5E5E,
     szary #F2F2F2, obrys #E4E4E4. Turkus do napisów #007A87 (u Bartka #0599A8 jest za blady do małych liter),
     magenta zostaje #E4027F (biały napis na przyciskach musi być czytelny; u Bartka #F50083).
     --tlo-jasne #F6FBFD to tła sekcji (jak u Bartka); --szary #EEF4F7 to pigułki, tematy i tła pod zdjęciami
     na białych kartach (przy #F6FBFD znikały). */
  --turkus:#51D5E2; --turkus-jasny:#E9FBFD; --turkus-tekst:#007A87;
  --musztarda:#FFBF13; --cytryna:#FFDC02; --magenta:#E4027F;
  --czern:#101214; --tekst:#11253B; --tekst-cichy:#43536A;
  --szary:#EEF4F7; --tlo-jasne:#F6FBFD; --obrys:#E9F0F3; --bialy:#FFFFFF;
  --font-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --font-text:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --promien:24px; --promien-maly:16px;
  --kontener:1200px; --odstep-sekcji:clamp(48px,6vw,80px);
  --cien-karty:0 12px 35px rgba(17,45,65,.075);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bialy);color:var(--tekst);font:500 17px/1.6 var(--font-text);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:6px}
.wizualnie-ukryte{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- układ ---------- */
.kontener{width:100%;max-width:calc(var(--kontener) + 48px);margin:0 auto;padding-inline:24px;position:relative}
.sekcja{padding-block:var(--odstep-sekcji);position:relative;overflow:hidden}
.sekcja-ciasna{padding-block:clamp(40px,5vw,64px)}
.tlo-roz{background:var(--roz)}
.tlo-roz-jasny{background:var(--roz-jasny)}
.tlo-turkus{background:var(--turkus)}
.tlo-turkus-jasny{background:var(--turkus-jasny)}
.tlo-szary{background:var(--szary)}
.tlo-czern{background:var(--czern);color:var(--bialy)}
.siatka-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:center}
.siatka-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.siatka-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1000px){.siatka-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.siatka-2,.siatka-3{grid-template-columns:1fr}}
@media (max-width:560px){.siatka-4{grid-template-columns:1fr}.kontener{padding-inline:16px}}

/* ---------- typografia ---------- */
h1,h2,h3,h4{margin:0;color:inherit}
.h1{font:700 clamp(40px,5.2vw,74px)/1.02 var(--font-display);text-transform:uppercase;letter-spacing:.005em}
.h2{font:700 clamp(32px,3.6vw,52px)/1.06 var(--font-display);text-transform:uppercase;letter-spacing:.005em}
.h2-zdanie{font:800 clamp(28px,3.2vw,46px)/1.15 var(--font-text);letter-spacing:-.01em}
.h3{font:700 20px/1.3 var(--font-text)}
.cien{text-shadow:4px 4px 0 var(--musztarda)}
.na-czerni .cien,.tlo-czern .cien{text-shadow:none}
.akcent-turkus{color:var(--turkus-tekst)}
.akcent-musztarda-na-czerni{color:var(--musztarda)}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;max-width:720px;margin-top:20px}
.cichy{color:var(--tekst-cichy)}
.drobny{font-size:13px;line-height:1.5;color:var(--tekst-cichy)}
.tlo-czern .drobny,.tlo-czern .cichy{color:#C9C9C9}
.belka{display:block;width:96px;height:10px;background:var(--musztarda);border-radius:2px;margin-top:18px}
.belka-srodek{margin-inline:auto}
.naglowek-sekcji{max-width:820px;margin-bottom:clamp(32px,4vw,52px)}
.naglowek-sekcji.srodek{margin-inline:auto;text-align:center}
.naglowek-sekcji.srodek .lead{margin-inline:auto}

/* ---------- etykiety i pigułki ---------- */
.etykieta{display:inline-flex;align-items:center;gap:8px;background:var(--turkus);color:var(--czern);font:800 12.5px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:999px;margin-bottom:18px}
.etykieta.biala{background:var(--bialy)}
.etykieta.czarna{background:var(--czern);color:var(--bialy)}
.etykieta.obrys{background:transparent;box-shadow:inset 0 0 0 1.5px var(--czern)}
.pigulka-magenta{display:inline-block;background:var(--magenta);color:var(--bialy);font:800 13px/1.2 var(--font-text);letter-spacing:.04em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.pigulka-turkus{display:inline-block;background:var(--turkus);color:var(--czern);font:800 13px/1.2 var(--font-text);letter-spacing:.04em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.pigulka-biala{display:inline-block;background:var(--bialy);color:var(--czern);font:700 13px/1.2 var(--font-text);padding:8px 14px;border-radius:999px;box-shadow:var(--cien-karty)}
.chipy{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-block;background:var(--bialy);border:1.5px solid var(--obrys);color:var(--czern);font:600 14px/1.2 var(--font-text);padding:9px 14px;border-radius:999px}
.tlo-turkus .chip,.tlo-roz .chip{border-color:transparent}

/* ---------- przyciski i linki ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font:700 15px/1.2 var(--font-text);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-glowny{background:var(--tekst);color:var(--bialy)}
.btn-glowny:hover{background:var(--magenta)}
.btn-magenta{background:var(--magenta);color:var(--bialy)}
.btn-magenta:hover{background:var(--czern)}
.btn-obrys{background:transparent;color:var(--tekst);border-color:var(--tekst)}
.btn-obrys:hover{background:var(--tekst);color:var(--bialy)}
.tlo-czern .btn-obrys{color:var(--bialy);border-color:var(--bialy)}
.tlo-czern .btn-obrys:hover{background:var(--bialy);color:var(--czern)}
.przyciski{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.link-strzalka{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--czern);border-bottom:2px solid var(--turkus);padding-bottom:2px}
.link-strzalka::after{content:"→";transition:transform .2s}
.link-strzalka:hover::after{transform:translateX(4px)}
.tlo-czern .link-strzalka{color:var(--bialy)}

/* ---------- karty ---------- */
.karta{background:var(--bialy);border:1.5px solid var(--obrys);border-radius:var(--promien);padding:28px;display:flex;flex-direction:column;gap:12px}
.karta.cien-karty{border-color:transparent;box-shadow:var(--cien-karty)}
.karta.wyrozniona{background:var(--turkus);border-color:var(--turkus)}
.karta .h3+p{margin-top:-2px}
.karta .na-dole{margin-top:auto;padding-top:8px}
.numer-kolo{width:44px;height:44px;border-radius:50%;background:var(--musztarda);color:var(--czern);display:grid;place-items:center;font:700 18px/1 var(--font-display)}
.karta.wyrozniona .numer-kolo{background:var(--bialy)}

/* lista ze strzałką (lekka, do kart) */
.lista-strzalki{list-style:none;display:grid;gap:10px}
.lista-strzalki li{position:relative;padding-left:28px;font-weight:500;line-height:1.45}
.lista-strzalki li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--turkus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12h11M12 7l5 5-5 5'/%3E%3C/svg%3E") center/12px no-repeat}
.karta.wyrozniona .lista-strzalki li::before{background-color:var(--bialy)}

/* pigułki ze strzałką jak slajd „Startuj z MVP” (jedna lista na stronę) */
.pigulki-lista{list-style:none;display:grid;gap:12px}
.pigulki-lista li{display:flex;align-items:center;gap:16px;background:var(--bialy);border-radius:999px;padding:10px 24px 10px 10px;box-shadow:var(--cien-karty)}
.pigulki-lista .strzalka{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--turkus);display:grid;place-items:center}
.pigulki-lista .strzalka svg{width:20px;height:20px}
.pigulki-lista b{display:block;font-weight:800}

/* ---------- koła ze zdjęciami i portrety ---------- */
.kolo{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--szary)}
.kolo img{width:100%;height:100%;object-fit:cover}
.ring-musztarda{box-shadow:0 0 0 10px var(--musztarda)}
.ring-turkus{box-shadow:0 0 0 10px var(--turkus)}
.ring-bialy{box-shadow:0 0 0 8px var(--bialy)}
.ring-magenta-luk{position:absolute;inset:-26px;border-radius:50%;border:8px solid transparent;border-top-color:var(--magenta);border-left-color:var(--magenta);transform:rotate(-20deg);pointer-events:none}
.portret{display:grid;place-items:center;text-align:center;background:var(--roz-jasny);color:var(--czern)}
.portret .inicjaly{font:700 clamp(22px,2.4vw,34px)/1 var(--font-display)}
.portret .podpis{display:block;font:700 11.5px/1.1 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-cichy);margin-top:6px}
.portret.turkus{background:var(--turkus-jasny)} .portret.szary{background:var(--szary)}

/* karta eksperta jak banner webinaru */
.karta-ekspert{background:var(--szary);border-radius:var(--promien);overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 22px 26px}
.karta-ekspert .gora{align-self:stretch;height:84px;background:var(--turkus);margin:0 -22px;position:relative}
.karta-ekspert .gora::after{content:"";position:absolute;right:16px;top:14px;width:54px;height:40px;background:radial-gradient(circle,var(--cytryna) 2.6px,transparent 3px) 0 0/13px 13px}
.karta-ekspert .kolo{width:132px;margin-top:-60px;box-shadow:0 0 0 7px var(--bialy)}
.karta-ekspert .pigulka-magenta{margin-top:18px}
.karta-ekspert .rola{font:800 12.5px/1.3 var(--font-text);letter-spacing:.06em;text-transform:uppercase;margin-top:10px}
.karta-ekspert .cytat{font-size:15px;line-height:1.5;margin-top:10px}

/* ---------- liczby ---------- */
.liczby{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.liczba .wartosc{font:700 clamp(46px,5vw,72px)/1 var(--font-display);display:block}
.liczba .belka{width:56px;height:8px;margin-top:12px}
.liczba .opis{display:block;font:800 13px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase;margin-top:12px}
@media (max-width:760px){.liczby{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- dekoracje (tylko przy krawędziach, nigdy pod tekstem) ---------- */
.dek{position:absolute;pointer-events:none;z-index:0}
.kropki{background:radial-gradient(circle,var(--cytryna) 3.5px,transparent 4px) 0 0/24px 24px}
.kropki.musztarda{background-image:radial-gradient(circle,var(--musztarda) 3.5px,transparent 4px)}
.fala-svg{width:220px;height:32px}
.fala-svg path{fill:none;stroke-width:6;stroke-linecap:round}
.plama{border-radius:58% 42% 55% 45%/55% 50% 50% 45%;background:var(--turkus)}
.cwiartka{width:160px;height:160px;border-radius:0 160px 0 0;background:var(--musztarda)}
.kontener>*{position:relative;z-index:1}
@media (max-width:760px){.dek.ukryj-mobile{display:none}}

/* ---------- nagłówek strony i menu ---------- */
.pasek-makiety{background:var(--czern);color:var(--bialy);font:700 12.5px/1.4 var(--font-text);text-align:center;padding:8px 16px}
.pasek-makiety a{color:var(--cytryna)}
.naglowek{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--obrys)}
.naglowek .kontener{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.logo img{height:46px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.menu ul{list-style:none;display:flex;gap:clamp(14px,2vw,26px);align-items:center}
.menu a:not(.btn){font:700 15px/1 var(--font-text);text-decoration:none;padding:10px 0;position:relative}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:4px;border-radius:2px;background:var(--musztarda);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.menu a:not(.btn):hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu-przycisk{display:none;background:var(--tekst);color:var(--bialy);border:0;border-radius:999px;font:700 14px/1 var(--font-text);padding:12px 18px;cursor:pointer}
@media (max-width:1260px){
  .menu-przycisk{display:inline-flex}
  .menu{position:absolute;left:0;right:0;top:100%;background:var(--bialy);border-bottom:1px solid var(--obrys);flex-direction:column;align-items:stretch;padding:12px 16px 20px;display:none}
  .menu.otwarte{display:flex}
  .menu ul{flex-direction:column;align-items:stretch;gap:0}
  .menu a:not(.btn){display:block;padding:14px 4px;border-bottom:1px solid var(--szary)}
  .menu a:not(.btn)::after{display:none}
  .menu a[aria-current="page"]{color:var(--turkus-tekst)}
  .menu .btn{margin-top:12px}
}

/* ---------- okruszki / nagłówek podstrony ---------- */
.okruszki{font:600 13px/1.4 var(--font-text);color:var(--tekst-cichy);margin-bottom:18px}
.okruszki a{color:var(--tekst-cichy)}
.hero-podstrony{padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px)}

/* ---------- przełącznik odbiorcy (twórca / firma) ---------- */
.przelacznik{display:inline-flex;background:var(--szary);border-radius:999px;padding:5px;gap:4px;margin-bottom:26px}
.przelacznik button{border:0;background:transparent;color:var(--czern);font:700 15px/1.2 var(--font-text);padding:11px 18px;border-radius:999px;cursor:pointer;min-height:44px}
.przelacznik button[aria-pressed="true"]{background:var(--czern);color:var(--bialy)}
/* ukrywamy tylko to, co nie pasuje do wybranego odbiorcy (element z data-dla="tworca firma" widać zawsze) */
body[data-odbiorca="tworca"] [data-dla="firma"],
body[data-odbiorca="firma"] [data-dla="tworca"],
body:not([data-odbiorca]) [data-dla="firma"]{display:none!important}

/* ---------- kafle „sześć sufitów” (z wersji 4) ---------- */
.kafle-sufitow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.kafle-sufitow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kafle-sufitow{grid-template-columns:1fr}}
.kafel{perspective:1200px;min-height:230px;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.kafel .wnetrze{position:relative;display:block;width:100%;height:100%;min-height:230px;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.kafel[aria-pressed="true"] .wnetrze{transform:rotateY(180deg)}
@media (hover:hover){.kafel:hover .wnetrze{transform:rotateY(180deg)}}
.kafel .awers,.kafel .rewers{position:absolute;inset:0;border-radius:var(--promien);padding:26px;display:flex;flex-direction:column;gap:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kafel .awers{background:var(--bialy);box-shadow:var(--cien-karty)}
.kafel .rewers{background:var(--czern);color:var(--bialy);transform:rotateY(180deg);justify-content:center}
.kafel .pytajnik{width:52px;height:52px;border-radius:50%;background:var(--musztarda);display:grid;place-items:center;font:700 28px/1 var(--font-display);color:var(--bialy)}
.kafel .tytul{font:700 22px/1.2 var(--font-text)}
.kafel .nr{margin-top:auto;font:700 13px/1 var(--font-display);letter-spacing:.08em;color:var(--tekst-cichy)}
.kafel .rewers .co{font:800 12.5px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--musztarda)}
.kafel .rewers p{font:700 19px/1.4 var(--font-text)}

/* ---------- oś programu (z wersji 5) ---------- */
.os{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.os{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.os{grid-template-columns:1fr}}
.blok{background:var(--bialy);border-radius:var(--promien);padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--cien-karty)}
.blok .meta{font:800 12px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--turkus-tekst)}
.tygodnie{display:flex;gap:6px}
.tydzien{flex:1;height:36px;border-radius:999px;background:var(--turkus-jasny);display:grid;place-items:center;font:700 14px/1 var(--font-text);position:relative;transition:background-color .4s}
.tydzien.wypelniony{background:var(--turkus)}
.tydzien .k{position:absolute;top:-9px;right:-4px;background:var(--musztarda);font:800 10px/1 var(--font-text);padding:4px 6px;border-radius:999px}
.kamien{background:var(--musztarda);border-radius:var(--promien-maly);padding:10px 14px;font:700 14px/1.35 var(--font-text);margin-top:auto}
.final-demo{margin-top:16px;background:var(--magenta);color:var(--bialy);border-radius:999px;padding:16px 24px;text-align:center;font:800 15px/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase}

/* ---------- kalkulator sufitu ---------- */
.kalkulator{background:var(--bialy);border-radius:var(--promien);padding:clamp(22px,3vw,36px);box-shadow:var(--cien-karty);display:grid;gap:18px}
.pole label{display:flex;justify-content:space-between;font:700 15px/1.3 var(--font-text);margin-bottom:8px}
.pole output{font-family:var(--font-display);font-size:20px}
.pole input[type=range]{width:100%;accent-color:var(--czern);height:28px}
.wynik{border-top:2px dashed var(--obrys);padding-top:16px;display:grid;gap:6px}
.wynik .kwota{font:700 clamp(36px,4vw,54px)/1 var(--font-display)}
.pasek-porownania{height:14px;border-radius:999px;background:var(--szary);overflow:hidden;position:relative}
.pasek-porownania span{position:absolute;inset:0 auto 0 0;background:var(--turkus);border-radius:999px;transition:width .3s}
.pasek-porownania i{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--magenta)}

/* ---------- formularz (makieta) ---------- */
.formularz{display:grid;gap:16px}
.formularz label{font:700 14px/1.3 var(--font-text);display:block;margin-bottom:6px}
.formularz input,.formularz select,.formularz textarea{width:100%;font:500 16px/1.4 var(--font-text);padding:13px 16px;border:1.5px solid #CFCFCF;border-radius:14px;background:var(--bialy);color:var(--czern)}
.formularz input:focus,.formularz select:focus,.formularz textarea:focus{outline:3px solid var(--turkus);border-color:var(--czern)}
.formularz .zgoda{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px}
.formularz .zgoda input{width:20px;height:20px;margin-top:2px;flex:0 0 20px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--bialy);border-radius:var(--promien-maly);box-shadow:var(--cien-karty)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:700 17px/1.35 var(--font-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 34px;height:34px;border-radius:50%;background:var(--turkus);display:grid;place-items:center;font:700 22px/1 var(--font-text)}
.faq details[open] summary::after{content:"–"}
.faq .odp{padding:0 22px 20px;color:var(--tekst)}

/* ---------- ostatnie wezwanie i stopka ---------- */
.cta-final{text-align:center}
.cta-final .h1{font-size:clamp(40px,5vw,72px)}
.stopka{background:var(--szary);padding-block:48px 32px;font-size:15px}
.stopka .kontener{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.stopka h4{font:800 12.5px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.stopka ul{list-style:none;display:grid;gap:8px}
.stopka a{text-decoration:none}
.stopka a:hover{text-decoration:underline}
.stopka .logo img{height:42px;margin-bottom:14px}
.stopka .prawa{grid-column:1/-1;border-top:1px solid #DDD;padding-top:18px;font-size:13px;color:var(--tekst-cichy)}
@media (max-width:760px){.stopka .kontener{grid-template-columns:1fr}}

/* ---------- ruch ---------- */
.js .pojaw{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .pojaw.widoczne{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .pojaw{opacity:1;transform:none}
  .kafel .wnetrze{transform:none!important}
  .kafel[aria-pressed="true"] .awers{display:none}
  .kafel[aria-pressed="true"] .rewers{transform:none}
  .kafel .rewers{transform:none;display:none}
  .kafel[aria-pressed="true"] .rewers{display:flex}
}

/* ---------- poprawki po zbudowaniu zakładek (zgłoszone przez strony) ---------- */
[hidden]{display:none!important}
.chipy{list-style:none;padding:0}
.liczba .wartosc{white-space:nowrap}
.numer-kolo{flex:0 0 44px}
.kafel,.kafel .wnetrze{min-height:262px}
.kafel .awers>*,.kafel .rewers>*{flex-shrink:0}
.kafel .pytajnik{flex:0 0 52px}
.kafel .opis{display:block;font-weight:500;line-height:1.5}
.kafel .odp{display:block;font:700 19px/1.4 var(--font-text)}
.ring-roz{box-shadow:0 0 0 10px var(--roz)}
.ring-cienki.ring-musztarda{box-shadow:0 0 0 5px var(--musztarda)}
.ring-cienki.ring-turkus{box-shadow:0 0 0 5px var(--turkus)}
.ring-cienki.ring-roz{box-shadow:0 0 0 5px var(--roz)}
.tlo-szary .przelacznik,.tlo-roz .przelacznik{background:var(--bialy)}
.na-czerni .drobny,.na-czerni .cichy{color:#C9C9C9}
.etap{font:800 12.5px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--turkus-tekst)}
.info-makiety{background:var(--turkus-jasny);border-radius:var(--promien-maly);padding:14px 18px;font-weight:600}
@media (max-width:860px){.ring-magenta-luk{inset:-14px;border-width:6px}}
@media (max-width:560px){.pigulki-lista li{border-radius:28px;align-items:flex-start}}

/* ---------- mniej kolorów (uwaga Agaty 2.10): baza biała i szara, kolor tylko w drobnych akcentach ----------
   Tła sekcji: tylko .sekcja (biel), .tlo-szary i jeden .tlo-czern na finał. Klasy różu/turkusu jako tła sprowadzamy do szarości. */
.tlo-roz,.tlo-roz-jasny,.tlo-turkus,.tlo-turkus-jasny{background:var(--szary)}
.kamien{background:var(--szary);border-left:4px solid var(--musztarda);border-radius:10px}
.blok .kamien{background:var(--szary)}
.final-demo{background:var(--czern)}
.karta.wyrozniona{background:var(--bialy);border:2px solid var(--czern)}
.karta.wyrozniona .numer-kolo{background:var(--musztarda)}
.karta.wyrozniona .lista-strzalki li::before{background-color:var(--turkus)}
.karta-ekspert .gora{height:60px;background:var(--turkus-jasny)}
.karta-ekspert .kolo{margin-top:-46px}
.pigulki-lista li{box-shadow:none;border:1.5px solid var(--obrys)}
.tlo-szary .pigulki-lista li{border-color:transparent}

/* ogólne tematy etapu */
.tematy{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:2px 0 0}
.tematy li{font:600 13px/1.25 var(--font-text);background:var(--szary);border-radius:999px;padding:6px 10px}

/* wyjaśnienia pod kalkulatorem */
.wyjasnienia{display:grid;gap:10px;margin-top:18px}
.wyjasnienia details{background:var(--szary);border-radius:var(--promien-maly);padding:14px 18px}
.wyjasnienia summary{cursor:pointer;font:700 15px/1.3 var(--font-text);list-style:none;display:flex;justify-content:space-between;gap:12px}
.wyjasnienia summary::-webkit-details-marker{display:none}
.wyjasnienia summary::after{content:"+";font-weight:800}
.wyjasnienia details[open] summary::after{content:"–"}
.wyjasnienia p{margin:10px 0 0;font-size:15px;line-height:1.55}

/* ---------- karty ekspertów bez pastelowego pasa (uwaga Agaty 2.10: „błękitne tło jest majtkowe”) ---------- */
.karta-ekspert{background:var(--bialy);border:1.5px solid var(--obrys);padding:28px 22px 26px}
.karta-ekspert .gora{display:none}
.karta-ekspert .kolo{width:120px;margin-top:0;box-shadow:0 0 0 4px var(--bialy),0 0 0 6px var(--obrys)}
.karta-ekspert .portret{background:var(--szary)}
.tlo-szary .karta-ekspert{border-color:transparent}

/* zespół w skrócie (strona główna): 7 osób, bez cytatów */
.zespol-skrot{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:22px 16px;list-style:none;padding:0;margin:0}
.zespol-skrot li{text-align:center;display:grid;justify-items:center;gap:8px}
.zespol-skrot .kolo{width:104px;box-shadow:0 0 0 4px var(--bialy),0 0 0 6px var(--obrys)}
.zespol-skrot .portret{background:var(--szary)}
.zespol-skrot .imie{font:700 16px/1.25 var(--font-text)}
.zespol-skrot .rola{font:600 13px/1.35 var(--font-text);color:var(--tekst-cichy)}

/* ---------- trasa programu: delikatna oś zamiast ciężkich kart ---------- */
.trasa{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 18px;position:relative}
.trasa::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;background:var(--obrys)}
.trasa .krok{position:relative;padding-top:34px;display:flex;flex-direction:column;gap:6px}
.trasa .punkt{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--bialy);border:3px solid var(--czern)}
.trasa .krok.start .punkt{background:var(--turkus);border-color:var(--turkus)}
.trasa .krok.final .punkt{background:var(--magenta);border-color:var(--magenta)}
.trasa .kiedy{font:800 11.5px/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-cichy)}
.trasa h3{font:700 18px/1.25 var(--font-text);margin:0}
.trasa p{font-size:15px;line-height:1.5;margin:0}
.trasa .tematy-tekst{font-size:13px;line-height:1.45;color:var(--tekst-cichy)}
.trasa .kamien-mini{display:inline-flex;align-items:center;gap:7px;font:700 12.5px/1.2 var(--font-text);margin-top:4px}
.trasa .kamien-mini::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--musztarda)}
@media (max-width:980px){
  .trasa{grid-template-columns:1fr;gap:26px}
  .trasa::before{left:8px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .trasa .krok{padding-top:0;padding-left:38px}
}

/* portrety bez pastelowych wypełnień (spójnie z kartami ekspertów) */
.portret,.portret.turkus,.portret.szary{background:var(--szary)}

/* ---------- wariant z kolorem: karta eksperta jak banner (turkusowa góra, kropki, magentowa pigułka z imieniem i rolą) ---------- */
.karta-ekspert.kolor{position:relative;overflow:hidden;background:var(--bialy);border:2px solid var(--obrys);border-radius:28px;padding:40px 20px 28px;display:flex;flex-direction:column;align-items:center;text-align:center}
.karta-ekspert.kolor::before{content:"";position:absolute;left:-12%;right:-12%;top:-70px;height:250px;background:var(--turkus);border-radius:0 0 50% 50%/0 0 34% 34%;z-index:0}
.karta-ekspert.kolor::after{content:"";position:absolute;right:20px;top:26px;width:120px;height:74px;background:radial-gradient(circle,var(--cytryna) 4px,transparent 4.5px) 0 0/24px 24px;z-index:0}
.karta-ekspert.kolor .gora{display:none}
.karta-ekspert.kolor .kolo{position:relative;z-index:1;width:150px;margin-top:0;box-shadow:0 0 0 10px var(--bialy),0 14px 26px -16px rgba(17,17,17,.45)}
.karta-ekspert.kolor .portret{background:var(--szary)}
.karta-ekspert.kolor .pigulka-duza{position:relative;z-index:2;margin:-24px 0 0;background:var(--magenta);color:var(--bialy);border-radius:999px;padding:12px 24px;display:grid;gap:3px;max-width:100%;box-shadow:0 12px 22px -16px rgba(17,17,17,.55)}
.karta-ekspert.kolor .pigulka-duza .imie{font:800 16px/1.15 var(--font-text);letter-spacing:.03em;text-transform:uppercase}
.karta-ekspert.kolor .pigulka-duza .rola{font:700 12.5px/1.25 var(--font-text);letter-spacing:.08em;text-transform:uppercase;margin:0;color:var(--bialy)}
.karta-ekspert.kolor .cytat{margin-top:22px;font:500 16.5px/1.6 var(--font-text)}
.tlo-szary .karta-ekspert.kolor{border-color:transparent}
@media (max-width:560px){.karta-ekspert.kolor .kolo{width:128px}}

/* ---------- społeczność na stronie głównej ---------- */
.spol-sciana{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 40px;align-items:center}
.spol-sciana .kolo{width:58px;box-shadow:0 0 0 3px var(--bialy)}
.spol-sciana .kolo .inicjaly{font-size:17px}
.spol-sciana .kolo .podpis{display:none}
.spol-sciana .ty{width:58px;aspect-ratio:1/1;border-radius:50%;border:2.5px dashed var(--czern);display:grid;place-items:center;font:800 15px/1 var(--font-text)}
.spol-sciana .opis{font:700 14px/1.4 var(--font-text);margin-left:8px}
.spol-drogi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.spol-drogi{grid-template-columns:1fr}}
.spol-droga{position:relative;background:var(--bialy);border:2px solid var(--obrys);border-radius:28px;padding:30px 26px 28px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.spol-droga::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--turkus)}
.spol-droga.ah::before{background:var(--magenta)}
.spol-droga.par::before{background:var(--musztarda)}
.spol-droga .znak{font:800 12.5px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-cichy)}
.spol-droga h3{font:700 24px/1.2 var(--font-text);margin:0}
.spol-droga .na-dole{margin-top:auto;padding-top:10px}
.spol-wideo{border-radius:18px;background:var(--czern);color:var(--bialy);aspect-ratio:16/9;display:grid;place-items:center;text-align:center;font:700 14px/1.4 var(--font-text);padding:12px}
.spol-wideo span{display:block;width:46px;height:46px;border-radius:50%;background:var(--magenta);margin:0 auto 8px;display:grid;place-items:center;font-size:18px}

/* Poprawka 2.10: lista w odpowiedziach FAQ (drogi udziału) */
.faq .odp ul{list-style:disc;padding-left:22px;margin:8px 0 10px;display:grid;gap:4px}
.faq .odp p + p{margin-top:8px}

/* Poprawka 2.10: nagranie After Hours z YouTube, ładowane dopiero po kliknięciu */
.spol-wideo.yt{position:relative;width:100%;border:0;cursor:pointer;background-size:cover;background-position:center;overflow:hidden}
.spol-wideo.yt::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,17,17,.65),rgba(17,17,17,.1))}
.spol-wideo.yt span,.spol-wideo.yt b{position:relative;z-index:1}
.spol-wideo.yt span{width:62px;height:62px;font-size:22px;transition:transform .2s}
.spol-wideo.yt:hover span{transform:scale(1.08)}
.spol-wideo.yt b{position:absolute;left:14px;bottom:12px;font:800 13px/1 var(--font-text);letter-spacing:.06em;text-transform:uppercase}
.spol-wideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-gra{position:relative;padding:0}

/* Poprawka 2.10: logotypy partnerów */
.loga{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:0;padding:0}
.loga li{background:var(--bialy);border:1.5px solid var(--obrys);border-radius:var(--promien-maly);min-height:104px;display:grid;place-items:center;padding:18px 20px}
.loga img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
.loga.male li{min-height:84px}.loga.male img{max-height:42px}

/* Poprawka 2.10: pięć dróg współpracy */
.drogi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 16px;counter-reset:droga}
.droga{position:relative;background:var(--bialy);border:1.5px solid var(--obrys);border-radius:var(--promien);padding:24px 22px 22px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.droga::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--k,var(--turkus))}
.droga .nr{font:700 34px/1 var(--font-display);color:var(--k-tekst,var(--czern))}
.droga .h3{font-size:19px}
.droga p{margin:0;font-size:15.5px}
.droga .model{align-self:flex-start;margin-top:auto;font:800 11.5px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase;background:var(--szary);border-radius:999px;padding:7px 12px}
.droga.wyrozniona{border-color:var(--czern);box-shadow:var(--cien-karty)}
.droga.wyrozniona .model{background:var(--musztarda)}
.drogi-dol{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
@media (max-width:1100px){.drogi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.drogi{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.drogi{grid-template-columns:1fr}}
@media (min-width:1001px){.loga{grid-template-columns:repeat(7,minmax(0,1fr))}.loga li{padding:16px 14px}}


/* ---------- 5.10.2026: elementy wersji po uwagach Irka ---------- */
.onas-zajawka{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-weight:600}
.przewaga{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.przewaga .krok{font:800 12.5px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--turkus-tekst)}
.przewaga-ludzie{margin-top:24px;background:var(--szary);border-left:6px solid var(--musztarda);border-radius:var(--promien-maly);padding:18px 22px;font-weight:600;max-width:900px}
.na-czym{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.na-czym .karta{position:relative;overflow:hidden;padding-top:40px}
.na-czym .karta::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--k,var(--turkus))}
.na-czym .skad{font:800 12px/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-cichy)}
.na-czym p{margin:0}
.powered{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:var(--czern);color:var(--bialy);font:700 12.5px/1.3 var(--font-text);border-radius:999px;padding:8px 14px}
.filmy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.film{border-radius:var(--promien);background:var(--bialy);border:2px dashed #CFCFCF;min-height:220px;display:grid;place-items:center;text-align:center;padding:28px}
.film .play{width:64px;height:64px;border-radius:50%;background:var(--czern);display:grid;place-items:center;margin:0 auto 14px}
.film .play svg{width:24px;height:24px;margin-left:4px}
.film b{display:block;font-size:18px}
.droga .droga-link{font-size:14px;align-self:flex-start}
.loga li.tekst{font:800 15px/1.3 var(--font-text);text-align:center}
.loga li.tekst small{display:block;font:600 11px/1.3 var(--font-text);letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.do-uzupelnienia{border-style:dashed!important;color:var(--tekst-cichy)}
.etap-szczegoly{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.etap-szczegoly .meta{font:800 12px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--turkus-tekst)}
.etap-szczegoly h4{font:800 12px/1.2 var(--font-text);letter-spacing:.07em;text-transform:uppercase;margin-top:8px;color:var(--tekst-cichy)}
.etap-szczegoly p{margin:0}
.pdf-pas{margin-top:20px;background:var(--turkus-jasny);border-radius:var(--promien);padding:24px 28px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.pdf-pas>div{flex:1 1 360px}
.pdf-pas p{margin:6px 0 0}
.moduly-opisy .karta{gap:8px}
.moduly-opisy p{margin:0;font-size:15.5px}
.lista-wydarzen{list-style:none;margin:0;padding:0;display:grid}
.wydarzenie{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 24px;padding:24px 0;border-top:1.5px solid var(--obrys)}
.wydarzenie:last-child{border-bottom:1.5px solid var(--obrys)}
.wydarzenie .data{font:700 24px/1.1 var(--font-display);text-transform:uppercase}
.wydarzenie .pigulka-turkus,.wydarzenie .pigulka-magenta{margin-bottom:10px}
.wydarzenie .h3{margin-bottom:6px}
.wydarzenie p{margin:0}
.wydarzenie.do-uzupelnienia{border-top-style:dashed}
@media (max-width:640px){.wydarzenie{grid-template-columns:1fr}}
.manifest{list-style:none;display:grid;gap:22px;margin:0;padding:0;max-width:900px;counter-reset:teza}
.manifest li{counter-increment:teza;display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 18px;align-items:start}
.manifest li::before{content:counter(teza,decimal-leading-zero);grid-row:span 2;font:700 40px/1 var(--font-display);color:var(--magenta)}
.manifest b{font:800 clamp(20px,2vw,26px)/1.25 var(--font-text)}
.manifest span{color:var(--tekst-cichy)}
.rozwidlenie{background:var(--turkus-jasny);border-radius:var(--promien-maly);padding:12px 14px;font-size:14px;font-weight:600}
.droga-sekcja .siatka-2{align-items:start}
.par-wplyw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.par-wplyw .karta{gap:10px}
.par-wplyw .logo-p{height:56px;display:flex;align-items:center}
.par-wplyw .logo-p img{max-height:44px;width:auto}
.par-wplyw .logo-p b{font:800 20px/1.2 var(--font-text)}
.par-wplyw h4{font:800 11.5px/1.2 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-cichy);margin-top:4px}
.par-wplyw p{margin:0}
@media (max-width:980px){.par-wplyw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.par-wplyw{grid-template-columns:1fr}}
.typy-partnerow .karta{gap:10px}
.typy-partnerow .karta p{margin:0}
.typy-partnerow .model{align-self:flex-start;margin-top:auto;font:800 11.5px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase;background:var(--szary);border-radius:999px;padding:7px 12px}
.stopka-cta{margin-top:14px;min-height:42px;padding:9px 18px;font-size:14px}
.skoki{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:26px}
.skoki a{text-decoration:none}
.skoki a:hover{border-color:var(--czern)}
@media (max-width:860px){.przewaga,.na-czym,.filmy,.etap-szczegoly{grid-template-columns:1fr}}

/* ---------- wersja 2 po uwagach Irka (7.10.2026): menu „Pięć dróg” (od wersji 3: „Fale”), druga nawigacja, „Wkrótce”, dwa wejścia ---------- */
.ma-podmenu{position:relative;display:flex;align-items:center;gap:2px}
.podmenu-przycisk{width:24px;height:30px;border:0;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center;color:var(--czern)}
.podmenu-przycisk::before{content:"";width:7px;height:7px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ma-podmenu.otwarte .podmenu-przycisk::before{transform:translateY(2px) rotate(-135deg)}
.menu .podmenu{position:absolute;top:100%;left:-16px;min-width:300px;background:var(--bialy);border:1.5px solid var(--obrys);border-radius:var(--promien-maly);box-shadow:var(--cien-karty);padding:8px;display:none;flex-direction:column;align-items:stretch;gap:2px;z-index:60}
.ma-podmenu.otwarte .podmenu{display:flex}
@media (hover:hover) and (min-width:1261px){.ma-podmenu:hover .podmenu{display:flex}}
.menu .podmenu a{display:block;padding:10px 12px;border-radius:12px}
.menu .podmenu a::after{display:none}
.menu .podmenu a:hover,.menu .podmenu a[aria-current="page"]{background:var(--szary)}
.podmenu b{display:block;font:700 15px/1.2 var(--font-text)}
.podmenu span{display:block;font:500 13px/1.35 var(--font-text);color:var(--tekst-cichy);margin-top:3px}
.menu a.rodzic-aktywny::after{transform:scaleX(1)}
@media (min-width:1261px){.menu ul{gap:clamp(12px,1.4vw,22px)}.menu{gap:clamp(12px,1.6vw,24px)}}
@media (max-width:1260px){
  .menu{max-height:calc(100vh - 76px);overflow-y:auto}
  .menu a.rodzic-aktywny{color:var(--turkus-tekst)}
  .ma-podmenu{display:block}
  .podmenu-przycisk{display:none}
  .menu .podmenu{position:static;display:flex;min-width:0;border:0;box-shadow:none;border-radius:0;padding:0 0 4px 16px;background:transparent}
  .menu .podmenu a{padding:11px 4px;border-radius:0;font-size:14.5px}
  .menu .podmenu a:hover{background:transparent}
  .podmenu b{font-size:14.5px}
  .podmenu span{display:none}
}

.drogi-nav{background:var(--szary);border-bottom:1px solid var(--obrys)}
.drogi-nav .kontener{display:flex;align-items:center;gap:10px 16px;padding-block:12px}
.drogi-nav-tytul{font:800 12px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-cichy);white-space:nowrap}
.drogi-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.drogi-nav a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:700 14px/1 var(--font-text);padding:10px 16px;border-radius:999px;background:var(--bialy);border:1.5px solid var(--obrys);white-space:nowrap}
.drogi-nav a:hover{border-color:var(--czern)}
.drogi-nav a[aria-current="page"]{background:var(--czern);color:var(--bialy);border-color:var(--czern)}
.drogi-nav .nr{font:700 14px/1 var(--font-display);color:var(--magenta)}
.drogi-nav a[aria-current="page"] .nr{color:var(--musztarda)}
@media (max-width:760px){
  .drogi-nav .kontener{flex-direction:column;align-items:flex-start}
  .drogi-nav ul{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:none}
  .drogi-nav ul::-webkit-scrollbar{display:none}
}

.wkrotce{border:2px dashed #CFCFCF;border-radius:var(--promien);background:var(--bialy);padding:clamp(22px,3vw,32px);display:grid;gap:10px;justify-items:start;max-width:860px}
.wkrotce .h3{margin:4px 0 0}
.wkrotce p{margin:0}
.wkrotce .brakuje{color:var(--tekst-cichy)}

.drzwi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.drzwi .karta{position:relative;overflow:hidden;padding-top:40px}
.drzwi .karta::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--k,var(--turkus))}
.drzwi .skad{font:800 12px/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-cichy)}
.drzwi .h3{font-size:24px}
.drzwi .przyciski{margin-top:auto;padding-top:8px}
@media (max-width:860px){.drzwi{grid-template-columns:1fr}}

.cen-wiecej{align-self:flex-start;margin-top:-4px;font-size:14.5px}
.stopka .kontener{grid-template-columns:1.4fr .8fr .8fr .9fr}
@media (max-width:1000px){.stopka .kontener{grid-template-columns:1fr 1fr}.stopka .kontener>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.stopka .kontener{grid-template-columns:1fr}}

/* ---------- wersja 3 po uwagach Irka (9.10.2026): 7 fal, stopka w trzech równych kolumnach ---------- */
.drogi{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.drogi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.drogi{grid-template-columns:1fr}}
.ring-magenta{box-shadow:0 0 0 10px var(--magenta)}
.droga-cta{background:var(--czern);color:var(--bialy);border-color:var(--czern);justify-content:center}
.droga-cta::before{background:var(--musztarda)}
.droga-cta .h3{font-size:21px;color:var(--bialy)}
.droga-cta p{color:#D9D9D9}
.droga-cta .btn{align-self:flex-start;margin-top:6px;min-height:44px;padding:10px 18px;font-size:14px}

.stopka .kontener{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:0 40px}
.stopka .kontener>div:not(:first-child){border-left:1.5px solid #DADADA;padding-left:32px}
.stopka .kontener>div:first-child{padding-right:8px}
.stopka h4{margin-top:6px}
.stopka ul{gap:10px}
.stopka li{line-height:1.35}
.stopka .prawa{margin-top:36px}
@media (max-width:1000px){
  .stopka .kontener{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
  .stopka .kontener>div:first-child{grid-column:1/-1}
  .stopka .kontener>div:nth-child(2){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .stopka .kontener{grid-template-columns:1fr;gap:24px}
  .stopka .kontener>div:not(:first-child){border-left:0;padding-left:0;border-top:1.5px solid #DADADA;padding-top:22px}
}
.droga .modele{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.droga .modele .model{margin-top:0}

/* stopka: pasek ekosystemu (FT, EdTechHub Ventures, DCC, EDIH), logotypy w szarości */
.stopka .kontener>div.stopka-ekosystem{grid-column:1/-1;border-left:0;padding-left:0;margin-top:36px;padding-top:28px;border-top:1px solid #DDD;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:20px 48px;align-items:center}
.stopka-ekosystem p{margin:0;font-size:14px;line-height:1.55;color:var(--tekst-cichy)}
.stopka-ekosystem p b{color:var(--czern)}
.stopka-ekosystem p a{text-decoration:underline;color:var(--czern);font-weight:600}
.stopka-loga{list-style:none;display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:22px 40px;margin:0;padding:0}
.stopka-loga img{display:block;height:34px;width:auto;max-width:200px;filter:grayscale(1) contrast(.9);opacity:.6;transition:filter .2s,opacity .2s}
.stopka-loga li:first-child img{height:20px}
.stopka-loga img:hover{filter:none;opacity:1}
.stopka .stopka-ekosystem+.prawa{margin-top:24px}
@media (max-width:1000px){.stopka .kontener>div.stopka-ekosystem{grid-template-columns:1fr}.stopka-loga{justify-content:flex-start}}
@media (max-width:560px){.stopka .kontener>div.stopka-ekosystem{border-top:1px solid #DDD;padding-top:22px;margin-top:8px}.stopka-loga{gap:18px 28px}.stopka-loga img{height:28px}.stopka-loga li:first-child img{height:16px}}
/* stopka: logotypy ekosystemu rozstrzelone na całą szerokość, pod tekstem */
.stopka .kontener>div.stopka-ekosystem{grid-template-columns:1fr;gap:26px}
.stopka-ekosystem p{max-width:860px}
.stopka-loga{justify-content:space-between;gap:24px 32px}
.stopka-loga img{height:38px;max-width:230px}
.stopka-loga li:first-child img{height:22px}
@media (max-width:1000px){.stopka-loga{justify-content:flex-start;gap:22px 40px}}
@media (max-width:560px){.stopka-loga img{height:28px}.stopka-loga li:first-child img{height:16px}}

/* „Pracują z nami”: 10 miejsc w dwóch rzędach, wolne pola ze znakiem zapytania */
.loga.loga-10{grid-template-columns:repeat(5,minmax(0,1fr))}
.loga li.loga-wolne{padding:0;border-style:dashed;background:transparent}
.loga-wolne a{display:grid;place-items:center;width:100%;height:100%;min-height:84px;text-decoration:none;border-radius:inherit;transition:background-color .2s}
.loga-wolne span{font:700 38px/1 var(--font-display);color:#C4C4C4;transition:color .2s}
.loga-wolne a:hover{background:var(--bialy)}
.loga-wolne a:hover span{color:var(--magenta)}
.loga-dalej{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 28px}
@media (max-width:860px){.loga.loga-10{grid-template-columns:repeat(2,minmax(0,1fr))}}
.final-demo-opis{text-transform:none;letter-spacing:0;font-weight:600;opacity:.85}
/* oś etapów: tytuły równej wysokości, żeby rzędy tygodni się wyrównały (wersja 3) */
@media (min-width:901px){.os .blok .h3{line-height:1.25;min-height:2.5em}}

/* --- wideo z YouTube w treści: pas (film + tekst) i siatka (19.10.2026) --- */
.wideo-pas{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center;margin-top:28px}
.wideo-pas .spol-wideo.yt{border-radius:var(--promien)}
.wideo-pas .h3{margin:6px 0 8px}
.wideo-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.wideo-siatka article{display:flex;flex-direction:column;gap:8px}
.wideo-meta{display:block;font:800 11.5px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--turkus-tekst)}
.wideo-siatka .wideo-meta{margin-top:8px}
.wydarzenie .spol-wideo.yt,.karta .spol-wideo.yt,.pr-zdania+.spol-wideo.yt,.ak-program-tresc .spol-wideo.yt{max-width:460px;margin-top:14px}
@media (max-width:860px){.wideo-pas,.wideo-siatka{grid-template-columns:1fr}}
/* --- Surferzy na stronie głównej: rząd portretów (19.10.2026) --- */
.gl-surf-rzad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 14px;margin:32px 0 0;list-style:none;padding:0}
.gl-surf-rzad a{display:block;text-align:center;color:inherit;text-decoration:none}
.gl-surf-rzad .kolo{width:100%;max-width:120px;margin:0 auto 10px;--c:var(--obrys);box-shadow:0 0 0 4px var(--c);transition:transform .2s}
.gl-surf-rzad a:hover .kolo{transform:scale(1.05)}
.gl-surf-rzad .kolo.m{--c:var(--musztarda)} .gl-surf-rzad .kolo.t{--c:var(--turkus)}
.gl-surf-rzad b{display:block;font:700 13.5px/1.3 var(--font-text)}
.gl-surf-rzad span{display:block;font-size:12.5px;line-height:1.35;color:var(--tekst-cichy);margin-top:2px}
@media (max-width:860px){.gl-surf-rzad{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.gl-surf-rzad{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}.gl-surf-rzad .kolo{max-width:84px;box-shadow:0 0 0 3px var(--c)}.gl-surf-rzad b{font-size:12.5px}.gl-surf-rzad span{font-size:11.5px}}

/* --- pasek naboru nad menu (przyklejony razem z nagłówkiem) i okno naboru na stronie głównej (19.10.2026) --- */
.pasek-naboru{background:var(--magenta);color:var(--bialy);font:700 14px/1.35 var(--font-text)}
.pasek-naboru .kontener{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;min-height:0;padding-block:9px;text-align:center}
.pasek-naboru b{background:var(--cytryna);color:var(--czern);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:12.5px;padding:4px 11px;border-radius:999px}
.pasek-naboru a{color:var(--bialy);font-weight:800;text-decoration:none;border-bottom:2px solid var(--bialy);padding-bottom:1px;white-space:nowrap}
.pasek-naboru a:hover{color:var(--cytryna);border-bottom-color:var(--cytryna)}
@media (max-width:640px){.pasek-naboru .dlugi{display:none}.pasek-naboru{font-size:13px}}
.okno-naboru{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(17,17,17,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.okno-naboru.widoczne{opacity:1}
.okno-naboru .okno{position:relative;width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bialy);border-radius:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:translateY(16px);transition:transform .25s}
.okno-naboru.widoczne .okno{transform:none}
.okno-naboru .okno-media{position:relative;background:var(--czern);min-height:100%;border-radius:28px 0 0 28px;overflow:hidden}
.okno-naboru .okno-media .spol-wideo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;padding:0}
.okno-naboru .okno-media .spol-wideo.yt span{width:84px;height:84px;font-size:30px}
.okno-naboru .okno-media .spol-wideo.yt b{left:20px;bottom:18px;font-size:14px}
.okno-naboru .okno-tresc{padding:clamp(24px,3.5vw,48px);display:flex;flex-direction:column;gap:14px}
.okno-naboru .okno-tresc .etykieta{align-self:flex-start;margin:0;background:var(--musztarda)}
.okno-naboru h2{font:700 clamp(34px,4.4vw,56px)/1 var(--font-display);text-transform:uppercase;margin:0}
.okno-naboru h2 span{color:var(--magenta)}
.okno-naboru ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.okno-naboru li{display:flex;gap:10px;font-weight:600}
.okno-naboru li::before{content:"";flex:0 0 10px;height:10px;margin-top:7px;border-radius:50%;background:var(--turkus)}
.okno-naboru .przyciski{margin-top:6px}
.okno-naboru .zamknij{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--bialy);color:var(--czern);font:700 26px/1 var(--font-text);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.okno-naboru .zamknij:hover{background:var(--musztarda)}
@media (max-width:760px){.okno-naboru .okno{grid-template-columns:1fr}.okno-naboru .okno-media{min-height:0;aspect-ratio:16/9;border-radius:28px 28px 0 0}}
body.okno-otwarte{overflow:hidden}

/* Opinie Surferów: karuzela (treść i logika w opinie.js; strona główna i Inkubator) */
.opinie-blok{margin-top:64px}
.opinie-blok > .h3{text-align:center;margin-bottom:26px;font:700 clamp(28px,3.4vw,40px)/1.05 var(--font-display);text-transform:uppercase}
.opinie{max-width:940px;margin:0 auto}
.opinie-scena{display:grid;position:relative}
.opinia{grid-area:1/1;margin:0;position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(228,2,127,.38),transparent 55%),
    radial-gradient(90% 90% at 100% 100%,rgba(131,208,211,.30),transparent 55%),
    #111;
  color:var(--bialy);border-radius:28px;box-shadow:0 30px 60px -30px rgba(17,17,17,.55);
  padding:clamp(28px,4.4vw,52px) clamp(26px,4.6vw,56px) clamp(34px,4.6vw,56px);
  display:grid;grid-template-columns:auto 1fr;gap:18px clamp(24px,3.6vw,44px);align-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .7s}
.opinia.aktywna{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.opinia::before{content:"„";position:absolute;left:clamp(14px,2.4vw,30px);top:clamp(-150px,-10vw,-110px);font:700 clamp(220px,22vw,300px)/1 var(--font-display);
  background:linear-gradient(135deg,var(--magenta),var(--musztarda));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;z-index:-1;pointer-events:none}
.opinia > *{position:relative}
.opinia .kolo{grid-row:span 2;width:clamp(96px,13vw,150px);padding:5px;background:conic-gradient(from 210deg,var(--magenta),var(--musztarda),var(--turkus),var(--magenta));box-shadow:0 18px 40px -18px rgba(228,2,127,.7)}
.opinia .kolo img{border-radius:50%;border:4px solid #111}
.opinia .kolo .inicjaly{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:4px solid #111;background:#1d1d1d;color:var(--bialy);font:700 clamp(30px,3.2vw,40px)/1 var(--font-display);letter-spacing:.04em}
.opinia blockquote{margin:0;align-self:end;font:600 clamp(18px,2vw,23px)/1.5 var(--font-text);color:var(--bialy);letter-spacing:-.005em}
.opinia figcaption{align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.72)}
.opinia .opinia-imie{display:block;width:100%;font:700 clamp(19px,1.9vw,23px)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.03em;color:var(--musztarda);text-decoration:none}
.opinia a.opinia-imie:hover{color:var(--bialy)}
.opinia figcaption > span{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(131,208,211,.16);color:var(--turkus);font-weight:700;font-size:12.5px;letter-spacing:.02em}
.opinia .opinia-link{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);color:var(--bialy);font:700 13px/1 var(--font-text);text-decoration:none;background:none;transition:background .2s,color .2s,border-color .2s}
.opinia .opinia-link::after{content:"→"}
.opinia .opinia-link:hover{background:var(--bialy);color:var(--czern);border-color:var(--bialy)}
.opinie-postep{position:absolute;left:0;right:0;top:0;height:4px;border-radius:28px 28px 0 0;overflow:hidden;z-index:3;background:rgba(255,255,255,.08)}
.opinie-postep::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--magenta),var(--musztarda),var(--turkus));transform:scaleX(0);transform-origin:left}
.opinie-postep.biegnie::after{animation:opinie-postep var(--czas,5000ms) linear forwards}
@keyframes opinie-postep{to{transform:scaleX(1)}}
.opinie-nawigacja{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:26px}
.opinie-strzalka{width:46px;height:46px;border-radius:50%;border:0;background:var(--czern);color:var(--bialy);font:700 18px/1 var(--font-text);cursor:pointer;transition:transform .2s,background .2s}
.opinie-strzalka:hover{background:var(--magenta);transform:scale(1.06)}
.opinie-kropki{display:flex;gap:6px;align-items:center}
.opinie-kropki button{width:8px;height:8px;border-radius:6px;border:0;padding:0;background:#C9C9C9;cursor:pointer;transition:width .3s,background .3s}
.opinie-kropki button[aria-current="true"]{width:30px;background:linear-gradient(90deg,var(--magenta),var(--musztarda))}
@media (max-width:560px){
  .opinia{grid-template-columns:1fr;gap:16px}
  .opinia .kolo{grid-row:auto;width:92px}
  .opinia::before{top:-90px;font-size:200px}
}
@media (prefers-reduced-motion:reduce){.opinia,.opinia.aktywna,.opinie-kropki button{transition:none;transform:none}.opinie-postep{display:none}}

/* Strona główna: taśma portretów Surferów (przesuwa się w poziomie, kopię listy dokłada skrypt.js) */
.gl-surf-tasma{overflow:hidden;margin:36px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.gl-surf-tasma .gl-surf-rzad{display:flex;gap:26px;width:max-content;margin:0;padding:8px 0;animation:gl-tasma var(--tasma-czas,70s) linear infinite}
.gl-surf-tasma:hover .gl-surf-rzad,.gl-surf-tasma:focus-within .gl-surf-rzad{animation-play-state:paused}
.gl-surf-tasma .gl-surf-rzad li{flex:0 0 128px}
.gl-surf-tasma .gl-surf-rzad .kolo{max-width:92px;box-shadow:0 0 0 4px var(--c)}
.gl-surf-tasma .gl-surf-rzad b{font-size:13px}
.gl-surf-tasma .gl-surf-rzad span{font-size:12px}
@keyframes gl-tasma{to{transform:translateX(-50%)}}
@media (max-width:560px){.gl-surf-tasma .gl-surf-rzad li{flex-basis:104px}.gl-surf-tasma .gl-surf-rzad .kolo{max-width:76px}}
@media (prefers-reduced-motion:reduce){.gl-surf-tasma{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.gl-surf-tasma .gl-surf-rzad{animation:none}}

/* Mały przycisk z miniaturą filmu; film otwiera się w oknie (logika w skrypt.js, data-yt-okno) */
.wideo-pigulka{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:5px 16px 5px 5px;border:0;border-radius:999px;background:var(--czern);color:var(--bialy);font:700 13.5px/1.2 var(--font-text);cursor:pointer;transition:background .2s,transform .2s}
.wideo-pigulka:hover{background:var(--magenta);transform:translateY(-1px)}
.wideo-pigulka .miniatura{position:relative;flex:0 0 auto;width:58px;height:36px;border-radius:999px;background-size:cover;background-position:center}
.wideo-pigulka .miniatura::after{content:"▶";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;background:var(--magenta);color:#fff;font-size:9px;line-height:20px;text-align:center;padding-left:2px}
.okno-wideo{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(17,17,17,.84);animation:okno-wideo-wejdz .25s ease}
.okno-wideo .ramka{position:relative;width:min(980px,100%);aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.okno-wideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.okno-wideo .zamknij-wideo{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--bialy);color:var(--czern);font:700 20px/1 var(--font-text);cursor:pointer}
@keyframes okno-wideo-wejdz{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.okno-wideo{animation:none}}

/* Pojedynczy cytat Surfera przy sekcji (propozycja 27.10): cytat na górze, pod nim zdjęcie i podpis w jednym wierszu */
.cytat-wstawka{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"cytat cytat" "kolo podpis";gap:12px 10px;align-items:center;max-width:560px;margin:26px 0 0;padding:4px 0 4px 20px}
.cytat-wstawka::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--magenta),var(--musztarda),var(--turkus))}
.cytat-wstawka blockquote{grid-area:cytat;margin:0;font:600 16.5px/1.55 var(--font-text);color:var(--czern)}
.cytat-wstawka .kolo{grid-area:kolo;width:36px;padding:2px;background:conic-gradient(from 210deg,var(--magenta),var(--musztarda),var(--turkus),var(--magenta))}
.cytat-wstawka .kolo img,.cytat-wstawka .kolo .inicjaly{border-radius:50%;border:2px solid var(--bialy)}
.cytat-wstawka .kolo .inicjaly{display:grid;place-items:center;width:100%;height:100%;background:var(--roz-jasny);color:var(--czern);font:700 12px/1 var(--font-display)}
.cytat-wstawka figcaption{grid-area:podpis;font-size:13px;line-height:1.3;color:var(--tekst-cichy)}
.cytat-wstawka figcaption b{display:block;font:700 13.5px/1.2 var(--font-text);color:var(--czern)}
.cytat-wstawka figcaption a{color:inherit;text-decoration:none}
.cytat-wstawka figcaption a:hover{text-decoration:underline}
.cytat-wstawka.maly{margin-top:18px;padding-left:14px;gap:10px 8px}
.cytat-wstawka.maly::before{width:3px}
.cytat-wstawka.maly blockquote{font-size:14px}
.cytat-wstawka.maly .kolo{width:30px}

/* Inkubator: menu strony (kotwice + Zgłoś projekt), przyklejone pod nagłówkiem; wysokość nagłówka ustawia skrypt.js */
.strona-menu{position:sticky;top:var(--wys-naglowka,76px);z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--obrys)}
.strona-menu .kontener{display:flex;align-items:center;gap:12px;padding-block:10px}
.strona-menu ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;flex:1}
.strona-menu ul::-webkit-scrollbar{display:none}
.strona-menu ul a{display:block;padding:9px 14px;border-radius:999px;font:700 14px/1 var(--font-text);color:var(--czern);text-decoration:none;white-space:nowrap}
.strona-menu ul a:hover{background:var(--szary)}
.strona-menu ul a.aktywny{background:var(--czern);color:var(--bialy)}
.strona-menu-cta{flex:0 0 auto;padding:11px 18px;font-size:14px}
main section[id]{scroll-margin-top:calc(var(--wys-naglowka,76px) + 70px)}
@media (max-width:560px){.strona-menu .kontener{gap:8px}.strona-menu ul a{padding:8px 11px;font-size:13px}.strona-menu-cta{padding:9px 13px;font-size:13px}}
/* Akademia: terminy wkrótce */
.ak-wkrotce{margin:0 0 12px;font-size:14.5px;line-height:1.5}
.ak-wkrotce-pas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:22px 26px;border-radius:var(--promien);background:var(--szary)}
.ak-wkrotce-pas p{margin:0;max-width:640px}

/* Inkubator jako strona lądowania (27.10): dla kogo, przyciski w treści, drogi udziału, rekrutacja, przyklejony przycisk na telefonie */
.ink-dla-kogo{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.ink-dla-kogo .karta .btn{margin-top:18px}
.ink-jeszcze{padding:clamp(4px,1vw,12px) 0 0}
.ink-jeszcze .h3{margin-bottom:10px}
.ink-jeszcze p{margin:0 0 10px;color:var(--tekst-cichy);font-size:15px}
.ink-jeszcze a{color:var(--czern);font-weight:700}
.ink-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:clamp(24px,3vw,36px)}
.ink-cta span{font-size:14px;color:var(--tekst-cichy)}
.ink-drogi .etykieta{margin-bottom:10px}
.ink-drogi .karta{display:flex;flex-direction:column;gap:10px}
.ink-drogi .karta .h3,.ink-drogi .karta p{margin:0}
.ink-kwota{font:600 15px/1.2 var(--font-text);color:var(--tekst-cichy)}
.ink-kwota b{font:700 30px/1 var(--font-display);color:var(--tekst);margin-right:4px}
.ink-drogi .link-strzalka{margin-top:auto}
.ink-kroki{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ink-kroki li{background:var(--bialy);border-radius:var(--promien-maly);padding:20px;box-shadow:var(--cien-karty)}
.ink-kroki .h3{margin:10px 0 6px;font-size:18px}
.ink-kroki p{margin:0;font-size:14.5px}
.ink-final-miekko{margin-top:18px;color:rgba(255,255,255,.8)}
.ink-final-miekko a{color:var(--bialy);font-weight:700}
.pasek-zglos{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--obrys);box-shadow:0 -8px 24px -16px rgba(17,17,17,.4);transform:translateY(110%);transition:transform .25s}
.pasek-zglos.widac{transform:none}
.pasek-zglos .btn{display:block;width:100%;text-align:center}
@media (min-width:861px){.pasek-zglos{display:none}}
@media (max-width:860px){.ink-dla-kogo{grid-template-columns:1fr}.ink-kroki{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ink-kroki{grid-template-columns:1fr}}

/* Inkubator: główne menu chowa się przy przewijaniu w dół i wraca przy przewijaniu w górę; zostaje menu strony z logo (27.10) */
.naglowek{transition:transform .3s ease}
.strona-menu{transition:top .3s ease}
body.naglowek-schowany .naglowek{transform:translateY(-100%)}
body.naglowek-schowany .strona-menu{top:0}
.strona-menu-logo{display:block;flex:0 0 auto;width:0;opacity:0;overflow:hidden;transition:width .3s ease,opacity .3s ease}
.strona-menu-logo img{display:block;height:30px;width:auto}
body.naglowek-schowany .strona-menu-logo{width:62px;opacity:1}
@media (prefers-reduced-motion:reduce){.naglowek,.strona-menu,.strona-menu-logo{transition:none}}

/* ===== Wygląd z propozycji Bartka na całej stronie (zmiana Agaty nr 42, 30.10.2026) =====
   Kolory są wyżej, w :root. Tu: etykiety, belki, kropki, przyciski, linki, nagłówek, pasek naboru,
   karty i stopka. Ruch (linia wody, ikony wokół zdjęcia, ocean w finale) jest tylko na stronie głównej,
   w glowna-wyglad.css. */
.h1,.h2{letter-spacing:-.015em}
.etykieta{background:#A8EBEE;color:#0A1A23}
.belka{background:linear-gradient(90deg,#FFBF15,#FFCE5A);border-radius:99px}
.kropki{background:radial-gradient(circle,#95E5ED 2px,transparent 2.4px) 0 0/25px 25px;opacity:.74}
.btn{box-shadow:0 3px 12px rgba(9,15,23,.06)}
.btn-glowny{background:linear-gradient(180deg,#1B3757,#11253B);border-color:#11253B}
.btn-glowny:hover{background:var(--magenta);border-color:var(--magenta)}
.btn-magenta{box-shadow:0 10px 28px rgba(228,2,127,.16)}
.btn-obrys{box-shadow:none}
.link-strzalka::after{color:#0BB2C2}
.naglowek{background:rgba(255,255,255,.97);box-shadow:0 4px 18px rgba(10,26,33,.03);border-bottom-color:#E8EFF0}
.naglowek>.kontener{min-height:83px}
.logo img{height:58px}
@media (min-width:1261px){
  .menu a:not(.btn){font-size:14px;font-weight:600;color:#15191F}
  .menu .btn{font-weight:800}
}
@media (max-width:560px){.naglowek>.kontener{min-height:72px}.logo img{height:48px}}
.pasek-naboru{background:var(--magenta)}
.karta.cien-karty{background:var(--bialy);border:1px solid #F0F5F7;box-shadow:0 15px 38px rgba(12,41,65,.055)}
.tlo-szary,.tlo-roz,.tlo-roz-jasny,.tlo-turkus,.tlo-turkus-jasny{background:var(--tlo-jasne)}
/* ściana zdjęć Społeczności: bez kółek z samymi inicjałami (wyglądają jak brak zdjęcia) */
.spol-sciana .kolo:has(.inicjaly){display:none}

/* stopka: biel z falą Bartka, kolorowe kreski nad kolumnami, większe logo, dolny pasek z linkami */
.stopka{background:var(--bialy) url("img/brand-flow.svg") center bottom/100% auto no-repeat;border-top:1px solid #E7EFF4;color:#173049}
.stopka .logo img{height:57px}
.stopka .sw-footer-brand p{font-size:13.5px;line-height:1.65;color:#29415B}
.stopka .sw-footer-brand .sw-footer-contact{margin:12px 0 14px;font-size:12.5px;line-height:1.55;color:var(--tekst-cichy)}
.stopka .sw-footer-contact a{text-decoration:underline}
.stopka .kontener>div:not(:first-child){border-left-color:#E7EDF0}
.stopka .sw-footer-links h4::before{content:"";display:block;width:20px;height:5px;border-radius:5px;background:var(--turkus);margin-bottom:15px}
.stopka .sw-footer-links:nth-child(3) h4::before{background:var(--musztarda)}
.stopka .sw-footer-links:nth-child(4) h4::before{background:var(--magenta)}
.stopka .kontener>div.prawa{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 20px;grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid #CDE4EE;padding-top:18px;font-size:12.5px;color:var(--tekst-cichy)}
.stopka .prawa a{color:var(--tekst-cichy)}

/* ===== Cztery etapy programu w stylu kart Bartka (zmiana Agaty nr 45, 30.10.2026) =====
   Kolorowy pasek na górze każdego etapu (jak w ofercie na głównej), tygodnie wypełniają się
   kolorem etapu, tematy z obwódką, kamień milowy na jasnożółtym tle. */
.os{gap:18px}
.os .blok{position:relative;overflow:hidden;border:1px solid #EEF3F5;border-radius:20px;padding:28px 22px 22px;box-shadow:0 12px 38px rgba(15,64,85,.06)}
.os .blok::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--etap)}
.os .blok:nth-child(4n+1){--etap:var(--turkus)}
.os .blok:nth-child(4n+2){--etap:#FF5FAE}
.os .blok:nth-child(4n+3){--etap:var(--musztarda)}
.os .blok:nth-child(4n+4){--etap:var(--magenta)}
.os .tygodnie{gap:5px;margin-top:2px}
.os .tydzien{height:26px;font-size:12px;color:var(--tekst-cichy);background:var(--szary)}
.os .tydzien.wypelniony{background:var(--etap);color:var(--czern)}
.os .blok:nth-child(4n+4) .tydzien.wypelniony{color:var(--bialy)}
.os .tydzien .k{top:-10px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.os .tematy li{background:var(--bialy);border:1px solid #DDEBEF;font-size:12.5px;padding:5px 11px}
.os .blok .kamien{background:#FFF5D6;border-left:0;border-radius:12px;padding:11px 14px;font-size:13.5px}

/* ===== Ciemne zakończenia stron i pasek Demo Day w stylu Bartka (zmiana Agaty nr 46, 30.10.2026) =====
   Zamiast płaskiej czerni ciemny ocean jak w finale strony głównej (img/final-ocean.svg). Przy „Rusza nabór…
   Wskakujesz na falę?” grafika z surferem na fali i kibicującymi ludźmi (img/grafiki/demoday-fala.jpg).
   Pasek „Finał: DemoDay” w różu (etap 4 też jest w magencie). */
.tlo-czern.cta-final{position:relative;overflow:hidden;background:#00111C url("img/final-ocean.svg") center/cover no-repeat}
.cta-final>.dek{display:none}
.cta-final .kontener{position:relative;z-index:1}
.cta-final .akcent-musztarda-na-czerni{display:inline-block;padding-bottom:.16em;margin-bottom:-.16em;background:linear-gradient(100deg,#FFF300,#FFBD23);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tlo-czern.cta-final.cta-zdjecie{background:linear-gradient(180deg,rgba(0,17,28,.84) 0%,rgba(0,17,28,.68) 50%,rgba(0,17,28,.88) 100%),url("img/grafiki/demoday-fala.jpg") center 45%/cover no-repeat;padding-block:clamp(88px,11vw,150px)}
.final-demo{background:linear-gradient(90deg,var(--magenta),#FF5FAE);box-shadow:0 10px 28px rgba(228,2,127,.18)}
.final-demo:hover{filter:brightness(1.05)}

/* 31.10.2026, uwagi Agaty po wejściu strony na żywo */
/* Cennik chwilowo bez wejścia: w stopce szary, nieklikalny */
.stopka .link-wkrotce{color:var(--tekst-cichy);opacity:.5;cursor:default;font-size:inherit}
/* Grafiki z Surferami jako tło dolnego zakończenia z przyciskiem, jak „Wskakujesz na falę?” (Agata: bez banerów w nagłówkach) */
.tlo-czern.cta-final.cta-zdjecie.cta-zespol{background-image:linear-gradient(180deg,rgba(0,17,28,.84) 0%,rgba(0,17,28,.68) 50%,rgba(0,17,28,.88) 100%),url("img/grafiki/zespol-deski.jpg");background-position:center 55%}
.tlo-czern.cta-final.cta-zdjecie.cta-laptopy{background-image:linear-gradient(180deg,rgba(0,17,28,.84) 0%,rgba(0,17,28,.68) 50%,rgba(0,17,28,.88) 100%),url("img/grafiki/zespol-laptopy.jpg");background-position:center 55%}
.tlo-czern.cta-final.cta-zdjecie.cta-woda{background-image:linear-gradient(180deg,rgba(0,17,28,.84) 0%,rgba(0,17,28,.68) 50%,rgba(0,17,28,.88) 100%),url("img/grafiki/deski-woda.jpg");background-position:center 50%}
.tlo-czern.cta-final.cta-zdjecie.cta-wystapienie{background-image:linear-gradient(180deg,rgba(0,17,28,.84) 0%,rgba(0,17,28,.68) 50%,rgba(0,17,28,.88) 100%),url("img/grafiki/demoday-wystapienie.jpg");background-position:center 40%}
.tlo-czern.cta-final.cta-zdjecie.cta-ksiazki{background-image:linear-gradient(180deg,rgba(0,17,28,.84) 0%,rgba(0,17,28,.68) 50%,rgba(0,17,28,.88) 100%),url("img/grafiki/plaza-ksiazki.jpg");background-position:center 50%}
.tlo-czern.cta-final.cta-zdjecie.cta-banknoty{background-image:linear-gradient(180deg,rgba(0,17,28,.84) 0%,rgba(0,17,28,.68) 50%,rgba(0,17,28,.88) 100%),url("img/grafiki/fala-banknoty.jpg");background-position:center 55%}
/* RWD: strona nie przesuwa się na boki na telefonie (taśmy zdjęć i linia wody wystają celowo) */
html,body{overflow-x:clip}
/* 31.10.2026, Agata: napis na zdjęciu „wypłukany”. Na zdjęciach pełny żółty zamiast przejścia i cień pod literami. */
.cta-zdjecie h2,.cta-zdjecie .sw-final-eyebrow,.cta-zdjecie p{text-shadow:0 2px 18px rgba(0,8,14,.6)}
.cta-zdjecie .akcent-musztarda-na-czerni{background:none!important;color:#FFD400!important;-webkit-text-fill-color:#FFD400!important;text-shadow:0 2px 18px rgba(0,8,14,.6)}
/* 31.10.2026, Agata: „Co mówią Surferzy” na czarnym wyglądało dziwnie. Jasne, błękitne tło z cieniem. */
.opinia{background:
    radial-gradient(120% 90% at 0% 0%,rgba(228,2,127,.10),transparent 55%),
    radial-gradient(90% 90% at 100% 100%,rgba(81,213,226,.24),transparent 55%),
    #F1FAFC;
  color:var(--tekst);border:1px solid #DDEFF4;box-shadow:0 26px 54px -26px rgba(17,45,65,.30)}
.opinia::before{opacity:.5}
.opinia blockquote{color:var(--tekst)}
.opinia figcaption{color:var(--tekst-cichy)}
.opinia .opinia-imie{color:var(--magenta)}
.opinia a.opinia-imie:hover{color:var(--tekst)}
.opinia figcaption > span{background:rgba(81,213,226,.20);color:var(--turkus-tekst)}
.opinia .kolo img,.opinia .kolo .inicjaly{border-color:#fff}
.opinia .kolo .inicjaly{background:var(--turkus-jasny);color:var(--tekst)}
.opinia .opinia-link{color:var(--tekst);border-color:rgba(17,37,59,.35)}
.opinia .opinia-link:hover{background:var(--tekst);color:var(--bialy);border-color:var(--tekst)}
.opinie-postep{background:rgba(17,37,59,.08)}
.opinie-strzalka{background:var(--tekst)}
/* 31.10.2026, Agata: błękitna karta „dziwnie wygląda”. Czysta biała karta z cieniem, bez wielkiego cudzysłowu i paska postępu (postęp pokazują kropki). */
.opinia{background:#fff;border:1px solid #E3EEF2;box-shadow:0 22px 50px -24px rgba(17,45,65,.28)}
.opinia::before{display:none}
.opinie-postep{display:none}
/* 31.10.2026, Agata: kropki wyglądały jak pasek ładowania, zdjęcia w tęczowej obwódce dziwnie. Proste kropki i zdjęcia w białej ramce z cieniem. */
.opinie-kropki{gap:8px}
.opinie-kropki button{width:9px;height:9px;border-radius:50%;background:#CFDCE2}
.opinie-kropki button[aria-current="true"]{width:9px;background:var(--tekst);transform:scale(1.25)}
.opinia .kolo{padding:0;background:none;box-shadow:0 14px 30px -14px rgba(17,45,65,.45)}
.opinia .kolo img,.opinia .kolo .inicjaly{border:5px solid #fff;object-fit:cover;object-position:center 30%}
/* 31.10.2026: ostatnie czarne elementy w granacie jak przyciski (aktywna zakładka w pasku Oferta, pigułki z filmem) */
.drogi-nav a[aria-current="page"]{background:var(--tekst);border-color:var(--tekst)}
.wideo-pigulka{background:var(--tekst)}
.wideo-pigulka:hover{background:var(--magenta)}
/* 31.10.2026, Agata: menu strony „słabo wygląda” i dublowało menu główne. Jeden pasek: logo, sekcje, „Oferta ▾”, jeden przycisk. */
.strona-menu{background:rgba(255,255,255,.98);box-shadow:0 10px 24px -18px rgba(17,45,65,.35)}
.strona-menu .kontener{gap:14px;padding-block:8px}
.strona-menu ul a{position:relative;padding:12px 12px;border-radius:0;color:var(--tekst);font-weight:700}
.strona-menu ul a:hover{background:none;color:var(--magenta)}
.strona-menu ul a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:var(--magenta);transform:scaleX(0);transition:transform .25s ease}
.strona-menu ul a.aktywny{background:none;color:var(--tekst)}
.strona-menu ul a.aktywny::after,.strona-menu ul a:hover::after{transform:scaleX(1)}
.strona-menu-oferta{position:relative;flex:0 0 auto}
.strona-menu-oferta summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;border:1.5px solid var(--obrys);font:700 14px/1 var(--font-text);color:var(--tekst);background:var(--bialy);white-space:nowrap}
.strona-menu-oferta summary::-webkit-details-marker{display:none}
.strona-menu-oferta summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.strona-menu-oferta[open] summary{border-color:var(--tekst)}
.strona-menu-oferta[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.strona-menu-oferta ul{position:absolute;right:0;top:calc(100% + 8px);display:grid!important;gap:2px;flex:none;overflow:visible;min-width:250px;padding:8px;margin:0;list-style:none;background:var(--bialy);border:1px solid var(--obrys);border-radius:var(--promien-maly);box-shadow:0 22px 44px -18px rgba(17,45,65,.35);z-index:50}
.strona-menu-oferta ul a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--tekst);font:700 14px/1.2 var(--font-text);text-decoration:none}
.strona-menu-oferta ul a::after{display:none}
.strona-menu-oferta ul a:hover{background:var(--szary);color:var(--tekst)}
.strona-menu-oferta ul a[aria-current="page"]{background:var(--tekst);color:var(--bialy)}
.strona-menu-oferta .nr{font:700 14px/1 var(--font-display);color:var(--magenta);min-width:20px}
.strona-menu-oferta ul a[aria-current="page"] .nr{color:var(--cytryna)}
@media (max-width:560px){.strona-menu-oferta summary{padding:8px 10px;font-size:13px}.strona-menu-oferta ul{right:-60px;min-width:230px}}
@media (max-width:640px){
  .strona-menu .kontener{flex-wrap:wrap;row-gap:2px;padding-block:6px}
  .strona-menu ul{order:3;flex:1 1 100%}
  .strona-menu-oferta{margin-left:auto}
  .strona-menu-oferta ul{right:0}
  .strona-menu ul a{padding:10px 10px}
}
.strona-menu-oferta{z-index:60!important}
/* Jeden „Zgłoś projekt” naraz: przycisk w pasku strony tylko wtedy, gdy menu główne jest schowane */
@media (min-width:861px){body:not(.naglowek-schowany) .strona-menu-cta{display:none}}