/* 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;
  --turkus:#83D0D3; --turkus-jasny:#E3F4F5; --turkus-tekst:#1F7A7E;
  --musztarda:#FCBE41; --cytryna:#FFEC00; --magenta:#E4027F;
  --czern:#111111; --tekst:#1D1D1D; --tekst-cichy:#5E5E5E;
  --szary:#F2F2F2; --obrys:#E4E4E4; --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(64px,8vw,112px);
  --cien-karty:0 1px 0 rgba(17,17,17,.04),0 14px 34px -22px rgba(17,17,17,.35);
}

*,*::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(--czern);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(--czern);border-color:var(--czern)}
.btn-obrys:hover{background:var(--czern);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 10px/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(--czern);color:var(--bialy);border:0;border-radius:999px;font:700 14px/1 var(--font-text);padding:12px 18px;cursor:pointer}
@media (max-width:1040px){
  .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: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}}