/* /dla-biur-rachunkowych — wersja 1.0, 05.10.2026. Ładować TYLKO na tej stronie. */
/* =====================================================================
   /dla-biur-rachunkowych — nowy układ strony. Prefiks br2-.
   Korzysta z klas serwisu: .sec-white, .sec-light, .wrap, .sec-tag, .tag-blue, .tag-green, .btn, .btn-primary, .btn-lg, .js-demo-trigger.
   ===================================================================== */
.br2 h2,.br2 h3{font-family:"Bricolage Grotesque",sans-serif;color:#0F172A;letter-spacing:-.01em}
.br2-head{max-width:760px;margin:0 auto 44px;text-align:center}
.br2-head h2{margin:14px 0 12px;font-size:38px;line-height:1.15;font-weight:700}
.br2-head p{margin:0;font-size:16.5px;line-height:1.6;color:#475569}
.br2-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none}
.br2-ic svg{width:24px;height:24px}
.br2-ic.b{background:#DBEAFE;color:#1D4ED8}.br2-ic.g{background:#DCFCE7;color:#15803D}.br2-ic.v{background:#EDE9FE;color:#6D28D9}
.br2-ic.t{background:#CCFBF1;color:#0F766E}.br2-ic.a{background:#FEF3C7;color:#B45309}.br2-ic.s{background:#E2E8F0;color:#334155}

/* 1. korzyści */
.br2-gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.br2-gain{padding:26px 24px;border-radius:20px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 18px 40px -30px rgba(15,23,42,.35);transition:transform .2s,box-shadow .2s}
.br2-gain:hover{transform:translateY(-2px);box-shadow:0 22px 44px -28px rgba(15,23,42,.4)}
.br2-gain h3{margin:16px 0 8px;font-size:19px;font-weight:700;line-height:1.3}
.br2-gain p{margin:0;font-size:14.5px;line-height:1.6;color:#475569}

/* 2. przed i po */
.br2-vs{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.br2-vs-hd,.br2-vs-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) 40px minmax(0,1fr);gap:12px;align-items:stretch}
.br2-vs-row{min-height:74px}
.br2-vs-hd>*{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 18px}
.br2-vs-hd .no{color:#94A3B8}.br2-vs-hd .ok{color:#15803D}
.br2-vs-row .lab{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #E2E8F0;font-size:15px;font-weight:700;color:#0F172A;line-height:1.3}
.br2-vs-row .li{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:#EFF6FF;color:#2563EB}
.br2-vs-row .li svg{width:19px;height:19px}
.br2-vs-row .no,.br2-vs-row .ok{position:relative;display:flex;align-items:center;padding:14px 18px 14px 50px;border-radius:14px;font-size:14.5px;line-height:1.45}
.br2-vs-row .no{background:#F1F5F9;color:#64748B}
.br2-vs-row .ok{background:#fff;color:#0F172A;font-weight:600;border:1px solid #BBF7D0;box-shadow:0 14px 30px -24px rgba(22,163,74,.55)}
.br2-vs-row .no::before,.br2-vs-row .ok::before{content:"";position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%}
.br2-vs-row .no::before{background:#E2E8F0}
.br2-vs-row .no::after{content:"";position:absolute;left:23px;top:50%;width:10px;height:2px;margin-top:-1px;background:#94A3B8}
.br2-vs-row .ok::before{background:#DCFCE7}
.br2-vs-row .ok::after{content:"";position:absolute;left:25px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid #16A34A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.br2-vs-row .arr{display:grid;place-items:center;color:#93C5FD}
.br2-vs-row .arr svg{width:22px;height:22px}

/* 3. wdrożenie: tekst + podgląd, równa wysokość */
.br2-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
.br2-split-txt h2{margin:14px 0 12px;font-size:36px;line-height:1.15;font-weight:700}
.br2-split-txt>p{margin:0 0 20px;font-size:16px;line-height:1.65;color:#475569}
.br2-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.br2-steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#F8FAFC;border:1px solid #E2E8F0;font-size:14.5px;line-height:1.5;color:#475569}
.br2-steps li>span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:#2563EB;color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:15px}
.br2-steps b{display:block;color:#0F172A;font-size:15px;margin-bottom:2px}
.br2-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}
.br2-mock-bar{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;background:#F8FAFC;border-bottom:1px solid #E2E8F0}
.br2-mock-bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.br2-mock-bar span{margin-left:10px;font-size:12.5px;font-weight:600;color:#64748B}
.br2-mock-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px}
.br2-sel{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1.5px solid #2563EB;background:#fff;box-shadow:0 0 0 4px #EFF6FF}
.br2-sel .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94A3B8}
.br2-sel b{flex:1;font-size:14px;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br2-sel svg{width:18px;height:18px;color:#2563EB;transform:rotate(180deg)}
.br2-list{border-radius:12px;border:1px solid #E2E8F0;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 30px -22px rgba(15,23,42,.4)}
.br2-list .it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px}
.br2-list .it.on{background:#EFF6FF}
.br2-list .it i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2563EB,#1E3A8A);flex:none}
.br2-list .it i.v{background:linear-gradient(135deg,#7C3AED,#4C1D95)}.br2-list .it i.a{background:linear-gradient(135deg,#F59E0B,#B45309)}.br2-list .it i.t{background:linear-gradient(135deg,#0D9488,#115E59)}
.br2-list .it.add i{background:#F1F5F9;color:#2563EB;font-size:16px}
.br2-list .it div{flex:1;min-width:0}
.br2-list .it b{display:block;font-size:13.5px;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br2-list .it.add b{color:#2563EB}
.br2-list .it small{display:block;font-size:11.5px;color:#64748B}
.br2-list .ck{width:18px;height:18px;border-radius:50%;background:#2563EB;position:relative;flex:none}
.br2-list .ck::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.br2-ntf{margin-top:auto;border-radius:12px;border:1px solid #E2E8F0;background:#fff;overflow:hidden}
.br2-ntf-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F8FAFC;border-bottom:1px solid #EEF2F6}
.br2-ntf-h .bell{position:relative;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#EFF6FF;color:#2563EB}
.br2-ntf-h .bell svg{width:16px;height:16px}
.br2-ntf-h .bell i{position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 2px #EFF6FF}
.br2-ntf-h b{font-size:13.5px;color:#0F172A}
.br2-ntf-h em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;color:#64748B}
.br2-ntf-it{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid #F1F5F9}
.br2-ntf-it:first-of-type{border-top:0}
.br2-ntf-it .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.br2-ntf-it .ic svg{width:16px;height:16px}
.br2-ntf-it .ic.b{background:#DBEAFE;color:#1D4ED8}.br2-ntf-it .ic.v{background:#EDE9FE;color:#6D28D9}.br2-ntf-it .ic.a{background:#FEF3C7;color:#B45309}
.br2-ntf-it div{flex:1;min-width:0}
.br2-ntf-it b{display:block;font-size:13px;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br2-ntf-it small{display:block;font-size:11.5px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br2-ntf-it time{font-size:11.5px;font-weight:600;color:#94A3B8;flex:none}

/* 4. modele */
.br2-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.br2-model{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:20px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 18px 40px -30px rgba(15,23,42,.35)}
.br2-model-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:4px}
.br2-model-h .n{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:#0F172A;color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px}
.br2-model h3{margin:0;font-size:19px;font-weight:700;line-height:1.25}
.br2-model-h small{display:block;margin-top:4px;font-size:13px;color:#64748B}
.br2-who{flex:1;padding:12px 14px;border-radius:14px;background:#F5F3FF}
.br2-who.b{background:#EFF6FF}
.br2-who .k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6D28D9;margin-bottom:6px}
.br2-who.b .k{color:#1D4ED8}
.br2-who ul{list-style:none;margin:0;padding:0}
.br2-who li{position:relative;padding:3px 0 3px 16px;font-size:14px;line-height:1.45;color:#334155}
.br2-who li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:#7C3AED}
.br2-who.b li::before{background:#2563EB}

/* 5. integracje */
.br2-ints{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.br2-int{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:16px;background:#F8FAFC;border:1px solid #E2E8F0}
.br2-int b{font-size:15.5px;color:#0F172A}
.br2-int span{font-size:13px;line-height:1.45;color:#64748B}
.br2-int.auto{background:#F0FDF4;border-color:#BBF7D0}
.br2-int.auto span{color:#15803D;font-weight:600}
.br2-int.api{background:#EFF6FF;border-color:#BFDBFE}
.br2-more-c{margin:22px 0 0;text-align:center}
.br2-more{font-size:15px;font-weight:600;color:#2563EB;text-decoration:none}
.br2-more:hover{text-decoration:underline}

/* 6. bezpieczeństwo */
.br2-sec4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.br2-sec{padding:22px 20px;border-radius:18px;background:#fff;border:1px solid #E2E8F0}
.br2-sec h3{margin:14px 0 6px;font-size:17px;font-weight:700}
.br2-sec p{margin:0;font-size:14px;line-height:1.55;color:#475569}

/* 7. plan BIURO */
.br2-plan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:40px 44px;border-radius:24px;background:linear-gradient(135deg,#0F172A,#1E293B 60%,#1E3A8A);color:#fff;box-shadow:0 40px 80px -40px rgba(15,23,42,.7)}
.br2-plan-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#93C5FD;background:rgba(37,99,235,.18);border:1px solid rgba(96,165,250,.35);padding:5px 12px;border-radius:999px}
.br2-plan h2{margin:14px 0 12px;font-size:36px;line-height:1.15;font-weight:800;color:#fff}
.br2-plan-l p{margin:0;font-size:16px;line-height:1.6;color:#CBD5E1}
.br2-plan-cta{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:26px}
.br2-plan-link{font-size:15px;font-weight:600;color:#BFDBFE;text-decoration:none}
.br2-plan-link:hover{color:#fff}
.br2-plan-r{list-style:none;margin:0;padding:22px 24px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px}
.br2-plan-r li{position:relative;padding-left:30px;font-size:15px;line-height:1.45;color:#E2E8F0}
.br2-plan-r li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(34,197,94,.2)}
.br2-plan-r li::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid #4ADE80;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* responsywność */
@media (max-width:1080px){
  .br2-ints{grid-template-columns:repeat(2,minmax(0,1fr))}
  .br2-sec4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .br2-vs-hd{display:none}
  .br2-vs-row{min-height:0}
  .br2-vs{gap:14px}
  .br2-vs-row{grid-template-columns:1fr;gap:6px;padding:12px;border-radius:16px;background:#fff;border:1px solid #E2E8F0}
  .br2-vs-row .lab{border:0;padding:4px 4px 6px}
  .br2-vs-row .arr{height:18px;transform:rotate(90deg)}
  .br2-vs-row .arr svg{width:18px;height:18px}
  .br2-head{margin-bottom:30px}
  .br2-head h2,.br2-split-txt h2,.br2-plan h2{font-size:28px}
  .br2-gains,.br2-models{grid-template-columns:1fr}
  .br2-split{grid-template-columns:1fr;gap:32px}
  .br2-plan{grid-template-columns:1fr;gap:26px;padding:28px 22px}
}
@media (max-width:560px){
  .br2-ints,.br2-sec4{grid-template-columns:1fr}
}
.br2-model-h{min-height:66px}
@media (max-width:900px){.br2-model-h{min-height:0}}