:root{--bg:#F4F7FD;--card:#fff;--ink:#0B1B3F;--mut:#55627F;--acc:#2F5BFF;--acc2:#1B3FCC;--soft:#E0EAFF;--line:#DCE4F3;--r:22px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font:16px/1.65 'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque',sans-serif;line-height:1.08;letter-spacing:-.03em;font-weight:800}
.w{max-width:1120px;margin:auto;padding:0 24px}
section{padding:88px 0}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
h2{font-size:clamp(30px,4vw,44px);margin-bottom:16px}
.sub{color:var(--mut);font-size:18px;max-width:620px;margin-bottom:44px}
.btn{display:inline-flex;gap:8px;align-items:center;background:var(--acc);color:#fff;padding:15px 28px;border-radius:14px;font:700 15px 'DM Sans';border:0;cursor:pointer;text-decoration:none;transition:.25s}
.btn:hover{background:var(--acc2);transform:translateY(-2px);box-shadow:0 12px 28px #2f5bff40}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}.btn.ghost:hover{background:#fff;box-shadow:none}
/* NAV */
.logo{font-size:21px}.logo i{color:var(--acc);font-style:normal}
.nav ul{display:flex;gap:28px;list-style:none;font-weight:500;font-size:15px}.nav a{color:inherit;text-decoration:none}.nav ul a:hover{color:var(--acc)}
/* HERO */
.hero{padding:72px 0 96px;background:radial-gradient(900px 400px at 85% 0,#dbe6ff,transparent 70%)}
.hero .w{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.pill{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:99px;font-size:13px;font-weight:500;margin-bottom:22px}
.pill:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e}
h1{font-size:clamp(38px,5.6vw,68px);margin-bottom:22px}h1 span{background:linear-gradient(90deg,var(--acc),#6aa0ff);-webkit-background-clip:text;color:transparent}
.hero p.lead{font-size:19px;color:var(--mut);max-width:520px;margin-bottom:30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .proof{margin-top:34px;display:flex;gap:28px;color:var(--mut);font-size:14px}.proof b{display:block;color:var(--ink);font:800 26px 'Bricolage Grotesque'}
.photo{aspect-ratio:4/5;border-radius:36px;background:linear-gradient(155deg,#cfdeff,#8fb0ff 60%,#4f78ff);display:grid;place-items:center;color:#fff;font-weight:500;position:relative}
.photo .badge{position:absolute;left:-22px;bottom:34px;background:#fff;color:var(--ink);padding:12px 18px;border-radius:16px;box-shadow:0 14px 34px #0b1b3f22;font-size:14px;font-weight:700}
.photo .badge2{position:absolute;right:-14px;top:30px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;font-size:13px}
/* GRIDS */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #0b1b3f12}
.card h3{font-size:22px;margin:14px 0 8px}.card p{color:var(--mut);font-size:15px}
.ico{width:46px;height:46px;border-radius:13px;background:var(--soft);display:grid;place-items:center;font:800 16px "Bricolage Grotesque";color:var(--acc)}
/* WORK */
.work .thumb{aspect-ratio:16/10;border-radius:14px;background:linear-gradient(135deg,#dbe6ff,#a9c1ff);display:grid;place-items:center;color:#3b5bb5;font-size:14px;margin-bottom:18px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.tags span{font-size:12px;font-weight:700;background:var(--soft);color:var(--acc2);padding:4px 10px;border-radius:99px}
/* PROCESS */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding-top:20px;border-top:2px solid var(--line)}.step:before{counter-increment:s;content:"0" counter(s);font:800 34px 'Bricolage Grotesque';color:var(--acc);display:block;margin-bottom:8px}
.step h3{font-size:19px;margin-bottom:6px}.step p{color:var(--mut);font-size:15px}
/* ABOUT */
.about .w{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.about .photo{aspect-ratio:1;border-radius:36px 36px 140px 36px}
.quote{margin-top:26px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:16px;padding:22px}.quote small{display:block;margin-top:8px;color:var(--mut)}
/* FAQ */
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between}summary:after{content:"+";color:var(--acc);font-size:22px;line-height:1}
details[open] summary:after{content:"–"}details p{color:var(--mut);margin-top:12px}
/* CONTACT */
.contact{background:linear-gradient(135deg,var(--acc),#16349f);color:#fff;border-radius:40px;margin:0 16px;padding:72px 0}
.contact .w{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.contact p{opacity:.85}.contact h2{color:#fff}
form{background:#fff;color:var(--ink);padding:30px;border-radius:var(--r);display:grid;gap:14px}
label{font-size:13px;font-weight:700}input,textarea{width:100%;margin-top:6px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);font:16px 'DM Sans';background:var(--bg)}input:focus,textarea:focus{outline:0;border-color:var(--acc)}
form small{color:var(--mut);font-size:12px}
footer{padding:40px 0;color:var(--mut);font-size:14px}footer .w{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}.hero{position:relative}.hero .w{position:relative}
.bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:fl 14s ease-in-out infinite}
.bg i:nth-child(1){width:380px;height:380px;background:#9db8ff;left:-80px;top:40px}
.bg i:nth-child(2){width:300px;height:300px;background:#6aa0ff;right:10%;top:-60px;animation-delay:-5s}
.bg i:nth-child(3){width:260px;height:260px;background:#c9d9ff;right:-60px;bottom:-40px;animation-delay:-9s}
.bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#2f5bff12 1px,transparent 1px),linear-gradient(90deg,#2f5bff12 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%)}
@keyframes fl{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}
.hform{background:#fff;border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:0 30px 70px #2f5bff22}
.hf-top{display:flex;gap:14px;align-items:center;margin-bottom:18px}.hf-top b{display:block}.hf-top span{font-size:13px;color:var(--mut)}
.avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(155deg,#cfdeff,#4f78ff);color:#fff;font-size:10px;line-height:1.2;display:grid;place-items:center;text-align:center;flex:none;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--soft)}
.hform .hf-title{font:800 24px/1.1 "Bricolage Grotesque";letter-spacing:-.03em;margin-bottom:16px}.hform form{padding:0;box-shadow:none;border-radius:0;gap:12px}
.btn{position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);animation:sh 4s infinite}
@keyframes sh{0%,60%{left:-120%}100%{left:140%}}
.pill:before{animation:pu 2s infinite}@keyframes pu{0%{box-shadow:0 0 0 0 #22c55e80}100%{box-shadow:0 0 0 10px #22c55e00}}
.js [data-anim]{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.js [data-anim].in{opacity:1;transform:none}
.car-wrap{position:relative}.car{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 24px;scrollbar-width:none;cursor:grab}.car::-webkit-scrollbar{display:none}.car.drag{cursor:grabbing;scroll-snap-type:none}
.slide{flex:0 0 min(380px,82%);scroll-snap-align:start;user-select:none}.slide .thumb{pointer-events:none}
.car-nav{display:flex;gap:10px;margin-top:8px}.car-nav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:18px;cursor:pointer;transition:.2s}.car-nav button:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js [data-anim]{opacity:1;transform:none}}


.svc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.dr{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;transition:.3s}.dr.open{border-color:var(--acc);box-shadow:0 14px 34px #2f5bff1f}
.dr-h{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:20px 24px;cursor:pointer;font:700 18px 'Bricolage Grotesque'}
.dr-h .n{color:var(--acc);font-size:14px}.dr-h em{margin-left:auto;width:12px;height:12px;border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg);transition:.3s}.dr.open em{transform:rotate(-135deg)}
.dr-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}.dr.open .dr-b{grid-template-rows:1fr}.dr-b>div{overflow:hidden;padding:0 24px}
.dr.open .dr-b>div{padding-bottom:22px}.dr-b p{color:var(--mut);font-size:15px;margin-bottom:10px}.dr-b a{color:var(--acc);font-weight:700;text-decoration:none;font-size:14px}
.stage{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin:auto;--r:clamp(120px,19vw,215px)}
.ring{position:absolute;border:1.5px dashed #2f5bff40;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.r1{width:calc(var(--r)*2)}.r1{height:calc(var(--r)*2)}.r2{width:calc(var(--r)*1.35);height:calc(var(--r)*1.35);border-color:#2f5bff22}
.lap{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-55%);animation:bob 5s ease-in-out infinite}@keyframes bob{50%{transform:translate(-50%,-62%)}}
.scr{background:var(--ink);border:5px solid #1c2c55;border-radius:12px 12px 4px 4px;aspect-ratio:16/10;padding:8px;box-shadow:0 24px 50px #0b1b3f40;overflow:hidden}
.bar{display:flex;gap:3px;margin-bottom:6px}.bar b{width:5px;height:5px;border-radius:50%;background:#46598f}
.code i{display:block;height:4px;border-radius:3px;background:#46598f;margin:5px 0;animation:cd 3s ease-in-out infinite}.code i:nth-child(1){width:55%}.code i:nth-child(2){width:80%;background:var(--acc);animation-delay:.3s}.code i:nth-child(3){width:40%;animation-delay:.6s}.code i:nth-child(4){width:70%;animation-delay:.9s}.code i:nth-child(5){width:30%;background:#6aa0ff;animation-delay:1.2s}
@keyframes cd{50%{opacity:.35;transform:translateX(5px)}}
.mock{display:flex;gap:5px;margin-top:8px}.mock span{flex:1;height:18px;border-radius:5px;background:#1c2c55}.mock span:first-child{background:var(--acc)}
.base{height:9px;width:112%;margin-left:-6%;background:linear-gradient(#c9d3ea,#a9b6d6);border-radius:0 0 14px 14px}
.orbit{position:absolute;inset:0;animation:spin 36s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.o{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1*var(--a)))}
.oi{width:100%;height:100%;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--acc);display:grid;place-items:center;box-shadow:0 10px 24px #0b1b3f1a;animation:spin 36s linear infinite reverse;transition:.3s}
.oi svg{width:26px;height:26px}.o.on .oi{background:var(--acc);color:#fff;box-shadow:0 0 0 8px #2f5bff22,0 14px 30px #2f5bff55}
.stage:hover .orbit,.stage:hover .oi{animation-play-state:paused}
.scroll-cue{display:none}
.hero{padding-bottom:40px}.problem{padding-top:56px}
@media(max-width:860px){.svc{grid-template-columns:1fr}.o{width:48px;height:48px;margin:-24px}}


.problem{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cmp{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.side{border-radius:28px;padding:32px}.side .sh{display:flex;gap:16px;align-items:center;margin-bottom:22px}.side small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.side h3{font-size:22px;margin-top:2px}
.side ul{list-style:none;display:grid;gap:12px}.side li{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:16px}.side li b{display:block;font-size:16px}.side li p{font-size:14px}
.ic,.badge{flex:none;display:grid;place-items:center;border-radius:14px}.ic{width:46px;height:46px}.ic svg{width:22px;height:22px}.badge{width:54px;height:54px;border-radius:50%}.badge svg{width:26px;height:26px}
.bad{background:#FFF4F3;border:1.5px solid #F6CFCB}.bad small{color:#C0392B}.bad .badge{background:#E5483A;color:#fff;animation:wob 4s ease-in-out infinite}.bad li{background:#fff}.bad .ic{background:#FDE3E0;color:#D4402F}.bad li p{color:#7a5d5a}
.good{background:linear-gradient(150deg,#2F5BFF,#1B3FCC);color:#fff;box-shadow:0 30px 60px #2f5bff40;border:1.5px solid #5d80ff}.good small{color:#bcd0ff}.good .badge{background:#fff;color:var(--acc);animation:pu2 2.4s infinite}.good li{background:#ffffff1f}.good .ic{background:#fff;color:var(--acc)}.good li p{color:#dbe5ff}
.vsb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;font:800 15px 'Bricolage Grotesque';display:grid;place-items:center;z-index:2;box-shadow:0 0 0 6px #fff}
.pcta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:44px;color:var(--mut);font-size:14px}
@keyframes wob{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-12deg)}94%{transform:rotate(12deg)}}@keyframes pu2{0%{box-shadow:0 0 0 0 #ffffffaa}100%{box-shadow:0 0 0 14px #fff0}}
#uslugi{padding-bottom:32px}
.work{padding-top:72px;background:linear-gradient(180deg,#DCE7FF,#EBF1FF);position:relative;overflow:hidden}
.work:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#2f5bff26 1.5px,transparent 1.5px);background-size:26px 26px;animation:dots 30s linear infinite}@keyframes dots{to{background-position:260px 130px}}
.work .w{position:relative}
.thumb{background:linear-gradient(110deg,#dbe6ff 30%,#f1f6ff 50%,#dbe6ff 70%)!important;background-size:250% 100%!important;animation:shm 3.5s linear infinite}@keyframes shm{to{background-position:-250% 0}}
.step:after{content:"";position:absolute;top:-2px;left:0;height:2px;width:30%;background:var(--acc);animation:ln 4s ease-in-out infinite}@keyframes ln{0%{left:0}50%{left:70%}100%{left:0}}
.ring.r2{animation:spin 60s linear infinite reverse}.r1{animation:spin 90s linear infinite}
.about .photo{animation:flt 7s ease-in-out infinite}@keyframes flt{50%{transform:translateY(-10px) rotate(-1deg)}}
.contact{background-size:200% 200%;animation:gs 12s ease-in-out infinite}@keyframes gs{50%{background-position:100% 100%}}
.avatar{animation:pu3 3s infinite}@keyframes pu3{50%{box-shadow:0 0 0 4px #fff,0 0 0 11px var(--soft)}}
.card .ico,.dr-h .n{transition:.3s}
@media(max-width:860px){.cmp{grid-template-columns:1fr}.vsb{display:none}}


:root{--hot:#FFB224;--hot2:#F59E0B}
.btn.hot{background:var(--hot);color:var(--ink)}.btn.hot:hover{background:var(--hot2);box-shadow:0 12px 28px #ffb22466}
header.nav{position:sticky;top:0;z-index:20;padding-top:12px;pointer-events:none}
.pillnav{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 9px 0 14px;background:#ffffffe0;backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:99px;box-shadow:0 12px 34px #0b1b3f14}
.pillnav .btn{border-radius:99px;padding:12px 22px}
.lm{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:9px;border-radius:11px;background:linear-gradient(145deg,var(--acc),#1B3FCC);color:#fff;font-size:18px;vertical-align:middle;position:relative}
.lm:after{content:"";position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--hot);border:2px solid #fff;animation:pu 2.4s infinite}
.pillnav ul a{position:relative;padding:6px 0;transition:.2s}.pillnav ul a:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--hot);transform:scaleX(0);transform-origin:left;transition:.3s}
.pillnav ul a:hover:after,.pillnav ul a.act:after{transform:scaleX(1)}.pillnav ul a.act{color:var(--acc)}
.prog{position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);background:linear-gradient(90deg,var(--acc),var(--hot))}
h1 span{text-decoration:underline;text-decoration-color:var(--hot);text-decoration-thickness:7px;text-underline-offset:7px;text-decoration-skip-ink:none}
.vsb{background:var(--hot);color:var(--ink)}.quote{border-left-color:var(--hot)}
.o.on .oi{background:var(--hot);color:var(--ink);box-shadow:0 0 0 8px #ffb22440,0 14px 30px #ffb22466}
.ring{transform:none!important;left:calc(50% - var(--r));top:calc(50% - var(--r))}
.r1{width:calc(var(--r)*2);height:calc(var(--r)*2)}
.ring.r2{width:calc(var(--r)*1.35);height:calc(var(--r)*1.35);left:calc(50% - var(--r)*.675);top:calc(50% - var(--r)*.675)}
.hero{padding-top:44px}


.flow{background:#fff;border:1px solid var(--line);border-radius:32px;padding:34px;box-shadow:0 24px 60px #0b1b3f0f}
.track{position:relative;display:flex;justify-content:space-between;margin:6px 6px 34px}
.track:before,.fill{content:"";position:absolute;top:19px;left:20px;right:20px;height:4px;border-radius:4px;background:var(--line)}
.fill{right:auto;width:0;background:linear-gradient(90deg,var(--acc),var(--hot));transition:width .6s ease;z-index:1}
.nd{all:unset;box-sizing:border-box;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;font:700 14px 'DM Sans';color:var(--mut)}
.nd:before{content:attr(data-i);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font:800 16px 'Bricolage Grotesque';transition:.3s}
.nd[data-i="0"]:before{content:"\25B6";font-size:13px;padding-left:2px}
.nd:disabled{cursor:default;opacity:.55}.nd.done:before{background:var(--acc);border-color:var(--acc);color:#fff}
.nd.on{color:var(--ink)}.nd.on:before{background:var(--hot);border-color:var(--hot);color:var(--ink);box-shadow:0 0 0 8px #ffb22438;animation:pu3b 2.4s infinite}
@keyframes pu3b{50%{box-shadow:0 0 0 13px #ffb22418}}
.panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;min-height:300px;animation:pin .5s ease}
@keyframes pin{from{opacity:0;transform:translateY(14px)}}
.panel .big{font:800 90px/1 'Bricolage Grotesque';color:var(--soft);margin-bottom:-6px}.panel h3{font-size:32px;margin-bottom:10px}.panel .lead2{color:var(--mut);margin-bottom:22px}
.panel .meta{display:inline-block;background:var(--soft);color:var(--acc2);font-weight:700;font-size:13px;padding:5px 12px;border-radius:99px;margin-bottom:12px}
.pcards{display:grid;gap:12px}.pc{display:flex;gap:14px;padding:16px 18px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.pc i{flex:none;font:800 12px 'Bricolage Grotesque';font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);width:54px;padding-top:2px}.pc p{font-size:15px;color:var(--mut)}
.pc.res{background:var(--ink);border-color:var(--ink)}.pc.res i{color:var(--hot)}.pc.res p{color:#dbe5ff}
.nextb{margin-top:6px}.start{justify-content:center}
.pstart{grid-template-columns:1fr;text-align:center;justify-items:center}.pstart .lead2{max-width:480px}
.btn.hot.big2{padding:18px 40px;font-size:17px;animation:bounce 2.4s infinite}@keyframes bounce{0%,100%{transform:none}50%{transform:translateY(-5px)}}
footer.ft{background:var(--ink);color:#aab6d3;padding:64px 0 28px;margin-top:80px}.ft .logo{color:#fff;margin-bottom:12px}.ft .lm{margin-right:9px}
.ft-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #ffffff22}
.ft small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7d8db3;margin-bottom:12px;font-weight:700}
.ft a{display:block;color:#fff;text-decoration:none;margin-bottom:8px;transition:.2s}.ft a:hover{color:var(--hot)}.ft .mail{font:700 20px 'Bricolage Grotesque';color:var(--hot)}
.ft-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;padding-top:24px;font-size:14px}
.pp{all:unset;cursor:pointer;color:#fff;border:1px solid #ffffff44;padding:9px 18px;border-radius:99px;font:500 14px 'DM Sans';transition:.2s}.pp:hover{border-color:var(--hot);color:var(--hot)}
@media(max-width:860px){.panel,.ft-top{grid-template-columns:1fr}.track .nd span{display:none}.flow{padding:22px}}


.chat{background:var(--bg);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.chat-h{display:flex;gap:12px;align-items:center;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}.chat-h small{display:block;color:var(--mut);font-size:12px;position:relative;padding-left:12px}.chat-h small:before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:#22c55e}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,var(--acc),#1B3FCC);color:#fff;display:grid;place-items:center;font:800 15px 'Bricolage Grotesque'}
.chat-body{display:flex;flex-direction:column;gap:8px;padding:18px;min-height:300px}
.msg{position:relative;max-width:84%;padding:11px 16px;border-radius:20px;font-size:15px;line-height:1.45;animation:pop .3s ease}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}}
.msg.c{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:6px}
.msg.m{align-self:flex-start;margin-left:34px;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.m:before{content:attr(data-av);position:absolute;left:-34px;bottom:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,var(--acc),#1B3FCC);color:#fff;font:800 11px 'Bricolage Grotesque';display:grid;place-items:center}
.msg.res{background:var(--hot);border-color:var(--hot);color:var(--ink);font-weight:700}
.msg.typing{display:flex;gap:4px;padding:15px 16px}.typing span{width:7px;height:7px;border-radius:50%;background:#9aa7c4;animation:dt 1s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes dt{50%{transform:translateY(-5px);opacity:.5}}
.dr:last-child{margin-bottom:0}
@media(max-width:860px){.svc{gap:4px}.stage{aspect-ratio:auto;height:calc(var(--r)*2 + 60px);--r:112px;max-width:340px}.lap{width:140px}#uslugi{padding-bottom:24px}.chat-body{min-height:260px}}


.eyebrow:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--hot);animation:pu 2.6s infinite;vertical-align:middle}
#next{animation:nudge 3s infinite}@keyframes nudge{0%,70%,100%{transform:none}85%{transform:translateX(5px)}}
.quote{animation:fl2 6s ease-in-out infinite}@keyframes fl2{50%{transform:translateY(-5px)}}
details{transition:transform .25s,box-shadow .25s}details:hover{transform:translateX(5px);box-shadow:0 10px 24px #0b1b3f0f}
.vsb{animation:vw 4s ease-in-out infinite}@keyframes vw{50%{transform:translate(-50%,-50%) rotate(10deg) scale(1.07)}}


.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--hot);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.ft-cities{padding:26px 0;border-bottom:1px solid #ffffff22}.ft-cities ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none}.ft-cities li{border:1px solid #ffffff33;border-radius:99px;padding:6px 14px;font-size:14px;color:#cfd8ee}

/* hook pod animacje: dodaj klasę .in przez IntersectionObserver */

@media(max-width:860px){.hero .w,.about .w,.contact .w,.vs,.g2,.g3{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.nav ul{display:none}section{padding:64px 0}.photo .badge{left:8px}}

.admin-bar header.nav{top:32px}@media(max-width:782px){.admin-bar header.nav{top:46px}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
a.slide,a.card{color:inherit;text-decoration:none;display:block}
.thumb.has-img{background:none!important;animation:none!important;overflow:hidden;padding:0}.thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;-webkit-user-drag:none}
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}
.photo.has-img{background:none;overflow:hidden}.photo.has-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:16px 24px;border-radius:16px;box-shadow:0 20px 50px #0b1b3f55;font-weight:500;animation:toast 9s forwards}.toast.err{background:#C0392B}
@keyframes toast{0%{opacity:0;transform:translate(-50%,20px)}6%,90%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;visibility:hidden}}
.pagehead{padding:72px 0 24px}.pagehead h1{font-size:clamp(34px,5vw,56px)}
.entry{max-width:760px}.entry>*+*{margin-top:1.1em}.entry h2,.entry h3{margin-top:1.6em}.entry h2{font-size:30px}.entry h3{font-size:22px}.entry p,.entry li{color:#33415f;font-size:17px}.entry ul,.entry ol{padding-left:1.3em}.entry img{max-width:100%;height:auto;border-radius:18px}.entry a{color:var(--acc)}
.cs-hero{border-radius:28px;overflow:hidden;margin:28px 0 40px;border:1px solid var(--line)}.cs-hero img{width:100%;height:auto;display:block}
.cs-cta{margin:56px 0 0;background:linear-gradient(135deg,var(--acc),#16349f);color:#fff;border-radius:28px;padding:40px}.cs-cta h2{color:#fff;margin-bottom:10px;font-size:30px}.cs-cta p{opacity:.85;margin-bottom:20px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:88px}@media(max-width:860px){.cgrid{grid-template-columns:1fr}}
.back{display:inline-block;margin-top:40px;color:var(--acc);font-weight:700;text-decoration:none}
.ft-credit{opacity:.7}
.work .all{margin-top:20px}