/* HERO FULL WIDTH BACKGROUND FIX */
.hero-bg-img.modern-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
/* --- Mobile hero fixes: show image clearly on phones --- */
@media (max-width: 767px) {
    /* make the hero image container a reasonable height on phones */
    .hero-bg-img {
        height: 100% !important;
        position: absolute !important;
        overflow: hidden;
        z-index: -1;
        pointer-events: none;
    }

    /* remove the heavy gradient overlay so the photo is visible */
    .hero-bg-img::after {
        background: rgba(0, 0, 0, 0.4) !important; /* Add slight overlay for readability */
    }

    /* ensure the picture/img fills the container and is cropped from center */
    .hero-slide img,
    .hero-slide picture,
    .hero-slide picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /* reduce hero section padding so the image is more visible above the fold */
    .hero {
        padding-top: 6rem; /* Adjust for fixed header */
        padding-bottom: 1rem;
        min-height: 100vh; /* Full height */
    }
}
.hero-bg-img.modern-bg img.modern-bg-img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
}
.turbo-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 2.9rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #233733;
    text-align: center;
    margin-bottom: 28px;
    text-shadow: 0 2px 16px #c9a96e22;
}

.turbo-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.32rem;
    color: #233733;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 38px auto;
    line-height: 1.7;
    letter-spacing: 0.02em;
    font-weight: 400;
    background: linear-gradient(90deg, #c9a96e22 0%, #fff 100%);
    border-radius: 14px;
    padding: 1em 1.2em;
    box-shadow: 0 2px 12px #c9a96e22;
}

.turbo-line {
    display: block;
    font-size: 1.18em;
    font-weight: 500;
    margin-bottom: 2px;
}

.highlight-gold {
    color: #c9a96e;
    font-weight: 700;
    background: none;
    letter-spacing: 0.03em;
}

.fade-in {
    opacity: 0;
    animation: turboFadeIn 0.8s ease forwards;
}

@keyframes turboFadeIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Baner Notarialny Asystent Dokumentów - finalna wersja */
.assistant-banner {
    width: 100%;
    position: relative;
    background:
        radial-gradient(ellipse at 75% 30%, rgba(185,166,123,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 75%, rgba(185,166,123,.10) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.35) 0%, transparent 60%),
        linear-gradient(135deg, #152421 0%, #1e3330 45%, #233733 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 16px 56px 16px;
    box-sizing: border-box;
    overflow: hidden;
}
.assistant-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(185,166,123,.07) 0%, transparent 70%);
    pointer-events: none;
}

.assistant-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    color: #b9a67b;
    font-size: 2.7rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 22px;
    letter-spacing: 1px;
    position: relative;
}

.assistant-desc {
    font-family: 'Lato', Arial, sans-serif;
    color: rgba(255,255,255,.82);
    font-size: 1.18rem;
    text-align: center;
    margin-bottom: 36px;
    max-width: 600px;
    line-height: 1.6;
    position: relative;
}

.assistant-cta {
        background: #c9a96e;
        color: #233733;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    padding: 1rem 2.5rem;
    margin-bottom: 40px;
    box-shadow: 0 2px 12px #c9a96e44;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s;
    outline: none;
    text-decoration: none;
    display: inline-block;
}

.assistant-cta:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px #c9a96e88;
        background: #233733;
        color: #fff;
}

.assistant-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
}

.assistant-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.assistant-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(185,166,123,.15);
    border: 2px solid rgba(185,166,123,.55);
    color: #b9a67b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 0 18px rgba(185,166,123,.18);
    position: relative;
}

.assistant-label {
    color: rgba(255,255,255,.75);
    font-size: 1rem;
    text-align: center;
    font-family: 'Lato', Arial, sans-serif;
    position: relative;
}

.assistant-arrow {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M8 16h16" stroke="%23b9a67b" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat;
    margin: 0 8px;
    position: relative;
}

@media (max-width: 700px) {
    .assistant-banner {
        padding: 24px 2vw 18px 2vw;
    }
    .assistant-title {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    .assistant-desc {
        font-size: 0.92rem;
        margin-bottom: 18px;
        max-width: 98vw;
        padding: 0 2vw;
    }
    .assistant-steps {
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        width: 100%;
        margin-top: 8px;
    }
    .assistant-step {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 0.3rem;
    }
    .assistant-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    .assistant-label {
        font-size: 0.92rem;
    }
    .assistant-arrow {
        display: none !important;
    }
    .assistant-cta {
        padding: 0.7rem 1.2rem;
        font-size: 1rem;
        margin-bottom: 18px;
    }
}
/* --- Ultra-nowoczesny baner Notarialny Asystent Dokumentów --- */
.nad-glass-bg {
    background: linear-gradient(90deg, #c9a96e 0%, #fff 100%);
    padding: 48px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
    box-shadow: 0 2px 12px #c9a96e44;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s;
    outline: none;
}
.nad-cta:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px #c9a96e88;
    background: #c9a96e;
    color: #233733;
}
.nad-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
    margin-top: 8px;
}
.nad-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: color .2s;
}
.nad-step-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(201,169,110,0.12);
    border: 2.5px solid #c9a96e;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    transition: background .3s, border-color .3s;
}
.nad-step-icon::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter .3s;
}
/* Ikony SVG jako data-uri */
.step-1::before {
    content: url("data:image/svg+xml,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ctext x='14' y='20' text-anchor='middle' font-size='16' fill='%23c9a96e' font-family='Arial'%3E1%3C/text%3E%3C/svg%3E");
}
.step-2::before {
    content: url("data:image/svg+xml,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ctext x='14' y='20' text-anchor='middle' font-size='16' fill='%23c9a96e' font-family='Arial'%3E2%3C/text%3E%3C/svg%3E");
}
.step-3::before {
    content: url("data:image/svg+xml,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ctext x='14' y='20' text-anchor='middle' font-size='16' fill='%23c9a96e' font-family='Arial'%3E3%3C/text%3E%3C/svg%3E");
}
.nad-step-label {
    font-family: Arial, sans-serif;
    color: #233733;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin-top: 2px;
    transition: color .3s;
}
.nad-arrow {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0 0.5rem;
    vertical-align: middle;
    background: none;
    position: relative;
}
.nad-arrow::before {
    content: url("data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16h16M20 12l4 4-4 4' stroke='%23c9a96e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: block;
    width: 32px;
    height: 32px;
}
/* Interaktywny efekt hover na banerze */
.nad-glass-card:hover .nad-step-icon,
.nad-step-icon:hover {
    background: #c9a96e;
    border-color: #c9a96e;
}
.nad-glass-card:hover .nad-step-icon::before,
.nad-step-icon:hover::before {
    filter: brightness(0) invert(1);
}
.nad-glass-card:hover .nad-step-label,
.nad-step-icon:hover + .nad-step-label {
    color: #fff;
}
/* Responsywność */
@media (max-width: 768px) {
    .nad-glass-card {
        padding: 32px 8px 28px 8px;
    }
    .nad-title {
        font-size: 2rem;
    .contact-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto 1.2rem auto;
    }
    .contact-details p {
        justify-content: center !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 1.08rem !important;
    }
    .contact-details svg {
        margin-right: 8px;
        vertical-align: middle;
    }
    }
    .nad-desc {
        font-size: 1rem;
    }
    .nad-steps {
        flex-direction: column;
        gap: 18px;
        margin-top: 18px;
    }
    .nad-arrow {
        transform: rotate(90deg);
        margin: 0;
    }
}
/* --- Language Visibility Control --- */
/* Hide non-default languages on page load before JavaScript kicks in */
.lang-en, .lang-ua,
.lang-en-content, .lang-ua-content {
    display: none;
}
      /* --- ZMIENNE GLOBALNE --- */
      :root {
        --bg-dark: #233733; /* Zmieniony zielony */
        --bg-darker: #233733; /* Zmieniony zielony */
        --bg-white: #ffffff;
        --bg-light-green: #e9ebea; /* Jaśniejszy odcień nowego zielonego */
        --text-light: #bfbfbf;
        --text-dark: #333333;
        --accent: #b9a67b; /* Zmieniony złoty */
        --accent-hover: #c7b892; /* Jaśniejszy odcień nowego złotego */
        --border: rgba(185, 166, 123, 0.6); /* Zmieniony złoty z przezroczestością */
        --shadow: rgba(0,0,0,0.4);
        --font-header: 'Playfair Display', serif; /* Nowa czcionka dla nagłówków */
        --font-body: 'Lato', sans-serif; /* Nowa czcionka dla tekstu */
      }

      /* --- RESET I PODSTAWOWE STYLE --- */
    /* --- Jasny, nowoczesny baner kalkulatora --- */
    .kalkulator-glass-banner {
        position: relative;
        width: 100%;
        min-height: 340px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 3rem 0 2.5rem 0;
        z-index: 2;
    }
    .glass-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(120deg, #00c9a7 0%, #C9B37B 100%);
        filter: blur(32px) brightness(1.1);
        opacity: 0.35;
        z-index: 1;
        pointer-events: none;
        transition: opacity .6s;
    }
    .glass-panel {
        position: relative;
        background: rgba(255,255,255,0.22);
        border-radius: 32px;
        box-shadow: 0 8px 32px rgba(35,55,51,0.12), 0 1.5px 0.5px #00c9a7;
        backdrop-filter: blur(16px);
        display: flex;
        align-items: center;
        gap: 2.5rem;
        padding: 2.8rem 2.2rem;
        z-index: 2;
        animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) both;
    }
    .glass-content {
        flex: 1 1 340px;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }
    .glass-title {
        font-family: 'Montserrat', 'Playfair Display', serif;
        font-size: 2.5rem;
        font-weight: 800;
        color: #233733;
        margin-bottom: 0.5rem;
        text-shadow: 0 2px 12px #00c9a7aa, 0 1px 0 #C9B37B;
    }
    .glass-desc {
        font-size: 1.18rem;
        color: #233733;
        line-height: 1.7;
    }
    .glass-highlight {
        color: #00c9a7;
        font-weight: 700;
        background: linear-gradient(90deg,#00c9a7 40%,#C9B37B 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .glass-benefit {
        color: #C9B37B;
        font-weight: 600;
    }
    .glass-cta {
        display: inline-block;
        margin-top: 1.2rem;
        padding: 1rem 2.5rem;
        font-size: 1.15rem;
        font-family: 'Montserrat', 'Lato', sans-serif;
        font-weight: 700;
        color: #fff;
        background: #00c9a7;
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px #00c9a744, 0 1px 8px #C9B37B44;
        cursor: pointer;
        transition: transform .18s, box-shadow .18s, background .18s;
        position: relative;
        overflow: hidden;
    }
    .glass-cta:hover {
        transform: scale(1.06);
        box-shadow: 0 6px 24px #00c9a788, 0 2px 16px #C9B37B88;
        background: #C9B37B;
        color: #233733;
    }
    .glass-graphic {
        flex: 0 0 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: floatIcon 2.8s ease-in-out infinite;
    }
    @keyframes floatIcon {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-12px); }
    }
    @keyframes fadeInUp {
        0% { opacity: 0; transform: translateY(40px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 900px) {
        .glass-panel {
        .assistant-steps {
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 2.2rem;
        }
        .assistant-step {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 1.2rem;
            margin-bottom: 0.5rem;
        }
        .assistant-step-circle {
            min-width: 48px;
            min-height: 48px;
            font-size: 1.2rem;
        }
        .assistant-step-desc {
            font-size: 1.08rem;
            text-align: left;
            margin-left: 0.5rem;
        }
        .assistant-step-divider {
            display: none;
        }
            flex-direction: column;
            gap: 2rem;
            padding: 2rem 1rem;
        }
        .glass-content, .glass-graphic {
            flex: 1 1 100%;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .kalkulator-glass-banner {
            min-height: 0;
            margin: 2rem 0 1.5rem 0;
        }
    }
    .kalkulator-banner-clear {
        background: #f9f9f9;
        border-radius: 32px;
        box-shadow: 0 4px 32px rgba(185,166,123,0.08);
        margin: 3rem auto 2.5rem auto;
        max-width: 1100px;
        padding: 2.8rem 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .kalkulator-banner-clear-wrap {
        display: flex;
        gap: 3.5rem;
        width: 100%;
        flex-wrap: wrap;
    }
    .kalkulator-banner-clear-left {
        flex: 1 1 340px;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }
    .kalkulator-banner-clear-title {
        font-family: 'Montserrat', 'Playfair Display', serif;
        font-size: 2.3rem;
        font-weight: 800;
        color: #233733;
        margin-bottom: 0.5rem;
    }
    .kalkulator-banner-clear-desc {
        font-size: 1.18rem;
        color: #333;
        line-height: 1.7;
    }
    .kalkulator-banner-clear-benefit {
        color: #b9a67b;
        font-weight: 600;
    }
    .kalkulator-banner-clear-cta {
        display: inline-block;
        margin-top: 1.2rem;
        padding: 1rem 2.5rem;
        font-size: 1.15rem;
        font-family: 'Montserrat', 'Lato', sans-serif;
        font-weight: 700;
        color: #fff;
        background: #233733;
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px #b9a67b44;
        cursor: pointer;
        transition: transform .18s, box-shadow .18s, background .18s;
        position: relative;
        overflow: hidden;
    }
    .kalkulator-banner-clear-cta:hover {
        transform: scale(1.06);
        box-shadow: 0 6px 24px #b9a67b88;
        background: #b9a67b;
        color: #233733;
    }
    .kalkulator-banner-clear-right {
        flex: 1 1 340px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .kalkulator-banner-clear-steps {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .kalkulator-banner-clear-steps li {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        font-size: 1.08rem;
        color: #233733;
        font-family: 'Montserrat', 'Lato', sans-serif;
        font-weight: 600;
    }
    .step-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        box-shadow: 0 2px 8px #b9a67b33;
        background: #fff;
    }
    .step-label {
        color: #233733;
        font-weight: 600;
    }
    @media (max-width: 900px) {
        .kalkulator-banner-clear-wrap {
            flex-direction: column;
            gap: 2rem;
        }
        .kalkulator-banner-clear-left, .kalkulator-banner-clear-right {
            flex: 1 1 100%;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .kalkulator-banner-clear {
            padding: 2rem 1rem;
        }
    }
      * { margin:0; padding:0; box-sizing:border-box; }
      html {
          scroll-behavior: smooth;
      }
      body {
        font-family: var(--font-body); /* Zmieniona czcionka */
        font-weight: 300; /* Zmieniona waga czcionki na Light */
        font-size: 16px; /* Zmieniony rozmiar czcionki */
        color: var(--text-light);
        background: var(--bg-dark);
        line-height:1.6;
        overflow-x:hidden;
      }
      h1, h2, h3, h4, h5, h6, .logo {
        font-family: var(--font-header);
        font-weight: 700; /* Bold */
      }
      a {
        color: var(--accent);
        text-decoration: none;
        position: relative;
      }
      a::after {
        content: '';
        position: absolute;
        left: 0; bottom: -2px;
        width: 0; height: 2px;
        background: var(--accent);
        transition: width .3s;
      }
      a:hover {
        color: var(--accent-hover);
      }
      a:hover::after {
        width: 100%;
      }
      p, li {
        text-align: justify;
        orphans: 2;
        widows: 2;
        margin-bottom: 1rem;
        word-break: break-word;
      }
      ul {
        list-style: disc outside;
        margin-left:1.5rem;
        padding-left:.5rem;
      }
      ul li {
        padding-left:.5rem;
        text-indent:-.5rem;
      }
      .icon {
        width:1.2em; height:1.2em;
        fill: var(--accent);
        vertical-align: middle;
        margin-right:.5em;
        transition: transform .3s, fill .3s;
      }
      .icon:hover {
        fill: var(--accent-hover);
        transform: scale(1.1);
      }

      /* --- NAGŁÓWEK I NAWIGACJA (Styl uniwersalny) --- */
      header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-darker));
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 2rem;
    box-shadow:0 4px 10px var(--shadow);
    z-index:1000;
}
      .logo {
        color: var(--accent);
        font-size:1.2rem;
        font-weight: bold;
        margin-right: auto; /* Logo pcha wszystko na prawo */
      }
      .header-controls {
          display: flex;
          align-items: center;
          gap: 1.5rem;
      }
      .menu-toggle {
        display:flex; /* Zawsze widoczny */
        cursor:pointer;
        flex-direction:column;
        gap:5px;
        z-index: 1100;
      }
      .menu-toggle span {
        display:block;
        height:3px;
        width: 25px;
        background:#b9a67b;
        border-radius:2px;
        transition: transform .3s, opacity .3s;
      }
      .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
      .menu-toggle.active span:nth-child(2) { opacity: 0; }
      .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
      
      nav {
          position:fixed; top:0; right:-100%;
          height:100vh; width:100%;
          background: rgba(27,44,40,.92);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          display: flex;
          flex-direction:column;
          align-items: center;
          justify-content: center;
          padding: 2rem;
          gap:1.5rem;
          transition: right .3s ease-in-out;
      }
      nav.open { right:0; }
      nav a {
        font-weight:600;
        font-size: 1.15rem;
        text-align: center;
        padding: .5rem 1rem;
        border-bottom: 1px solid rgba(185,166,123,.15);
        transition: color .2s;
      }
      nav a:last-child {
        border-bottom: none;
      }
      nav a:hover {
        color: #fff;
      }
      
      .header-eagle {
        display: block; /* Zawsze widoczny */
      }
      
      .header-eagle img {
        height: 45px;
        width: auto;
        object-fit: contain;
        vertical-align: middle;
      }
      
      /* --- NOWE STYLE DLA ROZWIJANEGO MENU JĘZYKOWEGO --- */
      .lang-switcher {
          position: relative;
      }

      #lang-toggle-btn {
          background: none;
          border: 1px solid var(--accent);
          color: var(--text-light);
          padding: 0.2rem 0.5rem;
          cursor: pointer;
          font-family: var(--font-body);
          font-weight: bold;
          font-size: 0.9rem;
          border-radius: 4px;
          transition: all 0.3s;
          display: flex;
          align-items: center;
          gap: 0.3rem;
      }
      #lang-toggle-btn:hover, #lang-toggle-btn.active {
          background: var(--accent);
          color: var(--bg-dark);
      }

      .arrow-down {
          font-size: 0.7em;
          transition: transform 0.3s;
      }
      #lang-toggle-btn.active .arrow-down {
          transform: rotate(180deg);
      }

      .lang-options {
          display: none;
          position: absolute;
          top: calc(100% + 5px);
          right: 0;
          background-color: var(--bg-dark);
          border: 1px solid var(--border);
          border-radius: 4px;
          box-shadow: 0 4px 10px var(--shadow);
          z-index: 1100;
          min-width: 120px;
          overflow: hidden;
      }
      .lang-options.show {
          display: block;
      }
      .lang-options button {
          display: block;
          width: 100%;
          background: none;
          border: none;
          color: var(--text-light);
          padding: 0.6rem 1rem;
          cursor: pointer;
          text-align: left;
          font-size: 0.9rem;
          transition: all 0.3s;
      }
      .lang-options button:hover {
          background-color: var(--accent);
          color: var(--bg-dark);
      }
      .lang-options button.active {
          background-color: var(--accent-hover);
          color: var(--bg-dark);
          font-weight: bold;
      }

/* --- STYLIZACJA I ANIMACJA ETYKIETY WHATSAPP --- */
    /* --- STYLIZACJA ETYKIETY WHATSAPP (WERSJA FINALNA) --- */
    .whatsapp-callout {
        position: absolute;
        right: 75px;
        top: 50%;
        transform: translateY(-50%);
        /* Zaktualizowane tło do animacji gradientu */
        background: linear-gradient(100deg, transparent 20%, rgba(35, 55, 51, 0.3) 50%, transparent 80%),
                    var(--bg-white);
        background-size: 200% 100%;
        background-repeat: no-repeat;
        color: var(--accent); /* <-- JEDYNA ZMIANA W TYM FRAGMENCIE */
        padding: 8px 12px;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        /* ZAKTUALIZOWANA LINIA: teraz używa nowej animacji 'shine-effect' */
        animation: fadeInCallout 1s ease-in-out 3s forwards, shine-effect 2.5s ease-in-out 4s infinite;
    }

    /* Strzałka dymku */
    .whatsapp-callout::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent transparent var(--bg-white);
    }
    
    @keyframes fadeInCallout {
        from { opacity: 0; transform: translateY(-50%) translateX(10px); }
        to   { opacity: 1; transform: translateY(-50%) translateX(0); }
    }
@keyframes shine-effect {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}
/* --- PŁYWAJĄCY PRZYCISK TELEFONU --- */
.phone-fab {
  position: fixed;
  width: 60px;
  height: 60px;
  /* Pozycja nad przyciskiem WhatsApp (40px od dołu + 60px wysokości WhatsApp + 10px odstępu) */
  bottom: 110px; 
  right: 40px;
  background-color: var(--accent); /* Beżowy kolor ze strony */
  color: var(--bg-dark); /* Ciemny kolor dla ikonki w środku */
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.phone-fab:hover {
  transform: scale(1.1);
  background-color: var(--accent-hover); /* Jaśniejszy beż po najechaniu */
}

/* Styl ikonki wewnątrz przycisku */
.phone-fab .icon {
  width: 30px; 
  height: 30px;
  fill: var(--bg-dark); /* Ciemny kolor wypełnienia ikonki */
  margin: 0; /* Resetujemy margines, żeby była na środku */
}

/* Usunięcie podkreślenia z linku */
.phone-fab::after {
  display: none;
}
      /* --- HERO SECTION --- */
    .modern-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        overflow: hidden;
    }
    .modern-bg-img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        object-position: center 15%;
        transition: transform 2.5s cubic-bezier(.68,-0.55,.27,1.55);
        animation: heroZoom 12s ease-in-out infinite alternate;
    }
    @keyframes heroZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.07); }
    }
      .hero {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 100vh;
        padding: 4rem 52% 4rem 2rem;
        color: #ffffff;
        overflow: hidden;
      }
      
      /* MODIFICATION: Changed to a slider container */
      .hero-bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden; /* Hide parts of slides that are off-screen */
      }
      
      .hero-bg-img::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
        }


  /* 3. Kontener na zdjęcie umieszczamy na dole */
  .hero-bg-img {
    position: static;
    height: 60vh; /* Zwiększamy wysokość zdjęcia, aby dać więcej miejsca na kadr */
    width: 100%;
    order: 2; /* Kolejność: 2 (na dole) */
    background-image: none; /* Czyścimy tło CSS, bo użyjemy <img> */
  }

  /* 4. Przywracamy <img> i PRECYZYJNIE KADRUJEMY ZDJĘCIE */
  .hero-slide img {
    object-position: 80% 20%; 
  }



      /* --- GENERAL SECTIONS --- */
      section {
        padding: 4rem 1rem;
        border-top:1px solid var(--border);
        overflow: hidden;
      }
      @media(min-width: 768px) {
          section {
              padding: 4rem 5vw; /* Zmieniono padding dla wszystkich sekcji */
          }
      }
      section h2 {
        font-size: 40px; /* Zmiana rozmiaru czcionki */
        margin-bottom:2rem;
        text-align:center;
      }
/* --- ANIMACJA LINII POD NAGŁÓWKAMI --- */
section h2 {
    position: relative; /* Niezbędne do pozycjonowania pseudo-elementu */
    padding-bottom: 1rem; /* Tworzy miejsce na linię pod tekstem */
}

section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 100px;
    height: 3px;
    background-color: var(--accent);
    transform-origin: left;
    transform: translateX(50%) scaleX(0);
    
    /* ZMIANA: Czas trwania 2.5s, opóźnienie 0.6s */
    transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1) 0.6s;
}
/* Kiedy sekcja staje się widoczna, animujemy skalę do pełnej szerokości */
.animated-content.visible h2::after {
    /* Rozciągamy linię, co wizualnie przesuwa ją w lewo */
    transform: translateX(50%) scaleX(1);
}
 /* --- SECTION STYLING BY COLOR --- */
      #o-kancelarii, #blog, #kontakt {
          background: var(--bg-light-green);
          color: var(--text-dark);
      }
      #o-kancelarii h2, #blog h2, #kontakt h2 {
          color: var(--bg-darker);
      }
      
      #uslugi, #przydatne-linki, #faq {
          background: var(--bg-dark);
          color: var(--text-light);
      }
      #uslugi h2, #przydatne-linki h2, #faq h2 {
          color: var(--accent);
      }
      
      #informacje-praktyczne {
          background: var(--bg-white);
      }
      #informacje-praktyczne h2 {
          color: var(--accent);
      }
      #informacje-praktyczne p {
          color: var(--text-dark);
      }

      #kontakt .contact-info {
          font-size: 1.15rem;
          line-height: 1.8;
          background: var(--bg-darker);
          color: #f0f0f0;
          padding: 2rem 2.5rem;
          border-radius: 10px;
          box-shadow: 0 6px 24px rgba(0,0,0,0.18);
          position: relative;
          overflow: hidden;
      }
      #kontakt .contact-info::before {
          content: '';
          position: absolute;
          right: -20px;
          bottom: -20px;
          width: 280px;
          height: 320px;
          background-image: url('orzel.png');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.06;
          pointer-events: none;
      }
      #kontakt .contact-info p {
          font-size: 1.15rem;
          margin-bottom: 0.6rem;
          color: #f0f0f0;
      }
      #kontakt .contact-info a {
          color: var(--accent);
          font-size: 1.15rem;
          text-decoration: none;
          transition: color 0.2s;
      }
      #kontakt .contact-info a:hover {
          color: #d4c28a;
      }
      #kontakt .contact-info span {
          font-size: 1.15rem;
          color: #f0f0f0;
      }
      #kontakt .contact-info strong {
          color: var(--accent);
      }
      #kontakt .contact-info .icon {
          fill: var(--accent);
          stroke: var(--accent);
      }
      #kontakt .contact-info .location-guide {
          color: #ccc !important;
          font-size: 1.05rem !important;
      }
      #kontakt .contact-info .location-guide strong {
          color: #f0f0f0;
      }
/* Złoty kolor dla nagłówka "O mnie" */
#o-mnie h2 {
    color: var(--accent);
}
      
      .diamond {
        display:inline-block;
        color: var(--accent);
        font-size:1.2rem;
        line-height:1;
        margin-right:.5em;
        vertical-align:middle;
      }
      
      /* --- BLOG SECTION --- */
      .blog-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 2rem;
      }
      .blog-post {
          background: var(--bg-white);
          border-radius: 8px;
          padding: 1.5rem;
          box-shadow: 0 4px 15px rgba(0,0,0,0.05);
          transition: transform 0.3s, box-shadow 0.3s;
          display: flex;
          flex-direction: column;
      }
      .blog-post:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      }
      .blog-post-image {
          width: calc(100% + 3rem);
          margin: -1.5rem -1.5rem 1.25rem -1.5rem;
          display: block;
          border-radius: 8px 8px 0 0;
          object-fit: cover;
          height: 200px;
      }
      .blog-post h3 {
          color: var(--bg-darker);
          margin-bottom: 0.5rem;
          font-size: 1.4rem;
      }
      .blog-post-meta {
          font-size: 0.9rem;
          color: #777;
          margin-bottom: 1rem;
      }
      .blog-post p {
          color: var(--text-dark);
          text-align: left;
          flex-grow: 1;
      }
      .blog-post .read-more {
          color: var(--accent);
          font-weight: bold;
          text-decoration: none;
          text-align: left;
          margin-top: auto;
          cursor: pointer;
      }
      .blog-post .read-more:hover {
          color: var(--accent-hover);
      }

      /* --- BLOG MODAL --- */
      .modal {
        display: none; 
        position: fixed; 
        z-index: 2000; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0,0,0,0.7);
        animation: fadeIn 0.5s;
      }

      .modal-content {
        background-color: var(--bg-white);
        color: var(--text-dark);
        margin: 5% auto;
        padding: 2rem;
        border: 1px solid #888;
        width: 80%;
        max-width: 900px;
        border-radius: 8px;
        position: relative;
        animation: slideIn 0.5s;
      }
      
      .modal-content h3 {
        color: var(--bg-darker);
        font-size: 2rem;
        margin-bottom: 1.5rem;
      }
      
      .modal-content h4 {
        color: var(--accent);
        font-size: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
      }
      
      .modal-content p, .modal-content li {
        color: var(--text-dark);
        text-align: left;
      }

      .close-button {
        color: #aaa;
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        font-size: 28px;
        font-weight: bold;
        transition: color 0.3s;
      }

      .close-button:hover,
      .close-button:focus {
        color: var(--text-dark);
        text-decoration: none;
        cursor: pointer;
      }

      @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
      @keyframes slideIn { from {top: -100px; opacity: 0;} to {top: 0; opacity: 1;} }


     /* ============================================= */
/* === NOWOCZESNA SEKACJA FAQ - NOWE STYLE === */
/* ============================================= */

/* Główny kontener dla wszystkich pytań */
.faq-container {
    max-width: 800px; /* Ograniczenie szerokości dla lepszej czytelności */
    margin: 2rem auto 0; /* Wyśrodkowanie i margines górny */
}

/* Styl pojedynczego elementu (karty) FAQ */
.faq-item {
    background-color: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    overflow: hidden; /* Ważne dla animacji i zaokrąglonych rogów */
}

/* Efekt po najechaniu myszką */
.faq-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    background-color: #fcfcfc;
}

/* Nagłówek pytania (element <summary>) */
.faq-item summary {
    font-size: 1.2rem;
    font-weight: 700; /* Używamy 700 zamiast 'bold' dla spójności */
    color: var(--bg-darker);
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    list-style: none; /* Ukrycie domyślnego znacznika */
}

/* Usunięcie domyślnej strzałki/znacznika w przeglądarkach WebKit */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Nowa ikona "+" tworzona za pomocą pseudo-elementu */
.faq-item summary::after {
    content: '+';
    font-size: 2rem;
    color: var(--accent);
    font-weight: 300;
    line-height: 1;
    margin-left: 1rem;
    transition: transform 0.3s ease;
}

/* Styl ikony, gdy pytanie jest rozwinięte (ikona "×") */
.faq-item[open] > summary::after {
    transform: rotate(45deg);
}

/* Styl otwartego pytania */
.faq-item[open] > summary {
    border-bottom: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

/* Kontener na odpowiedź - kluczowy dla animacji */
.faq-item .answer-content {
    display: grid;
    grid-template-rows: 0fr; /* Stan zamknięty - wysokość 0 */
    transition: grid-template-rows 0.4s ease-in-out;
}

/* Styl, gdy odpowiedź jest rozwinięta */
.faq-item[open] .answer-content {
    grid-template-rows: 1fr; /* Stan otwarty - pełna wysokość */
}

/* Wewnętrzny div odpowiedzi - kluczowy dla animacji */
.faq-item .answer-content > div {
    overflow: hidden;
}

/* Stylizacja tekstu odpowiedzi */
.faq-item .answer-text {
    padding: 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #444; /* Ciemnoszary dla lepszego kontrastu */
}

/* Poprawka dla justowania tekstu w odpowiedziach */
.faq-item .answer-text p,
.faq-item .answer-text li {
    text-align: left;
    color: #444;
}

/* Poprawka dla przycisków w odpowiedziach */
.faq-item .answer-text a.shine-button {
    color: var(--bg-darker);
}
/* --- SEKCJA GEO ANSWER (koszty notarialne) --- */
.geo-answer-section {
    background-color: var(--bg-light-green);
    color: var(--text-dark);
}
.geo-answer-section h2 {
    color: var(--bg-darker);
}
.geo-box {
    background: var(--bg-white);
    border-left: 4px solid var(--accent);
    padding: 2rem 2.5rem;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    margin-bottom: 2rem;
}
.geo-box h3 {
    font-family: 'Playfair Display', serif;
    color: var(--bg-darker);
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.geo-box p {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.geo-box ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.geo-box ul li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: var(--text-dark);
}
.geo-box ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

/* --- SERVICE HIGHLIGHT (najem okazjonalny itp.) --- */
.service-highlight {
    background: var(--bg-white);
    border-left: 4px solid var(--accent);
    padding: 2rem 2.5rem;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    margin-bottom: 2rem;
}
.service-highlight h3 {
    font-family: 'Playfair Display', serif;
    color: var(--bg-darker);
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.service-highlight p {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.service-highlight ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.service-highlight ul li {
    padding: 0.6rem 0 0.6rem 1.5rem;
    position: relative;
    color: var(--text-dark);
    line-height: 1.6;
}
.service-highlight ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

/* --- SEKCJA CENNIK --- */
#cennik {
    background-color: var(--bg-light-green);
    color: var(--text-dark);
}
#cennik h2 {
    color: var(--bg-darker);
}
.price-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    text-align: center;
}
.price-item {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 4px solid var(--accent);
}
.price-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.price-item h3 {
    color: var(--bg-darker);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.price-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.price-netto {
    font-size: 1rem;
    font-weight: normal;
    color: #777;
}
.price-description {
    font-size: 0.9rem;
    color: #555;
    min-height: 40px;
}
.cennik-info {
    text-align: center;
    margin-top: 3rem;
    font-size: 0.9rem;
    color: #666;
}
      /* --- CONTACT SECTION --- */
      #kontakt .contact-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 2.5rem;
      }
      @media(min-width: 992px) {
          #kontakt .contact-grid {
              grid-template-columns: 1fr 1fr;
          }
          #kontakt .map-container {
              grid-column: 1 / -1;
          }
      }
      
      #kontakt .map-container {
          width: 100%;
          height: 400px;
          border-radius: 8px;
          overflow: hidden;
          margin-top: 2rem;
          border: 2px solid var(--accent);
      }
      #kontakt .map-container iframe {
          width: 100%;
          height: 100%;
          border: 0;
      }

      #kontakt .form-container {
          background-color: var(--bg-white);
          padding: 2rem;
          border-radius: 8px;
          box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      }
      .form-group {
    margin-bottom: 0.01rem;
}
      .form-group label {
          display: block;
          margin-bottom: .5rem;
          color: var(--text-dark);
          font-weight: bold;
      }
      .form-group input, .form-group textarea {
          width: 100%;
          padding: .75rem;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-family: var(--font-body); /* Zmieniona czcionka */
          font-size: 1rem;
          background-color: #f9f9f9;
      }
      .form-group textarea {
          resize: vertical;
          min-height: 150px;
      }
      .form-group button {
          width: 100%;
          padding: .75rem;
          background-color: var(--accent);
          color: var(--bg-darker);
          border: none;
          border-radius: 4px;
          font-size: 1.2rem;
          font-weight: bold;
          cursor: pointer;
          transition: background-color .3s;
          font-family: var(--font-header);
      }
      .form-group button:hover {
          background-color: var(--accent-hover);
      }
      #form-status {
        margin-top: 1rem;
        text-align: center;
        font-weight: bold;
      }


      /* --- ANIMATIONS --- */
      .animated-content {
        opacity: 0;
        transition: opacity 1s ease-out, transform 1s ease-out;
      }
      .animated-content.from-left {
        transform: translateX(-50px);
      }
      .animated-content.from-right {
        transform: translateX(50px);
      }
      .animated-content.visible {
        opacity: 1;
        transform: translateX(0);
      }
      
      @keyframes pulsate {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); color: var(--accent-hover); }
        100% { transform: scale(1); }
      }
      .pulsating {
        animation: pulsate 1.5s ease-in-out;
      }
      #kontakt .contact-info p {
        transition: transform 0.3s;
      }
      /* old footer styles removed - using .site-footer now */
      
        .whatsapp-fab {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        z-index: 1000;
        transition: transform 0.3s;
      }
      .whatsapp-fab:hover {
        transform: scale(1.1);
      }
      .whatsapp-fab svg {
        width: 100%;
        height: 100%;
        /* Nowy, poprawny cień dopasowany do kształtu ikony */
        filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
      }
      /* Usunięcie podkreślenia z linku */
      .whatsapp-fab::after {
        display: none;
      }

      /* --- STYLIZACJA ETYKIETY WHATSAPP (WERSJA FINALNA) --- */
      .whatsapp-callout {
      position: absolute;
      right: 75px;
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--bg-white);
      color: var(--text-dark);
      padding: 8px 12px;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      /* ZAKTUALIZOWANA LINIA: dodana nowa animacja po przecinku */
      animation: fadeInCallout 1s ease-in-out 3s forwards, glow-callout 3s ease-in-out 4s infinite;
      }
      .whatsapp-callout::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent transparent var(--bg-white);
      }
      @keyframes fadeInCallout {
        from { opacity: 0; transform: translateY(-50%) translateX(10px); }
        to   { opacity: 1; transform: translateY(-50%) translateX(0); }
      }

      /* --- ZMIANA LOGO NA WERSJĘ MOBILNĄ --- */
      @media (max-width: 768px) {

        /* Ukrywamy oryginalny, długi tekst we wszystkich wersjach językowych */
        .logo.lang-pl,
        .logo.lang-en,
        .logo.lang-ua {
          font-size: 0;
        }

        .logo small {
          display: none;
        }

        .header-brand {
          flex-shrink: 1;
          min-width: 0;
          overflow: hidden;
        }
        .header-controls {
          flex-shrink: 0;
        }
        header {
          padding: .75rem 1rem;
        }

        /* Wstawiamy nowy, krótki tekst dla każdej wersji językowej */
        .logo.lang-pl::before {
          content: "KN Bartłomiej Wolak";
          font-size: 1.2rem; /* Przywracamy oryginalny rozmiar czcionki */
        }
        .logo.lang-en::before {
          content: "NO Bartłomiej Wolak";
          font-size: 1.2rem;
        }
        .logo.lang-ua::before {
          content: "Бартломєй Волак";
          font-size: 1.2rem;
        }
      }
/* --- POPRAWKA WYGLĄDU SEKCJI HERO NA TELEFONACH --- */
@media (max-width: 767px) {

  /* 1. Zmieniamy ca�� sekcj� na uk�ad pionowy (kolumnowy) - WY��CZONE DLA EFEKTU PARALLAX */
  .hero {
    /* flex-direction: column; */
    min-height: 100vh; 
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 2. Stylujemy blok tekstowy z efektem GLASSMORPHISM */
  .hero-text {
    position: relative; 
    width: 100%;
    max-width: 100%;
    margin: 0;
    
    /* Efekt mrozonego szkla - na calej szerokosci */
    background: rgba(35, 55, 51, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    
    padding: 2rem 1.5rem; 
    text-align: center; 
    z-index: 2;
    margin-top: 80px;
    pointer-events: auto !important;
  }
  
  /* Poprawiamy wygl�d tekstu wewn�trz */
  .hero-text h1 {
    font-size: 1.8rem; /* Nieco mniejszy dla lepszego dopasowania */
    text-align: center;
    color: #ffffff;
    text-shadow: none; /* Cie� nie jest ju� potrzebny przy ciemnym tle */
    margin-bottom: 1rem;
  }
  .hero-text p {
    color: #e0e0e0; /* Jasnoszary, czytelny */
    text-shadow: none;
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Poprawiamy widoczno�� danych kontaktowych na ciemnym szkle */
  .hero-text .contact-details p {
    color: #f0f0f0; /* Prawie bia�y */
  }
  .hero-text .contact-details strong {
    color: #ffffff; /* Bia�y */
  }
  .hero-text .contact-details a {
    color: #ffffff; /* Bia�y link */
    text-decoration: underline;
  }
  .hero-text .contact-details .icon {
    fill: #c9a96e; /* Z�ota ikona */
  }
  
  /* Poprawiamy widoczno�� informacji o najmie okazjonalnym */
  .hero-text .occasional-rental-info p {
    color: #e0e0e0;
  }
  .hero-text .occasional-rental-info strong {
    color: #c9a96e !important; /* Z�oty */
  }

  /* 3. Stylujemy blok ze zdj�ciem - WY��CZONE, OBS�UGIWANE PRZEZ G�RNE MEDIA QUERY */
  /* .hero-bg-img { ... } */

  /* --- GLASSMORPHISM DLA SEKCJI "O MNIE" NA TELEFONIE --- */
  #o-mnie {
    background: rgba(35, 55, 51, 0.85); /* Mocniejsza ciemna ziele� */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #e0e0e0;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 0; /* Usuni�cie ewentualnych margines�w */
  }
  
  #o-mnie h2 {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  
  #o-mnie h3 {
    color: #c9a96e; /* Z�oty nag��wek h3 */
  }
  
  #o-mnie p, #o-mnie li {
    color: #f0f0f0;
    line-height: 1.6;
  }
  
  #o-mnie blockquote {
    color: #ffffff;
    border-left: 4px solid #c9a96e;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    font-style: italic;
  }
  
  #o-mnie strong {
    color: #fff;
  }

  /* --- GLASSMORPHISM DLA SEKCJI "DOKUMENTY" (#informacje-praktyczne) NA TELEFONIE --- */
  #informacje-praktyczne {
    background: rgba(35, 55, 51, 0.85); /* Ciemna ziele� */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #e0e0e0;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #informacje-praktyczne h2 {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }

  #informacje-praktyczne p {
    color: #f0f0f0 !important;
  }

  /* Stylizacja akordeon�w (FAQ items) w tej sekcji na ciemnym tle */
  #informacje-praktyczne .faq-item {
    background: rgba(255, 255, 255, 0.05); /* Bardzo delikatne t�o dla elementu */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  #informacje-praktyczne summary {
    color: #c9a96e; /* Z�ote nag��wki rozwijane */
    font-weight: 600;
  }
  
  #informacje-praktyczne summary::after {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(0deg); /* Zmiana koloru strza�ki na jasny/z�oty */
  }

  #informacje-praktyczne .answer-text {
    color: #e0e0e0;
  }
  
  #informacje-praktyczne li {
    color: #e0e0e0;
  }
  
  #informacje-praktyczne strong {
    color: #fff;
  }

}
/* --- KOD NAPRAWCZY DLA WERSJI KOMPUTEROWEJ --- */
@media (min-width: 768px) {

  /* 1. Przywracamy podstawowe ustawienia dla sekcji hero na desktopie */
  .hero {
    flex-direction: row; /* Układ z powrotem poziomy */
    justify-content: flex-start; /* Wyrównanie tekstu do lewej */
    min-height: 100vh;
  }

  /* 2. Przywracamy pozycjonowanie obrazka jako tła */
  .hero-bg-img {
    position: absolute; /* KLUCZOWE: Zdjęcie znowu jest tłem */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    order: 0; /* Reset kolejności */
  }

  /* 4. Resetujemy styl bloku tekstowego do wersji desktopowej */
  .hero-text {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 600px;
    height: auto;
    background: transparent; /* Tło tekstu znowu przezroczyste */
    padding: 0;
    margin: 0 5vw; /* Oryginalny margines */
    text-align: left;
    order: 0; /* Reset kolejności */
  }

    /* --- FROSTED-GLASS DLA SEKCJI "O MNIE" NA DESKTOPIE --- */
    /* Sekcja rozci�ga si� od kraw�dzi ekranu do kraw�dzi ekranu (edge-to-edge)
       i przylega bez odst�pu do sekcji kalkulatora powy�ej. */
    #o-mnie {
        width: 100vw;
        /* Center the full-viewport element inside the normal flow without causing horizontal scroll */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-top: 0; /* Przylega do sekcji powy�ej */
        background: rgba(35, 55, 51, 0.65);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #eaeaea;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
        border-radius: 0; /* Bez zaokr�gle�, by dosi�ga� kraw�dzi */
        box-shadow: none; /* Usu� du�y cie� pomagaj�cy p�ynnemu po��czeniu z sekcj� powy�ej */
    }

    /* Zapewnij wewn�trzne marginesy tre�ci, bez wp�ywu na szeroko�� elementu */
    #o-mnie .section-content {
        background: transparent;
        padding: 0 2rem;
        max-width: 1100px;
        margin: 0 auto;
    }

    /* Usu� odst�p pod kalkulatorem, aby #o-mnie przylega�o bez przerwy */
    #kalkulator-notarialny-embedded { margin-bottom: 0; }

  .hero-text h1 {
    font-size: 48px;
    text-align: left;
  }
}
.zdjecie-w-sekcji {
    float: left;
    width: 280px;
    height: auto;
    margin: 5px 30px 15px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--border);
}
/* --- ANIMACJA PRZYCISKU Z POŁYSKIEM --- */
.shine-button {
    /* Zachowujemy style z poprzedniej wersji */
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    color: var(--bg-darker);
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    
    /* Nowe style do animacji */
    position: relative;
    overflow: hidden;
    background-color: var(--accent);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: -200% 0;
    animation: shine-effect-button 3s linear infinite 2s;
}

@keyframes shine-effect-button {
    to {
        background-position: 200% 0;
    }
}
/* --- STYL GŁÓWNEGO PRZYCISKU W SEKCJI HERO --- */
.btn-primary {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 12px 24px;
    background-color: var(--accent);
    color: var(--bg-darker);
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Wyłączenie animacji podkreślenia dla tego przycisku */
a.btn-primary::after {
    display: none;
}
/* --- KOLOR GŁÓWNEGO NAGŁÓWKA --- */
.hero-text h1 {
    color: var(--accent);
}
/* --- STYLE DLA NOWEGO FORMULARZA KONTAKTOWEGO --- */
.form-group select {
    width: 100%;
    padding: .75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: #f9f9f9;
}

.hidden-field {
    display: none;
}
/* --- STYLE DLA ROZBUDOWANEGO FORMULARZA KONTAKTOWEGO --- */
.form-group select, .form-group input[type="date"] {
    width: 100%; padding: .75rem; border: 1px solid #ccc; border-radius: 4px; font-family: var(--font-body); font-size: 1rem; background-color: #f9f9f9; color: var(--text-dark);
}
.hidden-field { display: none; }
.honeypot-field { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }

#microGuarantees {
    display: flex; justify-content: space-around; text-align: center; font-size: 0.9rem; color: var(--text-dark); background-color: #f0f0f0; padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem;
}
#microGuarantees span { display: inline-block; }

/* NOWA, NIEZAWODNA STYLIZACJA CHECKBOXÓW */
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-weight: normal;
}
.checkbox-label input[type="checkbox"] {
    margin-right: 12px; /* Odstęp między polem a tekstem */
    flex-shrink: 0;
    width: 1.2em; /* Powiększenie checkboxa */
    height: 1.2em;
/* --- STYLE DLA DODATKOWEGO PRZYCISKU W SEKCJI HERO --- */
.hero-buttons-container {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap; /* Pozwala przyciskom przenieść się niżej na małych ekranach */
    gap: 1rem; /* Odstęp między przyciskami */
    align-items: center;
}

@media (max-width: 600px) {
    .hero-buttons-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
    }
    .hero-buttons-container a,
    .hero-buttons-container button {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 1.05rem;
        text-align: center;
        pointer-events: auto !important;
    }
}

.btn-secondary {
    /* Podstawowe style */
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none; /* Usunięta ramka */

    /* Style do animacji połysku */
    position: relative;
    overflow: hidden;

    /* Kolorystyka - zielony przycisk */
    background-color: #2E8B57; /* Atrakcyjny zielony */
    color: #ffffff; /* Biały tekst dla kontrastu */

    /* Gradient do animacji połysku */
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: -200% 0;

    /* Podpięcie gotowej animacji */
    animation: shine-effect-button 3s linear infinite 2s;
}

btn-secondary:hover {
    background-color: #3CB371; /* Jaśniejszy zielony */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Wyłączenie animacji podkreślenia dla drugiego przycisku */
a.btn-secondary::after {
    display: none;
}
/* OSTATECZNA WERSJA - Stylizacja bloku informacji o najmie okazjonalnym */
.occasional-rental-info {
    background-color: #ffffff !important; /* GWARANTOWANE BIAŁE TŁO */
    color: var(--text-dark);
    padding: 1.25rem;
    border-radius: 6px;
    border-left: 4px solid var(--accent);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: left;
    margin-top: 1.5rem;
}

.occasional-rental-info p {
    color: var(--text-dark);
    text-shadow: none;
    margin-bottom: 0;
}

.occasional-rental-info strong {
    color: var(--bg-dark);
}

.occasional-rental-info a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
}

.occasional-rental-info a::after {
    display: none;
}
/* ================================================= */
/* === NOWOCZESNA SEKCJA "PRZYDATNE LINKI" - STYLE === */
/* ================================================= */

/* Kontener siatki dla kart z linkami */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Styl pojedynczej karty */
.link-card {
    background-color: var(--bg-white);
    color: var(--text-dark);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Styl ikony */
.link-card-icon {
    margin: 0 auto 1.5rem;
    background-color: var(--bg-light-green);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-card-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--accent); /* Kolor ikony */
    stroke-width: 1.5;
}

/* Tytuł karty */
.link-card h3 {
    color: var(--bg-darker);
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

/* Opis na karcie */
.link-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    flex-grow: 1; /* Sprawia, że opis wypełnia przestrzeń */
    text-align: center;
}

/* Przycisk na karcie */
.link-card-button {
    margin-top: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    display: inline-block;
}
.link-card-button::after {
    display: none; /* Wyłączenie animacji podkreślenia */
}

.link-card-button:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}
/* Dodatkowe style dla list linków wewnątrz kart */
.link-card-links {
    margin-top: 1rem;
    padding-left: 0;
    list-style: none;
    text-align: center;
}
.link-card-links li {
    margin-bottom: 0.5rem;
}
.link-card-links a {
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}
.link-card-links a:hover {
    text-decoration: underline;
    color: var(--accent-hover);
}
/* Ustawienie jasnego tła dla całej sekcji */
#przydatne-linki {
    background-color: var(--bg-light-green);
}

/* Zapewnienie, że nagłówek będzie ciemny na jasnym tle */
#przydatne-linki h2 {
    color: var(--bg-darker);
}

/* Stylizacja złotej linii pod nagłówkiem (dla spójności) */
#przydatne-linki h2::after {
    background-color: var(--accent);
}
/* ======================================================= */
/* === NOWOCZESNA SEKCJA "INFORMACJE PRAKTYCZNE" - STYLE === */
/* ======================================================= */

.tabs {
    width: 100%;
    margin-top: 2rem;
}

.tabs-container {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
}

.tab-button {
    padding: 1rem 1.5rem;
    cursor: pointer;
    border: none;
    background-color: transparent;
    border-bottom: 3px solid transparent;
    font-family: var(--font-header);
    font-size: 1.1rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    margin-bottom: -1px; /* Aby dolna krawędź nachodziła na krawędź kontenera */
}

.tab-button svg {
    width: 20px;
    height: 20px;
    stroke: #888;
    transition: stroke 0.3s ease;
}

.tab-button:hover {
    color: var(--text-dark);
    background-color: #f5f5f5;
}

.tab-button:hover svg {
    stroke: var(--text-dark);
}

.tab-button.active {
    color: var(--accent);
    border-bottom: 3px solid var(--accent);
    background-color: #fff;
}

.tab-button.active svg {
    stroke: var(--accent);
}

.tabs-content {
    background-color: #fff;
    padding: 2rem;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-panel.active {
    display: block;
}

.tab-panel h3 {
    font-size: 1.5rem;
    color: var(--bg-darker);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.tab-panel h3:first-child {
    margin-top: 0;
}

.tab-panel ul {
    list-style-position: outside;
    padding-left: 1.5rem;
    margin-left: 0;
}

.tab-panel ul li {
    padding-left: 0.5rem;
    text-indent: 0;
    text-align: left;
    color: #333;
    margin-bottom: 0.5rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* ============================================= */
/* === NOWOCZESNA SEKCJA USŁUGI - KAFELKI (POPRAWIONA) === */
/* ============================================= */

.service-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.service-card {
    background: rgba(255, 255, 255, 0.03); /* Lepszy kontrast */
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border-color: var(--accent-hover);
}

.service-card::after {
    display: none;
}

.service-card h3 {
    color: var(--accent);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.service-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 0;
    flex-grow: 1; 
}

.service-details-container {
    margin-top: 4rem;
}

.service-details-section {
    padding-top: 4rem; 
    margin-top: -4rem; /* Ujemny margines, aby kotwica działała idealnie */
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(185, 166, 123, 0.2);
    margin-bottom: 2rem;
}

.service-details-section:last-child {
    border-bottom: none;
}

.service-details-section h3 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.service-details-section ul {
    list-style: none;
    padding-left: 0;
    columns: 2;
    column-gap: 2.5rem;
}

.service-details-section ul li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    text-align: left;
}

.service-details-section ul li::before {
    content: '♦';
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 768px) {
    .service-details-section ul {
        columns: 1;
    }
}
/* --- Modyfikacja kolorystyki sekcji Usługi --- */
#uslugi .faq-item summary::after {
    color: var(--bg-darker);
}
/* ============================================= */
/* === ULEPSZONA SEKCJA "O MNIE" (WERSJA OSTATECZNA) === */
/* ============================================= */
#o-mnie .section-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.25rem;
    line-height: 1.9;
}
#o-mnie h3 {
    font-size: 1.8rem;
    color: var(--accent);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.about-me-quote {
    border-left: 4px solid var(--accent);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-light);
}
.key-values-list {
    list-style: none !important; /* WAŻNE: Usuwa domyślne kropki */
    padding-left: 0 !important;
    margin-top: 2rem;
}
.key-values-list li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    color: var(--text-light);
    text-align: left;
    text-indent: 0;
}

/* TA CZĘŚĆ ODPOWIADA ZA DODANIE ZŁOTYCH ZNACZNIKÓW */
.key-values-list li::before {
    content: '✓';
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}
.faq-item { 
    border: 5px solid red !important; 
}
.text-shine-gold {
  /* Kolor zapasowy dla starszych przeglądarek */
  color: var(--accent);
  
  /* Efekt mieniącego się gradientu */
  background: linear-gradient(90deg, var(--accent) 30%, #fff 50%, var(--accent) 70%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  
  /* Użycie istniejącej animacji */
  animation: text-shine 5s linear infinite;
}
/* --- DOCELOWY STYL PRZYCISKU W FORMULARZU --- */
#kontakt .form-group button {
    display: block;
    width: auto;
    min-width: 220px;
    margin: 1.5rem auto 0 auto;
    padding: 12px 24px;
    background-color: var(--accent);
    color: var(--bg-darker);
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s;
    font-family: var(--font-header);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#kontakt .form-group button:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* --- Style dla animacji wideo podpisu --- */

/* Nadajemy pozycję względną kontenerowi z tekstem, aby wideo mogło się w nim pozycjonować */
#o-mnie .section-content {
    position: relative;
    padding-bottom: 150px; /* Dodajemy miejsce na dole, aby wideo nie nachodziło na tekst na małych ekranach */
}

.signature-video-animation {
    position: absolute; /* Pozycjonowanie absolutne względem kontenera powyżej */
    right: 2rem; /* Odstęp od prawej krawędzi */
    bottom: 2rem; /* Odstęp od dolnej krawędzi */
    width: 100%;
    max-width: 350px; /* Maksymalna szerokość podpisu */
    height: auto;
    pointer-events: none; /* Sprawia, że wideo jest "nieklikalne" */
    z-index: 10; /* Gwarantuje, że jest na wierzchu */
}

/* Dostosowanie dla urządzeń mobilnych */
@media (max-width: 768px) {
    .signature-video-animation {
        max-width: 280px; /* Zmniejszamy podpis na mniejszych ekranach */
        right: 1rem;
        bottom: 1rem;
    }
}
/* --- NOWY KOD: STYLIZACJA OKNA POP-UP REZERWACJI --- */
#booking-modal .modal-content {
    animation: slideIn 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 768px) {
    #booking-modal .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 1.5rem;
    }
    #booking-modal .modal-content h3 {
        font-size: 1.5rem;
    }
    #booking-modal .modal-content iframe {
        height: 400px;
    }
}
/* ============================================= */
/* === STYLE DLA TABELI PORÓWNAWCZEJ === */
/* ============================================= */

.table-container {
    margin: 2rem 0;
    overflow-x: auto; /* Zapewnia przewijanie na małych ekranach */
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: blue; /* <--- ZMIENIONO NA NIEBIESKI DLA TESTU */
    border: 1px solid #ddd;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.comparison-table thead tr {
    background-color: var(--bg-light-green); /* Jasnozielone tło z Twojej palety */
}

.comparison-table th {
    font-family: var(--font-header);
    font-size: 1rem;
    color: var(--bg-dark); /* Ciemnozielony tekst z Twojej palety */
    font-weight: 700;
}

.comparison-table tbody tr:nth-of-type(even) {
    background-color: #f9f9f9; /* Lekko szare tło dla co drugiego wiersza */
}

.comparison-table tbody tr:hover {
    background-color: #f1f1f1;
}

.comparison-table td:first-child {
    font-weight: 700;
    color: #555;
}

.comparison-table .highlight-strong {
    font-weight: 700;
    color: #c0392b; /* Czerwony dla podkreślenia ryzyka/konsekwencji */
}

.comparison-table .highlight-light {
    font-weight: 700;
    color: #27ae60; /* Zielony dla podkreślenia mniejszego ryzyka */
}

/* Responsywność tabeli */
@media (max-width: 768px) {
    .comparison-table th,
    .comparison-table td {
        font-size: 0.9rem;
        padding: 10px 8px;
    }
}

/* --- NOWE STYLE DLA TABELI W ARTYKUŁACH --- */
#blog-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden; /* Niezbędne do zaokrąglenia rogów w nagłówku */
    font-size: 0.95rem;
}

#blog-article th, #blog-article td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

#blog-article thead tr {
    background-color: var(--accent);
    color: var(--bg-white);
}

#blog-article thead th {
    font-weight: 700; /* Bold */
    font-family: var(--font-header);
    font-size: 1.1rem;
    border-bottom: 2px solid var(--accent-hover);
}

#blog-article tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

#blog-article tbody tr:hover {
    background-color: #f1f1f1;
}

#blog-article tbody td:first-child {
    font-weight: bold;
    color: var(--bg-darker);
}

#blog-article td strong {
    font-weight: 700;
}

/* Specjalne wyróżnienie dla komórek z ryzykiem */
#blog-article td:last-child {
    font-weight: normal;
}

#blog-article tbody tr:last-child td {
    border-bottom: none;
}

#blog-article tbody tr:last-child td:nth-child(2) {
    background-color: rgba(255, 230, 230, 0.7); /* Delikatny czerwony */
    font-weight: bold;
    color: #c0392b;
}

#blog-article tbody tr:last-child td:nth-child(3) {
    background-color: rgba(230, 245, 230, 0.7); /* Delikatny zielony */
    font-weight: bold;
    color: #27ae60;
}

/* Shimmering Green Button */
.btn-shimmer-green,
.hero-buttons-container .btn-shimmer-green,
#heroAskAboutCostsBtn {
    padding: 1rem 2.5rem !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #233733 !important;
    background-color: #c9a96e !important;
    border: none !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background-color 0.3s, box-shadow 0.3s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.btn-shimmer-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s infinite;
}

.btn-shimmer-green:hover {
    background-color: #b9a67b !important;
    color: #233733 !important;
    box-shadow: 0 8px 24px #c9a96e88;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

    /* old kalkulator footer styles removed - using .site-footer now */

/* --- SCROLL ANIMATIONS (Micro-interactions) --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

/* Staggered delay for children if needed */
.fade-in-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

.fade-in-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.fade-in-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.fade-in-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.fade-in-stagger.is-visible > *:nth-child(4) { transition-delay: 0.4s; }

/* ===============================================================
   FOOTER v6.0 � "Nowoczesna Elegancja Prawnicza"
   Core styles inlined in footer <style> block. Fallback below.
   =============================================================== */
footer.site-footer {
    background: #233733 !important;
    color: #d4d9d7;
    padding: 0 !important;
    margin: 0;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    position: relative;
    z-index: 2;
    border-top: none !important;
}
footer.site-footer::before {
    content: '';
    display: block;
    height: 3px;
    background: #b9a67b;
}