/* Agentownia v14 (v13 + sekcje demo, porownanie, role; patrz blok v14 na koncu). v13 (03.10.2026): CIEMNY motyw wg wzorow Michala (Hostinger: granat z fioletem, fioletowy CTA, zielone korzysci; Base: duze czytelne litery).
   Tlo bardzo ciemne (nie czern), karty wyraznie jasniejsze, tekst prawie bialy. Kolor prowadzi oko: fiolet = akcja (przyciski), zielony = korzysc (ptaszki, kropka),
   zloty = cena, ikony krokow kazda w innym kolorze. Zadnych zwezonych krojow (v12 mial Bricolage 75%), body 17 px, drobny 15 px, interlinia 1,5+.
   Kontrast kazdego tekstu mierzy zrzuty.mjs (tekst czytany min 7:1, drobny i naglowki min 4,5:1). Tekst i uklad jak v12. */
:root{
  --tlo:#0D0A22;        /* baza: granat z fioletem */
  --tlo-2:#171238;      /* co druga sekcja, stopka */
  --karta:#251E5C;      /* karty, tabele, okna: wyraznie jasniejsze od tla */
  --karta-2:#2F2775;    /* naglowek tabeli, pola ikon */
  --tint:#2F2775;
  --marka:#6D3DF5;      /* jedyny mocny kolor CTA: przyciski */
  --marka-2:#5A2BE0;
  --lnk:#C4BEFF;        /* jasny fiolet: etykiety, linki, akcenty na ciemnym */
  --atr:#FFFFFF;
  --ink:#0B1230;        /* ciemny tekst na jasnych elementach (chip, makieta maila) */
  --tekst:#F8F7FF; --tekst-2:#E6E3FB; --tekst-3:#D3CFF1;
  --linia:#3D3585; --linia-2:#6A60C0;
  --ok:#5EE59A; --cena:#FFD25E;
  --zle:#FF9A9A;
  /* okno demo (makieta aplikacji) */
  --okno:#130F38; --okno-2:#221B5E; --okno-t:#F1F0FC; --okno-t2:#D0CDEE; --ekran:#8FD6FF;
  --f-nag:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-txt:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sekcja:clamp(52px,7vw,104px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;background:var(--tlo);color-scheme:dark}
body{margin:0;background:var(--tlo);color:var(--tekst);font-family:var(--f-txt);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:var(--lnk)}
p{margin:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--lnk);outline-offset:3px;border-radius:6px}
.wnetrze{width:min(1160px,100% - 40px);margin-inline:auto}
.i{width:20px;height:20px;flex:none}
.i-s{width:18px;height:18px;flex:none}
.i-m{width:22px;height:22px;flex:none}
.i-k{width:28px;height:28px;flex:none}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pomin{position:absolute;left:-999px;top:12px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700}
.pomin:focus{left:16px}

/* typografia: naglowki Bricolage w NORMALNEJ szerokosci (100%), tekst Figtree */
h1,h2,h3{font-family:var(--f-nag);margin:0;color:var(--tekst)}
h1,h2{font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.08}
h2{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12}
h3{font-size:1.25rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.etykieta{font-size:1rem;font-weight:700;color:var(--lnk);margin-bottom:10px}
.lead{font-size:clamp(1.125rem,1.8vw,1.3125rem);line-height:1.55;color:var(--tekst-2);max-width:32em;text-wrap:pretty}
.pod{color:var(--tekst-2);max-width:32em;margin-top:14px;text-wrap:pretty;font-size:1.125rem}
.naglowek{margin-bottom:clamp(24px,3.5vw,44px)}
.link{color:var(--atr);font-weight:600;text-decoration:underline;text-decoration-color:var(--lnk);text-decoration-thickness:2px;text-underline-offset:5px;transition:color .2s}
.link:hover{color:var(--lnk)}
.link .i{display:inline-block;vertical-align:-4px;margin-left:6px;transition:transform .2s}
.link:hover .i{transform:translateX(4px)}

/* menu */
.gora{position:sticky;top:0;z-index:40;background:rgba(13,10,34,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.gora.zwinieta{border-color:var(--linia)}
.gora-wew{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.lewa{display:flex;align-items:center;gap:18px}
.dom{display:inline-flex;align-items:center;gap:8px;color:var(--tekst-2);text-decoration:none;font-weight:600;font-size:1rem}
.dom-ikona{display:grid;place-items:center;transition:transform .2s}
.dom:hover{color:var(--atr)}.dom:hover .dom-ikona{transform:translateX(-3px)}
.marka{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-nag);font-weight:800;font-size:1.5rem;letter-spacing:0;color:var(--atr);text-decoration:none}
.marka img{width:36px;height:36px;border-radius:9px}
.menu{display:none;align-items:center;gap:26px}
.menu a{color:var(--tekst-2);text-decoration:none;font-weight:600;font-size:1rem;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.menu a:hover{color:var(--atr)}
.menu a[aria-current=true]{color:var(--atr);border-color:var(--lnk)}

/* przyciski: wypelniony niebieski (glowny) i obrys (drugi) */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:10px;font-weight:700;font-size:1.0625rem;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s,box-shadow .2s}
.przycisk.duzy{min-height:56px;padding:0 30px;font-size:1.125rem}
.przycisk.maly{min-height:40px;padding:0 18px;font-size:.9375rem}
.glowny{background:var(--marka);color:#fff;box-shadow:0 0 0 1px rgba(196,190,255,.55),0 12px 30px -10px rgba(109,61,245,.95)}
.glowny:hover{background:var(--marka-2);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(196,190,255,.8),0 16px 34px -10px rgba(109,61,245,1)}
.glowny:active{transform:none}
.kontur{background:transparent;color:var(--atr);box-shadow:inset 0 0 0 2px var(--lnk)}
.kontur:hover{background:var(--karta);transform:translateY(-2px)}
.kontur:active{transform:none}
.przyciski{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}

/* hero: tekst po lewej, po prawej maly ciemny ekran demo na jasnej stronie */
.hero{position:relative;isolation:isolate;padding:clamp(24px,4vw,56px) 0 clamp(44px,6vw,88px)}
.hero::before{content:"";position:absolute;inset:-10% -10% 0;z-index:-1;pointer-events:none;background:radial-gradient(60% 55% at 78% 30%,rgba(109,61,245,.38),transparent 70%),radial-gradient(40% 40% at 12% 80%,rgba(46,204,160,.14),transparent 70%)}
.hero-siatka{display:grid;gap:68px;align-items:center}
.hero-tresc{max-width:34rem}
.pastylka{display:flex;align-items:center;gap:9px;font-size:1rem;font-weight:600;color:var(--tekst-2);margin-bottom:16px}
.kropka{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 4px rgba(94,229,154,.2)}
.hero .lead{margin-top:18px}
.drobne{margin-top:12px;color:var(--tekst-3);font-size:.9375rem;line-height:1.5}
#demo{position:relative}
.podpis-okna{margin-top:10px;color:var(--tekst-3);font-size:.9375rem}

/* maskotka: obraz + twarz w SVG (oddech, mrugniecie) */
.maskotka{margin:0;position:relative;aspect-ratio:var(--w)/var(--h);pointer-events:none}
.cialo{position:relative;width:100%;height:100%;transform-origin:50% 90%;animation:oddech 5s ease-in-out infinite alternate}
.maskotka img{width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.55))}
.twarz{position:absolute;inset:0;width:100%;height:100%}
.oko{transform-box:fill-box;transform-origin:center;animation:mrug 5.6s infinite}
.m-pas .oko{animation-delay:3.1s}
.poswiata{opacity:.9}
@keyframes oddech{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-6px) rotate(1.2deg)}}
@keyframes mrug{0%,91%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.08)}}
.m-hero{position:absolute;right:14px;bottom:calc(100% - 2px);width:clamp(72px,19vw,170px);z-index:2}

/* okno demo: ciemna makieta aplikacji (maly element, tekst jasny na granacie, kontrast > 9:1) */
.okno{position:relative;background:var(--okno);border-radius:16px;overflow:hidden;color:var(--okno-t);box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px var(--linia-2)}
.okno-gora{display:flex;align-items:center;gap:14px;padding:9px 14px;background:var(--okno-2);flex-wrap:wrap}
.kropki{display:flex;gap:6px}.kropki i{width:10px;height:10px;border-radius:50%;background:#7C74C8}
.zakladki{display:flex;margin-inline:auto 0}
.zakladki button{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;min-height:34px;padding:0 14px;border-radius:7px;border:0;background:rgba(143,214,255,.16);color:var(--okno-t);cursor:default}
.zakladki .i{width:17px;height:17px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600;color:var(--okno-t2);margin-left:auto}
.status .kropka{background:#5BE090}
.status .st-a{display:none}
[data-stan=pisze] .status .st-a{display:inline}[data-stan=pisze] .status .st-b{display:none}
[data-stan=pisze] .status .kropka{background:var(--ekran);animation:mig .8s steps(2) infinite}
.panel{display:grid;gap:16px;padding:16px;grid-template-columns:minmax(0,1fr)}
.panel[hidden]{display:none}
.kol{display:grid;gap:10px;align-content:start}
.et{font-size:.9375rem;font-weight:700;color:var(--okno-t2);margin:0}
.et-ai{color:var(--ekran)}
.karta-mail{background:#F2F4FB;border-radius:10px;padding:14px 16px;display:grid;gap:8px;color:#2A3058;font-size:1.0625rem;line-height:1.5}
.km-naglowek{display:flex;align-items:center;gap:12px}
.km-naglowek b{display:block;color:var(--ink);font-weight:700}
.km-temat{display:block;color:#454E7C;font-size:.9375rem}
.awatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:.9375rem;flex:none}
.bania{background:#DCE4FF;color:var(--ink);border-radius:14px 14px 4px 14px;padding:12px 16px;font-size:1.0625rem;line-height:1.5;justify-self:end;max-width:32em}
.karta-ai{background:var(--okno-2);border-radius:12px;padding:16px 18px;display:grid;gap:14px;box-shadow:inset 0 0 0 1px rgba(143,214,255,.3)}
.pisz{min-height:6.6em;line-height:1.55;color:#DDF3FF;font-size:1.0625rem}
.pisz.pisze .pisz-w::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--ekran);margin-left:3px;vertical-align:text-bottom;animation:mig .8s steps(2) infinite}
@keyframes mig{50%{opacity:0}}
.karta-ai-stopka{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kol-ai.ozyw [data-po]{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .4s,transform .4s,visibility 0s .4s}
.kol-ai.ozyw.gotowe [data-po]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.kol-ai.ozyw [data-etap]{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.kol-ai.ozyw [data-etap].jest{opacity:1;transform:none}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--ekran);color:var(--ink);border:0;border-radius:7px;padding:8px 14px;font-weight:700;font-size:.9375rem;cursor:pointer;transition:background .2s,transform .2s}
.chip:hover{transform:translateY(-1px)}
.chip.ok{background:#7BE3A0}
.czas{display:inline-flex;align-items:center;gap:8px;color:var(--okno-t2);font-size:.9375rem;font-weight:600}
.czas::before{content:"";width:8px;height:8px;border-radius:50%;background:#5BE090}
.okno :focus-visible{outline-color:var(--ekran)}

/* sekcje: nazwa w marginesie (od 1000 px), tresc w szerokiej kolumnie; co druga sekcja na jasnoszarym */
.sekcja{padding:var(--sekcja) 0}
.sekcja.ciemniej{background:var(--tlo-2)}
.start{padding:var(--sekcja) 0;background:var(--tlo-2)}
.pod-start{margin-top:12px;color:var(--tekst-2);font-size:1.125rem}
.start-uwaga{margin-top:28px;color:var(--atr);font-weight:600}

/* asystenci: uchwyt jako duza typografia, bez kart */
.asystenci{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linia)}
.asystenci li{display:grid;gap:6px;padding:16px 0 18px;border-top:1px solid var(--linia)}
.rola-w{font-family:var(--f-nag);font-weight:800;font-size:clamp(2rem,5.6vw,2.9rem);line-height:1.1;color:var(--lnk)}
.asystenci h3{margin:0 0 2px}
.asystenci p{color:var(--tekst-2)}
.uwaga-pod{margin-top:18px;color:var(--tekst-2)}

/* formularze */
.karta-form{margin-top:30px;padding:clamp(20px,3.5vw,32px);border-radius:16px;background:var(--karta);box-shadow:inset 0 0 0 1px var(--linia-2);max-width:34rem;scroll-margin-top:84px}
.karta-form[hidden]{display:none}
.karta-form h2{font-size:clamp(2rem,4.5vw,2.75rem);margin-bottom:14px}
.forma{display:grid;gap:10px}
.forma label{font-weight:600;color:var(--atr)}
.forma input[type=email],.forma input[type=text]{width:100%;min-height:52px;padding:0 14px;border-radius:8px;border:1.5px solid var(--linia-2);background:#fff;color:var(--ink);font:inherit;font-size:1.0625rem}
.forma input::placeholder{color:#4A5278;opacity:1}
.forma input:focus-visible{outline:3px solid var(--lnk);outline-offset:1px}
.forma .zgoda{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--tekst-2);font-size:.9375rem;line-height:1.5;margin-top:2px}
.forma .zgoda input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--marka)}
.forma .przycisk{margin-top:6px;justify-self:start}
.forma small.drobne{margin:-4px 0 4px}
.pulapka{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.komunikat{margin:0;color:var(--tekst-2)}
.komunikat.zle{color:var(--zle);font-weight:600}
.sukces{margin:0;padding:14px 16px;border-radius:8px;background:#12381F;box-shadow:inset 4px 0 0 var(--ok);color:var(--atr)}

/* proces: oś kroków. Karta z ikoną i numerem, między kartami łącznik ze strzałką (poziomo od 720 px, pionowo na telefonie) */
.kroki{list-style:none;margin:0;padding:0;display:grid;gap:44px;counter-reset:krok}
.kroki li{position:relative;display:grid;align-content:start;gap:6px;background:var(--karta);border-radius:18px;padding:22px 20px 24px;box-shadow:0 0 0 1px var(--linia-2),0 18px 34px -22px rgba(0,0,0,.7)}
.kroki .ikona{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.1);color:var(--ik,var(--lnk));box-shadow:inset 0 0 0 2px var(--ik,var(--lnk));display:grid;place-items:center;margin-bottom:10px}
.kroki .nr{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:var(--ik,var(--lnk));color:var(--ink);display:grid;place-items:center;font-family:var(--f-nag);font-weight:800;font-size:1.2rem;line-height:1}
.kroki li:nth-child(1){--ik:#C4BEFF}.kroki li:nth-child(2){--ik:#5EEAD4}.kroki li:nth-child(3){--ik:#FFB98A}.kroki li:nth-child(4){--ik:#FF9CCB}
.kroki h3{font-size:1.1875rem}
.kroki p{color:var(--tekst-2);font-size:1.0625rem;line-height:1.5}
.kroki li:not(:last-child)::after{content:"";position:absolute;left:46px;top:100%;height:44px;border-left:3px dotted var(--lnk)}
.kroki li:not(:last-child)::before{content:"";position:absolute;left:42px;top:calc(100% + 28px);width:11px;height:11px;border-right:3px solid var(--lnk);border-bottom:3px solid var(--lnk);transform:rotate(45deg)}

/* pelna wersja: cena, porownanie, tabela „co dostajesz” */
.cena{display:block;margin-top:16px;font-family:var(--f-nag);font-weight:800;font-size:clamp(2.3rem,6vw,3.4rem);line-height:1.05;color:var(--cena)}
.porownanie{display:grid;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--linia-2);background:var(--karta);margin-bottom:28px}
.pw-wiersz{display:grid;grid-template-columns:.85fr 1fr 1.25fr;border-top:1px solid var(--linia)}
.pw-wiersz:first-child{border-top:0}
.pw-wiersz>span{padding:12px 10px;font-size:.9375rem;color:var(--tekst-2);line-height:1.5}
.pw-wiersz>span:first-child{color:var(--atr);font-weight:700}
.pw-gora>span{font-weight:700;color:var(--atr);font-size:.9375rem;background:var(--karta-2);border-bottom:2px solid var(--linia-2)}
.pw-wiersz .pw-pelna{background:rgba(109,61,245,.28);color:var(--atr);font-weight:600}
.pw-gora .pw-pelna{border-bottom-color:var(--lnk)}
.tabela-dostajesz{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--linia-2);background:var(--karta)}
.tab-dostajesz{width:100%;border-collapse:collapse}
.tab-dostajesz th,.tab-dostajesz td{text-align:left;vertical-align:top;padding:16px 18px;font-size:1.0625rem;line-height:1.5}
.tab-dostajesz thead th{background:var(--karta-2);color:var(--atr);font-weight:700;font-size:1rem;border-bottom:2px solid var(--ok)}
.tab-dostajesz tbody th{width:38%;color:var(--atr);font-weight:700}
.tab-th{display:flex;gap:12px;align-items:flex-start}
.tab-dostajesz tbody tr+tr>*{border-top:1px solid var(--linia)}
.tab-dostajesz tbody tr:nth-child(even){background:#2B2468}
.tab-dostajesz td{color:var(--tekst-2)}
.tab-ok{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#06210F;flex:none;margin-top:1px}

/* faq */
.faq{border-top:1px solid var(--linia-2)}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--f-nag);font-weight:700;font-size:1.1875rem;padding:16px 0;cursor:pointer;list-style:none;color:var(--atr)}
.faq summary::-webkit-details-marker{display:none}
.faq-plus{display:grid;place-items:center;color:var(--lnk);transition:transform .25s}
.faq details[open] .faq-plus{transform:rotate(45deg)}
.faq details p{color:var(--tekst-2);padding-bottom:16px;max-width:36em}
.faq details p a{color:var(--lnk);font-weight:600}

/* pas koncowy */
.pas{padding:clamp(36px,6vw,80px) 0 clamp(44px,6vw,88px)}
.pas-karta{display:flex;align-items:center;justify-content:space-between;gap:40px;background:#4A28C2;box-shadow:0 0 0 1px rgba(196,190,255,.5);border-radius:24px;padding:clamp(24px,5vw,56px)}
.pas h2{font-size:clamp(2.1rem,5vw,3.6rem);color:#fff}
.pas .glowny{background:#fff;color:#2B1A8C;box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.pas .glowny:hover{background:#EEEAFF}
.pas .kontur{color:#fff;box-shadow:inset 0 0 0 2px #fff}
.pas .kontur:hover{background:rgba(255,255,255,.14)}
.pas a:not(.przycisk){color:#fff}
.pas-tresc p:not(.drobne){margin-top:10px;color:#fff;max-width:28em}
.pas .drobne{color:#fff}
.m-pas{width:clamp(150px,20vw,230px);flex:none}

/* stopka */
.stopka{padding:28px 0 22px;border-top:1px solid var(--linia);background:var(--tlo-2)}
.stopka-linki{display:grid;gap:14px}
.stopka-linki nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.stopka-linki nav a{color:var(--tekst-2);font-size:1rem}
.stopka-linki nav a:hover{color:var(--atr)}
.stopka-dol{margin-top:12px;color:var(--tekst-3)}
.stopka-dol small{font-size:.9375rem}

[hidden]{display:none!important}
.gora-akcje{display:flex;align-items:center;gap:10px;flex:none}
.przyciski-hero{gap:12px 14px}
.przyciski-hero .przycisk{flex:0 0 auto}

/* podstrona zakupu */
.kup-hero{padding:clamp(28px,5vw,72px) 0 clamp(40px,5vw,72px)}
.kup-hero-siatka{display:grid;gap:30px;align-items:end}
.kup-hero h1{font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.08}
.kup-hero .lead{margin-top:18px}
.karta-cena{padding:clamp(20px,3vw,30px);border-radius:18px;background:var(--karta);box-shadow:0 0 0 1px var(--linia-2),0 24px 44px -26px rgba(0,0,0,.8)}
.karta-cena .etykieta{margin-bottom:0}
.cena-duza{font-family:var(--f-nag);font-weight:800;font-size:clamp(3.6rem,10vw,5.6rem);line-height:1;color:var(--cena);margin-top:6px}
.cena-opis{margin-top:10px;font-weight:600;color:var(--atr)}
.zamow{padding-top:0}
.zamow-pas{display:grid;gap:18px;align-items:center;background:var(--karta);border-radius:18px;padding:clamp(22px,4vw,36px);box-shadow:0 0 0 1px var(--linia-2),0 18px 34px -22px rgba(0,0,0,.7)}
.zamow-pas .naglowek{margin:0}
.zamow-pas h2{font-size:clamp(1.9rem,4vw,2.75rem)}
.kup-ig{display:grid;gap:14px;justify-items:start}
.kup-ig .przycisk .i{width:22px;height:22px}
.kup-ig .przycisk{white-space:normal;text-align:center}
.znacznik{background:#FFD866;color:#2A2200;padding:.04em .32em;border-radius:5px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.faq .znacznik{display:inline}

/* regulamin i polityka prywatnosci */
.dok{max-width:48rem;padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(44px,7vw,96px)}
.dok h1{font-size:clamp(2.2rem,5.6vw,3.4rem);line-height:1.1;margin-bottom:22px}
.dok h2{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.2;margin:40px 0 12px}
.dok h3{margin:24px 0 8px}
.dok p,.dok li{color:var(--tekst-2);line-height:1.65}
.dok p{margin:0 0 14px}
.dok ul,.dok ol{margin:0 0 16px;padding-left:1.4rem;display:grid;gap:8px}
.dok strong{color:var(--atr)}
.dok code{font-size:.9em;background:var(--karta-2);padding:.1em .4em;border-radius:5px;color:var(--atr)}
.dok hr{border:0;border-top:1px solid var(--linia-2);margin:36px 0 8px}
.dok blockquote{margin:0 0 20px;padding:12px 16px;border-radius:8px;background:#3A3210;box-shadow:inset 4px 0 0 #FFD25E}
.dok blockquote p{margin:0 0 6px;color:var(--atr)}
.tabela-w{overflow-x:auto;margin:0 0 18px}
.dok table{border-collapse:collapse;width:100%}
.dok td:first-child{padding-right:16px;min-width:6.5rem}
.dok th,.dok td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--linia);color:var(--tekst-2);font-size:1.0625rem;line-height:1.5}
.dok th{color:var(--atr);font-weight:700;border-bottom-color:var(--linia-2)}

@media (min-width:720px){
  .asystenci li{grid-template-columns:15rem minmax(0,1fr);column-gap:32px;align-items:center;padding:22px 0}
  .asystenci h3{font-size:1.375rem}
  .kroki.trzy{grid-template-columns:repeat(3,1fr);gap:48px}
  .kroki.trzy li:not(:last-child)::after{left:100%;top:48px;height:0;width:48px;border-left:0;border-top:3px dotted var(--lnk)}
  .kroki.trzy li:not(:last-child)::before{left:calc(100% + 34px);top:43px;border-right:3px solid var(--lnk);border-top:3px solid var(--lnk);border-bottom:0;transform:rotate(45deg)}
  .pw-wiersz>span{font-size:1.0625rem;padding:14px 16px}
  .stopka-linki{grid-template-columns:auto 1fr;align-items:center}
  .panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;padding:22px}
  .zamow-pas{grid-template-columns:minmax(0,1fr) auto;gap:32px}
}
@media (min-width:900px){
  .kup-hero-siatka{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}
}
@media (min-width:1000px){
  .kroki.cztery{grid-template-columns:repeat(4,1fr);gap:48px}
  .kroki.cztery li:not(:last-child)::after{left:100%;top:48px;height:0;width:48px;border-left:0;border-top:3px dotted var(--lnk)}
  .kroki.cztery li:not(:last-child)::before{left:calc(100% + 34px);top:43px;border-right:3px solid var(--lnk);border-top:3px solid var(--lnk);border-bottom:0;transform:rotate(45deg)}
  .hero-siatka{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
  .hero{padding-top:84px}
  .m-hero{width:150px;right:22px}
  .sekcja>.wnetrze{display:grid;grid-template-columns:9.5rem minmax(0,1fr);column-gap:36px}
  .sekcja>.wnetrze>*{grid-column:2}
  .sekcja .naglowek{display:contents}
  .sekcja .etykieta{grid-column:1!important;grid-row:1;margin:.9rem 0 0}
  .sekcja .naglowek h2{grid-column:2;grid-row:1}
  .sekcja .naglowek>*:not(.etykieta){grid-column:2}
  .sekcja .naglowek .pod{margin-bottom:clamp(24px,3vw,40px)}
  .sekcja .naglowek h2:last-child{margin-bottom:clamp(24px,3vw,40px)}
}
@media (min-width:1080px){
  .menu{display:flex}
}
@media (max-width:999px){.hero-siatka{gap:100px}}
@media (max-width:719px){
  .dom-tekst{display:none}
  .marka{font-size:1.375rem}
  .gora .przycisk.maly{padding:0 12px;min-height:40px;font-size:.9375rem}
  .gora-wew{gap:10px}
  .gora-akcje{gap:6px}
  .pas-karta .maskotka{display:none}
  .okno-gora{padding:8px 12px;gap:10px}
  .kup-ig,.kup-ig .przycisk{justify-items:stretch;width:100%}
  /* tabela „co dostajesz” na telefonie: kazdy wiersz to blok (pasek z nazwa i opis pod nim), nadal jedno zestawienie */
  .tab-dostajesz,.tab-dostajesz tbody,.tab-dostajesz tr,.tab-dostajesz th,.tab-dostajesz td{display:block;width:auto}
  .tab-dostajesz thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tab-dostajesz tbody th{width:auto;padding:14px 16px 4px}
  .tab-dostajesz td{padding:0 16px 16px 54px}
  .tab-dostajesz tbody tr+tr>*{border-top:0}
  .tab-dostajesz tbody tr+tr{box-shadow:inset 0 3px 0 var(--linia-2)}
}
@media (max-width:560px){
  .przyciski-hero{flex-wrap:nowrap;gap:10px}
  .przyciski-hero .przycisk{flex:1 1 0;min-width:0;padding:0 10px;font-size:1rem}
}
@media (max-width:480px){
  .dom{display:none}
  .marka-tekst{display:none}
}
@media (max-width:420px){
  .hero-siatka{gap:64px}
  .hero-tresc h1{font-size:2.5rem}
}
@media (max-width:360px){
  .gora .przycisk.maly{padding:0 9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}

/* ===================== v14 (03.10.2026): mniej tekstu, wiecej pokazania. Kolory, kroje i progi kontrastu jak v13. ===================== */
.blok{padding:var(--sekcja) 0}
.blok.ciemniej{background:var(--tlo-2)}
.blok .naglowek{text-align:center;margin-bottom:clamp(26px,4vw,48px)}
.blok .naglowek .pod{margin-inline:auto}
.start .naglowek{text-align:center}
.start-uwaga{text-align:center}

/* hero: tekst i duza maskotka z trzema banieczkami rol */
.hero-v14 .hero-siatka{gap:34px}
.hero-wizual{position:relative;display:grid;place-items:center;min-height:200px}
.hero-wizual::before{content:"";position:absolute;width:min(86%,430px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(109,61,245,.55),rgba(109,61,245,.12) 62%,transparent 72%)}
.m-duza{position:relative;width:clamp(150px,34vw,330px)}
.bab{position:absolute;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--karta);box-shadow:0 0 0 2px var(--ak,var(--lnk)),0 16px 30px -14px rgba(0,0,0,.8);color:var(--ak,var(--lnk));animation:plyn 5s ease-in-out infinite alternate}
.bab.b1{--ak:#C4BEFF;left:6%;top:8%}
.bab.b2{--ak:#FFB98A;right:4%;top:22%;animation-delay:-1.6s}
.bab.b3{--ak:#5EEAD4;left:14%;bottom:6%;animation-delay:-3.2s}
@keyframes plyn{from{transform:translateY(0)}to{transform:translateY(-9px)}}

/* demo: okno z trzema zakladkami */
.demo-ramka{position:relative;max-width:980px;margin:clamp(58px,9vw,90px) auto 0}
.m-demo{position:absolute;right:18px;bottom:calc(100% - 2px);width:clamp(76px,14vw,140px);z-index:2}
.blok .podpis-okna{text-align:center;margin-top:14px}
.zakladki{gap:6px;margin-inline:0}
.zakladki button{cursor:pointer;background:transparent;color:var(--okno-t2);box-shadow:inset 0 0 0 1.5px rgba(143,214,255,.38);transition:background .2s,color .2s}
.zakladki button:hover{background:rgba(143,214,255,.14);color:#fff}
.zakladki button[aria-selected=true]{background:var(--ekran);color:var(--ink);box-shadow:none}
.okno .panel{padding:18px}
.okno .kol-ai .et-ai{font-family:var(--f-nag);font-size:1rem}
.pisz{display:grid;min-height:0}
.pisz>span{grid-area:1/1}
.pisz-rez{visibility:hidden}
.bania{max-width:none}

/* porownanie: tabela z zielonym znakiem i wyroznionym slupkiem pelnej wersji */
.por-ramka{max-width:860px;margin-inline:auto}
.por{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.por th,.por td{padding:13px 14px;text-align:center;vertical-align:middle;font-size:1.0625rem;line-height:1.5;background:var(--karta);color:var(--tekst-2)}
.por tbody th{text-align:left;color:var(--atr);font-weight:700;width:46%}
.por thead th{background:var(--karta-2);color:var(--atr);font-weight:700;font-size:1rem;border-bottom:2px solid var(--linia-2)}
.por thead th:first-child{border-top-left-radius:14px}
.por thead tr:nth-child(2) th:last-child{border-top-right-radius:0}
.por tbody tr+tr>*{border-top:1px solid var(--linia)}
.por tbody tr:last-child th{border-bottom-left-radius:14px}
.por tbody tr:last-child td:last-child{border-bottom-right-radius:14px}
.por .por-etyk td:nth-child(1),.por .por-etyk td:nth-child(2){background:transparent;padding:0}
.por .por-etyk th{background:var(--marka);color:#fff;border-radius:12px 12px 0 0;padding:7px 10px;font-size:.9375rem;letter-spacing:.01em;border-bottom:0}
.por td.por-pelna,.por thead tr:nth-child(2) th.por-pelna{background:#3A2C93;color:var(--atr);font-weight:600;box-shadow:inset 3px 0 0 var(--marka),inset -3px 0 0 var(--marka)}
.por thead tr:nth-child(2) th.por-pelna{border-bottom:2px solid var(--lnk)}
.por tbody tr:last-child td.por-pelna{box-shadow:inset 3px 0 0 var(--marka),inset -3px 0 0 var(--marka),inset 0 -3px 0 var(--marka);border-bottom-right-radius:14px;border-bottom-left-radius:0}
.por tbody tr:last-child td.por-pelna{color:var(--cena);font-weight:800}
.por tbody tr:nth-child(even) td:not(.por-pelna),.por tbody tr:nth-child(even) th{background:#2B2468}
.por tbody tr:nth-child(even) td.por-pelna{background:#42339F}
.tak{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ok);color:#06210F}
.tak .i-s{width:18px;height:18px}
.brak{display:inline-block;width:16px;height:3px;border-radius:2px;background:#A9A3D6;vertical-align:middle}
.przyciski-sr{justify-content:center;margin-top:30px;gap:18px 28px}
.przyciski-sr .link{font-size:1.0625rem;padding:12px 4px}

/* role: osiem kart */
.role{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.karta-roli{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--karta);border-radius:18px;padding:16px 14px 16px;box-shadow:0 0 0 1px var(--linia-2),0 18px 34px -24px rgba(0,0,0,.7);position:relative;overflow-wrap:break-word;min-width:0;transition:transform .2s,box-shadow .2s}
.karta-roli:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--ak),0 22px 38px -24px rgba(0,0,0,.8)}
.rola-ik{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.08);color:var(--ak);box-shadow:inset 0 0 0 2px var(--ak);margin-bottom:8px}
.rola-nazwa{font-family:var(--f-nag);font-weight:800;font-size:1.5rem;line-height:1.1;color:var(--ak)}
.karta-roli h3{font-size:1.125rem;margin-top:2px}
.karta-roli p{color:var(--tekst-2);font-size:1rem;line-height:1.5}
.znaczek{margin-top:auto;padding-top:0;align-self:flex-start;font-size:.9375rem;font-weight:700;line-height:1.3;color:var(--ok);background:rgba(94,229,154,.14);border-radius:8px;padding:5px 9px;box-shadow:inset 0 0 0 1px rgba(94,229,154,.5)}
.karta-roli p+.znaczek{margin-top:10px}
.karta-roli:not(:has(.znaczek)) p{padding-bottom:0}

/* krok: sam tytul, karty nizsze */
.kroki li h3{font-size:1.25rem;line-height:1.3;padding-right:34px}
.kroki li{gap:4px;padding-bottom:22px}
.start-zakup{background:var(--tlo)}
.start .przyciski-sr{margin-top:34px}

.blok .karta-form{margin-inline:auto;margin-top:0}
.blok .faq{max-width:780px;margin-inline:auto}
.blok .faq details p{max-width:none}

@media (min-width:720px){
  .role{gap:18px}
  .karta-roli{padding:20px 18px 20px}
  .rola-ik{width:56px;height:56px}
  .por th,.por td{padding:15px 18px}
  .okno .panel{padding:24px;gap:26px}
}
@media (min-width:900px){
  .role{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1000px){
  .hero-v14 .hero-siatka{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}
  .hero-v14{padding-top:72px;padding-bottom:96px}
  .m-duza{width:330px}
  .bab{width:68px;height:68px}
}
@media (max-width:719px){
  .hero-wizual{min-height:210px;margin-top:8px}
  .bab{width:50px;height:50px;border-radius:14px}
  .bab .i-k{width:24px;height:24px}
  .zakladki{order:3;width:100%;justify-content:stretch}
  .zakladki button{flex:1 1 0;min-width:0;justify-content:center;padding:0 6px;gap:5px}
  .zakladki .i{display:none}
  .okno-gora{row-gap:8px}
  .status{margin-left:auto}
  .por th,.por td{padding:10px 7px;font-size:1rem;line-height:1.4}
  .por tbody th{width:40%;font-size:1rem}
  .por thead th{font-size:.9375rem}
  .por td{overflow-wrap:break-word;hyphens:manual}
  .tak{width:26px;height:26px}
  .rola-nazwa{font-size:1.375rem}
  .karta-roli h3{font-size:1.0625rem}
}
@media (max-width:719px){.m-demo{display:none}.demo-ramka{margin-top:0}}