/* FZ Group – baza wspólna dla obu motywów. Kolory, czcionki i kształty ustawia motyw-a.css / motyw-b.css. */
:root{
  --bok:max(20px,env(safe-area-inset-left));--bok-p:max(20px,env(safe-area-inset-right));
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--pop:cubic-bezier(.3,1.6,.5,1);
  --promo-h:46px;
}
*,*::before,*::after{box-sizing:border-box;touch-action:manipulation}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--tlo-strony);color:var(--tekst);font:500 17px/1.6 var(--tresc);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
img{max-width:100%;display:block;-webkit-user-drag:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--nagl);font-weight:var(--nagl-waga);letter-spacing:var(--nagl-odstep);line-height:1.04;text-wrap:balance}
[id]{scroll-margin-top:110px}
.pomin{position:absolute;left:-9999px}.pomin:focus{left:16px;top:16px;z-index:2000;background:#fff;color:#000;padding:10px 16px;border-radius:10px}
.wiersz{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--bok);padding-right:var(--bok-p)}
.waska{max-width:860px}
.srodek{text-align:center}
.dwie{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,6vw,96px);align-items:center}
.dwie.odwr>:first-child{order:2}
.dwie>*{min-width:0}
.sek{position:relative;padding:clamp(84px,10vw,150px) 0;overflow:hidden;background:var(--s-tlo);color:var(--s-tekst)}
.h1{font-size:clamp(2.9rem,5.8vw,5.4rem)}
.h2{font-size:clamp(2.3rem,4.8vw,4.3rem)}
.lead{font-size:clamp(1.06rem,1.4vw,1.24rem);line-height:1.55;margin:24px 0 0;max-width:34em;opacity:.9}
.srodek .lead{margin-left:auto;margin-right:auto}
.etyk{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.kropka{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.kropka.ziel{background:#22C55E;box-shadow:0 0 0 5px rgba(34,197,94,.2)}
.kropka.zolta{background:#FFC93C;box-shadow:0 0 0 5px rgba(255,201,60,.25)}

/* ---------- przyciski ---------- */
.guzik{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 30px;border-radius:var(--guzik-r);font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;will-change:transform}
.guzik:hover{transform:translateY(-2px)}
.guzik:active{transform:scale(.97)}
.guzik-glowny{background:var(--guzik-tlo);color:var(--guzik-tekst);box-shadow:var(--guzik-cien);border:var(--guzik-obrys)}
.guzik-obrys{border:2px solid currentColor;color:inherit;opacity:.92}
.guzik-jasny{background:#fff;color:#14112A}
.guzik-maly{height:46px;padding:0 22px;font-size:15px}
.guzik-duzy{height:72px;padding:0 40px;font-size:clamp(18px,2vw,24px);margin-top:36px}
.przyciski{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- nagłówek ---------- */
.naglowek{position:fixed;inset:0 0 auto;z-index:1000;pointer-events:none}
.naglowek>*{pointer-events:auto}
.promo{height:var(--promo-h);background:var(--promo-tlo);color:var(--promo-tekst);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:transform .5s var(--ease),opacity .4s;padding:0 var(--bok)}
.promo-w{display:flex;align-items:center;gap:12px;white-space:nowrap;overflow:hidden}
.promo-znak{background:var(--promo-znak);color:#14112A;font-weight:900;font-size:11px;padding:4px 8px;border-radius:8px;transform:rotate(-3deg)}
.promo a{font-weight:800;text-underline-offset:3px}
.pigulka-nav{position:relative;width:min(100% - 48px,1300px);margin:14px auto 0;display:flex;align-items:center;gap:24px;padding:10px 12px 10px 26px;background:var(--nav-tlo);border:var(--nav-obrys);border-radius:var(--nav-r);box-shadow:var(--nav-cien);transition:transform .58s cubic-bezier(.22,.61,.36,1)}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo .logo{height:var(--logo-h);width:auto;transition:height .4s var(--ease)}
.nav-linki{display:flex;align-items:center;gap:30px;margin:0 auto;font-weight:700;font-size:15.5px;color:var(--nav-link)}
.nav-linki>a,.nav-btn{text-decoration:none;transition:color .2s;background:none;border:0;padding:8px 0;display:inline-flex;align-items:center;gap:6px;color:inherit;font-weight:700}
.nav-linki>a:hover,.nav-btn:hover{color:var(--nav-link-hover)}
.nav-btn svg{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s}
.nav-rozwin{position:relative}
.nav-rozwin::before{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:22px}
.mega{position:absolute;top:calc(100% + 20px);left:50%;width:560px;margin-left:-280px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px;background:var(--mega-tlo);border:var(--nav-obrys);border-radius:var(--karta-r);box-shadow:0 34px 70px -24px rgba(19,9,63,.35),0 0 0 1px rgba(19,9,63,.05);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .22s var(--ease),visibility 0s .22s}
.nav-rozwin.otwarte .mega{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .22s var(--ease),visibility 0s}
.nav-rozwin.otwarte .nav-btn svg{transform:rotate(180deg)}
.mega-poz{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:calc(var(--karta-r) - 10px);text-decoration:none;color:var(--tekst-ciemny);transition:background .2s}
.mega-poz:hover{background:var(--mega-hover)}
.mega-poz b{display:block;font-size:15px}
.mega-poz small{display:block;font-size:13px;line-height:1.35;color:#5D5878;font-weight:600;margin-top:2px}
.mega-ik{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;flex:none;font-weight:900;font-size:13px;background:#EEE9FF;color:#14112A}
.ik-mieta{background:var(--k-mieta)}.ik-koral{background:var(--k-koral)}.ik-kobalt{background:var(--k-kobalt);color:#fff}.ik-zolta{background:var(--k-zolta)}
.nav-prawo{display:flex;align-items:center;gap:10px;flex:none}
.jezyk{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid var(--nav-link-slaby);font-weight:900;font-size:13px;text-decoration:none;color:var(--tekst-ciemny)}
.hamburger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--hamb-tlo);position:relative;transition:transform .15s,background .2s}
.hamburger:active{transform:scale(.94)}
.hamburger span{position:absolute;left:14px;width:18px;height:2.5px;border-radius:2px;background:#fff;transition:transform .2s var(--ease),top .2s}
.hamburger span:first-child{top:18px}.hamburger span:last-child{top:25px}
.menu-otwarte .hamburger{background:var(--akcent)}
.menu-otwarte .hamburger span:first-child{top:21.5px;transform:rotate(45deg)}
.menu-otwarte .hamburger span:last-child{top:21.5px;transform:rotate(-45deg)}
.szuflada{position:fixed;inset:0;z-index:-1;height:100dvh;background:var(--szuflada-tlo);padding:calc(var(--promo-h) + 100px) var(--bok-p) max(24px,env(safe-area-inset-bottom)) var(--bok);display:flex;flex-direction:column;gap:16px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .16s,transform .18s var(--ease),visibility 0s .18s;overflow-y:auto}
.menu-otwarte .szuflada{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .18s var(--ease),visibility 0s}
.szuflada-lista{background:#fff;border-radius:22px;overflow:hidden}
.szuflada-lista a{display:flex;align-items:center;gap:14px;height:62px;padding:0 16px;text-decoration:none;font-weight:800;color:#14112A;border-top:1px solid #EEEAF6}
.szuflada-lista a:first-child{border-top:0}
.szuflada-lista .mega-ik{width:36px;height:36px;border-radius:11px}
.szuflada-dol{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:auto}
.szuflada-dol .guzik{height:54px}
.przewiniete .promo{transform:translateY(-100%);opacity:0}
.przewiniete .pigulka-nav{transform:translateY(calc(-1 * var(--promo-h)))}
.przewiniete .nav-logo .logo{height:calc(var(--logo-h) - 4px)}
.schowany .pigulka-nav{transform:translateY(calc(-100% - 60px - var(--promo-h)))}
.menu-otwarte .pigulka-nav{transform:translateY(calc(-1 * var(--promo-h)))!important}
body.blokada{overflow:hidden}

/* ---------- hero ---------- */
.sek-hero{padding-top:calc(var(--promo-h) + 150px);min-height:min(100svh,980px)}
.znaczek{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--znaczek-tlo);font-size:14px;font-weight:800;margin-bottom:24px}
.linia{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.linia-w{display:block}
.h1 em{font-style:normal;color:var(--akcent-tekst)}
.podkr{position:relative;display:inline-block;white-space:nowrap;color:var(--podkr-kolor)}
.fala{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.3em;overflow:visible}
.fala path{fill:none;stroke:var(--fala-kolor);stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.zaufanie{display:flex;align-items:center;gap:12px;margin:26px 0 0;font-size:15px;font-weight:700;opacity:.85}

/* ---------- scena / makiety ---------- */
.scena{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}
.plyta{position:absolute;width:74%;height:80%;border-radius:var(--plyta-r);background:var(--plyta-tlo);transform:rotate(-6deg)}
.waz{position:absolute;right:-2%;top:2%;width:80px;height:92%;overflow:visible}
.waz path{fill:none;stroke:var(--waz-kolor);stroke-width:6;stroke-linecap:round;opacity:.9}
.telefon{position:relative;width:min(288px,70vw);aspect-ratio:9/19;border-radius:46px;background:#0D0A1E;padding:10px;box-shadow:0 70px 130px -45px rgba(10,5,40,.75),inset 0 0 0 2px rgba(255,255,255,.08);transform:rotate(2.5deg)}
.telefon::before{content:"";position:absolute;top:20px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:#0D0A1E;z-index:3}
.telefon.maly{width:min(250px,62vw);transform:rotate(-4deg)}
.ekran{position:relative;height:100%;border-radius:37px;overflow:hidden}
.film{background:linear-gradient(160deg,#FF8FD8 0%,#8B5CFF 52%,#2B1A7A 100%)}
.film.f2{background:linear-gradient(170deg,#FFD66B 0%,#FF7A59 45%,#7A1F5C 100%)}
.film-tlo{position:absolute;inset:0}
.kula{position:absolute;border-radius:50%}
.k1{width:180px;height:180px;left:-40px;top:70px;background:radial-gradient(circle at 35% 35%,#FFE8A3,#FFC93C 60%,rgba(255,201,60,0) 72%);animation:plyn 7s ease-in-out infinite}
.k2{width:120px;height:120px;right:-30px;top:240px;background:radial-gradient(circle at 40% 40%,#B9FFE9,#3FDDB0 60%,rgba(63,221,176,0) 72%);animation:plyn 9s ease-in-out infinite reverse}
.k3{width:220px;height:220px;left:10%;top:18%;background:radial-gradient(circle,#FFF2C2 0%,rgba(255,242,194,0) 70%);animation:plyn 8s ease-in-out infinite}
.produkt{position:absolute;left:50%;top:44%;width:46%;aspect-ratio:1;margin-left:-23%;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.6));box-shadow:0 30px 50px -18px rgba(0,0,0,.45);transform:rotate(-8deg);animation:kolys 6s ease-in-out infinite}
.produkt::after{content:"";position:absolute;inset:22%;border-radius:50%;background:conic-gradient(from 90deg,#5420FF,#FF6A4D,#FFC93C,#3FDDB0,#5420FF);animation:obrot 9s linear infinite}
.produkt.p2{top:36%;width:52%;margin-left:-26%;border-radius:50%}
.film-boki{position:absolute;right:12px;bottom:110px;display:flex;flex-direction:column;gap:16px}
.film-boki span{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.24)}
.film-boki .serce{background:#FF3D71;animation:bicie 1.6s ease-in-out infinite}
.film-dol{position:absolute;left:16px;right:64px;bottom:26px;color:#fff;font-size:13px;line-height:1.35;display:flex;flex-direction:column;gap:4px}
.hook{position:absolute;left:10%;right:10%;top:15%;text-align:center;color:#fff;font-family:var(--nagl);font-weight:var(--nagl-waga);font-size:22px;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.postep{position:absolute;left:16px;right:16px;bottom:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden}
.postep span{display:block;height:100%;background:#fff;transform-origin:left;animation:pasekpost 6s linear infinite}
.naklejka{position:absolute;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--naklejka-r);background:#fff;color:#14112A;box-shadow:var(--naklejka-cien);border:var(--karta-obrys);font-size:14px;line-height:1.25;z-index:4}
.naklejka b{display:block;font-size:15px}
.naklejka small{color:#5D5878;font-size:13px;font-weight:600}
.n1{left:-2%;top:12%;rotate:-5deg}
.n2{right:-4%;top:46%;rotate:4deg}
.n3{left:2%;bottom:8%;rotate:-3deg}
.n4{right:-2%;bottom:6%;rotate:4deg}
.iko{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-weight:900;font-size:12px;flex:none}
.iko-ai{background:var(--akcent);color:#fff}

/* flow (automatyzacje) */
.scena-flow{aspect-ratio:520/440;min-height:0;width:100%;max-width:560px;margin:0 auto}
.flow-linie,.flow-puls{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-linie path{fill:none;stroke:var(--flow-linia);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12}
.flow-puls path{fill:none;stroke:var(--flow-puls);stroke-width:5;stroke-linecap:round;stroke-dasharray:40 1400;animation:puls 3.2s linear infinite}
.wezel{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 12px;background:#fff;color:#14112A;border-radius:var(--naklejka-r);box-shadow:var(--naklejka-cien);border:var(--karta-obrys);font-weight:800;font-size:15px;white-space:nowrap;transform:translate(-50%,-50%)}
.wezel-ik{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--wezel-ik);font-size:17px}
.w1{left:22%;top:11%}.w2{left:79%;top:28%}.w3{left:27%;top:49%}.w4{left:77%;top:68%}.w5{left:38%;top:88%}

/* reklamy */
.scena-reklamy{min-height:560px}
.krazek{position:absolute;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;color:#14112A;font-weight:900;font-size:13px;box-shadow:var(--naklejka-cien);border:var(--karta-obrys);animation:unos 6s ease-in-out infinite;z-index:3}
.kr1{left:4%;top:14%}.kr2{right:4%;top:30%;animation-delay:-2s}.kr3{left:8%;bottom:20%;animation-delay:-4s}
.wykres{position:absolute;right:-2%;bottom:6%;width:210px;padding:16px 16px 14px;background:#fff;color:#14112A;border-radius:var(--naklejka-r);box-shadow:var(--naklejka-cien);border:var(--karta-obrys);z-index:4;rotate:3deg}
.wykres b{font-size:14px}
.slupki{display:flex;align-items:flex-end;gap:7px;height:90px;margin-top:10px}
.slupki i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:var(--slupek);transform-origin:bottom}
.slupki i:last-child{background:var(--slupek-max)}

/* strony */
.scena-strony{min-height:520px}
.okno-www{width:min(470px,100%);background:#fff;color:#14112A;border-radius:var(--karta-r);box-shadow:0 50px 90px -30px rgba(10,20,80,.55);border:var(--karta-obrys);overflow:hidden;rotate:-2deg}
.www-gora{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#F1EEF9}
.www-gora span{width:11px;height:11px;border-radius:50%;background:#FF5F57}.www-gora span:nth-child(2){background:#FEBC2E}.www-gora span:nth-child(3){background:#28C840}
.www-gora em{margin-left:12px;font-style:normal;font-size:13px;font-weight:700;background:#fff;padding:4px 14px;border-radius:99px;color:#5D5878}
.www-tresc{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.klocek{border-radius:14px;background:#F6F3FF}
.k-nav{grid-column:1/-1;display:flex;gap:10px;padding:12px}.k-nav i{height:10px;width:60px;border-radius:9px;background:#DDD6F5}.k-nav i:first-child{width:90px;background:var(--akcent)}
.k-foto{position:relative;aspect-ratio:1;background:linear-gradient(150deg,#FFE3F4,#E6DEFF)}
.k-foto .produkt{animation:none}
.k-tytul{padding:14px;display:flex;flex-direction:column;gap:6px;background:none}
.k-tytul b{font-family:var(--nagl);font-size:18px;line-height:1.1}
.k-tytul small{color:#F5A700;letter-spacing:2px}
.k-tytul strong{font-size:20px}
.k-guzik{grid-column:2;display:grid;place-items:center;height:46px;background:var(--guzik-tlo);color:var(--guzik-tekst);font-weight:800;font-size:14px;margin-top:-60px;align-self:end}
.k-karty{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0;background:none}.k-karty i{height:54px;border-radius:12px;background:#F1EEF9}

/* oprogramowanie (okno Komsy) */
.scena-soft{min-height:480px}
.okno{width:min(500px,100%);border-radius:var(--karta-r);background:#fff;color:#14112A;box-shadow:0 40px 80px -30px rgba(10,20,40,.5);border:var(--karta-obrys);overflow:hidden;rotate:2deg}
.okno-gora{display:flex;align-items:center;gap:8px;padding:14px 18px;background:#170B3B;color:#fff}
.okno-gora span{width:11px;height:11px;border-radius:50%;background:#FF5F57}.okno-gora span:nth-child(2){background:#FEBC2E}.okno-gora span:nth-child(3){background:#28C840}
.okno-gora b{margin-left:10px;font-family:var(--nagl);font-size:16px}
.okno-tresc{padding:10px 18px 18px}
.rzad{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid #EEEAF6}
.rzad:first-child{border-top:0}
.awatar{width:38px;height:38px;border-radius:50%;flex:none;background:linear-gradient(135deg,#FFC93C,#FF6A4D)}
.rzad.aktywny .awatar{background:linear-gradient(135deg,#3FDDB0,#2F5BFF)}
.rzad.spam .awatar{background:#DDD8EA}
.rz-tekst{display:flex;flex-direction:column;min-width:0}
.rz-tekst b{font-size:13px}.rz-tekst span{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rzad.spam .rz-tekst span{text-decoration:line-through;color:#9C97B5}
.rz-akcja{margin-left:auto;padding:7px 13px;border-radius:999px;border:2px solid #E4DFF2;font-weight:800;font-size:13px;white-space:nowrap}
.rzad.aktywny .rz-akcja{background:var(--akcent);border-color:var(--akcent);color:#fff}
.rzad.spam .rz-akcja{background:#FFE9E4;border-color:#FFE9E4;color:#D2401F}
.ai{display:flex;flex-direction:column;gap:7px;margin:0 0 10px 50px;padding:12px;border-radius:16px;background:#F6F3FF}
.ai span{padding:9px 12px;border-radius:12px;background:#fff;border:2px solid transparent;font-size:14px}
.ai span.wyb{border-color:var(--akcent)}
.wyslij{align-self:flex-end;padding:8px 20px;border-radius:999px;background:var(--guzik-tlo);color:var(--guzik-tekst);font-size:14px}

/* ---------- pasek ---------- */
.pasek{background:var(--pasek-tlo);color:var(--pasek-tekst);overflow:hidden;padding:20px 0;pointer-events:none;position:relative;z-index:2}
.tasma{display:flex;align-items:center;gap:30px;width:max-content;animation:tasma 34s linear infinite;font-family:var(--nagl);font-weight:var(--nagl-waga);font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;white-space:nowrap;will-change:transform}
.tasma i{width:12px;height:12px;border-radius:50%;background:var(--pasek-kropka);flex:none}

/* ---------- wstęp + kafle ---------- */
.kafle{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:54px}
.kafel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:30px;padding:24px;min-height:190px;border-radius:var(--karta-r);text-decoration:none;color:#14112A;text-align:left;border:var(--karta-obrys);box-shadow:var(--karta-cien);transition:transform .35s var(--ease)}
.kafel:hover{transform:translateY(-6px) rotate(-1deg)}
.kafel b{font-family:var(--nagl);font-weight:var(--nagl-waga);font-size:22px;line-height:1.1;margin-top:auto}
.kafel-nr{font-weight:900;font-size:14px;opacity:.7}
.kafel-strz{position:absolute;right:20px;top:18px;font-size:22px;transition:transform .3s var(--ease)}
.kafel:hover .kafel-strz{transform:translateX(4px) rotate(-45deg)}
.ik-kobalt.kafel{color:#fff}

/* ---------- usługi ---------- */
.chipy{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:30px 0 0;padding:0}
.chipy li{padding:10px 16px;border-radius:var(--chip-r);background:var(--chip-tlo);border:var(--chip-obrys);font-weight:800;font-size:15px}

/* ---------- kroki (przyklejane, w poziomie) ---------- */
.sek-kroki{padding:0}
.kroki-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(84px,10vw,130px) 0 60px;gap:44px}
.kroki-tor{overflow:hidden;padding:20px 0 40px}
.kroki-tasma{display:flex;gap:24px;padding:0 var(--bok-p) 0 max(var(--bok),calc((100vw - 1240px)/2 + 20px));width:max-content}
.krok{position:relative;width:min(420px,78vw);min-height:300px;padding:32px;border-radius:var(--karta-r);background:var(--krok-tlo);color:var(--krok-tekst);border:var(--karta-obrys);box-shadow:var(--karta-cien);display:flex;flex-direction:column}
.krok-nr{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--krok-nr-tlo);color:var(--krok-nr-tekst);font-family:var(--nagl);font-weight:var(--nagl-waga);font-size:30px;margin-bottom:auto}
.krok h3{font-size:32px;margin-top:40px}
.krok p{margin:10px 0 0;opacity:.85}
.kroki-postep{width:min(100% - 40px,1200px);height:6px;margin:0 auto;border-radius:6px;background:var(--postep-tlo);overflow:hidden}
.kroki-postep span{display:block;height:100%;background:var(--postep-kolor);transform:scaleX(0);transform-origin:left}

/* ---------- dlaczego (bento) ---------- */
.bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-areas:"a b c" "a d d";gap:18px;margin-top:54px}
.bento-k{padding:32px;border-radius:var(--karta-r);background:var(--bento-tlo);color:var(--bento-tekst);border:var(--karta-obrys);box-shadow:var(--karta-cien);min-height:220px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .2s ease-out}
.bento-k h3{font-size:26px;margin-top:auto}
.bento-k p{margin:10px 0 0;opacity:.85}
.b1{grid-area:a;background:var(--bento-glowny);color:var(--bento-glowny-tekst);min-height:460px}
.b1 h3{font-size:clamp(30px,3.2vw,44px)}
.b1 .bento-ik{background:rgba(255,255,255,.2);color:#fff}
.b2{grid-area:b}.b3{grid-area:c}.b4{grid-area:d}
.bento-ik{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--bento-ik);font-size:24px;margin-bottom:30px}
.komsy-mini{display:flex;align-items:center;gap:18px;margin:24px auto 0;max-width:760px;padding:18px 22px;border-radius:var(--karta-r);background:var(--komsy-tlo);color:var(--komsy-tekst);border:var(--karta-obrys)}
.komsy-mini img{border-radius:12px;flex:none}
.komsy-mini b{font-size:16px}.komsy-mini p{margin:4px 0 0;font-size:14.5px;opacity:.8}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;display:grid;gap:12px}
.faq details{background:var(--faq-tlo);border-radius:calc(var(--karta-r) - 6px);border:var(--karta-obrys);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;font-family:var(--nagl);font-weight:var(--nagl-waga);font-size:19px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--faq-plus)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:11px;top:17px;width:14px;height:2.5px;border-radius:2px;background:var(--faq-plus-kolor);transition:transform .3s var(--ease)}
.faq-plus::after{transform:rotate(90deg)}
.faq details[open] .faq-plus::after{transform:rotate(0)}
.faq-tresc{padding:0 24px}
.faq-tresc p{margin:0 0 22px;opacity:.85}

/* ---------- final ---------- */
.final-h{font-size:clamp(3rem,8vw,7.4rem);max-width:12ch;margin:0 auto}

/* ---------- stopka ---------- */
.stopka{background:var(--stopka-tlo);color:#fff;padding:56px 0 max(40px,env(safe-area-inset-bottom))}
.stopka .wiersz{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.stopka-logo .logo{height:44px;width:auto}
.stopka p{margin:0;opacity:.6;font-size:15px;flex:1 1 260px}
.stopka-linki{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:15px}
.stopka-linki a{text-decoration:none;opacity:.85}.stopka-linki a:hover{opacity:1}
.stopka-linki span{opacity:.5}

/* ---------- polityka ---------- */
.sek-tekst{padding-top:calc(var(--promo-h) + 140px)}
.tekst h1{font-size:clamp(40px,6vw,72px);margin:20px 0 12px}
.tekst h2{font-size:22px;margin:38px 0 10px}
.tekst p{margin:0 0 12px;opacity:.85}
.tekst .data{opacity:.6;font-size:15px}
.tekst a{color:inherit;font-weight:700}
.wroc{text-decoration:none;font-weight:800}

/* ---------- obiekty 3D ---------- */
.obiekt3d{position:absolute;width:clamp(150px,15vw,220px);height:auto;z-index:6;pointer-events:none;filter:drop-shadow(0 28px 36px rgba(20,10,60,.32));will-change:transform}
.o-hero{right:-6%;top:-8%;width:clamp(170px,17vw,250px)}
.o-ai{right:-4%;bottom:-12%}
.o-reklamy{right:-6%;top:-10%}
.o-strony{left:-8%;bottom:-8%}
.o-soft{right:-6%;top:-16%}
.kr2{top:52%}
.swiatlo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,72%) var(--my,30%),rgba(255,255,255,.16),rgba(255,255,255,0) 60%);transition:opacity .4s}
.kafel{overflow:visible}
.kafel-3d{position:absolute;right:-10px;top:-34px;width:118px;height:auto;filter:drop-shadow(0 18px 22px rgba(20,10,60,.3));transition:transform .55s var(--pop);pointer-events:none}
.kafel:hover .kafel-3d{transform:translateY(-10px) rotate(-8deg) scale(1.08)}
.kafel-strz{top:auto;bottom:20px}

/* ---------- manifest (słowa zapalają się przy przewijaniu) ---------- */
.sek-manifest{padding:0;background:var(--manifest-tlo,#14112A);color:#fff}
.manifest-pin{min-height:100vh;display:flex;align-items:center;padding:clamp(84px,10vw,140px) 0}
.manifest{margin:0;font-family:var(--nagl);font-weight:var(--nagl-waga);letter-spacing:-.035em;line-height:1.12;font-size:clamp(2rem,4.6vw,4.4rem);max-width:20ch}
.m-s{display:inline;color:#fff}
.ruch .m-s{opacity:.16}

/* ---------- pętle ---------- */
@keyframes tasma{to{transform:translate3d(-50%,0,0)}}
@keyframes unos{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes plyn{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-22px) scale(1.08)}}
@keyframes kolys{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-8px)}}
@keyframes obrot{to{transform:rotate(360deg)}}
@keyframes bicie{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}}
@keyframes pasekpost{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes puls{from{stroke-dashoffset:0}to{stroke-dashoffset:-1440}}

/* ---------- stany startowe animacji (tylko gdy działa GSAP) ---------- */
.ruch .linia-w{transform:translateY(105%)}
.ruch .wjazd,.ruch .odkryj{opacity:0;transform:translateY(30px)}
.ruch .odkryj-dzieci>*{opacity:0;transform:translateY(18px) scale(.94)}
.ruch .slowa .slowo-w{transform:translateY(110%)}
.slowo{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.slowo-w{display:inline-block}
.ruch .fala path{stroke-dasharray:1;stroke-dashoffset:1}
.ruch .bento-k,.ruch .o-hero,.ruch .kafel-3d,.ruch .scena-hero .telefon,.ruch .scena-hero .plyta,.ruch .naklejka,.ruch .wezel,.ruch .krazek,.ruch .wykres,.ruch .okno-www,.ruch .okno,.ruch .telefon.maly{opacity:0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- telefon / tablet ---------- */
@media (max-width:1020px){
  .nav-linki,.nav-prawo .guzik-maly{display:none}
  .hamburger{display:block}
  .pigulka-nav{width:calc(100% - 24px);padding:8px 8px 8px 18px;justify-content:space-between}
  .nav-logo .logo{height:calc(var(--logo-h) - 6px)}
  .dwie,.dwie.odwr{grid-template-columns:1fr}
  .dwie.odwr>:first-child{order:0}
  .kafle{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kroki-tasma{flex-direction:column;width:auto!important;padding:0 var(--bok-p) 0 var(--bok)}
  .krok{width:100%}
  .kroki-pin{min-height:0}
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d d"}
  .b1{min-height:300px}
}
@media (max-width:640px){
  :root{--promo-h:40px}
  .promo-znak{display:none}
  .final-h{font-size:clamp(2.4rem,11vw,3.2rem)}
  .okno,.okno-www{rotate:0deg;width:calc(100% - 16px)}
  body{font-size:16px}
  .promo{font-size:12.5px}.promo-w{gap:8px}
  .sek{padding:72px 0}
  .sek-hero{padding-top:calc(var(--promo-h) + 112px);min-height:0}
  .h1{font-size:clamp(2.4rem,11.4vw,3.3rem)}
  .h2{font-size:clamp(2rem,9.6vw,2.6rem)}
  .przyciski .guzik{flex:1 1 100%}
  .scena{min-height:470px}
  .telefon{width:min(240px,62vw);border-radius:40px}.ekran{border-radius:31px}
  .naklejka{padding:10px 13px;font-size:12.5px;gap:9px}.naklejka b{font-size:13.5px}.naklejka small{font-size:12px}
  .n1{left:0;top:6%}.n2{right:0;top:44%}.n3{left:0;bottom:4%}
  .waz{display:none}
  .obiekt3d{width:118px}
  .o-hero{right:-2%;left:auto;top:-4%;width:120px}
  .o-ai{right:-2%;bottom:-8%;top:auto}.o-reklamy{right:-2%;top:-6%}.o-strony{left:-2%;bottom:-4%}.o-soft{right:-2%;top:-10%}
  .kafel-3d{width:84px;top:-24px;right:-6px}
  .manifest-pin{min-height:0}
  .manifest{font-size:clamp(1.7rem,8vw,2.3rem)}
  .wezel{font-size:12.5px;padding:8px 11px 8px 8px;gap:7px}.wezel-ik{width:28px;height:28px;font-size:14px}
  .krazek{width:66px;height:66px;font-size:11.5px}
  .wykres{width:170px}.slupki{height:70px}
  .kafle{gap:12px}.kafel{min-height:140px;padding:14px;gap:18px}.kafel b{font-size:14.5px;letter-spacing:-.02em}
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d"}
  .bento-k{padding:24px;min-height:0}.b1{min-height:260px}
  .krok{min-height:260px;padding:24px}.krok h3{font-size:26px}
  .faq summary{font-size:17px;padding:18px}
  .guzik-duzy{width:100%;padding:0 16px;font-size:17px}
  .ai{margin-left:0}
}

/* ---------- podstrony usług, formularz, menu podstron (SEO, 5.11) ---------- */
.mega-dol{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding:12px 6px 4px;border-top:1px solid #EEEAF6;margin-top:4px}
.mega-dol a{padding:7px 12px;border-radius:999px;background:var(--mega-hover);color:var(--tekst-ciemny);text-decoration:none;font-weight:700;font-size:13px}
.mega-dol a:hover{background:#E6DEFF}
.szuflada{overflow-y:auto}
.szuflada-pod{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 16px;border-top:1px solid #EEEAF6}
.szuflada-lista .szuflada-pod a{height:auto;padding:9px 13px;border:0;border-radius:999px;background:#F1ECFF;font-size:14px}
.chipy a{color:inherit;text-decoration:none}
.chipy li:has(a){padding:0}.chipy li a{display:block;padding:10px 16px}
.chipy li:has(a):hover{filter:brightness(1.08);transform:translateY(-2px)}
.chipy li{transition:transform .25s var(--ease,ease)}
.sek-pod{padding-top:calc(var(--promo-h) + 140px)}
.h1-pod{font-size:clamp(2.4rem,4.6vw,4.4rem)}
.okruszki{display:flex;gap:8px;margin-bottom:22px;font-size:14px;font-weight:700;opacity:.75}
.okruszki a{color:inherit}
.pod-obraz{display:grid;place-items:center}
.pod-3d{width:min(420px,80%);height:auto;filter:drop-shadow(0 36px 44px rgba(20,10,60,.35));animation:unos 6s ease-in-out infinite}
.sek-kroki-pod .kroki-nagl{margin-bottom:44px}
.kroki-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kroki-siatka .krok{width:auto;min-height:260px}
.kroki-siatka .krok h3{font-size:26px}
.sek-inne{padding:70px 0}
.chipy-linki{justify-content:center}
.chipy-linki li{background:#fff;color:#14112A}
.formularz{max-width:760px;margin:40px auto 0;padding:clamp(22px,3vw,36px);background:#fff;color:#14112A;border-radius:var(--karta-r);box-shadow:0 40px 90px -30px rgba(20,10,60,.55);text-align:left}
.pola{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pola label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:14px}
.pola .pelne{grid-column:1/-1}
.pola input,.pola select,.pola textarea{width:100%;font:inherit;font-size:16px;font-weight:600;color:#14112A;background:#F6F3FF;border:2px solid transparent;border-radius:16px;padding:14px 16px;outline:0;transition:border-color .2s,background .2s}
.pola textarea{resize:vertical;min-height:120px}
.pola input:focus,.pola select:focus,.pola textarea:focus{border-color:var(--akcent);background:#fff}
.miodek{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sek-final .formularz .guzik-duzy{width:100%;margin-top:18px;background:var(--grad);color:#fff}
.formularz button[disabled]{opacity:.6;pointer-events:none}
.form-info{margin:14px 0 0;font-size:13.5px;opacity:.7;text-align:center}
.form-info a{color:inherit}
.form-stan{margin:12px 0 0;font-weight:800;text-align:center}
.form-stan:empty{display:none}
.formularz.wyslane .pola,.formularz.wyslane .guzik{display:none}
.formularz.wyslane .form-stan{font-size:20px;padding:30px 0}
@media (max-width:1020px){
  .kroki-siatka{grid-template-columns:1fr 1fr}
  .pod-3d{width:min(260px,60%)}
}
@media (max-width:640px){
  .sek-pod{padding-top:calc(var(--promo-h) + 108px)}
  .h1-pod{font-size:clamp(2rem,9vw,2.6rem)}
  .kroki-siatka{grid-template-columns:1fr}
  .kroki-siatka .krok{min-height:0}
  .kroki-siatka .krok h3{margin-top:24px}
  .pola{grid-template-columns:1fr}
  .formularz{padding:20px;margin-top:28px}
  .pod-3d{width:170px}
}