/* English Break, landing matematyki. Kolory i fonty z DS english-break-marka, jeden akcent: róż. */
@font-face{font-family:"PT Serif";font-weight:700;font-display:swap;src:url(fonts/pt-serif-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"PT Serif";font-weight:700;font-display:swap;src:url(fonts/pt-serif-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;src:url(fonts/open-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;src:url(fonts/open-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Open Sans";font-weight:600;font-display:swap;src:url(fonts/open-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-weight:600;font-display:swap;src:url(fonts/open-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Kalam";font-weight:400;font-display:swap;src:url(fonts/kalam-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Kalam";font-weight:400;font-display:swap;src:url(fonts/kalam-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{
  --granat:#0E006B;--noc:#08003F;--roz:#FF00C3;--dlugopis:#0019FF;--szary:#4D5D6D;--linia:#E7EBEE;--papier:#F5F5F5;--bialy:#FFFFFF;
  --serif:"PT Serif",Georgia,"Times New Roman",serif;--sans:"Open Sans",Arial,Helvetica,sans-serif;--reka:"Kalam","Comic Sans MS",cursive;
  --cien:0 18px 44px -24px rgba(14,0,107,.34);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--granat);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  background-color:var(--papier);background-image:linear-gradient(var(--linia) 1px,transparent 1px);background-size:100% 34px}
[hidden]{display:none!important}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,ul,blockquote{margin:0;padding:0}
h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;line-height:1.05;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--dlugopis);outline-offset:3px}
.przeskocz{position:absolute;left:12px;top:-60px;background:var(--granat);color:#fff;padding:10px 14px;border-radius:8px;z-index:30}
.przeskocz:focus{top:12px}

/* Przyciski: pigułka, róż z granatowym tekstem, okrągła strzałka */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;border:0;border-radius:999px;background:var(--roz);color:var(--granat);
  font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s}
.przycisk:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(255,0,195,.7)}
.przycisk:active{transform:translateY(0)}
.przycisk-duzy{min-height:64px;padding:0 12px 0 32px;font-size:18px}
.strzalka{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--granat)}
.strzalka img{filter:brightness(0) invert(1)}

.pasek{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,48px);background:rgba(245,245,245,.94);border-bottom:1px solid var(--linia)}
.logo{height:42px;width:auto}
.pasek-link{font-weight:600;font-size:15px;color:var(--granat);text-underline-offset:4px;text-decoration-color:var(--roz);text-decoration-thickness:2px}

/* Sekcja 1: nagłówek nad wideo, całość mieści się na pierwszym ekranie */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - 67px);max-width:1040px;margin:0 auto;padding:18px 16px 26px;text-align:center}
h1{font-size:clamp(31px,4.3vw,54px);line-height:1.12}
.h1-gora,.h1-dol{display:block}
.h1-dol{margin-top:4px}
.h1-dol{background:linear-gradient(transparent 60%,rgba(255,0,195,.3) 60%);width:fit-content;margin-inline:auto;padding:0 8px}
.petla{position:relative;display:inline-block;white-space:nowrap}
.petla svg{position:absolute;left:-7%;top:-16%;width:114%;height:146%;overflow:visible;pointer-events:none}
.petla path{fill:none;stroke:var(--dlugopis);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:0}
.warunek{margin-top:10px;font-size:clamp(16px,1.7vw,19px);color:var(--szary)}
.player{position:relative;width:min(100%,max(calc((100svh - 368px)*1.547),420px));aspect-ratio:1114/720;margin:16px auto 18px;border-radius:14px;overflow:hidden;background:var(--noc);box-shadow:var(--cien)}
.player video{display:block;width:100%;height:100%;object-fit:cover}
.dzwiek{position:absolute;left:50%;bottom:14px;width:max-content;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--roz);color:var(--granat);font:600 15px/1.2 var(--sans);white-space:nowrap;cursor:pointer;animation:bicie 2.2s ease-in-out infinite}
@keyframes bicie{50%{box-shadow:0 0 0 10px rgba(255,0,195,.22)}}
.dzwiek:hover{filter:brightness(1.05)}

/* Intro: dwie połówki z tą samą treścią, rozjeżdżają się na boki */
#intro{position:fixed;inset:0;z-index:40;display:none;overflow:hidden;pointer-events:none}
.js #intro{display:block;animation:introStop 0s 6s forwards}
@keyframes introStop{to{visibility:hidden}}
.intro-pol{position:absolute;top:0;bottom:0;width:50.1%;overflow:hidden;background:var(--noc);transition:transform .85s cubic-bezier(.76,0,.24,1)}
.intro-pol:first-child{left:0}
.intro-pol:last-child{right:0}
.intro-pol:first-child .intro-tresc{left:0}
.intro-pol:last-child .intro-tresc{right:0}
.intro-tresc{position:absolute;top:0;width:100vw;height:100%}
#intro.otwarta .intro-pol:first-child{transform:translateX(-101%)}
#intro.otwarta .intro-pol:last-child{transform:translateX(101%)}
#intro.natychmiast .intro-pol{transition-duration:.25s}
.wzor{position:absolute;color:#CFC9FF;font:400 clamp(16px,2.1vw,28px)/1 var(--reka),"Times New Roman",serif;white-space:nowrap;opacity:0;animation:wzorWejscie .5s both}
@keyframes wzorWejscie{from{opacity:0;transform:translateY(8px) rotate(var(--o,0deg)) scale(.92)}to{opacity:.62;transform:rotate(var(--o,0deg))}}
.licznik{position:absolute;left:0;right:0;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;color:#fff;font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums}
.licznik-liczby{position:relative;font-size:clamp(84px,17vw,210px);line-height:1;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.plus .licznik-liczby{transform:translateX(-.62em)}
.licznik-plus{position:absolute;left:100%;margin-left:.2em;color:var(--roz);opacity:0;transform:scale(.3);transition:opacity .2s,transform .4s cubic-bezier(.3,1.7,.5,1)}
.licznik-opis{margin-top:10px;font-size:clamp(20px,3vw,36px);opacity:0;transform:translateY(10px);transition:opacity .25s .08s,transform .25s .08s}
.plus .licznik-plus{opacity:1;transform:none}
.plus .licznik-opis{opacity:1;transform:none}
/* Wejście hero po rozsunięciu */
.js .hero>*{opacity:0;translate:0 22px}
.js .hero>.player{translate:none;scale:.93}
.js.hero-wejscie .hero>*{opacity:1;translate:0 0;scale:1;transition:opacity .55s,translate .6s cubic-bezier(.2,.8,.2,1),scale .75s cubic-bezier(.2,.8,.2,1)}
.js.hero-wejscie .hero>.warunek{transition-delay:.08s}
.js.hero-wejscie .hero>.player{transition-delay:.12s}
.js.hero-wejscie .hero>.przycisk{transition-delay:.24s}

/* Sekcja 2 */
.zapis{background:var(--noc);color:#fff;padding:clamp(56px,8vw,96px) 16px}
.zapis-uklad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);max-width:1080px;margin:0 auto;align-items:start}
.zapis h2{font-size:clamp(34px,5vw,54px)}
.zapis-lead{margin-top:16px;opacity:.86}
.kupon{position:relative;margin-top:28px;padding:22px 26px;border-radius:12px;background:var(--bialy);color:var(--granat);
  -webkit-mask:radial-gradient(circle 11px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.kupon-duzy{font:700 clamp(28px,4vw,38px)/1.1 var(--serif);letter-spacing:-.01em}
.kupon-male{margin-top:6px;font-size:15px;color:var(--szary)}
.kupon-kod{margin-top:12px;padding-top:12px;border-top:2px dashed var(--linia);font:400 18px/1.3 var(--reka);color:var(--dlugopis)}
.fakty{list-style:none;margin-top:24px;display:grid;gap:10px}
.fakty li{display:flex;gap:12px;align-items:flex-start}
.fakty img{flex:none;margin-top:4px;filter:brightness(0) invert(1)}
.nauczyciel{display:flex;align-items:center;gap:16px;margin-top:28px}
.nauczyciel img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none}
.nauczyciel strong{display:block;font:700 20px/1.2 var(--serif)}
.nauczyciel span{font-size:15px;opacity:.82}

.karta-formularza{position:sticky;top:92px;padding:clamp(22px,3vw,34px);border-radius:14px;background:var(--bialy);color:var(--granat);box-shadow:0 26px 60px -30px rgba(0,0,0,.7)}
.postep{height:6px;border-radius:6px;background:var(--linia);overflow:hidden}
.postep span{display:block;height:100%;width:14%;background:var(--roz);border-radius:6px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.krok-nr{margin-top:14px;font-size:14px;color:var(--szary)}
.pytanie{margin:4px 0 16px;font:700 clamp(23px,2.6vw,28px)/1.2 var(--serif);outline:none}
.odpowiedzi{display:grid;gap:10px}
.odpowiedzi button{min-height:56px;padding:12px 18px;border:2px solid var(--linia);border-radius:12px;background:var(--bialy);color:var(--granat);font:600 16px/1.3 var(--sans);text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.odpowiedzi button:hover{border-color:var(--granat);transform:translateX(3px)}
.odpowiedzi button.wybrana{border-color:var(--roz);background:#FFE9F9}
.odpowiedzi button.wybrana{animation:wybor .3s cubic-bezier(.3,1.7,.5,1);background:#FFE9F9 url(ikony/check.svg) right 16px center/20px no-repeat}
@keyframes wybor{50%{transform:scale(1.04)}}
.przejscie .pytanie,.przejscie .odpowiedzi button,.przejscie form>*{animation:zBoku .36s cubic-bezier(.2,.8,.2,1) both}
.przejscie .odpowiedzi button:nth-child(2),.przejscie form>:nth-child(2){animation-delay:.05s}
.przejscie .odpowiedzi button:nth-child(3),.przejscie form>:nth-child(3){animation-delay:.1s}
.przejscie form>:nth-child(4){animation-delay:.15s}
.przejscie form>:nth-child(n+5){animation-delay:.2s}
@keyframes zBoku{from{opacity:0;transform:translateX(calc(var(--kier,1)*26px))}}
@keyframes wjazd{from{opacity:0;transform:translateY(8px)}}
.pole:focus-within{transform:scale(1.012)}
.pole{transition:transform .16s}
.kreator.gotowe .kupon-kodem{animation:kuponWejscie .6s cubic-bezier(.3,1.6,.5,1) both}
.kreator.gotowe .dzieki-tytul{animation:banerPop .5s cubic-bezier(.3,1.7,.5,1) both}
@keyframes kuponWejscie{from{opacity:0;transform:scale(.7) rotate(-5deg)}}

.pole{position:relative;margin-bottom:12px}
.pole input{width:100%;height:58px;padding:22px 42px 6px 14px;border:2px solid var(--linia);border-radius:12px;background:var(--bialy);color:var(--granat);font:400 17px/1.2 var(--sans);transition:border-color .15s,box-shadow .15s}
.pole input:focus{outline:none;border-color:var(--granat);box-shadow:0 0 0 4px rgba(14,0,107,.08)}
.pole label{position:absolute;left:16px;top:18px;color:var(--szary);font-size:16px;pointer-events:none;transition:transform .15s,font-size .15s}
.pole input:focus+label,.pole input:not(:placeholder-shown)+label{transform:translateY(-11px);font-size:12px}
.ok{position:absolute;right:14px;top:18px;width:22px;height:22px;border-radius:50%;background:var(--roz) url(ikony/check.svg) center/14px no-repeat;transform:scale(0);transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.pole.dobrze .ok{transform:scale(1)}
.pole.dobrze input{border-color:var(--roz)}
.pole.zle input{border-color:#C4002F;animation:drgniecie .28s}
@keyframes drgniecie{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.blad,.blad-wysylki{color:#C4002F;font-size:13px;line-height:1.3}
.blad:empty,.blad-wysylki:empty{display:none}
.pole .blad{margin-top:4px}
.pulapka{position:absolute;left:-9999px}
.zgoda{position:relative;display:flex;gap:10px;margin:14px 0 6px;font-size:13px;line-height:1.45;color:var(--szary);cursor:pointer}
.zgoda input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.zgoda-znak{flex:none;width:22px;height:22px;border:2px solid var(--szary);border-radius:6px;background:var(--bialy) center/14px no-repeat;transition:background-color .15s,border-color .15s}
.zgoda input:checked+.zgoda-znak{border-color:var(--roz);background-color:var(--roz);background-image:url(ikony/check.svg)}
.zgoda input:focus-visible+.zgoda-znak{outline:2px solid var(--dlugopis);outline-offset:2px}
.zgoda a{color:var(--granat)}
.wyslij{width:100%;margin-top:12px}
.wyslij.gotowy{animation:gotowy 1.1s ease-out 1}
@keyframes gotowy{40%{box-shadow:0 0 0 8px rgba(255,0,195,.22)}}
.wstecz{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 2px;border:0;background:none;color:var(--szary);font:600 14px/1 var(--sans);cursor:pointer}
.dzieki{margin-top:16px}
.dzieki-tytul{font:700 30px/1.15 var(--serif);outline:none}
.dzieki>p:not(.dzieki-tytul){margin-top:14px;font-size:16px}
.kupon-kodem{margin-top:16px;padding:18px 22px;background:#FFE9F9;text-align:center}
.kupon-kodem .kupon-male{margin:0}
.kupon-kodem .kupon-duzy{font-size:clamp(25px,3.4vw,32px);letter-spacing:.02em;overflow-wrap:anywhere}
.kopiuj{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 12px;border:0;background:none;color:var(--granat);font:600 14px/1 var(--sans);cursor:pointer}
.demo{color:var(--szary);font-size:13px}

/* Sekcja 3 */
.opinie{max-width:1120px;margin:0 auto;padding:clamp(56px,8vw,96px) 16px;text-align:center}
.opinie h2{font-size:clamp(34px,5vw,54px)}
.opinie-pod{margin-top:8px;color:var(--szary)}
.opinie-karty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;text-align:left}
.opinie-pod{display:inline-flex;align-items:center;gap:8px}
.opinie-pod svg{width:20px;height:20px}
.opinia{position:relative;padding:20px;border:1px solid #E3E6EA;border-radius:12px;background:var(--bialy);color:#202124;font-family:Arial,Helvetica,sans-serif;box-shadow:0 1px 3px rgba(60,64,67,.16);display:flex;flex-direction:column;gap:10px}
.g-glowa{display:flex;align-items:center;gap:12px;padding-right:28px}
.g-awatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:#fff;font-size:18px;font-weight:600}
.g-nazwa{display:block;font-size:15px;font-weight:600;line-height:1.25}
.g-zrodlo{display:block;font-size:13px;color:#5F6368}
.g-logo{position:absolute;right:16px;top:18px;width:20px;height:20px}
.gwiazdki{display:inline-flex;gap:1px}
.gwiazdki svg{width:18px;height:18px;fill:#FBBC04}
.opinia blockquote{font-size:15px;line-height:1.5}
.opinie-cta{margin-top:44px}

.stopka{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;padding:24px 16px 96px;font-size:14px;color:var(--szary);background:var(--papier);border-top:1px solid var(--linia)}

.dolny-cta{display:none}
@media (max-width:760px){
  .dolny-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:12;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(245,245,245,.96);border-top:1px solid var(--linia);transform:translateY(110%);transition:transform .25s}
  .dolny-cta.pokaz{transform:none}
  .dolny-cta .przycisk{width:100%}
  .pasek-link{display:none}
  .pasek{position:static;justify-content:center}
  .zapis-uklad,.opinie-karty{grid-template-columns:minmax(0,1fr)}
  .karta-formularza{position:static}
  .przycisk-duzy{width:100%;font-size:17px;padding-left:22px}
  /* Formularz wyżej niż lista faktów: na telefonie liczy się zapis */
  .zapis-oferta{display:contents}
  .zapis h2{order:1}.zapis-lead{order:2;margin-top:0}.zapis-oferta>.kupon{order:3;margin-top:0}.karta-formularza{order:4}.fakty{order:5;margin-top:0}.nauczyciel{order:6;margin-top:0}
  .hero{min-height:calc(100svh - 67px);padding-top:14px}
  h1{font-size:clamp(23px,7.2vw,31px)}
  .warunek{font-size:15px;text-wrap:balance}
  .dzwiek{min-height:44px;font-size:14px;padding:0 16px;bottom:10px}
}

/* Pop-up */
.popup{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(8,0,63,.62);opacity:0;transition:opacity .25s;overflow-y:auto}
.popup[hidden]{display:none}
.popup.pokaz{opacity:1}
.popup-karta{position:relative;width:min(100%,480px);border-radius:16px;background:var(--bialy);overflow:hidden;transform:translateY(46px) scale(.82) rotate(-2deg);transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.popup.pokaz .popup-karta{transform:none}
.popup-zamknij{position:absolute;right:8px;top:8px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.7);cursor:pointer}
.popup-zamknij:hover{background:#fff}
.baner{position:relative;padding:24px 56px 22px 26px;background:var(--roz);color:var(--granat);overflow:hidden}
.baner-duzy{position:relative;font:700 clamp(30px,7vw,40px)/1.05 var(--serif);letter-spacing:-.01em}
.baner-male{position:relative;margin-top:6px;font-weight:600;font-size:15px}
.popup.pokaz .baner-duzy{animation:banerPop .6s .22s cubic-bezier(.3,1.7,.5,1) both}
.popup.pokaz .baner-male{animation:wjazd .4s .5s both}
@keyframes banerPop{from{opacity:0;transform:scale(.6)}}
.baner-symbole i{position:absolute;font:700 30px/1 var(--serif);color:rgba(14,0,107,.16);animation:plyw 5s ease-in-out infinite}
.baner-symbole i:nth-child(1){left:64%;top:10%}
.baner-symbole i:nth-child(2){left:84%;top:52%;animation-delay:-1s}
.baner-symbole i:nth-child(3){left:74%;top:60%;animation-delay:-2s}
.baner-symbole i:nth-child(4){left:90%;top:80%;animation-delay:-3s}
.baner-symbole i:nth-child(5){left:56%;top:64%;animation-delay:-1.5s}
.baner-symbole i:nth-child(6){left:50%;top:6%;animation-delay:-4s}
@keyframes plyw{50%{transform:translateY(-9px) rotate(12deg)}}
#popupSlot{padding:18px clamp(18px,4vw,28px) 22px}
#konfetti{position:fixed;inset:0;z-index:35;display:none;pointer-events:none}

/* Wejścia */
.js .odslon{opacity:0;translate:0 16px;transition:opacity .5s,translate .5s}
.js .odslon.widac{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .odslon{opacity:1;translate:none;transition:none}
  .wyslij.gotowy,.pole.zle input,.dzwiek,.baner-symbole i,.przejscie *,.kreator.gotowe *,.popup.pokaz *{animation:none!important}
  .js .hero>*{opacity:1;translate:none;scale:1}
  .js #intro{display:none}
}