/* Propozycja wyglądu strony fundacji (skill design-taste-frontend). Kolory i czcionki marki bez zmian:
   Bricolage Grotesque + Figtree, #16141A, #1F4D43, #FF6B1A. Kierunek: pola kolorów (chapters). */
body.fund{
  --t-ink:#16141A; --t-green:#1F4D43; --t-orange:#FF6B1A; --t-white:#FFFFFF; --t-tint:#EEF0EF;
  --t-green-deep:#163A33; --t-vinyl:#34303C;
  --gutter:clamp(16px,3.4vw,48px);
  background:var(--t-white); color:var(--t-ink);
}
body.fund .wrap{max-width:none; padding-inline:var(--gutter)}

/* ---------- nagłówek: zwykły pasek, bez szkła i linii ---------- */
body.fund .head{background:#fff; backdrop-filter:none; border-bottom:0}
body.fund .head .wrap{height:72px}
body.fund .nav a{color:var(--t-ink); font-size:16px; font-weight:600}
body.fund .head .mailtop{color:var(--t-ink); font-weight:600}
body.fund .bag{background:var(--t-ink); color:#fff; border:0; min-height:46px; padding:0 18px; font-size:15.5px}
body.fund .bag:hover{background:var(--t-green)}
body.fund .strip{background:var(--t-ink)}
body.fund .dd-panel a{border-bottom:0}
body.fund .menu > summary{border:0; background:var(--t-tint)}
body.fund .menu[open] > summary{background:var(--t-ink)}
body.fund .menu nav{border:0}
body.fund .menu nav a{border-bottom:0}

/* ---------- przyciski: płaskie, kwadratowe, bez obrysów ---------- */
body.fund .btn{border:0; border-radius:0; min-height:58px; padding:0 30px; font-size:17px; font-weight:700; background:var(--t-ink); color:#fff}
body.fund .btn:hover{background:var(--t-green)}
body.fund .btn.line{background:rgba(22,20,26,.09); color:var(--t-ink)}
body.fund .btn.line:hover{background:rgba(22,20,26,.17)}
body.fund .ch-green .btn, body.fund .ch-ink .btn{background:var(--t-orange); color:var(--t-ink)}
body.fund .ch-green .btn:hover, body.fund .ch-ink .btn:hover{background:#fff}
body.fund .ch-green .btn.line, body.fund .ch-ink .btn.line{background:rgba(255,255,255,.14); color:#fff}
body.fund .ch-green .btn.line:hover, body.fund .ch-ink .btn.line:hover{background:rgba(255,255,255,.26)}
body.fund .ch-orange .btn{background:var(--t-ink); color:#fff}
body.fund .ch-orange .btn:hover{background:var(--t-green)}
body.fund .ch-orange .btn.line{background:rgba(22,20,26,.14); color:var(--t-ink)}
body.fund .ch-orange .btn.line:hover{background:rgba(22,20,26,.24)}
body.fund .acts{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- pola kolorów ---------- */
body.fund .ch{min-height:90svh; padding:clamp(72px,9vw,150px) 0; display:flex; align-items:center}
body.fund .ch > .wrap{display:grid; gap:clamp(28px,4vw,64px); align-content:center}
body.fund .ch-white{background:var(--t-white); color:var(--t-ink)}
body.fund .ch-tint{background:var(--t-tint); color:var(--t-ink)}
body.fund .ch-green{background:var(--t-green); color:#fff}
body.fund .ch-orange{background:var(--t-orange); color:var(--t-ink)}
body.fund .ch-ink{background:var(--t-ink); color:#fff}
body.fund .ch h1, body.fund .ch h2{font-family:var(--display); font-weight:800; font-size:clamp(34px,5.2vw,76px); line-height:.97; letter-spacing:-.035em; max-width:none; text-wrap:balance; margin:0}
body.fund .ch h3{font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0}
body.fund .ch p, body.fund .ch li{font-size:clamp(17px,1.35vw,20px); line-height:1.6; color:inherit; max-width:64ch; margin:0}
body.fund .ch b{font-weight:700}
body.fund .ch a{color:inherit; text-underline-offset:4px}
body.fund .ch .textlink{text-decoration:underline; text-decoration-thickness:2px}
body.fund .ch .statement{font-family:var(--display); font-weight:600; font-size:clamp(21px,2.3vw,32px); line-height:1.3; letter-spacing:-.015em; max-width:46ch}
body.fund .ch ul, body.fund .ch ol{margin:0}
body.fund .o-lista{padding-left:1.3em; display:grid; gap:10px}
body.fund .o-lista li::marker{color:inherit}
body.fund .ch-orange .o-lista li::marker, body.fund .ch-tint .o-lista li::marker, body.fund .ch-white .o-lista li::marker{color:var(--t-green)}

/* ---------- pierwszy ekran ---------- */
body.fund .hero-fund{padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,80px); align-items:stretch}
body.fund .hero-fund h1{font-size:clamp(34px,5.2vw,76px); line-height:.97; letter-spacing:-.035em}
.hero-row{display:grid; gap:clamp(28px,4vw,56px); align-items:end}
@media (min-width:1000px){ .hero-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.hero-txt{display:grid; gap:20px; align-content:end}
body.fund .hero-fund .sub{font-size:clamp(19px,1.7vw,24px); line-height:1.5; max-width:34ch; color:var(--t-ink)}
body.fund .hero-fund .motto{font-style:italic; color:var(--t-ink); border:0; border-left:4px solid var(--t-orange,#FF6B1A); background:#FFEADD; padding:14px 18px; font-size:clamp(17px,1.35vw,20px); max-width:48ch}
body.fund .hero-fund .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
.deck{display:block; width:100%; height:auto; overflow:visible}
@media (min-width:1000px){ .deck{margin-right:calc(-1 * var(--gutter)); width:calc(100% + var(--gutter))} }
.d-plate{fill:var(--t-ink)}
.d-vinyl{fill:var(--t-vinyl)}
.d-label{fill:var(--t-orange)}
.d-pin{fill:var(--t-ink)}
.d-mark{fill:#fff}
.d-mix{fill:var(--t-green)}
.d-slot{fill:var(--t-green-deep)}
.d-knob{fill:#fff}
.d-knob2{fill:var(--t-orange)}
.d-cross{fill:#fff}
.d-ring{fill:var(--t-green-deep)}
.d-spin{transform-box:fill-box; transform-origin:center; animation:talerz 16s linear infinite}
.d-spin2{animation-duration:21s}
.platter .d-vinyl{fill:var(--t-green)}
.platter{transform-origin:center; animation:talerz 24s linear infinite}
@keyframes talerz{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .d-spin, .platter{animation:none} }

/* ---------- O Fundacji ---------- */
.o-bloki{display:grid; gap:clamp(44px,5vw,72px) clamp(40px,6vw,96px); max-width:none}
@media (min-width:900px){ .o-bloki{grid-template-columns:1fr 1fr} }
body.fund .o-blok{display:grid; gap:16px; align-content:start; scroll-margin-top:96px}
body.fund .o-blok h3{font-size:clamp(26px,2.8vw,40px)}
body.fund .o-blok p{font-size:clamp(17px,1.4vw,20px); color:#fff}
body.fund .o-blok b{color:#fff}
body.fund .o-lista li{font-size:clamp(17px,1.3vw,19px)}

/* ---------- Jak się zgłosić ---------- */
.zglos-grid{display:grid; gap:clamp(36px,4vw,64px) clamp(36px,6vw,96px)}
@media (min-width:900px){ .zglos-grid{grid-template-columns:1fr 1fr} }
.zg{display:grid; gap:14px; align-content:start}
body.fund .zg h3{font-size:clamp(23px,2.2vw,30px)}
body.fund #jak-sie-zglosic{scroll-margin-top:72px}

/* ---------- Nie tylko słuchają. Tworzą. ---------- */
.tworza-row{display:grid; gap:clamp(32px,5vw,72px); align-items:center}
@media (min-width:1000px){ .tworza-row{grid-template-columns:minmax(0,6fr) minmax(0,5fr)} }
.tworza-txt{display:grid; gap:22px}
body.fund .tworza-txt .lead{font-family:var(--display); font-weight:600; font-size:clamp(22px,2.4vw,34px); line-height:1.25; letter-spacing:-.015em; max-width:30ch; color:#fff}
.platter{display:block; width:min(100%,520px); height:auto; justify-self:center}
@media (min-width:1000px){ .platter{justify-self:end; margin-right:calc(-12% - 0px)} }

/* ---------- Kierunki rozwoju ---------- */
.topics{display:grid; gap:clamp(30px,3.4vw,48px)}
.topics > div{display:grid; gap:10px 56px; align-items:start}
@media (min-width:900px){ .topics > div{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
body.fund .topics h3{font-size:clamp(24px,2.6vw,38px)}
body.fund .topics p{max-width:56ch}

/* ---------- Pierwsze zajęcia ---------- */
.pz-txt{display:grid; gap:18px}
body.fund .pz-txt p{font-family:var(--display); font-weight:600; font-size:clamp(21px,2.3vw,32px); line-height:1.3; letter-spacing:-.015em; max-width:42ch}

/* ---------- Jak działamy ---------- */
body.fund .steps{list-style:none; padding:0; display:grid; gap:clamp(36px,4vw,56px) 40px; border:0}
@media (min-width:640px){ body.fund .steps{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ body.fund .steps.steps-4{grid-template-columns:repeat(4,1fr)} }
body.fund .steps li{border:0; padding:0; display:grid; gap:12px; align-content:start}
body.fund .steps li::before{content:none; display:none}
body.fund .steps h3{font-size:clamp(23px,2vw,30px)}
body.fund .steps p{font-size:clamp(17px,1.3vw,19px); color:#fff}

/* ---------- Dla kogo ---------- */
.kogo-txt{display:grid; gap:24px 64px; align-content:start}
@media (min-width:900px){ .kogo-txt{grid-template-columns:1fr 1fr} .kogo-txt p:last-child{grid-column:1 / -1} }
body.fund .kogo-txt p:last-child{font-family:var(--display); font-weight:700; font-size:clamp(23px,2.4vw,34px); line-height:1.25; letter-spacing:-.015em; max-width:36ch}

/* ---------- Dla partnerów ---------- */
.partners{display:grid; gap:clamp(32px,4vw,52px) 48px}
@media (min-width:900px){ .partners{grid-template-columns:repeat(3,1fr)} }
.partners > div{display:grid; gap:12px; align-content:start; border:0; padding:0 !important}
body.fund .partners h3{font-size:clamp(23px,2vw,30px)}

/* ---------- Zamknięcie ---------- */
body.fund .cta{padding:clamp(72px,9vw,150px) 0}
body.fund .cta .wrap{display:grid; gap:clamp(28px,4vw,48px); align-content:center}
body.fund .cta h2{font-size:clamp(21px,3.4vw,58px); line-height:1.02; max-width:none}
body.fund .cta p{max-width:52ch; color:#fff; margin-top:16px}
.cta-btns{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- stopka: nazwa wraca na całą szerokość ---------- */
body.fund .foot{background:var(--t-tint); color:var(--t-ink); border-top:0; padding:clamp(56px,8vw,128px) 0 40px}
body.fund .foot .wrap{display:grid; gap:clamp(28px,4vw,56px)}
body.fund .foot-brand{display:grid; gap:18px}
body.fund .foot-brand .logo{font-size:clamp(34px,5.2vw,76px); letter-spacing:-.045em; color:var(--t-ink); line-height:1; gap:.18em}
body.fund .foot-brand .logo .dots{gap:.07em}
body.fund .foot-brand .logo .dots i{width:.26em; height:.26em}
body.fund .foot-brand p{color:var(--t-ink); font-size:clamp(17px,1.4vw,20px); max-width:46ch}
body.fund .foot nav{margin-left:0; display:flex; flex-wrap:wrap; gap:12px 28px}
body.fund .foot nav a{color:var(--t-ink); font-size:17px; font-weight:600; text-decoration:underline; text-underline-offset:4px}

/* ---------- Projekty ---------- */
.etykiety{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.et{display:inline-block; font-size:15px; font-weight:700; line-height:1.2; padding:10px 16px; border:0; border-radius:0; background:#fff; color:var(--t-ink)}
.et.ok{background:#fff; color:var(--t-green)}
.et.wip{background:var(--t-orange); color:var(--t-ink)}
.et.draft{background:var(--t-tint); color:var(--t-ink)}
.et.no{background:var(--t-ink); color:#fff}
body.fund .ch-orange .et.no{background:var(--t-ink); color:#fff}
body.fund .ch-ink .et.no{background:#fff; color:var(--t-ink)}
body.fund .ch-ink .et.ok{background:var(--t-green); color:#fff}
body.fund .ch-ink .et.draft{background:var(--t-orange); color:var(--t-ink)}
.fakty{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px 48px; margin:0}
.fakty > div{display:grid; gap:4px; align-content:start}
.fakty dt{font-size:17px; font-weight:500; color:#fff}
.fakty dd{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(21px,2vw,28px); line-height:1.2; letter-spacing:-.015em}
.proj-cols{display:grid; gap:clamp(32px,4vw,56px) 64px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.proj-cols h3{font-size:clamp(23px,2vw,30px); margin-bottom:14px}
.etap{list-style:none; padding:0; display:grid; gap:0}
.etap li{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 0; font-size:clamp(18px,1.6vw,22px)}
body.fund .proj-next{margin-top:clamp(24px,4vw,56px); max-width:60ch}
body.fund .bezp-list li{font-size:clamp(19px,1.8vw,24px); max-width:56ch}
body.fund .proj-intro h1{font-size:clamp(34px,5.2vw,76px)}

/* jedno spotkanie jako żywy pasek */
.meet{display:flex; gap:4px; align-items:flex-end; min-height:112px}
.meet[hidden]{display:none}
.seg{flex:var(--m) 1 0; min-width:0; height:72px; border:0; border-radius:0; font:700 17px var(--text); cursor:pointer; transition:height .25s var(--ease); color:var(--t-ink); background:var(--t-orange)}
.seg-2, .seg-4{background:var(--t-green); color:#fff}
.seg-3{background:var(--t-ink); color:#fff}
.seg[aria-pressed="true"]{height:112px}
.seg:focus-visible{outline:3px solid var(--t-ink); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .seg{transition:none} }
.meet-list li{padding:6px 12px; margin-left:-12px; max-width:60ch}
.meet-list li.on{background:var(--t-ink); color:#fff}
body.fund .ch{overflow-x:clip}
.et{max-width:100%}
/* kolory tekstu przycisków (wyższa swoistość niż „a{color:inherit}”) */
body.fund .ch a.btn{color:#fff; text-decoration:none}
body.fund .ch a.btn.line{color:var(--t-ink)}
body.fund .ch-green a.btn, body.fund .ch-ink a.btn{color:var(--t-ink)}
body.fund .ch-green a.btn:hover, body.fund .ch-ink a.btn:hover{color:var(--t-ink)}
body.fund .ch-green a.btn.line, body.fund .ch-ink a.btn.line{color:#fff}
body.fund .ch-orange a.btn{color:#fff}
body.fund .ch-orange a.btn.line{color:var(--t-ink)}

/* lists readable in every chapter */
body.fund .o-lista li{color:inherit}
body.fund .o-lista li::marker{color:currentColor}
body.fund .ch .o-lista{color:inherit}
body.fund .ch-green .o-lista li::marker, body.fund .ch-ink .o-lista li::marker{color:var(--t-orange)}
body.fund .ch-tint .o-lista, body.fund .ch-white .o-lista{color:var(--t-ink)}

/* Projekty: bez ramek, bez drobnych wersalików, wspólna lewa krawędź */
body.fund .ch .proj{background:transparent; border:0; padding:0; max-width:none; display:block}
body.fund .ch .fakty > div{border:0; padding:0}
body.fund .ch .fakty dt{font-size:17px; font-weight:500; letter-spacing:0; text-transform:none; color:inherit; opacity:.85}
body.fund .ch .fakty dd{color:inherit}
body.fund .ch .proj p, body.fund .ch .proj li{color:inherit}
body.fund .ch > .wrap{width:100%; margin-inline:0; box-sizing:border-box}
body.fund .ch .etap, body.fund .ch .etap li{border:0; max-width:none}
body.fund .ch .etap{gap:6px}
body.fund .ch .etap li{font-size:clamp(18px,1.7vw,23px); padding:8px 0; color:#fff}
body.fund .ch-orange a.btn.line{background:var(--t-ink); color:#fff}
body.fund .ch-orange a.btn.line:hover{background:#fff; color:var(--t-ink)}
body.fund .ch .fakty{border:0}

/* wyrównanie kolumn: nagłówek, wstęp i lista zaczynają się na tej samej wysokości */
@media (min-width:900px){
  body.fund .zglos-grid{row-gap:0}
  body.fund .zglos-grid .zg{grid-row:span 3; grid-template-rows:subgrid; gap:14px; align-content:start}
  body.fund .zglos-grid .zg > ul, body.fund .zglos-grid .zg > ol{grid-row:3}
  /* lista bez wstępu zaczyna się zaraz pod nagłówkiem, na wysokości wstępu z drugiej kolumny (bez pustej luki) */
  body.fund .zglos-grid .zg > h3 + ul, body.fund .zglos-grid .zg > h3 + ol{grid-row:2 / span 2}
  body.fund .zglos-grid .zg:nth-child(n+3){margin-top:clamp(36px,4vw,64px)}
  body.fund .zg h3{max-width:none}
  body.fund .partners{row-gap:12px}
  body.fund .partners > div{grid-row:span 2; grid-template-rows:subgrid; gap:12px}
}
/* jeden przycisk dla wszystkich trzech grup, na środku pod całością */
body.fund #dla-partnerow .acts{justify-content:center; margin-top:clamp(8px,2vw,24px)}
/* stopka na jasnym polu: logo w oryginalnych kolorach, bez płytki i ramki */

/* Kontakt: scena narysowana w stylu decków */
.scena{display:block; width:100%; max-width:640px; height:auto; justify-self:center}
.sc-bar{fill:#fff}
.sc-beam{fill:var(--t-green-deep)}
.sc-lamp{fill:#fff}
.sc-lamp.sc-o{fill:var(--t-orange)}
.sc-spk{fill:var(--t-green)}
.sc-ring{fill:var(--t-green-deep)}
.sc-cone{fill:var(--t-orange)}
.sc-white{fill:#fff}
.sc-table{fill:#fff}
.sc-leg{fill:var(--t-green)}
@media (min-width:1000px){
  body.fund .cta .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; column-gap:clamp(32px,5vw,96px); row-gap:clamp(20px,2.4vw,32px)}
  body.fund .cta .wrap > div:first-child{display:contents}
  body.fund .cta h2{grid-column:1 / -1; font-size:clamp(21px,5.2vw,84px); max-width:none}
  body.fund .cta .wrap > div:first-child p{grid-column:1; grid-row:2; margin:0}
  body.fund .cta .scena{grid-column:2; grid-row:2 / span 2; justify-self:end; align-self:center}
}
@media (prefers-reduced-motion:reduce){ .scena .d-spin{animation:none} }

/* formularz kontaktowy na ciemnym polu: pola o jeden stopień jaśniejsze, bez ramek */
.kform{display:grid; gap:16px; max-width:640px}
.kf-row{display:grid; gap:16px}
@media (min-width:640px){ .kf-row{grid-template-columns:1fr 1fr} }
.kf{display:grid; gap:6px; font-size:16px; font-weight:600; color:#fff}
.kf input, .kf select, .kf textarea{font:500 17px var(--text); color:#fff; background:#2A2631; border:0; border-radius:0; padding:14px 16px; width:100%; box-sizing:border-box; min-height:52px}
.kf textarea{resize:vertical; min-height:140px}
.kf select{appearance:none; background-image:none}
.kf input:focus-visible, .kf select:focus-visible, .kf textarea:focus-visible, .kf-zgoda input:focus-visible{outline:3px solid var(--t-orange); outline-offset:2px}
.kf-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.kf-zgoda{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; font-size:15px; line-height:1.5; color:#fff}
.kf-zgoda input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--t-orange)}
.kf-zgoda a, .kf-mail{color:#fff; text-decoration:underline; text-underline-offset:4px}
.kf-act{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.kf-act .btn{background:var(--t-orange); color:var(--t-ink); border:0; cursor:pointer}
.kf-act .btn:hover{background:#fff}
.kf-mail{font-size:16px}
.kf-msg{margin:0; font-weight:600; color:#fff}
@media (min-width:1000px){
  body.fund .cta .kform{grid-column:1; grid-row:3}
  body.fund .cta .scena{grid-row:2 / span 2}
}
.kf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px}
.kf select option{color:#16141A}
.sc-top{fill:#fff}
.sc-edge{fill:#C9CFCC}
img.deck, img.scena{display:block; height:auto}

/* jedna siatka: wszystkie układy dwukolumnowe dzielą się 5:7 z tym samym odstępem, więc prawa kolumna zaczyna się w tym samym miejscu (hero, O Fundacji, Jak się zgłosić, kierunki) */
@media (min-width:900px){
  body.fund .o-bloki, body.fund .zglos-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px}
}
@media (min-width:1000px){ body.fund .hero-row{column-gap:56px} }
@media (min-width:1000px){
  body.fund .cta .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px}
  body.fund .cta .scena{max-width:none; width:100%; justify-self:stretch}
}
@media (min-width:1000px){ body.fund .cta .scena{align-self:start} }
@media (min-width:900px){ body.fund .proj-cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px} }
button.seg{display:block; text-align:left; padding:0 0 0 16px}
button.seg span{display:inline; border:0; min-height:0; padding:0; border-radius:0; background:none; color:inherit; font-size:17px}
button.seg:hover span{border:0}
body.fund .o-lista, body.fund ol.o-lista{padding-left:30px}
body.fund .proj-cols h3{margin-bottom:16px}
body.fund .zglos-grid .o-lista{align-content:start}
body.fund #dla-partnerow .acts{max-width:none; width:100%}

/* Kierunki: tekst po prawej zaczyna się na wysokości wielkich liter nagłówka */
body.fund .topics p{margin:0}
@media (min-width:900px){ body.fund .topics p{padding-top:0} }

/* nagłówek z pełną nazwą „Fundacja agencja atrakcji”: bez poziomego przewijania */
@media (max-width:1160px){ .nav{display:none} .menu{display:block} }
@media (max-width:640px){ .head .wrap{gap:10px} .logo{font-size:17px; gap:8px} }
@media (max-width:420px){ .logo{font-size:15px; gap:7px} .logo .dots i{width:7px; height:7px} }
@media (max-width:560px){ .bag-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} body.fund .bag{padding:0 12px} }
@media (min-width:1161px){ .head .wrap{gap:18px} .nav{gap:18px} }
/* z zakładką „Sprzedaż atrakcji” menu jest szersze: adres i podpis przycisku chowają się wcześniej */
body.fund .head .bag{flex:none}
@media (max-width:1559px){ body.fund .mailtop-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} body.fund .head .mailtop{width:44px; justify-content:center; padding:0} }
@media (max-width:1380px){ body.fund .bag-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} body.fund .bag{padding:0 12px} body.fund .nav{gap:14px} }
@media (max-width:1240px){ body.fund .nav{display:none} body.fund .menu{display:block} }

/* Kontakt: nagłówek odrobinę wyżej */
body.fund .cta{padding-top:clamp(53px,7.65vw,131px)}
@media (max-width:560px){ body.fund .foot-brand .logo{font-size:clamp(22px,7vw,34px); white-space:normal; flex-wrap:wrap} }

/* kontroler DJ w sekcji głównej: rysunek z ruchomymi elementami nad tłem z renderu 3D */
.deck-live{position:relative}
.deck-live .deck-bg{display:block;width:100%;height:auto}
.deck-live .deck-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;-webkit-tap-highlight-color:transparent}
.deck-svg .dk-hit{fill:transparent}
.deck-svg .dk-halo{fill:#FF6B1A;opacity:0;filter:url(#dk-bl);pointer-events:none;transition:opacity .15s}
.deck-svg .dk-gr{fill:none;stroke:#2B2832;stroke-width:1.3}
.deck-svg .dk-d{stroke:#fff;stroke-opacity:.5;stroke-width:3.4;stroke-linecap:round}
.deck-svg .dk-d0{stroke:#FF6B1A;stroke-width:4.2;stroke-linecap:round}
.deck-svg .dk-jring{fill:none;stroke:#fff;filter:url(#dk-gw)}
.deck-svg .dk-nt{stroke:#fff;stroke-linecap:round}
.deck-svg .dk-jog.act .dk-jring{filter:url(#dk-gs)}
.deck-svg .dk-rg{fill:none;filter:url(#dk-gw)}
.deck-svg .dk-knob .dk-rot{transition:transform .14s ease-out}
.deck-svg .dk-jog,.deck-svg .dk-knob,.deck-svg .dk-pad,.deck-svg .dk-ring,.deck-svg .dk-btn{cursor:pointer}
.deck-svg .dk-jog{cursor:grab}
.deck-svg .dk-fad{cursor:ns-resize}
.deck-svg .dk-fad[data-ax="x"]{cursor:ew-resize}
.deck-svg .dk-jog,.deck-svg .dk-knob,.deck-svg .dk-fad{touch-action:none}
.deck-svg .dk-on,.deck-svg .on{}
.deck-svg .dk-pad.on .dk-halo,.deck-svg .dk-ring.on .dk-halo,.deck-svg .dk-btn.on .dk-halo{opacity:.75}
.deck-svg .dk-pad.on .dk-in{fill:#FF6B1A}
.deck-svg .dk-pad.on .dk-pf{fill:#fff}
.deck-svg .dk-ring.on .dk-in{fill:#FF6B1A;fill-opacity:.55}
.deck-svg .dk-ring.dk-rw.on .dk-in{fill:#fff;fill-opacity:.4}
.deck-svg .dk-ring.on .dk-rg{filter:url(#dk-gs)}
.deck-svg .dk-btn.on .dk-top{fill:#FF6B1A;stroke:#fff;stroke-width:2.4}
@media (hover:hover){
  .deck-svg .dk-pad:hover .dk-halo,.deck-svg .dk-ring:hover .dk-halo,.deck-svg .dk-btn:hover .dk-halo{opacity:.75}
  .deck-svg .dk-pad:hover .dk-in{fill:#FF6B1A}
  .deck-svg .dk-pad:hover .dk-pf{fill:#fff}
  .deck-svg .dk-ring:hover .dk-in{fill:#FF6B1A;fill-opacity:.55}
  .deck-svg .dk-ring.dk-rw:hover .dk-in{fill:#fff;fill-opacity:.4}
  .deck-svg .dk-ring:hover .dk-rg{filter:url(#dk-gs)}
  .deck-svg .dk-btn:hover .dk-top{fill:#FF6B1A;stroke:#fff;stroke-width:2.4}
  .deck-svg .dk-knob:hover .dk-top{stroke:#FF6B1A;stroke-width:2.6}
  .deck-svg .dk-ko:hover .dk-top{stroke:#fff}
  .deck-svg .dk-fad:hover .dk-hd polygon:nth-child(2){stroke:#FF6B1A;stroke-width:2.2}
}
body.mv-on .deck-svg,body.cm-on .deck-svg{pointer-events:none}
@media (prefers-reduced-motion:reduce){.deck-svg .dk-knob .dk-rot,.deck-svg .dk-halo{transition:none}}

/* „Nie tylko słuchają. Tworzą.” bez grafiki talerza (Olivia, 14.10): wstęp po lewej, opis po prawej, w tej samej siatce 5:7 co inne sekcje */
@media (min-width:900px){
  body.fund .tworza-row{grid-template-columns:minmax(0,1fr)}
  body.fund .tworza-txt{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px; row-gap:22px; align-items:start}
  body.fund .tworza-txt .lead{grid-column:1; grid-row:1 / span 2; margin:0}
  body.fund .tworza-txt p:not(.lead){grid-column:2; margin:0; max-width:62ch}
}

/* ================= System ruchu (Motion) i elementy z pięciu źródeł =================
   Wspólne wartości ruchu: ruch.js czyta je stąd, więc czas i krzywa są w jednym miejscu. */
body.fund{
  --t-micro:180ms;   /* naciśnięcie, zmiana koloru */
  --t-reveal:420ms;  /* wypełnienie przycisku, rozwinięcie */
  --t-enter:600ms;   /* wejście części sekcji */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --rise:24px;       /* o ile podjeżdżają elementy przy wejściu */
}
@media (max-width:700px){ body.fund{--rise:12px} }

/* --- Przyciski: wzór Radial Reveal Button z Originkit. Kolor wypełnienia wychodzi kołem z miejsca,
       w którym kursor wjechał w przycisk, i cofa się do miejsca, którym wyjechał. Kolor wypełnienia
       to ten sam kolor, który wcześniej był kolorem najechania. --- */
body.fund .btn.rr, body.fund .bag.rr{position:relative; isolation:isolate; overflow:hidden; --rr-base:var(--t-ink); --rr-fill:var(--t-green); --rr-ink:#fff}
body.fund .btn.line.rr{--rr-base:rgba(22,20,26,.09); --rr-fill:var(--t-ink); --rr-ink:#fff}
body.fund .ch-green .btn.rr, body.fund .ch-ink .btn.rr{--rr-base:var(--t-orange); --rr-fill:#fff; --rr-ink:var(--t-ink)}
body.fund .ch-green .btn.line.rr, body.fund .ch-ink .btn.line.rr{--rr-base:rgba(255,255,255,.14); --rr-fill:#fff; --rr-ink:var(--t-ink)}
body.fund .ch-orange .btn.rr{--rr-base:var(--t-ink); --rr-fill:var(--t-green); --rr-ink:#fff}
body.fund .ch-orange a.btn.line.rr{--rr-base:var(--t-ink); --rr-fill:#fff; --rr-ink:var(--t-ink)}
body.fund .btn.rr.rr:hover, body.fund .bag.rr.rr:hover{background:var(--rr-base)}
.rr-f{position:absolute; inset:0; z-index:-1; background:var(--rr-fill); pointer-events:none;
  clip-path:circle(var(--rr-r,0px) at var(--rr-x,50%) var(--rr-y,50%)); transition:clip-path var(--t-reveal) var(--ease-out)}
body.fund .rr.rr-in{color:var(--rr-ink)}
body.fund .rr{transition:color var(--t-micro) var(--ease-out)}
body.fund .btn:focus-visible, body.fund .bag:focus-visible{outline:3px solid var(--t-orange); outline-offset:3px}
body.fund .ch-orange .btn:focus-visible{outline-color:var(--t-ink)}

/* --- Tablica z klapkami: wzór Split Flap Display z Componentry --- */
.pz-row{display:grid; gap:clamp(32px,4vw,56px)}
@media (min-width:900px){
  .pz-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px; align-items:start}
  /* górna krawędź tablicy na wysokości wielkich liter pierwszej linii tekstu obok */
  .pz-row .tablica{grid-column:1; grid-row:1; margin-top:calc(clamp(21px,2.3vw,32px) * .3)}
  .pz-row .pz-txt{grid-column:2; grid-row:1}
}
.tablica{background:var(--t-ink); color:#fff; padding:clamp(18px,2vw,28px); display:grid; gap:18px; min-width:0; container-type:inline-size}
/* klapka tak szeroka, żeby wiersz zmieścił się w tablicy, najwyżej 34 px (kolumny liczy tablica.js w --kol) */
.tab-rows{--fw:clamp(14px, calc((100cqi - 20px - (var(--kol, 13) - 1) * 3px) / var(--kol, 13)), 34px); --fh:calc(var(--fw) * 1.42)}
body.fund .tablica .tab-h{font-size:clamp(19px,1.6vw,23px); color:#fff}
.tab-rows{display:grid; gap:14px; margin:0}
.tab-row{display:grid; grid-template-columns:6px minmax(0,1fr); column-gap:14px; row-gap:6px; align-items:center}
.tab-row::before{content:""; grid-row:1 / span 2; align-self:stretch; background:#8E8A95}
.tab-row[data-stan="wip"]::before{background:var(--t-orange)}
.tab-row[data-stan="ok"]::before{background:#fff}
.tab-row dt{font-size:15px; font-weight:600; color:rgba(255,255,255,.78)}
.tab-row dd{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(19px,1.8vw,26px); text-transform:uppercase; letter-spacing:.02em}
.fl-row{display:flex; gap:3px; flex-wrap:nowrap}
.fl{position:relative; flex:none; width:var(--fw); height:var(--fh); perspective:400px; color:#F4F2EE; text-align:center;
  font:700 calc(var(--fw) * .78)/var(--fh) var(--display); letter-spacing:0}
.fl > span{position:absolute; left:0; right:0; height:50%; overflow:hidden; background:#2A2730}
.fl-t, .fl-ft{top:0; border-radius:3px 3px 0 0}
.fl-b, .fl-fb{bottom:0; border-radius:0 0 3px 3px; background:#24212A !important}
.fl b{display:block; height:var(--fh); font-weight:inherit}
.fl-b b, .fl-fb b{margin-top:calc(var(--fh) / -2)}
.fl-ft{transform-origin:50% 100%; z-index:2; display:none; background:#2F2C35 !important}
.fl-fb{transform-origin:50% 0; z-index:2; display:none}
.fl.a1 .fl-ft{display:block; animation:flapTop calc(var(--flap,42ms) * .45) ease-in forwards}
.fl.a2 .fl-fb{display:block; animation:flapBot calc(var(--flap,42ms) * .45) ease-out forwards}
.fl::after{content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--t-ink); z-index:3}
@keyframes flapTop{from{transform:rotateX(0)} to{transform:rotateX(-90deg)}}
@keyframes flapBot{from{transform:rotateX(90deg)} to{transform:rotateX(0)}}
.tablica.tab-on dd{letter-spacing:0}

/* --- Jak się zgłosić: rozwijane bloki, wzór Accordion Expand z Ripplix. Bez skryptu wszystko jest rozwinięte. --- */
body.fund .zglos-grid.acc{border:0; padding-top:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; --acc-pad:clamp(16px,1.8vw,26px)}
body.fund .zglos-grid.acc .zg{display:block; margin:0 calc(-1 * var(--acc-pad)); padding:0 var(--acc-pad); background:#fff; grid-row:auto}
body.fund .zglos-grid.acc .zg:nth-child(n+3){margin-top:0}
body.fund .zglos-grid.acc .zg > h3{margin:0}
.acc-b{all:unset; box-sizing:border-box; width:100%; min-height:72px; padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  font:inherit; color:var(--t-ink); text-align:left}
.acc-b > span{flex:1 1 auto}
.acc-i{flex:none; width:44px; height:44px; padding:10px; background:var(--t-tint); stroke:currentColor; fill:none; stroke-width:2;
  transition:transform var(--t-reveal) var(--ease-out), background var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out)}
.acc-b[aria-expanded="true"] .acc-i{transform:rotate(180deg); background:var(--t-ink); color:#fff}
@media (hover:hover){ .acc-b:hover .acc-i{background:var(--t-orange); color:var(--t-ink)} }
.acc-b:focus-visible{outline:3px solid var(--t-orange); outline-offset:4px}
.acc-p{overflow:hidden}
.acc-p[hidden="until-found"]{display:block; content-visibility:hidden; height:0}
.acc-in{display:grid; gap:14px; padding:0 0 28px}
@media (min-width:900px){
  body.fund .zglos-grid.acc .zg > h3{font-size:clamp(23px,2.2vw,30px)}
  .acc-in{padding-left:calc((100% - 56px) * 5 / 12 + 56px); margin-top:-4px}
}
@media (prefers-reduced-motion:reduce){ .rr-f, .acc-i{transition:none} .fl.a1 .fl-ft, .fl.a2 .fl-fb{animation:none} }

/* ---------- realistyczny kontroler (render 3D z metalem, gumą i napisami): nakładka tylko świeci i się rusza ---------- */
.deck-real .deck-svg .dk-top{fill:transparent; stroke:transparent}
.deck-real .deck-svg .dk-in{fill:transparent}
.deck-real .deck-svg .dk-pf{fill:none; stroke:transparent; stroke-width:2.2}
.deck-real .deck-svg .dk-rg{fill:none; stroke:transparent}
.deck-real .deck-svg .dk-fh{fill:transparent; stroke:transparent; stroke-width:2}
.deck-real .deck-svg .dk-jring{opacity:.35; transition:opacity var(--t-micro,.18s)}
.deck-real .deck-svg .dk-jog:hover .dk-jring, .deck-real .deck-svg .dk-jog.act .dk-jring{opacity:1; filter:url(#dk-gs)}
.deck-real .deck-svg .dk-d0{fill:#FF6B1A; filter:url(#dk-gw)}
/* zapalone (klik) i najechane: pomarańczowe światło z białą obwódką */
.deck-real .deck-svg .dk-pad.on .dk-in{fill:#FF6B1A; fill-opacity:.82}
.deck-real .deck-svg .dk-pad.on .dk-pf{fill:none; stroke:#fff}
.deck-real .deck-svg .dk-ring.on .dk-rg{stroke:#FF6B1A; filter:url(#dk-gs)}
.deck-real .deck-svg .dk-ring.dk-rw.on .dk-rg{stroke:#fff}
.deck-real .deck-svg .dk-ring.on .dk-in{fill:#FF6B1A; fill-opacity:.35}
.deck-real .deck-svg .dk-btn.on .dk-top{fill:#FF6B1A; fill-opacity:.85; stroke:#fff; stroke-width:2}
@media (hover:hover){
  .deck-real .deck-svg .dk-pad:hover .dk-in{fill:#FF6B1A; fill-opacity:.82}
  .deck-real .deck-svg .dk-pad:hover .dk-pf{fill:none; stroke:#fff}
  .deck-real .deck-svg .dk-ring:hover .dk-rg{stroke:#FF6B1A; filter:url(#dk-gs)}
  .deck-real .deck-svg .dk-ring.dk-rw:hover .dk-rg{stroke:#fff}
  .deck-real .deck-svg .dk-ring:hover .dk-in{fill:#FF6B1A; fill-opacity:.35}
  .deck-real .deck-svg .dk-btn:hover .dk-top{fill:#FF6B1A; fill-opacity:.85; stroke:#fff; stroke-width:2}
  .deck-real .deck-svg .dk-knob:hover .dk-top{stroke:#FF6B1A; stroke-width:2.4}
  .deck-real .deck-svg .dk-ko:hover .dk-top{stroke:#fff}
  .deck-real .deck-svg .dk-fad:hover .dk-fh{stroke:#FF6B1A}
}

/* „Plany na przyszłość” to teraz sekcja z kierunkami (dawniej „Muzyka, technologia i sztuka w praktyce.”) */
.kotwica{display:block; height:0; scroll-margin-top:96px}
@media (min-width:900px){ .o-bloki > .o-blok:last-child:nth-child(odd){grid-column:1 / -1; max-width:62ch} }

/* przełącznik dźwięku na kontrolerze (wzór: przełącznik on/off od Olivii, w kolorach fundacji) */
.deck-box{position:relative; min-width:0}
.dk-pasek{display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; padding-left:max(16px,6%); min-height:42px}
.dk-pasek:has(.dk-sw[hidden]){display:none}
.dk-sw{position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; padding:6px 8px 6px 0; border:0; background:none; font:inherit; font-weight:600; font-size:clamp(15px,1.15vw,17px); color:var(--t-ink,#16141A); cursor:pointer; -webkit-tap-highlight-color:transparent}
.dk-sw-tor{position:relative; flex:none; width:52px; height:30px; border-radius:999px; background:#D9D6DE; transition:background-color var(--t-reveal,.42s) var(--ease-out,ease)}
.dk-sw-tor::before{content:""; position:absolute; left:50%; top:50%; width:84px; height:56px; margin:-28px 0 0 -42px; border-radius:50%; background:#1F4D43; opacity:0; transform:scale(.55); transition:opacity var(--t-reveal,.42s) var(--ease-out,ease), transform var(--t-reveal,.42s) var(--ease-out,ease); z-index:-1}
.dk-sw-kulka{position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform var(--t-reveal,.42s) var(--ease-out,ease)}
.dk-sw[aria-checked="true"] .dk-sw-tor{background:#1F4D43}
.dk-sw[aria-checked="true"] .dk-sw-tor::before{opacity:.16; transform:scale(1)}
.dk-sw[aria-checked="true"] .dk-sw-kulka{transform:translateX(22px)}
.dk-sw .dk-sw-on, .dk-sw[aria-checked="true"] .dk-sw-off{display:none}
.dk-sw[aria-checked="true"] .dk-sw-on{display:inline; color:#1F4D43}
.dk-sw.laduje .dk-sw-kulka{animation:dkLad .8s ease-in-out infinite alternate}
@keyframes dkLad{to{opacity:.45}}
.dk-sw:focus-visible{outline:3px solid #FF6B1A; outline-offset:4px; border-radius:999px}
.dk-sw:hover .dk-sw-tor{background:#CAC6D0}
.dk-sw[aria-checked="true"]:hover .dk-sw-tor{background:#1F4D43}
.dk-stan{margin:0; flex:1 1 220px; min-width:0; font-size:clamp(14px,1vw,15px); line-height:1.4; color:#5D5866}
.dk-stan:empty{display:none}
@media (prefers-reduced-motion: reduce){ .dk-sw-tor,.dk-sw-tor::before,.dk-sw-kulka{transition:none} .dk-sw.laduje .dk-sw-kulka{animation:none} }
body.fund .plany-uwaga{font-size:clamp(17px,1.4vw,20px); max-width:60ch; margin-top:-8px}

/* odtwarzacz Spotify pod kontrolerem */
.spot{min-width:0}

.spot-zgoda{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding-left:max(16px,6%)}
.spot-t{margin:0; flex:1 1 280px; font-size:clamp(15px,1.1vw,17px); line-height:1.45; color:#5D5866; max-width:52ch}
.spot-lista{display:grid; gap:12px}
@media (min-width:700px){ .spot-lista{grid-template-columns:1fr 1fr} }
.spot-lista iframe{display:block; width:100%; height:152px; border:0; border-radius:12px; background:#16141A}
.spot[hidden], .spot [hidden], .dk-sw[hidden]{display:none}
.spot-u{display:grid; gap:8px; min-width:0}
.spot-u .textlink{font-size:15px; justify-self:start}

/* nazwa fundacji animowana przy otwarciu (wzór: Swishy „Make with Notion”) */
.znak-anim{display:flex; align-items:center; gap:.38em; margin:0 0 6px; padding-left:max(16px,6%); font-family:var(--display); font-weight:700; font-size:clamp(20px,2.3vw,34px); line-height:1.1; letter-spacing:-.02em; color:var(--t-ink,#16141A); white-space:nowrap}
.za-k{display:inline-flex; gap:.1em; flex:none; position:relative; z-index:1}
.za-k i{display:block; width:.4em; height:.4em}
.za-k i:nth-child(1){background:#3D2A86} .za-k i:nth-child(2){background:#1F4D43} .za-k i:nth-child(3){background:#FF6B1A}
/* filmik przy formularzu (Swishy „Copy and paste”) */
.kon-media{display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0}
.kartki{display:block; width:min(100%,345px); height:auto; background:transparent; mix-blend-mode:lighten}
/* na komputerze: scena na wysokości tekstu, filmik dolną krawędzią równo z dołem formularza */
@media (min-width:1000px){ body.fund .cta .kon-media{grid-column:2; grid-row:2 / span 2; align-self:stretch; justify-content:space-between} body.fund .cta .kartki{width:260px} body.fund .cta .kform{align-self:end} }
body.fund .cta .kon-media .scena{grid-column:auto; grid-row:auto; justify-self:stretch}

/* Plany na przyszłość: laptop obok tekstu (animacja ze Swishy odtworzona kodem).
   Na komputerze laptop ma górę równo z nagłówkiem i dół równo z ostatnią linijką tekstu. */
.plany-top{display:grid; gap:40px 56px}
.plany-txt{display:grid; gap:clamp(28px,4vw,64px); min-width:0; align-content:start}
.kurs-txt{display:grid; gap:clamp(28px,4vw,64px); min-width:0; align-content:start}
/* w Projektach tekst obok laptopa jest krótszy, więc laptop jest węższy: góra i dół dalej równo z tekstem, klawiatura nie jest spłaszczona */
@media (min-width:900px){ .plany-top.kurs-top{grid-template-columns:minmax(0,1fr) clamp(240px,calc(20vw + 60px),300px)} }
.laptop{width:min(100%,420px); display:flex; flex-direction:column; container-type:inline-size}
/* MacBook Pro w srebrnym kolorze: cienkie ramki, wcięcie z kamerą, czarna klawiatura z głośnikami po bokach, duży gładzik. Bez logo Apple. */
.lp-lid{position:relative; z-index:1; flex:none; width:92%; margin:0 auto; aspect-ratio:1.42; background:#C9CACD; padding:.41cqi; border-radius:3.1cqi 3.1cqi 1.1cqi 1.1cqi; transform-origin:50% 100%}
.lp-lid::after{content:""; position:absolute; left:10%; right:10%; bottom:-1.3cqi; height:1.3cqi; background:#3A3B3F; border-radius:0 0 .9cqi .9cqi}
.lp-bez{position:relative; height:100%; box-sizing:border-box; background:#0A0A0B; border-radius:2.8cqi 2.8cqi .8cqi .8cqi; padding:1.85cqi 1.85cqi 2.95cqi}
.lp-notch{position:absolute; z-index:2; top:0; left:50%; width:10.6cqi; height:4.7cqi; margin-left:-5.3cqi; background:#0A0A0B; border-radius:0 0 1.3cqi 1.3cqi}
.lp-notch::after{content:""; position:absolute; left:50%; top:1.4cqi; width:1cqi; height:1cqi; margin-left:-.5cqi; border-radius:50%; background:#1E2230}
.lp-scr{position:relative; height:100%; box-sizing:border-box; container-type:inline-size; background:#1F4D43; border-radius:1.5cqi 1.5cqi 0 0; display:flex; align-items:center; justify-content:center; padding:4.1cqi 7% 0; overflow:hidden}
.lp-menu{position:absolute; top:0; left:0; right:0; height:3.3cqi; padding:0 2.6cqi; display:flex; align-items:center; justify-content:space-between; background:#163A32; color:#fff; font-size:2cqi; line-height:1}
.lp-menu b{font-weight:700}
.lp-term{width:100%; background:#16141A; border-radius:6px; overflow:hidden}
.lp-bar{display:flex; gap:5px; padding:7px 9px; background:#2A2730}
.lp-bar i{display:block; width:8px; height:8px}
.lp-bar i:nth-child(1){background:#3D2A86} .lp-bar i:nth-child(2){background:#1F4D43} .lp-bar i:nth-child(3){background:#FF6B1A}
.lp-term pre{margin:0; padding:5cqi 5cqi 6cqi; white-space:pre; color:#fff; font-size:12px; font-size:clamp(8px,4.3cqi,15px); line-height:1.6}
.lp-term b{font-weight:700; color:#fff}
.lp-term em{font-style:normal; color:#FF6B1A}
/* jasne okno „Terminal” jak w „terminal showcase” ze Swishy (Projekty, Kurs DJ) */
.lp-jasny{width:88%; height:91%; display:flex; flex-direction:column; background:#ECECEE; border-radius:1.8cqi}
.lp-jasny .lp-bar{position:relative; flex:none; align-items:center; gap:1.3cqi; height:6cqi; padding:0 2.4cqi; background:#DCDCE0}
.lp-jasny .lp-bar i{width:1.9cqi; height:1.9cqi}
.lp-jasny .lp-bar span{position:absolute; left:0; right:0; text-align:center; color:#55555C; font-size:2.4cqi; font-weight:600; pointer-events:none}
.lp-txt{flex:1 1 auto; min-height:0; padding:2.4cqi 3.6cqi; overflow:hidden; color:#2A2A30; font-family:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace; font-size:clamp(5.5px,3cqi,13px); line-height:1.38; white-space:pre}
.lp-cmd{font-size:1.1em; margin-bottom:.25em}
.lp-jasny em{font-style:normal; color:#1F4D43; font-weight:700}
.lp-art{font-size:.52em; line-height:1.02; color:#2A2A30; margin-bottom:1em}
.lp-sp{color:#9A9AA2; line-height:.8}
.lp-hi{color:#1F4D43; font-weight:700}
.lp-pr{margin-top:.3em}
.laptop.lp-anim .lp-out{opacity:0}
.laptop.lp-anim .lp-out.on{opacity:1; transition:opacity .45s ease}
.lp-ch{visibility:hidden}
.lp-ch.on{visibility:visible}
.lp-kur{display:inline-block; position:relative; width:0; height:1em; vertical-align:baseline}
.lp-kur::after{content:""; position:absolute; left:1px; top:-.05em; width:2px; height:1.15em; background:#FF6B1A}
.lp-jasny .lp-kur::after{width:.55em; background:#2A2A30}
.laptop.lp-gotowe .lp-kur::after{animation:lp-mig 1.05s steps(1) infinite}
@keyframes lp-mig{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .laptop.lp-gotowe .lp-kur::after{animation:none} }
.lp-base{flex:none; aspect-ratio:2.75; display:flex; flex-direction:column}
@media (min-width:900px){
  .plany-top{grid-template-columns:minmax(0,1fr) clamp(260px,26vw,380px)}
  .laptop{width:100%; align-self:stretch}
  .lp-base{aspect-ratio:auto; flex:1 1 auto; min-height:0}
}
.lp-deck{flex:1 1 auto; min-height:0; background:#E3E4E6; clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); display:grid; grid-template-columns:minmax(0,1fr) 81% minmax(0,1fr); grid-template-rows:8% 47% 6% minmax(0,1fr) 6%}
.lp-spk{grid-row:2; width:42%; background-color:#E3E4E6; background-image:radial-gradient(circle,#8E9095 0 42%,transparent 47%); background-size:4px 4px; background-position:center}
.lp-spk:first-child{grid-column:1; justify-self:end; margin-right:16%}
.lp-spk:nth-child(3){grid-column:3; justify-self:start; margin-left:16%}
.lp-kb{grid-row:2; grid-column:2; display:flex; flex-direction:column; gap:3.5%; padding:1.3% 1.4%; background:#0E0E10; border-radius:4px}
.lp-r{display:flex; flex:1 1 0; gap:.7%; min-height:0}
.lp-r i{display:block; flex:1 1 0; background:#26262A; border-radius:2px}
.lp-r i.w125{flex-grow:1.25} .lp-r i.w16{flex-grow:1.6} .lp-r i.w175{flex-grow:1.75} .lp-r i.w185{flex-grow:1.85}
.lp-r i.w225{flex-grow:2.25} .lp-r i.w235{flex-grow:2.35} .lp-r i.w51{flex-grow:5.1}
.lp-fn i:last-child{background:#1A1A1D}
.lp-ar{flex:3 1 0; display:flex; gap:2.4%; align-items:flex-end}
.lp-ar > i{height:48%}
.lp-ar > span{flex:1 1 0; align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end; gap:6%}
.lp-ar > span i{flex:none; height:47%}
.lp-ar i{flex:1 1 0; display:block; background:#26262A; border-radius:2px}
.lp-tp{grid-row:4; grid-column:2; justify-self:center; width:59%; background:#D6D7DA; border-radius:5% / 9%}
.lp-front{flex:none; position:relative; aspect-ratio:36; background:#C3C4C8; border-radius:0 0 999px 999px / 0 0 60% 60%}
.lp-front::before{content:""; position:absolute; left:50%; top:0; width:13%; height:42%; margin-left:-6.5%; background:#B1B2B6; border-radius:0 0 999px 999px}

/* Przycisk „Wyślij wiadomość” z machającą dłonią (animacja ze Swishy „animated emoji button”, odtworzona kodem):
   dłoń macha raz, gdy przycisk pojawi się na ekranie, i znowu po najechaniu albo przejściu klawiszem Tab */
.btn-hej .machaj{display:inline-block; font-size:1.2em; line-height:1; transform-origin:70% 80%}
.btn-hej.macha .machaj, .btn-hej:hover .machaj, .btn-hej:focus-visible .machaj{animation:pomachaj 1.3s cubic-bezier(.36,.07,.19,.97) 1}
.btn-hej:active{transform:scale(.97)}
@keyframes pomachaj{0%{transform:rotate(0)} 12%{transform:rotate(18deg)} 24%{transform:rotate(-8deg)} 36%{transform:rotate(16deg)} 48%{transform:rotate(-6deg)} 60%{transform:rotate(12deg)} 74%,100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){ .btn-hej .machaj{animation:none !important} .btn-hej:active{transform:none} }

/* ---------- Sprzedaż atrakcji: otwarcie jak „simulation terminated” (Swishy) i rozwijane listy ---------- */
.sa-intro{position:relative; overflow:hidden; min-height:min(78svh,760px); display:grid; place-items:center; padding:clamp(72px,9vw,140px) var(--gutter); background:var(--t-ink); color:#fff; text-align:center}
.sa-bin{position:absolute; inset:0; pointer-events:none; display:grid; grid-template-columns:repeat(8,1fr); align-content:space-between; padding:clamp(28px,5vw,64px) var(--gutter); font:600 12px/1 var(--text); font-variant-numeric:tabular-nums; letter-spacing:.08em; color:rgba(255,255,255,.14)}
.sa-bin span{justify-self:center}
.sa-core{position:relative; display:grid; justify-items:center; gap:clamp(18px,2.2vw,28px); max-width:100%}
body.fund .sa-status{display:inline-flex; align-items:center; gap:10px; margin:0; font-size:clamp(15px,1.2vw,17px); font-weight:600; color:rgba(255,255,255,.78)}
.sa-status i{width:9px; height:9px; border-radius:50%; background:var(--t-orange); box-shadow:0 0 0 4px rgba(255,107,26,.18)}
body.fund .sa-title{margin:0; display:flex; align-items:center; justify-content:center; gap:.28em; font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,44px); line-height:1; letter-spacing:-.03em; color:#fff; transition:text-shadow .9s ease}
.sa-br{color:var(--t-orange); font-weight:600; flex:none}
.sa-in{display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:.08em .32em; min-width:0}
.sa-title .dots{display:inline-flex; gap:.08em; flex:none}
.sa-title .dots i{display:block; width:.3em; height:.3em}
.sa-title .dots i:nth-child(1){background:#3D2A86} .sa-title .dots i:nth-child(2){background:#1F4D43} .sa-title .dots i:nth-child(3){background:#FF6B1A}
.sa-typ{white-space:pre-wrap}
.sa-kur{display:none; width:.5em; height:.09em; margin-left:-.2em; align-self:flex-end; margin-bottom:.12em; background:var(--t-orange)}
.sa-line{display:block; width:min(340px,60%); height:2px; background:rgba(255,255,255,.22); transform-origin:50% 50%}
body.fund .sa-h1{margin:clamp(6px,1vw,14px) 0 0; font-family:var(--display); font-weight:800; font-size:clamp(40px,6.2vw,100px); line-height:.97; letter-spacing:-.04em; color:#fff; text-wrap:balance}
body.fund .sa-sub{margin:0; max-width:52ch; font-size:clamp(17px,1.4vw,21px); line-height:1.55; color:rgba(255,255,255,.86)}
.sa-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:clamp(4px,1vw,12px) 0 0}
.sa-intro.sa-gotowe .sa-title{text-shadow:0 0 24px rgba(255,255,255,.28), 0 0 60px rgba(255,107,26,.28)}
/* przebieg animacji (klasy dokłada sprzedaz.js; bez skryptu wszystko widać od razu) */
.sa-intro.sa-start .sa-status, .sa-intro.sa-start .sa-bin, .sa-intro.sa-start .sa-title .dots i{opacity:0}
.sa-intro.sa-start .sa-line{transform:scaleX(0)}
.sa-intro.sa-start .sa-kur{display:block; animation:sa-miga .9s steps(1) infinite}
.sa-intro .sa-status, .sa-intro .sa-sub, .sa-intro .sa-bin{transition:opacity .6s ease}
.sa-intro .sa-title .dots i{transition:opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1.4)}
.sa-intro.sa-start .sa-title .dots i{transform:scale(.2)}
.sa-intro .sa-line{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sa-intro.p1 .sa-status, .sa-intro.p1 .sa-bin{opacity:1}
.sa-intro.p2 .sa-title .dots i{opacity:1; transform:none}
.sa-intro.p3 .sa-line{transform:none}
@keyframes sa-miga{50%{opacity:0}}
@media (max-width:560px){ body.fund .sa-title{font-size:clamp(22px,6.4vw,30px)} .sa-bin{grid-template-columns:repeat(4,1fr)} .sa-bin span:nth-child(n+9){display:none} }
@media (prefers-reduced-motion:reduce){ .sa-intro *{transition:none!important; animation:none!important} }

body.fund .sa-lista{min-height:0; align-items:flex-start}
.sa-acc{display:grid; gap:10px; --acc-pad:clamp(16px,1.8vw,26px)}
body.fund .sa-it{background:#fff; padding:0 var(--acc-pad); scroll-margin-top:96px}
body.fund .sa-it > h3{margin:0; font-size:clamp(24px,2.6vw,38px)}
.sa-it .acc-b > span{display:grid; gap:4px}
.sa-it .acc-b small{font-family:var(--text); font-size:clamp(15px,1.1vw,17px); font-weight:500; letter-spacing:0; color:#55515C}
body.fund .sa-it .acc-in{padding-left:0; margin-top:0; gap:clamp(20px,2vw,28px); padding-bottom:clamp(24px,3vw,40px)}
body.fund .sa-it h4{font-family:var(--display); font-weight:800; font-size:clamp(20px,1.7vw,24px); letter-spacing:-.015em; margin:0}
.sa-rodzaj{display:grid; gap:14px}
body.fund .sa-rodzaj .tile h5{font-size:17px; line-height:1.25; font-weight:650; margin:13px 0 0}
body.fund .sa-rodzaj .tile h5 a{text-decoration:none}
body.fund .sa-rodzaj .tile .by{font-size:14.5px; margin-top:4px}
.sa-kroki{display:grid; gap:12px; padding-left:1.4em}
.sa-kroki li::marker{color:var(--t-green); font-weight:800}
.sa-partnerzy{display:grid; gap:clamp(28px,3vw,40px)}
@media (min-width:900px){ .sa-partnerzy{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sa-partner{display:grid; gap:10px; align-content:start; background:var(--t-tint); padding:clamp(18px,2vw,26px)}
.sa-partner h4{display:flex; align-items:center; gap:10px}
.sa-partner h4 .sw{width:14px; height:14px; flex:none}
body.fund .sa-partner .sa-podpis{font-weight:600; color:#55515C}
.sa-partner ul{padding-left:1.2em; display:grid; gap:6px}
body.fund .sa-partner .btn{min-height:50px; padding:0 20px; font-size:16px}
.sa-zasady{display:grid; gap:clamp(22px,2.4vw,36px) clamp(32px,5vw,72px)}
@media (min-width:900px){ .sa-zasady{grid-template-columns:1fr 1fr} }
.sa-zasady > div{display:grid; gap:8px; align-content:start}
.sa-faq{display:grid; gap:8px; margin:0}
body.fund .sa-faq dt{font-family:var(--display); font-weight:700; font-size:clamp(18px,1.5vw,21px); margin-top:14px}
body.fund .sa-faq dt:first-child{margin-top:0}
body.fund .sa-faq dd{margin:0; font-size:clamp(17px,1.3vw,19px); line-height:1.6; max-width:70ch}
.sa-dok{list-style:none; padding:0; display:grid; gap:10px}
@media (min-width:900px){ .sa-dok{grid-template-columns:repeat(2,minmax(0,1fr))} }
body.fund .sa-dok a{display:grid; gap:4px; padding:18px 20px; background:var(--t-tint); text-decoration:none; height:100%; box-sizing:border-box}
body.fund .sa-dok a:hover{background:var(--t-ink); color:#fff}
body.fund .sa-dok b{font-family:var(--display); font-size:clamp(18px,1.5vw,21px)}
body.fund .sa-dok span{font-size:16px; line-height:1.5}

/* ---------- Nie tylko słuchają. Tworzą.: biurko z grą (wzór „mario game”, własna postać w kolorach marki) ---------- */
.biurko{width:100%}
.biurko > svg{display:block; width:100%; height:auto; overflow:visible}
.bk-blat{fill:#24212A} .bk-krawedz{fill:#34303C}
.bk-noga{fill:#2B2832} .bk-stopa{fill:#34303C}
.bk-ramka{fill:#34303C}
.bk-niebo{fill:#1F4D43}
.bk-chmura{fill:#2F6A5C}
.bk-ziemia .a{fill:#3D2A86} .bk-ziemia .b{fill:#4A3699}
.bk-klocek rect{fill:#FF6B1A} .bk-klocek text{fill:#16141A; font:800 28px/1 var(--display)}
.bk-pauza rect{fill:rgba(22,20,26,.55)} .bk-pauza text{fill:#fff; font:800 34px/1 var(--display); letter-spacing:.06em}
.bk-tel rect{fill:#0E0D11} .bk-tel .bk-tel-e{fill:#1F4D43}
.bk-wynik{fill:#FF6B1A; font:800 30px/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:.04em}
.bk-kubek rect{fill:#F4F1EA} .bk-kubek path{fill:none; stroke:#F4F1EA; stroke-width:6} .bk-kubek .bk-kawa{fill:#4A2E26}
.bk-nuta{fill:#FF6B1A; font:800 34px/1 var(--display)}
.bk-plus{fill:#FF6B1A; font:800 24px/1 var(--display)}

/* Sprzedaż atrakcji: karty atrakcji z filtrami i wyszukiwaniem (komentarz Olivii 19.10.2026) */
.sa-filtry{display:grid; gap:14px}
.sa-szukaj{display:flex; align-items:center; gap:10px; max-width:520px; min-height:52px; padding:0 16px; background:var(--t-tint)}
.sa-szukaj .ico{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2}
.sa-szukaj input{all:unset; flex:1; min-width:0; font:500 17px/1.3 var(--text); color:var(--t-ink)}
.sa-szukaj input::placeholder{color:#6B6772}
.sa-szukaj:focus-within{outline:3px solid var(--t-orange); outline-offset:2px}
.sa-chipy{display:flex; flex-wrap:wrap; gap:8px}
.sa-chip{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; background:var(--t-tint); font:600 15.5px/1 var(--text); color:var(--t-ink)}
.sa-chip span{font-weight:500; color:#6B6772; font-variant-numeric:tabular-nums}
.sa-chip[aria-pressed="true"]{background:var(--t-ink); color:#fff}
.sa-chip[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.sa-chip:focus-visible{outline:3px solid var(--t-orange); outline-offset:2px}
@media (hover:hover){ .sa-chip:hover{background:#DDE1DF} .sa-chip[aria-pressed="true"]:hover{background:var(--t-green)} }
body.fund .sa-ile{margin:0; font-size:15.5px; color:#55515C}
.sa-karty{display:grid; gap:clamp(14px,1.6vw,22px); grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){ .sa-karty{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){ .sa-karty{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1240px){ .sa-karty{grid-template-columns:repeat(4,minmax(0,1fr))} }
.sa-karta{display:flex; flex-direction:column; background:var(--t-tint)}
.sa-karta[hidden]{display:none}
.sa-obr{aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden}
.sa-obr.jagoda{background:#3D2A86; color:#fff} .sa-obr.schron{background:#1F4D43; color:#fff} .sa-obr.krystian{background:#FF6B1A; color:#16141A}
.sa-obr .pikto{width:34%; height:auto; transition:transform .6s var(--ease)}
.sa-karta:hover .sa-obr .pikto{transform:scale(1.06) rotate(-3deg)}
.sa-kt{flex:1; display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px}
body.fund .sa-kat{margin:0; font-size:14.5px; font-weight:600; color:#55515C}
body.fund .sa-karta h4{font-size:clamp(19px,1.5vw,21px); line-height:1.2}
body.fund .sa-opis{margin:0; font-size:16px; line-height:1.5; flex:1}
body.fund .ch .sa-zobacz{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:6px; padding:0 16px; background:var(--t-ink); color:#fff; font-weight:700; font-size:15.5px; text-decoration:none}
.sa-zobacz .ico{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2}
body.fund .ch .sa-zobacz:hover{background:var(--t-green)}
body.fund .sa-pusto{margin:0}

/* Jak działa współpraca: pięć kroków jako schemat; na telefonie pionowa oś */
.sa-proces{list-style:none; margin:0; padding:0; counter-reset:krok; display:grid; gap:0}
.sa-proces li{counter-increment:krok; position:relative; display:grid; gap:6px; align-content:start; padding:0 0 26px 62px}
.sa-proces li::before{content:counter(krok); position:absolute; left:0; top:0; width:44px; height:44px; display:grid; place-items:center; background:var(--t-ink); color:#fff; font:800 19px/1 var(--display); z-index:1}
.sa-proces li::after{content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:#C9CDCB}
.sa-proces li:last-child::after{display:none}
body.fund .sa-proces b{font-family:var(--display); font-weight:800; font-size:clamp(18px,1.5vw,21px); line-height:1.2; padding-top:9px}
body.fund .sa-proces span{font-size:16px; line-height:1.5}
body.fund .ch .sa-proces li.sa-marza{background:var(--t-orange); color:var(--t-ink); margin:0 0 26px -10px; padding:16px 16px 18px 72px}
.sa-proces li.sa-marza::before{left:10px; top:16px; background:var(--t-ink)}
.sa-proces li.sa-marza::after{top:60px; bottom:-26px; left:31px}
@media (min-width:900px){
  .sa-proces{grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 18px}
  .sa-proces li{padding:64px 0 0}
  .sa-proces li::after{left:44px; right:-18px; top:21px; bottom:auto; width:auto; height:2px}
  .sa-proces li.sa-marza::before{left:16px; top:0}
  .sa-proces li.sa-marza::after{left:60px; top:21px; bottom:auto; right:-18px}
  body.fund .ch .sa-proces li.sa-marza{margin:-16px 0 0; padding:80px 16px 18px}
  .sa-proces li.sa-marza::before{top:16px}
  .sa-proces li.sa-marza::after{top:37px}
}

/* Program 10 spotkań jako tabela (komentarz Olivii 19.10.2026): Nr, temat, co dziecko umie na koniec; na telefonie każde spotkanie jako blok */
body.fund .proj-umie{max-width:60ch}
body.fund .proj-umie h3, body.fund .prog h3{font-size:clamp(23px,2vw,30px); margin-bottom:16px}
body.fund .prog{margin-top:clamp(48px,5vw,72px)}
body.fund .prog-tab{width:100%; border-collapse:collapse; font-size:clamp(16px,1.2vw,18px); line-height:1.45; font-variant-numeric:tabular-nums}
body.fund .prog-tab th{text-align:left; font-weight:700; font-size:15px; padding:0 16px 12px 0; vertical-align:bottom}
body.fund .prog-tab td{padding:16px 16px 16px 0; vertical-align:top; border-top:1px solid rgba(22,20,26,.16)}
body.fund .prog-tab tbody tr:last-child td{border-bottom:1px solid rgba(22,20,26,.16)}
body.fund .prog-tab .prog-nr{width:3.2em; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; color:var(--t-green)}
body.fund .prog-tab td.prog-nr{font-size:clamp(20px,1.6vw,26px); line-height:1.1}
body.fund .prog-tab th.prog-nr{color:var(--t-ink)}
body.fund .prog-temat{width:52%}
body.fund .prog-temat b{font-weight:700}
body.fund .prog-lab{display:none}
@media (max-width:719px){
  body.fund .prog-tab thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  body.fund .prog-tab, body.fund .prog-tab tbody{display:block}
  body.fund .prog-tab tr{display:grid; grid-template-columns:2.4em minmax(0,1fr); column-gap:8px; padding:14px 0; border-top:1px solid rgba(22,20,26,.16)}
  body.fund .prog-tab tbody tr:last-child{border-bottom:1px solid rgba(22,20,26,.16)}
  body.fund .prog-tab td, body.fund .prog-tab tbody tr:last-child td{border:0; padding:0; width:auto}
  body.fund .prog-tab td.prog-nr{grid-row:span 2}
  body.fund .prog-umie{margin-top:6px}
  body.fund .prog-lab{display:inline; font-weight:700}
}

/* Standardy ochrony małoletnich: pełny tekst (19.10.2026), karta interwencji jako tabela, wersja dla dzieci na zielonym polu */
body.fund .standardy .par-list{margin-bottom:14px}
body.fund .std-tab-wrap{overflow-x:auto; margin:6px 0 10px}
body.fund .std-tab{width:100%; border-collapse:collapse; font-size:16px; line-height:1.45}
body.fund .std-tab th{text-align:left; font-size:15px; font-weight:700; padding:0 16px 10px 0}
body.fund .std-tab td{padding:14px 16px 14px 0; border-top:1px solid rgba(22,20,26,.16); vertical-align:top}
body.fund .std-tab td:first-child{width:46%}
body.fund .std-tab td:last-child{border-bottom:0}
body.fund .std-tab tbody tr:last-child td{border-bottom:1px solid rgba(22,20,26,.16)}
body.fund .std-dzieci{margin-top:clamp(48px,6vw,80px); background:var(--t-green); color:#fff; padding:clamp(24px,4vw,44px)}
body.fund .std-dzieci h2{color:#fff; margin-top:0; font-size:clamp(24px,2.4vw,32px)}
body.fund .std-dzieci ol{padding-left:1.4em; display:grid; gap:10px; margin:0}
body.fund .std-dzieci li{color:#fff; font-size:clamp(18px,1.5vw,21px); line-height:1.5}
body.fund .std-dzieci li::marker{color:var(--t-orange); font-weight:700}
body.fund .standardy > p + p{margin-top:14px}
body.fund .std-dzieci h2{line-height:1.15; margin-bottom:18px}
body.fund .std-pdf{margin-top:20px}
body.fund .std-pdf .btn, body.fund .statut .statut-pdf .btn{color:#fff}
body.fund .std-podstawa{margin-top:40px; font-size:15px}
body.fund .regulamin-zajec .par-list{margin-bottom:14px}

/* Karty atrakcji: animowane obrazki 8-bit (jak gra na biurku); klatki przełącza CSS, przy ograniczonym ruchu stoi pierwsza */
.sa-obr .pix{width:100%; height:100%; display:block}
.pix g{opacity:0}
.pix g:first-child{opacity:1}
.pix-2{--n:2} .pix-3{--n:3} .pix-4{--n:4}
@keyframes pix2{0%{opacity:1} 50%,100%{opacity:0}}
@keyframes pix3{0%{opacity:1} 33.333%,100%{opacity:0}}
@keyframes pix4{0%{opacity:1} 25%,100%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .pix g{animation:pix2 var(--t) steps(1,end) infinite; animation-delay:calc(var(--t) * (var(--k) - var(--n)) / var(--n))}
  .pix-3 g{animation-name:pix3}
  .pix-4 g{animation-name:pix4}
}

/* PLAY/PAUSE: gdy deck gra, pierścień świeci na zielono i pulsuje w rytm utworu (--bit = długość bitu, ustawia dzwiek.js) */
.deck-real .deck-svg .dk-ring.gra .dk-rg, .deck-real .deck-svg .dk-ring.dk-rw.gra .dk-rg{stroke:#39E58C; filter:url(#dk-gs)}
.deck-real .deck-svg .dk-ring.gra .dk-in, .deck-real .deck-svg .dk-ring.dk-rw.gra .dk-in{fill:#39E58C; fill-opacity:.3}
@media (prefers-reduced-motion:no-preference){
  .deck-real .deck-svg .dk-ring.gra .dk-rg{animation:dkPuls var(--bit,.48s) ease-out infinite}
}
@keyframes dkPuls{0%{stroke-opacity:1; stroke-width:6} 70%,100%{stroke-opacity:.45; stroke-width:4}}

/* panel pod kontrolerem: utwory, własne pliki, nagrywanie */
.dk-panel{display:grid; gap:18px 32px; padding:8px 0 0 max(16px,6%); min-width:0; transition:opacity var(--t-micro,.18s)}
@media (min-width:720px){ .dk-panel{grid-template-columns:1fr 1fr} .dk-rec{grid-column:1 / -1} }
.dk-panel.dk-off{opacity:.45; pointer-events:none}
.dk-dek{min-width:0; display:grid; gap:10px; align-content:start}
.dk-dek-h{margin:0; font-size:clamp(15px,1.1vw,17px); line-height:1.35}
@media (min-width:720px){ .dk-dek-h{min-height:2.7em} }
.dk-wg{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px}
.dk-wg-t{font-size:14px; line-height:1.35; color:#5D5866}
.dk-dek-n{font-weight:700}
.dk-bpm{color:#5D5866; font-variant-numeric:tabular-nums; white-space:nowrap}
.dk-utw{display:flex; flex-wrap:wrap; gap:6px}
.dk-utw button, .dk-plik{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:0; border-radius:0; background:rgba(22,20,26,.08); color:var(--t-ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:background-color var(--t-micro,.18s), color var(--t-micro,.18s); -webkit-tap-highlight-color:transparent}
.dk-utw button:hover, .dk-plik:hover{background:rgba(22,20,26,.15)}
.dk-utw button[aria-pressed="true"]{background:var(--t-ink); color:#fff}
.dk-utw button:active, .dk-plik:active{transform:translateY(1px)}
.dk-utw button:focus-visible, .dk-plik:focus-within, .dk-rec-b:focus-visible{outline:3px solid #FF6B1A; outline-offset:2px}
.dk-plik{background:none; box-shadow:inset 0 0 0 2px rgba(22,20,26,.22)}
.dk-plik:hover{background:none; box-shadow:inset 0 0 0 2px var(--t-ink)}
.dk-rec{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px}
.dk-rec-b{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:0; border-radius:0; background:var(--t-ink); color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer}
.dk-rec-b:hover{background:#2C2933}
.dk-rec-k{width:12px; height:12px; border-radius:50%; background:#FF6B1A}
.dk-rec-b[aria-pressed="true"]{background:#FF6B1A; color:var(--t-ink)}
.dk-rec-b[aria-pressed="true"] .dk-rec-k{background:var(--t-ink)}
@media (prefers-reduced-motion:no-preference){ .dk-rec-b[aria-pressed="true"] .dk-rec-k{animation:dkRec 1s steps(1,end) infinite} }
@keyframes dkRec{50%{opacity:0}}
.dk-rec-czas{font-variant-numeric:tabular-nums; font-weight:600; font-size:16px; color:#5D5866}
.dk-rec-b[aria-pressed="false"] + .dk-rec-czas{opacity:.6}

/* otwarcie Formatów: rysowany wieczór, budynek z 16 oknami-atrakcjami, scena z kontrolerem, pasek na dole */
.fh{position:relative; overflow:hidden; background:#221D30; color:#fff; padding-top:clamp(120px,13vw,190px)}
.fh-niebo{position:absolute; left:0; top:0; width:100%; height:clamp(420px,46vw,620px); display:block}
.fh-wrap{position:relative; display:grid; gap:clamp(28px,3.4vw,48px)}
.fh-tekst{display:grid; gap:14px}
body.fund .fh h2{margin:0; color:#fff; font-size:clamp(34px,5.2vw,76px); line-height:.98; letter-spacing:-.03em; max-width:22ch; text-wrap:balance}
.fh-tekst p{margin:0; max-width:46ch; font-size:clamp(17px,1.35vw,20px); line-height:1.5; color:#E9E6EE}
.fh-plac{display:grid; gap:0; align-items:end; min-width:0}
@media (min-width:1000px){ .fh-plac{grid-template-columns:minmax(0,1fr) clamp(280px,25vw,380px); gap:clamp(24px,3vw,48px)} }
.fh-dom{position:relative; background:#2C2933; padding:clamp(14px,1.6vw,24px); padding-bottom:clamp(20px,2.2vw,32px); margin-top:clamp(48px,5vw,80px); min-width:0}
.fh-dom::before{content:""; position:absolute; left:-2%; right:-2%; bottom:100%; height:clamp(40px,4.6vw,72px); background:#3A3640; clip-path:polygon(4% 100%, 50% 0, 96% 100%)}
.fh-okna{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px) clamp(8px,1vw,14px)}
@media (min-width:700px){ .fh-okna{grid-template-columns:repeat(8,minmax(0,1fr))} }
.fh-okno{display:grid; gap:8px; align-content:start; color:#fff; text-decoration:none}
.fh-szyba{display:block; aspect-ratio:1/1; box-shadow:inset 0 0 0 4px #16141A; transition:transform var(--t-micro,.18s) var(--ease-out,ease)}
.fh-szyba .pix{width:100%; height:100%; display:block}
.fh-nazwa{font-size:clamp(12px,.95vw,14px); line-height:1.25; font-weight:600; text-align:center; color:#F1EEF4}
.fh-okno:hover .fh-szyba{transform:translateY(-4px)}
.fh-okno:hover .fh-nazwa{color:#FF6B1A}
.fh-okno:focus-visible{outline:3px solid #FF6B1A; outline-offset:4px}
.fh-scena{display:none; width:100%; height:auto; overflow:visible}
@media (min-width:1000px){ .fh-scena{display:block} }
.fh-teren{display:block; width:100%; height:clamp(70px,9vw,140px); margin-top:-2px}
.fh-nav{background:#16141A; position:relative}
.fh-nav-in{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding-block:18px}
.fh-znak{display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.01em; white-space:nowrap}
.fh-znak .dots{display:inline-flex; gap:3px} .fh-znak .dots i{display:block; width:10px; height:10px}
.fh-znak .dots i:nth-child(1){background:#3D2A86} .fh-znak .dots i:nth-child(2){background:#1F4D43} .fh-znak .dots i:nth-child(3){background:#FF6B1A}
.fh-menu{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 22px; flex:1 1 auto; justify-content:center; min-width:0}
.fh-menu a{display:inline-flex; align-items:center; min-height:44px; color:#E9E6EE; text-decoration:none; font-weight:600; font-size:16px}
.fh-menu a:hover{color:#FF6B1A}
.fh-menu a:focus-visible, .fh-znak:focus-visible{outline:3px solid #FF6B1A; outline-offset:3px}
body.fund .fh .fh-btn{background:#FF6B1A; color:#16141A; min-height:52px}
body.fund .fh .fh-btn:hover{background:#FF8640}
@media (max-width:999px){ .fh-menu{justify-content:flex-start; flex-basis:100%; order:3} .fh-btn{order:2; margin-left:auto} }
@media (max-width:520px){ .fh-btn{width:100%; justify-content:center; margin-left:0} .fh-menu{gap:0 18px} }
/* ruch: lampki girlandy i gwiazdy migają, lasery się kołyszą, talerze świecą */
@media (prefers-reduced-motion:no-preference){
  .fh-lamp{animation:fhLamp 2.4s steps(1,end) infinite; animation-delay:var(--d)}
  .fh-gw{animation:fhGw 4s ease-in-out infinite; animation-delay:var(--d)}
  .fh-laser{transform-box:view-box; transform-origin:180px 150px; animation:fhLaser 3.2s ease-in-out infinite alternate}
  .fh-laser:nth-of-type(2n){animation-duration:2.6s; animation-direction:alternate-reverse}
}
@keyframes fhLamp{50%{opacity:.45}}
@keyframes fhGw{50%{opacity:.2}}
@keyframes fhLaser{from{transform:rotate(-7deg)} to{transform:rotate(7deg)}}

/* ---------- sekcja główna: MacBook z ekranem DJ obok kontrolera (19.10.2026) ---------- */
.hero-pod{display:grid; gap:28px; min-width:0; align-content:start; align-self:start}
.dk-panel[hidden], .dk-panel [hidden]{display:none}
.hero-lap{width:min(100%,520px)}
@media (min-width:1000px){
  
  .hero-row{grid-template-areas:"lap deck" "txt pod"}
  .hero-row > .hero-txt{grid-area:txt; align-self:start; align-content:start}
  .hero-row > .hero-lap{grid-area:lap; width:100%; align-self:end}
  .hero-row > .deck-box{grid-area:deck}
  .hero-row > .hero-pod{grid-area:pod}
  /* przezroczysty pas pod narysowanym kontrolerem (10,5% wysokości obrazu) wychodzi poza ramkę, żeby dół kontrolera i laptopa był na jednej linii */
  .hero-fund .deck-box .deck-live{margin-bottom:-5.6%}
}
.lp-scr.lp-dj{display:block; padding:0; background:#0E0D11; color:#F4F4F6; font-family:var(--body,Figtree),system-ui,sans-serif}
.lp-dj .lp-menu{background:#1A1820}
body.fund .lp-dj .ek{overflow:hidden; position:absolute; inset:3.3cqi 0 0; display:grid; grid-template-rows:minmax(0,31fr) minmax(0,21fr) minmax(0,5fr) minmax(0,21fr) minmax(0,8fr); gap:1.1cqi; padding:1.4cqi 1.6cqi 1.8cqi}
/* każde płótno w ramce .ek-cv, ułożone absolutnie: rozdzielczość płótna nie wpływa na układ (w Safari płótno rosło razem z rozdzielczością i fale z napisami fraz robiły się ogromne) */
body.fund .lp-dj .ek .ek-cv{position:relative; display:block; min-width:0; min-height:0; overflow:hidden}
body.fund .lp-dj .ek canvas{position:absolute; inset:0; display:block; width:100%; height:100%}
body.fund .lp-dj .ek-top, body.fund .lp-dj .ek-mapy{display:grid; grid-template-columns:minmax(0,1fr) 8cqi minmax(0,1fr); gap:1.6cqi; min-height:0}
body.fund .lp-dj .ek-mapy .ek-cv:last-child{grid-column:3}
body.fund .lp-dj .ek-mapy canvas{cursor:pointer; touch-action:pan-y}
body.fund .lp-dj .ek-cdj{display:flex; align-items:center; gap:1.6cqi; min-width:0; min-height:0; padding:1.1cqi; background:#17151C; border-radius:.9cqi}
body.fund .lp-dj .ek-dysk{position:relative; flex:none; height:100%; aspect-ratio:1; border-radius:50%; background:#0A090C; border:.45cqi solid #2C2933; box-sizing:border-box}
body.fund .lp-dj .ek-dysk i{position:absolute; left:50%; top:7%; width:.55cqi; height:43%; margin-left:-.275cqi; background:#F4F4F6; border-radius:.3cqi; transform-origin:50% 100%}
body.fund .lp-dj .ek-dysk::after{content:""; position:absolute; left:50%; top:50%; width:20%; height:20%; transform:translate(-50%,-50%); border-radius:50%; background:#FF6B1A}
body.fund .lp-dj .ek-rpm{position:absolute; left:0; right:0; bottom:13%; text-align:center; font-size:1.5cqi; color:#8B8794; line-height:1}
body.fund .lp-dj .ek-info{min-width:0; flex:1 1 auto; display:grid; gap:.35cqi; align-content:center}
body.fund .lp-dj .ek-info p{margin:0; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
body.fund .lp-dj .ek-tyt{font-size:2.1cqi; font-weight:600}
body.fund .lp-dj .ek-tyt b{display:inline-block; min-width:2.4cqi; margin-right:.8cqi; padding:0 .4cqi; border-radius:.35cqi; background:#FF6B1A; color:#16141A; text-align:center}
body.fund .lp-dj .ek-bpm{font-family:var(--display); font-size:4.8cqi; font-weight:700; letter-spacing:-.02em}
body.fund .lp-dj .ek-bpm small{margin-left:.6cqi; font-family:var(--body,Figtree),sans-serif; font-size:1.6cqi; font-weight:600; letter-spacing:0; color:#8B8794}
body.fund .lp-dj .ek-w{display:flex; justify-content:space-between; gap:1cqi; font-size:1.9cqi}
body.fund .lp-dj .ek-sz{color:#8B8794}
body.fund .lp-dj .ek-info .ek-zn{display:flex; gap:.5cqi; font-size:1.35cqi; font-weight:700; overflow:visible}
body.fund .lp-dj .ek-zn span{padding:.25cqi .5cqi; border-radius:.35cqi; background:#26232C; color:#6F6B78}
body.fund .lp-dj .ek-zn .ek-z-vinyl.on{background:#F4F4F6; color:#0E0D11}
body.fund .lp-dj .ek-zn .ek-z-slip.on{background:#FF6B1A; color:#0E0D11}
body.fund .lp-dj .ek-zn .ek-z-loop.on{background:#39E58C; color:#0E0D11}
body.fund .lp-dj .ek-zn .ek-z-key.on{background:#4FB3FF; color:#0E0D11}
body.fund .lp-dj .ek-zn .ek-z-qt.on{background:#E8344A; color:#0E0D11}
/* licznik frazy (kolory fraz z Rekordboxa, kod Olivii 19.10.2026) */
body.fund .lp-dj .ek-info .ek-fr{display:flex; align-items:center; gap:.6cqi; font-size:1.35cqi; font-weight:800}
body.fund .lp-dj .ek-fr i{flex:none; width:1.2cqi; height:1.2cqi; border-radius:.25cqi; background:#2563EB}
body.mv-on .ek-mapy canvas, body.cm-on .ek-mapy canvas{pointer-events:none}

/* panel w zakładkach */
.dk-panel{grid-template-columns:none !important}
.dk-tabs{display:flex; flex-wrap:wrap; gap:6px}
.dk-tabs [role=tab]{min-height:44px; padding:0 14px; border:0; border-radius:0; background:rgba(22,20,26,.08); color:var(--t-ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer}
.dk-tabs [role=tab]:hover{background:rgba(22,20,26,.15)}
.dk-tabs [role=tab][aria-selected="true"]{background:var(--t-ink); color:#fff}
.dk-tabs [role=tab]:focus-visible, .dk-tp button:focus-visible, .dk-tp input:focus-visible{outline:3px solid #FF6B1A; outline-offset:2px}
.dk-tp{display:grid; gap:18px 32px; align-content:start; min-width:0}
@media (min-width:720px){ .dk-tp2{grid-template-columns:1fr 1fr} .dk-cala{grid-column:1 / -1} }
.dk-blok{display:grid; gap:10px; align-content:start; min-width:0}
.dk-seg{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.dk-seg-t{margin-right:6px; font-size:15px; font-weight:700}
.dk-seg button, .dk-tgl{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:0; border-radius:0; background:rgba(22,20,26,.08); color:var(--t-ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; justify-self:start}
.dk-seg button:hover, .dk-tgl:hover{background:rgba(22,20,26,.15)}
.dk-seg button[aria-pressed="true"], .dk-tgl[aria-pressed="true"]{background:var(--t-ink); color:#fff}
.dk-seg button:active, .dk-tgl:active{transform:translateY(1px)}
.dk-pady{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.dk-pady button{position:relative; min-height:52px; padding:6px; border:0; border-radius:0; background:#26232C; color:#fff; font:inherit; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; box-shadow:inset 0 -5px 0 var(--hc,transparent); touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.dk-pady button:hover{background:#34303B}
.dk-pady button.wcis{background:#FF6B1A; color:#16141A}
.dk-suw{display:inline-flex; align-items:center; gap:8px}
.dk-suw input{width:160px; accent-color:#FF6B1A}
.dk-uw{margin:0; font-size:15px; line-height:1.5; color:#5D5866; max-width:70ch}
.dk-tr-h{margin:0; font-size:16px; font-weight:600}
.dk-tr-l{margin-left:8px; padding:2px 8px; background:#1F4D43; color:#fff; font-size:14px}
.dk-tr{margin:0; padding-left:1.4em; display:grid; gap:8px; font-size:16px; line-height:1.45}
.dk-tr li{color:#5D5866}
.dk-tr li.teraz{color:var(--t-ink); font-weight:600}
.dk-tr li.zrobione{color:#1F4D43}
.dk-tr li.zrobione::after{content:" ✓"; font-weight:700}
.dk-tr-ok{margin:0; padding:12px 16px; background:#E3F1EC; font-weight:600}
.dk-zaj, .dk-skr{margin:0; display:grid; gap:12px}
.dk-zaj div, .dk-skr div{display:grid; gap:2px}
@media (min-width:720px){ .dk-zaj{grid-template-columns:1fr 1fr; gap:16px 32px} .dk-skr div{grid-template-columns:180px 1fr; gap:16px} }
.dk-zaj dt, .dk-skr dt{font-weight:700}
.dk-zaj dd, .dk-skr dd{margin:0; color:#5D5866; line-height:1.45}
.dk-skr kbd{display:inline-block; min-width:1.6em; padding:2px 6px; background:rgba(22,20,26,.08); font-family:inherit; font-size:14px; text-align:center}
.konfetti{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:60}