/* Landingi SEO: /szkolenia-bur/, /szkolenia-dofinansowane-kfs/, /szkolenia-ai-dla-firm/ */
.er-sl {
    --c-navy: #0B1E45;
    --c-accent: #1E5FD9;
    --c-accent-hover: #1751BD;
    --c-bg: #F4F6FB;
    --c-text-2: #475569;
    --c-text-3: #64748B;
    --c-border: rgba(15,40,90,0.08);
    --c-tint: #E6EEFC;
    --c-tint-dark: #0B3A7A;
    --c-ok: #0F6E56;
    --c-ok-bg: #E1F5EE;
    --r: 16px;
    --t: 0.15s ease;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--c-navy);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
body.er-sl-template { background: #fff !important; }
.er-sl *, .er-sl *::before, .er-sl *::after { box-sizing: border-box; }
.er-sl,
.er-sl h1, .er-sl h2, .er-sl h3, .er-sl p, .er-sl li, .er-sl a, .er-sl span,
.er-sl td, .er-sl th, .er-sl summary, .er-sl strong {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    letter-spacing: normal !important;
}
.er-sl i.ti, .er-sl [class^="ti-"], .er-sl [class*=" ti-"] { font-family: 'tabler-icons' !important; }
.er-sl h1, .er-sl h2, .er-sl h3 { margin: 0 !important; color: var(--c-navy); text-transform: none !important; }
.er-sl p { margin: 0; line-height: 1.7; }
.er-sl ul, .er-sl ol { margin: 0; padding: 0; }
.er-sl a { text-decoration: none; }
.er-sl section { scroll-margin-top: 90px; }
.er-sl .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.er-sl .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 13px 22px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 1px solid transparent !important;
    transition: background var(--t), transform 0.1s;
    white-space: nowrap;
}
.er-sl .btn:hover { transform: translateY(-1px); }
.er-sl .btn-primary { background: var(--c-accent) !important; color: #fff !important; }
.er-sl .btn-primary:hover { background: var(--c-accent-hover) !important; color: #fff !important; }
.er-sl .btn-dark { background: var(--c-navy) !important; color: #fff !important; }
.er-sl .btn-dark:hover { background: #142a5e !important; color: #fff !important; }
.er-sl .btn-light { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,0.7) !important; }
.er-sl .btn-light:hover { background: rgba(255,255,255,0.12) !important; }
.er-sl a:focus-visible, .er-sl summary:focus-visible, .er-sl .btn:focus-visible {
    outline: 3px solid var(--c-accent) !important;
    outline-offset: 3px !important;
}

.er-sl .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    background: var(--c-tint);
    color: var(--c-tint-dark);
    margin-bottom: 14px;
}

/* Hero */
.er-sl .hero { padding: 72px 0; background: linear-gradient(135deg, #F4F6FB 0%, #E6EEFC 100%); }
.er-sl .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.er-sl .hero .eyebrow { background: #fff; color: var(--c-accent); border: 1px solid rgba(30,95,217,0.18); }
.er-sl .hero h1 { font-size: 42px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; margin: 0 0 18px !important; }
.er-sl .hero h1 .hl { color: var(--c-accent); }
.er-sl .hero-lead { font-size: 16.5px; color: var(--c-text-2); max-width: 600px; margin-bottom: 26px !important; }
.er-sl .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.er-sl .facts {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(15,40,90,0.12);
}
.er-sl .facts-title { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 16px !important; letter-spacing: 0.5px !important; }
.er-sl .facts ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.er-sl .facts li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--c-text-2); }
.er-sl .facts li strong { display: block; color: var(--c-navy); font-size: 15px; margin-bottom: 2px; }
.er-sl .ic {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 11px;
    background: var(--c-tint);
    color: var(--c-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
}

/* Sekcje */
.er-sl .sec { padding: 72px 0; }
.er-sl .sec-alt { background: var(--c-bg); }
.er-sl .sec h2 { font-size: 30px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; margin: 0 0 18px !important; }
.er-sl .sec h3 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 28px 0 10px !important; }
.er-sl .prose p { font-size: 16px; color: var(--c-text-2); margin-bottom: 14px; }
.er-sl .prose a { color: var(--c-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.er-sl .prose ul { list-style: none; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.er-sl .prose li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.6; color: var(--c-text-2); }
.er-sl .prose li::before {
    content: "";
    position: absolute; left: 0; top: 4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--c-ok-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") no-repeat center / 11px;
}
.er-sl .prose li strong { color: var(--c-navy); }

/* Kroki */
.er-sl .steps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 24px; counter-reset: step; }
.er-sl .step { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r); padding: 24px; box-shadow: 0 2px 10px rgba(15,40,90,0.05); }
.er-sl .step h3 { margin: 0 0 8px !important; font-size: 18px !important; display: flex; align-items: center; gap: 12px; }
.er-sl .step h3::before {
    counter-increment: step;
    content: counter(step);
    width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
    background: var(--c-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
}
.er-sl .step p { font-size: 15px; color: var(--c-text-2); }

/* Karty z linkami */
.er-sl .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.er-sl .card {
    display: flex; flex-direction: column; gap: 10px;
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r);
    padding: 22px; color: var(--c-navy);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.er-sl a.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,40,90,0.10); border-color: rgba(30,95,217,0.25); }
.er-sl .card strong { font-size: 16px; font-weight: 700; }
.er-sl .card span.desc { font-size: 14px; line-height: 1.55; color: var(--c-text-2); }
.er-sl .card .more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--c-accent); }

/* Tabela porównawcza */
.er-sl .table-wrap { overflow-x: auto; margin-top: 20px; border: 1px solid var(--c-border); border-radius: var(--r); background: #fff; }
.er-sl table { width: 100%; border-collapse: collapse; min-width: 560px; margin: 0; }
.er-sl th, .er-sl td { padding: 14px 16px; text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.55; border-bottom: 1px solid var(--c-border); border-left: 0; border-right: 0; border-top: 0; }
.er-sl thead th { background: var(--c-navy); color: #fff; font-weight: 700; }
.er-sl tbody th { color: var(--c-navy); font-weight: 700; width: 26%; background: #FAFBFE; }
.er-sl tbody td { color: var(--c-text-2); }
.er-sl tbody tr:last-child th, .er-sl tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.er-sl .faq { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.er-sl .faq details { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; }
.er-sl .faq summary {
    list-style: none; cursor: pointer;
    padding: 18px 52px 18px 20px; position: relative;
    font-size: 16px; font-weight: 700; color: var(--c-navy); line-height: 1.4;
}
.er-sl .faq summary::-webkit-details-marker { display: none; }
.er-sl .faq summary::after {
    content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 22px; font-weight: 400; color: var(--c-accent);
}
.er-sl .faq details[open] summary::after { content: "\2212"; }
.er-sl .faq .answer { padding: 0 20px 18px; }
.er-sl .faq .answer p { font-size: 15px; color: var(--c-text-2); }
.er-sl .faq .answer a { color: var(--c-accent); font-weight: 600; text-decoration: underline; }

/* CTA */
.er-sl .cta { background: linear-gradient(135deg, #0B1E45 0%, #122A5C 100%); padding: 72px 0; text-align: center; color: #fff; }
.er-sl .cta h2 { color: #fff !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 auto 14px !important; max-width: 760px; }
.er-sl .cta p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 24px; font-size: 16px; }
.er-sl .cta .hero-actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .er-sl *, .er-sl *::before, .er-sl *::after { transition-duration: 0.01ms !important; }
}
@media (max-width: 1000px) {
    .er-sl .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .er-sl .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .er-sl .wrap { padding: 0 16px; }
    .er-sl .hero { padding: 36px 0; }
    .er-sl .hero h1 { font-size: 27px !important; }
    .er-sl .hero-lead { font-size: 15px; }
    .er-sl .hero-actions { flex-direction: column; }
    .er-sl .hero-actions .btn { width: 100%; justify-content: center; white-space: normal; }
    .er-sl .facts { padding: 20px; }
    .er-sl .sec, .er-sl .cta { padding: 40px 0; }
    .er-sl .sec h2, .er-sl .cta h2 { font-size: 22px !important; }
    .er-sl .sec h3 { font-size: 18px !important; }
    .er-sl .prose p, .er-sl .prose li { font-size: 15px; }
    .er-sl .steps, .er-sl .cards { grid-template-columns: 1fr; }
}