/* =====================================================================
   /obieg-faktur-kosztowych — nowy układ strony (wersja 1.0, 05.10.2026)
   Prefiks ob2- = układ sekcji, oa- = animacje sekcji „Jak to działa".
   Ładować TYLKO na /obieg-faktur-kosztowych. Korzysta z klas serwisu:
   .sec-white, .sec-light, .wrap, .sec-tag, .tag-blue, .tag-green.
   ===================================================================== */
.ob2{--b:#2563EB;--b-d:#1D4ED8;--b-l:#EFF6FF;--v:#7C3AED;--v-d:#6D28D9;--v-l:#F5F3FF;--g:#16A34A;--ink:#0F172A;--tx:#475569;--mut:#64748B;--ln:#E2E8F0}
.ob2 h2,.ob2 h3{font-family:"Bricolage Grotesque",sans-serif;color:var(--ink,#0F172A);letter-spacing:-.01em}
.ob2-head{max-width:760px;margin:0 auto 44px;text-align:center}
.ob2-head h2{margin:14px 0 12px;font-size:38px;line-height:1.15;font-weight:700}
.ob2-head p{margin:0;font-size:16.5px;line-height:1.6;color:#475569}
.ob2-ok{list-style:none;margin:0;padding:0}
.ob2-ok li{position:relative;padding:5px 0 5px 28px;font-size:14.5px;line-height:1.45;color:#334155}
.ob2-ok li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:#DCFCE7}
.ob2-ok li::after{content:"";position:absolute;left:6.5px;top:10.5px;width:4.5px;height:8.5px;border:solid #16A34A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ob2-ok li.no::before{background:#FEE2E2}
.ob2-ok li.no::after{left:5px;top:15px;width:8px;height:0;border-width:2px 0 0;border-color:#DC2626;transform:none}

/* ---------- 1. PRZEŁĄCZNIK + ANIMACJE ---------- */
.ob2-sw{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:28px;align-items:stretch}
.ob2-tabs{display:grid;grid-auto-rows:1fr;gap:8px}
.ob2-tab{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:12px 20px 14px;border-radius:16px;background:#fff;border:1px solid #E2E8F0;overflow:hidden;cursor:pointer;transition:border-color .25s,box-shadow .25s,background .25s}
.ob2-tab:hover{border-color:#BFDBFE}
.ob2-th{display:flex;align-items:center;gap:12px}
.ob2-num{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:800;background:#F1F5F9;color:#64748B;transition:background .25s,color .25s}
.ob2-tab h3{margin:0;font-size:16.5px;line-height:1.3;color:#334155;font-weight:700}
.ob2-tbtn{all:unset;cursor:pointer}
.ob2-tbtn::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:1}
.ob2-tbtn:focus-visible::after{outline:2px solid #2563EB;outline-offset:-2px}
.ob2-tab p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#64748B}
.ob2-tab:not(.on) p{opacity:.65}
.ob2-tab.on{border-color:#93C5FD;background:linear-gradient(180deg,#F8FBFF,#fff);box-shadow:0 12px 32px -12px rgba(37,99,235,.28)}
.ob2-tab.on h3{color:#0F172A}
.ob2-tab.on .ob2-num{background:#2563EB;color:#fff}
.ob2-bar{position:absolute;left:0;right:0;bottom:0;height:3px}
.ob2-bar i{display:block;height:100%;width:0;background:#2563EB}
.ob2-tab.on .ob2-bar{background:#E2E8F0}
.ob2-tab.on .ob2-bar i{animation:ob2bar 10s linear forwards}
.ob2-sw.paused .ob2-tab.on .ob2-bar i{animation-play-state:paused}
@keyframes ob2bar{to{width:100%}}
.ob2-stage{position:relative;display:flex;border-radius:18px;background:#0B1326;box-shadow:0 30px 60px -24px rgba(15,23,42,.45)}
/* kafelki i animacja mają zawsze tę samą wysokość: animacja 16:10 jest wyśrodkowana w ramce o wysokości kolumny kafelków */
.ob2-shot{display:flex;align-items:center;position:relative;width:100%;border-radius:18px;background:radial-gradient(90% 70% at 78% 22%,#1E3A8A 0%,rgba(30,58,138,0) 60%),#0B1326;overflow:hidden}
.ob2-shot>.oa{position:relative;inset:auto;width:100%;aspect-ratio:16/10;border-radius:0;flex:none}
.ob2-shot:not(.on){display:none}

/* ---------- 2. FAKTURY I DOKUMENTY ---------- */
.ob2-trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr) minmax(0,1fr);gap:18px;align-items:stretch}
.ob2-src{position:relative;display:flex;flex-direction:column;padding:26px 26px 22px;border-radius:20px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 18px 40px -30px rgba(15,23,42,.35);overflow:hidden}
.ob2-src::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ac)}
.ob2-src-k{--ac:linear-gradient(90deg,#2563EB,#60A5FA);--ic:#2563EB;--icb:#EFF6FF}
.ob2-src-v{--ac:linear-gradient(90deg,#7C3AED,#A78BFA);--ic:#7C3AED;--icb:#F5F3FF}
.ob2-src-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--icb);color:var(--ic)}
.ob2-src-ic svg{width:24px;height:24px}
.ob2-src h3{margin:16px 0 4px;font-size:22px;font-weight:700}
.ob2-src-sub{margin:0 0 14px;font-size:14px;color:#64748B}
.ob2-src .ob2-ok{flex:1}
.ob2-more{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;color:var(--ic);text-decoration:none}
.ob2-more:hover{text-decoration:underline}
.ob2-common{display:flex;flex-direction:column;justify-content:center;padding:26px 22px;border-radius:20px;background:linear-gradient(165deg,#0F172A,#1E293B);color:#fff;box-shadow:0 24px 50px -28px rgba(15,23,42,.7)}
.ob2-common-tag{align-self:center;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#93C5FD;margin-bottom:16px}
.ob2-common ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob2-common li span{display:block;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:600;text-align:center;color:#E2E8F0}
.ob2-diff{margin-top:28px;padding:26px 28px;border-radius:20px;background:#fff;border:1px solid #E2E8F0}
.ob2-diff h3{margin:0 0 14px;font-size:19px;font-weight:700}
.ob2-tbl{display:grid}
.ob2-tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:16px;padding:11px 0;border-top:1px solid #EEF2F6;font-size:14.5px;color:#334155}
.ob2-tr>span:first-child{font-weight:600;color:#0F172A}
.ob2-th-row{border-top:0;padding-top:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ob2-th-row span:nth-child(2){color:#2563EB}.ob2-th-row span:nth-child(3){color:#7C3AED}

/* ---------- 3. DECYZJA ---------- */
.ob2-flow{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 34px;max-width:980px}
.ob2-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:150px}
.ob2-node b{font-size:15px;color:#0F172A}
.ob2-node small{font-size:12.5px;color:#64748B;max-width:180px}
.ob2-dot{width:44px;height:44px;border-radius:50%;margin-bottom:6px;position:relative;box-shadow:0 0 0 6px #fff,0 0 0 7px #E2E8F0}
.ob2-dot.s0{background:#F1F5F9}.ob2-dot.s1{background:#DBEAFE}.ob2-dot.s2{background:#DCFCE7}.ob2-dot.s3{background:#FEE2E2}
.ob2-dot::after{content:"";position:absolute;inset:14px;border-radius:50%;background:#94A3B8}
.ob2-dot.s1::after{background:#2563EB}.ob2-dot.s2::after{background:#16A34A}.ob2-dot.s3::after{background:#DC2626}
.ob2-arr{flex:1;max-width:120px;height:2px;margin:0 6px 46px;background:linear-gradient(90deg,#CBD5E1,#93C5FD);position:relative}
.ob2-arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid #93C5FD;border-right:0}
.ob2-split{display:flex;flex-direction:column;gap:14px;padding:14px 18px;border-radius:18px;border:1px dashed #CBD5E1}
.ob2-split .ob2-node{flex-direction:row;text-align:left;gap:12px;min-width:0}
.ob2-split .ob2-dot{margin:0;width:34px;height:34px;flex:none}
.ob2-split .ob2-dot::after{inset:11px}
.ob2-split .ob2-node small{display:block}
.ob2-cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ob2-card{padding:22px 20px;border-radius:18px;background:#F8FAFC;border:1px solid #E2E8F0}
.ob2-card h3{margin:14px 0 6px;font-size:17px;font-weight:700}
.ob2-card p{margin:0;font-size:14px;line-height:1.55;color:#475569}
.ob2-ci{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.ob2-ci svg{width:22px;height:22px}
.ob2-ci.b{background:#DBEAFE;color:#1D4ED8}.ob2-ci.t{background:#CCFBF1;color:#0F766E}.ob2-ci.a{background:#FEF3C7;color:#B45309}.ob2-ci.v{background:#EDE9FE;color:#6D28D9}
.ob2-locks{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin-top:20px;padding:26px 28px;border-radius:20px;background:linear-gradient(135deg,#0F172A,#1E293B);color:#fff}
.ob2-locks-txt{display:flex;gap:18px;align-items:flex-start}
.ob2-lock-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:rgba(251,191,36,.16);color:#FBBF24}
.ob2-lock-ic svg{width:24px;height:24px}
.ob2-locks h3{margin:0 0 6px;font-size:19px;color:#fff;font-weight:700}
.ob2-locks p{margin:0;font-size:14.5px;line-height:1.6;color:#CBD5E1}
.ob2-locks-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob2-locks-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#E2E8F0;white-space:nowrap}
.ob2-locks-list b{min-width:40px;text-align:center;font-size:11px;font-weight:800;padding:5px 8px;border-radius:8px;background:rgba(251,191,36,.16);color:#FCD34D}

/* ---------- 4. ROLE ---------- */
.ob2-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ob2-role{position:relative;padding:26px 24px;border-radius:20px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 18px 40px -30px rgba(15,23,42,.35)}
.ob2-role.r1{--rc:#2563EB;--rb:#EFF6FF}.ob2-role.r2{--rc:#16A34A;--rb:#F0FDF4}.ob2-role.r3{--rc:#64748B;--rb:#F1F5F9}
.ob2-role-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ob2-role-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--rb);color:var(--rc);flex:none}
.ob2-role-ic svg{width:24px;height:24px}
.ob2-role h3{margin:0;font-size:20px;font-weight:700}
.ob2-role-h span:not(.ob2-role-ic){display:block;margin-top:2px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rc)}
.ob2-role p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:#475569}
.ob2-note{max-width:820px;margin:22px auto 0;padding:14px 18px;border-radius:14px;background:#EFF6FF;border:1px solid #BFDBFE;font-size:14.5px;line-height:1.55;color:#1E3A8A;text-align:center}

/* ---------- 5. GRUPY I REGUŁY ---------- */
.ob2-split2{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:stretch}
.ob2-split2-txt h2{margin:14px 0 14px;font-size:36px;line-height:1.15;font-weight:700}
.ob2-split2-txt p{margin:0 0 12px;font-size:16px;line-height:1.65;color:#475569}
.ob2-split2-txt strong{color:#0F172A}
.ob2-facts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ob2-facts li{position:relative;padding:12px 16px 12px 40px;border-radius:12px;background:#F8FAFC;border:1px solid #E2E8F0;font-size:14.5px;line-height:1.5;color:#475569}
.ob2-facts li::before{content:"";position:absolute;left:15px;top:17px;width:12px;height:12px;border-radius:50%;background:#DBEAFE;box-shadow:inset 0 0 0 3px #2563EB}
.ob2-facts b{color:#0F172A}
.ob2-mock{display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 30px 60px -30px rgba(15,23,42,.4);overflow:hidden}
.ob2-mock-bar{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;background:#F8FAFC;border-bottom:1px solid #E2E8F0}
.ob2-mock-bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.ob2-mock-bar span{margin-left:10px;font-size:12.5px;font-weight:600;color:#64748B}
.ob2-mock-body{flex:1;display:grid;grid-template-columns:150px minmax(0,1fr)}
.ob2-mock-groups{display:flex;flex-direction:column;gap:4px;padding:14px 10px;border-right:1px solid #EEF2F6;background:#FBFCFE}
.ob2-mock-groups .lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94A3B8;padding:0 6px 6px}
.ob2-mock-groups .g{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:9px;font-size:13px;font-weight:600;color:#334155}
.ob2-mock-groups .g.on{background:#EFF6FF;color:#1D4ED8}
.ob2-mock-groups .g i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2563EB,#1E3A8A);flex:none}
.ob2-mock-groups .g i.o{background:linear-gradient(135deg,#F59E0B,#B45309)}.ob2-mock-groups .g i.t{background:linear-gradient(135deg,#0D9488,#115E59)}.ob2-mock-groups .g i.p{background:linear-gradient(135deg,#7C3AED,#4C1D95)}
.ob2-mock-rules{padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ob2-mock-rules .rs{border-radius:14px;padding:12px;border:1px solid #DBEAFE;background:#F8FBFF}
.ob2-mock-rules .rs.v{border-color:#E9D5FF;background:#FBF8FF}
.ob2-mock-rules .rs-h{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1D4ED8;margin-bottom:8px}
.ob2-mock-rules .rs.v .rs-h{color:#6D28D9}
.ob2-mock-rules .r{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:9px 10px;border-radius:10px;background:#fff;border:1px solid #E2E8F0}
.ob2-mock-rules .r em{font-style:normal;font-size:11.5px;font-weight:700;color:#94A3B8;margin-right:4px}
.ob2-mock-rules .c{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:7px;background:#EFF6FF;color:#1E40AF}
.ob2-mock-rules .rs.v .c{background:#F5F3FF;color:#5B21B6}
.ob2-mock-rules .i{font-size:10.5px;font-weight:800;color:#64748B}
.ob2-mock-rules .op{display:block;width:max-content;margin:6px auto;font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:999px;background:#0F172A;color:#fff}

.ob2-mock-rules .mem{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#64748B}
.ob2-mock-rules .mem span{margin-right:4px}
.ob2-mock-rules .mem i{width:26px;height:26px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2563EB,#1E3A8A);border:2px solid #fff}
.ob2-mock-rules .mem span+i{margin-left:0}
.ob2-mock-rules .mem i.o{background:linear-gradient(135deg,#F59E0B,#B45309)}.ob2-mock-rules .mem i.t{background:linear-gradient(135deg,#0D9488,#115E59)}
.ob2-mock-rules .mem em{font-style:normal;font-size:11.5px;font-weight:700;color:#475569;margin-left:2px}
.ob2-mock-rules .res{margin:auto 0 0;padding:11px 12px;border-radius:10px;background:#F0FDF4;border:1px solid #BBF7D0;font-size:12.5px;line-height:1.5;color:#166534}
/* ---------- 6. WARUNKI ---------- */
.ob2-conds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ob2-cond{border-radius:20px;background:#fff;border:1px solid #E2E8F0;overflow:hidden}
.ob2-cond h3{margin:0;padding:16px 22px;font-size:17px;font-weight:700;border-bottom:1px solid #EEF2F6;display:flex;align-items:center;gap:10px}
.ob2-cond h3::before{content:"";width:10px;height:10px;border-radius:50%;background:#2563EB}
.ob2-cond.v h3::before{background:#7C3AED}
.ob2-cond dl{margin:0;padding:8px 22px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.ob2-cond dl div{padding:10px 0;border-bottom:1px dashed #E2E8F0}
.ob2-cond dt{font-size:14px;font-weight:700;color:#0F172A}
.ob2-cond dd{margin:2px 0 0;font-size:13px;color:#64748B}
.ob2-sub{margin:36px 0 14px;font-size:19px;font-weight:700;text-align:center}
.ob2-ex{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ob2-ex-c{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;background:#fff;border:1px solid #E2E8F0}
.ob2-ex-c .n{font-family:"Bricolage Grotesque",sans-serif;font-size:13px;font-weight:800;color:#2563EB}
.ob2-ex-c.v .n{color:#7C3AED}
.ob2-ex-c b{font-size:15px;line-height:1.35;color:#0F172A}
.ob2-ex-c .ch{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:auto}
.ob2-ex-c .ch span{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:7px;background:#EFF6FF;color:#1E40AF}
.ob2-ex-c.v .ch span{background:#F5F3FF;color:#5B21B6}
.ob2-ex-c .ch i{font-style:normal;font-size:10.5px;font-weight:800;color:#64748B;padding-left:10px}

/* ---------- 7. WYJĄTKI ---------- */
.ob2-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ob2-tool{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:18px;align-items:start;padding:24px;border-radius:20px;background:#F8FAFC;border:1px solid #E2E8F0;scroll-margin-top:90px}
.ob2-tool h3{margin:0 0 8px;font-size:19px;font-weight:700}
.ob2-tool p{margin:0;font-size:14.5px;line-height:1.6;color:#475569}
.ob2-tool-mock{align-self:end;padding:14px;border-radius:14px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 14px 30px -22px rgba(15,23,42,.4);font-size:13px;color:#334155;min-width:0}
.tm-h{font-size:12px;font-weight:700;color:#0F172A;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tm-stats span{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-radius:10px;font-size:11.5px;font-weight:600}
.tm-stats b{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;line-height:1.1}
.tm-stats .g{background:#F0FDF4;color:#15803D}.tm-stats .a{background:#FFFBEB;color:#B45309}.tm-stats .r{background:#FEF2F2;color:#B91C1C}
.tm-eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.tm-eq span{font-size:12px;font-weight:700;padding:6px 9px;border-radius:8px;background:#F1F5F9;color:#334155}
.tm-eq span.r{background:#FEE2E2;color:#B91C1C}.tm-eq span.b{background:#2563EB;color:#fff}
.tm-eq i{font-style:normal;font-weight:800;color:#64748B}
.tm-p{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #F1F5F9;font-size:12.5px;font-weight:600}
.tm-p i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2563EB,#1E3A8A);flex:none}
.tm-p i.o{background:linear-gradient(135deg,#F59E0B,#B45309)}.tm-p i.t{background:linear-gradient(135deg,#0D9488,#115E59)}
.tm-p span{margin-left:auto;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.tm-p .b{background:#DBEAFE;color:#1D4ED8}.tm-p .v{background:#EDE9FE;color:#6D28D9}.tm-p .add{background:#16A34A;color:#fff}
.tm-qr{display:flex;align-items:center;gap:12px}
.tm-qr .q{width:46px;height:46px;flex:none;border-radius:8px;border:1px solid #CBD5E1;background:
  linear-gradient(90deg,#0F172A 25%,transparent 25% 50%,#0F172A 50% 62%,transparent 62%) 0 0/11px 11px,
  linear-gradient(#0F172A 30%,transparent 30% 60%,#0F172A 60% 75%,transparent 75%) 0 0/11px 11px,#fff;background-blend-mode:multiply;opacity:.85}
.tm-qr div{min-width:0;flex:1}
.tm-qr b{display:block;font-size:13px;color:#15803D}
.tm-qr small{display:block;font-size:12px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-qr .go{font-size:12px;font-weight:700;color:#2563EB;white-space:nowrap}

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width:1080px){
  .ob2-cards4,.ob2-ex{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ob2-head{margin-bottom:30px}
  .ob2-head h2,.ob2-split2-txt h2{font-size:28px}
  .ob2-sw{grid-template-columns:1fr;gap:14px}
  .ob2-stage{order:-1;border-radius:14px}
  .ob2-shot{border-radius:14px}
  .ob2-tabs{grid-auto-rows:auto;gap:10px}
  .ob2-tab{padding:14px 16px 16px}

  .ob2-trio{grid-template-columns:1fr}
  .ob2-common ul{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .ob2-common li span{padding:8px 12px;font-size:13px}
  .ob2-flow{flex-direction:column;gap:10px}
  .ob2-arr{width:2px;height:26px;flex:none;margin:0;background:linear-gradient(#CBD5E1,#93C5FD)}
  .ob2-arr::after{right:-4px;top:auto;bottom:-2px;border:5px solid transparent;border-top:7px solid #93C5FD;border-bottom:0}
  .ob2-locks{grid-template-columns:1fr}
  .ob2-roles,.ob2-conds,.ob2-tools{grid-template-columns:1fr}
  .ob2-split2{grid-template-columns:1fr;gap:32px}
}
@media (max-width:560px){
  .ob2-cards4,.ob2-ex{grid-template-columns:1fr}
  .ob2-diff{padding:20px 16px}
  .ob2-tr{grid-template-columns:1fr 1fr;gap:4px 12px}
  .ob2-tr>span:first-child{grid-column:1/-1}
  .ob2-th-row span:first-child{display:none}
  .ob2-cond dl{grid-template-columns:1fr}
  .ob2-mock-body{grid-template-columns:1fr}
  .ob2-mock-groups{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #EEF2F6}
  .ob2-mock-groups .lbl{display:none}
  .ob2-locks,.ob2-tool{padding:20px}
  .ob2-locks-txt{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){.ob2-tab.on .ob2-bar i{animation:none;width:100%}}

/* =====================================================================
   ANIMACJE /obieg-faktur-kosztowych, sekcja „Jak to działa" — prefiks oa-.
   Kontener .ob2-shot w proporcji 16:10 (wysokość = 62.5cqw). Jednostki cqw
   (1cqw = 1% szerokości kontenera). Pętla 10 s, czysty CSS. Styl jak animacje
   „Jak to działa" na stronie głównej (k2-).
   ===================================================================== */
.oa{position:absolute;inset:0;container-type:inline-size;overflow:hidden;background:#0B1326;font-family:"DM Sans",system-ui,sans-serif;color:#fff;border-radius:inherit;line-height:1.25}
.oa *{box-sizing:border-box}
.oa .bg{position:absolute;inset:0;background:radial-gradient(90cqw 60cqw at 78% 22%,#1E3A8A 0%,rgba(30,58,138,0) 60%),radial-gradient(64cqw 46cqw at 12% 92%,#1D4ED8 0%,rgba(29,78,216,0) 55%),#0B1326}
.oa .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:6cqw 6cqw;mask-image:radial-gradient(80cqw 50cqw at 50% 45%,#000 30%,transparent 100%)}
.oa .cap{position:absolute;left:0;right:0;bottom:0;height:7cqw;background:rgba(15,23,42,.85);border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;padding:0 3cqw;text-align:center;font-size:2cqw;font-weight:600;color:#C9D6EF;z-index:8}
.oa .ap{opacity:0;animation:10s ease-out infinite}
/* panele (szkło) */
.oa .pnl{position:absolute;border-radius:1.8cqw;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:0 2cqw 5cqw rgba(0,0,0,.4);overflow:hidden;z-index:2}
.oa .ab{height:5cqw;display:flex;align-items:center;gap:.9cqw;padding:0 1.6cqw;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1);font-size:1.6cqw;font-weight:700;white-space:nowrap}
.oa .ab i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#60A5FA;flex:none}
.oa .ab em{margin-left:auto;font-style:normal;font-size:1.25cqw;color:#93C5FD;font-weight:600}
.oa .lbl{margin:1.2cqw 1.6cqw 0;font-size:1.1cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#93C5FD}
.oa .row{margin:.8cqw 1.2cqw 0;height:6cqw;border-radius:1.1cqw;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:1.1cqw;padding:0 1.2cqw;min-width:0}
.oa .ic{width:3.2cqw;height:3.2cqw;border-radius:.8cqw;display:grid;place-items:center;font-size:1.1cqw;font-weight:800;flex:none;background:#DBEAFE;color:#1D4ED8;font-style:normal}
.oa .ic.v{background:#EDE9FE;color:#6D28D9}.oa .ic.a{background:#FEF3C7;color:#B45309}.oa .ic.d{background:#E2E8F0;color:#475569}.oa .ic.g{background:#DCFCE7;color:#15803D}
.oa .nm{min-width:0;flex:1}
.oa .nm b{display:block;font-size:1.45cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oa .nm small{display:block;font-size:1.15cqw;color:#93C5FD;margin-top:.15cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oa .z{font-size:1.45cqw;font-weight:700;white-space:nowrap}
.oa .chip{display:inline-flex;align-items:center;gap:.5cqw;font-size:1.1cqw;font-weight:700;padding:.35cqw .9cqw;border-radius:2cqw;background:#DBEAFE;color:#1D4ED8;white-space:nowrap;flex:none}
.oa .chip.g{background:#DCFCE7;color:#15803D}.oa .chip.a{background:#FEF3C7;color:#B45309}.oa .chip.v{background:#EDE9FE;color:#6D28D9}.oa .chip.d{background:rgba(255,255,255,.12);color:#C9D6EF}.oa .chip.r{background:#FEE2E2;color:#B91C1C}
.oa .tick{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#DCFCE7;position:relative;flex:none}
.oa .tick::after{content:"";position:absolute;left:.88cqw;top:.45cqw;width:.7cqw;height:1.25cqw;border:solid #16A34A;border-width:0 .34cqw .34cqw 0;transform:rotate(45deg)}
.oa .av{width:3.4cqw;height:3.4cqw;border-radius:50%;display:grid;place-items:center;font-size:1.15cqw;font-weight:800;color:#fff;flex:none;background:linear-gradient(135deg,#2563EB,#1E3A8A);border:.2cqw solid rgba(255,255,255,.25)}
.oa .av.o{background:linear-gradient(135deg,#F59E0B,#B45309)}.oa .av.p{background:linear-gradient(135deg,#7C3AED,#4C1D95)}.oa .av.t{background:linear-gradient(135deg,#0D9488,#115E59)}
.oa .lock{width:2.4cqw;height:2.4cqw;flex:none;color:#FBBF24}
.oa .cur{position:absolute;width:2.6cqw;height:2.6cqw;z-index:7;pointer-events:none}
.oa .cur svg{width:100%;height:100%;filter:drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.5))}
.oa .spin{width:1.8cqw;height:1.8cqw;border-radius:50%;border:.25cqw solid #60A5FA;border-top-color:transparent;animation:oa-spin 1.4s linear infinite;flex:none}
@keyframes oa-spin{to{transform:rotate(360deg)}}
/* papierowy dokument */
.oa .doc{position:absolute;border-radius:1cqw;background:#fff;color:#0F172A;padding:1.4cqw 1.4cqw;box-shadow:0 1.5cqw 4cqw rgba(0,0,0,.45);z-index:3}
.oa .doc .h{display:flex;justify-content:space-between;align-items:center;font-family:"Bricolage Grotesque","DM Sans",sans-serif;font-weight:800;font-size:1.6cqw;letter-spacing:-.01em}
.oa .doc .no{font-size:1.1cqw;color:#64748B;margin-top:.3cqw}
.oa .doc .l{height:.55cqw;border-radius:.3cqw;background:#E2E8F0;margin-top:1cqw}.oa .doc .l.w{width:72%}.oa .doc .l.x{width:46%}
.oa .doc .kv{display:flex;justify-content:space-between;font-size:1.1cqw;color:#64748B;margin-top:1cqw}
.oa .doc .kv b{color:#0F172A}
.oa .doc .sum{position:absolute;left:1.4cqw;right:1.4cqw;bottom:1.3cqw;display:flex;justify-content:space-between;align-items:end;font-size:1.1cqw;color:#64748B}
.oa .doc .sum b{font-size:1.8cqw;color:#0F172A}
.oa .doc .chip{font-size:.95cqw;padding:.25cqw .7cqw}
/* mały „lecący" dokument */
.oa .fl{position:absolute;left:0;top:0;width:4.6cqw;height:6cqw;border-radius:.6cqw;background:#fff;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.45);z-index:6;opacity:0;padding:.8cqw .7cqw}
.oa .fl::before,.oa .fl::after{content:"";display:block;height:.45cqw;border-radius:.3cqw;background:#CBD5E1;margin-bottom:.6cqw}
.oa .fl::after{width:60%}
.oa .fl.k{border-top:.5cqw solid #2563EB}.oa .fl.v{border-top:.5cqw solid #7C3AED}.oa .fl.g{border-top:.5cqw solid #16A34A}

/* ---------------- 1. Wpływ: KSeF + plik/zdjęcie ---------------- */
.oa1 .src{position:absolute;left:4cqw;width:22cqw;border-radius:1.8cqw;background:linear-gradient(160deg,#1E293B,#0F172A);border:1px solid rgba(255,255,255,.14);box-shadow:0 2cqw 5cqw rgba(0,0,0,.45);padding:1.8cqw 1.6cqw;z-index:3}
.oa1 .src.k{top:5cqw;height:19cqw;box-shadow:0 2cqw 5cqw rgba(0,0,0,.45),0 0 0 .4cqw rgba(37,99,235,.25)}
.oa1 .src.u{top:28cqw;height:20.5cqw;box-shadow:0 2cqw 5cqw rgba(0,0,0,.45),0 0 0 .4cqw rgba(124,58,237,.25)}
.oa1 .src.k::before{content:"";position:absolute;inset:-1cqw;border-radius:2.6cqw;border:.25cqw solid rgba(96,165,250,.35);animation:oa-pulse 3s ease-out infinite}
@keyframes oa-pulse{0%{transform:scale(.94);opacity:0}30%{opacity:1}100%{transform:scale(1.08);opacity:0}}
.oa1 .src .t{font-family:"Bricolage Grotesque","DM Sans",sans-serif;font-weight:800;font-size:4cqw;letter-spacing:-.03em;line-height:1}
.oa1 .src .s{font-size:1.25cqw;color:#93C5FD;margin-top:.5cqw}
.oa1 .src .f{position:absolute;left:1.6cqw;right:1.6cqw;bottom:1.5cqw;display:flex;align-items:center;gap:.8cqw;font-size:1.2cqw;font-weight:600;color:#C9D6EF}
.oa1 .src .tt{font-size:1.75cqw;font-weight:800;line-height:1.2}
.oa1 .src .ics{display:flex;gap:.8cqw;margin-bottom:1cqw}
.oa1 .src .ics span{width:3.4cqw;height:3.4cqw;border-radius:.9cqw;display:grid;place-items:center;background:rgba(167,139,250,.18);color:#C4B5FD}
.oa1 .src .ics svg{width:2cqw;height:2cqw}
.oa1 .src .chip{margin-top:.2cqw}
.oa1 .lst{left:35cqw;top:4.5cqw;width:61cqw;height:49.5cqw}
.oa1 .ab .chip{margin-left:auto}

/* ---------------- 2. Reguły: kto widzi ---------------- */
.oa2 .sc{position:absolute;inset:0;opacity:0}
.oa2 .s1{animation:oa-sc1 10s ease-in-out infinite}.oa2 .s2{animation:oa-sc2 10s ease-in-out infinite}
.oa2 .doc{left:4cqw;top:6cqw;width:23cqw;height:29.5cqw}
.oa2 .doc .chip{position:static}
.oa2 .rul{left:31cqw;top:6cqw;width:65cqw;height:29.5cqw}
.oa2 .rul .row{height:7cqw;transition:none}
.oa2 .rul .rule{font-size:1.2cqw;font-weight:700;padding:.45cqw 1cqw;border-radius:.7cqw;background:rgba(255,255,255,.1);color:#E2E8F0;white-space:nowrap;flex:none}
.oa2 .rul .res{margin-left:auto;display:flex;align-items:center;gap:.6cqw;flex:none}
.oa2 .rul .nm{flex:0 0 15cqw}
.oa2 .ntf{position:absolute;right:4cqw;top:40cqw;width:44cqw;background:rgba(255,255,255,.96);color:#0F172A;border-radius:1.4cqw;padding:1cqw 1.3cqw;box-shadow:0 1cqw 2.5cqw rgba(0,0,0,.4);display:flex;align-items:center;gap:1.1cqw;z-index:5}
.oa2 .ntf .ic{width:3.2cqw;height:3.2cqw}
.oa2 .ntf b{display:block;font-size:1.3cqw}
.oa2 .ntf small{display:block;font-size:1.1cqw;color:#475569;margin-top:.15cqw}
.oa2 .ntf em{margin-left:auto;font-style:normal;font-size:1cqw;color:#64748B;font-weight:600;align-self:flex-start}
.oa2 .who{position:absolute;left:4cqw;top:41.5cqw;width:44cqw;font-size:1.35cqw;color:#C9D6EF;display:flex;align-items:center;gap:.8cqw;flex-wrap:wrap;z-index:4}
.oa2 .who b{color:#fff}

/* ---------------- 3. Opis i decyzja ---------------- */
.oa3 .top{position:absolute;left:4cqw;right:4cqw;top:4.5cqw;height:7cqw;border-radius:1.4cqw;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:1.2cqw;padding:0 1.4cqw;z-index:2}
.oa3 .top .nm{flex:1}
.oa3 .pipe{display:flex;align-items:center;gap:.5cqw;flex:none}
.oa3 .pipe span{font-size:1.15cqw;font-weight:700;padding:.5cqw 1cqw;border-radius:2cqw;background:rgba(255,255,255,.08);color:#93A4C3;border:1px solid transparent;animation:10s linear infinite}
.oa3 .pipe i{width:1.3cqw;height:.2cqw;background:rgba(255,255,255,.25)}
.oa3 .pipe .st1{animation-name:oa-st1}.oa3 .pipe .st2{animation-name:oa-st2}.oa3 .pipe .st3{animation-name:oa-st3}
@keyframes oa-st1{0%,38%{background:#DBEAFE;color:#1D4ED8}40%,100%{background:rgba(255,255,255,.08);color:#93A4C3}}
@keyframes oa-st2{0%,38%{background:rgba(255,255,255,.08);color:#93A4C3}40%,60%{background:#DBEAFE;color:#1D4ED8}62%,100%{background:rgba(255,255,255,.08);color:#93A4C3}}
@keyframes oa-st3{0%,60%{background:rgba(255,255,255,.08);color:#93A4C3}62%,95%{background:#DCFCE7;color:#15803D}98%,100%{background:rgba(255,255,255,.08);color:#93A4C3}}
.oa3 .frm{left:4cqw;top:14cqw;width:55cqw;height:39cqw}
.oa3 .fld{margin:1.1cqw 1.6cqw 0}
.oa3 .fld .k{display:block;font-size:1.05cqw;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#93C5FD;margin-bottom:.5cqw}
.oa3 .fld .in{height:4.4cqw;border-radius:.9cqw;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:.6cqw;padding:0 1.1cqw;font-size:1.4cqw;font-weight:600;overflow:hidden}
.oa3 .ty{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:.2cqw solid #60A5FA;width:0;animation:oa-ty 10s steps(42,end) infinite}
@keyframes oa-ty{0%,8%{width:0}30%,95%{width:29cqw}100%{width:0}}
.oa3 .tg{width:4cqw;height:2.2cqw;border-radius:1.2cqw;background:rgba(255,255,255,.2);position:relative;flex:none;animation:oa-tg 10s linear infinite}
.oa3 .tg::after{content:"";position:absolute;left:.3cqw;top:.3cqw;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#fff;animation:oa-tgk 10s linear infinite}
@keyframes oa-tg{0%,39%{background:rgba(255,255,255,.2)}41%,95%{background:#16A34A}100%{background:rgba(255,255,255,.2)}}
@keyframes oa-tgk{0%,39%{transform:translateX(0)}41%,95%{transform:translateX(1.8cqw)}100%{transform:translateX(0)}}
.oa3 .flg{display:flex;align-items:center;gap:1cqw;margin:1.3cqw 1.6cqw 0;font-size:1.35cqw;font-weight:600;color:#E2E8F0}
.oa3 .btns{position:absolute;left:1.6cqw;right:1.6cqw;bottom:1.6cqw;display:flex;gap:.9cqw;justify-content:flex-end}
.oa3 .btns span{height:3.8cqw;padding:0 1.8cqw;border-radius:.9cqw;display:grid;place-items:center;font-size:1.35cqw;font-weight:700;background:rgba(255,255,255,.1);color:#C9D6EF;border:1px solid rgba(255,255,255,.18)}
.oa3 .btns .ok{background:#16A34A;color:#fff;border-color:#16A34A;animation:oa-press 10s linear infinite}
@keyframes oa-press{0%,57%{transform:scale(1);box-shadow:none}58%,59%{transform:scale(.94);box-shadow:0 0 0 .5cqw rgba(22,163,74,.35)}61%,100%{transform:scale(1);box-shadow:none}}
.oa3 .cur{left:0;top:0;animation:oa-cur3 10s ease-in-out infinite}
@keyframes oa-cur3{0%,44%{opacity:0;transform:translate(40cqw,48cqw)}47%{opacity:1;transform:translate(40cqw,48cqw)}56%,60%{opacity:1;transform:translate(53cqw,49.6cqw)}66%,100%{opacity:0;transform:translate(53cqw,49.6cqw)}}
.oa3 .his{left:62cqw;top:14cqw;width:34cqw;height:39cqw}
.oa3 .tl{position:relative;margin:1.6cqw 1.6cqw 0 3.8cqw}
.oa3 .tl::before{content:"";position:absolute;left:-2.25cqw;top:.6cqw;bottom:.6cqw;width:.2cqw;background:rgba(255,255,255,.18)}
.oa3 .tl .e{position:relative;padding:.3cqw 0 1.5cqw;font-size:1.35cqw;font-weight:700;line-height:1.3}
.oa3 .tl .e::before{content:"";position:absolute;left:-2.85cqw;top:.6cqw;width:1.4cqw;height:1.4cqw;border-radius:50%;background:#2563EB;border:.25cqw solid #0B1326}
.oa3 .tl .e.g::before{background:#16A34A}.oa3 .tl .e.d::before{background:#64748B}
.oa3 .tl .e small{display:block;font-size:1.1cqw;font-weight:500;color:#93C5FD;margin-top:.2cqw}

/* ---------------- 4. Po decyzji ---------------- */
.oa4 .acc{left:4cqw;top:6cqw;width:36cqw;height:38cqw}
.oa4 .acc .row{height:6.6cqw;margin-top:1cqw}
.oa4 .acc .lk{display:flex;align-items:center;gap:.4cqw;flex:none}
.oa4 .dst{position:absolute;left:52cqw;width:44cqw;height:12.5cqw;border-radius:1.6cqw;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.35);display:flex;align-items:center;gap:1.4cqw;padding:0 1.6cqw;z-index:2}
.oa4 .dst.d1{top:6cqw}.oa4 .dst.d2{top:20.5cqw}.oa4 .dst.d3{top:35cqw}
.oa4 .dst .bx{width:5.6cqw;height:5.6cqw;border-radius:1.3cqw;display:grid;place-items:center;flex:none}
.oa4 .dst .bx svg{width:2.9cqw;height:2.9cqw}
.oa4 .dst.d1 .bx{background:rgba(37,99,235,.22);color:#93C5FD}.oa4 .dst.d2 .bx{background:rgba(22,163,74,.22);color:#86EFAC}.oa4 .dst.d3 .bx{background:rgba(124,58,237,.24);color:#C4B5FD}
.oa4 .dst .nm b{font-size:1.65cqw}
.oa4 .dst .chip{margin-left:auto}
.oa3 .hint{margin:.6cqw 1.6cqw 0;font-size:1.1cqw;color:#93A4C3}
.oa2 .doc .kv+.kv{margin-top:.5cqw}

/* ---- sloty pojawiania i loty (wygenerowane) ---- */
@keyframes oa-p1{0%,3%{opacity:0;transform:translateY(1.4cqw)}8%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p1{animation-name:oa-p1}
@keyframes oa-p2{0%,11%{opacity:0;transform:translateY(1.4cqw)}16%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p2{animation-name:oa-p2}
@keyframes oa-p3{0%,19%{opacity:0;transform:translateY(1.4cqw)}24%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p3{animation-name:oa-p3}
@keyframes oa-p4{0%,27%{opacity:0;transform:translateY(1.4cqw)}32%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p4{animation-name:oa-p4}
@keyframes oa-p5{0%,35%{opacity:0;transform:translateY(1.4cqw)}40%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p5{animation-name:oa-p5}
@keyframes oa-p6{0%,43%{opacity:0;transform:translateY(1.4cqw)}48%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p6{animation-name:oa-p6}
@keyframes oa-p7{0%,51%{opacity:0;transform:translateY(1.4cqw)}56%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p7{animation-name:oa-p7}
@keyframes oa-p8{0%,59%{opacity:0;transform:translateY(1.4cqw)}64%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p8{animation-name:oa-p8}
@keyframes oa-p9{0%,67%{opacity:0;transform:translateY(1.4cqw)}72%,92%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.oa .p9{animation-name:oa-p9}
@keyframes oa-q1{0%,1%{opacity:0;transform:translateY(1.4cqw)}6%,44%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(0)}}
.oa .q1{animation-name:oa-q1}
@keyframes oa-q2{0%,6%{opacity:0;transform:translateY(1.4cqw)}11%,44%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(0)}}
.oa .q2{animation-name:oa-q2}
@keyframes oa-q3{0%,11%{opacity:0;transform:translateY(1.4cqw)}16%,44%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(0)}}
.oa .q3{animation-name:oa-q3}
@keyframes oa-q4{0%,16%{opacity:0;transform:translateY(1.4cqw)}21%,44%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(0)}}
.oa .q4{animation-name:oa-q4}
@keyframes oa-q5{0%,21%{opacity:0;transform:translateY(1.4cqw)}26%,44%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(0)}}
.oa .q5{animation-name:oa-q5}
@keyframes oa-q6{0%,26%{opacity:0;transform:translateY(1.4cqw)}31%,44%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(0)}}
.oa .q6{animation-name:oa-q6}
@keyframes oa-q7{0%,31%{opacity:0;transform:translateY(1.4cqw)}36%,44%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(0)}}
.oa .q7{animation-name:oa-q7}
@keyframes oa-r1{0%,51%{opacity:0;transform:translateY(1.4cqw)}56%,93%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
.oa .r1{animation-name:oa-r1}
@keyframes oa-r2{0%,56%{opacity:0;transform:translateY(1.4cqw)}61%,93%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
.oa .r2{animation-name:oa-r2}
@keyframes oa-r3{0%,61%{opacity:0;transform:translateY(1.4cqw)}66%,93%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
.oa .r3{animation-name:oa-r3}
@keyframes oa-r4{0%,66%{opacity:0;transform:translateY(1.4cqw)}71%,93%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
.oa .r4{animation-name:oa-r4}
@keyframes oa-r5{0%,71%{opacity:0;transform:translateY(1.4cqw)}76%,93%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
.oa .r5{animation-name:oa-r5}
@keyframes oa-r6{0%,76%{opacity:0;transform:translateY(1.4cqw)}81%,93%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
.oa .r6{animation-name:oa-r6}
@keyframes oa-r7{0%,81%{opacity:0;transform:translateY(1.4cqw)}86%,93%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
.oa .r7{animation-name:oa-r7}
@keyframes oa-sc1{0%{opacity:0}3%,45%{opacity:1}49%,100%{opacity:0}}
@keyframes oa-sc2{0%,49%{opacity:0}53%,95%{opacity:1}99%,100%{opacity:0}}
@keyframes oa-h1{0%,15%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}17%,20%{background-color:rgba(96,165,250,.22);border-color:#60A5FA}23%,100%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}}
.oa .h1{animation:oa-h1 10s linear infinite}
@keyframes oa-h2{0%,20%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}22%,25%{background-color:rgba(96,165,250,.22);border-color:#60A5FA}28%,100%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}}
.oa .h2{animation:oa-h2 10s linear infinite}
@keyframes oa-h3{0%,25%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}27%,30%{background-color:rgba(96,165,250,.22);border-color:#60A5FA}33%,100%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}}
.oa .h3{animation:oa-h3 10s linear infinite}
@keyframes oa-h4{0%,65%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}67%,70%{background-color:rgba(96,165,250,.22);border-color:#60A5FA}73%,100%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}}
.oa .h4{animation:oa-h4 10s linear infinite}
@keyframes oa-h5{0%,70%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}72%,75%{background-color:rgba(96,165,250,.22);border-color:#60A5FA}78%,100%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}}
.oa .h5{animation:oa-h5 10s linear infinite}
@keyframes oa-h6{0%,75%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}77%,80%{background-color:rgba(96,165,250,.22);border-color:#60A5FA}83%,100%{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}}
.oa .h6{animation:oa-h6 10s linear infinite}
@keyframes oa-f11{0%,7%{opacity:0;transform:translate(24cqw,10cqw) scale(.9)}9%{opacity:1;transform:translate(24cqw,10cqw) scale(1)}14%{opacity:1;transform:translate(35cqw,12.9cqw) scale(1)}16%,100%{opacity:0;transform:translate(35cqw,12.9cqw) scale(.8)}}
.oa1 .fl1{animation:oa-f11 10s ease-in-out infinite}
@keyframes oa-f12{0%,15%{opacity:0;transform:translate(24cqw,10cqw) scale(.9)}17%{opacity:1;transform:translate(24cqw,10cqw) scale(1)}22%{opacity:1;transform:translate(35cqw,19.7cqw) scale(1)}24%,100%{opacity:0;transform:translate(35cqw,19.7cqw) scale(.8)}}
.oa1 .fl2{animation:oa-f12 10s ease-in-out infinite}
@keyframes oa-f13{0%,31%{opacity:0;transform:translate(24cqw,34cqw) scale(.9)}33%{opacity:1;transform:translate(24cqw,34cqw) scale(1)}38%{opacity:1;transform:translate(35cqw,29.1cqw) scale(1)}40%,100%{opacity:0;transform:translate(35cqw,29.1cqw) scale(.8)}}
.oa1 .fl3{animation:oa-f13 10s ease-in-out infinite}
@keyframes oa-f14{0%,39%{opacity:0;transform:translate(24cqw,34cqw) scale(.9)}41%{opacity:1;transform:translate(24cqw,34cqw) scale(1)}46%{opacity:1;transform:translate(35cqw,35.9cqw) scale(1)}48%,100%{opacity:0;transform:translate(35cqw,35.9cqw) scale(.8)}}
.oa1 .fl4{animation:oa-f14 10s ease-in-out infinite}
@keyframes oa-f15{0%,47%{opacity:0;transform:translate(24cqw,34cqw) scale(.9)}49%{opacity:1;transform:translate(24cqw,34cqw) scale(1)}54%{opacity:1;transform:translate(35cqw,42.7cqw) scale(1)}56%,100%{opacity:0;transform:translate(35cqw,42.7cqw) scale(.8)}}
.oa1 .fl5{animation:oa-f15 10s ease-in-out infinite}
@keyframes oa-f41{0%,17%{opacity:0;transform:translate(37cqw,12.3cqw) scale(.9)}19%{opacity:1;transform:translate(37cqw,12.3cqw) scale(1)}24%{opacity:1;transform:translate(52cqw,9.25cqw) scale(1)}26%,100%{opacity:0;transform:translate(52cqw,9.25cqw) scale(.8)}}
.oa4 .fl1{animation:oa-f41 10s ease-in-out infinite}
@keyframes oa-f42{0%,19%{opacity:0;transform:translate(37cqw,19.9cqw) scale(.9)}21%{opacity:1;transform:translate(37cqw,19.9cqw) scale(1)}26%{opacity:1;transform:translate(52cqw,9.25cqw) scale(1)}28%,100%{opacity:0;transform:translate(52cqw,9.25cqw) scale(.8)}}
.oa4 .fl2{animation:oa-f42 10s ease-in-out infinite}
@keyframes oa-f43{0%,33%{opacity:0;transform:translate(37cqw,12.3cqw) scale(.9)}35%{opacity:1;transform:translate(37cqw,12.3cqw) scale(1)}40%{opacity:1;transform:translate(52cqw,23.75cqw) scale(1)}42%,100%{opacity:0;transform:translate(52cqw,23.75cqw) scale(.8)}}
.oa4 .fl3{animation:oa-f43 10s ease-in-out infinite}
@keyframes oa-f44{0%,35%{opacity:0;transform:translate(37cqw,19.9cqw) scale(.9)}37%{opacity:1;transform:translate(37cqw,19.9cqw) scale(1)}42%{opacity:1;transform:translate(52cqw,23.75cqw) scale(1)}44%,100%{opacity:0;transform:translate(52cqw,23.75cqw) scale(.8)}}
.oa4 .fl4{animation:oa-f44 10s ease-in-out infinite}
@keyframes oa-f45{0%,49%{opacity:0;transform:translate(37cqw,27.5cqw) scale(.9)}51%{opacity:1;transform:translate(37cqw,27.5cqw) scale(1)}56%{opacity:1;transform:translate(52cqw,38.25cqw) scale(1)}58%,100%{opacity:0;transform:translate(52cqw,38.25cqw) scale(.8)}}
.oa4 .fl5{animation:oa-f45 10s ease-in-out infinite}
@keyframes oa-f46{0%,51%{opacity:0;transform:translate(37cqw,35.1cqw) scale(.9)}53%{opacity:1;transform:translate(37cqw,35.1cqw) scale(1)}58%{opacity:1;transform:translate(52cqw,38.25cqw) scale(1)}60%,100%{opacity:0;transform:translate(52cqw,38.25cqw) scale(.8)}}
.oa4 .fl6{animation:oa-f46 10s ease-in-out infinite}