/* ===================================================================
 * SINTUR - KOMPLETNY ARKUSZ STYLÓW CSS
 * Wersja: Zorganizowana dla Joomla 5.4.2 + RSPageBuilder + Helix Ultimate 2.2.4
 * Data reorganizacji: 2026-02-08
 * * UWAGI DLA DEVELOPERÓW:
 * - Nie modyfikuj nazw klas - mogą być używane w JS i szablonach
 * - Każda sekcja jest oznaczona jasnymi komentarzami START/END
 * - Zachowaj kolejność specyficzności selektorów wewnątrz sekcji
 * =================================================================== */

/* ===================================================================
 * SEKCJA 0: CZCIONKI LOKALNE (Ochrona RODO / Brak API Google)
 * START: LOCAL FONTS
 * =================================================================== */

/* 1. DEFINICJA - Montserrat */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/templates/shaper_helixultimate/fonts/montserrat-v31-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/templates/shaper_helixultimate/fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/templates/shaper_helixultimate/fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2');
}

/* 2. DEFINICJA - Roboto */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/templates/shaper_helixultimate/fonts/roboto-v51-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/templates/shaper_helixultimate/fonts/roboto-v51-latin_latin-ext-700.woff2') format('woff2');
}

/* 3. WYMUSZENIE ZASTOSOWANIA LOKALNYCH CZCIONEK */

/* Cała treść strony */
body, p, li, a, div {
    font-family: 'Montserrat', sans-serif !important;
}

/* Wszystkie nagłówki */
h1, h2, h3, h4, h5, h6, .sp-megamenu-parent > li > a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* Formularze w Roboto */
input, textarea, select, label, .rsform-block {
    font-family: 'Roboto', sans-serif !important;
}
/* END: LOCAL FONTS */

/* ===================================================================
 * SEKCJA 1: ZMIENNE GLOBALNE I KONFIGURACJA
 * START: ROOT VARIABLES
 * Zastosowanie: Cała strona, definicje design tokens
 * Pliki źródłowe: Wszystkie (wspólne zmienne)
 * =================================================================== */
:root {
    /* Paleta kolorów - NIE MODYFIKOWAĆ nazw zmiennych */
    --kolor-glowny-red: #ff3333;
    --kolor-glowny-red-hover: #ff6666;
    --kolor-akcent-blue: #00c8ff;
    --kolor-akcent-shadow: rgba(0, 200, 255, 1);
    --kolor-tekst-naglowek: #1a1a1a;
    --kolor-tekst-body: #777777;
    --kolor-tekst-hero: #ffffff;
    --kolor-tlo-karty: #ffffff;
    --kolor-tlo-numer: #e0e0e0;
    --kolor-gwiazdki: #ffc107;

    /* Typografia - NIE MODYFIKOWAĆ nazw zmiennych */
    --font-glowny: 'Roboto', sans-serif;
    --font-naglowki: 'Montserrat', sans-serif;
}
/* END: ROOT VARIABLES */

/* ===================================================================
 * SEKCJA 2: PRZYCISKI CTA I LINKI Z IKONAMI
 * START: BUTTONS & LINKS
 * Zastosowanie: Hero section, nawigacja, wezwania do akcji
 * Pliki źródłowe: Strona główna (hero), Procesy technologiczne
 * Zależności: Sekcja 1 (zmienne kolorów)
 * =================================================================== */

/* --- 2.1 GŁÓWNY CZERWONY PRZYCISK HERO --- */
.sintur-cta-button-red {
    display: inline-block;
    padding: 15px 40px;
    background-color: var(--kolor-glowny-red);
    color: var(--kolor-tekst-hero);
    font-family: var(--font-naglowki);
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.9);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.sintur-cta-button-red:hover {
    background-color: var(--kolor-glowny-red-hover) !important;
    color: var(--kolor-tekst-hero) !important;
    box-shadow: 0 0 20px var(--kolor-akcent-shadow) !important;
    transform: scale(1.05);
}

/* --- 2.2 LINKI Z IKONAMI (Energetyka/Chłodnictwo) --- */
.sintur-icon-links {
    text-align: center;
    padding: 15px 0;
}

.sintur-icon-links .icon-link-item {
    display: inline-block;
    color: var(--kolor-tekst-hero);
    text-decoration: none;
    font-family: var(--font-glowny);
    font-size: 1.2em;
    font-weight: 500;
    margin: 0 25px;
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
    position: relative;
    transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}

.sintur-icon-links .icon-link-item .icon-symbol {
    margin-right: 8px;
    font-size: 1.4em;
    vertical-align: middle;
    color: var(--kolor-akcent-blue);
    text-shadow: 0 0 5px var(--kolor-akcent-shadow);
    transition: color 0.3s, text-shadow 0.3s;
}

.sintur-icon-links .icon-link-item:hover {
    color: var(--kolor-akcent-blue) !important;
    transform: scale(1.05);
    text-shadow: 0 0 10px var(--kolor-akcent-shadow) !important;
}

.sintur-icon-links .icon-link-item:hover .icon-symbol {
    text-shadow: 0 0 15px var(--kolor-akcent-shadow);
}

.sintur-icon-links .icon-link-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--kolor-akcent-blue);
    transition: width 0.3s ease-out;
}

.sintur-icon-links .icon-link-item:hover::after {
    width: calc(100% - 30px);
}

/* --- 2.3 MAŁY PRZYCISK CTA (Globalny) --- */
.sintur-cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--kolor-glowny-red);
    color: var(--kolor-tekst-hero);
    font-family: var(--font-naglowki);
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 40px;
    transition: background-color 0.3s;
}

.sintur-cta-button:hover {
    background-color: var(--kolor-glowny-red-hover);
}
/* END: BUTTONS & LINKS */

/* ===================================================================
 * SEKCJA 3: SEKCJA O NAS (ABOUT)
 * START: ABOUT SECTION
 * Zastosowanie: Strona główna, sekcja z overlay na obrazku
 * Pliki źródłowe: zrodlo-08-02-2026 (strona glowna).txt
 * Specyfika: Nakładanie badge na obrazek, efekt ramki
 * =================================================================== */

.sintur-about-section {
    position: relative;
    z-index: 10;
    background-color: transparent !important;
    padding-top: 0 !important;
}

/* Stylizacja O NAS jako etykiety (Badge) */
.sintur-about-section .sintur-sub-title {
    display: inline-block;
    background-color: var(--kolor-glowny-red);
    color: #ffffff !important;
    padding: 10px 25px;
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: translateY(-50%); /* Przesunięcie nad obrazek */
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    position: relative;
}

.sintur-about-section .sintur-main-title {
    color: var(--kolor-tekst-naglowek);
    font-family: var(--font-naglowki);
    font-size: 3em;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.1;
}

.sintur-about-section p {
    color: #333;
    font-family: var(--font-glowny);
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Ozdobna ramka dla zdjęcia w sekcji O Nas */
.fotka-frontowa img {
    border-radius: 10px;
    box-shadow: 15px 15px 0px rgba(240, 240, 240, 1);
    transition: transform 0.3s;
}

.fotka-frontowa:hover img {
    transform: scale(1.02);
}
/* END: ABOUT SECTION */

/* ===================================================================
 * SEKCJA 4: KARTY FUNKCJI (01-04) - LIFTING EFFECT
 * START: FEATURE CARDS
 * Zastosowanie: Strona główna, 4 karty z numerami
 * Pliki źródłowe: zrodlo-08-02-2026 (strona glowna).txt
 * Specyfika: Efekt unoszenia, numeracja w tle, grid 2x2
 * =================================================================== */

.sintur-grid-flex {
    display: flex;
    flex-wrap: wrap;
    max-width: 950px;
    margin: 0 auto;
    overflow: hidden;
}

.sintur-grid-item-flex {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}

@media (min-width: 650px) {
    .sintur-grid-item-flex { width: 50%; }
}

.sintur-detail-card {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease-in-out;
    border-bottom: 3px solid transparent; /* Przygotowanie pod hover */
    position: relative;
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

/* Efekt Hover - uniesienie i czerwona linia */
.sintur-detail-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom-color: var(--kolor-glowny-red);
}

.sintur-detail-card .sintur-card-title {
    color: var(--kolor-tekst-naglowek);
    font-family: var(--font-naglowki);
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
    position: relative;
    z-index: 5;
}

.sintur-detail-card .sintur-card-body {
    color: var(--kolor-tekst-body);
    font-family: var(--font-glowny);
    font-size: 1em;
    line-height: 1.7;
    position: relative;
    z-index: 5;
}

.sintur-detail-card .sintur-accent-number {
    position: absolute;
    right: -10px;
    bottom: -20px;
    color: #f3f3f3;
    font-family: var(--font-naglowki);
    font-size: 7em;
    font-weight: 900;
    line-height: 1;
    z-index: 1;
    transition: color 0.3s;
}

.sintur-detail-card:hover .sintur-accent-number {
    color: #fbecec;
}
/* END: FEATURE CARDS */

/* ===================================================================
 * SEKCJA 5: SEKCJA STATYSTYK (LICZNIKI)
 * START: STATS SECTION
 * Zastosowanie: Strona główna, liczniki animowane JS
 * Pliki źródłowe: zrodlo-08-02-2026 (strona glowna).txt
 * Zależności: JS (sintur-counter-* IDs używane w skryptach)
 * Specyfika: Animacja liczników przy scrollu, efekty hover
 * =================================================================== */

.sintur-stats-container {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.04); 
    padding: 20px 0;
    margin: 50px 0 30px 0;
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.sintur-stats-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

.sintur-stat-item {
    flex: 1 1 220px;
    padding: 25px 15px;
    position: relative;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

/* Separatory (pionowe linie) - subtelne */
@media (min-width: 992px) {
    .sintur-stat-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, #e0e0e0, transparent);
    }
}

/* Interakcja HOVER */
.sintur-stat-item:hover {
    background-color: #fcfcfc;
    transform: translateY(-3px);
    border-bottom-color: var(--kolor-glowny-red); 
}
/* Specyficzne kolory hover dla EKO */
.sintur-stat-item:nth-child(3):hover { border-bottom-color: var(--kolor-akcent-blue); }
.sintur-stat-item:nth-child(4):hover { border-bottom-color: #4CAF50; }

/* Ikony */
.stat-icon {
    font-size: 2.2em;
    color: #ccc;
    margin-bottom: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sintur-stat-item:hover .stat-icon {
    transform: scale(1.2);
    color: var(--kolor-glowny-red);
}
.sintur-stat-item:nth-child(3):hover .stat-icon { color: var(--kolor-akcent-blue) !important; }
.sintur-stat-item:nth-child(4):hover .stat-icon { color: #4CAF50 !important; }

/* Liczby - UWAGA: IDs używane przez JS do animacji */
.sintur-counter-value {
    font-family: var(--font-naglowki);
    font-size: 3.2em;
    font-weight: 800;
    color: #2a2a2a;
    line-height: 1;
    margin-bottom: 5px;
    transition: color 0.3s;
}

.sintur-stat-item:hover .sintur-counter-value {
    color: #000;
}

.sintur-counter-label {
    font-family: var(--font-glowny);
    font-size: 0.95em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}
/* END: STATS SECTION */

/* ===================================================================
 * SEKCJA 6: OŚ CZASU (TIMELINE)
 * START: TIMELINE SECTION
 * Zastosowanie: Strona główna, historia firmy
 * Pliki źródłowe: zrodlo-08-02-2026 (strona glowna).txt
 * Specyfika: Pionowa linia czasu, kropki, responsywność
 * =================================================================== */

.sintur-timeline-section {
    position: relative;
    padding: 60px 0;
    background-color: #fcfcfc;
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Pionowa linia */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--kolor-glowny-red);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
}

.timeline-item.left { left: 0; }
.timeline-item.right { left: 50%; }

/* Kropki na osi */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: white;
    border: 4px solid var(--kolor-glowny-red);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
    transition: background-color 0.3s, transform 0.3s;
}

.timeline-item.right::after { left: -10px; }
.timeline-item:hover::after {
    background-color: var(--kolor-glowny-red);
    transform: scale(1.2);
}

.timeline-content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 4px solid #ddd;
    transition: transform 0.3s;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    border-left-color: var(--kolor-glowny-red);
}

.timeline-content .date {
    display: inline-block;
    background: var(--kolor-akcent-blue);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-family: var(--font-naglowki);
}

.timeline-content h3 {
    margin-top: 0;
    font-size: 1.4em;
    color: var(--kolor-tekst-naglowek);
    font-weight: 700;
}
/* Stylizacja obrazków w osi czasu */
.timeline-img {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 15px;
    background: #f9f9f9;
}

.timeline-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zapewnia wypełnienie bez zniekształceń */
    transition: transform 0.5s ease;
}

.timeline-item:hover .timeline-img img {
    transform: scale(1.1); /* Efekt zoomu identyczny jak w energetyce */
}
/* END: TIMELINE SECTION */

/* ===================================================================
 * SEKCJA 7: PLIKI DO POBRANIA I ZAKŁADKI
 * START: DOWNLOADS & TABS
 * Zastosowanie: Podstrona pliki do pobrania, karty produktów
 * Pliki źródłowe: Wszystkie z zakładkami i listami plików
 * Zależności: Bootstrap tabs (rspbld-tabs)
 * =================================================================== */

/* --- 7.1 SYSTEM ZAKŁADEK --- */
.rspbld-tabs .nav-tabs {
    border-bottom: 2px solid #eee;
    margin-bottom: 25px;
}

.rspbld-tabs .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--kolor-tekst-body);
    font-family: var(--font-naglowki);
    font-weight: 600;
    padding: 10px 20px;
    transition: color 0.3s, border-color 0.3s;
}

.rspbld-tabs .nav-tabs .nav-link.active {
    color: var(--kolor-glowny-red);
    border-bottom: 2px solid var(--kolor-glowny-red);
}

/* --- 7.2 LISTA PLIKÓW DO POBRANIA --- */
.sintur-download-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.sintur-download-item:hover { background-color: #f9f9f9; }

.sintur-download-icon {
    flex-basis: 50px;
    font-size: 2.2em;
    color: var(--kolor-glowny-red);
    text-align: center;
    padding-right: 10px;
}

.sintur-download-info {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

.sintur-download-title {
    font-family: var(--font-naglowki);
    font-size: 1.1em;
    font-weight: 600;
    color: var(--kolor-tekst-naglowek);
}

.sintur-download-action {
    flex-basis: 150px;
    text-align: right;
}

/* Przycisk Pobierz z ikoną FontAwesome */
.sintur-download-action .sintur-cta-button {
    padding: 12px 24px;
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0;
    white-space: nowrap;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sintur-download-action .sintur-cta-button::before {
    font-family: var(--rspbld-fa-style-family-classic, FontAwesomeSolid);
    font-weight: 900;
    content: \f019;
    margin-right: 8px;
}

/* --- 7.3 SORTOWANIE PLIKÓW --- */
.sintur-download-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    padding: 0 10px;
}

.sintur-sort-button {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: var(--kolor-tekst-body);
    font-family: var(--font-naglowki);
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.sintur-sort-button:hover {
    background-color: #e0e0e0;
}
/* END: DOWNLOADS & TABS */

/* ===================================================================
 * SEKCJA 8: HERO SECTION I OPINIE KLIENTÓW
 * START: HERO & TESTIMONIALS
 * Zastosowanie: Strona główna (hero slider), karuzela opinii
 * Pliki źródłowe: zrodlo-08-02-2026 (strona glowna).txt
 * Specyfika: Slider RSPageBuilder, karty opinii z gwiazdkami
 * =================================================================== */

/* --- 8.1 HERO SECTION (Slider główny) --- */
.sintur-hero-section {
    background-color: transparent;
    padding: 40px 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.2);
    margin: 30px;
}

.sintur-hero-section .sintur-hero-title {
    color: var(--kolor-tekst-hero);
    font-family: var(--font-naglowki);
    font-size: 2.5em;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 200, 255, 0.5);
}

.sintur-hero-section .sintur-hero-tagline {
    color: #e0f7fa;
    font-family: var(--font-glowny);
    font-size: 1.2em;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 200, 255, 0.3);
}

/* --- 8.2 KARTY OPINII --- */
.sintur-testimonial-card {
    max-width: 700px;
    margin: 40px 15px;
    padding: 30px;
    background-color: var(--kolor-tlo-karty);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #aeaeae;
    height: 100%;
    box-sizing: border-box;
}

.sintur-testimonial-card .sintur-rating {
    margin-bottom: 20px;
    color: var(--kolor-gwiazdki);
    font-size: 1.5em;
    letter-spacing: 5px;
}

.sintur-testimonial-card .sintur-quote {
    font-style: italic;
    color: #333;
    font-size: 1.15em;
    line-height: 1.6;
}

.sintur-testimonial-card .sintur-author-name {
    font-weight: bold;
    color: var(--kolor-tekst-naglowek);
    font-family: var(--font-naglowki);
}

/* --- 8.3 NAGŁÓWEK SEKCJI OPINII --- */
.sintur-header-section {
    max-width: 1000px;
    margin: 40px auto;
}

.sintur-header-section-inner {
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.sintur-main-title {
    color: var(--kolor-tekst-naglowek);
    font-family: var(--font-naglowki);
    font-size: 3.2em;
    font-weight: 900;
    line-height: 1.1;
}

.sintur-contact-info {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.sintur-contact-value {
    color: var(--kolor-tekst-naglowek);
    font-weight: bold;
    font-size: 1.2em;
}
/* END: HERO & TESTIMONIALS */

/* ===================================================================
 * SEKCJA 9: STRONA PROCESY TECHNOLOGICZNE
 * START: PROCESSES PAGE
 * =================================================================== */

/* --- 9.1 WPROWADZENIE --- */
.sintur-process-intro {
    max-width: 800px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.sintur-process-intro p {
    font-size: 1.2em;
    line-height: 1.7;
    color: var(--kolor-tekst-body);
    font-family: var(--font-glowny);
    margin-bottom: 20px;
}

/* --- 9.2 SIATKA DWÓCH KOLUMN - FIX OBCINANIA NA MOBILE --- */
.sintur-process-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; 
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .sintur-process-grid {
        margin: 0; /* Reset marginesów na telefonach zapobiega ucinaniu */
    }
}

.sintur-process-column {
    flex: 1 1 300px;
    padding: 0 15px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .sintur-process-column {
        flex-basis: 50%;
    }
}

/* --- 9.3 PODTYTUŁ KOLUMNY --- */
.sintur-process-subtitle {
    font-family: var(--font-naglowki);
    font-size: 1.8em;
    color: var(--kolor-tekst-naglowek);
    border-bottom: 2px solid var(--kolor-glowny-red);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* --- 9.4 LISTA MOŻLIWOŚCI --- */
.sintur-capability-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sintur-capability-list li {
    display: flex;
    align-items: flex-start;
    font-family: var(--font-glowny);
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--kolor-tekst-body);
    margin-bottom: 20px;
}

.sintur-capability-list li i.fa,
.sintur-capability-list li em.fa {
    flex-shrink: 0;
    font-size: 1.2em;
    color: var(--kolor-glowny-red);
    margin-right: 15px;
    margin-top: 4px;
}

.sintur-capability-list li strong {
    color: var(--kolor-tekst-naglowek);
    font-weight: 600;
}

/* --- 9.5 CTA NA DOLE STRONY --- */
.sintur-process-cta {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 30px auto 0 auto;
}

.sintur-process-cta p {
    font-family: var(--font-naglowki);
    font-size: 1.5em;
    font-weight: 600;
    color: var(--kolor-tekst-naglowek);
    margin-bottom: 25px;
}
/* END: PROCESSES PAGE */

/* ===================================================================
 * SEKCJA 10: KONTENERY Z PÓŁPRZEŹROCZYSTYM TŁEM
 * START: TRANSPARENT BOXES
 * Zastosowanie: Sekcje wymagające poprawy czytelności na tłach
 * Pliki źródłowe: Wszystkie z sekcjami na obrazkach
 * Specyfika: rgba(255,255,255,0.95) dla kontrastu
 * =================================================================== */

.sintur-transparent-box {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 60px;
    margin-bottom: 60px;
}

.sintur-section-header-wrapper {
    position: relative;
    padding-bottom: 25px;
    margin: 30px auto 50px auto;
    max-width: 800px;
}

.sintur-section-title {
    font-family: var(--font-naglowki);
    font-size: 3em;
    font-weight: 900;
    color: var(--kolor-tekst-naglowek);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.sintur-section-header-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 15px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0) 70%
    );
}

@media (max-width: 768px) {
    .sintur-transparent-box {
        padding: 25px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .sintur-section-title {
        font-size: 2.2em;
    }
}
/* END: TRANSPARENT BOXES */

/* ===================================================================
 * SEKCJA 11: BANER PROJEKTÓW UE
 * START: UE BANNER
 * Zastosowanie: Strona główna, pod sliderem
 * Pliki źródłowe: zrodlo-08-02-2026 (strona glowna).txt
 * Specyfika: Efekt 3D nakładania na slider, logotypy w rzędzie
 * =================================================================== */

.sintur-ue-banner-container {
    position: relative;
    z-index: 20; /* Warstwa nad sliderem */
    margin-top: -50px; /* Kluczowe: wciąga pasek na slider (efekt 3D) */
    padding: 0 15px;
    margin-bottom: 60px; /* Odstęp od sekcji poniżej */
}

.sintur-ue-strip {
    background: #ffffff;
    border-radius: 8px; /* Zaokrąglone rogi karty */
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); /* Wyraźny cień */
    max-width: 1140px;
    margin: 0 auto;
    padding: 25px 40px;
    
    /* Układ Logotypów */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Równomierne rozłożenie */
    flex-wrap: wrap; 
    gap: 30px; 
    border-bottom: 3px solid #ddd; /* Ozdobny pasek na dole (opcjonalnie) */
}

/* Pojedynczy element */
.sintur-ue-item {
    flex: 1 1 150px; /* Elastyczność */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Płynna animacja */
    text-decoration: none;
}

/* Stylizacja obrazków WebP */
.sintur-ue-item img {
    max-width: 100%;
    height: auto;
    max-height: 75px; /* Ograniczenie wysokości, żeby loga były równe */
    object-fit: contain;
    filter: grayscale(100%); /* Opcjonalnie: Loga szare na start... */
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* --- EFEKTY HOVER (Interakcja) --- */
.sintur-ue-item:hover {
    transform: translateY(-5px) scale(1.05); /* Uniesienie i lekkie powiększenie */
}

.sintur-ue-item:hover img {
    filter: grayscale(0%); /* ...kolorowe po najechaniu */
    opacity: 1;
}

/* --- RESPONSYWNOŚĆ BANERA UE --- */
@media (max-width: 991px) {
    .sintur-ue-strip {
        padding: 20px;
        gap: 20px;
        justify-content: center;
    }
    
    /* Na tabletach układ 2x2 */
    .sintur-ue-item {
        flex-basis: 40%;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .sintur-ue-banner-container {
        margin-top: 0; /* Na małych ekranach zdejmujemy z slidera */
    }
    
    /* Na małych telefonach jedno pod drugim */
    .sintur-ue-item {
        flex-basis: 100%;
    }
    
    .sintur-ue-item img {
        max-height: 90px; /* Większe loga na mobile dla czytelności */
    }
}
/* END: UE BANNER */

/* ===================================================================
 * SEKCJA 12: SYSTEM TOOLTIPÓW CSS
 * START: TOOLTIPS
 * Zastosowanie: Wszędzie gdzie potrzebna podpowiedź
 * Użycie: class=sintur-tooltip data-tooltip=Twój tekst
 * =================================================================== */

/* Bazowe ustawienie elementu, który ma mieć tooltip */
.sintur-tooltip {
    position: relative; /* Niezbędne do pozycjonowania dymka */
}

/* Wygląd dymka (domyślnie ukryty) */
.sintur-tooltip::after {
    content: attr(data-tooltip); /* Pobiera tekst z atrybutu HTML */
    position: absolute;
    bottom: 100%; /* Wyświetla się NAD elementem */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Wyśrodkowanie + startowa pozycja animacji */
    
    /* Wygląd */
    background-color: #333; /* Ciemny grafit */
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-glowny); /* Spójność z resztą strony */
    white-space: nowrap; /* Tekst w jednej linii */
    opacity: 0;
    pointer-events: none; /* Żeby myszka nie haczyła o dymek */
    visibility: hidden;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    
    /* Animacja */
    transition: all 0.3s ease;
}

/* Mały trójkącik pod dymkiem */
.sintur-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 6px solid transparent;
    border-top-color: #333; /* Kolor trójkąta zgodny z tłem dymka */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    margin-bottom: -11px; /* Korekta pozycji */
}

/* --- EFEKT HOVER (Pokaż dymek) --- */
.sintur-tooltip:hover::after,
.sintur-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px); /* Uniesienie do góry */
}

/* WAŻNE DLA BANERA UE: 
   Musimy usunąć overflow:hidden z karty, żeby dymki nie zostały obcięte! 
*/
.sintur-ue-card {
    overflow: visible !important; 
}
/* END: TOOLTIPS */

/* ===================================================================
 * SEKCJA 13: STOPKA (FOOTER)
 * START: FOOTER
 * Zastosowanie: Wszystkie podstrony, stopka globalna
 * Pliki źródłowe: Wszystkie (footer jest wspólny)
 * Struktura: 4 kolumny (logo+adres | o firmie | polityka | eksport)
 * =================================================================== */

/* --- 13.1 GŁÓWNY KONTENER STOPKI --- */
#sp-footer {
    background-color: #1a1a1a; 
    color: #b0b0b0; 
    padding: 70px 0 40px 0;
    font-family: var(--font-glowny);
    font-size: 15px;
    border-top: 4px solid var(--kolor-glowny-red);
}

/* --- 13.2 LOGO W STOPCE --- */
.sintur-footer-logo-container {
    background-color: #fff; /* Białe tło dla czytelności logo */
    padding: 15px 25px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Lekki cień */
}

.footer-logo-img {
    height: 45px;
    width: auto;
    display: block;
    /* ŻADNYCH filtrów - oryginalne kolory */
    filter: none !important; 
    opacity: 1 !important;
}

/* --- 13.3 ADRES I DANE FIRMY --- */
.sintur-footer-address p {
    margin-bottom: 6px;
    line-height: 1.5;
    color: #e0e0e0;
}

.sintur-footer-list {
    margin-top: 20px;
    padding-left: 0;
    list-style: none;
}

.sintur-footer-list li {
    margin-bottom: 8px; /* Większy odstęp dla czytelności */
}

/* Etykiety NIP/KRS na czerwono */
.red-label {
    color: var(--kolor-glowny-red);
    font-weight: 700;
    margin-right: 5px;
}

/* Linki z animacją */
a.krs-link {
    color: #b0b0b0;
    text-decoration: none;
    display: inline-block; /* Konieczne dla transform */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sprężysta animacja */
}

a.krs-link:hover {
    color: #fff;
    transform: translateX(5px) scale(1.05); /* Przesunięcie i powiększenie */
}

/* --- 13.4 NAGŁÓWKI W STOPCE --- */
#sp-footer h3.sp-module-title {
    color: #ffffff;
    font-family: var(--font-naglowki);
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    
    /* KLUCZ DO NAPRAWY LINII: */
    display: inline-block; /* Szerokość taka jak tekst */
    position: relative;
    border-bottom: 2px solid var(--kolor-glowny-red); /* Linia pod całym tekstem */
}

/* --- 13.5 MENU W STOPCE --- */
/* Resetowanie kontenera listy */
#sp-footer ul.menu, 
#sp-footer ul.mod-menu {
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Wymuszenie pionu */
#sp-footer ul.menu > li, 
#sp-footer ul.mod-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Stylizacja linków (Baza) */
#sp-footer ul.menu li a, 
#sp-footer ul.mod-menu li a {
    position: relative; /* Niezbędne dla ikony */
    color: #b0b0b0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: block !important;
    text-decoration: none;
    /* Płynne przejście dla wszystkich właściwości */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* PSEUDO-ELEMENT (IKONA) */
#sp-footer ul.menu li a::before, 
#sp-footer ul.mod-menu li a::before {
    /* Kod ikony: \f00c = Ptaszek (Check) | \f054 = Strzałka (Chevron) */
    content: \f00c; 
    
    /* Definicja fontu (zmienne z szablonu + fallback) */
    font-family: var(--rspbld-fa-style-family-classic, Font Awesome 5 Free), FontAwesome;
    font-weight: 900; /* Wymagane dla FA5 */
    
    position: absolute;
    left: 0;
    top: 50%;
    /* Startowa pozycja: lekko w lewo i niewidoczna */
    transform: translateY(-50%) translateX(-10px); 
    opacity: 0; 
    
    color: var(--kolor-glowny-red); /* Czerwony kolor ikony */
    font-size: 0.85em;
    transition: all 0.3s ease;
}

/* EFEKT HOVER (NAJECHANIE) */
#sp-footer ul.menu li a:hover, 
#sp-footer ul.mod-menu li a:hover {
    color: #ffffff;
    /* Przesuwamy tekst w prawo, robiąc miejsce na ikonę */
    padding-left: 25px; 
    border-bottom-color: var(--kolor-glowny-red);
}

/* Pokazanie ikony przy hoverze */
#sp-footer ul.menu li a:hover::before, 
#sp-footer ul.mod-menu li a:hover::before {
    opacity: 1; /* Pokaż */
    transform: translateY(-50%) translateX(0); /* Wsuń na miejsce */
}

/* --- 13.6 MODUŁ EKSPORTU --- */
.sintur-export-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.sintur-export-card:hover {
    border-color: var(--kolor-glowny-red);
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

.sintur-export-card a { text-decoration: none; display: block; }

.export-title { color: #fff; font-weight: 700; margin-top: 10px; display: block; }

.export-desc { color: #999; font-size: 0.9em; margin-bottom: 15px; }

.export-btn { 
    color: #fff; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 0.85em; 
    border-bottom: 1px solid var(--kolor-glowny-red); 
}

.export-icon { 
    font-size: 2.5em; 
    color: var(--kolor-glowny-red); 
    margin-bottom: 15px; 
    display: block; 
}

/* --- 13.7 WYRÓWNANIE W STOPCE --- */
#sp-footer .row .col-lg-3,
#sp-footer .sp-column,
#sp-footer .sp-module {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Upewnienie się, że nagłówki też trzymają pion */
#sp-footer h3.sp-module-title {
    text-align: left !important;
    display: inline-block;
}
/* END: FOOTER */

/* ===================================================================
 * SEKCJA 14: DOLNY PASEK (COPYRIGHT BAR)
 * START: BOTTOM BAR
 * Zastosowanie: Sam dół strony, copyright
 * ID: #sp-section-5 (zdefiniowane w Helix Ultimate)
 * =================================================================== */

/* 1. RESET KONTENERA (Naprawa czarnego prostokąta po lewej) */
#sp-section-5, 
.sintur-design {
    /* Wymuszamy pełną szerokość ekranu */
    display: block !important; 
    width: 100% !important; 
    max-width: 100% !important;
    
    /* Zmieniamy tło z czarnego na grafitowe (jak reszta stopki) */
    background-color: #1a1a1a !important; 
    
    /* Centrowanie */
    text-align: center !important;
    padding: 25px 0 !important;
    
    /* Linia oddzielająca od góry */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin: 0 !important;
}

/* 2. CENTROWANIE ELEMENTÓW WEWNĄTRZ */
#sp-section-5 .container,
#sp-section-5 .container-inner,
#sp-section-5 .row,
#sp-section-5 .col-lg-12,
#sp-section-5 .sp-column {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    float: none !important;
    margin: 0 auto !important;
}

/* 3. STYLIZACJA PODPISU (Tekst) */
.sp-copyright {
    display: inline-block !important; /* Pozwala na hover i centrowanie */
    
    /* Wygląd profesjonalny */
    color: #777777 !important;     /* Ciemny szary */
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    
    /* Płynna animacja */
    transition: all 0.4s ease !important;
    cursor: default;
}

/* 4. EFEKT PO NAJECHANIU NA PODPIS */
.sp-copyright:hover {
    color: #ffffff !important;      /* Rozjaśnienie do bieli */
    letter-spacing: 4px !important; /* Rozsunięcie liter - efekt Premium */
}
/* END: BOTTOM BAR */

/* ===================================================================
 * SEKCJA 15: MODUŁ JĘZYKOWY (PL/EN)
 * START: LANGUAGE SWITCHER
 * Zastosowanie: Wszystkie podstrony, header + mobile menu
 * Pliki źródłowe: Wszystkie (lang switcher jest wspólny)
 * Specyfika: Podmiana grafik GIF na SVG, wersja desktop i mobile
 * =================================================================== */

/* --- 15.1 PODMIANA GRAFIK NA SVG --- */
/* Polska (PL) */
img[src*="pl_pl.gif"] {
    content: url('https://flagcdn.com/pl.svg');
}

/* Wielka Brytania (EN) */
img[src*="en_gb.gif"] {
    content: url('https://flagcdn.com/gb.svg');
}

/* Wspólne ustawienia dla nowych flag (Ostrość i kształt) */
.sintur-lang-header img,
.mobile-lang-switcher img {
    aspect-ratio: 4/3; 
    object-fit: cover;
    display: block;
    border-radius: 3px; /* Subtelne zaokrąglenie */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Lekki cień */
}

/* --- 15.2 WERSJA DESKTOP (W PASKU MENU) --- */
.sintur-lang-header {
    margin-left: 60px; /* Duży odstęp od menu 'Kontakt' */
    padding-left: 30px; /* Odstęp od linii separatora */
    border-left: 1px solid rgba(0, 0, 0, 0.1); /* Pionowa linia */
    display: flex;
    align-items: center;
    height: 40px; 
    margin-top: auto;
    margin-bottom: auto;
}

/* Lista flag */
.sintur-lang-header ul.lang-inline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px; /* Odstęp między flagami */
    align-items: center;
}

/* Elementy listy - KLUCZOWE: Usuwanie szarego tła szablonu */
.sintur-lang-header ul.lang-inline li {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Reset stylów Helixa (usuwa szare tło i ramki) */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: relative;
}

/* Stylizacja flagi (nieaktywnej) */
.sintur-lang-header img {
    width: 28px; /* Idealny rozmiar */
    height: auto;
    
    /* Stan domyślny: Szary i lekko przezroczysty */
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Zabezpieczenie przed stylami szablonu */
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Stan Aktywny i Hover (Najazd) */
.sintur-lang-header li.lang-active img,
.sintur-lang-header li:hover img {
    opacity: 1;            /* Pełna widoczność */
    filter: grayscale(0%); /* Pełny kolor */
    transform: scale(1.15); /* Delikatne powiększenie */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Wyraźniejszy cień "3D" */
    cursor: pointer;
}

/* --- 15.3 WERSJA MOBILE (W MENU BOCZNYM / OFF-CANVAS) --- */
.mobile-lang-switcher {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linia oddzielająca */
    text-align: center;
    width: 100%;
}

.mobile-lang-switcher ul {
    display: flex;
    justify-content: center;
    gap: 30px; /* Duże odstępy na palec */
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-lang-switcher li {
    display: inline-block;
    padding: 0;
    border: none;
    background: transparent !important;
}

/* Flagi na telefonie */
.mobile-lang-switcher img {
    width: 36px; /* Duże i wyraźne */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: transform 0.2s;
}

/* Aktywna flaga mobile */
.mobile-lang-switcher .lang-active img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.4); /* Czerwona poświata */
}

/* --- 15.4 UKRYWANIE NA MOBILE (Desktop only) --- */
@media (max-width: 991px) {
    .sintur-lang-header {
        display: none !important;
    }
}
/* END: LANGUAGE SWITCHER */

/* ===================================================================
 * SEKCJA 16: PRZYCISK W GÓRĘ (SCROLL TO TOP)
 * START: SCROLL UP BUTTON
 * Zastosowanie: Wszystkie podstrony, fixed position
 * Klasa: .sp-scroll-up (zdefiniowana w Helix Ultimate, nadpisana)
 * =================================================================== */

.sp-scroll-up {
    /* 1. Wygląd Zewnętrzny (Czerwone Koło) */
    background-color: #ff3333 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    
    /* 2. Pozycja */
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    
    /* 3. Centrowanie Rysowanej Strzałki */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* 4. Resetowanie */
    border: none !important;
    opacity: 1 !important; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* 5. UKRYWAMY STARE IKONY (Te, które robią błędy/ramki) */
.sp-scroll-up span, 
.sp-scroll-up i,
.sp-scroll-up .fas {
    display: none !important;
}

/* 6. RYSOWANIE STRZAŁKI (Czysta Geometria CSS) */
.sp-scroll-up::before {
    content: '' !important;
    display: block !important;
    
    /* Rozmiar strzałki */
    width: 12px !important;
    height: 12px !important;
    
    /* Rysujemy dwie linie (Górną i Lewą) */
    border-top: 3px solid #ffffff !important;
    border-left: 3px solid #ffffff !important;
    
    /* Obracamy o 45 stopni, by powstała strzałka w górę */
    transform: rotate(45deg) !important;
    
    /* Drobna korekta, żeby była idealnie na środku optycznie */
    margin-top: 4px !important; 
}

/* Efekt Hover */
.sp-scroll-up:hover {
    background-color: #1a1a1a !important; /* Ciemny */
    transform: translateY(-5px);
}
/* END: SCROLL UP BUTTON */

/* ===================================================================
 * SEKCJA 17: KATALOG PRODUKTÓW PREMIUM TECH
 * START: PRODUCT CATALOG
 * Zastosowanie: Podstrona kategorii, strona produktu (BZO-03)
 * Specyfika: Grid produktów, strona szczegółów, tabele techniczne, galeria
 * =================================================================== */

/* --- 17.1 SIATKA PRODUKTÓW (GRID) --- */
.sintur-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.sintur-product-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sintur-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: transparent;
}

.sintur-card-image {
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    padding: 20px;
}

.sintur-card-image img {
    max-height: 100%;
    max-width: 100%;
    transition: transform 0.5s ease;
    mix-blend-mode: multiply; /* Usuwa ewentualne białe tło jpg */
}

.sintur-product-card:hover .sintur-card-image img {
    transform: scale(1.08); /* Zoom przy najechaniu */
}

.sintur-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sintur-card-cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 5px;
    font-weight: 700;
}

.sintur-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a1a1a;
    line-height: 1.3;
}

.sintur-card-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

.sintur-btn-outline {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
    text-decoration: none;
    margin-top: auto; /* Dopycha przycisk do dołu */
}

.sintur-product-card:hover .sintur-btn-outline {
    background: var(--kolor-glowny-red, #ff3333);
    border-color: var(--kolor-glowny-red, #ff3333);
    color: #fff;
}

/* --- 17.2 STRONA PRODUKTU (HERO) - LIFTING SPECYFIKACJI --- */
.product-hero-section {
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

.product-specs-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie kolumny na desktopie */
    gap: 0; /* Brak odstępów - łączymy ramki */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fdfdfd;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.product-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}

/* Wyróżnienie samej wartości */
.product-spec-item strong {
    color: #1a1a1a;
    font-size: 14px;
    padding: 4px 0 4px 10px; /* Zmiana: usunięto prawy padding, aby dociągnąć do krawędzi */
    border-radius: 4px;
    text-align: right; /* Wyrównanie do prawej */
    margin-left: auto; /* Wymuszenie zepchnięcia do prawej krawędzi we flexboxie */
}

/* Usuwanie zbędnych krawędzi w siatce */
.product-spec-item:nth-child(even) { 
    border-right: none; 
}
.product-spec-item:nth-last-child(1), 
.product-spec-item:nth-last-child(2) { 
    border-bottom: none; 
}

/* Mobile specyfikacje */
@media (max-width: 575px) {
    .product-specs-list { grid-template-columns: 1fr; }
    .product-spec-item { border-right: none; }
    .product-spec-item:nth-last-child(2) { border-bottom: 1px solid #e0e0e0; }
}

/* --- 17.3 TABELA TECHNICZNA ZEBRA --- */
.tech-table-wrapper {
    overflow-x: auto;
    margin-bottom: 40px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.tech-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tech-table th {
    background-color: #f4f4f4;
    color: #1a1a1a;
    font-weight: 700;
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid #ddd;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.tech-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #444;
}

.tech-table tbody tr:nth-child(even) { background-color: #fafafa; }
.tech-table tbody tr:hover { background-color: #f0f0f0; }

/* --- 17.4 SEKCJA POBIERANIA (DOWNLOADS) --- */
.download-box {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 15px;
    border-radius: 6px;
    transition: 0.3s;
    text-decoration: none;
    margin-bottom: 10px;
}

.download-box:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transform: translateX(5px);
    border-color: var(--kolor-glowny-red, #ff3333);
}

.download-icon {
    font-size: 24px;
    color: var(--kolor-glowny-red, #ff3333);
    margin-right: 15px;
}

.download-info h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.download-info span {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
}

/* --- 17.5 NOWE KLASY PRODUKTOWE I LAYOUT --- */
.sintur-product-category {
    color: #999;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 2px;
}

.sintur-btn-hero {
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 25px;
    transition: all 0.3s ease;
}

img.sintur-blend-multiply { mix-blend-mode: multiply; }

.sintur-sticky-sidebar {
    position: sticky;
    top: 100px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.sintur-parts-list {
    font-size: 0.9rem;
    color: var(--kolor-tekst-body);
    line-height: 2;
    padding-left: 1.2rem;
}

.sintur-instruction-list {
    margin: 0;
    padding-left: 1.2rem;
    color: #444;
    font-size: 0.9rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .sintur-parts-list {
        column-count: 2;
        column-gap: 20px;
    }
}

/* KONTENER ZDJĘCIA PRODUKTOWEGO (HERO) PREMIUM */
.sintur-hero-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; 
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sintur-hero-image-wrapper a.glightbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sintur-hero-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    mix-blend-mode: multiply; 
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sintur-hero-image-wrapper:hover img {
    transform: scale(1.08);
}

/* HINT POWIĘKSZANIA ZDJĘCIA PRODUKTU */
.sintur-zoom-indicator {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    pointer-events: none; 
}

.sintur-hero-image-wrapper:hover .sintur-zoom-indicator {
    background: var(--kolor-glowny-red);
    color: #ffffff;
    transform: translateY(-3px);
}

/* ===================================================================
 * 17.6 GALERIA - SYMBOLE NAWIGACJI (WERSJA PANCERNA - BEZ IKON)
 * Cel: Brak ramek, brak tła, pełna widoczność symboli < oraz >
 * =================================================================== */

.sintur-hero-image-wrapper {
    position: relative;
    /* overflow: visible pozwala kropkom i strzałkom wyjść poza kontener */
    overflow: visible !important;
    margin-bottom: 75px !important; /* Margines dla kropek na mobile */
}

/* --- BAZA PRZYCISKU (OBSZAR KLIKALNY) --- */
.sintur-custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;            /* USUNIĘCIE BORDERÓW I RAMEK */
    box-shadow: none !important;
    width: 60px;
    height: 80px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 1 !important;              /* GWARANCJA WIDOCZNOŚCI */
    padding: 0 !important;
}

/* --- RYSOWANIE SYMBOLI < ORAZ > (Czysty CSS bez ikon) --- */
.sintur-custom-arrow::after {
    content: '';
    width: 25px; /* Długość ramienia strzałki */
    height: 25px;
    /* Cienkie, czarne, półprzezroczyste linie */
    border-top: 2px solid rgba(0, 0, 0, 0.4); 
    border-left: 2px solid rgba(0, 0, 0, 0.4);
    display: block;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

/* Kierunek: Lewo < */
.sintur-arrow-left { left: -5px; }
.sintur-arrow-left::after {
    transform: rotate(-45deg); /* Obrót linii w znak < */
}

/* Kierunek: Prawo > */
.sintur-arrow-right { right: -5px; }
.sintur-arrow-right::after {
    transform: rotate(135deg); /* Obrót linii w znak > */
}

/* Efekt najechania - strzałka ciemnieje */
.sintur-custom-arrow:hover::after {
    border-color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1) rotate(var(--rotation, -45deg));
}
.sintur-arrow-right:hover::after { --rotation: 135deg; }
.sintur-arrow-left:hover::after { --rotation: -45deg; }

/* --- KROPKI NAWIGACYJNE --- */
.sintur-gallery-dots {
    position: absolute;
    bottom: -45px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 15px;
    z-index: 110;
}

.sintur-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #ccc; /* Delikatna szara obwódka */
    cursor: pointer;
    display: block !important;
    transition: all 0.3s ease;
}

.sintur-dot.active-dot {
    background-color: #ff3333; /* Czerwony kolor Sintur dla aktywnej */
    border-color: #ff3333;
    transform: scale(1.2);
}

/* Ukrycie ewentualnie zepsutych ikon FontAwesome wewnątrz buttonów */
.sintur-custom-arrow i { display: none !important; }
/* END: PRODUCT CATALOG */

/* ===================================================================
 * SEKCJA 18: MEDIA QUERIES - RESPONSYWNOŚĆ GLOBALNA
 * START: MEDIA QUERIES
 * Zastosowanie: Wszystkie sekcje, breakpointy mobile
 * Kolejność: Od największych do najmniejszych (desktop-first)
 * =================================================================== */

@media (max-width: 991px) {
    /* Ukrywanie desktopowego switchera języków */
    .sintur-lang-header {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* --- STATYSTYKI --- */
    .sintur-stats-container { padding: 10px 0; }
    .sintur-stat-item {
        border-bottom: 1px solid #f0f0f0;
        padding: 20px;
    }
    .sintur-stat-item:last-child { border-bottom: none; }
    .sintur-stat-item::after { display: none; }
    .sintur-counter-value { font-size: 2.5em; }

    /* --- TIMELINE --- */
    .timeline::after { left: 31px; }
    .timeline-item { 
        width: 100%; 
        padding-left: 70px; 
        padding-right: 25px; 
    }
    .timeline-item.left, .timeline-item.right { left: 0; }
    .timeline-item.left::after, .timeline-item.right::after { left: 21px; }

    /* --- O NAS --- */
    .sintur-about-section .sintur-sub-title { 
        transform: translateY(-20%); 
        font-size: 0.8em; 
    }
    .sintur-main-title { font-size: 2.2em; }
    
    /* --- KONTAKT --- */
    .sintur-contact-info { flex-wrap: wrap; }
    
    /* --- DOWNLOADS --- */
    .sintur-download-action .sintur-cta-button { 
        display: block; 
        width: 100%; 
        margin-top: 15px; 
    }
}
/* END: MEDIA QUERIES */

/* ===================================================================
 * SEKCJA 19: WYSZUKIWARKA (FIX DESKTOP + LUPA)
 * =================================================================== */
.sintur-search-hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.sintur-search-content-box {
    background-color: rgba(26, 26, 26, 0.85);
    border: 2px solid #ffffff;
    border-radius: 15px;
    padding: clamp(20px, 5vw, 40px);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    box-sizing: border-box; /* Zabezpieczenie przed rozpychaniem */
}

.sintur-search-main-title {
    color: #ffffff !important;
    font-family: var(--font-naglowki);
    font-size: clamp(1.5em, 6vw, 2.5em);
    font-weight: 800;
    margin-bottom: 15px;
}

.sintur-search-intro-text {
    color: #e0e0e0;
    font-family: var(--font-glowny);
    font-size: 1.1em;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* KONTENER DLA LUPY */
.sintur-search-bar-wrapper {
    position: relative; 
    max-width: 900px;
    width: 100%;
    margin: 0 auto 20px auto;
}

#sinturProductSearch {
    width: 100%;
    padding: 20px 70px 20px 30px; 
    border-radius: 50px;
    border: none;
    font-size: 1.1em;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.search-icon-right {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kolor-glowny-red);
    font-size: 1.8em;
    pointer-events: none;
    z-index: 10;
}

/* FIX: Jasna, biała podpowiedź (przestanie wtapiać się w tło) */
.sintur-search-hint {
    color: #ffffff !important; 
    font-weight: 500;
    font-size: 0.95em;
    font-family: var(--font-glowny);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    margin-top: 10px;
}

.sintur-search-hint em {
    color: var(--kolor-akcent-blue);
    font-weight: 700;
}

/* ===================================================================
 * SEKCJA 20: GLOBALNA RESPONSYWNOŚĆ (POWRÓT DO ZŁOTEGO GRIDU)
 * =================================================================== */

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important; 
}

.sintur-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center; 
    justify-items: center;   
    gap: clamp(15px, 3vw, 30px);
    padding: 20px 10px;
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;
    box-sizing: border-box;
}

.sintur-product-card {
    width: 100%;
    max-width: 380px; 
    margin: 0 auto;
    box-sizing: border-box;
}

/* FIX: Zabezpieczenie dla bardzo wąskich telefonów poniżej 400px szerokości */
@media (max-width: 400px) {
    .sintur-product-card {
        max-width: 100%; 
    }
}

@media (max-width: 600px) {
    .sintur-search-hint {
        font-size: 0.85em;
        line-height: 1.4;
    }
    .search-icon-right {
        right: 15px;
        font-size: 1.4em;
    }
}

/* ===================================================================
 * SEKCJA 21: SKONSOLIDOWANE FIXY DLA FORMULARZA I SLIDERA
 * =================================================================== */

/* --- 21.1 FORMULARZ CONVERT FORMS - FIX OBCINANIA --- */
#cf_1 {
    max-width: 100% !important;
    background-color: transparent !important;
    padding: 0 15px !important; /* Dodany padding boczny zapobiega ucinaniu na krawędziach */
    box-sizing: border-box !important;
}

#cf_1 .cf-fields {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
}

#cf_1 .cf-control-group.sintur-half {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

#cf_1 .cf-control-group:not(.sintur-half) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
}

#cf_1 .cf-label {
    font-family: var(--font-naglowki) !important;
    font-weight: 700 !important;
    color: var(--kolor-tekst-naglowek) !important;
    margin-bottom: 8px !important;
}

#cf_1 .sintur-cta-button-red {
    background-color: var(--kolor-glowny-red) !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 15px !important;
    color: #fff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: 0.3s !important;
    box-shadow: 0 5px 15px rgba(255, 51, 51, 0.3) !important;
}

#cf_1 .sintur-cta-button-red:hover {
    background-color: var(--kolor-glowny-red-hover) !important;
    transform: translateY(-2px) !important;
}

#cf_1 .tf-file-upload-editor {
    border: 2px dashed #eee !important;
    background: #fdfdfd !important;
    border-radius: 8px !important;
}

@media (max-width: 768px) {
    #cf_1 .cf-control-group.sintur-half {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* --- 21.2 LIFTING SLIDERA (STRONA GŁÓWNA) --- */
.sintur-hero-section {
    background-color: rgba(26, 26, 26, 0.7) !important; 
    border: 2px solid #ffffff !important;
    backdrop-filter: blur(5px);
    padding: clamp(20px, 4vw, 60px) clamp(15px, 4vw, 40px) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important;
}

.sintur-hero-section * {
    max-width: 100%; 
}

/* --- 21.3 NAWIGACJA SLIDERA I PRZYCISKI --- */
.rspbld-carousel .carousel-control-prev i,
.rspbld-carousel .carousel-control-next i,
.sintur-main-slider .carousel-control-prev i,
.sintur-main-slider .carousel-control-next i {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    width: 50px !important;
    height: 50px !important;
    line-height: 46px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rspbld-carousel .carousel-control-prev:hover i,
.rspbld-carousel .carousel-control-next:hover i,
.sintur-main-slider .carousel-control-prev:hover i,
.sintur-main-slider .carousel-control-next:hover i {
    background: var(--kolor-glowny-red) !important;
    border-color: var(--kolor-glowny-red) !important;
}

/* ===================================================================
 * NAPRAWA MENU: USUWANIE BŁĘDNYCH IKON (KWADRACIKÓW)
 * START: MENU NAVIGATION FIX
 * =================================================================== */

.sp-megamenu-parent > li.sp-has-child > a::after, 
.sp-megamenu-parent > li.sp-has-child > span::after,
.menu-toggler::after {
    display: none !important; 
}

.sp-megamenu-parent > li.sp-has-child > a {
    position: relative;
    padding-right: 20px !important; 
}

.sp-megamenu-parent > li.sp-has-child > a::before {
    content: '';
    position: absolute;
    right: 5px;
    top: 55%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid #333; 
    border-bottom: 2px solid #333;
    transition: all 0.3s ease;
}

.sp-megamenu-parent > li.sp-has-child:hover > a::before {
    transform: translateY(-50%) rotate(-135deg);
    border-color: var(--kolor-glowny-red);
}

/* ===================================================================
 * STYLIZACJE PODSTRON - PROCESY, CERTYFIKATY, KONTAKT
 * =================================================================== */
.mb-100 { margin-bottom: 80px; }

.process-image-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: transform 0.4s ease;
}

.process-img {
    width: 100%;
    height: auto;
    transition: transform 0.8s ease;
}

.process-row:hover .process-img {
    transform: scale(1.05);
}

.process-row:hover .process-image-wrapper {
    transform: scale(1.02);
}

.process-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--kolor-glowny-red);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.process-content-box {
    padding: 40px;
    background: #ffffff;
    border-radius: 15px;
    border: 1px solid #e0e0e0;
    border-left: 5px solid var(--kolor-glowny-red);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
}

.process-row:hover .process-content-box {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    border-color: var(--kolor-glowny-red);
}

.process-number {
    font-size: 5rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    position: absolute;
    top: -10px;
    right: 20px;
    transition: color 0.3s ease;
}

.process-row:hover .process-number {
    color: rgba(255, 51, 51, 0.1);
}

.process-features {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.process-features li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.process-features li i {
    color: var(--kolor-glowny-red);
    margin-right: 12px;
    font-size: 1.1rem;
}

/* --- STYLIZACJA KART CERTYFIKATÓW --- */
.certificate-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    height: 100%;
}

.certificate-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--kolor-glowny-red);
}

.cert-icon {
    font-size: 3rem;
    color: var(--kolor-glowny-red);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.certificate-card:hover .cert-icon {
    transform: scale(1.15);
}

.certificate-card h3 {
    font-family: var(--font-naglowki);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--kolor-tekst-naglowek);
}

.certificate-card p {
    font-size: 0.95rem;
    color: var(--kolor-tekst-body);
    line-height: 1.6;
}

.sep-award-box {
    background: rgba(255, 51, 51, 0.05);
    padding: 20px;
    border-radius: 8px;
    border: 1px dashed var(--kolor-glowny-red);
}

/* --- STYLIZACJA FORMULARZA RFQ --- */
.sintur-rfq-form .form-control, 
.sintur-rfq-form .form-select {
    border: 2px solid #eee;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: #fcfcfc;
}

.sintur-rfq-form .form-control:focus, 
.sintur-rfq-form .form-select:focus {
    border-color: var(--kolor-glowny-red);
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.1);
    background-color: #fff;
    outline: none;
}

.sintur-rfq-form .form-label {
    font-weight: 700;
    font-family: var(--font-naglowki);
    font-size: 0.9rem;
    color: var(--kolor-tekst-naglowek);
    margin-bottom: 8px;
}

.contact-quick-info i {
    color: var(--kolor-glowny-red);
    width: 25px;
}

.sintur-rfq-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 51, 51, 0.3) !important;
}

/* --- STYLIZACJA SEKCJI MAPY --- */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; 
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    filter: grayscale(30%) contrast(1.1);
    transition: all 0.5s ease;
}

.sintur-map-section .sintur-transparent-box {
    transition: all 0.4s ease;
    border: 1px solid #eee;
}

.sintur-map-section .sintur-transparent-box:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
    border-color: var(--kolor-glowny-red);
}

.sintur-map-section .sintur-transparent-box:hover iframe {
    filter: grayscale(0%) contrast(1); 
}

.location-details i {
    color: var(--kolor-glowny-red);
    margin-right: 10px;
    font-size: 1.2rem;
}

.location-details hr {
    border-top: 1px solid #eee;
    margin: 15px 0;
}

/* --- STYLIZACJA KART KONTAKTOWYCH --- */
#contactGrid .contact-item {
    max-width: 380px; 
    width: 100%;
}

#contactGrid .process-content-box {
    min-height: 550px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

#contactGrid .contact-item:hover .process-content-box {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    border-color: var(--kolor-glowny-red);
}

.contact-photo-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 25px;
    background: #f4f4f4;
    border: 1px solid #eee;
}

.contact-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    filter: grayscale(20%); 
    transition: transform 0.6s ease, filter 0.4s ease;
}

.contact-item:hover .contact-img {
    transform: scale(1.08); 
    filter: grayscale(0%);
}

.sintur-rfq-form .form-select {
    display: block !important;
    width: 100% !important;
    cursor: pointer !important;
    border: 2px solid #eee !important;
    border-radius: 8px !important;
    padding: 12px !important;
    background-color: #fff !important;
    appearance: auto !important; 
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    background-image: none !important;
    position: relative !important;
    z-index: 100 !important;
}

.process-features li a, 
.contact-quick-info a {
    color: inherit; 
    text-decoration: none;
    transition: color 0.3s ease;
}

.process-features li a:hover, 
.contact-quick-info a:hover {
    color: var(--kolor-glowny-red); 
    text-decoration: underline;
}

/* ===================================================================
 * SEKCJA 22: INTERAKTYWNY DOWNLOAD HUB (PREMIUM)
 * =================================================================== */

.sintur-download-hub {
    --card-bg: #ffffff;
    --accent-red: var(--kolor-glowny-red, #ff3333);
    --text-dark: #1a1a1a;
    --text-muted: #777777;
    /* Usunięto overflow: hidden; które ścinało box-shadow kart! */
}

/* Grid Plików korzysta z Bootstrapa (row g-4), więc nie wymuszamy grid CSS */
#mainDownloadGrid {
    display: flex;
    flex-wrap: wrap;
}

/* --- FILTRY --- */
.filter-btn {
    border: 2px solid #eee;
    background: white;
    color: var(--text-dark);
    font-family: var(--font-naglowki);
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: white !important;
    box-shadow: 0 5px 15px rgba(255, 51, 51, 0.3);
}

/* --- NOWOCZESNA KARTA --- */
.download-item {
    display: flex; /* Wymuszenie równej wysokości w gridzie Bootstrapa */
}

.sintur-modern-file-card {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid #eef0f2;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.sintur-modern-file-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-color: var(--accent-red);
}

/* Badge Kategorii */
.card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background: var(--accent-red);
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}
.badge-green { background: #28a745; }
.badge-gold { background: #ffc107; color: #000; }
.badge-blue { background: var(--kolor-akcent-blue); }

/* Podgląd Pliku */
.file-preview {
    height: 200px;
    background: #f9f9f9;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview img {
    height: 80%;
    width: auto;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.sintur-modern-file-card:hover .file-preview img {
    transform: scale(1.1) rotate(2deg);
}

.quick-view-btn {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white !important;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    opacity: 0;
}

.sintur-modern-file-card:hover .quick-view-btn {
    bottom: 15px;
    opacity: 1;
}

/* Treść Karty */
.card-content {
    padding: 25px;
    flex-grow: 1;
}

.card-content h3 {
    font-family: var(--font-naglowki);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.card-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 15px;
}

.file-meta {
    display: flex;
    gap: 15px;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
}

.file-meta i { color: var(--accent-red); }

/* Stopka Karty (Download) */
.card-footer-action {
    padding: 0 25px 25px 25px;
}

.sintur-cta-download {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f4f4f4;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--text-dark) !important;
    font-family: var(--font-naglowki);
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

/* Wyróżnienie wizualne paczki zbiorczej */
.sintur-cta-bulk {
    background: #eef5ff; 
    border: 1px dashed var(--kolor-akcent-blue);
    color: #1a1a1a !important;
}

.sintur-cta-download i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.sintur-modern-file-card:hover .sintur-cta-download:not(.sintur-cta-bulk) {
    background: var(--accent-red);
    color: white !important;
}

.sintur-modern-file-card:hover .sintur-cta-bulk {
    background: var(--kolor-akcent-blue);
    border-color: var(--kolor-akcent-blue);
    color: white !important;
}

.sintur-modern-file-card:hover .sintur-cta-download i {
    transform: translateY(3px);
}

.no-image .icon-placeholder {
    font-size: 3rem;
    color: var(--accent-red);
    margin-bottom: 20px;
    opacity: 0.2;
}

/* --- RESPONSYWNE LOGO SVG --- */
.logo-image {
    height: clamp(50px, 6vw, 80px) !important; 
    width: auto !important;
    transition: height 0.3s ease;
}

#sp-header.header-sticky .logo-image {
    height: 50px !important;
}

@media (max-width: 991px) {
    #sp-header .row {
        position: relative;
    }
    #sp-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
}

/* ===================================================================
 * SEKCJA 23: USUWANIE BIAŁYCH ODSTĘPÓW (HELIX ULTIMATE + BOOTSTRAP)
 * Cel: Całkowita likwidacja pasów między menu/stopką a treścią
 * =================================================================== */

/* 1. Zerowanie narzutów z głównych kontenerów Joomli (GÓRA I DÓŁ) */
#sp-main-body,
#sp-component,
#sp-component > .sp-column,
.rspbld-page,
.page-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. ZABICIE MARGIN COLLAPSE 
   Niewidoczna bariera zatrzymuje marginesy wewnątrz sekcji */
.page-content > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.1px !important;
    padding-bottom: 0.1px !important; 
}

/* 3. Zerowanie górnej szczeliny z Bootstrapa */
.breadcrumb, 
.mod-breadcrumbs,
#sp-section-1 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 4. Upewnienie się, że stopka przykleja się do sekcji wyżej */
#sp-footer {
    margin-top: 0 !important;
}

/* ===================================================================
 * SEKCJA 24: FIX - ODSTĘP GÓRNY DLA STRON PRODUKTÓW
 * =================================================================== */
.product-page-container {
    padding-top: 50px !important; /* Dopycha zawartość pod menu */
}

/* ===================================================================
 * SEKCJA 25: OSTATECZNY FIX DLA KART (PROJEKTY UE I PROCESY)
 * Cel: Blokada ucinania i wylewania na prawo na mobile
 * =================================================================== */

/* 1. Trik ze Slidera - Pancerz nałożony na karty */
.process-content-box {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important;
}

/* 2. Zabezpieczenie zawartości - nic nie może rozepchać karty od wewnątrz */
.process-content-box * {
    max-width: 100%;
    box-sizing: border-box !important;
}

/* 3. Trik dla urządzeń mobilnych (odchudzenie i łamanie wyrazów) */
@media (max-width: 767px) {
    .process-content-box {
        /* Chudsze boki (15px zamiast 40px) i większa góra na wystającą odznakę (badge) */
        padding: 40px 15px 25px 15px !important; 
    }
    
    .process-content-box h3 {
        font-size: 1.35rem !important; /* Nieco mniejszy font na telefonie ratuje układ */
        hyphens: auto !important;      /* Trik 2: Zezwala na łamanie słów (np. kon-ku-ren-cyj-no-ści) */
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
    }

    /* Ubezpieczenie dla paska logotypów na samej górze */
    .sintur-ue-strip {
        box-sizing: border-box !important;
        max-width: 100% !important;
        padding: 20px 10px !important;
    }
}

/* ===================================================================
 * SEKCJA 26: PROJEKTY UE - WIDOK DEDYKOWANY (IZOLOWANY)
 * Cel: Niezależny układ odporny na framework szablonu
 * =================================================================== */

#sintur-ue-projects-page {
    box-sizing: border-box !important;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 15px;
    font-family: var(--font-glowny, 'Roboto', sans-serif);
}

#sintur-ue-projects-page * {
    box-sizing: border-box !important;
}

/* 1. Ciem Nagłówek */
.ue-header-box {
    background-color: #1a1a1a;
    color: #ffffff;
    text-align: center;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    margin-bottom: 40px;
}

.ue-header-box h1 {
    font-family: var(--font-naglowki, sans-serif);
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    color: #ffffff;
}

.ue-header-box p {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 800px;
}

/* 2. Pasek Logotypów */
.ue-logos-strip {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-bottom: 4px solid var(--kolor-glowny-red, #e60000);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
}

.ue-logos-strip img {
    max-height: 65px;
    width: auto;
    object-fit: contain;
}

/* 3. Karty Projektów */
.ue-project-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-left: 5px solid var(--kolor-glowny-red, #e60000);
}

.ue-badge {
    display: inline-block;
    background-color: var(--kolor-glowny-red, #e60000);
    color: #ffffff;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(230,0,0,0.3);
}

.ue-project-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
    hyphens: auto; /* Łamanie długich słów */
    -webkit-hyphens: auto;
}

.ue-project-card p {
    color: #555555;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 4. Kafelki Finansowe (CSS Grid) */
.ue-finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 25px;
}

.ue-finance-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.ue-finance-box.highlight {
    background-color: rgba(230, 0, 0, 0.04);
    border-color: rgba(230, 0, 0, 0.15);
}

.ue-finance-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 5px;
}

.ue-finance-box.highlight .ue-finance-label,
.ue-finance-box.highlight .ue-finance-value {
    color: var(--kolor-glowny-red, #e60000);
}

.ue-finance-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a1a;
}

/* Info Box (dla B2B) */
.ue-info-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    margin-top: 25px;
}

/* =====================================================
   R E S P O N S Y W N O Ś Ć  (Mobile)
====================================================== */
@media (max-width: 767px) {
    #sintur-ue-projects-page {
        padding: 20px 10px;
    }
    .ue-header-box {
        padding: 30px 20px;
    }
    .ue-header-box h1 {
        font-size: 1.6rem;
    }
    .ue-logos-strip {
        gap: 15px;
        padding: 15px;
    }
    .ue-logos-strip img {
        max-height: 50px;
    }
    .ue-project-card {
        padding: 25px 20px;
    }
    .ue-project-card h3 {
        font-size: 1.3rem;
    }
    .ue-finance-grid {
        grid-template-columns: 1fr; /* Kafelki jeden pod drugim na komórce */
        gap: 15px;
    }
    .ue-info-box {
        flex-direction: column;
        text-align: center;
    }
}

/* ===================================================================
 * SEKCJA 27: OSTATECZNA NAPRAWA SLIDERA (DESKTOP + MOBILE)
 * Cel: Usunięcie asymetrii strzałek i likwidacja poziomego paska
 * =================================================================== */

/* 1. Odblokowanie ucinania dołu slidera */
.rspbld-carousel,
.sintur-main-slider,
.sintur-main-slider .carousel-inner,
.sintur-main-slider .carousel-item,
.sintur-main-slider .rspbld-item-container,
.sintur-main-slider .rspbld-item-content-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important; 
}

/* 2. NAPRAWA ASYMETRII STRZAŁEK I WYBUCHAJĄCEGO BOKSU */
.sintur-hero-section {
    box-sizing: border-box !important;
    /* Zabijamy stary margin: 30px, który wypychał boks w prawo! */
    margin: 0 auto !important; 
    /* Boks zajmuje 85% szerokości, robiąc idealne i równe miejsce na strzałki po bokach */
    width: 85% !important; 
    max-width: 100% !important;
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important;
}

/* 3. DOPASOWANIA DLA URZĄDZEŃ MOBILNYCH */
@media (max-width: 991px) {
    .sintur-hero-section {
        width: 100% !important; /* Na tabletach boks na pełną szerokość */
        margin: 20px 0 !important; 
        padding: 30px 15px !important;
    }

    .sintur-hero-title {
        font-size: clamp(1.5rem, 6vw, 2.2rem) !important; 
        line-height: 1.3 !important;
    }

    .sintur-hero-tagline {
        font-size: 1rem !important;
    }
}

/* Ukrycie ogromnych strzałek na małych telefonach (zostają tylko czerwone kropki na dole) */
@media (max-width: 575px) {
    .sintur-main-slider .carousel-control-prev,
    .sintur-main-slider .carousel-control-next {
        display: none !important; 
    }
}

/* ===================================================================
 * SEKCJA 28: KARTY KONTAKTOWE I ELEGANCKI FORMULARZ RSFORM
 * Zastosowanie: Strona kontaktowa, responsywny grid i lifting
 * =================================================================== */

/* --- 28.1 KARTY KONTAKTOWE (NOWOCZESNY CSS GRID) --- */
/* Zastępujemy Flexbox i klasy Bootstrapa czystą siatką Grid */
#contactGrid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); /* 4 równe kolumny na desktopie */
    gap: 30px; /* Idealnie równe odstępy w pionie i poziomie */
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
    max-width: 1320px; /* Trzyma karty w ryzach, żeby nie uciekły na boki na ultra-szerokich ekranach */
}

/* Resetujemy zachowanie pojedynczej karty */
#contactGrid .contact-item {
    max-width: 100% !important;
    margin-bottom: 0 !important; 
    padding: 0 !important;
    display: flex; /* Pozwala karcie wypełnić całą komórkę siatki */
}

#contactGrid .process-content-box {
    width: 100%; /* Wszystkie karty będą miały identyczną wysokość i szerokość */
}

/* --- RESPONSYWNOŚĆ KART KONTAKTOWYCH --- */
/* Na mniejszych laptopach zjeżdżamy do 3 kolumn */
@media (max-width: 1300px) {
    #contactGrid {
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* Na tabletach robimy 2 kolumny */
@media (max-width: 991px) {
    #contactGrid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Na telefonach 1 kolumna (jedna pod drugą) */
@media (max-width: 767px) {
    #contactGrid {
        grid-template-columns: 1fr; 
        padding: 0 15px !important; /* Dajemy oddech od ramki telefonu */
        gap: 20px; /* Lekko zmniejszamy odstępy w pionie na komórce */
    }
}

/* --- 28.2 ELEGANCKI KONTENER FORMULARZA --- */
/* Zamykamy formularz w białej karcie z cieniem, pasującej do kart kontaktowych */
#kont_akt .rspbld-module {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Miękki, głęboki cień premium */
    border-top: 5px solid var(--kolor-glowny-red); /* Charakterystyczny akcent Sintur */
}

#kont_akt h2 {
    font-family: var(--font-naglowki);
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--kolor-tekst-naglowek);
    text-align: center;
}

/* --- 28.3 ESTETYCZNE POLA I ETYKIETY --- */
#kont_akt .formControlLabel {
    font-family: var(--font-glowny);
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    display: block !important;
}

#kont_akt .formRequired {
    color: var(--kolor-glowny-red);
    margin-left: 4px;
}

/* Wygląd samych pól wprowadzania */
#kont_akt .rsform-input-box,
#kont_akt .rsform-select-box,
#kont_akt .rsform-text-box,
#kont_akt .rsform-upload-box {
    width: 100% !important;
    background-color: #f8f9fa !important; /* Bardzo delikatny, luksusowy szary */
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-size: 1rem;
    color: #333;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
}

/* Nowoczesna poświata po kliknięciu (Focus) */
#kont_akt .rsform-input-box:focus,
#kont_akt .rsform-select-box:focus,
#kont_akt .rsform-text-box:focus {
    background-color: #ffffff !important;
    border-color: var(--kolor-glowny-red) !important;
    box-shadow: 0 0 0 4px rgba(255, 51, 51, 0.1) !important; 
    outline: none !important;
}

/* --- 28.4 PRZYCISK WYŚLIJ --- */
#kont_akt .rsform-submit-button {
    width: 100%;
    background-color: var(--kolor-glowny-red) !important;
    color: #ffffff !important;
    font-family: var(--font-naglowki);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 30px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(255, 51, 51, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    margin-top: 10px;
    cursor: pointer;
}

#kont_akt .rsform-submit-button:hover {
    background-color: var(--kolor-glowny-red-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 51, 51, 0.4) !important;
}

/* --- 28.5 UKŁAD FORMULARZA NA DESKTOPIE (GRID) --- */
@media (min-width: 768px) {
    #kont_akt .col-md-12 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px 20px;
    }
    #kont_akt .rsform-block {
        grid-column: span 2;
        margin-bottom: 0 !important;
    }
    /* Ustawia imię i email w jednym rzędzie */
    #kont_akt .rsform-block-imie-i-nazwisko-firma,
    #kont_akt .rsform-block-email-address {
        grid-column: span 1; 
    }
}
/* ===================================================================
 * DODATEK DO SEKCJI 28: WYRÓWNANIE I RESPONSYWNOŚĆ (OSTATECZNA POPRAWKA)
 * =================================================================== */

/* --- 1. WYRÓWNANIE NA DESKTOPIE (Zrównanie z górnymi kartami) --- */
section:has(#kont_akt) > .row.animation-container {
    /* Ustawiamy szerokość na 1320px - standard dla siatki Bootstrap 5 w Twoim szablonie */
    max-width: 1320px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Upewniamy się, że same bloki rozciągają się na całą szerokość swoich kolumn (aby dociągnąć do krawędzi) */
.sintur-transparent-box, 
#kont_akt .rspbld-module {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Resetujemy dodatkowy, ukryty kontener, który robił puste miejsce w lewym bloku */
section:has(#kont_akt) .rspbld-content > .container {
    padding: 0 !important;
    max-width: 100% !important;
}

/* --- 2. NAPRAWA CZYTELNOŚCI NA TELEFONACH (Łamanie wyrazów) --- */
/* Usuwamy agresywne łamanie słów, które cięło wyrazy w połowie */
.sintur-transparent-box {
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
}

/* Magia CSS: Funkcja clamp() płynnie skaluje wielkość tekstu. 
   Na telefonie będzie miał 1.6rem, a na komputerze urośnie do 2.2rem. */
.sintur-transparent-box .sintur-main-title {
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    line-height: 1.2 !important;
    hyphens: none !important; /* Całkowita blokada dzielenia wyrazów */
}

/* --- 3. ODSTĘPY NA URZĄDZENIACH MOBILNYCH --- */
@media (max-width: 991px) {
    section:has(#kont_akt) .col-md-6:first-child {
        margin-bottom: 30px; /* Odstęp między tekstem a formularzem, gdy są jeden pod drugim */
    }
    
    .sintur-transparent-box {
        padding: 30px 20px !important; /* Mniejsze marginesy wewnętrzne na telefonie dają więcej miejsca na tekst */
    }
}
/* ===================================================================
 * DODATEK DO SEKCJI 28: OSTATECZNE WYRÓWNANIE DOLNEGO BLOKU (50/50)
 * =================================================================== */

/* Zmuszamy wiersz do idealnego podziału 50/50 i równej wysokości */
section:has(#kont_akt) > .row.animation-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}

/* Wymuszamy, by obie kolumny zajmowały dokładnie po 50% szerokości */
section:has(#kont_akt) > .row.animation-container > .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important; /* Równy odstęp po bokach */
}

/* Wyciągamy same białe pudełka na 100% wysokości kolumny */
.sintur-transparent-box, 
#kont_akt .rspbld-module {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important; /* Kasujemy marginesy z page buildera */
}

/* --- NAPRAWA UCIĘTEGO TEKSTU W LIŚCIE ROZWIJANEJ (MOBILE) --- */
#kont_akt select.rsform-select-box {
    height: auto !important;
    min-height: 52px !important; 
    line-height: 1.4 !important;
    padding: 12px 40px 12px 20px !important; 
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 16px !important;
}

/* --- RESPONSYWNOŚĆ (Tablety i Telefony) --- */
@media (max-width: 991px) {
    /* Kolumny układają się jedna pod drugą na 100% szerokości */
    section:has(#kont_akt) > .row.animation-container > .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 15px 0 !important;
    }
    
    .sintur-transparent-box, 
    #kont_akt .rspbld-module {
        height: auto !important;
        justify-content: flex-start !important;
    }
}
/* --- WIZYTÓWKI KONTAKTOWE --- */
#contactGrid .sintur-simple-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--kolor-glowny-red);
    border-radius: 8px;
    padding: 25px;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#contactGrid .sintur-simple-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

#contactGrid .sintur-simple-card h3 {
    font-family: var(--font-naglowki);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kolor-tekst-naglowek);
    margin-top: 0;
    margin-bottom: 5px;
}

#contactGrid .sintur-simple-card .text-muted {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

#contactGrid .sintur-simple-card .process-features {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}
/* Wygląd prostych wizytówek kontaktowych */
#contactGrid .sintur-simple-card {
    background: #ffffff;
    border: 1px solid #e0e0e0; /* Delikatna ramka dookoła */
    border-left: 4px solid var(--kolor-glowny-red); /* Grubsza ramka z lewej strony */
    border-radius: 6px;
    padding: 25px 20px;
    height: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* Subtelny cień odcinający od tła */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#contactGrid .sintur-simple-card:hover {
    transform: translateY(-3px); /* Lekkie uniesienie przy najechaniu myszką */
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
}

#contactGrid .sintur-simple-card h3 {
    font-family: var(--font-naglowki);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kolor-tekst-naglowek);
    margin-top: 0;
    margin-bottom: 5px;
}

#contactGrid .sintur-simple-card .text-muted {
    font-size: 0.85rem;
    margin-bottom: 15px;
}

#contactGrid .sintur-simple-card .process-features {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f5f5f5; /* Cieniutka linia oddzielająca dane teleadresowe */
}
/* ===================================================================
 * SEKCJA 29: FIX - ZMIANA PUNKTU ŁAMANIA MENU (BREAKPOINT)
 * Cel: Hamburger na ekranach poniżej 1350px (ochrona przed zawijaniem menu)
 * =================================================================== */

/* --- EKRANY ŚREDNIE I MAŁE (Poniżej 1350px) --- */
@media (max-width: 1349px) {
    .sp-megamenu-parent {
        display: none !important;
    }
    #offcanvas-toggler {
        display: flex !important;
    }
    #sp-menu {
        display: flex !important;
        flex-grow: 1 !important;
        justify-content: flex-end !important;
    }
}

/* --- EKRANY DUŻE (Monitory - od 1350px wzwyż) --- */
@media (min-width: 1350px) {
    #offcanvas-toggler {
        display: none !important;
    }
    .sp-megamenu-parent {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #sp-menu {
        display: flex !important;
        flex-grow: 1 !important;
        justify-content: flex-end !important;
    }
}
/* ===================================================================
 * SEKCJA 30: FIX - GLOBALNE WYMUSZENIE CZCIONEK W SP PAGE BUILDERZE
 * Cel: Obejście API Google i siłowe narzucenie fontów z Helixa
 * =================================================================== */

/* Tekst główny (Roboto) */
.sp-page-builder .sppb-addon-content,
.sp-page-builder .sppb-addon-text-block,
.sp-page-builder p,
.sp-page-builder li,
.sp-page-builder span {
    font-family: var(--font-glowny, 'Roboto', sans-serif) !important;
}

/* Nagłówki (Montserrat) */
.sp-page-builder h1,
.sp-page-builder h2,
.sp-page-builder h3,
.sp-page-builder h4,
.sp-page-builder h5,
.sp-page-builder h6,
.sp-page-builder .sppb-addon-title,
.sp-page-builder .sppb-addon-header {
    font-family: var(--font-naglowki, 'Montserrat', sans-serif) !important;
}
/* ===================================================================
 * SEKCJA 31: LIFTING MENU ROZWIJANEGO (DROPDOWN UX)
 * Cel: Poprawa czytelności długich nazw i powiększenie obszaru klikalnego
 * =================================================================== */

/* 1. Wymuszenie szerszego kontenera, aby zapobiec brzydkiemu łamaniu tekstu */
.sp-megamenu-parent .sp-dropdown.sp-dropdown-main {
    width: 320px !important; 
    padding: 10px 0 !important; 
    border-radius: 8px !important; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; 
}

/* 2. Stylizacja pojedynczego linku - powiększenie obszaru klikalnego */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    display: block !important;
    padding: 14px 25px !important; 
    line-height: 1.4 !important; 
    white-space: normal !important; 
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important; 
}

/* Usunięcie dolnej kreski w ostatnim elemencie listy */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:last-child > a {
    border-bottom: none !important;
}

/* 3. Stan po najechaniu myszką (Hover UX) - wyraźny sygnał dla użytkownika */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background-color: #f8f9fa !important; 
    color: var(--kolor-glowny-red) !important; 
    padding-left: 32px !important; 
}
/* ===================================================================
 * SEKCJA 32: FIX - SKALOWANIE GŁÓWNYCH NAGŁÓWKÓW NA MOBILE
 * Cel: Zapobieganie wylewaniu się długich słów poza ekran smartfona
 * =================================================================== */

.sintur-main-title {
    /* Płynne skalowanie: min 1.8rem na telefonie, optymalnie 8vw, max 3.2em na desktopie */
    font-size: clamp(1.8rem, 8vw, 3.2em) !important;
    
    /* Zabezpieczenie przed ucinaniem tekstu - wymuszenie łamania wyrazów */
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
}
/* ===================================================================
 * SEKCJA 33: FIX - KARUZELA LOGOTYPÓW ISO (NAPRAWA LUKI)
 * Cel: Brak zniekształceń (object-fit) bez sztucznego rozciągania w pionie
 * =================================================================== */

.sintur-iso-carousel {
    background-color: #ffffff;
    height: auto !important;
}

/* Blokujemy sztuczne pompowanie wysokości kontenera */
.sintur-iso-carousel .sppb-carousel-extended {
    max-height: 300px !important; 
}

/* Sztywna wysokość slajdu (zgodna z Twoimi ustawieniami w panelu) */
.sintur-iso-carousel .sppb-carousel-extended-item {
    height: 300px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Najważniejsza komenda: logotypy nie mogą być spłaszczone */
.sintur-iso-carousel img {
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    padding: 20px !important;
}
/* ===================================================================
 * SEKCJA 34: FIX - LAGUJĄCE TŁA NA iOS (BACKGROUND-ATTACHMENT)
 * Cel: Wyłączenie fixed attachment na tabletach/telefonach
 * =================================================================== */
@media (max-width: 991px) {
    section[style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
    }
}

/* ===================================================================
 * SEKCJA 35: LUPA (INNER ZOOM) DLA ZDJĘĆ PRODUKTÓW
 * Cel: Powiększanie detali technicznych po najechaniu myszką
 * =================================================================== */

/* Kontener zdjęcia */
.tech-zoom-container {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: crosshair;
    width: 100%;
    display: block;
    /* Dodajemy cień, żeby "okno" było wyraźniej oddzielone */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

/* Zdjęcie widoczne (małe) - TERAZ WIĘKSZE */
.tech-zoom-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px; /* ZMIANA: Zwiększono z 300px do 500px */
    object-fit: contain;
}

/* Warstwa powiększenia */
.tech-zoom-result {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
    background-color: #fff;
}

.tech-zoom-container:hover .tech-zoom-result { 
    opacity: 1; 
}

.zoom-hint {
    position: absolute; 
    bottom: 15px; 
    right: 15px;
    background: rgba(255,255,255,0.95); 
    padding: 8px 15px;
    font-size: 11px; 
    text-transform: uppercase; 
    border-radius: 30px;
    color: #1a1a1a; 
    font-weight: 700; 
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
    transition: opacity 0.3s;
    border: 1px solid #eee;
}

.tech-zoom-container:hover .zoom-hint { 
    opacity: 0; 
}

/* MOBILE - Zoom wyłączony, zmiana kursora */
@media (max-width: 991px) {
    .tech-zoom-container { cursor: zoom-in; }
    .tech-zoom-container:hover .tech-zoom-result { opacity: 0 !important; }
    .zoom-hint { content: "Kliknij by powiększyć"; }
}
/* ===================================================================
 * KONIEC ARKUSZA STYLÓW
 * =================================================================== */