* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;

}

:root {
    color-scheme: light;

    --c_white_1: #326088;
    --c_white_2: #326088;
    --c_white_3: #fdeded;
    --c_white_4: #f8f8f887;
    --c_white_5: #72777b;

    --c_black_1: #000000;

    --c_navy_blue: #E0F1FF;
    --c_navy_blue_2: #BEC8D0;

    --c_orange: #326088;

    --font_s1: 0.875rem;
    --font_s1_5: 0.9375rem;
    --font_s2: 0.9375rem;
    --font_s3: 1.125rem;
    --font_s4: 1.25rem;
    --font_s5: 1.375rem;
    --font_m1: 1.5rem;
    --font_m2: 1.625rem;
    --font_m3: 2rem;
    --font_m4: 2.25rem;
    --font_m5: 2.625rem;
    --font_l1: 3rem;
    --font_l2: 4rem;
    --font_l3: 6rem;

    --headerHeight: 4rem; /* Domyślna wartość, JS ją nadpisze */

}

/* Style kolorów */
.c_white_1 { color: var(--c_white_1); }
.c_white_2 { color: var(--c_white_2); }
.c_white_3 { color: var(--c_white_3); }
.c_white_4 { color: var(--c_white_4); }
.c_white_5 { color: var(--c_white_5); }
.c_navy_blue { color: var(--c_navy_blue); }
.c_navy_blue_2 { color: var(--c_navy_blue_2); }
.c_orange { color: var(--c_orange); }
.hover_c_orange:hover { color: var(--c_orange); } /* Dodano klasę hover */

/* Style tła */
.bg_black_1 { background-color: var(--c_black_1); }
.bg_navy_blue { background-color: var(--c_navy_blue); }
.bg_navy_blue_2 { background-color: var(--c_navy_blue_2); }
.bg_orange { background-color: var(--c_orange); }

html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-weight: 400;
    color: var(--c_white_2); /* Domyślny kolor tekstu lekko stonowany */
    scroll-behavior: smooth;
    line-height: 1.5; /* Zwiększono dla lepszej czytelności */
    scrollbar-gutter: stable; /* Stabilny pasek przewijania */
    font-family: "Roboto", sans-serif;
    scroll-padding-top: var(--headerHeight); /* Zmieniono na scroll-padding-top */
    background-color: var(--c_navy_blue);
}

body {
    background-color: var(--c_navy_blue);
    overflow-x: hidden; /* Zapobiega poziomemu przewijaniu */
}

#app {
    background-color: var(--c_navy_blue);
    overflow: clip; /* Zapobiega "wylewaniu się" tła animacji */
    position: relative; /* Potrzebne dla absolutnie pozycjonowanych dzieci jak #s3_bg */
}

b, strong { /* Zmieniono b na strong dla semantyki */
    font-weight: 700;
    color: var(--c_white_1); /* Mocniejsze wyróżnienie */
}

a {
    cursor: pointer;
    text-decoration: none;
    color: unset; /* Domyślnie dziedziczy kolor */
}

a:hover {
    color: var(--c_orange); /* Globalny hover dla linków */
    transition: color 0.2s ease-in-out;
}

#header a:hover { /* Wyłączenie globalnego hover dla linków w headerze */
     color: unset;
}

#header a.active, /* Można dodać klasę active dla aktywnej sekcji */
#header a:hover:not(.logo-link) { /* Lepszy hover dla nawigacji */
    color: var(--c_orange);
    transform: scale(1.05);
    transition: color 0.2s ease, transform 0.2s ease;
}

img {
    max-width: 100%; /* Zapobiega rozciąganiu obrazków */
    height: auto;   /* Zachowuje proporcje */
    display: block; /* Usuwa ewentualne dolne marginesy */
}

p {
    line-height: 1.6; /* Zapewnia dobrą czytelność */
    max-width: 75ch; /* Ogranicza szerokość linii dla lepszej czytelności */
}

/* Poprawka dla p w kontenerach flex wyśrodkowanych */
.flex_c_c p, .flex_a_i_center p {
    max-width: 100%; /* Usuwa ograniczenie szerokości w tych kontekstach */
}

.flex_a_i_start p { /* Upewnienie się że w tej konfiguracji ograniczenie działa */
     max-width: 75ch;
}

/* Resetowanie ograniczenia dla specyficznych elementów jeśli potrzeba */
.no-max-width {
    max-width: none;
}


button {
    outline: none;
    border: 0px;
    cursor: pointer;
    background-color: unset;
    color: unset;
    overflow: clip;
    text-wrap: nowrap;
    font-family: inherit; /* Dziedziczenie fontu */
}

input,
textarea {
    border: none;
    outline: none;
    font-family: inherit; /* Dziedziczenie fontu */
}

textarea {
    resize: none;
}

.font_normalidad {
    font-family: "normalidad-extended", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.cursor_pointer { cursor: pointer; }

/* Separatory */
.separator_v { height: 100%; border-left: 1px solid #0000002b; }
.separator_v_light { height: 100%; border-left: 1px solid #0000002b; }
.separator_h { width: 100%; border-top: 1px solid #0000002b; }
.separator_h_light { width: 100%; border-top: 1px solid #0000002b; }


/* Line height */
.line_h_1 { line-height: 1; }
.line_h_1_2 { line-height: 1.2; }
.line_h_1_3 { line-height: 1.3; }
.line_h_1_5 { line-height: 1.5; } /* Dodano */
.line_h_1_6 { line-height: 1.6; } /* Dodano */
.line_h_1_7 { line-height: 1.7; }

/* Text utils */
.text_uppercase { text-transform: uppercase; }
.text_italic { font-style: italic; }
.text_left { text-align: left; }
.text_center { text-align: center; }
.text_right { text-align: right; }
.no_wrap { white-space: nowrap; }

.text_center_left_mobile { text-align: center; }


/* Font sizes */
.font_s1 { font-size: var(--font_s1); }
.font_s1_5 { font-size: var(--font_s1_5); }
.font_s2 { font-size: var(--font_s2); }
.font_s3 { font-size: var(--font_s3); }
.font_s4 { font-size: var(--font_s4); }
.font_s5 { font-size: var(--font_s5); }
.font_m1 { font-size: var(--font_m1); }
.font_m2 { font-size: var(--font_m2); }
.font_m3 { font-size: var(--font_m3); }
.font_m4 { font-size: var(--font_m4); }
.font_m5 { font-size: var(--font_m5); }
.font_l1 { font-size: var(--font_l1); }
.font_l2 { font-size: var(--font_l2); }
.font_l3 { font-size: var(--font_l3); }

/* Font weights */
.font_300 { font-weight: 300; }
.font_400 { font-weight: 400; }
.font_500 { font-weight: 500; }
.font_600 { font-weight: 600; }
.font_700 { font-weight: 700; }
.font_800 { font-weight: 800; }
.font_900 { font-weight: 900; }

/* Container */
.container {
    margin: 0 auto;
    width: 100%; /* Pełna szerokość domyślnie */
}

.container_inner {
    margin: 0 auto;
    max-width: 1250px; /* Maksymalna szerokość treści */
    padding-left: 1rem; /* Dodano padding wewnętrzny */
    padding-right: 1rem; /* Dodano padding wewnętrzny */
    width: 100%; /* Zajmuje dostępną szerokość do max-width */
}

/* Section padding */
.section {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}

/* Border radius */
.border_radius { border-radius: 0.6rem; }
.border_sharp { outline: 1px solid #c8ccff38; }
.border_sharp_border { border: 1px solid #c8ccff21; }

/* Padding utils (P) */
.p_025 { padding: 0.25rem; }
.p_05 { padding: 0.5rem; }
.p_1 { padding: 1rem; }
.p_2 { padding: 2rem; }
.p_3 { padding: 3rem; }
.p_4 { padding: 4rem; }
.p_5 { padding: 5rem; }
.p_v_025 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.p_v_05 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.p_v_1 { padding-top: 1rem; padding-bottom: 1rem; }
.p_v_2 { padding-top: 2rem; padding-bottom: 2rem; }
.p_v_3 { padding-top: 3rem; padding-bottom: 3rem; }
.p_v_4 { padding-top: 4rem; padding-bottom: 4rem; }
.p_v_5 { padding-top: 5rem; padding-bottom: 5rem; }
.p_h_025 { padding-left: 0.25rem; padding-right: 0.25rem; }
.p_h_05 { padding-left: 0.5rem; padding-right: 0.5rem; }
.p_h_1 { padding-left: 1rem; padding-right: 1rem; }
.p_h_2 { padding-left: 2rem; padding-right: 2rem; }
.p_h_3 { padding-left: 3rem; padding-right: 3rem; }
.p_h_4 { padding-left: 4rem; padding-right: 4rem; }
.p_h_5 { padding-left: 5rem; padding-right: 5rem; }
.p_t_025 { padding-top: 0.25rem; }
.p_t_05 { padding-top: 0.5rem; }
.p_t_1 { padding-top: 1rem; }
.p_t_2 { padding-top: 2rem; }
.p_t_3 { padding-top: 3rem; }
.p_t_4 { padding-top: 4rem; }
.p_t_5 { padding-top: 5rem; }
.p_r_025 { padding-right: 0.25rem; }
.p_r_05 { padding-right: 0.5rem; }
.p_r_1 { padding-right: 1rem; }
.p_r_2 { padding-right: 2rem; }
.p_r_3 { padding-right: 3rem; }
.p_r_4 { padding-right: 4rem; }
.p_r_5 { padding-right: 5rem; }
.p_b_025 { padding-bottom: 0.25rem; }
.p_b_05 { padding-bottom: 0.5rem; }
.p_b_1 { padding-bottom: 1rem; }
.p_b_2 { padding-bottom: 2rem; }
.p_b_3 { padding-bottom: 3rem; }
.p_b_4 { padding-bottom: 4rem; }
.p_b_5 { padding-bottom: 5rem; }
.p_l_025 { padding-left: 0.25rem; }
.p_l_05 { padding-left: 0.5rem; }
.p_l_1 { padding-left: 1rem; }
.p_l_2 { padding-left: 2rem; }
.p_l_3 { padding-left: 3rem; }
.p_l_4 { padding-left: 4rem; }
.p_l_5 { padding-left: 5rem; }

/* Margin utils (M) */
.m_0 { margin: 0; }
.m_0_auto { margin: 0 auto; }
.m_025 { margin: 0.25rem; }
.m_05 { margin: 0.5rem; }
.m_1 { margin: 1rem; }
.m_2 { margin: 2rem; }
.m_3 { margin: 3rem; }
.m_4 { margin: 4rem; }
.m_5 { margin: 5rem; }
.m_v_025 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.m_v_05 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.m_v_1 { margin-top: 1rem; margin-bottom: 1rem; }
.m_v_2 { margin-top: 2rem; margin-bottom: 2rem; }
.m_v_3 { margin-top: 3rem; margin-bottom: 3rem; }
.m_v_4 { margin-top: 4rem; margin-bottom: 4rem; }
.m_v_5 { margin-top: 5rem; margin-bottom: 5rem; }
.m_h_025 { margin-left: 0.25rem; margin-right: 0.25rem; }
.m_h_05 { margin-left: 0.5rem; margin-right: 0.5rem; }
.m_h_1 { margin-left: 1rem; margin-right: 1rem; }
.m_h_2 { margin-left: 2rem; margin-right: 2rem; }
.m_h_3 { margin-left: 3rem; margin-right: 3rem; }
.m_h_4 { margin-left: 4rem; margin-right: 4rem; }
.m_h_5 { margin-left: 5rem; margin-right: 5rem; }
.m_t_auto { margin-top: auto; }
.m_t_025 { margin-top: 0.25rem; }
.m_t_05 { margin-top: 0.5rem; }
.m_t_1 { margin-top: 1rem; }
.m_t_2 { margin-top: 2rem; }
.m_t_3 { margin-top: 3rem; }
.m_t_4 { margin-top: 4rem; }
.m_t_5 { margin-top: 5rem; }
.m_r_auto { margin-right: auto; } /* Dodano */
.m_r_025 { margin-right: 0.25rem; }
.m_r_05 { margin-right: 0.5rem; }
.m_r_1 { margin-right: 1rem; }
.m_r_2 { margin-right: 2rem; }
.m_r_3 { margin-right: 3rem; }
.m_r_4 { margin-right: 4rem; }
.m_r_5 { margin-right: 5rem; }
.m_b_auto { margin-bottom: auto; } /* Dodano */
.m_b_025 { margin-bottom: 0.25rem; }
.m_b_05 { margin-bottom: 0.5rem; }
.m_b_1 { margin-bottom: 1rem; }
.m_b_2 { margin-bottom: 2rem; }
.m_b_3 { margin-bottom: 3rem; }
.m_b_4 { margin-bottom: 4rem; }
.m_b_5 { margin-bottom: 5rem; }
.m_l_auto { margin-left: auto; } /* Dodano */
.m_l_025 { margin-left: 0.25rem; }
.m_l_05 { margin-left: 0.5rem; }
.m_l_1 { margin-left: 1rem; }
.m_l_2 { margin-left: 2rem; }
.m_l_3 { margin-left: 3rem; }
.m_l_4 { margin-left: 4rem; }
.m_l_5 { margin-left: 5rem; }

/* Gap utils */
.gap_025 { gap: .25rem; }
.gap_05 { gap: .5rem; }
.gap_075 { gap: .75rem; }
.gap_1 { gap: 1rem; }
.gap_125 { gap: 1.25rem; }
.gap_15 { gap: 1.5rem; }
.gap_175 { gap: 1.75rem; }
.gap_2 { gap: 2rem; }
.gap_3 { gap: 3rem; }
.gap_4 { gap: 4rem; }
.gap_5 { gap: 5rem; }

.gap_2_mobile_1 { gap: 2rem; }
.gap_3_mobile_1 { gap: 3rem; }
.gap_3_mobile_2 { gap: 3rem; }

/* Flexbox utils */
.flex { display: flex; }
.d_inline_flex { display: inline-flex; }
.flex_row { flex-direction: row; }
.flex_column { flex-direction: column; }
.flex_wrap { flex-wrap: wrap; }
.flex_no_wrap { flex-wrap: nowrap; }

.flex_j_c_start { justify-content: flex-start; }
.flex_j_c_center { justify-content: center; } /* Alias dla c_c */
.flex_j_c_end { justify-content: flex-end; }
.flex_j_c_sb { justify-content: space-between; }
.flex_j_c_sa { justify-content: space-around; }
.flex_j_c_se { justify-content: space-evenly; } /* Dodano */

.flex_a_i_start { align-items: flex-start; }
.flex_a_i_center { align-items: center; } /* Alias dla c_c */
.flex_a_i_end { align-items: flex-end; }
.flex_a_i_stretch { align-items: stretch; } /* Dodano */
.flex_a_i_baseline { align-items: baseline; } /* Dodano */

.flex_a_c_start { align-content: flex-start; } /* Dodano */
.flex_a_c_center { align-content: center; } /* Alias dla c_c */
.flex_a_c_end { align-content: flex-end; }
.flex_a_c_sb { align-content: space-between; } /* Dodano */
.flex_a_c_sa { align-content: space-around; } /* Dodano */
.flex_a_c_stretch { align-content: stretch; } /* Dodano */

/* Skrót flex_c_c - zachowany dla kompatybilności */
.flex_c_c {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Usunięto align-content i justify-items - rzadziej potrzebne */
}

.flex_grow_0 { flex-grow: 0; } /* Dodano */
.flex_grow_1 { flex-grow: 1; }
.flex_grow_05 { flex-grow: 0.5; } /* Rzadko używane, ale zostawiam */
.flex_grow_2 { flex-grow: 2; }

.flex_shrink_0 { flex-shrink: 0; } /* Dodano */
.flex_shrink_1 { flex-shrink: 1; }
.flex_shrink_2 { flex-shrink: 2; }
.flex_shrink_3 { flex-shrink: 3; } /* Rzadko używane */
.flex_shrink_4 { flex-shrink: 4; } /* Rzadko używane */

.flex110 { flex: 1 1 0; } /* Używać ostrożnie, może nadpisywać grow/shrink */

/* Grid utils */
.grid { display: grid; } /* Dodano podstawową klasę grid */
.grid_2c { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid_3c { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid_2c_mobile_1c { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid_4c { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid_5c { display: grid; grid-template-columns: repeat(5, 1fr); } /* Dodano */
.grid_auto_1fr { display: grid; grid-template-columns: auto 1fr; }
.grid_1fr_auto { display: grid; grid-template-columns: 1fr auto; }

/* Układ responsywny */
.flex_row_mobile_column { display: flex; flex-direction: row; }
.flex_column_mobile_row { display: flex; flex-direction: column; } /* Domyślnie column */


/* Visibility utils */
.display_contents { display: contents; }
.mobile_none { display: flex; } /* Domyślnie widoczne na desktopie */
.desktop_none { display: none !important; } /* Domyślnie ukryte na desktopie */
.d_block { display: block; }
.d_none { display: none !important; } /* Important dla pewności nadpisania */

/* Width utils */
.w_auto { width: auto; } /* Dodano */
.w_fit_c { width: fit-content; }
.w_max_c { width: max-content; }
.w_05rem { width: 0.5rem; }
.w_1rem { width: 1rem; }
.w_2rem { width: 2rem; }
.w_3rem { width: 3rem; }
.w_4rem { width: 4rem; }
.w_5rem { width: 5rem; }
.w_6rem { width: 6rem; }
.w_7rem { width: 7rem; }
.w_8rem { width: 8rem; }
.w_9rem { width: 9rem; }
.w_10rem { width: 10rem; }
.w_11rem { width: 11rem; }
.w_25 { width: 25%; } /* Dodano */
.w_30 { width: 30%; }
.w_33 { width: 33.333%; } /* Dodano */
.w_40 { width: 40%; }
.w_50 { width: 50%; }
.w_60 { width: 60%; }
.w_66 { width: 66.666%; } /* Dodano */
.w_70 { width: 70%; }
.w_75 { width: 75%; } /* Dodano */
.w_100 { width: 100%; }

.w_40_mobile_100 { width: 40%; }
.w_70_mobile_100 { width: 70%; }

.max_w_33 { max-width: 33.333%; }
.max_w_50 { max-width: 50%; }
.max_w_60 { max-width: 60%; }
.max_w_100 { max-width: 100%; } /* Dodano */
.max_w_1250 { max-width: 1250px; } /* Zduplikowane z .container_inner, można usunąć */


.min_w_33 { min-width: 33.333%; }
.min_w_50 { min-width: 50%; } /* Dodano */
.min_w_100 { min-width: 100%; } /* Dodano */

/* Height utils */
.h_auto { height: auto; }
.h_fit_c { height: fit-content; } /* Dodano */
.h_max_c { height: max-content; } /* Dodano */
.h_05rem { height: 0.5rem; }
.h_1rem { height: 1rem; }
.h_2rem { height: 2rem; }
.h_3rem { height: 3rem; }
.h_4rem { height: 4rem; }
.h_5rem { height: 5rem; }
.h_6rem { height: 6rem; }
.h_25 { height: 25%; } /* Dodano */
.h_50 { height: 50%; }
.h_75 { height: 75%; } /* Dodano */
.h_100 { height: 100%; }
.h_inherit { height: inherit; }
.min_h_50 { min-height: 50%; }
.min_h_100 { min-height: 100%; } /* Dodano */
.min_h_50vh { min-height: 50vh; }
.min_h_75vh { min-height: 75vh; }
.min_h_100vh { min-height: 100vh; }
.h_50vh { height: 50vh; }
.h_60vh { height: 60vh; }
.h_75vh { height: 75vh; }
.h_100vh { height: 100vh; }
.max_h_80vh { max-height: 80vh; }
.max_h_100vh { max-height: 100vh; }

/* Overflow utils */
.ov_visible { overflow: visible; }
.ov_hidden { overflow: hidden; }
.ov_clip { overflow: clip; }
.ov_scroll { overflow: scroll; }
.ov_auto { overflow: auto; }
.ov_x_visible { overflow-x: visible; } /* Dodano */
.ov_x_hidden { overflow-x: hidden; }
.ov_x_clip { overflow-x: clip; } /* Dodano */
.ov_x_scroll { overflow-x: scroll; }
.ov_x_auto { overflow-x: auto; } /* Dodano */
.ov_y_visible { overflow-y: visible; } /* Dodano */
.ov_y_hidden { overflow-y: hidden; }
.ov_y_clip { overflow-y: clip; } /* Dodano */
.ov_y_scroll { overflow-y: scroll; }
.ov_y_auto { overflow-y: auto; }

/* Pointer events */
.pointer_events_none { pointer-events: none; }
.pointer_events_auto { pointer-events: auto; } /* Dodano */

/* Collapse utils */
.c_hidden { max-height: 0px; overflow: clip; visibility: hidden; } /* Dodano visibility */
.c_hidden_anim {
    max-height: 0px;
    overflow: hidden;
    visibility: hidden; /* Ukrycie dla czytników */
    opacity: 0; /* Płynne znikanie */
    transition: max-height 300ms ease-in-out, opacity 200ms ease-in-out, visibility 0s 300ms;
}
.c_hidden_anim_show {
    max-height: 2000px !important; /* Wystarczająco duża wartość */
    opacity: 1 !important;
    visibility: visible !important;
    transition: max-height 500ms ease-in-out, opacity 300ms ease-in-out 100ms, visibility 0s 0s; /* Dostosowane przejścia */
}

/* Position utils */
.relative { position: relative; } /* Dodano */
.absolute { position: absolute; }
.fixed { position: fixed; } /* Dodano */
.sticky { position: sticky; } /* Dodano */

.absolute_center > *{ /* Nadal działa, ale używać z rozwagą */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top_0 { top: 0; }
.right_0 { right: 0; }
.bottom_0 { bottom: 0; }
.left_0 { left: 0; }
.inset_0 { top: 0; right: 0; bottom: 0; left: 0; } /* Dodano skrót */

/* Aspect ratio */
.aspect_ratio_1_1 { aspect-ratio: 1/1; }
.aspect_ratio_16_9 { aspect-ratio: 16/9; } /* Dodano */
.aspect_ratio_4_3 { aspect-ratio: 4/3; } /* Dodano */

/* Z-index utils */
.z_i_0 { z-index: 0; } /* Dodano */
.z_i_1 { z-index: 1; }
.z_i_2 { z-index: 2; }
.z_i_3 { z-index: 3; }
.z_i_4 { z-index: 4; }
.z_i_5 { z-index: 5; }
.z_i_10 { z-index: 10; } /* Dodano */
.z_i_100 { z-index: 100; } /* Dodano */
.z_i_1000 { z-index: 1000; } /* Dodano */

/* Transition utils */
.trans50ms { transition: all 50ms cubic-bezier(.5,.01,.29,.99); }
.trans100ms { transition: all 100ms cubic-bezier(.5,.01,.29,.99); }
.trans200ms { transition: all 200ms cubic-bezier(.5,.01,.29,.99); }
.trans300ms { transition: all 300ms cubic-bezier(.5,.01,.29,.99); }
.trans400ms { transition: all 400ms cubic-bezier(.5,.01,.29,.99); }
.trans500ms { transition: all 500ms cubic-bezier(0.65,0.05,0.36,1); }

/* --- Komponenty Specyficzne --- */

/* Przycisk */
.button {
    padding: 0.7em 1.5em; /* Lekko większy padding */
    background-color: var(--c_white_2);
    color: var(--c_navy_blue_2);
    border-radius: 0.4rem; /* Dopasowany border-radius */
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 100ms ease-in;
    border: 1px solid var(--c_white_2);
    font-weight: 600; /* Pogrubienie dla przycisku */
    display: inline-flex; /* Dla wyrównania ikon jeśli będą */
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    position: relative; /* Dla animacji kliknięcia */
    overflow: hidden; /* Dla animacji kliknięcia */
}

.button:hover {
    background-color: var(--c_navy_blue);
    color: var(--c_white_1);
    border-color: var(--c_white_2);
    transform: translateY(-2px); /* Subtelny efekt uniesienia */
    cursor: pointer;
}

.button:active {
    transform: translateY(0px); /* Powrót przy kliknięciu */
}

/* Header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease; /* Płynna zmiana tła przy scrollu (jeśli dodamy) */
}
/* Można dodać styl dla scrollowanego headera */
#header.scrolled {
    background-color: rgba(14, 31, 44, 0.9); /* lekko przezroczyste tło */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#header .section {
    /* Dodatkowe style dla sekcji w headerze, jeśli potrzebne */
    min-height: var(--headerHeight);
    display: flex;
    align-items: center;
}

#header div {
    background-color: #326088;
}

#desktopNav .logo, #mobileNav .logo {
     transition: transform 0.3s ease;
}
#desktopNav .logo:hover, #mobileNav .logo:hover {
    transform: scale(1.05);
}


/* Sekcja Hero (S1) */
.s1img {
    background-image: url('../img/s1img.jpg'); /* Upewnij się, że ścieżka jest poprawna */
    background-size: cover;
    background-position: center;
    position: relative; /* Dla .s1_cover */
}

.s1_cover {
    position: absolute;
    inset: 0; /* Rozciąga na całą sekcję */
    background-color: var(--c_navy_blue);
    opacity: 0.5;
    z-index: 1; /* Pod tekstem, ale nad obrazem tła */
}

.s1_gal_1 {
    background-image: url(../img/s1_gal/s1_1.jpg);
    height: 100%;
    background-size: cover;
    background-position: center;
}

.s1_gal_2 {
    background-image: url(../img/s1_gal/s1_2.jpg);
    height: 100%;
    background-size: cover;
    background-position: center;
}

.s1_gal_3 {
    background-image: url(../img/s1_gal/s1_3.jpg);
    height: 100%;
    background-size: cover;
    background-position: center;
}


/* Sekcja S2 */
#s2 {
    background: radial-gradient(circle at top center, var(--c_navy_blue) 0%, var(--c_navy_blue_2) 100%); /* Subtelne tło */
    position: relative;
    z-index: 2; /* Nad ewentualnymi elementami z s1 */
}

/* Galeria S2_5 */


/* Ścieżki do obrazów galerii - upewnij się, że są poprawne */
#s2_5 .img_item:nth-child(1) { background-image: url('../img/gal/photo1.jpg'); }
#s2_5 .img_item:nth-child(2) { background-image: url('../img/gal/photo2.jpg'); }
#s2_5 .img_item:nth-child(3) { background-image: url('../img/gal/photo3.jpg'); }
#s2_5 .img_item:nth-child(4) { background-image: url('../img/gal/photo4.jpg'); }
#s2_5 .img_item:nth-child(5) { background-image: url('../img/gal/photo5.jpg'); }

#s2_5 img {
    height: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    
}


/* Sekcja S3 Kontakt */
#s3 {
    position: relative; /* Potrzebne dla #s3_bg */
    overflow: hidden; /* Ukrycie wystającego tła */
    z-index: 1; /* Za innymi sekcjami jeśli potrzeba */
}

#s3_bg {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%); /* Wyśrodkowanie w pionie */
    width: 60%; /* Szerokość obrazu tła - dostosuj */
    height: auto;
    max-height: 100%;
    z-index: -1; /* Tło pod treścią */
    pointer-events: none; /* Ignorowanie przez mysz */
    filter: invert(1);
}

#s3_bg img {
    width: 100%;
    height: auto;
    opacity: 0.1; /* Zmniejszona widoczność */
    object-fit: contain; /* Zachowanie proporcji obrazu */
    object-position: right center;
}

/* Ikony social media */
.social-icons a {
    display: inline-block; /* Umożliwia transformacje */
    transition: transform 0.2s ease-out, color 0.2s ease-out;
    color: var(--c_white_3); /* Domyślny kolor ikon */
}

.social-icons a:hover {
    transform: scale(1.2) translateY(-2px); /* Powiększenie i uniesienie */
    color: var(--c_orange); /* Kolor przy najechaniu */
}

.social-icons i {
    display: block; /* Zapobiega dziedziczeniu line-height */
    font-size: 1.8em; /* Rozmiar ikon - dostosuj */
}


/* Side Menu */
#sidemenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 350px; /* Ograniczenie szerokości menu */
    height: 100vh;
    z-index: 1100; /* Nad headerem */
    background-color: var(--c_navy_blue);
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(.5,.01,.29,.99);
    background: radial-gradient(circle at top left, var(--c_navy_blue) 0%, var(--c_navy_blue_2) 100%);
    box-shadow: 5px 0 15px rgba(0,0,0,0.2); /* Cień dla głębi */
    padding-top: 5rem; /* Odstęp od góry */
    padding-bottom: 2rem;
    overflow-y: auto; /* Przewijanie jeśli menu długie */
}

#sidemenu.visible {
    transform: translateX(0%);
}

#closeMenu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--c_white_4);
    transition: color 0.2s ease, transform 0.2s ease;
}
#closeMenu:hover {
    color: var(--c_white_2);
    transform: rotate(90deg) scale(1.1);
}

#sidemenu a { /* Style linków w menu */
    color: var(--c_white_2);
    padding: 0.5em 0;
    transition: color 0.2s ease, transform 0.2s ease;
    width: 100%;
    text-align: center;
}
#sidemenu a:hover {
    color: var(--c_white_2);
    transform: translateX(5px);
}
#sidemenu .social-icons a { /* Reset hover dla social icons */
    transform: none;
    padding: 0;
}
#sidemenu .social-icons a:hover {
    transform: scale(1.2) translateY(-2px); /* Przywrócenie hovera z globalnych */
}


/* Animacje */

/* Animacja przycisku */
.button.clickedAnimation, .clickedAnimationLight { /* Łączę style dla obu animacji */
    animation: clickedAnimation 0.5s cubic-bezier( 0, 0.25, 0.06, 1 ) 1;
}

@keyframes clickedAnimation {
    0% { transform: scale(1.0) translateY(0px); } /* Dodano translateY */
    30% { transform: scale(0.95) translateY(0px); }
    70% { transform: scale(1.02) translateY(-1px); } /* Lekkie odbicie */
    100% { transform: scale(1.0) translateY(0px); }
}

.button.clickedAnimation::before, .clickedAnimationLight::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block; /* Zmieniono na block */
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit; /* Dziedziczenie zaokrąglenia */
    animation: clickedAnimationBefore 0.5s linear 1;
    background-color: transparent; /* Tło przezroczyste */
    z-index: -1; /* Pod tekstem przycisku */
}

@keyframes clickedAnimationBefore {
    0% { transform: scale(0.5); background-color: #ffffff1a; opacity: 1; }
    100% { transform: scale(2.5); background-color: #ffffff00; opacity: 0; }
}


/* Animacja przewijania - Reveal */
.readyForAnimation {
    opacity: 0;
    transform: translateY(3rem); /* Zmieniono na mniejszą wartość */
    transition: opacity 0.8s cubic-bezier(.45,.13,.05,.96), transform 0.8s cubic-bezier(.45,.13,.05,.96);

}

.showAnimation {
    opacity: 1;
    transform: translateY(0rem);
}

/* Animacja na wejście dla całej sekcji */
.showAnimation2 {
    animation: showAnimation2 1s cubic-bezier(.45,.13,.05,.96) 1 forwards; /* forwards utrzymuje stan końcowy */
    opacity: 0; /* Stan początkowy */

}

@keyframes showAnimation2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animacja przycisku oferty */
.offerAnim {
    animation: offerAnim 4s cubic-bezier(.45,.13,.05,.96) infinite;
    will-change: transform; /* Optymalizacja */
}

@keyframes offerAnim {
    0%, 40%, 80%, 100% { transform: translateY(0%) scale(1.0); }
    20%, 60% { transform: translateY(10px) scale(0.95); } /* Zmieniono na px */
}

/* --- Media Queries --- */

/* Duże desktopy */
@media only screen and (min-width: 1921px) {
    html { font-size: 18px !important; } /* Większy font na dużych ekranach */
}

/* Standardowe laptopy / mniejsze desktopy */
@media only screen and (max-width: 1366px), only screen and (max-height: 820px) {
    html { font-size: 14px !important; }
}

/* Mniejsze laptopy / tablety poziomo */
@media only screen and (max-width: 1280px), only screen and (max-height: 780px) {
    html { font-size: 13px !important; }
    .gap_3_mobile_1 { gap: 1.5rem; }
    .gap_3_mobile_2 { gap: 2.5rem; }
}

/* Tablety */
@media only screen and (max-width: 1024px), only screen and (max-height: 710px) {
    html { font-size: 12px !important; }
    .gap_3_mobile_1 { gap: 1rem; }
}

/* Mniejsze tablety / Duże telefony */
@media only screen and (max-width: 950px), only screen and (max-height: 660px) {
    html { font-size: 11px !important; }
}

/* Standardowe telefony (punkt przełamania dla mobile) */
@media only screen and (max-width: 768px), only screen and (max-height: 600px) {
    html { font-size: 12px !important; } /* Lekko zwiększony font dla mobile */

    .absolute_mobile { position: absolute; }
    .text_center_left_mobile { text-align: left; }

    .grid_2c_mobile_1c {
        display: grid;
        grid-template-columns: 1fr;
    }

    /* Ukrywanie/pokazywanie elementów */
    .mobile_none { display: none !important; } /* Ukryj elementy desktopowe */
    .desktop_none { display: flex !important; } /* Pokaż elementy mobilne (jeśli domyślnie są flex) */
     /* Jeśli element mobilny ma być block, grid itp.: */
    #mobileNav.desktop_none { display: flex !important; }
    #sidemenu.desktop_none { display: flex !important; } /* Zakładając że sidemenu jest flex */

    /* Układy kolumnowe */
    .flex_row_mobile_column { flex-direction: column; }
    .flex_column_mobile_row { flex-direction: row; } /* Odwrócenie */

    /* Szerokości na mobile */
    .w_40_mobile_100,
    .w_70_mobile_100 { width: 100% !important; } /* Important dla pewności */

    /* Dostosowanie gapów */
    .gap_2_mobile_1 { gap: 1rem; }
    .gap_3_mobile_1 { gap: 1rem; }
    .gap_3_mobile_2 { gap: 1.5rem; }

    /* Dostosowanie kontenerów */
    .container_inner { padding-left: 1.5rem; padding-right: 1.5rem; }

    /* Poprawki dla sekcji */
    #s1 h1 { font-size: var(--font_l1); }
    #s1 h2 { font-size: var(--font_m1); }

    #s2 .container_inner { padding-top: 3rem; padding-bottom: 3rem; gap: 2rem; }
    #s2 h3 { font-size: var(--font_m4); }

    #s2_5 { flex-wrap: wrap; } /* Pozwolenie na zawijanie w galerii */

    #s3 .container_inner { gap: 2rem; }
    #s3 h3 { font-size: var(--font_m5); }
    #s3 p.font_m2 { font-size: var(--font_m1); } /* Dostosuj rozmiar cytatu */
    #s3_bg { width: 180%;} /* Tło bardziej subtelne na mobile */
}

/* Małe telefony */
@media only screen and (max-width: 480px), only screen and (max-height: 550px) {
    html { font-size: 11px !important; }
    .container_inner { padding-left: 1rem; padding-right: 1rem; }
    #s1 h1 { font-size: var(--font_m5); }
    #s1 h2 { font-size: var(--font_s5); }


    #s3 h3 { font-size: var(--font_m4); }
}