.elementor-kit-5{--e-global-color-primary:#F4F4F4;--e-global-color-secondary:#000000;--e-global-color-text:#020202;--e-global-color-accent:#FBD64E;--e-global-color-914319b:#393939;--e-global-color-6c65e65:#FFD34D;--e-global-color-da4875d:#F4F4F4;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-size:36px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Plus Jakarta Sans";--e-global-typography-accent-font-weight:500;background-color:#F4F4F4;color:#020202;font-family:"Plus Jakarta Sans", Sans-serif;font-size:18px;font-weight:400;line-height:1.75px;--e-page-transition-entrance-animation:e-page-transition-fade-out-right;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-accent );}.elementor-kit-5 p{margin-block-end:0px;}.elementor-kit-5 a{color:var( --e-global-color-secondary );font-family:"Plus Jakarta Sans", Sans-serif;font-size:20px;font-weight:500;}.elementor-kit-5 h1{font-family:"Plus Jakarta Sans", Sans-serif;font-size:64px;font-weight:600;line-height:1.06px;}.elementor-kit-5 h2{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-5 h3{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-5 h4{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-5 h5{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-kit-5 h6{font-family:"Plus Jakarta Sans", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:80rem;}.e-con{--container-max-width:80rem;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:1.5rem;}.elementor-element{--widgets-spacing:1.5rem 1.5rem;--widgets-spacing-row:1.5rem;--widgets-spacing-column:1.5rem;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1440px){.e-con{--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:1024px){.elementor-kit-5{font-size:17px;}.elementor-kit-5 h1{font-size:36px;line-height:1.06em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:767px){.elementor-kit-5{font-size:16px;line-height:1.75em;letter-spacing:0em;word-spacing:0em;}.elementor-kit-5 h1{font-size:28px;line-height:1.06em;letter-spacing:-0.02em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}/* Start custom CSS */body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root{
  --kairyo-font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* GLOBAL TOKENS (radius) */
:root{
  --border-radius-xxs: .1875rem; /* 3px */
  --border-radius-xs:  .25rem;   /* 4px */
  --border-radius-s:   .375rem;  /* 6px */
  --border-radius-m:   .5rem;    /* 8px */
  --border-radius-l:   .625rem;  /* 10px */

  /* opcjonalnie */
  --border-radius-pill: 999px;   /* “pigułka” */
}
/* =========================================================
   KAIRYO TYPO — tylko Elementor Heading widget
   (klasę dodajesz na widżecie Nagłówek: Zaawansowane → Klasy CSS)
   Breakpointy:
   - Mobile: max 767
   - Tablet portrait: 768–1024
   - Laptop/MacBook: 1025–1440
   - Duże ekrany: 1441+
========================================================= */

/* HERO */
html body .elementor .kairyo-font-hero .elementor-heading-title{
  font-weight: 600 !important;
  letter-spacing: -0.1vw !important;
  line-height: 1.125 !important;
}

/* H1 */
html body .elementor .kairyo-h1 .elementor-heading-title{
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* H2 */
html body .elementor .kairyo-h2 .elementor-heading-title{
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* BODY (też jako Heading) */
html body .elementor .kairyo-body .elementor-heading-title{
  font-weight: 400 !important;
  line-height: 1.6rem !important; /* wymagane */
}

/* DODATKOWE */
html body .elementor .kairyo-dodatkowe .elementor-heading-title{
  font-weight: 900 !important;
  line-height: 1.75rem !important;
  letter-spacing: 0.02em !important; /* poprawione z 0,02em */
}

/* DODATKOWE-2 */
html body .elementor .kairyo-dodatkowe-2 .elementor-heading-title{
  font-weight: 400 !important;
  line-height: 1.75rem !important;
  letter-spacing: 0.02em !important; /* poprawione z 0,02em */
}

/* =========================
   ROZMIARY — breakpointy
========================= */

/* Mobile */
@media (max-width: 767px){
  html body .elementor .kairyo-font-hero .elementor-heading-title{ font-size: 44px !important; }
  html body .elementor .kairyo-h1 .elementor-heading-title{ font-size: 34px !important; }
  html body .elementor .kairyo-h2 .elementor-heading-title{ font-size: 18px !important; }
  html body .elementor .kairyo-body .elementor-heading-title{ font-size: 16px !important; }
  html body .elementor .kairyo-dodatkowe .elementor-heading-title{ font-size: 17px !important; }
  html body .elementor .kairyo-dodatkowe-2 .elementor-heading-title{ font-size: 16px !important; }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1024px){
  html body .elementor .kairyo-font-hero .elementor-heading-title{ font-size: 64px !important; }
  html body .elementor .kairyo-h1 .elementor-heading-title{ font-size: 54px !important; }
  html body .elementor .kairyo-h2 .elementor-heading-title{ font-size: 22px !important; }
  html body .elementor .kairyo-body .elementor-heading-title{ font-size: 17px !important; }
  html body .elementor .kairyo-dodatkowe .elementor-heading-title{ font-size: 18px !important; }
  html body .elementor .kairyo-dodatkowe-2 .elementor-heading-title{ font-size: 17px !important; }
}

/* Laptop / MacBook */
@media (min-width: 1025px) and (max-width: 1440px){
  html body .elementor .kairyo-font-hero .elementor-heading-title{ font-size: 91px !important; }
  html body .elementor .kairyo-h1 .elementor-heading-title{ font-size: 56px !important; }
  html body .elementor .kairyo-h2 .elementor-heading-title{ font-size: 28px !important; }
  html body .elementor .kairyo-body .elementor-heading-title{ font-size: 18px !important; }
  html body .elementor .kairyo-dodatkowe .elementor-heading-title{ font-size: 20px !important; }
  html body .elementor .kairyo-dodatkowe-2 .elementor-heading-title{ font-size: 18px !important; }
}

/* Duże ekrany */
@media (min-width: 1441px){
  html body .elementor .kairyo-font-hero .elementor-heading-title{ font-size: 99px !important; }
  html body .elementor .kairyo-h1 .elementor-heading-title{ font-size: 61px !important; }
  html body .elementor .kairyo-h2 .elementor-heading-title{ font-size: 31px !important; }
  html body .elementor .kairyo-body .elementor-heading-title{ font-size: 18px !important; }
  html body .elementor .kairyo-dodatkowe .elementor-heading-title{ font-size: 20px !important; }
  html body .elementor .kairyo-dodatkowe-2 .elementor-heading-title{ font-size: 18px !important; }
}
/* "do" ma wyglądać jak kairyo-h2 */
html body .elementor .do .elementor-heading-title{
  font-weight: 500 !important;
  line-height: 1.6 !important;
  white-space: nowrap;
}

/* rozmiary jak kairyo-h2 */
@media (max-width: 767px){
  html body .elementor .do .elementor-heading-title{ font-size: 18px !important; }
}
@media (min-width: 768px) and (max-width: 1024px){
  html body .elementor .do .elementor-heading-title{ font-size: 22px !important; }
}
@media (min-width: 1025px) and (max-width: 1440px){
  html body .elementor .do .elementor-heading-title{ font-size: 28px !important; }
}
@media (min-width: 1441px){
  html body .elementor .do .elementor-heading-title{ font-size: 31px !important; }
}


/* =========================================================
   GLASS SETTINGS (tu Pan reguluje efekt)
   ========================================================= */
:root{
  --glass-blur: 5px;
  --glass-sat: 180%;

  /* szkło "jasne" (gdy pod spodem jest CIEMNO) */
  --glass-light-bg: rgba(244, 244, 244, 1);
  --glass-light-border: rgba(255, 255, 255, 0.45);

  /* szkło "ciemne" (gdy pod spodem jest JASNO) */
  --glass-dark-bg: rgba(0, 0, 0, 0.95);
  --glass-dark-border: rgba(255, 255, 255, 0.12);

  --glass-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* =========================================================
   1) HEADER UI – glassmorphism + kolor bazowy
   ========================================================= */
.kairyo-header-ui {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow);
}

/* wymuś dziedziczenie koloru w środku paska (Elementor lubi nadpisywać) */
.kairyo-header-ui,
.kairyo-header-ui a,
.kairyo-header-ui .elementor-icon,
.kairyo-header-ui .elementor-button,
.kairyo-header-ui .elementor-menu-toggle,
.kairyo-header-ui .elementor-nav-menu a{
  color: inherit !important;
}

/* ===== gdy pod headerem CIEMNO -> szkło jasne + tekst czarny ===== */
.kairyo-header.is-on-dark .kairyo-header-ui,
.kairyo-header-mobile.is-on-dark .kairyo-header-ui{
  background: var(--glass-light-bg) !important;
  border: 1px solid var(--glass-light-border) !important;
  color: #000000 !important;
}

/* ===== gdy pod headerem JASNO -> szkło ciemne + tekst jasny ===== */
.kairyo-header.is-on-light .kairyo-header-ui,
.kairyo-header-mobile.is-on-light .kairyo-header-ui{
  background: var(--glass-dark-bg) !important;
  border: 1px solid var(--glass-dark-border) !important;
  color: #f4f4f4 !important;
}

/* ===== fallback: jeśli kairyo-header-ui jest na tym samym elemencie co kairyo-header ===== */
.kairyo-header.kairyo-header-ui.is-on-dark,
.kairyo-header-mobile.kairyo-header-ui.is-on-dark{
  background: var(--glass-light-bg) !important;
  border: 1px solid var(--glass-light-border) !important;
  color: #000000 !important;
}
.kairyo-header.kairyo-header-ui.is-on-light,
.kairyo-header-mobile.kairyo-header-ui.is-on-light{
  background: var(--glass-dark-bg) !important;
  border: 1px solid var(--glass-dark-border) !important;
  color: #f4f4f4 !important;
}


/* =========================================================
   2) ELEMENTOR – "młot" na kolory napisów (menu/ikony/hover)
   ========================================================= */
.kairyo-header-ui *{
  color: inherit !important;
}

.kairyo-header-ui .elementor-nav-menu a,
.kairyo-header-ui .elementor-nav-menu--main .elementor-item,
.kairyo-header-ui .elementor-nav-menu--dropdown .elementor-item{
  color: inherit !important;
}

.kairyo-header-ui .elementor-nav-menu a:hover,
.kairyo-header-ui .elementor-nav-menu--main .elementor-item:hover,
.kairyo-header-ui .elementor-nav-menu--main .elementor-item.elementor-item-active,
.kairyo-header-ui .elementor-nav-menu--main .elementor-item:focus{
  color: inherit !important;
}

.kairyo-header-ui .elementor-icon,
.kairyo-header-ui .elementor-menu-toggle{
  color: inherit !important;
}

.kairyo-header-ui svg,
.kairyo-header-ui svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* =========================================================
   3) LOGO SWITCH – żeby nie było widać dwóch naraz
   WYMAGANE KLASY w Elementorze:
   - rodzic (kontener/kolumna gdzie są oba loga): kairyo-logo-area
   - widget Image z czarnym logo: kairyo-logo--dark
   - widget Image z białym logo:  kairyo-logo--light
   ========================================================= */
.kairyo-logo-area{
  position: relative;
  display: inline-block;
}

.kairyo-logo-area .kairyo-logo--dark,
.kairyo-logo-area .kairyo-logo--light{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* "baza" rozmiaru – jedno logo zostaje w normalnym flow */
.kairyo-logo-area .kairyo-logo--dark{
  position: relative !important;
}

/* ciemne tło pod spodem -> jasny header -> czarne logo */
.kairyo-header.is-on-dark .kairyo-logo-area .kairyo-logo--dark,
.kairyo-header-mobile.is-on-dark .kairyo-logo-area .kairyo-logo--dark{ opacity: 1 !important; }

.kairyo-header.is-on-dark .kairyo-logo-area .kairyo-logo--light,
.kairyo-header-mobile.is-on-dark .kairyo-logo-area .kairyo-logo--light{ opacity: 0 !important; }

/* jasne tło pod spodem -> ciemny header -> białe logo */
.kairyo-header.is-on-light .kairyo-logo-area .kairyo-logo--dark,
.kairyo-header-mobile.is-on-light .kairyo-logo-area .kairyo-logo--dark{ opacity: 0 !important; }

.kairyo-header.is-on-light .kairyo-logo-area .kairyo-logo--light,
.kairyo-header-mobile.is-on-light .kairyo-logo-area .kairyo-logo--light{ opacity: 1 !important; }

/* fallback zanim JS przełączy klasę */
.kairyo-logo-area .kairyo-logo--light{ opacity: 1 !important; }

/* ===== WYJĄTEK: CTA ma własne kolory, nie dziedziczy z headera ===== */
.kairyo-header-ui .kairyo-cta,
.kairyo-header-ui .kairyo-cta *{
  color: unset !important; /* zdejmuje "inherit" z młota */
}

/* ustawiamy czytelność tekstu na żółtym zawsze na czarno */
.kairyo-header-ui .kairyo-cta{
  --text:#000 !important;
}

.kairyo-header-ui .kairyo-cta .kairyo-cta__back{ color:#111 !important; }
.kairyo-header-ui .kairyo-cta .kairyo-cta__front{ color:var(--text) !important; }

/* strzałka też czarna */
.kairyo-header-ui .kairyo-cta .kairyo-cta__arrow path{
  stroke: var(--text) !important;
}

.highlight-text {
  background: linear-gradient(120deg, 
#fbd64e 0%, 
#f5a623 50%, 
#fbd64e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: url(#grain-filter);
}

.highlight-text-2 {
  color: #fbd64e;
}

/* Szybsza animacja otwierania i zamykania */
.elementor-kit-5 .e-off-canvas__main {
    animation-duration: 0.2s !important;
}

/* Overlay też szybciej */
.elementor-kit-5 .e-off-canvas__overlay {
    animation-duration: 0.2s !important;
}/* End custom CSS */