/* Strona „O nas”: te same tokeny co strona główna, scena z tłumem, tablica i kartka punktów. */
.onas{--tablica:#0E5A3D;--sun2:#DFA42B;overflow:hidden}
@media (min-width:900px){.onas{--bok:max(48px,calc((100vw - 1200px) / 2))}}
.onas~.stopka{margin-top:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Hero */
.on-hero{padding:14px var(--bok) 0;display:grid;gap:18px}
.on-hero h1{font:800 min(76px,calc((100vw - 2*var(--bok)) / 8.4))/1.02 var(--h);letter-spacing:-.028em}
.on-hero h1 span{display:block;white-space:nowrap}
.on-imie{position:relative;width:max-content}
.on-hero h1{position:relative;z-index:0}
.on-lead{margin-top:12px;font-size:19px;line-height:1.42;color:var(--szary);max-width:31em}

.on-scena{position:relative;background:#FFE6A3;border-radius:28px;padding-top:22px;overflow:hidden;isolation:isolate}
.on-tlum{display:flex;justify-content:center;height:150px;padding:0 6px}
.on-tlum span{flex:0 0 auto;width:84px;margin:0 -13px;height:150px;position:relative}
.on-tlum span:nth-child(odd){margin-top:12px}
.on-tlum svg{display:block;width:100%;height:auto}
@media (max-width:520px){.on-tlum span:nth-child(n+7){display:none}.on-tlum span{width:76px;margin:0 -12px}}
@media (prefers-reduced-motion:no-preference){
  .on-tlum span{transform:translateY(140px);transition:transform .5s calc(.1s + var(--i) * .09s) cubic-bezier(.25,1.35,.5,1)}
  .on-tlum.on span{transform:none}
  .on-tlum.bez span{transition:none}
  .on-tlum.bez span{animation:on-hop .42s calc(var(--i) * .04s) 2 alternate ease-out}
  @keyframes on-hop{to{translate:0 -8px}}
    @keyframes on-pod{from{transform:scaleX(0)}}
}
.on-stol{position:relative;z-index:2;margin-top:-34px;background:var(--sun2);padding:0 18px 18px;display:flex;flex-direction:column;align-items:center}
.on-stol::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:#C98F1F}

/* Karta z fantem: odwraca się jak prawdziwa */
.on-karta{position:relative;width:min(100%,330px);height:178px;margin-top:-52px;perspective:900px;border-radius:22px;text-align:left}
.on-obr{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.25,.5,1)}
.on-karta.odkryta .on-obr{transform:rotateY(180deg)}
.on-przod,.on-tyl{position:absolute;inset:0;border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 10px 0 rgba(26,33,64,.18)}
.on-przod{background:var(--ink);color:#fff;transform:rotate(-2.5deg)}
.on-przod small,.on-tyl small{font:700 15.5px/1.2 var(--t)}
.on-przod small{color:#C5CBE0}
.on-przod b{font:800 84px/1 var(--h);color:var(--sun);margin:auto 0 0}
.on-przod i{position:absolute;right:20px;bottom:20px;font:700 16px/1.2 var(--t);font-style:normal;color:#fff;max-width:9em;text-align:right}
.on-tyl{background:#fff;transform:rotateY(180deg)}
.on-tyl small{color:var(--szary)}
.on-tyl b{font:800 25px/1.14 var(--h);letter-spacing:-.012em;margin-top:auto;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  .on-karta:not(.odkryta) .on-przod{animation:on-kiw 2.6s 1.8s ease-in-out infinite}
  @keyframes on-kiw{0%,80%,100%{transform:rotate(-2.5deg)}86%{transform:rotate(1.5deg) translateY(-4px)}93%{transform:rotate(-3.5deg)}}
}
@media (prefers-reduced-motion:reduce){.on-obr{transition:none}}
.on-karta:active .on-obr{scale:.98}
.on-karta:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.on-pod{margin-top:16px;min-height:2.6em;font:700 17px/1.3 var(--t);text-align:center;color:var(--ink)}

/* Sekcje */
.on-sek{padding:52px var(--bok) 8px}
.on-sek h2,.on-koniec h2{font:800 clamp(32px,6.4vw,50px)/1.04 var(--h);letter-spacing:-.024em;text-wrap:balance}
.on-co{margin-top:10px;font-size:19px;max-width:34em}
.on-nazwa .on-co b{background:var(--j-sun);padding:0 .15em;border-radius:4px}

/* Komiks w trzech kadrach: na telefonie przewijany w bok, jak na stronie głównej */
.on-komiks{list-style:none;padding:0 var(--bok);margin:22px calc(var(--bok) * -1) 0;display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,320px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bok);scrollbar-width:none;counter-reset:k}
.on-komiks::-webkit-scrollbar{display:none}
.on-komiks li{counter-increment:k;scroll-snap-align:start;display:flex;flex-direction:column}
.on-komiks li>b{margin-top:12px;font:800 23px/1.1 var(--h)}
.on-komiks li>b::before{content:counter(k) ". "}
.on-komiks li>span:last-child{margin-top:3px;font-size:17px;line-height:1.35;color:var(--szary)}
.on-kadr{position:relative;height:210px;border-radius:22px;overflow:hidden}
.on-kadr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;background:rgba(26,33,64,.09)}
.on-glowy{position:absolute;left:0;right:0;top:20px;display:flex;justify-content:center}
.on-glowy svg{width:84px;flex:none;margin:0 -10px}
.on-glowy svg:nth-child(2){width:96px;margin-top:-8px;z-index:1}
.on-tel,.on-fant{position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%) rotate(-3deg)}
.on-tel{width:150px;height:84px;padding:4px;border-radius:16px;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 0 rgba(26,33,64,.18)}
.on-tel::before{content:"";position:absolute;inset:4px;border-radius:12px;background:#2B3358;z-index:-1}
.on-tel small{font:700 13px/1.1 var(--t);color:#C5CBE0}
.on-tel b{font:800 28px/1.05 var(--h)}
.on-tel-k::before{background:var(--koral)}.on-tel-k small{color:var(--ink)}.on-tel-k b{color:var(--ink)}
.on-fant{width:190px;padding:12px 14px;border-radius:14px;background:#fff;font:800 18px/1.15 var(--h);box-shadow:0 6px 0 rgba(26,33,64,.15);transform:translateX(-50%) rotate(3deg)}
.on-fant small{display:block;font:700 13px/1.1 var(--t);color:var(--szary);margin-bottom:4px}
@media (prefers-reduced-motion:no-preference){
  .on-komiks li:nth-child(3) .on-fant{animation:on-fant 2.8s 1s ease-in-out infinite}
  @keyframes on-fant{0%,82%,100%{rotate:0deg}88%{rotate:-4deg}94%{rotate:2deg}}
}

/* Tablica: zły pomysł skreślony kredą, obok to, co obowiązuje */
.on-tab{list-style:none;margin-top:22px;padding:22px 20px 10px;background:var(--tablica);color:#fff;border-radius:22px;position:relative;display:grid;gap:0 32px}
.on-tab::before{content:"";position:absolute;inset:7px;border:2px solid rgba(255,255,255,.85);border-radius:15px;pointer-events:none}
.on-tab li{position:relative;padding:4px 6px 14px;display:flex;flex-direction:column}
.on-tab s{position:relative;width:max-content;max-width:100%;text-decoration:none;font:700 18px/1.25 var(--t);color:#C4DDD1}
.on-tab s::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;background:#fff;border-radius:2px;transform:rotate(-3deg) scaleX(0);transform-origin:left;transition:transform .28s calc(var(--n) * .32s) ease-out}
.on-tab b{font:800 27px/1.12 var(--h);letter-spacing:-.012em;margin-top:2px;opacity:0;transform:translateY(6px);transition:opacity .25s calc(var(--n) * .32s + .22s),transform .3s calc(var(--n) * .32s + .22s) cubic-bezier(.3,1.4,.5,1)}
.on-tab li:nth-child(1){--n:0}.on-tab li:nth-child(2){--n:1}.on-tab li:nth-child(3){--n:2}.on-tab li:nth-child(4){--n:3}.on-tab li:nth-child(5){--n:4}.on-tab li:nth-child(6){--n:5}
.on-tab.on s::after{transform:rotate(-3deg) scaleX(1)}
.on-tab.on b{opacity:1;transform:none}
.on-tab li:nth-child(5) b{color:var(--sun)}

/* Kartka z punktami */
.on-pkt{width:100%;max-width:640px;margin-top:22px;border-collapse:collapse;background:#fff;border-radius:22px;overflow:hidden;background-image:repeating-linear-gradient(transparent 0 63px,#DCE6FB 63px 64px)}
.on-pkt th,.on-pkt td{padding:0 18px;height:64px}
.on-pkt th{text-align:left;font-weight:700;font-size:18px}
.on-pkt th a{display:flex;align-items:center;min-height:48px;text-underline-offset:4px}
.on-pkt td{text-align:right;white-space:nowrap;width:1%}
.on-pkt td>*{vertical-align:middle}
.on-pkt td b{display:inline-block;min-width:1.6em;font:800 30px/1 var(--h);color:#B3321A}
.on-kreski{display:inline-block;margin-right:10px}
.on-kreski svg{display:block;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.on-kreski path{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .on-pkt:not(.on) .on-kreski path{stroke-dashoffset:1}
  .on-pkt .on-kreski path{transition:stroke-dashoffset .12s calc(var(--i) * .07s) linear}
}
@media (max-width:400px){.on-pkt th,.on-pkt td{padding:0 12px}.on-kreski{margin-right:6px}.on-pkt th{font-size:17px}}

/* Czat */
.on-pisz{padding-bottom:52px}
.on-czat{display:grid;gap:10px;margin:22px 0 20px;max-width:520px}
.on-dym{justify-self:start;background:var(--j-lila);padding:11px 16px;border-radius:18px 18px 18px 5px;font:800 21px/1.15 var(--h)}
.on-dym.on-odp{justify-self:end;background:var(--ink);color:#fff;border-radius:18px 18px 5px 18px}
@media (prefers-reduced-motion:no-preference){
  .on-czat .on-dym{opacity:0;transform:translateY(10px) scale(.92);transform-origin:left bottom;transition:opacity .2s,transform .32s cubic-bezier(.25,1.4,.5,1)}
  .on-czat .on-odp{transform-origin:right bottom}
  .on-czat.on .on-dym{opacity:1;transform:none}
  .on-czat.on .on-dym:nth-child(2){transition-delay:.35s}.on-czat.on .on-dym:nth-child(3){transition-delay:.7s}.on-czat.on .on-dym:nth-child(4){transition-delay:1.25s}
}
.on-btn{display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 26px;border-radius:16px;background:var(--sun);color:var(--ink);font:800 21px/1 var(--h);text-decoration:none;max-width:360px}
.on-btn:active{transform:scale(.97)}
.on-ciemny{background:var(--ink);color:#fff}

.on-koniec{background:var(--sun);padding:52px var(--bok) 100px}
.on-koniec p{margin-top:10px;font-size:19px}
.on-koniec .on-btn{background:var(--ink);color:#fff;margin-top:22px}

@media (min-width:760px){
  .on-tab{grid-template-columns:1fr 1fr;padding:30px 30px 14px}
  .on-komiks{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:18px;margin-inline:0;padding:0;overflow:visible}
  .on-kadr{height:240px}
  .on-glowy svg{width:100px}.on-glowy svg:nth-child(2){width:114px}
}
@media (min-width:980px){
  .on-hero{grid-template-columns:1fr 1.05fr;align-items:center;gap:40px;padding-top:40px}
  .on-hero h1{font-size:min(70px,4.9vw)}
  .on-scena{padding-top:34px}.on-tlum{height:168px}.on-tlum span{width:96px;margin:0 -15px;height:168px}.on-tlum span:nth-child(n+9){display:none}
  .on-karta{width:360px;height:196px}
  .on-tyl b{font-size:27px}
  .on-sek{padding-top:76px}
  .on-pisz{padding-bottom:76px}
  .on-koniec{padding:72px var(--bok) 120px}
}