h2 {
  font-size:2rem;
}



/* ==========================================================================
   Section: DEYE & EcoBSS Intro
   ========================================================================== */

.deye-ecobss-intro {
    padding: 80px 0;
    position: relative;
    background-color: #EAEEF1;
}

.deye-ecobss-intro .grid2_col {
    align-items: center;
    gap: 50px;
}

/* Grafika po lewej */
.deye-ecobss-intro__image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.deye-ecobss-intro__img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Tekst po prawej */
.deye-ecobss-intro__text h2 {
    margin-bottom: 24px;
    color: #000000;
}

.deye-ecobss-intro__text p {
    margin-bottom: 0;
    color: #000000;
}

/* ==========================================================================
   Responsywność (Media Queries)
   ========================================================================== */

@media (max-width: 1200px) {
    .deye-ecobss-intro {
        padding: 60px 0;
    }

    .deye-ecobss-intro .grid2_col {
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .deye-ecobss-intro {
        padding: 40px 0;
    }

    /* Przełączenie grid2_col na 1 kolumnę */
    .deye-ecobss-intro .grid2_col {
        grid-template-columns: 100%;
        gap: 30px;
    }

    /* Układ na mobile: treść wyżej (order 1), grafika niżej (order 2) */
    .deye-ecobss-intro .left_col {
        order: 2;
    }

    .deye-ecobss-intro .right_col {
        order: 1;
    }

    .deye-ecobss-intro__text h2 {
        margin-bottom: 16px;
    }
}





/* ==========================================================================
   Section: DEYE & EcoBSS How It Works (Round Icons & Mobile Flow)
   ========================================================================== */

.deye-ecobss-how-it-works {
    padding: 90px 0;
    background-color: #EAEEF1;
    position: relative;
}

.deye-ecobss-how-it-works__header {
    text-align: center;
    margin-bottom: 60px;
}

.deye-ecobss-how-it-works__header h2 {
    color: #000000;
}

/* ==========================================================================
   Schemat Przepływu (Diagram)
   ========================================================================== */

.deye-ecobss-how-it-works__diagram-wrapper {
    margin-bottom: 65px;
    padding: 10px 0;
}

.deye-ecobss-how-it-works__diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

/* Węzły (Nodes) */
.deye-ecobss-how-it-works__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 1;
    text-align: center;
    cursor: pointer;
}

/* Domyślnie: Okrągłe kółka z wypełnieniem #e53011 i BIAŁĄ ikoną */
.deye-ecobss-how-it-works__node-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%; /* Okrągłe kółko */
    background-color: #e53011;
    border: 1px solid #e53011;
    box-shadow: 0 8px 20px rgba(229, 48, 17, 0.2);
    transition: all 0.3s ease;
}

.deye-ecobss-how-it-works__node-icon svg {
    stroke: #ffffff;
    transition: stroke 0.3s ease, transform 0.3s ease;
}

/* Po najechaniu: Odwrócenie - białe kółko, czerwony border i CZERWONA ikona */
.deye-ecobss-how-it-works__node:hover .deye-ecobss-how-it-works__node-icon {
    background-color: #ffffff;
    border-color: #e53011;
    box-shadow: 0 10px 25px rgba(229, 48, 17, 0.3);
    transform: translateY(-4px);
}

.deye-ecobss-how-it-works__node:hover .deye-ecobss-how-it-works__node-icon svg {
    stroke: #e53011;
    transform: scale(1.1);
}

.deye-ecobss-how-it-works__node-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #000000;
    transition: color 0.3s ease;
}

.deye-ecobss-how-it-works__node:hover .deye-ecobss-how-it-works__node-label {
    color: #e53011;
    font-weight: 600;
}

/* Łączniki i Strzałki */
.deye-ecobss-how-it-works__arrow {
    flex-grow: 1;
    height: 2px;
    background: #cbd5e1;
    position: relative;
    min-width: 40px;
    margin-bottom: 28px;
}

.deye-ecobss-how-it-works__arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #e53011;
}

.deye-ecobss-how-it-works__arrow-mobile {
    display: none;
}

/* Animowane impulsy energii na desktopie */
.deye-ecobss-how-it-works__pulse {
    position: absolute;
    top: -3px;
    left: -20%;
    width: 14px;
    height: 8px;
    background: linear-gradient(90deg, rgba(229,48,17,0) 0%, #e53011 100%);
    box-shadow: 0 0 8px #e53011;
    animation: advancedPulse 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.deye-ecobss-how-it-works__pulse--delay {
    animation-delay: 1.1s;
}

@keyframes advancedPulse {
    0% { left: -30%; opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* ==========================================================================
   Siatka Opisowa
   ========================================================================== */

.deye-ecobss-how-it-works__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.deye-ecobss-how-it-works__card {
    background: #ffffff;
    border-radius: 0px;
    border-top: 3px solid #e53011;
    padding: 32px 28px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deye-ecobss-how-it-works__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.deye-ecobss-how-it-works__card-small-num {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #e53011;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.deye-ecobss-how-it-works__card-text h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 12px;
}

.deye-ecobss-how-it-works__card-text p {
    color: #4a555e;
    margin: 0;
}

/* ==========================================================================
   Responsywność (Media Queries)
   ========================================================================== */

@media (max-width: 1200px) {
    .deye-ecobss-how-it-works {
        padding: 70px 0;
    }

    .deye-ecobss-how-it-works__grid {
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .deye-ecobss-how-it-works {
        padding: 50px 0;
    }

    .deye-ecobss-how-it-works__grid {
        grid-template-columns: 100%;
        gap: 20px;
    }

    /* Układ mobilny schematu: ikony pionowo pod sobą */
    .deye-ecobss-how-it-works__diagram {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .deye-ecobss-how-it-works__node {
        width: 100%;
    }

    /* Wyłączenie linii poziomej, włączenie pionowej małej strzałki */
    .deye-ecobss-how-it-works__arrow {
        height: auto;
        width: 100%;
        background: transparent;
        margin: 12px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .deye-ecobss-how-it-works__arrow::after,
    .deye-ecobss-how-it-works__pulse {
        display: none;
    }

    .deye-ecobss-how-it-works__arrow-mobile {
        display: flex;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #d3dbe0;
    }
}

@media (max-width: 568px) {
    .deye-ecobss-how-it-works__card {
        padding: 24px 20px;
    }
}





/* ==========================================================================
   Section: PV Surplus Management
   ========================================================================== */

.pv-surplus-management {
    padding: 80px 0;
    position: relative;
    background-color: #ffffff;
}

.pv-surplus-management .grid2_col {
    align-items: center;
    gap: 50px;
}

/* Lewa kolumna - Grafika */
.pv-surplus-management__image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pv-surplus-management__img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 0px; /* Ostre krawędzie */
}

/* Prawa kolumna - Treść */
.pv-surplus-management__text h2 {
    margin-bottom: 32px;
    color: #000000;
}

.pv-surplus-management__block {
    margin-bottom: 28px;
    padding-left: 20px;
    border-left: 3px solid #e53011; /* Akcent czerwonej linii (0px radius) */
}

.pv-surplus-management__block:last-child {
    margin-bottom: 0;
}

.pv-surplus-management__block h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 10px;
}

.pv-surplus-management__block p {
    color: #4a555e;
    margin-bottom: 12px;
}

.pv-surplus-management__block p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Responsywność (Media Queries)
   ========================================================================== */

@media (max-width: 1200px) {
    .pv-surplus-management {
        padding: 60px 0;
    }

    .pv-surplus-management .grid2_col {
        gap: 35px;
    }
}

@media (max-width: 992px) {
    .pv-surplus-management {
        padding: 40px 0;
    }

    /* Przełączenie grid2_col na 1 kolumnę */
    .pv-surplus-management .grid2_col {
        grid-template-columns: 100%;
        gap: 30px;
    }

    /* Układ na mobile: treść wyżej (order 1), grafika niżej (order 2) */
    .pv-surplus-management .left_col {
        order: 2;
    }

    .pv-surplus-management .right_col {
        order: 1;
    }

    .pv-surplus-management__text h2 {
        margin-bottom: 24px;
    }

    .pv-surplus-management__block {
        margin-bottom: 20px;
        padding-left: 15px;
    }
}





/* ==========================================================================
   Section: System Benefits Block Style (Refined UI/UX - 5 items layout)
   ========================================================================== */

.system-benefits-layout {
    padding: 90px 0;
    background-color: #0b0e11;
    position: relative;
}

/* Górna sekcja */
.system-benefits-layout .grid2_col {
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
}

.system-benefits-layout h2 {
    color: #ffffff;
    margin-bottom: 20px;
}

.system-benefits-layout__main-text {
    color: #a0aec0;
    font-size: 1.05rem;
    margin: 0;
}

.system-benefits-layout__image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.system-benefits-layout__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Tytuł listy */
.system-benefits-layout__list-title {
    margin-bottom: 40px;
}

.system-benefits-layout__list-title h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 500;
}

/* Kontener dla siatki kafelków */
.system-benefits-layout__tiles-wrapper {
    position: relative;
    margin-bottom: 40px;
    padding-top: 18px; /* Miejsce na wystającą plakietkę */
}

/* Siatka 6-kolumnowa z wyraźnymi odstępami gap: 24px */
.system-benefits-layout__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

/* Styl kafelka - bez ramek 1px, estetyczne odstępy */
.system-benefits-layout__card {
    border: none !important;
    border-radius: 0px;
    padding: 40px 24px 32px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-column: span 2; /* 3 kafelki w rzędzie (każdy po 2 kolumny) */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Różnicowanie stonowanych odcieni szarości */
.system-benefits-layout__card--dark1 {
    background-color: #1a1e24;
}

.system-benefits-layout__card--dark2 {
    background-color: #22272f;
}

.system-benefits-layout__card:hover {
    transform: translateY(-5px);
    background-color: #282e38;
}

/* Drugi rząd - 2 kafelki wyśrodkowane w siatce 6-kolumnowej */
.system-benefits-layout__card--row2-1 {
    grid-column: 2 / span 2;
}

.system-benefits-layout__card--row2-2 {
    grid-column: 4 / span 2;
}

/* Plakietka z numerem u góry */
.system-benefits-layout__badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #2d333d;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

/* Zawartość kafelka */
.system-benefits-layout__card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.system-benefits-layout__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
}

.system-benefits-layout__card p {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    font-weight: 400;
}

/* Ostatni akapit */
.system-benefits-layout__footer {
    border-left: 4px solid #e53011;
    background: #14181d;
    padding: 22px 28px;
    border-radius: 0px;
    margin-bottom: 40px;
}

.system-benefits-layout__footer p {
    color: #a0aec0;
    font-size: 1rem;
    margin: 0;
}

/* Sekcja przycisku CTA */
.system-benefits-layout__cta-wrapper {
    text-align: center;
}

.system-benefits-layout__cta-wrapper .cta--red {
    background-color: #e53011;
    color: #ffffff;
    padding: 16px 36px;
    display: inline-block;
    border-radius: 0px;
    font-weight: 500;
    text-transform: lowercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.system-benefits-layout__cta-wrapper .cta--red:hover {
    background-color: #c4260b;
    transform: translateY(-2px);
}

/* ==========================================================================
   Responsywność (Media Queries)
   ========================================================================== */

@media (max-width: 1200px) {
    .system-benefits-layout {
        padding: 70px 0;
    }

    .system-benefits-layout .grid2_col {
        gap: 35px;
        margin-bottom: 40px;
    }

    .system-benefits-layout__grid {
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .system-benefits-layout {
        padding: 50px 0;
    }

    .system-benefits-layout .grid2_col {
        grid-template-columns: 100%;
        gap: 30px;
    }

    /* Przełączenie siatki na 2 kolumny na tabletach */
    .system-benefits-layout__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .system-benefits-layout__card,
    .system-benefits-layout__card--row2-1,
    .system-benefits-layout__card--row2-2 {
        grid-column: span 1;
        padding: 32px 20px 24px 20px;
    }

    /* Ostatni (piąty) kafelek rozciągnięty na pełną szerokość 2 kolumn na tablecie */
    .system-benefits-layout__card:nth-child(5) {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    /* Układ mobilny - 1 kafelek w rzędzie */
    .system-benefits-layout__grid {
        grid-template-columns: 100%;
        gap: 20px;
    }

    .system-benefits-layout__card,
    .system-benefits-layout__card:nth-child(5) {
        grid-column: span 1;
        padding: 28px 16px 20px 16px;
    }

    .system-benefits-layout__list-title h3 {
        font-size: 1.15rem;
    }
}





/* ==========================================================================
   Section: DEYE & EcoBSS Reasons (Fixed Sticky Scroll & Enhanced CTA)
   ========================================================================== */

.deye-ecobss-reasons {
    padding: 90px 0;
    background-color: #ffffff;
    position: relative;
    overflow: visible; /* Ważne dla działania sticky */
}

/* Wymuszenie pełnej wysokości kolumn dla poprawnego sticky */
.deye-ecobss-reasons__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch; /* Kolumny mają tę samą wysokość */
    gap: 50px;
}

.deye-ecobss-reasons__left-col {
    position: relative;
    height: 100%;
}

/* Sticky Wrapper podążający za prawą kolumną */
.deye-ecobss-reasons__sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; /* Wysokość od góry okna przeglądarki przy skrolowaniu */
    width: 100%;
    z-index: 2;
    will-change: transform;
}

.deye-ecobss-reasons__image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.deye-ecobss-reasons__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Prawa kolumna */
.deye-ecobss-reasons__header h2 {
    color: #000000;
    margin-bottom: 35px;
}

.deye-ecobss-reasons__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

/* Bloki na jasnym tle */
.deye-ecobss-reasons__block {
    background-color: #f4f6f8;
    border: none !important;
    border-radius: 0px;
    padding: 24px 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.deye-ecobss-reasons__block:hover {
    background-color: #eaeeef;
    transform: translateX(6px);
}

.deye-ecobss-reasons__arrow-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.deye-ecobss-reasons__block:hover .deye-ecobss-reasons__arrow-indicator {
    background-color: #e53011;
    transform: translateX(-4px);
}

.deye-ecobss-reasons__block:hover .deye-ecobss-reasons__arrow-indicator svg {
    stroke: #ffffff;
}

.deye-ecobss-reasons__block-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
    line-height: 1.35;
    margin-top: 0px;
}

.deye-ecobss-reasons__block-content p {
    color: #4a555e;
    margin: 0;
    line-height: 1.55;
}

/* Sekcja tekstu CTA - Większy tekst, BEZ BORDERA */
.deye-ecobss-reasons__cta-box {
    margin-top: 20px;
    padding: 0;
    border: none !important;
}

.deye-ecobss-reasons__cta-text {
    font-weight: 500;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 24px;
}

.deye-ecobss-reasons__cta-box .cta--red {
    background-color: #e53011;
    color: #ffffff;
    padding: 16px 36px;
    display: inline-block;
    border-radius: 0px;
    font-weight: 500;
    text-transform: lowercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.deye-ecobss-reasons__cta-box .cta--red:hover {
    background-color: #c4260b;
    transform: translateY(-2px);
}

/* ==========================================================================
   Responsywność (Media Queries)
   ========================================================================== */

@media (max-width: 1200px) {
    .deye-ecobss-reasons {
        padding: 70px 0;
    }

    .deye-ecobss-reasons__grid {
        gap: 35px;
    }
}

@media (max-width: 992px) {
    .deye-ecobss-reasons {
        padding: 50px 0;
    }

    /* Przełączenie na 1 kolumnę (wyłączenie sticky na urządzeniach mobilnych) */
    .deye-ecobss-reasons__grid {
        grid-template-columns: 100%;
        gap: 30px;
    }

    .deye-ecobss-reasons__sticky-wrapper {
        position: static;
    }

    .deye-ecobss-reasons__left-col {
        order: 1;
    }

    .deye-ecobss-reasons .right_col {
        order: 2;
    }

    .deye-ecobss-reasons__header h2 {
        margin-bottom: 24px;
    }

    .deye-ecobss-reasons__block {
        padding: 18px 20px;
        gap: 14px;
    }

    .deye-ecobss-reasons__arrow-indicator svg {
        transform: rotate(-90deg);
    }

    .deye-ecobss-reasons__cta-text {
        font-size: 1.05rem;
    }
}