/* problem pages (4.11) */
:root{--blue:#2a4bff;--gold:#ffd45e}
body.pp{overflow-x:hidden}
.pp .top{position:sticky;top:0;z-index:20;background:rgba(2,4,15,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:99px;font-weight:600;color:#fff;text-decoration:none;font-size:1rem;background:linear-gradient(135deg,#3b5bff,#1b2fd0);box-shadow:0 10px 40px -8px rgba(42,75,255,.8),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 50px -8px rgba(42,75,255,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.sm{padding:10px 18px;font-size:.9rem}
.pp main{max-width:1180px;padding:0 6vw 8vh}
.pp em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;background:linear-gradient(90deg,#c9d3ff,#6b8cff);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em .14em 0;margin-bottom:-.14em}
.pp h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;letter-spacing:-.04em;margin:0 0 22px}
.pp h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 4vh}
.pp h3{font-family:'Bricolage Grotesque',Arial,sans-serif;font-size:1.3rem;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:#fff}
.hero{position:relative;display:grid;gap:5vw;align-items:center;min-height:calc(100svh - 70px);padding:8vh 0 6vh}
@media(min-width:900px){.hero{grid-template-columns:1.15fr 1fr}}
.glow{position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;right:-25vw;top:-20vw;border-radius:50%;background:radial-gradient(circle,rgba(42,75,255,.42),transparent 64%);pointer-events:none;z-index:-1;animation:gl 9s ease-in-out infinite alternate}
@keyframes gl{to{transform:translate(-6vw,6vw) scale(1.15)}}
.kick{color:var(--glow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;margin-bottom:18px}
.lead{font-size:1.2rem;color:#d4ddff;max-width:600px}
.hb{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:34px}
.note{color:var(--mut);font-size:.95rem}
.vis{position:relative;border-radius:30px;padding:4%;background:linear-gradient(160deg,rgba(32,52,170,.5),rgba(4,8,34,.9));border:1px solid rgba(150,175,255,.25);box-shadow:0 40px 120px -40px rgba(42,75,255,.8)}
.vis svg{display:block;width:100%;height:auto;overflow:visible}
.sec{padding:12vh 0 0}
.sub{color:var(--mut);max-width:460px;font-size:1.08rem}
.pains{list-style:none;padding:0;display:grid;gap:16px}
@media(min-width:900px){.pains{grid-template-columns:repeat(3,1fr)}}
.pc{--mx:50%;--my:50%;position:relative;overflow:hidden;margin:0;padding:30px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(170deg,rgba(14,22,70,.6),rgba(3,6,25,.85));transition:border-color .3s,transform .3s}
.pc::before,.cz::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(107,140,255,.22),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.pc:hover,.cz:hover,.pc.focus,.cz.focus{border-color:rgba(150,175,255,.5)}.pc:hover::before,.cz:hover::before,.pc.focus::before,.cz.focus::before{opacity:1}
.pc .pn{display:block;font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(150,175,255,.45);margin-bottom:22px}
.pc p{font-size:1.15rem;color:#e3e9ff;margin:0}
.czs{display:grid;gap:16px}
@media(min-width:900px){.czs{grid-template-columns:repeat(3,1fr)}}
.cz{--mx:50%;--my:50%;position:relative;overflow:hidden;padding:30px;border-radius:26px;border:1px solid var(--line);background:rgba(14,22,70,.35);transition:border-color .3s}
.cz h3{position:relative;padding-top:52px}
.cz h3::before{content:"";position:absolute;left:0;top:0;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#4a68ff,#1b2fd0);box-shadow:0 10px 26px -8px rgba(42,75,255,.9)}
.cz h3::after{content:"!";position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;color:#fff}
.cz p{margin:0}
.steps2{list-style:none;padding:0;display:grid;gap:16px;counter-reset:none;position:relative}
@media(min-width:900px){.steps2{grid-template-columns:repeat(4,1fr)}.steps2::before{content:"";position:absolute;left:24px;right:24px;top:28px;height:2px;background:linear-gradient(90deg,var(--blue),rgba(107,140,255,.2));z-index:-1}}
.st{margin:0;padding:0 6px}
.st .sn{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#050b2e;border:2px solid var(--glow);font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:1.3rem;color:#fff;margin-bottom:18px;box-shadow:0 0 0 8px rgba(42,75,255,.12)}
.st:last-child .sn{background:var(--blue);border-color:var(--blue)}
.st p{margin:0}
.split{display:grid;gap:5vw}
@media(min-width:900px){.split{grid-template-columns:1fr 1.1fr;align-items:start}}
.checks{list-style:none;padding:0;display:grid;gap:12px}
@media(min-width:600px){.checks{grid-template-columns:1fr 1fr}}
.checks li{display:flex;gap:14px;align-items:flex-start;margin:0;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:rgba(14,22,70,.35);color:#e3e9ff}
.checks i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-style:normal;font-size:.8rem;font-weight:700;color:#fff;margin-top:1px}
.faq2 .qa{border-top:1px solid var(--line)}
.faq2 summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:700;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.02em;color:#fff;transition:color .3s}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary:hover{color:var(--glow)}
.faq2 summary i{flex:none;position:relative;width:34px;height:34px;border-radius:50%;border:1px solid rgba(150,175,255,.35);transition:transform .35s,background .3s}
.faq2 summary i::before,.faq2 summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#fff;border-radius:2px}
.faq2 summary i::after{transform:rotate(90deg);transition:transform .35s}
.faq2 .qa[open] summary i{background:var(--blue);transform:rotate(180deg)}.faq2 .qa[open] summary i::after{transform:rotate(0)}
.faq2 .qa p{padding:0 50px 24px 0;margin:0;animation:fq .45s ease}
@keyframes fq{from{opacity:0;transform:translateY(-8px)}}
.ctab2{position:relative;overflow:hidden;isolation:isolate;margin-top:14vh;padding:clamp(34px,6vw,80px);border-radius:34px;text-align:center;background:linear-gradient(160deg,#0a1a9a,#050b2e 70%);border:1px solid rgba(150,175,255,.3)}
.ctab2 .glow{left:50%;right:auto;top:-30%;margin-left:-35vw}
.ctab2 h2{margin-bottom:16px}.ctab2 p{color:#d4ddff;max-width:520px;margin:0 auto 30px}
.rels{display:grid;gap:12px}
@media(min-width:700px){.rels{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.rl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-radius:20px;border:1px solid var(--line);background:rgba(14,22,70,.35);color:#fff;text-decoration:none;font-weight:600;transition:border-color .3s,transform .3s,background .3s}
.rl b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(150,175,255,.4);transition:background .3s,transform .4s}
.rl:hover,.rl.focus{border-color:var(--glow);background:rgba(42,75,255,.15)}.rl:hover b,.rl.focus b{background:var(--blue);transform:rotate(-45deg)}
.gd{margin-top:28px;color:var(--mut)}.gd a{margin-right:16px}
.pp .fl{margin-top:12vh}
.wm2{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:clamp(3.4rem,17vw,16rem);letter-spacing:-.05em;line-height:.85;text-align:center;background:linear-gradient(180deg,#fff 10%,#5b78ff 75%,#2a4bff);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 4vh;padding-bottom:.08em}
/* reveal */
.js [data-r]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.js [data-r].in{opacity:1;transform:none}
/* hero visuals */
.v-strona-internetowa .cur{animation:cur 5s ease-in-out infinite}
@keyframes cur{0%{transform:translate(150px,190px)}35%{transform:translate(110px,160px)}55%{transform:translate(110px,160px)}100%{transform:translate(330px,250px)}}
.v-strona-internetowa .q{transform-box:fill-box;transform-origin:center;animation:qp 5s ease-in-out infinite}
@keyframes qp{0%,40%{transform:scale(0)}50%{transform:scale(1.2)}58%,90%{transform:scale(1)}100%{transform:scale(0)}}
.v-strona-internetowa .bl{animation:blk 5s ease-in-out infinite}
@keyframes blk{35%,50%{opacity:.55}}
.v-wizytowka-google .pin{transform-box:fill-box;transform-origin:50% 100%;animation:pin 3.6s ease-in-out infinite}
.v-wizytowka-google .p2{animation-delay:.3s}.v-wizytowka-google .p3{animation-delay:.6s}
@keyframes pin{0%,100%{transform:translateY(0)}15%{transform:translateY(-14px)}30%{transform:translateY(0)}}
.v-wizytowka-google .typ{transform-box:fill-box;transform-origin:left;animation:typ 3.6s steps(12) infinite}
@keyframes typ{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
.v-wizytowka-google .you{transform-box:fill-box;transform-origin:center;animation:you 3.6s ease-in-out infinite}
@keyframes you{0%,100%{opacity:.35}50%{opacity:1}}
.v-system-opinii .s{transform-box:fill-box;transform-origin:center;animation:st 3s ease-in-out infinite}
.v-system-opinii .s1{animation-delay:.12s}.v-system-opinii .s2{animation-delay:.24s}.v-system-opinii .s3{animation-delay:.36s}.v-system-opinii .s4{animation-delay:.48s}
@keyframes st{0%,100%{transform:scale(1)}30%{transform:scale(1.25) rotate(-8deg);filter:drop-shadow(0 0 8px rgba(255,212,94,.8))}}
.v-system-opinii .bub{transform-box:fill-box;transform-origin:left bottom;animation:bub 3s ease-in-out infinite}
@keyframes bub{0%,20%{transform:scale(0)}35%{transform:scale(1.1)}45%,85%{transform:scale(1)}100%{transform:scale(0)}}
.v-automatyzacja .msg{transform-box:fill-box;animation:msg 4.2s ease-out infinite}
.v-automatyzacja .m2{animation-delay:.5s}.v-automatyzacja .m3{animation-delay:1s}
@keyframes msg{0%{opacity:0;transform:translateY(12px)}12%,70%{opacity:1;transform:none}100%{opacity:.25}}
.v-automatyzacja .h{transform-origin:252px 176px;animation:spin 6s linear infinite}.v-automatyzacja .mm{transform-origin:252px 176px;animation:spin 1.5s linear infinite}
.v-automatyzacja .dot{transform-box:fill-box;transform-origin:center;animation:you 1.4s ease-in-out infinite}
.v-social-media-i-reklamy .heart{transform-box:fill-box;transform-origin:center;animation:hrt 3.2s ease-out infinite}
.v-social-media-i-reklamy .h2{animation-delay:1.1s}
@keyframes hrt{0%{opacity:0;transform:translateY(20px) scale(.6)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1.1)}}
.v-social-media-i-reklamy .cnt{animation:you 3.2s ease-in-out infinite}
.v-dla-dj .sat{animation:sat 2.4s ease-in-out infinite}
@keyframes sat{0%,100%{fill-opacity:.4}50%{fill-opacity:1;filter:drop-shadow(0 0 6px rgba(255,212,94,.7))}}
.v-dla-dj .e{transform-box:fill-box;transform-origin:50% 100%;animation:eq .9s ease-in-out infinite}
.v-dla-dj .e1{animation-delay:.15s}.v-dla-dj .e2{animation-delay:.3s}.v-dla-dj .e3{animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:899px){.hero .glow{right:-6vw}.hero{min-height:0;padding:6vh 0 2vh}.sec{padding-top:9vh}.pc,.cz{padding:24px}}
@media(prefers-reduced-motion:reduce){.pp *{animation:none!important;transition:none!important}.js [data-r]{opacity:1;transform:none}}
.pp main{max-width:1300px}
@media(min-width:900px){.pp h1{font-size:clamp(2.8rem,4.9vw,5rem)}.hero{grid-template-columns:1.2fr 1fr;gap:4vw}}
.ctab2{margin-top:10vh}.pp .fl{margin-top:9vh}
.wm2{flex-basis:100%;width:100%;display:block;text-align:center}
.about .cz h3::after{content:"✓"}