/* O platformie (07.10.2026): strona sprzedażowa z prawdziwymi zrzutami. Język stron publicznych z start.css
   (kontur 2 px, twardy cień, pigułki, żółty/mięta/róż), animacje tylko transform i opacity, bez ruchu przy prefers-reduced-motion. */
.op{--op-pas:min(1180px,100%)}
.op>section{margin:0 auto 88px;max-width:var(--op-pas)}

/* ---------- hero ---------- */
.op-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:56px;align-items:center;margin-top:12px!important}
.op-hero h1{font-size:clamp(40px,5.4vw,68px);line-height:.98;letter-spacing:-.02em;margin:0 0 18px}
.op-hero .zakr{background:linear-gradient(var(--zolty),var(--zolty)) no-repeat 0 88%/0% 42%;padding:0 .08em;border-radius:4px;animation:zakr 1s .45s cubic-bezier(.6,0,.2,1) forwards}
.op-hero .lead{font-size:19px;line-height:1.5;color:var(--tusz2);max-width:32em;margin:0 0 24px}
.op-nakl{display:inline-block;margin:0 0 18px;background:var(--mieta);border:2px solid var(--kontur);border-radius:999px;padding:5px 14px;font-weight:700;font-size:14px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--cien);animation:wskocz .5s .1s cubic-bezier(.3,1.6,.5,1) backwards}
.op-cta{display:flex;flex-wrap:wrap;gap:12px}
.op-cta .btn{min-height:50px;padding:12px 24px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.op-mini{margin:14px 0 0}
.op-liczby{margin-top:26px}
.op-liczby b{font-family:var(--nag);font-variant-numeric:tabular-nums}

/* scena: żywy fragment lekcji + telefon z przełączanymi ekranami */
.op-scena{position:relative;padding:0 13% 96px 0}
.op-okno{position:relative;background:var(--pow);border:2px solid var(--kontur);border-radius:18px;box-shadow:8px 8px 0 var(--cien);overflow:visible;animation:wskocz .6s .2s cubic-bezier(.3,1.4,.5,1) backwards}
.op-okno-g{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:2px solid var(--kontur);background:var(--pow2);border-radius:16px 16px 0 0}
.op-okno-g i{width:10px;height:10px;border-radius:50%;border:2px solid var(--kontur);background:var(--roz)}
.op-okno-g i:nth-child(2){background:var(--zolty)} .op-okno-g i:nth-child(3){background:var(--mieta)}
.op-okno-g span{margin-left:10px;font-size:12px;color:var(--tusz3)}
.op-lek{position:relative;padding:22px 24% 26px 26px}
.op-dz{display:inline-block;font:700 12px var(--nag);color:var(--k);background:color-mix(in srgb,var(--k) 14%,var(--pow));border-radius:999px;padding:3px 10px;margin-bottom:10px}
.op-lek h3{font-size:24px;line-height:1.12;margin:0 0 12px}
.op-lek p{font-size:15.5px;line-height:1.6;margin:0 0 10px;color:var(--tusz)}
.op-lek .op-sz{color:var(--tusz2)}
.op-lekn{text-decoration:underline dotted var(--sliwka) 2px;text-underline-offset:3px;border-radius:4px;animation:op-lekn 11s infinite}
.op-m{background:linear-gradient(#FCEFA8,#FCEFA8) no-repeat 0 0/0% 100%;color:inherit;padding:1px 0;animation:op-zazn 11s infinite}
.op-dymek{position:absolute;left:36%;top:96px;display:flex;align-items:center;gap:7px;background:var(--tusz);color:#fff;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;box-shadow:3px 3px 0 var(--sliwka);opacity:0;animation:op-dymek 11s infinite}
.op-dymek i{width:15px;height:15px;border-radius:50%;background:#FCEFA8;border:2px solid #fff}
.op-dymek .k2{background:#DCEFB8} .op-dymek .k3{background:#F6D5E6}
.op-nota,.op-karta{position:absolute;background:var(--pow);border:2px solid var(--kontur);border-radius:16px;box-shadow:4px 4px 0 var(--cien);padding:12px 14px;font-size:14px;line-height:1.4;z-index:2}
.op-nota{left:31%;bottom:-74px;width:240px;background:#FFF8D6;color:#18212B;opacity:0;animation:op-nota 11s infinite}
.op-karta{left:-26px;bottom:-46px;width:210px;display:grid;gap:3px;opacity:0;animation:op-karta 11s infinite}
.op-nota .et,.op-karta .et{display:block;font:700 12px var(--nag);color:var(--sliwka);letter-spacing:.02em}
.op-karta b{font:700 19px var(--nag)} .op-karta span:not(.et){font-size:13px;color:var(--tusz2)}
.op-karta .op-pr{display:inline-block;justify-self:start;border:2px solid var(--kontur);border-radius:999px;padding:1px 10px;font-weight:700;color:var(--tusz)!important;background:var(--mieta);margin-top:4px}
@keyframes op-zazn{0%,8%{background-size:0% 100%}18%,90%{background-size:100% 100%}97%,100%{background-size:0% 100%}}
@keyframes op-dymek{0%,18%{opacity:0;transform:translateY(8px) scale(.8)}22%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px) scale(.9)}}
@keyframes op-nota{0%,32%{opacity:0;transform:translateX(30px) rotate(4deg)}38%,90%{opacity:1;transform:rotate(2deg)}96%,100%{opacity:0;transform:rotate(2deg) translateY(10px)}}
@keyframes op-lekn{0%,46%{background:transparent}50%,56%{background:var(--sliwka-t)}62%,100%{background:transparent}}
@keyframes op-karta{0%,52%{opacity:0;transform:translateY(24px) scale(.9) rotate(-3deg)}58%,90%{opacity:1;transform:rotate(-2deg)}96%,100%{opacity:0;transform:translateY(12px) rotate(-2deg)}}
.op-tel-h{position:absolute;right:-8px;bottom:0;width:27%;aspect-ratio:560/1212;border-radius:28px;border:7px solid #18212B;background:#18212B;box-shadow:6px 6px 0 var(--cien);overflow:hidden;transform:rotate(4deg);animation:wskocz .6s .45s cubic-bezier(.3,1.4,.5,1) backwards}
.op-tel-h img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px;opacity:0;animation:op-ekran 12s infinite}
.op-tel-h img:nth-child(1){animation-delay:0s} .op-tel-h img:nth-child(2){animation-delay:4s} .op-tel-h img:nth-child(3){animation-delay:8s}
@keyframes op-ekran{0%{opacity:0;transform:scale(1.04)}4%,30%{opacity:1;transform:none}36%,100%{opacity:0}}
.op-pauza .op-hero *{animation-play-state:paused!important}

/* ---------- pas wyróżników ---------- */
.op-pas{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;background:var(--sliwka);color:#fff;border:2px solid var(--kontur);border-radius:28px;box-shadow:8px 8px 0 var(--cien);padding:30px 34px}
.op-pas>div{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:#F4E6EE}
.op-pas b{display:block;font:700 20px/1.15 var(--nag);color:#fff;margin-bottom:4px}
.op-pas .punktor{flex:none;margin-top:2px;filter:drop-shadow(0 0 0 #fff)}
.op-pas .punktor path:first-child{fill:#fff}

/* ---------- sekcje funkcji ---------- */
.op-sek{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:56px;align-items:center}
.op-sek.odwr .op-sek-t{order:2}
.op-et{display:inline-block;margin:0 0 14px;border:2px solid var(--kontur);border-radius:999px;padding:4px 13px;font-weight:700;font-size:14px;color:var(--tusz);background:var(--roz);transform:rotate(-2deg)}
.op-et.k1{background:var(--mieta);transform:rotate(1.5deg)} .op-et.k2{background:var(--zolty);transform:rotate(-1deg)}
.op-sek h2,.op .sek-t{font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.01em;margin:0 0 14px}
.op-lead{font-size:17px;line-height:1.6;color:var(--tusz2);margin:0 0 16px;max-width:36em}
.op .pkt{margin:0;padding:0;list-style:none}
.op .pkt li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:16px;line-height:1.45}
.op .pkt .punktor{flex:none;margin-top:1px}
.op .pkt b{display:inline}
.op-urz{margin:0}
.op-urz picture{display:block}
.op-urz:not(.bez-tel) .tel{width:24%}
.op-sek:has(.op-urz:not(.bez-tel)){margin-bottom:110px}
.op-urz .ekr{box-sizing:border-box;max-width:100%}
.op-urz.bez-tel{padding:0 0 10px}
.op-sek.odwr .op-urz .tel{left:0;right:auto;transform:translateY(var(--par,0px)) rotate(-4deg)}
.op-sek.odwr .op-urz:not(.bez-tel){padding:0 0 48px 12%}
.op-urz .ekr{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.op-sek:hover .op-urz .ekr{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--cien)}
.op-tele{display:flex;justify-content:center;gap:6%;padding:10px 0 20px}
.op-tele .tel{width:40%;max-width:270px;border-radius:30px;border:7px solid #18212B;background:#18212B;box-shadow:6px 6px 0 var(--cien);overflow:hidden;transform:rotate(-3deg) translateY(var(--par,0px))}
.op-tele .tel:nth-child(2){transform:rotate(3deg) translateY(calc(28px - var(--par,0px)))}
.op-tele img{display:block;width:100%;height:auto;border-radius:22px}

/* ---------- kierunki, ceny, koniec ---------- */
.op-dla{text-align:center}
.op-dla .op-lead{margin:0 auto 6px}
.op-kier{justify-content:center}
.op-ceny{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
.op-plany{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.op-plan{position:relative;display:grid;gap:4px;background:var(--pow);border:2px solid var(--kontur);border-radius:20px;padding:20px 20px 18px;color:var(--tusz);text-decoration:none;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s}
.op-plan:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--cien);color:var(--tusz)}
.op-plan b{font:700 22px var(--nag)}
.op-k{font:700 34px/1.05 var(--nag);color:var(--sliwka)}
.op-plan-pr{border-style:dashed;background:var(--tlo)}
.op-plan.naj{background:var(--roz);box-shadow:6px 6px 0 var(--sliwka)}
.op-naj{position:absolute;top:-14px;right:14px;background:var(--mieta);border:2px solid var(--kontur);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700;transform:rotate(2deg);color:#18212B}
.op>section:last-child{margin-bottom:0}
.op-koniec{text-align:center;background:var(--zolty);color:#18212B;border:2px solid var(--kontur);border-radius:28px;box-shadow:8px 8px 0 var(--cien);padding:52px 28px}
.op-koniec h2{font-size:clamp(32px,4.4vw,52px);line-height:1;letter-spacing:-.02em;margin:0 0 12px;color:#18212B}
.op-koniec p{font-size:18px;margin:0 auto 24px;max-width:34em;color:#18212B}
.op-koniec .op-cta{justify-content:center}
.op-koniec .btn:not(.gl){background:#fff;color:#18212B}

/* pasek z przyciskami na telefonie – pojawia się po minięciu hero, znika przy końcowym wezwaniu */
.op-pasek{display:none}

@media (max-width:920px){
  .op-hero,.op-sek,.op-ceny{grid-template-columns:minmax(0,1fr);gap:30px}
  .op-sek.odwr .op-sek-t{order:0}
  .op-pas{grid-template-columns:1fr;gap:18px;padding:26px}
  .op-scena{margin:8px 6px 0}
  .op>section,.op-sek:has(.op-urz:not(.bez-tel)){margin-bottom:64px}
}
@media (max-width:640px){
  .op-hero h1{font-size:40px}
  .op-hero .lead{font-size:17px}
  .op-cta .btn{flex:1 1 100%}
  .op-scena{padding:0;margin:4px 2px 0}
  .op-lek{padding:16px 16px 18px} .op-lek h3{font-size:20px} .op-lek p{font-size:14.5px} .op-sz{display:none}
  .op-dymek{left:22%;top:118px}
  .op-nota{left:auto;right:-4px;top:auto;bottom:-86px;width:52%;font-size:13px}
  .op-karta{display:none}
  .op-tel-h{position:relative;right:auto;left:auto;bottom:auto;display:block;width:44%;margin:-30px 0 0 12px;border-width:5px;border-radius:20px;transform:rotate(-4deg)}
  .op-tel-h img{border-radius:15px}
  .op-urz .ekr{border-radius:12px}
  .op-sek .op-urz:not(.bez-tel),.op-sek.odwr .op-urz:not(.bez-tel){padding:0 0 40px}
  /* na telefonie sekcja z telefonem pokazuje sam zrzut telefonu – zrzut komputera byłby za drobny i telefon nachodziłby na tekst */
  .op-urz:not(.bez-tel) picture{display:none}
  .op-sek .op-urz .tel,.op-sek.odwr .op-urz .tel{position:relative;left:auto;right:auto;width:64%;max-width:260px;margin:0 auto;transform:rotate(-2deg)}
  .op-tele .tel{width:46%;border-width:5px;border-radius:22px} .op-tele img{border-radius:16px}
  .op-plany{grid-template-columns:1fr}
  .op-pas b{font-size:18px}
  .op-koniec{padding:38px 20px;border-radius:22px;box-shadow:5px 5px 0 var(--cien)}
  .op-pasek{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;background:var(--pow);border-top:2px solid var(--kontur);padding:10px 14px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .op-pasek .btn{flex:1;min-height:46px;justify-content:center;display:inline-flex;align-items:center;padding:8px 12px}
  .op-pasek .btn.gl{flex:1.6}
  .op-pasek.widac{transform:none}
  body:has(.op-pasek.widac) .zgl-fab{bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  .op-m{background-size:100% 100%} .op-nota,.op-karta{opacity:1} .op-dymek{display:none}
  .op-tel-h img{opacity:0} .op-tel-h img:first-child{opacity:1}
}