/*
AccountancySupport
*/
:root {
    --col1: #2d82c2;
    --col2: #0d1749;
    --dark: #333;
    --text: #444;
    --bgcol: #f5f5f5;
    --bglight: #f5f5f5;
    --borbis: #B0CB1F;
}

.col1 {
    color: var(--col1);
}

.bgcol {
    background: var(--bgcol);
}

/* scroll */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--col1);
}

::-webkit-scrollbar-track {
    background: #fefefe;
}

/* font */
@font-face {
    font-family: 'Mulish';
    font-weight: 200 1000;
    src: url(/font/Mulish.ttf);
    font-display: swap;
}

/* podstawowe style */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

body {
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body, input, textarea, select, button {
    font-family: 'Mulish', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dark);
}

h1 {
    font-size: 320%;
}

h2 {
    font-size: 220%;
    letter-spacing: 1px;
}

h3 {
    font-size: 140%;
}

h4 {
    font-size: 120%;
}

h5 {
    font-size: 110%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: .25s ease;
    outline: none;
    color: var(--col1);
}

a:hover {
    color: var(--col2);
}

a:active, a:focus {
    outline: 0;
    border: none;
}

p {
    margin: 0 auto 25px;
}

p, li, label {
    text-align: justify;
}

ul li {
    list-style: disc;
}

p.limited {
    max-width: 1000px;
}

p.small {
    font-size: 90%;
}

p.large {
    font-size: 110%;
}

p:last-child {
    margin-bottom: 0;
}

label a {
    color: var(--col1);
}

label a:hover {
    color: var(--col2);
}

iframe {
    display: block;
    max-width: 100%;
}

.center, .center p, p.center {
    text-align: center;
}

.right, .right p, p.right {
    text-align: right;
}

.justify, .justify p, p.justify {
    text-align: justify;
}

b, strong, .strong {
    font-weight: 600;
}

:focus {
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

img.left {
    float: left;
    margin: 5px 30px 30px 0;
}

img.right {
    float: right;
    margin: 5px 0 30px 30px;
}

@media(min-width: 1001px) {
    img.left, img.right {
        max-width: calc(33.333% - 20px);
    }
}

img.rounded {
    border-radius: 10px;
}

.center img, img.center {
    margin: 0 auto;
}

ol, ul {
    margin: 0;
    padding-left: 20px;
}

ol li:not(:last-child), ul li:not(:last-child) {
    margin-bottom: 5px;
}

li ul, li ol {
    margin-top: 5px;
}

ul.p, ol.p {
    margin-top: -20px;
    margin-bottom: 25px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 35px;
    width: 100%;
}

.container2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: stretch;
}

.abs-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search], input[type=date], input[type=number], textarea, select {
    padding: 10px 15px;
    transition: .3s ease;
    line-height: 1.5;
    width: 100%;
    color: var(--text);
    box-shadow: none;
    border: 2px solid var(--bglight);
    background: var(--bglight);
    height: auto;
    font-size: 90%;
    border-radius: 0;
}

input[type=text]:focus, textarea:focus, input[type=email]:focus, input[type=search]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=date]:focus {
    border-color: var(--col1);
    background: #fff;
}

.button, button, input[type=submit] {
    padding: 10px 32px;
    display: inline-block;
    transition: .3s ease;
    border: 0;
    border-radius: 25px;
    cursor: pointer;
    background: #226FA8;
    color: #fff;
    font-weight: 500;
    font-size: 100%;
    text-transform: none;
    margin-top: 1rem;
}

.button.large, button.large, input[type=submit].large {
    font-size: 120%;
    padding: 15px 35px;
    font-weight: 300;
    letter-spacing: .5px;
}

.button:hover, button:hover, input[type=submit]:hover, .wpis:hover .button {
    background: #3C8BC6;
    color: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
}

button[disabled], input[disabled], input[type=submit]:disabled {
    pointer-events: none;
    opacity: .5;
}

/* uklad */
.section {
    padding: 45px 0;
    position: relative;
}

.bglight {
    background: #f5f5f5;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    position: relative;
}

.row.smallspace {
    margin: 0 -5px;
}

.row.nospace {
    margin: 0;
}

.row.unwrap {
    flex-wrap: nowrap;
}

.row.spread {
    justify-content: space-between;
}

.row.centered {
    align-items: center;
}

.row.middle, .row.middle-spread {
    justify-content: center;
    margin-top: 2rem;
}

.col {
    width: 100%;
    padding: 15px;
    position: relative;
}

.col.shrink {
    flex-shrink: 9999;
}

.row.smallspace > .col {
    padding: 5px;
}

.row.nospace > .col {
    padding: 0;
}

.col.auto {
    width: auto;
}

@media(min-width: 1001px) {
    .row.reverse {
        flex-direction: row-reverse;
    }

    .row.bigspace {
        margin: -30px;
    }

    .row.bigspace > .col {
        padding: 30px;
    }

    .row.hugespace {
        margin: -50px;
    }

    .row.hugespace > .col {
        padding: 50px;
    }

    .col_11 {
        width: 91.6666%;
    }

    .col_10 {
        width: 83.3333%;
    }

    .col_9 {
        width: 75%;
    }

    .col_8 {
        width: 66.6666%;
    }

    .col_7 {
        width: 58.3333%;
    }

    .col_6 {
        width: 50%;
    }

    .col_5 {
        width: 41.6666%;
    }

    .col_4 {
        width: 33.3333%;
    }

    .col_3 {
        width: 25%;
    }

    .col_24 {
        width: 20%;
    }

    .col_2 {
        width: 16.6666%;
    }

    .col_1 {
        width: 8.3333%;
    }
}

.bottom_space_5 {
    margin-bottom: 5px !important;
}

.bottom_space_10 {
    margin-bottom: 10px !important;
}

.bottom_space_15 {
    margin-bottom: 15px !important;
}

.bottom_space_30 {
    margin-bottom: 30px !important;
}

.bottom_space_45 {
    margin-bottom: 45px !important;
}

.bottom_space_60 {
    margin-bottom: 60px !important;
}

.no_pad_top {
    padding-top: 0 !important;
}

.no_pad_bot {
    padding-bottom: 0 !important;
}

.above {
    position: relative;
    z-index: 5;
}

/* landing page */
.landing-container {
    padding: 10px;
    height: 100vh;
    width: 100vw;
}

.landing {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.landing:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,rgba(16,16,16,0.2) 0%,#101010 100%);
    opacity: .3;
}

.landing .button {
    text-transform: none;
    border: 2px solid var(--col1);
    background: transparent;
    color: var(--col1);
    padding: 10px 0;
    width: 290px;
}

.landing .button.alt:not(:hover) {
    border-color: var(--col2);
    color: var(--col2);
}

.landing .button:hover {
    background: var(--col2);
    border-color: var(--col2);
    color: #fff;
}

/* --- SPÓJNY STICKY HEADER – WERSJA BEZ SKAKANIA --- */
header{
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: #fff;
    padding: 16px 0;
    transition: box-shadow .2s ease;
}

header.scrolled{
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* header - fixed – nie zmieniamy wysokości */
header.fixed {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.10);
}

/* MOBILE DRAWER – wersja 1 */
@media (max-width: 1000px){
    header nav{
        position: fixed;
        right: 0;
        top: var(--header-h, 60px);
        height: calc(100% - var(--header-h, 60px));
        width: 280px;
        background: linear-gradient(45deg, var(--col2), var(--col1));
        z-index: 1001;
        flex-direction: column;
        margin: 0;
        transition: transform .3s ease;
        transform: translateX(100%);
    }
    header nav.active{ transform: translateX(0); }

    .logo img{ height: 40px; }
}

/* cień po scrollu */
header.scrolled{
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.logo img {
    height: 70px;
    width: auto;
    transition: .3s ease;
}

/* header - menu */
nav {
    margin: 0 -20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav li {
    list-style: none;
    position: relative;
}

nav a {
    padding: 0 20px;
    color: var(--col2);
}

nav li:hover > a, nav a:hover, nav a.active {
    color: var(--col1);
}

nav a span {
    position: relative;
}

nav a span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 50%;
    bottom: -10px;
    background: var(--col1);
    transition: .3s ease;
    transform-origin: 0 0;
    transform: scaleX(0) translateX(-50%);
}

nav a:hover span:after, nav li:hover > a span:after, nav a.active span:after {
    transform: scaleX(1) translateX(-50%);
}

nav .sub-menu a:hover {
    background: var(--col1);
    color: #fff;
}

/* NAV – poziome menu na desktopie */
nav ul {
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
}

/* header - submenu */
@media(min-width: 1001px) {
    .sub-menu-container {
        position: absolute;
        left: 0;
        padding-top: 50px;
        transition: .1s padding ease, .1s opacity ease, 0s transform .1s ease, top .07s ease;
        opacity: 0;
        transform: scale(0);
    }

    li:hover > .sub-menu-container {
        padding-top: 35px;
        opacity: 1;
        transform: scale(1);
        transition: padding .3s ease, opacity .3s ease,top .3s ease;
    }

    .fixed li:hover > .sub-menu-container {
        padding-top: 20px;
    }

    .sub-menu {
        background: #fff;
        padding: 0 15px 15px;
        width: 240px;
        position: relative;
        text-align: left;
        box-shadow: 0 10px 10px rgb(113 61 69 / 0.15);
    }

    .parent {
        position: relative;
    }

    .parent:after, .parent:before {
        top: calc(100% + 8px);
        left: 50%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .parent:after {
        border-color: transparent;
        border-top-color: #fff;
        border-width: 8px;
        margin-left: -8px;
    }

    .parent:before {
        border-color: transparent;
        border-top-color: var(--col1);
        border-width: 11px;
        margin-left: -11px;
        transition: .3s ease;
        transform: scaleX(0);
    }

    li:hover .parent:before, .parent:hover:before {
        transform: scaleX(1);
    }

    .sub-menu a {
        display: block;
        padding: 5px;
        position: relative;
        font-size: 95%;
    }

    header nav {
        padding-top: 50px;
    }

    nav a {
        line-height: 30px;
    }
}

/* header - fixed – druga definicja, spójna */
header.fixed {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.10);
    padding: 16px 0;
}

@media(min-width: 1001px) {
    .fixed .logo img {
        height: 70px;
    }

    header.fixed nav {
        padding-top: 0;
    }
}

/* dodatkowy mobile nav */
@media (max-width: 1000px) {
    nav ul {
        flex-direction: column;
    }
}

/* intro */
.intro img {
    width: 100%;
}

.intro, .intro .container {
    position: relative;
}

.intro-content {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.intro h1 span {
    font-weight: 700;
    position: relative;
    z-index: 10;
    color: #fff;
    letter-spacing: -1px;
    display: inline-block;
    padding: 10px 15px;
}

.intro h1 span:before, .intro h1 span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.intro h1 span:before {
    background: var(--col2);
    transform: skew(-10deg);
}

.intro h1 span:after {
    background: var(--col1);
    transform: skew(10deg);
}

.shape-divider {
    height: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
}

.shape-divider svg {
    fill: #f5f5f5;
    position: absolute;
    width: 102%;
    left: -1%;
    bottom: -1px;
    height: 100%;
}

.shape-divider svg polygon:nth-child(2) {
    opacity: .15;
}

.shape-divider svg rect {
    opacity: .3;
}

/* kolo */
.kolo {
    animation: kolo 12s forwards infinite linear;
}

@keyframes kolo {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* jak pracuje */
.large-iko {
    font-size: 300%;
}

.col.to_bottom {
    margin-top: auto;
    margin-bottom: -45px;
}

/* page header */
.page-header {
    background: var(--col1);
    background: linear-gradient(45deg, var(--col2), var(--col1));
    padding: 15px 0;
}

.page-header h1 {
    font-size: 180%;
    color: #fff;
}

/* title */
.title {
    position: relative;
    padding-bottom: 20px;
}

.title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 50px;
    background: var(--col1);
}

.center .title:after, .center.title:after {
    left: 50%;
    transform: translateX(-50%);
}

/* oferta */
.oferta img {
    width: 120px;
}

/* wartosci */
.wartosc {
    padding: 15px 0;
    display: flex;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.wartosc:nth-child(even) {
    flex-direction: row-reverse;
}

.wartosc:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.wartosc .num {
    color: var(--col1);
    font-size: 400%;
    font-weight: 850;
    opacity: .25;
}

.wartosc .desc {
    font-size: 120%;
    font-weight: 300;
}

.wartosc:nth-child(odd) .desc {
    margin-left: 15px;
}

.wartosc:nth-child(even) .desc {
    margin-right: 15px;
}

/* cennik */
.cennik-container {
    overflow: auto;
    padding: 0 30px;
}

.cennik {
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.cennik .add {
    padding-bottom: 20px;
    text-align: right;
    font-size: 90%;
}

.cennik td:not(.add) {
    padding-top: 20px;
    font-weight: 700;
    font-size: 120%;
}

cennik td:not(.add):last-child {
    padding-left: 40px;
    color: var(--col1);
    text-align: right;
}

.cennik tr:not(:last-child) .add {
    border-bottom: 1px solid #ccc;
}

/* kontakt */
.row.kontakt {
    margin: 0;
}

.kontakt > .col {
    padding: 5px;
}

.dane {
    display: flex;
    flex-direction: column;
    top: 2rem;
}

.dane p {
    width: 100%;
}

.kontakt i {
    width: 22px;
    margin-right: 10px;
    color: var(--col1);
}

.kontakt .bglight a {
    color: inherit;
}

.kontakt .bglight a:hover {
    color: var(--col1);
}

.formularz-kontaktowy textarea {
    height: 140px;
}

/* formularz */
.formularz label {
    font-size: 85%;
}

input[type="checkbox"] {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.formularz .invalid, .formularz .invalid + .select2-container--default .select2-selection--single {
    border-color: #af0000;
}

input[type=checkbox].invalid {
    box-shadow: 0 0 2px #af0000;
}

.form-success, .form-error {
    background: #af0000;
    color: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    width: 100%;
}

.form-success {
    background: green;
}

/* footer */
footer {
    background-color: #F3F6FB !important;
    color: #000000 !important;
    padding: 2rem 0;
}

footer a {
    color: #000000 !important;
}

footer a:hover {
    color: #0073e6;
}

footer i {
    width: 20px;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    position: relative;
    top: 1px;
}

i.hidden {
    opacity: 0;
    color: transparent;
}

.footer-widgets {
    padding: 2rem 0;
}

.footer-widgets a {
    color: inherit;
}

.footer-widgets a:hover {
    color: #fff;
}

.copyright {
    padding: 1rem 0;
    font-size: 70%;
    text-align: center;
    border-top: 1px solid #eee;
}

footer .copyright a {
    color: #226FA8 !important;
}

/* flagi */
nav .flaga a {
    display: flex;
}

nav .flaga a img {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0%);
    transition: .3s ease;
}

nav .flaga a:hover img {
    box-shadow: 0 0 10px rgb(13 23 73 / 50%);
}

/* rwd */
@media(max-width: 1920px) {
    body, input, textarea, select, button {
        font-size: 18px;
    }
}

@media(max-width: 1400px) {
    body, input, textarea, select, button {
        font-size: 16px;
    }
}

@media(max-width: 1200px) {
    body, input, textarea, select, button {
        font-size: 15px;
    }
}

@media(min-width: 1001px) {
    .nopc {
        display: none !important;
    }
}

@media(max-width: 1000px) {
    .norwd {
        display: none !important;
    }

    .row.middle-spread {
        justify-content: space-between;
    }

    body, input, textarea, select, button {
        font-size: 14px;
    }

    header {
        padding: 15px 0;
    }

    header nav {
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        width: 280px;
        background: linear-gradient(45deg, var(--col2), var(--col1));
        z-index: 1001;
        flex-direction: column;
        margin: 0;
        transition: .3s ease;
        transform: translateX(100%);
    }

    header nav.active {
        transform: translateX(0);
    }

    header nav a, nav a:hover, nav a.active {
        font-size: 140%;
        padding: 5px;
        color: #fff;
        display: block;
    }

    nav a span:after {
        display: none;
    }

    .sub-menu-container {
        display: none;
    }

    .dim {
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #000;
        opacity: .5;
        z-index: 500;
        display: none;
    }

    nav ul {
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
    }

    nav ul li {
        list-style: none;
    }

    .menu-toggle {
        color: var(--col1);
        font-size: 150%;
        margin-left: 15px;
        height: 30px;
    }

    .logo img, .fixed .logo img, footer img {
        height: 40px;
    }

    .header-space {
        height: 60px;
    }

    h1 {
        font-size: 280%;
    }

    h2 {
        font-size: 180%;
    }

    .kontakt > .col {
        padding: 25px;
    }

    footer .row {
        padding: 10px 0;
    }

    footer .col {
        padding: 15px 30px !important;
    }

    footer .col:nth-child(1), footer .col:nth-child(2), footer .col:nth-child(3) {
        padding-bottom: 0 !important;
        line-height: 2;
    }

    footer .col:nth-child(3) {
        padding-top: 0 !important;
    }

    img.iko {
        width: 200px;
        margin: 0 auto;
    }

    .shape-divider svg {
        height: 75%;
    }

    img.kolo {
        max-width: 200px;
    }
}

@media(max-width: 690px) {
    .intro h1 {
        letter-spacing: 1px;
        font-size: 240%;
    }

    h2 {
        letter-spacing: 0.5px;
    }

    .shape-divider svg {
        height: 33%;
    }
}

@media(max-width: 480px) {
    .intro h1 {
        font-size: 200%;
    }

    h2 {
        font-size: 170%;
    }

    h3 {
        font-size: 130%;
    }

    h4 {
        font-size: 115%;
    }

    .intro h1 span {
        padding: 7px 12px;
    }
}

/* ===========================
   RWD – UNIFIKACJA PROPORCJI
   =========================== */

/* 0) Maks. szerokość treści */
:root { --container-max: 1200px; }

.container { width: min(100%, var(--container-max)); }

/* 1) HERO – płynna wysokość i kadrowanie tła/zdjęcia */
.intro{
    position: relative;
    min-height: clamp(520px, 72vh, 820px);
    overflow: hidden;
}
.intro picture,
.intro img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2) Treść hero zawsze idealnie na środku */
.intro-content{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(12px, 2vw, 32px);
    transform: none;
}

/* 3) Niebieski baner – szerokość i padding płynne */
.intro-banner{
    width: min(92vw, 1120px);
    padding: clamp(16px, 2.4vw, 40px);
    border-radius: 14px;
    margin: 0 auto clamp(14px, 2vw, 24px) auto;
}

/* 4) Typografia w hero (płynna) */
.intro-banner h1{
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.2;
    margin: 0 0 clamp(6px, .8vw, 10px);
}
.intro-banner h2{
    font-size: clamp(16px, 2vw, 24px);
    line-height: 1.35;
    margin: 0;
}
.intro-subline{
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.5;
    max-width: 900px;
    margin: clamp(8px, 1.2vw, 14px) auto 0;
}

/* 5) Przyciski – stały optyczny rozmiar */
.hero-actions{
    display: flex;
    gap: clamp(10px, 1.6vw, 20px);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(12px, 1.6vw, 20px);
}
.hero-actions .button,
.hero-actions .button.large{
    padding: clamp(10px, 1.2vw, 14px) clamp(22px, 2.4vw, 32px);
    font-size: clamp(14px, 1.4vw, 18px);
    border-radius: 50px;
    text-transform: none;
    background: #226fa8;
}

/* 6) Podpis przy zdjęciu */
.profile-caption{
    position: absolute;
    left: clamp(16px, 6vw, 120px);
    bottom: clamp(16px, 5vw, 90px);
    background: rgba(255,255,255,.9);
    padding: clamp(6px, .8vw, 10px) clamp(10px, 1.2vw, 14px);
    border-radius: 8px;
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1.35;
    box-shadow: 0 6px 22px rgba(0,0,0,.08);
    z-index: 4;
}

/* 7) Duże ekrany */
@media (min-width: 1600px){
    .intro-banner{ width: min(84vw, 1120px); }
}

/* 8) Średnie ekrany */
@media (max-width: 1400px) and (min-width: 1001px){
    .intro-banner{ width: min(88vw, 980px); }
}

/* 9) Małe ekrany */
@media (max-width: 980px){
    .intro-content{ padding: 0 16px; }
    .intro-banner{ width: 100%; }
    .profile-caption{
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 10px auto 0;
        font-size: clamp(13px, 3.4vw, 14px);
    }
}

/* 1) Płynna baza – powtórzone */
:root{
    --container-max: 1200px;
}

/* 2) Kontener */
.container{
    width: min(100%, var(--container-max));
}

/* 3) Sekcja hero – wysokość i tło */
.intro{
    position: relative;
    min-height: clamp(480px, 72vh, 820px);
    overflow: hidden;
}
.intro picture,
.intro img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4) Wyrównanie treści w hero */
.intro-content{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2vw, 32px);
}

/* 5) Baner/karta */
.intro-banner{
    width: min(92vw, 1140px);
    padding: clamp(16px, 2.4vw, 40px);
    border-radius: 14px;
}

/* 6) Typografia hero */
.intro-banner h1{
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.2;
}
.intro-banner h2{
    font-size: clamp(18px, 2.0vw, 26px);
    line-height: 1.35;
    margin-top: clamp(8px, 1.2vw, 16px);
}
.intro-subline{
    font-size: clamp(16px, 1.8vw, 20px);
}

/* 7) Przyciski */
.intro-cta{
    display: flex;
    gap: clamp(10px, 1.8vw, 20px);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(14px, 2vw, 24px);
}
.intro-cta .button{
    padding: clamp(10px, 1.2vw, 14px) clamp(22px, 2.4vw, 32px);
    font-size: clamp(14px, 1.4vw, 18px);
    border-radius: 10px;
}

/* 8) Badge z imieniem */
.profile-caption{
    position: absolute;
    left: clamp(14px, 5vw, 120px);
    bottom: clamp(14px, 3.8vw, 70px);
    z-index: 5;
}

/* CZYTELNOŚĆ TEKSTU NA MAŁYCH EKRANACH */
@media (max-width: 1200px) {
    .intro-banner {
        background: rgba(47, 111, 165, 0.9);
        color: #fff;
        box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    }

    .intro-banner h1,
    .intro-banner h2,
    .intro-subline {
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .intro-banner em {
        color: #eaf6ff;
    }
}

@media (max-width: 768px) {
    .intro-banner {
        background: rgba(32, 85, 135, 0.92);
        padding: 20px 16px;
    }
    .intro-banner h1 {
        font-size: clamp(18px, 6vw, 32px);
    }
    .intro-banner h2 {
        font-size: clamp(16px, 4vw, 20px);
    }
}

/* Baner ZAWSZE z delikatnym tłem */
.intro-banner{
    background: rgba(47, 111, 165, 0.88);
    color:#fff;
    padding:24px 32px;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    max-width:1000px;
    margin:0 auto 22px auto;
}

.intro-banner h1,
.intro-banner h2,
.intro-subline{
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.3);
}

@media (max-width: 768px){
    .intro-banner{
        background: rgba(32, 85, 135, 0.92);
        padding:20px 16px;
    }
    .intro-banner h1{ font-size: clamp(18px, 6vw, 32px); }
    .intro-banner h2{ font-size: clamp(16px, 4vw, 20px); }
}

/* UNIWERSALNY SHAPE DIVIDER */
.shape-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    overflow: hidden;
    z-index: 5;
}

.shape-divider svg {
    position: absolute;
    width: 102%;
    left: -1%;
    bottom: -1px;
    height: 100%;
    display: block;
    fill: #f5f5f5;
}

.shape-divider svg polygon:nth-child(2) {
    opacity: 0.15;
}

.shape-divider svg rect {
    opacity: 0.3;
}

@media (min-width: 1600px) {
    .shape-divider { height: 200px; }
}

@media (max-width: 1000px) {
    .shape-divider { height: 120px; }
}

@media (max-width: 600px) {
    .shape-divider { height: 90px; }
}

/* HERO obraz – kadrowanie */
.intro picture img,
.intro img.lazy {
    width: 100%;
    height: clamp(560px, 70vh, 860px);
    object-fit: cover;
    object-position: left 12% top 8%;
    display: block;
}

@media (min-width: 1600px) {
    .intro picture img,
    .intro img.lazy {
        object-position: left 10% top 4%;
    }
}

/* Baner z tekstem */
.intro-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    z-index: 2;
}

.intro-banner {
    background: rgba(45, 130, 194, .92);
    color: #fff;
    padding: 24px 32px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    max-width: 1100px;
}

@media (max-width: 1500px) and (min-width: 1001px) {
    .intro-content { align-items: center; }
    .intro-banner {
        margin-left: clamp(220px, 26vw, 360px);
        max-width: min(60vw, 980px);
    }
}

@media (max-width: 1200px) and (min-width: 901px) {
    .intro-banner {
        margin-left: clamp(160px, 24vw, 300px);
        max-width: min(68vw, 900px);
    }
}

@media (max-width: 900px) {
    .intro-banner {
        margin-left: 0;
        max-width: calc(100% - 32px);
        background: linear-gradient(
            to bottom,
            rgba(13, 23, 73, .85),
            rgba(45, 130, 194, .92)
        );
    }

    .intro-banner h1 { font-size: clamp(22px, 5.6vw, 36px); }
    .intro-banner h2 { font-size: clamp(16px, 3.8vw, 20px); }
}

.intro-banner h1, .intro-banner h2 {
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* dodatkowy shape-divider */
.shape-divider {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: clamp(80px, 12vh, 160px);
    z-index: 3;
    pointer-events: none;
}
.shape-divider svg { width: 102%; height: 100%; left: -1%; position: absolute; }
.shape-divider .cls-1 { opacity: .22; }
.shape-divider .cls-2 { opacity: .10; }
.shape-divider .cls-3 { opacity: .25; fill: #f5f5f5; }

.soft-highlight {
    background: rgba(255, 255, 102, 0.35);
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.3s ease;
}

.soft-highlight:hover {
    background: rgba(255, 255, 102, 0.55);
}

/* Intro: subline */
.intro-subline {
    margin: 8px auto 0;
    max-width: 900px;
    font-size: 105%;
    line-height: 1.5;
    color: #eaf3fb;
    opacity: 0.95;
}

/* Podpis przy zdjęciu – ostateczna wersja */
.profile-caption {
    position: absolute;
    left: 0%;
    bottom: 95px;
    background: rgba(255, 255, 255, 0.86);
    color: #243041;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
    font-size: 90%;
    line-height: 1.35;
    z-index: 4;
    backdrop-filter: blur(2px);
    text-align: left;
}

.profile-caption strong {
    color: var(--col2);
    font-weight: 700;
}

@media (max-width: 1200px) {
    .profile-caption { left: 30px; bottom: 80px; }
}

@media (max-width: 980px) {
    .profile-caption {
        position: static;
        margin: 12px auto 0;
        text-align: center;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    .intro-subline {
        font-size: 100%;
        max-width: 700px;
    }
}

@media (max-width: 690px) {
    .intro-subline { font-size: 95%; }
}

/* aktywne menu */
nav a.active {
    color: var(--col1);
    font-weight: 600;
    border-bottom: 2px solid var(--col1);
    background: rgba(45,130,194,0.07);
    border-radius: 4px;
    padding-bottom: 4px;
    transition: all 0.25s ease;
}

/* sekcja usług */
.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    align-items: start;
    margin-bottom: 50px;
}

.service-card {
    background: #fff;
    border: 1px solid rgba(13, 23, 73, 0.08);
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.service-icon {
    width: 72px; height: 72px;
    margin: 0 auto 14px;
}

.service-title {
    font-size: 22px;
    line-height: 1.25;
    color: var(--col2);
    margin-bottom: 14px;
    min-height: 56px;
    padding: 2rem 0;
}

.service-list {
    text-align: left;
    margin: 0 auto;
    max-width: 420px;
    padding: 0;
    list-style: none;
}

.service-list li {
    position: relative;
    padding-left: 28px;
    margin: 10px 0;
    list-style: none;
    text-align: left;
}

.service-list li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    color: var(--col1);
    font-weight: 700;
}

@media (max-width: 1100px) {
    .services { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 690px) {
    .services { grid-template-columns: 1fr; }
    .service-card { text-align: left; }
    .service-icon { margin: 0 0 10px 0; }
}

/* sekcja "Hoe werk ik" */
#hoe-werk-ik .title { margin-bottom: 28px; }

.hero-portrait {
    display:block;
    max-width: 520px;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    object-fit: cover;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.feature-card {
    height: 100%;
    background: #fff;
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.feature-icon {
    font-size: 56px;
    color: var(--col1);
    margin-bottom: 10px;
    display: inline-block;
    transition: transform .25s ease, color .25s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.05);
    color: var(--col2);
}

.feature-card h3 {
    margin: 0 0 8px;
    font-size: 120%;
    color: var(--col2);
    font-weight: 700;
}

.feature-card p {
    margin: 0;
    font-size: 95%;
    line-height: 1.65;
    color: var(--text);
}

@media (max-width: 1100px) {
    .features-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    #hoe-werk-ik .row { flex-direction: column; }
    .hero-portrait { max-width: 420px; margin: 0 auto 18px; }
}

/* przełącznik języka */
.language-switcher {
    position: absolute;
    right: 10%;
    top: 50%;
}

.lang-btn {
    display: inline-block;
    background-color: #1f73b7;
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.lang-btn:hover {
    background-color: #145a8d;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .language-switcher {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px;
        text-align: center;
    }
}

/* Scroll to top – wyśrodkowana po prawej */
.scroll-top {
    position: fixed;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--col1);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10000;
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--col2);
    transform: translateY(-50%) translateY(-3px);
}

/* Floating Teams Chat Button */
.fab-teams{
    position: fixed;
    right: 18px;
    bottom: 96px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #2563eb;
    color:#fff;
    font-weight:600;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
    z-index: 10001;
    text-decoration:none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fab-teams i{ font-size: 18px; }
.fab-teams:hover{
    transform: translateY(-2px);
    box-shadow:0 14px 28px rgba(0,0,0,.18);
    background:#1e4fd6;
}
.fab-teams__label{ white-space: nowrap; }

@media (max-width: 640px){
    .fab-teams{
        bottom: 84px;
        padding: 12px;
    }
    .fab-teams__label{ display:none; }
}

/* stopka – wyrównanie */
footer .footer-widgets .row.centered .col { text-align:center; }
footer .footer-widgets i { color: var(--col1); }
footer .footer-widgets a { color: inherit; }
footer .footer-widgets a:hover { color: var(--col1); }

@media (max-width: 640px){
    footer { padding-bottom: 70px; }
}

/* Sekcja "My Mission" */
.section#mission,
.section.mission,
.section[id*="mission"],
.section[id*="misia"] {
    text-align: center;
}

.section#mission p,
.section.mission p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
}

/* Naprawa wyrównania "Misja" */
.section#mission p,
.section.mission p,
#mission p {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
}

section[id*="mis"], 
.section[id*="mis"] p {
    text-align: center !important;
    margin: 0 auto 25px auto;
    max-width: 900px;
}

#mission, 
#mission *, 
.section#mission, 
.section#mission * {
    text-align: center !important;
}

#mission p {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    max-width: 900px !important;
}

/* Floating WhatsApp Button */
.fab-whatsapp{
    position: fixed;
    right: 18px;
    bottom: 160px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    z-index: 10001;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.fab-whatsapp:hover{
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

/* trochę bliżej dołu na wąskich ekranach */
@media (max-width: 640px){
    .fab-whatsapp{
        bottom: 140px;
        right: 14px;
    }
}

/* Kalkulator ofert */
.quote-box{
    margin-top: 15px;
    background:#fff;
    border-radius:14px;
    padding:18px 20px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.quote-total{
    font-size:220%;
    font-weight:700;
    color:var(--col2);
    margin:5px 0 8px;
}

.quote-sub{
    margin:0;
}

/* Kalkulator / bereken uw offerte */
#bereken-offerte h3 {
    margin-bottom: 15px;
}

.quote-step {
    max-width: 1000px;
    margin: 0 auto 25px auto;
}

.quote-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
}

.quote-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(13,23,73,0.10);
    background: #fff;
    cursor: pointer;
}

.quote-option.inline {
    display: inline-flex;
    margin-right: 10px;
}

.quote-option input[type="radio"] {
    margin-top: 3px;
}

.quote-option span strong {
    color: var(--col2);
}

.quote-nav {
    margin-top: 10px;
}

.quote-nav .button.small {
    font-size: 90%;
    padding: 8px 18px;
    margin: 0 5px;
}

.quote-status {
    margin-top: 12px;
    text-align: center;
}

.quote-status.error {
    color: #af0000;
}

/* RWD kalkulatora */
@media (max-width: 690px){
    .quote-step { margin-bottom: 20px; }
    .quote-options { gap: 8px; }
}

/* Tekst w kalkulatorze – na biało na tle niebieskim */
#bereken-offerte h1,
#bereken-offerte h2,
#bereken-offerte h3,
#bereken-offerte h4,
#bereken-offerte p,
#bereken-offerte label,
#bereken-offerte legend,
#bereken-offerte .quote-status {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}

/* Link w zgodzie RODO na biało */
#bereken-offerte label a {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Tekst wewnątrz białego boxa z wyceną – ciemny */
#bereken-offerte .quote-box,
#bereken-offerte .quote-box p,
#bereken-offerte .quote-total,
#bereken-offerte .quote-sub {
    color: var(--col2) !important;
    text-shadow: none !important;
}

/* Lepsza czytelność w sekcji kalkulatora */
#bereken-offerte {
    padding-top: 80px;
    padding-bottom: 80px;
}

#bereken-offerte h2.title {
    margin-bottom: 40px;
}

#bereken-offerte .intro-subline {
    margin-bottom: 50px;
    line-height: 1.6;
}

#bereken-offerte h3 {
    margin-top: 40px;
    margin-bottom: 25px;
}

#bereken-offerte .row {
    margin-bottom: 35px;
}

#bereken-offerte .checkbox-row {
    margin-top: 20px;
    margin-bottom: 40px;
}

#bereken-offerte button,
#bereken-offerte .button {
    margin-top: 20px;
}

@media (min-width: 1200px) {
    .intro {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-photo {
        max-width: 340px;
        margin-right: 40px;
    }
}

.hero-box {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* OGRANICZENIE szerokości niebieskiego panelu na każdym ekranie */
.intro-banner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* KALKULATOR – widoczny niebieski kadr */
#bereken-offerte {
    padding: 90px 0;
    background: #f3f6fb;
}

/* Niebieska karta jak w hero */
#bereken-offerte .container {
    max-width: 980px;
    margin: 0 auto;
    background: linear-gradient(
        to bottom,
        rgba(13, 23, 73, 0.96),
        rgba(45, 130, 194, 0.98)
    );
    border-radius: 18px;
    padding: 40px 38px 46px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
}

/* Tytuł i opis – jasny tekst */
#bereken-offerte h2.title,
#bereken-offerte .intro-subline,
#bereken-offerte p,
#bereken-offerte label,
#bereken-offerte legend {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}

/* Podtytuł */
#bereken-offerte .intro-subline {
    margin-bottom: 32px;
    line-height: 1.6;
    opacity: 0.96 !important;
}

/* Pola formularza – białe */
#bereken-offerte input[type="text"],
#bereken-offerte input[type="email"],
#bereken-offerte input[type="tel"],
#bereken-offerte textarea,
#bereken-offerte select {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Box z wynikiem */
#bereken-offerte .quote-box {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

/* Przyciski w kalkulatorze */
#bereken-offerte button,
#bereken-offerte .button {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 100%;
}

/* RWD – na małych ekranach */
@media (max-width: 768px) {
    #bereken-offerte {
        padding: 60px 0;
    }

    #bereken-offerte .container {
        padding: 28px 18px 34px;
        max-width: 100%;
    }
}

/* HEADER – stała wysokość, bez skakania – definicja końcowa */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: #fff;
    padding: 16px 0;
    transition: box-shadow .2s ease;
}

header.fixed,
header.scrolled {
    box-shadow: 0 0 10px rgba(0,0,0,.10);
}

/* jeśli masz gdzieś .header-space – zerujemy ją */
.header-space {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* MOBILE: odsłonięcie twarzy w hero */
@media (max-width: 768px) {

    .intro {
        min-height: 680px;
    }

    .intro-banner {
        margin-top: 240px !important;
        background: rgba(13, 23, 73, 0.78);
        backdrop-filter: blur(6px);
    }

    .profile-caption {
        margin-top: 10px;
    }
}

/* MOBILE: bardzo transparentny niebieski box */
@media (max-width: 768px) {

    .intro-banner {
        background: rgba(45, 130, 194, 0.95) !important;
        border: 2px solid rgba(45, 130, 194, 0.75);
        backdrop-filter: blur(2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        /* margin-top: 240px !important; */
    }

    .intro-banner h1,
    .intro-banner h2,
    .intro-banner p {
        color: #fff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.35);
    }
}

#how-i-work .icon {
    width: 85px;
    height: 85px;
    margin-bottom: 15px;
}
#hoe-werk-ik .icon {
    width: 85px;
    height: 85px;
    margin-bottom: 15px;
}
#how-i-work, #hoe-werk-ik {
    padding: 6rem 0;
}
#how-i-work p, #hoe-werk-ik p {
    text-align: left !important;
}
.me_picture {
    padding: 2rem;
}
.me_txt { }
.me_txt p, .me_txt h3 {
    padding-left: 1rem;
    text-align: left !important;
    line-height: 1.3;
}
.me_txt ul {
    padding-left: 3rem;
    line-height: 1.3;
}
input[type=text], input[type=email], input[type=tel] {
    border: 1px solid #eee;
    border-radius: 50px;
}
textarea {
    border: 1px solid #eee;
    border-radius: 25px;
}
@media (max-width: 768px) {
    .intro-banner {
        background: rgba(13, 23, 73, 0.15) !important;
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }
}
@media (max-width: 768px) {
    .intro {
        min-height: 780px;
    }

    .intro-banner {
        margin-top: 220px;
        background: rgba(13, 23, 73, 0.85);
        backdrop-filter: blur(4px);
    }
}
@media (max-width: 1440px) and (min-width: 1001px) {
    .intro-banner{
        margin-left: clamp(262px, 24vw, 342px) !important;
        max-width: min(60vw, 880px) !important;
    }
}

/* CTA w menu */
nav ul li.menu-cta {
    margin-left: 16px;
}

nav ul li.menu-cta a.cta {
    display: inline-block;
    padding: 12px 26px;
    background: #2d82c2;
    color: #fff !important;
    font-weight: 600;
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

/* hover */
nav ul li.menu-cta a.cta:hover {
    background: #1f6fa8;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}
/* wyrównanie całego menu w poziomie */
nav ul {
    display: flex;
    align-items: center;
}

/* CTA w menu – idealnie w jednej linii */
nav ul li.menu-cta {
    display: flex;
    align-items: center;
}

/* Scroll to top – zawsze widoczny (kolor) */
.scroll-top,
.back-to-top {
    background: #2f80c1;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 9999;
}

.btn-home {
    display: inline-block;
    padding: 14px 26px;
    background: #2f80c1;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    transition: all .25s ease;
}

.btn-home:hover {
    background: #256aa0;
    transform: translateY(-2px);
}

/* Tekst w opcjach kalkulatora – ciemny, żeby był widoczny na białym tle */
.quote-option span {
    color: #123a5c;
    display: block;
}

.quote-option span strong {
    color: #123a5c;
    font-weight: 600;
}

/* BANER „W BUDOWIE” */
.construction-banner{
    width: 100%;
    padding: 70px 20px;
    background: linear-gradient(120deg, #1f7ecb, #53a7ff);
    color: white;
    text-align: center;
    border-radius: 14px;
    margin: 25px 0 45px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.construction-inner{
    max-width: 900px;
    margin: 0 auto;
}

.construction-banner h2{
    font-size: 34px;
    margin-bottom: 12px;
}

.construction-banner p{
    font-size: 18px;
    opacity: .95;
    margin-bottom: 18px;
}

.cta-ghost{
    display: inline-block;
    padding: 10px 22px;
    border-radius: 40px;
    background: white;
    color: #1f7ecb;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
}

.cta-ghost:hover{
    background: rgba(255,255,255,.9);
    transform: translateY(-2px);
}

/* FAQ CTA */
.faq-cta {
    text-align: center;
    margin: 40px 0 20px;
}

/* przycisk */
.faq-cta .cta-booking {
    display: inline-block;
    padding: 14px 34px;
    background: #2d82c2;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
}

.faq-cta .cta-booking:hover {
    background: #1f6fa8;
    color: #ffffff !important;
}

/* PRIVACY PAGE */
#privacy {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 16px;
    color: #1f2d3d;
}

#privacy h1 {
    font-size: 30px;
    margin-bottom: 25px;
}

#privacy h2 {
    margin-top: 35px;
    margin-bottom: 12px;
    font-size: 22px;
    color: #0b3d91;
}

#privacy h3 {
    margin-top: 18px;
    font-size: 18px;
    color: #2b6cb0;
}

#privacy p {
    margin-bottom: 14px;
}

#privacy ul {
    margin: 10px 0 18px 22px;
}

#privacy li {
    margin-bottom: 6px;
}

#privacy a {
    color: #2b6cb0;
    text-decoration: underline;
}

#privacy strong {
    color: #000;
}

/* FAQ PAGE */
#faq {
  max-width: 900px;
  margin: 40px auto 0;   /* odstęp od niebieskiego paska */
  padding-top: 10px;     /* możesz zwiększyć lub zmniejszyć */
  line-height: 1.7;
  font-size: 16px;
  color: #1f2d3d;
}

#faq h1 {
    font-size: 30px;
    margin-bottom: 25px;
}

#faq h2 {
    margin-top: 35px;
    margin-bottom: 10px;
    font-size: 22px;
    color: #0b3d91;
}

#faq p {
    margin-bottom: 14px;
}

#faq .faq-intro {
    margin-bottom: 20px;
    color: #4a5568;
}

#faq .faq-item {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0,0,0,.04);
}

#faq .faq-item h3 {
    margin-bottom: 10px;
    color: #2b6cb0;
    font-size: 18px;
}

#faq .faq-item p {
    margin: 0;
}

#faq a {
    color: #2b6cb0;
    text-decoration: underline;
}
footer {
  background: #ffffff !important;
  color: #1f2d3d !important;
}

footer a {
  color: #1f2d3d !important;
}

footer a:hover {
  color: #2d82c2;
}