:root {
            --primary: #1e293b;       /* Głęboki granat */
            --secondary: #547169;     /* Szałwiowa zieleń */
            --bg-light: #e9f0f7;      /* Delikatnie zgaszony błękit */
            --text-dark: #0f172a;     /* Ciemny tekst */
            --text-light: #586579;    /* Szary tekst */
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html { scroll-padding-top: 80px; }
        @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            color: var(--text-dark);
            background-color: var(--bg-light);
            line-height: 1.6;
        }

        /* Menu górne */
        header {
            background-color: var(--white);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .nav-container {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        .logo {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: 0.5px;
        }

        nav a {
            text-decoration: none;
            color: var(--text-light);
            margin-left: 25px;
            font-weight: 500;
            font-size: 15px;
            transition: color 0.3s;
        }

        nav a:hover {
            color: var(--secondary);
        }

        /* Sekcja główna (Hero) */
        .hero {
            background-color: #dfe9f3;
            padding: 60px 20px;
        }

        .hero-container {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
        }

        .hero-text {
            flex: 1.2;
        }

        .hero-text h1 {
            font-size: 36px;
            font-weight: 700;
            color: var(--primary);
            line-height: 1.3;
            margin-bottom: 20px;
        }

        .hero-text p {
            font-size: 17px;
            color: var(--text-light);
            margin-bottom: 30px;
        }

        .hero-image-box {
            flex: 0.8;
            display: flex;
            justify-content: center;
        }

        .hero-img {
            width: 100%;
            max-width: 360px;
            height: auto;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.08);
            aspect-ratio: 4 / 5;
            object-fit: cover;
        }

        .btn {
            display: inline-block;
            background-color: var(--primary);
            color: var(--white);
            padding: 14px 30px;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 500;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: var(--secondary);
        }

        /* Sekcje */
        .section-white {
            background-color: #f1f6fb;
            padding: 80px 20px;
        }

        .section-gray {
            background-color: var(--bg-light);
            padding: 80px 20px;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
        }

        h2 {
            font-size: 28px;
            color: var(--primary);
            margin-bottom: 30px;
            font-weight: 700;
        }

        .content-p {
            font-size: 16px;
            color: var(--text-light);
            margin-bottom: 20px;
        }

        .bold-lead {
            font-weight: 600;
        }

        .italic-quote {
            margin-top: 35px;
            font-style: italic;
            text-align: center;
            color: var(--primary);
        }

        /* Kolumny */
        .grid-columns {
            display: flex;
            gap: 40px;
            margin-top: 30px;
        }

        .column-box {
            flex: 1;
            background-color: var(--bg-light);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid rgba(0,0,0,0.02);
        }

        .column-box.featured {
            background-color: var(--white);
            border: 1px solid #e2e8f0;
        }

        .column-box h3 {
            color: var(--primary);
            margin-bottom: 12px;
            font-size: 19px;
            font-weight: 600;
        }

        .column-box .content-p-compact {
            margin-bottom: 5px;
        }

        .points-list {
            list-style: none;
            margin-top: 15px;
        }

        .points-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 12px;
            color: var(--text-light);
            font-size: 15px;
            display: flex;
            align-items: flex-start;
        }

        .points-list li svg {
            position: absolute;
            left: 0;
            top: 4px;
            color: var(--secondary);
            flex-shrink: 0;
        }

        /* Diagnostyka */
        .diag-wrapper {
            display: flex;
            gap: 30px;
            margin-top: 25px;
        }

        .diag-card {
            flex: 1;
            background: var(--white);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid rgba(0,0,0,0.04);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .diag-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.02);
        }

        .diag-card h3 {
            font-size: 19px;
            color: var(--primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .diag-card h3 svg {
            color: var(--secondary);
            flex-shrink: 0;
        }

        /* Plakietki */
        .badges {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 35px;
        }

        .badge {
            background: #d3e0ed;
            color: var(--primary);
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
        }

        /* Cennik */
        .price-grid {
            display: flex;
            gap: 30px;
            margin-top: 30px;
        }

        .price-card {
            flex: 1;
            background-color: var(--white);
            padding: 35px;
            border-radius: 20px;
            border: 1px solid rgba(0,0,0,0.04);
            box-shadow: 0 10px 25px rgba(0,0,0,0.02);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .price-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.05);
        }

        .price-card.bg-shaded {
            background-color: var(--bg-light);
        }

        .price-header h3 {
            font-size: 20px;
            color: var(--primary);
            margin-bottom: 15px;
        }

        .price-amount {
            font-size: 32px;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 20px;
        }

        .price-include {
            font-size: 14px;
            color: var(--text-light);
            border-top: 1px solid #e2e8f0;
            padding-top: 15px;
        }

        /* Kontakt */
        .section-contact-bg {
            background-color: #dfe9f3;
        }

        .contact-card {
            background: var(--white);
            max-width: 600px;
            margin: 0 auto;
            padding: 40px;
            border-radius: 20px;
            border: 1px solid rgba(0,0,0,0.04);
            text-align: center;
        }

        .contact-link {
            display: inline-block;
            margin: 10px 20px;
            font-size: 18px;
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s;
        }

        .contact-link svg {
            vertical-align: middle;
            margin-right: 8px;
            color: var(--secondary);
            transition: color 0.3s;
        }

        .contact-link:hover {
            color: var(--secondary);
        }
        
        .contact-link:hover svg {
            color: var(--secondary);
        }

        footer {
            background-color: var(--primary);
            color: rgba(255,255,255,0.6);
            text-align: center;
            padding: 25px;
            font-size: 14px;
        }

        /* Responsywność */
        @media (max-width: 768px) {
            .hero-container {
                flex-direction: column-reverse;
                text-align: center;
            }
            .grid-columns, .diag-wrapper, .price-grid {
                flex-direction: column;
                gap: 20px;
            }
            .section-white, .section-gray {
                padding: 50px 20px;
            }
            .contact-link {
                display: block;
                margin: 15px 0;
            }
        }

        .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .points-list li svg { width: 16px; height: 16px; }
        .online-note { font-size: 15px; color: var(--primary); font-weight: 500; margin-bottom: 30px; }
        .hero-text h1 { font-size: 34px; }
        a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; border-radius: 6px; }
        .faq { margin-top: 10px; }
        .faq details { background: var(--white); border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 24px; margin-bottom: 14px; }
        .faq summary { cursor: pointer; font-weight: 600; color: var(--primary); }
        .faq details[open] summary { margin-bottom: 10px; }
        .faq p { color: var(--text-light); font-size: 15px; }
        .call-bar { display: none; }
        @media (max-width: 768px) {
            .nav-container { flex-direction: column; gap: 10px; padding: 14px 20px; }
            nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
            nav a { margin-left: 0; font-size: 14px; }
            .hero-text h1 { font-size: 28px; }
            .call-bar { display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100; text-align: center; background: var(--secondary); color: var(--white); padding: 14px; border-radius: 50px; text-decoration: none; font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
            footer { padding-bottom: 90px; }
        }
        .breadcrumb { font-size: 14px; color: var(--text-light); margin-bottom: 18px; }
        .breadcrumb a { color: var(--text-light); }
        .page-hero { background-color: #dfe9f3; padding: 50px 20px 40px; }
        .page-hero h1 { font-size: 34px; color: var(--primary); line-height: 1.3; margin-bottom: 16px; max-width: 800px; }
        .page-hero .lead { font-size: 18px; color: var(--text-light); max-width: 760px; margin-bottom: 26px; }
        .prose { max-width: 800px; }
        .prose h2 { margin-top: 44px; margin-bottom: 16px; }
        .prose h2:first-child { margin-top: 0; }
        .prose .points-list li { font-size: 16px; }
        .steps { margin: 20px 0 0 22px; color: var(--text-light); }
        .steps li { margin-bottom: 14px; padding-left: 6px; }
        .steps strong { color: var(--primary); }
        .note { background: #e8efed; border-radius: 14px; padding: 20px 24px; margin-top: 24px; color: var(--primary); font-size: 15px; }
        .cta-box { background: var(--primary); color: var(--white); border-radius: 20px; padding: 40px; margin-top: 50px; text-align: center; }
        .cta-box h2 { color: var(--white); margin-bottom: 12px; font-size: 24px; }
        .cta-box p { color: rgba(255,255,255,0.8); margin-bottom: 22px; }
        .cta-box .btn { background: var(--white); color: var(--primary); margin: 6px; }
        .cta-box .btn:hover { background: var(--secondary); color: var(--white); }
        .related { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
        .related a, .more-link { color: var(--secondary); font-weight: 600; text-decoration: none; }
        .related a { background: #e2e8f0; color: var(--primary); padding: 10px 20px; border-radius: 50px; font-size: 14px; }
        .related a:hover, .more-link:hover { text-decoration: underline; }
        .more-link { display: inline-block; margin-top: 4px; }
        @media (max-width: 768px) { .page-hero h1 { font-size: 27px; } .cta-box { padding: 30px 20px; } }


/* v3 */
nav a { margin-left: 18px; font-size: 14px; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.jump a { background: #e2e8f0; color: var(--primary); text-decoration: none; padding: 9px 18px; border-radius: 50px; font-size: 14px; font-weight: 500; }
.jump a:hover { background: var(--secondary); color: var(--white); }
.faq-page details p, .faq-page details li { color: var(--text-light); font-size: 15px; margin-bottom: 10px; }
.faq-page details .points-list { margin: 8px 0 14px; }
.faq-page .steps { margin-top: 8px; }
.faq-page h2 { margin-top: 44px; }
.faq-page h2:first-of-type { margin-top: 0; }
.forms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 25px; }
.forms-grid .diag-card h3 { display: block; }
.prose h2 .qa-n { display: none; }
.footer-links { margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,0.85); margin: 0 10px; font-size: 14px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
@media (max-width: 768px) { header { position: static; } nav a { font-size: 13px; } .footer-links a { display: inline-block; margin: 4px 8px; } }

/* v4 */
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.25; }
.brand-sub { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.nt { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; }
nav { display: flex; align-items: center; gap: 2px; }
nav a { margin-left: 0; padding: 8px 12px; }
.dd { position: relative; }
.dd > a::after { content: "▾"; font-size: 11px; margin-left: 5px; }
.dd-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; background: var(--white); border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 28px rgba(0,0,0,0.08); padding: 8px; z-index: 1200; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { display: block; }
.dd-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.dd-menu a:hover { background: #f1f5f9; }
nav a.nav-cta { background: var(--primary); color: var(--white); border-radius: 50px; padding: 10px 20px; margin-left: 10px; }
nav a.nav-cta:hover { background: var(--secondary); color: var(--white); }
.hero-text .eyebrow { font-size: 14px; font-weight: 600; color: var(--secondary); margin-bottom: 14px; line-height: 1.4; }
.hero-text .hero-sub { margin-bottom: 18px; }
.hero-text .online-note { margin-bottom: 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn-ghost:hover { background: var(--primary); color: var(--white); }
.trust { background: var(--white); border-bottom: 1px solid #e2e8f0; padding: 26px 20px; }
.trust ul { list-style: none; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.trust li { display: flex; gap: 10px; font-size: 14px; font-weight: 500; color: var(--primary); line-height: 1.45; }
.trust svg { flex: none; width: 18px; height: 18px; color: var(--secondary); margin-top: 2px; }
.prose.wide { max-width: 860px; }
.prose h3 { font-size: 20px; color: var(--primary); margin: 34px 0 12px; }
.prose .btn { margin-top: 6px; }
.when-list { list-style: none; margin: 18px 0 24px; display: grid; gap: 14px; }
.when-list li { background: var(--white); border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 22px; color: var(--text-light); font-size: 15px; }
.when-list strong { display: block; color: var(--primary); font-size: 16px; margin-bottom: 4px; }
.call-bar { display: none; }
@media (max-width: 1020px) {
    header { position: sticky; }
    .nav-container { flex-direction: row; flex-wrap: wrap; gap: 0; padding: 12px 20px; }
    .burger { display: inline-block; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--primary); padding: 9px 18px; border-radius: 50px; box-shadow: inset 0 0 0 2px #cbd5e1; }
    .nt:focus-visible + .burger { outline: 3px solid var(--secondary); outline-offset: 3px; }
    nav { display: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: 100%; margin-top: 10px; padding-top: 6px; border-top: 1px solid #e2e8f0; }
    .nt:checked ~ nav { display: flex; }
    nav a { margin-left: 0; font-size: 15px; padding: 12px 6px; }
    .dd > a::after { content: ""; }
    .dd-menu { display: block; position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 4px 14px; background: transparent; }
    .dd-menu a { padding: 9px 6px; font-size: 14px; }
    nav a.nav-cta { text-align: center; margin: 10px 0 4px; padding: 13px 20px; }
}
@media (max-width: 768px) {
    .brand-sub { font-size: 11px; max-width: 235px; }
    .hero { padding: 26px 20px 40px; }
    .hero-container { flex-direction: column; text-align: left; gap: 28px; }
    .hero-text h1 { font-size: 25px; margin-bottom: 14px; }
    .hero-text .hero-sub { font-size: 15px; margin-bottom: 14px; }
    .hero-text .online-note { font-size: 14px; margin-bottom: 18px; }
    .hero-text .eyebrow { font-size: 12px; margin-bottom: 10px; }
    .hero-cta .btn { flex: 1 1 100%; text-align: center; }
    .trust { padding: 22px 20px; }
    .call-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1100; gap: 10px; background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
    .call-bar a { flex: 1; text-align: center; padding: 14px 10px; border-radius: 50px; font-weight: 600; text-decoration: none; color: var(--white); box-shadow: 0 8px 20px rgba(0,0,0,0.22); }
    .cb-main { background: var(--primary); }
    .cb-call { background: var(--secondary); }
}


/* v5 – wyjustowany tekst */
.hero-text p,
.content-p,
.prose p,
.prose li,
.points-list li,
.price-include,
.column-box p,
.diag-card p,
.when-list li,
.steps li,
.faq p,
.faq li,
.faq-page details p,
.faq-page details li,
.note,
.page-hero .lead {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* elementy, które mają zostać wyśrodkowane */
.italic-quote,
.contact-card p,
.cta-box p {
    text-align: center;
    hyphens: manual;
}

@media (max-width: 768px) {
    .hero-text p, .content-p, .prose p, .prose li, .points-list li, .faq p, .faq li,
    .faq-page details p, .faq-page details li, .when-list li, .steps li, .note, .page-hero .lead {
        text-align: justify;
        hyphens: auto;
    }
}