/* 1. Definiujemy czcionkę */
@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-variable.woff2') format('woff2-variations'),
         url('fonts/manrope.woff2') format('woff2');
    font-weight: 100 900; /* Zakres dla czcionki zmiennej */
    font-display: swap;
    font-style: normal;
    }
:root {
/* Czcionki */
    --font-main: 'Manrope', sans-serif;
/* --- PALETA KOLORÓW (K01 - K08) --- */
    --color-00: #ffffff; /* Biały */
    --color-01: #F0F9FF; /* Bardzo jasny błękitny */
    --color-02: #E0F2FE; /* Jasny błękitny */
    --color-03: #0EA5E9; /* Główny niebieski (Primary) */
    --color-04: #0284C7; /* Średni niebieski */
    --color-05: #0369A1; /* Ciemniejszy niebieski */
    --color-06: #0C4A6E; /* Ciemny granatowy */
    --color-07: #1E293B; /* Bardzo ciemny granatowy */
    --color-08: #0F172A; /* Prawie czarny */

/* --- RESPONSYWNA TYPOGRAFIA (H1 - H7) --- */
/* Użycie funkcji clamp zapewnia płynne skalowanie między min 360px a max 1140px */
    --header-xxl-size: clamp(3rem, 2.5385rem + 2.0513vw, 4rem);
    --header-xl-size: clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);
    --header-l-size: clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);
    --header-m-size: clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem);
    --header-s-size: clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem);
    --header-xs-size: clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem);
    --header-xxs-size: clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem);
    --header-3xs-size: 1.125rem;
    --header-4xs-size: 1rem;
    --header-5xs-size: 0.875rem;
    --header-6xs-size: 0.75rem;
    
/* --- ROZMIARY TEKSTU (w rem) --- */
    --text-l-size: 1.125rem;
    --text-m-size: 1rem;
    --text-s-size: 0.875rem;
    --text-xs-size: 0.75rem;
    
    --text-button-l-size: 1.25rem;
    --text-button-m-size: 1rem;
    --text-button-s-size: 0.875rem;
    
    --text-link-m-size: 1rem;
    --text-sub-m-size: 1.2rem;
    
/*Szerokość bocznych sekcji*/
    --section-side: clamp(1.25rem, calc(-0.213rem + 7.317vw), 5rem); /*20-80px*/

/* Offset Padding for Overlay Headers */
    --section-offset-header-normal: 100px; /* Adjust to the overlay header's negative margin */
    --section-offset-header-small: 80px; /* rozmiar po zmniejszonym nagłówku */
    
/*Sekcje wysokości*/
    --section-hero-height: 100vh; /* 100% the screen height */
    --section-xxl: clamp(9.375rem, calc(9.131rem + 1.22vw), 10rem); /*150-160px*/
    --section-xl: clamp(6.875rem, calc(6.631rem + 1.22vw), 7.5rem); /*110-120px*/
    --section-l: clamp(5.625rem, calc(5.381rem + 1.22vw), 6.25rem);/*90-100px*/
    --section-m: 5rem; /*80px*/
    --section-s: 3.75rem; /*60px*/
    --section-xs: 2.5rem; /*40px*/
    --section-xxs: 1.5rem; /*24px*/
    --section-3xs: 1.25rem; /* 20px */
    --section-4xs: 1rem; /* 16px */
    --section-5xs: 0.875rem;
    --section-6xs: 0.75rem;
   
/* Width For Narrow Sections*/
    --section-narrow: 62.5rem; /* 1000px */
    --section-narrow-xs: 45rem; /* 720px */
    
/* GAP -> space-xxl */
    --space-xxl: clamp(1.25rem, calc(-0.213rem + 7.317vw), 5rem);
    --space-xl: clamp(1.25rem, calc(0.274rem + 4.878vw), 3.75rem);
    --space-l: clamp(1.25rem, calc(0.762rem + 2.439vw), 2.5rem);
    --space-m: clamp(1.25rem, calc(1.152rem + 0.488vw), 1.5rem);
    --space-s: clamp(0.75rem, calc(0.652rem + 0.488vw), 1rem);
    --space-xs: 0.5rem;
    --space-xxs: 0.25rem;
    --space-none: 0px;
    
/* Max width - szerokość*/
    --max-width-str: 71.25rem;     /* Ustaw szerkokość dla całej strony */
    --max-width-1920: 120rem;	   /* Pełna szerokość Full HD */
    --max-width-1440: 90rem;	   /* Bardzo szerokie ekrany (Laptopy 15") */
    --max-width-1280: 80rem;       /* szeroko, nowocześnie */
    --max-width-1200: 75rem;       /* Nowoczesny, bezpieczny standard */
    --max-width-1140: 71.25rem;    /* Klasyczny kontener elementora (starszy standard) */
    --max-width-1000: 62.5rem;
    --max-width-750: 46.875rem;
    --max-width-500: 31.25rem;
    --max-width-350: 21.875rem;
    
/* promienie obramowania */
    --border-radius-full: 9999px;
    --border-radius-xxl:  clamp(2rem, 3vw + 1.5rem, 4rem);            /* 32px -> 64px */
    --border-radius-xl:   clamp(1.5rem, 2vw + 1rem, 2.5rem);          /* 24px -> 40px */
    --border-radius-l:    clamp(1rem, 1.5vw + 0.5rem, 1.5rem);        /* 16px -> 24px */
    --border-radius-m:    clamp(0.75rem, 0.8vw + 0.5rem, 1rem);       /* 12px -> 16px */
    --border-radius-s:    clamp(0.5rem, 0.5vw + 0.3rem, 0.75rem);     /* 8px -> 12px */
    --border-radius-xs:   clamp(0.25rem, 0.2vw + 0.2rem, 0.375rem);   /* 4px -> 6px */
    --border-radius-xxs:  clamp(0.125rem, 0.1vw + 0.1rem, 0.1875rem); /* 2px -> 3px */
    --border-radius-none: 0;
/* Wielkości tekstu w przyciskach (Button Text) */
/* 1.15rem (~18.4px) -> Skalowanie do ok. 20px na dużych ekranach */
    --button-text-l:  clamp(1.05rem, 0.5vw + 1rem, 1.15rem); 
/* 1rem (16px) -> Standard, bez zmian lub minimalny wzrost */
    --button-text-m:  1rem; 
/* 0.875rem (14px) -> Małe przyciski / Mobile */
    --button-text-s:  0.875rem; 

/*
    zrób sekcje dla nagłówka i stopki


    --border-radius-full: 999px
    --icon-m:
    
    --bottom-text-m: 
    
    */
    
}   /* Koniec root */

.section-xxl {
    padding-top: var(--sektion-xxl) !important;
    padding-bottom: var(--sektion-xxl) !important;
    padding-left: var(--section-side) !important;
    padding-right: var(--section-side) !important;
}
.section-xl {
    padding-top: var(--sektion-xl);
    padding-bottom: var(--sektion-xl);
    padding-left: var(--section-side) !important;
    padding-right: var(--section-side) !important;
}
.section-l {
    padding-top: var(--sektion-l);
    padding-bottom: var(--sektion-l);
    padding-left: var(--section-side) !important;
    padding-right: var(--section-side) !important;
}
.section-m {
    padding-top: var(--sektion-m);
    padding-bottom: var(--sektion-m);
    padding-left: var(--section-side) !important;
    padding-right: var(--section-side) !important;
}
.section-s {
    padding-top: var(--sektion-s);
    padding-bottom: var(--sektion-s);
    padding-left: var(--section-side) !important;
    padding-right: var(--section-side) !important;
}
.section-xs {
    padding-top: var(--sektion-xs);
    padding-bottom: var(--sektion-xs);
    padding-left: var(--section-side) !important;
    padding-right: var(--section-side) !important;
}
.section-xxs {
    padding-top: var(--sektion-xxs);
    padding-bottom: var(--sektion-xxs);
    padding-left: var(--section-side) !important;
    padding-right: var(--section-side) !important;
}
/* Full Width Sections - No Side Padding */
.section-full div {
    max-width: 100% !important;
}
/* Narrow Sections */
.section-narrow .e-con-inner {
    max-width: var(--section-narrow)!important;
}
.section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs)!important;
}
/* Offset Padding for Overlay Headers */
.section-offset {
    padding-top: var(--section-offset-header);
}
/* GAP -> space-xxl*/
.gap-xxl {
    gap: var(--space-xxl);
}
.gap-xl {
    gap: var(--space-xl);
}
.gap-l {
    gap: var(--space-l);
}
.gap-m {
    gap: var(--space-m) !important;
}
.gap-s {
    gap: var(--space-s);
}
.gap-xs {
    gap: var(--space-xs);
}
.gap-xxs {
    gap: var(--space-xxs);
}
.gap-none {
    gap: var(--space-none);
}
/* Klasy dla zaokrągleń krawędzi */
.br-none { 
    border-radius: var(--border-radius-none) !important; 
}
.br-xxs { 
    border-radius: var(--border-radius-xxs); 
}
.br-xs { 
    border-radius: var(--border-radius-xs); 
}
.br-s { 
    border-radius: var(--border-radius-s); 
}
.br-m { 
    border-radius: var(--border-radius-m); 
}

.br-l { 
    border-radius: var(--border-radius-l); 
}
.br-xl { 
    border-radius: var(--border-radius-xl); 
}
.br-xxl { 
    border-radius: var(--border-radius-xxl); 
}
/* Opcjonalnie: klasa dla pełnego zaokrąglenia (pigułka/koło) */
.br-full { 
    border-radius: var(--border-radius-full); 
}