/* CSS */
.hero-headline {
    font-size: 42px; /* dopasować do strony */
    font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
}

.modern-highlight {
    display: inline; /* KLUCZOWE! Tekst traktowany jest jako ciągły */

    /* Tworzymy żółty pasek jako tło, które zajmuje dolne 35% wysokości tekstu */
    background-image: linear-gradient(180deg, transparent 65%, #ffcc00 65%);

    /* Dodajemy minimalny margines z lewej i prawej, żeby marker nie kończył się równo z literą */
    padding: 0 4px;
}



/* Akapit */
.hero-paragraph {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    color: #4b5563; /* Nowoczesny, lżejszy grafit */
    margin-bottom: 32px;
}

/* Kontener na ostre elementy */
.sharp-benefits-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Ostre pudełko - Wariant 1 (ramka 1px, radius: 0) */
.sharp-benefit-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: transparent; /* Brak tła */
    border: 1px solid #e0e0e0;     /* Cienka, ostra, jasnoszara ramka */
    border-radius: 0 !important;   /* Bezwzględny brak zaokrągleń */
    padding: 8px 18px;
    box-shadow: none;              /* Rezygnujemy z cieni na rzecz flat designu */
}

/* Żółty ptaszek */
.sharp-benefit-icon {
    color: #ffcc00;                /* Pana oryginalny, mocny żółty */
    font-weight: 900;
    font-size: 15px;
}

/* Tekst wewnątrz */
.sharp-benefit-text {
    font-size: 13.5px;
    font-weight: 500;
    color: #222222;
    text-transform: lowercase;     /* Styl małych liter zachowany */
}

/* ==========================================================================
   TARCZA ANTY-ROZJAZDOWA DLA PHONÓW (MOBILE FIX)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Układamy klocki jeden pod drugim, a nie obok siebie */
    .sharp-benefits-container {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* 2. Każdy klocek rozciąga się na pełną szerokość ekranu */
    .sharp-benefit-box {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
    }

    /* 3. ŚWIĘTY GRAAL MOBILE: Margines bezpieczeństwa na dole!
       Dodajemy wolną przestrzeń na samym dole sekcji hero,
       dzięki czemu pływający pasek "Darmowa wycena" niczego nie zasłoni. */
    .benefits-container,
    .sharp-benefits-container {
        margin-bottom: 55px !important; /* Bezpieczna strefa dla pływającego menu */
    }
}

.integ-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:8px;
    padding:24px 24px 20px;
    height:100%;
    transition:.2s;
}
.integ-card:hover{
    border-color:#e0e0e0;
}
.integ-icon{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:50%;
    background:var(--yellow);
    display:flex;
    align-items:center;
    justify-content:center;
}
.integ-icon i{
    font-size:14px;
    color:#fff;
}
.integ-logos{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}
.integ-logo-box{
    height:40px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ececec;
    border-radius:6px;
    background:#fafafa;
    transition:.2s;
}
.integ-logo-box:hover{
    border-color:var(--yellow);
    background:#fff;
}
.integ-logo-box img{
    max-height:22px;
    max-width:90px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:grayscale(1) opacity(.75);
    transition:.2s;
}
.integ-logo-box:hover img{
    filter:none;
}

.integ-logo-box img{
    width: 90px;
    height: 22px;
    object-fit: contain;
    filter: grayscale(1) opacity(.75);
    transition: .2s;
}

.port-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:8px;
    transition:.2s;
}
.port-card:hover{
    border-color:#e0e0e0;
}

/* ===== Panel boczny menu — wersja wysuwana z PRAWEJ ===== */
#navigation {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    right: 0;
    left: auto !important;
    top: 0;
    border: none;
    overflow: hidden !important;
    z-index: 1000;
    box-shadow: -8px 0 30px rgba(0,0,0,.25);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility 0s linear .35s;
}
#navigation.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s ease;
}

#nav_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 999;
    opacity: 0;
    transition: opacity .3s ease;
}
#nav_overlay.show {
    display: block;
    opacity: 1;
}

/* Szerokości panelu wg breakpointów */
@media only screen and (max-width: 767px) {
    #navigation { width: 100%; }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    #navigation { width: 55%; }
}
@media only screen and (min-width: 1200px) {
    #navigation { width: 36%; max-width: 620px; }
}

@media only screen and (min-width: 768px) {
    #navigation ul { margin: 2rem 0 0 8%; }
    #navigation li a { font-size: 21px; }
    #navigation .sub a { font-size: 15px; }
    #navigation li a i.more { font-size: 22px; margin-left: 15px; }
    #navigation .navHead { padding-top: 1.5rem !important; }
}

.experience-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;

    background:#fff;
    border:1px solid #f3c434;

    padding:9px 19px;
    border-radius:0px;

    font-size:16px;
    font-weight:700;
    color:#111;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

    transition:.2s;
}

.experience-badge__icon{
    width:24px;
    height:24px;

    border-radius:50%;

    background:#f3c434;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
}

.experience-badge__text{
    line-height:1;
}

.item.narrow{ width:400px !important; }

@media only screen and (max-width: 767px) {
    .item.narrow{ width:300px !important;; }
}

.price-list25-featured {
    position: relative;
    border: 2px solid #ffc107;
    transform: scale(1.03);
}

.featured-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffc107;
    color: #222;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

.button25-outline {
    display: inline-block;
    padding: 8px 15px;
    background-color: transparent;
    color: var(--dark_gray, #363535);
    border: 2px solid var(--yellow, #fdce0c);
    transition: all .1s linear;
}
.button25-outline:hover {
    background-color: var(--yellow, #fdce0c);
}

.features-clean {
    list-style: none;
    padding: 0;
    margin: 0;
}
.features-clean li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    line-height: 1.4;
}
.features-clean li:last-child {
    margin-bottom: 0;
}
.features-clean li i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--yellow, #fdce0c);
    font-size: 13px;
}