/* Smart Shape – landingi z VSL. Kolory i fonty marki (Dosis + Anek Latin, lokalnie). Ikony Lucide inline. */
@font-face{font-family:"Dosis";font-weight:200 800;font-display:swap;src:url(fonty/dosis-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Dosis";font-weight:200 800;font-display:swap;src:url(fonty/dosis-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Anek Latin";font-weight:100 800;font-display:swap;src:url(fonty/anek-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Anek Latin";font-weight:100 800;font-display:swap;src:url(fonty/anek-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{
  --nieb:#59BFEC;--jasny:#85D4F2;--akcent:#277CEA;--czarny:#111111;--grafit:#3B3D40;--szary:#666D70;--tlo:#F5F5F5;--linia:#E3EEF4;--bialy:#fff;
  --glowa:"Dosis",system-ui,sans-serif;--tresc:"Anek Latin",system-ui,sans-serif;
  --r:18px;--cien:0 18px 50px -24px rgba(17,40,80,.35);--max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--tlo);color:var(--grafit);font:400 18px/1.55 var(--tresc)}
img,video{max-width:100%;display:block}
a{color:var(--akcent)}
h1,h2,h3{font-family:var(--glowa);color:var(--czarny);line-height:1.08;margin:0;letter-spacing:-.01em}
.ik{width:20px;height:20px;flex:none}
.przeskocz{position:absolute;left:-999px;top:8px;background:var(--czarny);color:#fff;padding:8px 14px;border-radius:8px;z-index:200}
.przeskocz:focus{left:12px}
:focus-visible{outline:3px solid var(--akcent);outline-offset:3px}

/* Pasek */
.pasek{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(16px,4vw,40px);background:rgba(245,245,245,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linia)}
.logo{height:52px;width:auto}
.pasek-link{display:inline-flex;align-items:center;gap:8px;font:700 16px var(--glowa);color:var(--akcent);text-decoration:none;padding:10px 16px;border:2px solid var(--akcent);border-radius:999px;transition:background .2s,color .2s}
.pasek-link:hover{background:var(--akcent);color:#fff}

/* Przyciski */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--akcent);color:#fff;font:700 19px/1 var(--glowa);letter-spacing:.01em;text-decoration:none;border:0;border-radius:999px;padding:17px 28px;cursor:pointer;box-shadow:0 10px 24px -10px rgba(39,124,234,.7);transition:transform .2s,box-shadow .2s,background .2s}
.przycisk:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(39,124,234,.8);background:#1f6cd3}
.przycisk:active{transform:translateY(0)}
.przycisk .ik{transition:transform .2s}
.przycisk:hover .ik{transform:translateX(3px)}
.przycisk-duzy{font-size:22px;padding:20px 34px}

/* Hero */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px) clamp(40px,6vw,72px);text-align:center;display:flex;flex-direction:column;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:700 17px var(--glowa);color:var(--akcent);text-transform:uppercase;letter-spacing:.06em;border-bottom:3px solid var(--nieb);padding-bottom:6px}
.hero h1{font-size:clamp(34px,5.4vw,62px);font-weight:800;max-width:22ch;text-wrap:balance}
.h1-gora{display:block}
.h1-dol{display:block;margin-top:.22em;font-size:.72em;font-weight:700;color:var(--grafit)}
.petla{position:relative;display:inline-block;color:var(--akcent);white-space:nowrap;padding:0 .12em;margin:0 .22em}
.petla svg{position:absolute;inset:-22% -12% -18% -12%;width:124%;height:140%;overflow:visible;pointer-events:none}
.petla path{fill:none;stroke:var(--nieb);stroke-width:5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:rysuj 1.1s .5s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes rysuj{to{stroke-dashoffset:0}}
.lead{max-width:58ch;margin:20px auto 28px;font-size:clamp(17px,1.9vw,20px);color:var(--szary)}

/* Player */
.player{position:relative;margin:0 0 30px;width:100%;max-width:960px;border-radius:24px;overflow:hidden;background:#dfe9ef;box-shadow:var(--cien);border:6px solid #fff;aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:cover;background:#dfe9ef}
.dzwiek{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--czarny);border:0;border-radius:999px;padding:14px 22px;font:700 17px var(--glowa);cursor:pointer;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);animation:puls 2.2s ease-in-out infinite}
.dzwiek .ik{color:var(--akcent)}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(89,191,236,.65),0 10px 30px -8px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 14px rgba(89,191,236,0),0 10px 30px -8px rgba(0,0,0,.4)}}
.player.z-dzwiekiem .dzwiek{display:none}
.sterowanie{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:1;transition:opacity .3s}
.player.spokoj .sterowanie{opacity:0}
.os{height:6px;border-radius:6px;background:rgba(255,255,255,.35);cursor:pointer;position:relative;margin-bottom:8px}
.os:hover{height:9px}
.os-wypelnienie{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:var(--nieb)}
.ster-rzad{display:flex;align-items:center;gap:6px;color:#fff}
.ster-btn{background:none;border:0;color:#fff;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.ster-btn:hover{background:rgba(255,255,255,.16)}
.ster-btn .ik{width:22px;height:22px}
.i-graj,.i-cisza{display:none}
.player.pauza .i-pauza{display:none}.player.pauza .i-graj{display:block}
.player.wyciszony .i-glos{display:none}.player.wyciszony .i-cisza{display:block}
.czas{font:600 15px var(--tresc);margin-right:auto;font-variant-numeric:tabular-nums}
.koniec{position:absolute;inset:0;background:rgba(245,250,253,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;animation:wjazd .5s ease both}
.koniec[hidden]{display:none}
.koniec-male{margin:0;font:700 16px var(--glowa);color:var(--akcent);text-transform:uppercase;letter-spacing:.08em}
.koniec-duzy{margin:0 0 6px;font:800 clamp(26px,4vw,44px)/1.05 var(--glowa);color:var(--czarny)}
.koniec-znowu{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--szary);font:600 16px var(--tresc);cursor:pointer;margin-top:4px}
@keyframes wjazd{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Zapis */
.zapis{background:#fff;border-block:1px solid var(--linia);padding:clamp(48px,7vw,96px) clamp(16px,4vw,40px)}
.zapis-uklad{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(28px,5vw,64px);align-items:start}
.zapis h2{font-size:clamp(30px,4vw,46px);font-weight:800}
.zapis-lead{color:var(--szary);margin:14px 0 22px;max-width:52ch}
.kupon{display:flex;align-items:center;gap:16px;background:var(--tlo);border:2px dashed var(--nieb);border-radius:var(--r);padding:16px 20px;margin-bottom:22px;max-width:440px}
.kupon-ik{width:44px;height:44px;color:var(--akcent)}
.kupon p{margin:0}
.kupon-duzy{font:800 34px/1 var(--glowa);color:var(--akcent)}
.kupon-male{font-size:16px;color:var(--szary)}
.fakty{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px}
.fakty li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--grafit)}
.fakty .ik{color:var(--akcent);margin-top:3px}
.trenerka{display:flex;align-items:center;gap:16px;margin:0;max-width:440px}
.trenerka img{width:96px;height:120px;object-fit:cover;border-radius:14px;border:4px solid #fff;box-shadow:0 8px 24px -12px rgba(0,0,0,.4)}
.trenerka strong{display:block;font:700 20px var(--glowa);color:var(--czarny)}
.trenerka span{font-size:15px;color:var(--szary)}
.karta-formularza{background:var(--tlo);border:1px solid var(--linia);border-radius:24px;padding:clamp(20px,3vw,32px);box-shadow:var(--cien);position:sticky;top:96px}

/* Kreator */
.kreator{position:relative}
.postep{height:6px;background:var(--linia);border-radius:6px;overflow:hidden;margin-bottom:16px}
.postep span{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--nieb),var(--akcent));border-radius:6px;transition:width .4s ease}
.krok-nr{margin:0 0 4px;font:700 14px var(--glowa);color:var(--akcent);text-transform:uppercase;letter-spacing:.08em}
.pytanie{font-size:clamp(23px,2.6vw,28px);font-weight:700;margin-bottom:16px;outline:none}
.odpowiedzi{display:grid;gap:10px}
.odp{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:2px solid var(--linia);border-radius:14px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--grafit);transition:border-color .2s,transform .2s,box-shadow .2s;animation:wjazd .35s ease both}
.odp:nth-child(2){animation-delay:.05s}.odp:nth-child(3){animation-delay:.1s}.odp:nth-child(4){animation-delay:.15s}
.odp:hover{border-color:var(--nieb);transform:translateY(-1px);box-shadow:0 8px 20px -14px rgba(39,124,234,.6)}
.odp.wybrana{border-color:var(--akcent);background:#eef6fe}
.odp-znak{width:24px;height:24px;border-radius:50%;border:2px solid var(--jasny);flex:none;display:grid;place-items:center}
.odp.wybrana .odp-znak{background:var(--akcent);border-color:var(--akcent)}
.odp.wybrana .odp-znak::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.odp strong{display:block;font:700 18px/1.2 var(--glowa);color:var(--czarny)}
.odp small{display:block;font-size:14px;color:var(--szary);margin-top:2px}
.odp .polecana{margin-left:auto;font:700 12px var(--glowa);color:var(--akcent);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--nieb);white-space:nowrap}
form{display:grid;gap:12px}
form[hidden]{display:none}
.pole{position:relative}
.pole input{width:100%;font:500 17px var(--tresc);color:var(--czarny);background:#fff;border:2px solid var(--linia);border-radius:12px;padding:22px 14px 8px;outline:none;transition:border-color .2s}
.pole input:focus{border-color:var(--akcent)}
.pole label{position:absolute;left:16px;top:16px;font-size:16px;color:var(--szary);pointer-events:none;transition:all .18s}
.pole input:focus+label,.pole input:not(:placeholder-shown)+label{top:6px;font-size:12px;color:var(--akcent);font-weight:600}
.pole.zle input{border-color:#d64545}
.blad{margin:4px 2px 0;font-size:14px;color:#c23b3b;min-height:0}
.blad:empty{display:none}
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zgoda{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--szary);cursor:pointer}
.zgoda input{position:absolute;opacity:0;width:1px;height:1px}
.zgoda-znak{flex:none;width:22px;height:22px;border:2px solid var(--jasny);border-radius:6px;background:#fff;display:grid;place-items:center;margin-top:1px;color:#fff}
.zgoda-znak .ik{width:15px;height:15px;opacity:0;stroke-width:3}
.zgoda input:checked+.zgoda-znak{background:var(--akcent);border-color:var(--akcent)}
.zgoda input:checked+.zgoda-znak .ik{opacity:1}
.zgoda input:focus-visible+.zgoda-znak{outline:3px solid var(--akcent);outline-offset:2px}
.wyslij{width:100%;margin-top:4px}
.wstecz{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:none;border:0;color:var(--szary);font:600 15px var(--tresc);cursor:pointer;padding:6px 0}
.wstecz[hidden]{display:none}
.dzieki{text-align:center;animation:wjazd .5s ease both}
.dzieki[hidden]{display:none}
.dzieki-tytul{font:800 32px var(--glowa);color:var(--czarny);margin:0 0 14px;outline:none}
.kupon-kodem{flex-direction:column;gap:6px;margin:0 auto 14px;background:#fff}
.kupon-kod{font:800 40px/1 var(--glowa);color:var(--akcent);letter-spacing:.08em;margin:2px 0 6px!important}
.kopiuj{display:inline-flex;align-items:center;gap:8px;background:var(--tlo);border:1px solid var(--linia);border-radius:999px;padding:8px 16px;font:600 15px var(--tresc);color:var(--grafit);cursor:pointer}
.kopiuj .ik{width:16px;height:16px}
.dzieki-wybor{font-weight:600;color:var(--czarny)}
.dzieki-wybor:empty{display:none}
.dzieki p{margin:0 0 12px}
.dzieki .przycisk{margin:6px 0 12px}
.demo{font-size:13px;color:var(--szary);background:#fff7e0;border-radius:8px;padding:6px 10px;display:inline-block}

/* Opinie wideo */
.opinie{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,96px) clamp(16px,4vw,40px);text-align:center}
.opinie h2{font-size:clamp(30px,4vw,46px);font-weight:800}
.opinie-pod{color:var(--szary);margin:12px 0 32px}
.op-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,22px);text-align:left}
.op-siatka.op-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.op-karta{margin:0;background:#fff;border-radius:20px;padding:8px;box-shadow:0 12px 34px -22px rgba(17,40,80,.45);border:1px solid var(--linia);display:flex;flex-direction:column}
.op-wideo{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:9/16;background:#dfe9ef;cursor:pointer}
.op-wideo video{width:100%;height:100%;object-fit:cover}
.op-graj{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:var(--akcent);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.45);transition:transform .2s,opacity .2s}
.op-graj .ik{width:26px;height:26px;fill:currentColor;margin-left:3px}
.op-wideo:hover .op-graj{transform:translate(-50%,-50%) scale(1.08)}
.op-karta.gra .op-graj{opacity:0}
.op-pasek{position:absolute;left:10px;right:10px;bottom:10px;height:4px;border-radius:4px;background:rgba(255,255,255,.4);opacity:0;transition:opacity .2s}
.op-pasek span{display:block;height:100%;width:0;background:#fff;border-radius:4px}
.op-karta.gra .op-pasek,.op-karta.byla .op-pasek{opacity:1}
.op-karta figcaption{padding:12px 8px 6px;display:flex;flex-direction:column;flex:1}
.op-karta strong{font:700 20px var(--glowa);color:var(--czarny)}
.op-wiek{font-size:14px;color:var(--szary)}
.op-napis{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--grafit);min-height:4.4em}
.op-napis b{font-weight:500;color:var(--grafit);transition:color .15s}
.op-karta.gra .op-napis b{color:#a7afb3}
.op-karta.gra .op-napis b.przed{color:var(--grafit)}
.op-karta.gra .op-napis b.teraz{color:var(--akcent)}
.opinie-cta{margin-top:40px}

/* Stopka */
.stopka{text-align:center;padding:36px 16px 120px;color:var(--szary);font-size:15px;border-top:1px solid var(--linia)}
.stopka img{margin:0 auto 10px;opacity:.85}
.stopka p{margin:4px 0}

/* Dolny CTA (telefon) */
.dolny-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid var(--linia);display:none;transform:translateY(110%);transition:transform .3s}
.dolny-cta .przycisk{width:100%}
.dolny-cta.widoczny{transform:none}

/* Pop-up: niebieski baner, wyróżnia się na jasnej stronie */
.popup{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(10,30,60,.55);backdrop-filter:blur(4px);animation:tlo .3s ease both}
.popup[hidden]{display:none}
@keyframes tlo{from{opacity:0}to{opacity:1}}
.popup-karta{position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);animation:wskok .55s cubic-bezier(.2,1.3,.4,1) both}
@keyframes wskok{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
.popup-zamknij{position:absolute;right:12px;top:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;cursor:pointer}
.popup-zamknij:hover{background:rgba(255,255,255,.35)}
.baner{position:relative;display:flex;align-items:flex-end;gap:12px;padding:26px 22px 0 24px;background:linear-gradient(135deg,var(--akcent) 0%,#1d5fc0 55%,var(--nieb) 130%);color:#fff;overflow:hidden;min-height:200px}
.baner::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-60px;top:-90px;background:rgba(133,212,242,.28);animation:plywaj 6s ease-in-out infinite}
.baner::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-40px;bottom:-60px;background:rgba(255,255,255,.12);animation:plywaj 5s 1s ease-in-out infinite reverse}
@keyframes plywaj{50%{transform:translate(-14px,12px)}}
.baner-tekst{position:relative;z-index:1;flex:1;padding-bottom:22px}
.baner-etykieta{margin:0;font:700 14px var(--glowa);text-transform:uppercase;letter-spacing:.1em;color:var(--jasny)}
.baner-duzy{margin:4px 0 14px;font:800 clamp(28px,6vw,38px)/1.02 var(--glowa)}
.dymek{position:relative;margin:0;background:#fff;color:var(--czarny);font:600 16px/1.35 var(--tresc);padding:12px 14px;border-radius:16px 16px 4px 16px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);max-width:290px}
.dymek::after{content:"";position:absolute;right:-8px;bottom:6px;border:8px solid transparent;border-left-color:#fff;border-right:0}
.dymek.nowy{animation:dymek .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes dymek{from{transform:scale(.85);opacity:.3}to{transform:none;opacity:1}}
.asia-ramka{position:relative;z-index:1;flex:none;width:140px;align-self:flex-end;background:#fff;padding:6px 6px 0;border-radius:18px 18px 0 0;transform-origin:bottom center;animation:asia .7s .25s cubic-bezier(.2,1.3,.4,1) both}
.asia-ramka img{width:100%;height:170px;object-fit:cover;border-radius:13px 13px 0 0}
.asia-ramka.reaguje{animation:kiwa .6s ease}
@keyframes asia{from{transform:translateY(100%)}to{transform:none}}
@keyframes kiwa{30%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}
#popupSlot{padding:22px 24px 26px}
#konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:150}

/* Pokazywanie przy przewijaniu */
.js .odslon{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .odslon.widac{opacity:1;transform:none}

/* Responsywność */
@media (max-width:1000px){
  .op-siatka,.op-siatka.op-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-siatka.op-5 .op-karta:last-child{grid-column:1/-1;max-width:50%;justify-self:center;width:100%}
}
@media (max-width:860px){
  .zapis-uklad{grid-template-columns:1fr}
  .karta-formularza{position:static;order:-1}
  .zapis-oferta{order:0}
  .dolny-cta{display:block}
}
@media (max-width:560px){
  body{font-size:17px}
  .logo{height:42px}
  .pasek-link{font-size:14px;padding:8px 12px}
  .kicker{font-size:14px}
  .player{border-width:4px;border-radius:18px}
  .dzwiek{font-size:15px;padding:12px 16px;bottom:12px}
  .przycisk-duzy{font-size:19px;padding:18px 24px;width:100%}
  .baner{padding:22px 16px 0 18px;min-height:180px}
  .asia-ramka{width:108px}
  .asia-ramka img{height:136px}
  .dymek{font-size:15px}
  #popupSlot{padding:18px 18px 22px}
  .op-napis{font-size:14px}
  .op-siatka.op-5 .op-karta:last-child{max-width:none}
}