/* COS — animowana instrukcja konta (scope .cosi) */
.cosi{--ind:#450DFF;--ind2:#360BCE;--mint:#6CD9AF;--mintT:#DFF6EC;--yel:#FFE80D;--ink:#272624;--line:#E8E7E2;--soft:#F1EDFF;
  font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);max-width:1240px;margin:0 auto;padding:clamp(40px,7vw,90px) clamp(16px,4vw,40px)}
.cosi *{box-sizing:border-box}
.cosi .cosi-head{text-align:center;max-width:760px;margin:0 auto 34px}
.cosi .cosi-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ind);background:#ECE6FF;padding:6px 12px;border-radius:999px}
.cosi h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-.03em;margin:.4em 0 .3em;font-weight:800}
.cosi h2 span{color:var(--ind)}
.cosi .cosi-head p{color:#5d5c58;font-size:1.05rem;line-height:1.55;margin:0}
.cosi .cosi-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.cosi .cosi-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cosi .cosi-steps li{border-radius:16px;border:1px solid transparent;cursor:pointer;padding:10px 12px;display:grid;grid-template-columns:34px 1fr;gap:12px;transition:background .2s,border-color .2s}
.cosi .cosi-steps li:hover{background:#fff}
.cosi .cosi-steps .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:#fff;border:2px solid var(--line);transition:all .2s}
.cosi .cosi-steps h3{margin:5px 0 0;font-size:1rem;letter-spacing:-.01em}
.cosi .cosi-steps p{margin:4px 0 0;font-size:.88rem;line-height:1.45;color:#6b6a66;display:none}
.cosi .cosi-steps .bar{grid-column:2;height:3px;border-radius:3px;background:var(--line);overflow:hidden;display:none;margin-top:8px}
.cosi .cosi-steps .bar i{display:block;height:100%;width:0;background:var(--ind)}
.cosi .cosi-steps li.on{background:#fff;border-color:var(--line);box-shadow:0 14px 30px -20px rgba(0,0,0,.25)}
.cosi .cosi-steps li.on .n{background:var(--ind);border-color:var(--ind);color:#fff}
.cosi .cosi-steps li.on p,.cosi .cosi-steps li.on .bar{display:block}
.cosi .cosi-steps li.done .n{background:var(--mint);border-color:var(--mint);color:#0B6B45}
.cosi .cosi-screen{position:sticky;top:90px;min-width:0}
.cosi .cosi-browser{border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(39,38,36,.5);overflow:hidden}
.cosi .cosi-chrome{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F3F2EF;border-bottom:1px solid var(--line)}
.cosi .cosi-chrome .d{display:flex;gap:6px}
.cosi .cosi-chrome .d i{width:11px;height:11px;border-radius:50%;background:#E0DED8}
.cosi .cosi-chrome .d i:nth-child(1){background:#FF6159}
.cosi .cosi-chrome .d i:nth-child(2){background:#FFBD2E}
.cosi .cosi-chrome .d i:nth-child(3){background:#28C941}
.cosi .cosi-url{flex:1;min-width:0;background:#fff;border-radius:999px;padding:6px 14px;font-size:.8rem;color:#6b6a66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cosi .cosi-url b{color:var(--ink);font-weight:600}
.cosi .cosi-vp{position:relative;width:100%;aspect-ratio:1200/920;overflow:hidden;background:#F7F7F6}
.cosi .cosi-canvas{position:absolute;left:0;top:0;width:1200px;height:920px;transform-origin:0 0}
.cosi .cosi-ctrl{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.cosi .cosi-ctrl button{font:inherit;font-weight:700;font-size:.88rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink)}
.cosi .cosi-ctrl button.pri{background:var(--ind);color:#fff;border-color:var(--ind)}
.cosi .cosi-ctrl button:hover{border-color:var(--ind)}
.cosi .cosi-ctrl .cap{margin-left:auto;font-size:.82rem;color:#8a8984}
.cosi .cosi-canvas{background:#F7F7F6;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:16px;line-height:1.65;color:#3a3a3a}
.cosi .cosi-canvas .dm{font-family:"DM Sans","Segoe UI",system-ui,sans-serif}
.cosi .m-top{height:96px;background:#fff;display:flex;align-items:center;padding:0 40px;box-shadow:0 1px 0 #ececea}
.cosi .m-logo{width:40px;height:48px;display:block}
.cosi .m-nav{display:flex;gap:14px;margin-left:auto;align-items:center;white-space:nowrap;font-family:"DM Sans",sans-serif;font-size:14.5px;color:#262262}
.cosi .m-nav .acc{display:flex;align-items:center;gap:6px;padding:2px 4px;border-radius:6px}
.cosi .m-nav .acc svg{width:17px;height:17px}
.cosi .m-cart{position:relative;margin-left:16px;width:22px;height:22px}
.cosi .m-cart b{position:absolute;right:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#262262;color:#fff;font-size:10px;line-height:16px;text-align:center;font-family:"DM Sans",sans-serif}
.cosi .m-body{position:absolute;left:0;right:0;top:96px;bottom:0;display:flex;gap:24px;padding:26px 50px 0}
.cosi .m-side{width:330px;flex:none;display:flex;flex-direction:column;gap:12px;font-family:"DM Sans","Segoe UI",system-ui,sans-serif}
.cosi .m-side a{flex:none;position:relative;display:block;padding:11px 18px 9px;border:1px solid #E8E7E2;border-radius:16px;background:#fff;color:#272624;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;box-shadow:-3px 0 0 -1px #F7F7F6,-4px 0 0 -1px #E2E1DD,3px 0 0 -1px #F7F7F6,4px 0 0 -1px #E2E1DD,0 -3px 0 -1px #F7F7F6,0 -4px 0 -1px #E2E1DD}
.cosi .m-side a .t{display:block;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.01em}
.cosi .m-side a small{display:block;font-size:12.5px;color:#8a8986;font-weight:500;line-height:1.25;margin-top:2px}
.cosi .m-side a::after{content:"→";display:block;color:#450DFF;font-weight:800;font-size:21px;line-height:1;margin-top:4px}
.cosi .m-side a.on{border-color:#450DFF;background:linear-gradient(135deg,rgba(69,13,255,.07),rgba(69,13,255,.02)),#fff;box-shadow:0 8px 22px rgba(69,13,255,.12),-4px 0 0 -1px #E2E1DD,4px 0 0 -1px #E2E1DD}
.cosi .m-side a.on .t{color:#450DFF}
.cosi .m-side a.on::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:#450DFF;border-radius:0 3px 3px 0}
.cosi .m-side a.out{background:transparent;border-style:dashed;box-shadow:none;padding:11px 18px}
.cosi .m-side a.out .t{font-weight:600;color:#8a8986}
.cosi .m-side a.out::after{content:none}
.cosi .m-main{flex:1;min-width:0;position:relative}
.cosi .v{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .35s,visibility 0s .35s}
.cosi .v.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s}
.cosi .v.full{left:-354px}
.cosi .k-hello{font-family:"DM Sans",sans-serif;font-size:18.4px;margin:0 0 18px;color:#272624}
.cosi .k-hello .lo{font-size:13.8px;color:#8a8986;margin-left:5px}
.cosi .k-hello .lo a{color:#272624;text-decoration:none}
.cosi .k-lead{font-family:"DM Sans",sans-serif;margin:0 0 24px;color:#5b5a57;max-width:60ch;font-size:16px;line-height:1.65}
.cosi .k-lead b{color:#272624}
.cosi .cos-info{border:1px solid #E8E7E2;border-radius:22px;background:radial-gradient(120% 140% at 0% 0%,rgba(69,13,255,.05),transparent 55%),#fff;padding:6px;box-shadow:0 10px 30px rgba(39,38,36,.05);font-family:"DM Sans",sans-serif}
.cosi .cos-info-main{display:flex;gap:16px;align-items:flex-start;padding:20px 20px 18px;border-radius:18px;background:linear-gradient(135deg,#450DFF 0%,#360BCE 100%);color:#fff}
.cosi .cos-info-badge{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16)}
.cosi .cos-info-title{margin:0 0 5px;font-weight:800;font-size:18.5px;letter-spacing:-.01em;line-height:1.2}
.cosi .cos-info-text{margin:0;color:rgba(255,255,255,.92);line-height:1.5;font-size:15.5px}
.cosi .cos-info-text a{color:#1d1252;font-weight:800;text-decoration:none}
.cosi .cos-info-text b{color:#fff}
.cosi .cos-info-cta{display:inline-block;margin-top:14px;background:#FFE80D;color:#272624;font-weight:800;font-size:14.7px;padding:10px 20px;border-radius:999px;transition:transform .12s}
.cosi .cos-info-points{padding:16px 20px 10px}
.cosi .cos-info-sub{margin:0 0 10px;font-weight:800;font-size:15.2px;color:#272624}
.cosi .cos-info-row{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.cosi .cos-info-row+.cos-info-row{border-top:1px solid #E8E7E2}
.cosi .cos-info-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(69,13,255,.08);color:#450DFF}
.cosi .cos-info-row p{margin:0;line-height:1.5;color:#5b5a57;font-size:15px}
.cosi .cos-info-row p b{color:#272624}
.cosi .cos-h2{font-family:"DM Sans",sans-serif;font-weight:800;letter-spacing:-.02em;font-size:27px;margin:0 0 6px;display:inline-block;line-height:1.15;color:#272624;background:linear-gradient(#FFE80D,#FFE80D) no-repeat 0 100%/100% .28em;padding-bottom:.05em}
.cosi .cos-sub{font-family:"DM Sans",sans-serif;color:#5b5a57;font-size:16px;line-height:1.65;margin:8px 0 18px;max-width:60ch}
.cosi .cos-sciezki-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cosi .cos-sciezka{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;border:1.5px solid #E8E7E2;border-radius:20px;background:#fff;color:#272624;font-family:"DM Sans",sans-serif;transition:border-color .15s,box-shadow .15s,transform .15s}
.cosi .cos-sciezka.hov{border-color:#450DFF;box-shadow:0 10px 30px rgba(69,13,255,.12);transform:translateY(-3px)}
.cosi .cos-sciezka em{align-self:flex-start;background:#450DFF;color:#fff;font-style:normal;font-weight:700;font-size:12.5px;line-height:1;padding:7px 12px;border-radius:999px;margin-bottom:4px}
.cosi .cos-sciezka b{font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.2}
.cosi .cos-sciezka small{font-size:14px;color:#6b6a67;line-height:1.4}
.cosi .cos-sciezka u{text-decoration:none;margin-top:9px;color:#450DFF;font-weight:700;font-size:14.7px}
.cosi .w-h2{font-size:28px;font-weight:700;color:#3a3a3a;margin:0 0 10px;line-height:1.2}
.cosi .w-form{border:1px solid #dddddd;border-radius:5px;padding:20px;background:transparent}
.cosi .f{margin:0 0 14px}
.cosi .f label{display:block;font-size:15px;margin-bottom:4px;color:#3a3a3a}
.cosi .f label .rq{color:#e2401c}
.cosi .f .in{height:42px;border:1px solid #dddddd;border-radius:2px;background:#fafafa;padding:0 12px;display:flex;align-items:center;font-size:15px;color:#666;transition:border-color .2s}
.cosi .f .in.focus{border-color:#000;background:#fff}
.cosi .f .in.lock{background:#efefef;color:#8a8986;justify-content:space-between}
.cosi .f .in .caret{display:inline-block;width:1px;height:18px;background:#000;margin-left:1px;animation:cosiBlink 1s steps(1) infinite;visibility:hidden}
.cosi .f .in.focus .caret{visibility:visible}
@keyframes cosiBlink{50%{opacity:0}}
.cosi .w-btn{display:inline-block;background:#450dff;color:#f7f7f6;font-weight:700;font-size:15px;line-height:1;padding:12px 18px;border-radius:3px;transition:transform .12s}
.cosi .w-btn.sm{font-size:15px;padding:9px 0;width:255px;text-align:center;border-radius:2px}
.cosi .w-row{display:flex;align-items:center;gap:14px;font-size:15px}
.cosi .w-row .chk{display:inline-flex;align-items:center;gap:6px}
.cosi .w-row .chk i{width:13px;height:13px;border:1px solid #767676;border-radius:2px;background:#fff}
.cosi .w-link{color:#0170B9;font-size:15px}
.cosi .cols2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.cosi .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.cosi .hl{position:relative}
.cosi .hl::before{content:"";position:absolute;inset:-8px -10px;border-radius:10px;background:rgba(255,232,13,.3);opacity:0;transition:opacity .3s}
.cosi .hl.glow::before{opacity:1}
.cosi .pressed{transform:scale(.95)!important}
.cosi .w-tbl{width:100%;border:1px solid #E1E1E1;border-collapse:separate;border-spacing:0;background:#fff;font-size:16px}
.cosi .w-tbl .r{display:grid;grid-template-columns:196px 113px 122px 1fr;border-top:1px solid #E1E1E1}
.cosi .w-tbl .r>span{padding:12px 16px;border-left:1px solid #E1E1E1;line-height:1.75}
.cosi .w-tbl .r>span:first-child{border-left:0}
.cosi .w-tbl .r.h{border-top:0;background:#FBFBFB;font-weight:700;color:#3a3a3a}
.cosi .w-tbl .r.h>span{display:flex;align-items:center;line-height:1.6}
.cosi .w-tbl .inf{display:flex;align-items:center;font-size:19px}
.cosi .w-tbl .dt{display:flex;align-items:center}
.cosi .w-tbl.o .r{grid-template-columns:130px 150px 160px 120px 1fr}
.cosi .w-tbl.o .r>span{display:flex;align-items:center;gap:8px}
.cosi .l-certs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cosi .l-cert{background:#fff;border:1px solid #E1E1E1;box-shadow:0 0 0 3px #fff,0 0 0 4px #E8E8E8;padding:24px 16px;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:box-shadow .2s;font-size:15px;line-height:1.3;color:#222}
.cosi .l-cert i{font-style:normal;font-size:17px}
.cosi .l-cert.hov{box-shadow:0 0 0 3px #fff,0 0 0 5px #450DFF}
.cosi .l-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cosi .l-course{background:#fff;border:1px solid #E1E1E1;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cosi .l-course img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.cosi .l-course div{padding:12px 14px 16px}
.cosi .l-course b{display:block;font-size:15px;line-height:1.3;color:#222;height:3.9em;overflow:hidden}
.cosi .l-prog{height:8px;background:#efefef;border-radius:4px;margin:12px 0 4px;overflow:hidden}
.cosi .l-prog i{display:block;height:100%;background:#450dff}
.cosi .l-course small{display:block;font-size:12.5px;color:#777;margin-bottom:10px}
.cosi .player,.cosi .modal{position:absolute;inset:0;background:rgba(10,10,30,.62);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;z-index:15}
.cosi .player.on,.cosi .modal.on{opacity:1;visibility:visible;transition:opacity .3s}
.cosi .player .pv{width:760px;background:#000;border-radius:10px;overflow:hidden}
.cosi .player .scr{height:420px;background:linear-gradient(135deg,#1B0A66,#450DFF 60%,#6CD9AF);display:grid;place-items:center;position:relative}
.cosi .player .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cosi .player .pb{position:relative;width:80px;height:80px;border-radius:50%;background:#fff;display:grid;place-items:center}
.cosi .player .pb::after{content:"";border-left:26px solid #450DFF;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
.cosi .player .tl{height:7px;background:#333}
.cosi .player .tl i{display:block;height:100%;width:0;background:#6CD9AF;transition:width 2.6s linear}
.cosi .player.on.play .tl i{width:64%}
.cosi .player.play .pb{opacity:0;transition:opacity .3s}
.cosi .modal .dlg{width:960px;height:760px;background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 120px -30px rgba(0,0,0,.6);font-family:"DM Sans",sans-serif}
.cosi .modal .mh{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid rgba(38,34,98,.1)}
.cosi .modal .mh b{font-size:16px;color:#272624}
.cosi .modal .mh span{display:flex;align-items:center;gap:16px;font-weight:700;font-size:14px;color:#450DFF}
.cosi .modal .mh i{font-style:normal;width:38px;height:38px;border-radius:50%;background:#eef5f1;display:grid;place-items:center;font-size:22px;color:#272624}
.cosi .modal .mb{flex:1;background:#525659;display:flex;justify-content:center;align-items:flex-start;padding:22px;overflow:hidden;position:relative}
.cosi .modal .mb img{height:640px;width:auto;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cosi .modal .pdfbar{position:absolute;right:26px;top:22px;display:flex;gap:8px}
.cosi .modal .pdfbar span{width:40px;height:40px;border-radius:50%;background:#3c3c3c;color:#fff;display:grid;place-items:center;font-size:19px}
.cosi .toast{position:absolute;right:30px;top:110px;transform:translateY(-14px);opacity:0;background:#fff;color:#272624;font-size:15px;font-weight:600;padding:12px 16px;border-radius:12px;transition:all .3s;z-index:18;white-space:nowrap;display:flex;gap:10px;align-items:center;box-shadow:0 18px 40px -16px rgba(0,0,0,.35);border:1px solid #E8E7E2;font-family:"DM Sans",sans-serif}
.cosi .toast.on{opacity:1;transform:none}
.cosi .toast i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#DFF6EC;color:#0B6B45;display:grid;place-items:center;font-weight:800}
.cosi .w-msg{border-top:3px solid #000;background:#f7f6f7;padding:14px 18px 14px 18px;font-size:15px;margin-bottom:18px;opacity:0;transition:opacity .3s}
.cosi .w-msg.on{opacity:1}
.cosi .cur{position:absolute;left:0;top:0;width:26px;height:26px;z-index:20;pointer-events:none;transition:transform .8s cubic-bezier(.45,.05,.25,1)}
.cosi .cur svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.cosi .cur .rip{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:rgba(69,13,255,.35);transform:scale(0);opacity:0}
.cosi .cur.clk .rip{animation:cosiRip .45s ease-out}
@keyframes cosiRip{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}

@media (max-width:900px){.cosi .cosi-wrap{grid-template-columns:minmax(0,1fr)}
.cosi .cosi-screen{position:relative;top:0;order:-1}
.cosi .cosi-steps li:not(.on){display:none}
.cosi .cosi-steps li.on{cursor:default}
.cosi .cosi-ctrl .cap{display:none}}

@media (prefers-reduced-motion:reduce){.cosi .cur{transition:none}
.cosi .v,.cosi .player,.cosi .modal,.cosi .toast{transition:none}}