:root{
  /* wymiary i kolory bazowe */
  --maxw: 1500px;
  --primary: #138ec1;              /* zachowuję kolor z ostatniego :root */
  --text: #272727;
  --muted: #6f6f6f;
  --divider: #eef1f4;

  /* topbar */
  --topbar-h: 74px;                 /* wysokość do scroll-padding */
  --topbar-pad-large: 70px;         /* padding topbar START */
  --topbar-pad-small: 20px 18px;         /* padding po scrollu */

  /* spacing i linki */
  --gap: clamp(10px, 2vw, 28px);
  --link-color: #ccc;            /* start – przezroczyste tło */
  --link-color-scrolled: #1c1f22;   /* po scrollu */

  /* CTA */
  --cta-blue: #1f86c1;
}

@media (max-width: 1200px){
  :root{ --topbar-pad-large: 50px; }
}
@media (max-width: 768px){
  :root{ --topbar-pad-large: 30px; }
}


    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      line-height: 1.45;
      background:#fff;
        scroll-padding-top: var(--topbar-h);

    }
a {color: #00AEEF;text-decoration: none;font-weight: 300;}




/* 11) najwyższa warstwa + przyklejenie */
.topbar{
  position: fixed;
  z-index: 9999;
  inset: 0 0 auto 0;
  background: transparent;                 /* 5) tło przejrzyste na starcie */
  padding-block: var(--topbar-pad-large);  /* 4) 70px na starcie */
  transition: background-color .35s ease,
              box-shadow .35s ease,
              padding .35s ease,
              transform .25s ease;
  will-change: background-color, box-shadow, padding;
  max-width: 1920px;
  margin: auto;
}
.topbar.scrolled {
 
  background: linear-gradient(
    to right,
    #ffffffbb 0%,
    #ffffffbb 75%,
    #fff 85%,
    #fff 100%
  );
  border-bottom: 1px solid #ffffffc1;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
  padding-block: var(--topbar-pad-small);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

}


.topbar.scrolled::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #ffffffc8 0%,
    #ffffffc8 75%,
    #fff 85%,
    #fff 100%
  );
  opacity: 0; /* na start niewidoczna */
  transition: opacity 0.75s ease;
  pointer-events: none; /* nie blokuje kliknięć */
  z-index: -1; /* warstwa pod zawartością topbara */
}

.topbar.scrolled:hover::before {
  opacity: 1; /* płynne rozjaśnienie */
  background: #fff;
}

/* 1–3) szerokość 1500, lewa strona: logo+menu, button trzyma prawą */
.topbar__inner{
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* logo i menu do lewej */
  gap: var(--gap);
  padding: 0 clamp(20px, 3vw, 28px);
}
.topbar__nav{ margin-left: clamp(16px, 2vw, 32px); }
.topbar__cta{ margin-left: auto; }         /* button do prawej */

/* LOGO */
.topbar__logo img{
  display: block;
  height: 38px;
  width: auto;
  object-fit: contain;
  transition: filter .35s ease, opacity .35s ease;
}
@media (max-width: 768px){
.topbar__logo img{height:26px;transition: height .3s ease, filter .3s ease;}

}

/* 6) logo staje się ciemno-szare po scrollu */
.topbar.scrolled .topbar__logo img{
  filter: saturate(0) brightness(.18) contrast(1.05);
  height: 26px;
}
@media (max-width: 428px){.topbar.scrolled .topbar__logo img{
height: 22px;}}

/* MENU */
.topbar__links{
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 42px);    /* 8) odstępy maleją wraz z szerokością */
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.topbar__link{
  display: block;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--link-color);
  padding: 6px 5px;border-bottom: 2px solid transparent;
-webkit-transition: all .25s;
    transition: all .25s;  text-transform: uppercase;
        font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        font-size: 12.8px;
}
.topbar.scrolled .topbar__link{ color: var(--link-color-scrolled); }
.topbar.scrolled .topbar__link:hover {color: #1f86c1;border-bottom: 2px solid #1f86c14f;}

.topbar__link:hover{border-bottom: 2px solid #fff6;color: #fff;
    text-shadow: 0 0 15px #ffffffb0;}

/* === CTA button w topbar — własny styl === */
.topbar__cta{
  margin-left: auto;                  /* zawsze po prawej */
  display: inline-block;
  background: #fff;                 /* niebieski z projektu */
  color: #1f86c1;
  font-weight: 700;
  padding: 14px 44px;
  border-radius: 30px;
  border: 1px solid #fff;
  cursor: pointer;
  font-size: 11.8px;
  letter-spacing: 1.8px;
  transition: all .3s ease;
  text-decoration: none;
  text-transform: uppercase;
}
.topbar.scrolled .topbar__cta{color: #1f86c1;border: 1px solid #1f86c1;}
.topbar.scrolled .topbar__cta:hover {color: #fff;background: #1f86c1;border: 1px solid #1f86c1;}
@media (max-width: 768px){
  .topbar__cta {
    margin-left: auto;
    background: #fff;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 60px;
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 10px;
    letter-spacing: 1.8px;
    transition: all .3s ease;
    text-decoration: none;
    text-transform: uppercase;
  }

  .topbar.scrolled .topbar__cta {     /* + dodać */
    display: inline-block;
  }
}

.topbar__cta:hover{
   box-shadow: 0 0 16px #ffffff9c;
}





/* 9) na małych ekranach chowamy listę linków, CTA zostaje */
@media (max-width: 1020px){
  .topbar__links{ gap: clamp(8px, 1.8vw, 20px); }
}
@media (max-width: 1059px){
  .topbar__links{ display: none; }
}

/* delikatny margines startowy pod paskiem (jeśli pierwszy element “przykleja się” do góry) */
body > .slider:first-child,
body > section:first-child{ margin-top: var(--topbar-h); }




/*slider strona glowna*/
* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Poppins', sans-serif;
    }
    .slider {
      position: relative;
      overflow: hidden;
      max-width: 1920px;
      width: 100%;
      margin: 0 auto;
      height: auto;
    }
    .slides {
      display: flex;
      transition: transform 1s ease;
    }
    .slide {
      min-width: 100%;
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      height: auto;
      aspect-ratio: 16 / 8.8;
      position: relative;
    }
    .slide1 {background-image: url('i/banner.webp');}
    .slide2 {background-image: url('i/banner.webp');}
    .slide3 {background-image: url('i/banner.webp');}
    .shade {width: 100%;
  position: absolute;
  height: 30%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
  z-index: 4;
  bottom: 0;
  left: 0;
  right: 0;display: none;
   }

    .slide-inner {
      width: 100%;
      max-width: 1580px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
    }
    .slide-content {
      max-width: 660px;
      color: white;
      margin-top: 3%;
    }
    .slideh1 {
      font-size: .82em;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 0;
      letter-spacing: 2.5px;
      color: #fff;
      text-transform: uppercase;
    }
        .slideh2 {
      font-size: 3.8em;
      font-weight: 300;
      line-height: 1.1;
      margin-bottom: 20px;
      letter-spacing: -.4px;
    }

        .slidep {
font-size: 1.05em;
  font-weight: 300;
  line-height: 27px;
  margin-bottom: 55px;
  letter-spacing: .2px;
  max-width: 580px;
  color: #aaa;
    }
    .slide-hr {width: 100%;
    border-top: 1px solid #00000015;
border-bottom: 1px solid #ffffff15;
  margin-bottom: 45px;
}
@media (max-width: 768px){
   .slidep {color: #fff;
}}

/* upewnij się, że kontener jest kotwicą dla pozycji absolutnej */
.slide-inner{ position: relative; }

/* treść nad grafiką */
.slide-content{ position: relative; z-index: 2; }

/* --- Wraper trzyma pozycję oraz Z-index --- */
.slide-laptop-wrap{
  position: absolute;
  right: -3%;
  bottom: 8%;
  width: 51%;
  z-index: 1;                 /* tekst ma mieć wyższy z-index (np. 2) */
  pointer-events: none;
  /* animacje wrapera = ruch laptopa */
  animation: s24-float 7s ease-in-out infinite, s24-sway 9s ease-in-out infinite;
  transform-origin: 50% 90%;
}


/* --- Wraper: TYLKO pozycja i rozmiar, BEZ animacji --- */
.slide-laptop-wrap{
  position: absolute;
  right: -3%;
  bottom: 8%;
  width: 51%;
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 90%;
}

/* Obrazek – dostaje animacje ruchu (unoszenie + kołysanie) */
.slide-laptop{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  animation: s24-float-img 7s ease-in-out infinite, s24-sway 9s ease-in-out infinite;
  transform-origin: 50% 90%;
}

/* Cień: elipsa pod laptopem – NIE porusza się, tylko zmienia opacity/scale */
.slide-laptop-shadow{
  position: absolute;
  left: 45%;
  bottom: -7%;
  width: 100%;
  height: clamp(22px, 5vw, 64px);
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 0; /* pod obrazkiem */
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(0,0,0,0.30) 0%,
              rgba(0,0,0,0.24) 40%,
              rgba(0,0,0,0.00) 75%);
  filter: blur(6px);
  opacity: .26;
  animation: s24-shadow 7s ease-in-out infinite; /* ten sam czas co float */
}

/* Tylko od 768 px */
@media (max-width: 767.98px){
  .slide-laptop-wrap{ display: none; }
}

/* --- NOWE: Unoszenie obrazu o 30px (było 12px +18px) --- 
@keyframes s24-float-img{
  0%   { transform: translateY(0)     rotateZ(0deg); }
  50%  { transform: translateY(-20px) rotateZ(0deg); }
  100% { transform: translateY(0)     rotateZ(0deg); }
}

/* Kołysanie bez zmian 
@keyframes s24-sway{
  0%   { transform: translateY(0)     rotateZ(0deg); }
  25%  { transform: translateY(-6px)  rotateZ(-0.5deg); }
  50%  { transform: translateY(-12px) rotateZ(0deg); }
  75%  { transform: translateY(-6px)  rotateZ(-0.5deg); }
  100% { transform: translateY(0)     rotateZ(0deg); }
}

/* Cień: jaśniejszy „w górze”, ciemniejszy „na dole” – BEZ przesuwania 
@keyframes s24-shadow{
  0%   { opacity: .40; transform: translateX(-50%) scale(1.00, 1.00); }
  50%  { opacity: .24; transform: translateX(-50%) scale(1.10, 1.08); }
  100% { opacity: .40; transform: translateX(-50%) scale(1.00, 1.00); }
}




/* Glass-style button */
a.button {
  position: relative;
  margin: 0;
  background:#0388d5;
  color: #fff;
  font-weight: 700;
  padding: 14px 44px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.35); /* delikatna obwódka */
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1.8px;
  transition: all .3s ease;
  overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;

  /* efekt rozmycia tła */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* hover – lekko mocniejsze tło + glow */
a.button:hover {
border-top: 1px solid rgba(255,255,255,0.45);
  border-left: 1px solid rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  border-right: 1px solid rgba(255,255,255,0.2);
  background: #fff;
  color: #1f86c1;
  box-shadow: 0 0 15px #ffffffb0;
}

.slide a.secondary-link {
  display: inline-block;
  margin-top: 15px;
  margin-left: 55px;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-decoration: none;
  transition: all .3s ease;
    text-transform: uppercase;

}

.slide a.mobile-link {
 display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 21px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-decoration: none;
  transition: all .3s ease;
  margin-left: 0;}

  .slide a.mobile-link:hover {border-top: 1px solid rgba(255,255,255,0.45);
  border-left: 1px solid rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  border-right: 1px solid rgba(255,255,255,0.2);
  background: rgba(255, 255, 255, 0.2);box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);}
@media (min-width: 576px){
  .slide a.mobile-link {display: none;}
}
/*@media (max-width: 768px) {
.slide-hr, .slide a.secondary-link {display: none !important;}
.slideh2 {line-height: 1.3;text-shadow: 1px 1px 4px #0005;font-size: 2.2em;margin-bottom: 16px;}
.slidep {text-shadow: 1px 1px 4px #0005;line-height: 23px;
  margin-bottom: 50px;}
}*/

/* BŁYSK */

    .slide a.secondary-link {
      display: inline-block;
      margin-top: 15px;
      margin-left: 55px;
      color: white;
      font-weight: 700;
        font-size: 11px;
  letter-spacing: 1.8px;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .slide a.secondary-link:hover {text-shadow: 0 0 3px #fff;}
    .slider-nav {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 9px;
    }
    .slider-dot {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.7);
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .slider-dot:hover {
      background: white;
    }
    .slider-dot.active {
      width: 22px;
      box-shadow: 0 0 8px #1f86c1;
      background: white;
    }

    /* ———————————————————————————————
   Warstwa przyciemnienia pod tekst (działa w każdym widoku)
   ——————————————————————————————— */
.slide .shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  /* delikatny gradient z lewej (pod tekst) -> w prawo */
  background: linear-gradient(90deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.28) 36%,
    rgba(0,0,0,0) 65%);
}



/* 992–1199 px (małe laptopy / tablet poziomo) */
@media (max-width: 1659px){
  .slide-inner{
    max-width: 1280px;
    padding: 0 28px;
  }
.slideh1 {font-size: 0.65em;margin-bottom: 4px;}
  .slideh2{ font-size: 2.75em; }
  .slidep{ max-width: 550px; font-size: 0.95em;}
  
}

/* 768–991 px (tablet – punkt zwrotny) */
@media (max-width: 991px){


  .slideh2{ font-size: 2.35em; }
  .slidep{
    font-size: .98em;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  .slide-hr{
    max-width: 360px;
    margin: 26px auto 34px;
  }
  .slide a.secondary-link{
    margin-left: 24px; /* bliżej przycisku */
  }
  .slide .shade{
    background: linear-gradient(180deg,
      rgba(0,0,0,.40) 0%,
      rgba(0,0,0,.22) 45%,
      rgba(0,0,0,0) 100%);
  }
}

/* 576–767 px (duże telefony / małe tablety) */
@media (max-width: 580px){
  .slide{ aspect-ratio: 3 / 4; }
  .slide-inner{ padding: 0 22px; }
  .slide-content{ max-width: 520px; gap: 10px; width: 90%;margin: 22% auto 0;
    text-shadow: 1px 1px 4px #000000a3;
    text-align: center;}
  .slideh1{ font-size: .6em; }
  .slideh2{ font-size: 2.05em; }
  .slidep{
    font-size: .96em;
    line-height: 1.55;
    max-width: 36ch;
    margin-left: 0;
  }
  .slide-hr{
    max-width: 320px;
    margin: 40px auto 25px;
  }
  /* link pod przyciskiem, bez dużego lewego marginesu */
  .slide a.secondary-link{
    display: block;
    margin: 12px auto 0;
    text-align: center;
  }
  .slide .shade{
    background: linear-gradient(180deg,
      rgba(0,0,0,.48) 0%,
      rgba(0,0,0,.25) 40%,
      rgba(0,0,0,0) 100%);
  }
}

/* ≤ 575 px (małe telefony) */
@media (max-width: 575px){
  .slide{ aspect-ratio: 10 / 16; }
  .slide-inner{ padding: 0 18px; }
  .slideh1{text-align: center;}
  .slideh2{text-align: center;
    font-size: 1.98em;
    letter-spacing: -.2px;
    margin: 5px 0 23px 0;
  }
  .slidep{font-weight: 300;text-align: center;
    font-size: .72em;
    max-width: 32ch;
      position: relative; /* potrzebne dla ::after */
    z-index: 1;
    padding:  0;
    text-shadow: 1px 1px 4px #000000ef;
    margin: auto;
    
  }
  .slidep::after {
    content: "";
    position: absolute;
    inset: 0;
   /* background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 95%, rgba(0,0,0,0) 100%);*/
    backdrop-filter: blur(1px);         /* rozmycie tła */
    -webkit-backdrop-filter: blur(1px); /* Safari */
    pointer-events: none;               /* żeby tekst był klikalny */
    z-index: -1;                        /* nakładka za tekstem */
  }
/* ROTATOR 2-częściowy */
.slidep{ position:relative; display:block; overflow:hidden; }
.slidep .rotator__part{
  position:absolute; inset:0; opacity:0;
  transition:opacity .5s ease; will-change:opacity;
  display:block;
}
.slidep .rotator__part.-on{ opacity:1; }




  a.button{text-shadow: none;
background: #17191b;
  color: #fff;
  font: 600 11.2px/1 'Poppins', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 27px 14px 37px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
  margin: 180px auto 20px;
  text-decoration: none;
  border: 0;
  display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 8px #0000001c;
}
  .slide a.secondary-link{
    margin: 12px auto 0;
    display: none;
  }
  .slide .shade{
    background: linear-gradient(180deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.32) 46%,
      rgba(0,0,0,0) 100%);
  }
}

@media (max-width: 380px) {
  .slideh2 {
    text-align: center;
    font-size: 1.58em;
    letter-spacing: -.2px;
    margin: 5px 0 15px 0;
  }
}

/* Wideo jako tło w slajdzie */
.slide video.slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 940px;
  object-fit: cover;
  z-index: 0;
  filter: saturate(88%)brightness(130%)grayscale(30%);
}
/* --- precyzyjna kontrola wysokości tła wideo w bannerze --- */
@media (min-width:640px){ .slide video.slide-bg{height:530px;} }
@media (min-width:768px){ .slide video.slide-bg{height:530px;} }
@media (min-width:800px){ .slide video.slide-bg{height:570px;} }
@media (min-width:1024px){ .slide video.slide-bg{height:630px;} }
@media (min-width:1150px){ .slide video.slide-bg{height:600px;} }
@media (min-width:1240px){ .slide video.slide-bg{height:630px;} }
@media (min-width:1320px){ .slide video.slide-bg{height:660px;} }
@media (min-width:1400px){ .slide video.slide-bg{height:710px;} }
@media (min-width:1480px){ .slide video.slide-bg{height:740px;} }
@media (min-width:1560px){ .slide video.slide-bg{height:760px;} }
@media (min-width:1640px){ .slide video.slide-bg{height:830px;} }
@media (min-width:1720px){ .slide video.slide-bg{height:830px;} }
@media (min-width:1800px){ .slide video.slide-bg{height:870px;} }
@media (min-width:1920px){ .slide video.slide-bg{height:900px;} }

@media (min-width:640px){ .slide-laptop-wrap{ right:-7%; bottom: 8%; width:54%; } }
@media (min-width:768px){ .slide-laptop-wrap{ right:-7%; bottom: 8%; width:54%; } }
@media (min-width:800px){ .slide-laptop-wrap{ right:-7%; bottom: 8%; width:54%; } }
@media (min-width:1024px){ .slide-laptop-wrap{ right:-3%; bottom: 0; width:52%; } }
@media (min-width:1150px){ .slide-laptop-wrap{ right:-3%; bottom: 2%; width:47%; } }
@media (min-width:1240px){ .slide-laptop-wrap{ right:-3%; bottom: 3%; width:48%; } }
@media (min-width:1320px){ .slide-laptop-wrap{ right:-3%; bottom: 5%; width:50%; } }
@media (min-width:1400px){ .slide-laptop-wrap{ right:-3%; bottom: 5%; width:52%; } }
@media (min-width:1480px){ .slide-laptop-wrap{ right:-3%; bottom: 6%; width:51%; } }
@media (min-width:1560px){ .slide-laptop-wrap{ right:-3%; bottom: 6%; width:51%; } }
@media (min-width:1640px){ .slide-laptop-wrap{ right:-3%; bottom: 6.5%; width:51.2%; } }
@media (min-width:1720px){ .slide-laptop-wrap{ right:-3%; bottom: 6%; width:51.4%; } }
@media (min-width:1800px){ .slide-laptop-wrap{ right:-3%; bottom: 5%; width:51.6%; } }
@media (min-width:1920px){ .slide-laptop-wrap{ right:-3%; bottom: 8%; width:52%; } }


@media (min-width: 360px){ .slide{ aspect-ratio: 9 / 16; } }
@media (min-width: 390px){ .slide{ aspect-ratio: 9.6 / 16; } }
@media (min-width: 428px){ .slide{ aspect-ratio: 9 / 14; } }
@media (min-width: 576px){ .slide{ aspect-ratio: 9 / 10; } }
@media (min-width: 640px){ .slide{ aspect-ratio: 9 / 10; } }
@media (min-width: 720px){ .slide{ aspect-ratio: 14 / 11; } }
@media (min-width:860px){.slide{ aspect-ratio: 16 / 11; }}
@media (min-width:991px){.slide{ aspect-ratio: 4 / 2.5; }}
@media (min-width:1024px){ .slide{ aspect-ratio: 16 / 10.5; } }
@media (min-width:1150px){ .slide{ aspect-ratio: 16 / 9.2; } }
@media (min-width:1240px){ .slide{ aspect-ratio: 16 / 9.0; } }
@media (min-width:1320px){ .slide{ aspect-ratio: 16 / 9; } }
@media (min-width:1400px){ .slide{ aspect-ratio: 16 / 9.2; } }
@media (min-width:1480px){ .slide{ aspect-ratio: 16 / 9.1; } }
@media (min-width:1560px){ .slide{ aspect-ratio: 16 / 9; } }
@media (min-width:1640px){ .slide{ aspect-ratio: 16 / 9.2; } }
@media (min-width:1720px){ .slide{ aspect-ratio: 16 / 9; } }
@media (min-width:1800px){ .slide{ aspect-ratio: 16 / 8.8; } }
@media (min-width:1920px){ .slide{ aspect-ratio: 16 / 8.8; } }

@media (max-width:1400px){.slide-laptop-shadow{display: none;}.slide-laptop{filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));}}
@media (max-width:1240px){.slide-laptop{filter:none;}}
@media (max-width: 480px){ .topbar__logo img {height: 22px;}}
@media (max-width: 370px){ .topbar__cta{letter-spacing: .5px;padding: 8px 15px;}}

/* Tekst i warstwy nad wideo */
.slide .shade,
.slide-inner {
  position: relative;
  z-index: 1;
}

/* Mobile — wyłączamy film dla oszczędności danych */
@media (max-width: 767.98px){
  .slide video.slide-bg { display: none; }
}

/* ———————————————————————————————
   (Opcjonalnie) Lżejsze tła per breakpoint
   ——————————————————————————————— */
@media (max-width: 767px){  .slide1{ background-image:url('i/banner-tablet.webp'); } }
@media (max-width: 575px){  .slide1{ background-image:url('i/banner-640.webp'); } } 
@media (max-width: 428px){  .slide1{ background-image:url('i/banner-480.webp'); } } 



    .wrap{
      max-width: var(--maxw);
      margin: 0 auto;
      padding: clamp(20px, 3vw, 40px);
    }

    /* Sekcja hero */
    .hero{
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: clamp(16px, 4vw, 80px);
      align-items: center;
      padding-block: clamp(20px, 4vw, 40px);
      border-bottom: 1px solid var(--divider);
    }
    .hero > :first-child {
  max-width: 570px;
  text-align: left;
}

    /* Lewa kolumna */
    .eyebrow{
      font-weight: 800;
      font-size: clamp(12px, 1.5vw, 13px);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #6f6f6f;
      margin: 0 0 14px;
    }
    .title{
      font-size: clamp(24px, 2.6vw, 34px);
      font-weight: 700;
      margin: 0;
    }
    .title .accent{ color: var(--primary); }
    .lead{
      font-size: clamp(16px, 1.5vw, 20px);
      margin-top: 12px;
      font-weight: 600;
    }
/* Podstawowy wygląd */
.features{
  display: flex;
  justify-content: center;      /* wyśrodkowanie całości */
  gap: clamp(20px, 2.8vw, 48px);
  flex-wrap: nowrap;            /* NIE łamie do kolejnego wiersza */
}

.feature img{
  width: clamp(52px, 4.5vw, 70px);
  height: auto;
  display: block;
  margin: 0 auto 14px;
  opacity: .85;
  transform: scale(.9);
  transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}

/* Tekst domyślny */
.feature .label{cursor: default;
  font-size: 12px;
  line-height: 1.1;text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  transition: color .3s ease;
}

/* Hover: obrazek kolorowy + powiększony, etykieta na niebiesko */
.feature:hover img{
  filter: none;
  opacity: 1;
  transform: scale(1);
}
.feature:hover .label{
  color: var(--primary);
}




    /* Responsywność */
    @media (max-width: 1024px){
      .hero{ grid-template-columns: 1fr; }
      .features{ justify-items: start; }
    }
    @media (max-width: 720px){
      .features{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
      }
    }
    @media (max-width: 520px){
      .features{ grid-template-columns: 1fr; justify-items: center; }
    }



.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: /*clamp(20px,3vw,48px)*/ 0 0 50px;
}


/* Układ sekcji */
.why-fast{
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: clamp(28px,5vw,100px);
  align-items: center;
  padding-block: clamp(20px,5vw,60px);
  max-width: 1200px;
}

/* Film */
.media  {
  text-align: center;
  margin: auto;
}
.media video{
max-height: 600px;
  width: 100%;
  display: block;
  background: #fff;
}
    @media (max-width: 768px){

.media video {
  width: 70%;
  margin: 40px auto 20px;
}
}

/* Teksty */
.copy .eyebrow{
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}
.copy .title{
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight:800;
  line-height:1.25;
  margin:0 0 22px;
}
.copy .accent{ color:var(--primary); }
.copy p{
  margin: 0 0 16px;
  line-height:1.7;
  color:#3b3b3b;
}
.copy a{ color:var(--primary); text-underline-offset:2px; }

/* Responsywność */
@media (max-width: 960px){
  .why-fast{ grid-template-columns: 1fr; }
  .copy{ max-width: 720px; margin-inline:auto; }
}


/* wstęp opisów sekcji */
.opis {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  padding: 60px 0;
}

.opis .naglowek {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  margin: 0 auto 15px;
  letter-spacing: 1px;
}

.opis h2 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.4;
  color: #20211E;
  margin: 0 auto 25px;
  max-width: 740px;
}
h2 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 auto 25px;
  max-width: 740px;
}
h2 strong {color: #138ec1;}
@media (max-width: 768px) {
h2 strong {color: #20211E;}
}

.opis .accent {
  color: #00AEEF; /* niebieski */
  font-weight: 700;
}

.opis p {
  font-size: 17px;
  font-weight: 200;
  line-height: 1.9;
  color: #20211E;
    max-width: 800px;
      margin: 0 auto 25px;

}

.opis p strong {
  font-weight: 600;
}
@media (max-width: 768px) {
  .opis {
    padding: 20px 0;
  }

  .opis .naglowek {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .opis h2, h2 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 20px;
  }

  .opis p {
    font-size: 15.2px;font-weight: 300;
    line-height: 1.7;
  }
}

p{
  font-size: 17px;
  font-weight: 200;
  line-height: 1.9;
  color: #20211E;
      margin: 0 auto 25px;

}
 h3 {
font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
  margin: 20px auto 10px;
  letter-spacing: 1px;
}

@media (max-width: 960px){
  p {font-size: 17px;line-height: 1.9em;}
}

/* warianty */
#warianty {margin: 0 auto 60px;}
@media (max-width: 768px){
  #warianty {margin: 20px auto 35px;}
}

.warianty-wrapper {
  max-width: 1480px;
  margin: auto;
  padding: 0px 0 80px;
  position: relative;
  overflow-x: hidden;
}

.warianty-track-wrapper {
  overflow-x: auto;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 20px;   /* snap respektuje marginesy */
}

.warianty-track-wrapper::-webkit-scrollbar {
  display: none;                 /* Chrome/Safari */
}

.warianty-track{
  display:flex;
  gap:60px;
  position:relative;
  width:max-content;
  margin:0 auto;
}

.warianty-item{
  flex:0 0 auto;
  width:clamp(240px,22vw,460px);
  max-width:460px;
  padding:0 0 40px 0;
  scroll-snap-align: center;    /* centralne zatrzaskiwanie */
}

/* mobile: marginesy po bokach */
@media (max-width: 768px){
  .warianty-item:first-child { margin-left: 20px; }
  .warianty-item:last-child { margin-right: 20px; }
}

.warianty-image {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  margin: 0 0 20px;
}

.warianty-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.warianty-item:hover .warianty-image img {
  transform: scale(1.1);
}

.warianty-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.6;
  text-transform: uppercase;
  color: #111;
}


/* overlaye + czytelność (gradienty na tle zdjęcia) */
.warianty-image{position:relative;overflow:hidden;border-radius:25px;margin:0 0 20px;}
.warianty-image::before{content:"";position:absolute;left:0;right:0;top:0;height:36%;z-index:1;pointer-events:none;}
.warianty-image::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;}
.opis-top{position:absolute;left:20px;top:18px;z-index:2;color:#fff;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none;}
.warianty-item:last-of-type .opis-top {color: #231f20;text-shadow: none;}
.w-top{position:absolute;left:10%;top:12%;z-index:2;color:#fff;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none;}
.warianty-item:last-of-type .w-top {color: #231f20;text-shadow: none;}
.w-top h2 {text-transform: none;line-height: 32px;
  font-size: 25px;
  letter-spacing: 0;
  font-weight: 800;
  max-width: 350px;}

.w-link{position: absolute;
  left: 10%;
  bottom: 65px;
  z-index: 2;}
.w-link .butt {
  background: #fff;
  color: #111;
  font: 600 9.6px/1 'Poppins', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
margin-right: 20px;
text-decoration: none;  border: 1px solid rgba(255,255,255,0.25);}
@media (max-width:768px) {.w-link .butt {margin-right: 12px;}.w-link{left: 8%;}}
.w-link .butt:hover, .warianty-item:last-of-type .butt:hover {background: #1f86c1;color: #fff;box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);  border: 1px solid rgba(255,255,255,0.5);}
.warianty-item:last-of-type .butt {color: #fff;background: #231f20;}
.w-link .link {margin-top: 30px;
  color: #fff;
  font-weight: 400;
  font-size: 9.6px;
  text-decoration: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  text-transform: uppercase;
  letter-spacing: .5px;
 transition: all .5s ease;
  /* tło półprzezroczyste */
  background: rgba(255, 255, 255, 0.15); /* niebieski z przezroczystością */
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,0.25);

  /* GLASS efekt */
  backdrop-filter: blur(12px);            /* właściwe rozmycie */
  -webkit-backdrop-filter: blur(12px);    /* dla Safari */
}
.w-link .link:hover {border-top: 1px solid rgba(255,255,255,0.45);border-left: 1px solid rgba(255,255,255,0.45);border-bottom: 1px solid rgba(255,255,255,0.25);border-right: 1px solid rgba(255,255,255,0.2);  background: rgba(255, 255, 255, 0.2);}
.warianty-item:last-of-type .w-link {color: #231f20;text-shadow: none;}
@media (min-width:1024px)
{.w-top{font-size:12px;} 
.w-link{font-size:12px;}}
@media (max-width:768px) {
#warianty .opis {padding: 0 20px;}
}

/* === WARIANTY — layout 3 kafelków, gap „jak 5%”, centrum === */

/* track niech ma szer. kontenera, a nie width:max-content */
.warianty-track{
  width: 100%;
  max-width: 1500px;           /* spójnie z resztą layoutu */
  margin: 0 auto;              /* wyśrodkowanie */
  display: flex;
  justify-content: space-between;
  gap: clamp(24px, 2%, 80px);  /* elastyczny „%” bez obcinania */
}

/* karty: nie sztywna szerokość, tylko elastyczna z min/max
   – podobny rozmiar aż do ok. 1600 px */
.warianty-item{
  flex: 1 1 0;
  min-width: 332px;            /* żeby nie były za wąskie na desktopie */
  max-width: 520px;            /* górny limit – trzy spokojnie mieszczą się w 1500 */
  padding: 0 0 40px 0;
}
@media (max-width:768px){
.w-link {bottom: 48px;}
}

/* obrazek nadal wypełnia kartę */
.warianty-image img{ width:100%; height:auto; }

/* tytuł na karcie – elastyczna, „duża” czcionka */
.w-top h2{
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  max-width: 360px;
  font-size: clamp(22px, 1.8vw, 30px); /* skaluje się z szerokością okna */
}

/* od ~1400+ możesz delikatnie podbić (opcjonalnie) */
@media (min-width: 1400px){
  .w-top h2{ font-size: clamp(20px, 2vw, 25px);
    margin: 10px 0 1.4vw 0; }
}
.price--ask {font-size: 13px !important;
  font-weight: 700 !important;}

/* === Mobile/Tablet – zachowujemy poziomy scroll jak miałeś === */
@media (max-width: 1600px){
  .warianty-track {
  /*gap: clamp(24px, 4%, 80px);*/
  padding: 0 2.5% 0 0;
  }
}
@media (max-width: 768px){
  .warianty-track {
gap: clamp(10px, 2%, 80px);
  }
}

/* —— Przełącznik 24h / 10 dni —— */
.czas-toggle{
  display:flex;
  justify-content:center;
  gap:12px;
  margin: 10px auto 80px;
}
.czas-btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111;
  font:600 11px/1 'Poppins', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s ease;
}
.czas-btn[aria-selected="true"]{
  background:#11A1D8;
  color:#fff;
  border-color:#11A1D8;
  box-shadow:0 6px 18px rgba(17,161,216,.25);
}
.czas-btn:hover{ opacity:.9; }

/* — płynna podmiana ceny — */
.price{
  position:relative;
  display:inline-block;
  transition:opacity .25s ease, transform .25s ease;
}
.price.is-updating{
  opacity:0;
  transform: translateY(4px);
}


    /* portfolio */

#portfolio {padding: 0 20px;}
.gs { max-width:1200px; margin:0 auto; }
@media (max-width: 768px){
.gs {margin: 30px auto 10px;}
}
.gs-frame { overflow:hidden; border-radius:16px; }
.gs-track { display:flex; transition:transform .5s ease; }

/* każdy slajd = pełna szerokość ramki */
.gs-slide { min-width:100%; margin:0; padding:0; }

/* obrazek na pełną szerokość — wymuszamy !important, gdyby coś globalnie go ograniczało */
.gs-slide img,
.gs-slide video { width:100% !important; height:auto; display:block; object-fit:cover; border-radius: 25px;margin-top: -2px;  border: 1px solid #eee;}

/* podpis pod zdjęciem */
.gs-slide figcaption{
  background:#fff; color:#333; font-size:14px; line-height:1.5; padding:12px 0;text-align: justify;
}
/* PORTFOLIO – scroll palcem + snap */
.gs-frame {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}

.gs-frame::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Opera */
}

.gs-track{
  display:flex;                     /* zostaje */
  gap: 20px;                           /* każdy slajd = 100% */
  /* transition:transform .5s ease;  ← możesz usunąć, nie będzie potrzebne */
}

.gs-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media (max-width:768px){
.gs-slide figcaption p {font-size: 12.5px;}
}

/* autoplay */
#top10 .gs-slide{ position: relative; }

/* centralny overlay */
#top10 .video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: opacity .25s ease;
}

#top10 .video-play.is-hidden { 
  opacity: 0; 
  pointer-events: none; 
}

/* sam przycisk */
#top10 .video-play button{
  appearance: none;
  border: 0;
  background: rgba(0,0,0,.45);
  width: 84px;
  height: 84px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

#top10 .video-play button:hover{
  transform: scale(1.06);
  background: rgba(0,0,0,.55);
}

/* trójkąt (ikonka play) */
#top10 .video-play button::before{
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 4px; /* lekkie przesunięcie w prawo */
}

/* ukrywanie natywnych kontrolek wszędzie */
#top10 .gs-slide video::-webkit-media-controls { display:none !important; }
#top10 .gs-slide video::-webkit-media-controls-enclosure { display:none !important; }
#top10 .gs-slide video { 
  outline: none; 
  -webkit-tap-highlight-color: transparent;
}

/* === PORTFOLIO – kotwiczenie overlay do samego wideo === */
#top10 .gs-slide { position: relative; }

/* wewnętrzny kontener tylko dla wideo */
#top10 .video-holder{
  position: relative;
  width: 100%;
  /* jeżeli w Twoich stylach obrazy/filmy mają border-radius/cień,
     ten wrapper dziedziczy szerokość i nie psuje layoutu */
}

#top10 .video-holder > video{
  display: block;
  width: 100%;
  height: auto;
}

/* overlay przeniesiony DO .video-holder, więc środek to środek kadru */
#top10 .video-holder > .video-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: opacity .25s ease;
  z-index: 2;
}

#top10 .video-holder > .video-play.is-hidden{ 
  opacity: 0; 
  pointer-events: none; 
}

@media (max-width: 768px) {
#top10 .video-play button {width: 54px;height: 54px;}
#top10 .video-play button::before {border-left: 17px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;}
}



/* kropki */
.gs-dots{ display:flex; justify-content:center; gap:8px; padding:12px 0 6px; }
.gs-dot{ width:11px; height:11px; border-radius:10px; border:0; background:#cccccc; cursor:pointer; }
.gs-dot.is-active{ background:#7f7f7f; width: 22px;}

@media (max-width: 768px) {
  .slide-desc {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;     /* widoczne 3 linie */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin: 0 0 -2px;
  }

  /* gumka – gradient na dole */
  .slide-desc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.5em;  /* wysokość wygaszenia */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
  }

  .slide-desc.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .slide-desc.expanded::after {
    display: none; /* gumka znika po rozwinięciu */
  }

  .read-more {
    display: inline-block;
    margin-top: 6px;
    font-weight: 400;
    line-height: 1.9;
    color: #11a1d8;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
  }
}


@media (max-width:768px){
#portfolio {padding: 0;}
.gs-slide video {border-radius: 0;
  margin-top: 0;
  border: 0;border-bottom: 1px solid #eee;}
  .gs-frame {border-radius: 0;}
  .gs-slide figcaption {padding: 12px 20px;}
  #portfolio  .opis {
    padding: 20px;
  }
}





/* co nas wyróżnia */
.distinction-wrapper {
      max-width: 1920px;
      margin: auto;
      padding: 90px 0 20px;
      position: relative;
      overflow-x: hidden;
    }

    .distinction-track-wrapper {
      overflow-x: auto;
      scrollbar-width: none;         /* Firefox */
      -ms-overflow-style: none;      /* IE/Edge */
    }

    .distinction-track-wrapper::-webkit-scrollbar {
      display: none;                 /* Chrome/Safari */
    }

    .distinction-track {
      display: flex;
      gap: 50px;
      padding-right: 100px;
      position: relative;
      min-width: max-content;
      margin-left: 20px;
    }

    .distinction-item {
      flex: 0 0 auto;
      width: 390px;
      padding: 0 0 40px 0;
    }

.distinction-image {
  position: relative;
  overflow: hidden;
border-radius: 25px;
  margin: 0 0 20px;
}

.distinction-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.distinction-item:hover .distinction-image img {
  transform: scale(1.1);
}


    .distinction-title {
      font-weight: 600;
      font-size: 12.8px;
      line-height: 1.6;
      text-transform: uppercase;
      color: #111;
    }

  .distinction-text {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease;
margin-top: 15px;
  font-size: 13px;
  font-weight: 200;
  line-height: 22px;
}
@media (max-width: 768px){
  .distinction-text{
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    transform: none !important;
  }
  /* odrobina marginesu, by nic nie było przysłonięte */
  .distinction-item { padding-bottom: 34px; }
}

.distinction-item:hover .distinction-text {
  opacity: 1;
  visibility: visible;
  max-height: 300px;     /* wystarczający „limit” dla treści */
  transform: translateY(0);
}

    .fade-right {
      position: absolute;
      top: 0;
      right: 0;
      width: 60px;
      height: 100%;
      background: linear-gradient(to right, transparent, white);
      pointer-events: none;
      z-index: 10;
    }

    /* Desktop */
    @media (min-width: 1024px) {
      .distinction-track {
        margin-left: 100px;
      }
    }

    @media (min-width: 1440px) {
      .distinction-track {
        gap: 50px;
      }
      .fade-right {
        width: 150px;
      }
    }

    /* Mobile: poprawki i scroll snap */
  @media (max-width: 768px) {
  .distinction-track-wrapper {
    padding: 25px 0 0 0; /* nowy odstęp z lewej tylko mobile */
    scroll-snap-type: x mandatory;
  }

  .distinction-track {
    padding-left: 0; /* usuwamy wcześniejszy padding z tracka */
    padding-right: 0;
    gap: 22px;
  }

  .distinction-item {
    width: 80vw;
    scroll-snap-align: center;
  }

  .fade-right {
    width: 40px;
  }
}


/* co zawiera strona/sklep */
.feature{font-family:'Poppins',sans-serif;padding:20px 20px 0;}
.container{max-width:1500px;margin:0 auto;}
.panel{display:none;}
.panel.is-active{display:block;}
.grid{display:grid;gap:30px;}
/* wariant lewy: ta sama typografia co .opis, tylko bez centrowania i z justowaniem do lewej */
.opis--l{text-align:left;margin:0;padding: 0;}
.opis--l .naglowek,.opis--l h2,.opis--l p{margin-left:0;margin-right:0;}
/* przyciski */
.tabs{display:inline-flex;gap:0;align-items:center;margin:0 0 24px;}
.tab{font-size:10.2px;text-transform: uppercase;letter-spacing: 1px;font-weight:600;line-height:1;padding:8px 12px;border:0;border-bottom: 1px solid #e5e7eb;color:#111;background: transparent;cursor:pointer;transition:background .2s ease,border-color .2s ease,opacity .2s ease;}
.gs { max-width:1200px; margin:30px auto 0; }
@media (max-width: 768px){
.tab{padding: 10px 15px 8px;}
}
.tab:hover{opacity:.9;}
.tab.is-active{border-bottom: 1px solid #00AEEF;}
/* prawa kolumna — typografia jak .opis p */
.right p, .right h2{text-align: left;}
.right a{color:#00AEEF;text-decoration:underline;}
/* layout od desktopu */
@media (min-width:1160px){.grid{grid-template-columns:1fr 1fr;gap:5%;align-items:start;}}
@media (min-width:1600px){.grid{grid-template-columns:1fr 1fr;gap:12%;align-items:start;}}
/* mobile dopasowane do Twoich wartości z @media (max-width:768px) */
@media (max-width:768px){.feature{padding:0 15px 40px 15px;} 
.wrap .feature {padding: 0 0 20px 0;width: 33.333%;}

.tabs{margin: 60px auto 50px;
    background: #eee;
    width: 100%;
    display: flex;
    text-align: center;} .right p{font-weight: 300;font-size:15.2px;line-height:1.7;margin:0 0 20px;}.feature .label {font-size: 10px;}}


/* === MOBILE: opis oferty z "gumką" + [rozwiń] === */
@media (max-width: 768px){
  /* wrap dla treści, np. prawy panel "co zawiera strona/sklep" */
  .oferta-desc{
    position: relative;
    overflow: hidden;
    transition: height .45s ease;
  }

  /* stan zwinięty – clamp przez maskę (miękki zanik na dole) */
  .oferta-desc.is-collapsed{
    /* ustawimy wysokość inline w JS; tu tylko maska */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  }

  /* pasek "gumki" — delikatny gloss na dole */
  .oferta-desc.is-collapsed::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height: 54px;
    background: linear-gradient(to top, #fff 35%, rgba(255,255,255,0));
    pointer-events: none;
  }

  /* przycisk [rozwiń] */
  .oferta-more{
display: inline-block;
    margin: 10px auto 0;
    font: 600 9.6px/1 'Poppins', sans-serif;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    background: #1f86c1;
    color: #fff;
    border: 1px solid #1f86c1;
    border-radius: 999px;
    padding: 8px 18px;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .25s ease, transform .2s ease;
  }
  .oferta-more:active{ transform: translateY(1px); }
}



/* opinie – mobile first */
#opinie {
  width: 100%;
  max-width: 100%;
  margin: 80px auto 50px;
  position: relative;
  display: flex;
}

.opinie-tlo {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 70px auto;
  background: #f6f6f6;
  display: none;
}

.opinie {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  padding: 0;
}

.opinie-foto {
  width: 100%;
  max-width: 600px;
  background: transparent;
  position: relative;
}

.opinie-foto .img1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 450px;
}

.opinie-opis {
  padding: 50px 5% 20px;
  background: #fff;
}

.opinie-opis h2 {
  text-align: left;
}

/* viewport / slider */
.opv {
  --opv-max: 450px;
  position: relative;
  width: 100%;
  max-width: var(--opv-max);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.opv-track {
  display: flex;
  gap:20px;
}

.opv-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.opv video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  background: #000;
}

.opv-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 20px 0 0;
}
.opv .opv-dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px;
}

.opv-dot {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 10px;
  background: #cccccc;
  cursor: pointer;
  padding: 0;
}

.opv-dot.is-active {
  background: #7f7f7f;
  width: 20px;
}

/* ukrycie poziomego paska w .opv */
.opv{
  /* ... zostawiasz swoje właściwości ... */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.opv::-webkit-scrollbar{        /* Chrome/Safari/Opera */
  height: 0;                    /* albo: display:none */
  background: transparent;
}
.opv::-webkit-scrollbar-thumb,
.opv::-webkit-scrollbar-track{
  background: transparent;
}

/* desktop */
@media (min-width: 768px) {
  #opinie {
    margin: 100px auto 200px;
    max-width: 1500px;
    padding: 0 20px;
  }

  .opinie-tlo {
    display: block;
    margin: 100px auto 0;
    background: radial-gradient(circle at top left, #f1f5f7, #e7ebec), #ecf0f2;
  }

  .opinie {
    max-width: 1600px;
  }

  .opinie-foto {
    float: left;
  }

  .opinie-foto .img1 img {
    max-width: 460px;
  }

  .opinie-opis {
    padding: 150px 6% 120px 4%;
    max-width: 700px;
    float: left;
    margin: 200px 0 70px 38%;
    z-index: 1;
    position: relative;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .opinie-opis small {
    font-weight: 500;
    font-size: 80%;
  }
}


.customers-wrapper {
      max-width: 1480px;
      margin: auto;
      padding: 0px 20px 80px;
      position: relative;
      overflow-x: hidden;
    }

    .customers-track-wrapper {
      overflow-x: auto;
      scrollbar-width: none;         /* Firefox */
      -ms-overflow-style: none;      /* IE/Edge */
    }

    .customers-track-wrapper::-webkit-scrollbar {
      display: none;                 /* Chrome/Safari */
    }

    .customers-track {
      display: flex;
      gap: 50px;
      position: relative;
      min-width: max-content;
      margin-left: 0;
    }

    .customers-item {
 flex: 0 0 auto;
  width: 22%;
  padding: 0 0 40px 0;
  max-width: 330px;
    }

.customers-image {
  position: relative;
  overflow: hidden;
border-radius: 25px;
  margin: 0 0 20px;
}

.customers-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.customers-item:hover .customers-image img {
  transform: scale(1.1);
}


    .customers-title {
      font-weight: 600;
      font-size: 13px;
      line-height: 1.6;
      text-transform: uppercase;
      color: #111;
    }





    .fade-right {
      position: absolute;
      top: 0;
      right: 0;
      width: 60px;
      height: 100%;
      background: linear-gradient(to right, transparent, white);
      pointer-events: none;
      z-index: 10;
    }

    /* Desktop */


    @media (min-width: 1440px) {
      .customers-track {
        gap: 4%;
      }
      .fade-right {
        width: 150px;
      }
    }

    /* Mobile: poprawki i scroll snap */
  @media (max-width: 768px) {
  .customers-track-wrapper {
    padding:35px 0 0 0; /* nowy odstęp z lewej tylko mobile */
    scroll-snap-type: x mandatory;
  }
  .customers-wrapper {padding: 0px 20px 10px;}

  .customers-track {
    padding-left: 0; /* usuwamy wcześniejszy padding z tracka */
    padding-right: 0;
    gap: 30px;
  }

  .customers-item {
    width: 75vw;
    scroll-snap-align: center;
  }

  .fade-right {
    width: 40px;
  }
}

/* Opinie — mobile fix: wideo wraca do normalnego przepływu */
@media (max-width: 767px){
  .opinie { padding: 0 20px; }                     /* czysto estetyczne */
  .opinie-foto { position: relative; margin: 0 auto 20px; max-width: 600px; }
  .opinie-foto .img1{
    position: static !important;                   /* klucz: NIE absolute */
    width: 100%;
    max-width: none;
  }
  .opv{ --opv-max:100%; max-width: 100%; }         /* viewport wideo na pełną */
  .opinie-opis { padding: 50px 0 20px; }                /* odstęp pod wideo */
}

.ikonki {width: 100%;margin: 15px auto 70px;-webkit-transition: all 0.5s;transition: all 0.5s;max-width: 1050px;padding: 0 20px;}
.ikonki .box {width: 48%;margin: 20px 1%;padding:10px 0%;float:left;-webkit-transition: all 0.5s;transition: all 0.5s;}
.ikonki .box img {width: 90%;max-width: 52px;margin: 10px auto;-webkit-transition: all 0.25s;transition: all 0.25s;}
.ikonki .box h2 {font-weight: 700;font-size: 28px;margin: 10px auto 8px;cursor: default;}
.ikonki .box p {font-weight: 600;font-size: 10px;line-height:12px;margin: 5px auto;letter-spacing: 1px;text-transform: uppercase;font-family: 'Poppins';cursor: default;}
.ikonki .box:hover img {transform:scale(1.2) ;}
.ikonki:hover .box {filter: blur(2px);opacity:.74;}
.ikonki:hover .box:hover {filter: blur(0);opacity:1}
@media (min-width: 720px) {
 .ikonki .box {width: 24%;margin: 0 0.5%;padding:10px 0;float:left}
}
@media (min-width: 1200px) {
.ikonki .box img {
 width: 90%;
 max-width: 48px;
 margin: 5px 23px 20px;
 float: left;
 }
 .ikonki .box h2 {
 font-weight: 700;
 font-size: 28px;
 margin: 5px auto;
 text-align: left;
 }
 .ikonki .box p {
 font-weight: 600;
 font-size: 10.2px;
 line-height: 13px;
 margin: 5px auto;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 font-family: 'Poppins';
 text-align: left;
 }
 }
  @media (max-width: 768px) {
.ikonki .box, .ikonki .box p {text-align: center;}
  }

 #firma .opis {max-width: 100%;padding: 60px 20px 20px;}
 #firma p {max-width: 1120px;}
 #firma h5 {max-width: 1500px;}
 #firma .xp{font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-0.02em;text-transform:lowercase;line-height:1;text-align:center;  font-size: clamp(60px, 10vw, 270px);
  margin: clamp(40px, 8vw, 120px) auto; /* góra/dół skaluje się */
  letter-spacing: clamp(-5px, -0.5vw, -4px); /* też płynnie */max-width: 1520px; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #firma .xp{--img:url('i/firma-tlo.webp');--bgY:50%;background-image:var(--img);background-size:cover;background-repeat:no-repeat;background-position:50% var(--bgY);-webkit-text-fill-color:transparent;color:transparent;-webkit-background-clip:text;background-clip:text;}
}


/* 641–768 */
@media (min-width:641px){ 
  #firma .xp{ font-size:100px; letter-spacing:-2px; } 
}

/* 769–1024 */
@media (min-width:769px){ 
  #firma .xp{ font-size:120px; letter-spacing:-5px; } 
}

/* 1025–1280 */
@media (min-width:1025px){ 
  #firma .xp{ font-size:160px; letter-spacing:-8px; } 
}

/* 1281–1440 */
@media (min-width:1281px){ 
  #firma .xp{ font-size:200px; letter-spacing:-10px; } 
}

/* 1441–1600 */
@media (min-width:1441px){ 
  #firma .xp{ font-size:240px; letter-spacing:-12px; } 
}

/* 1601–1920 (limit nadal 1520px szer.) */
@media (min-width:1601px){ 
  #firma .xp{ font-size:260px; letter-spacing:-14px; } 
}

/* opcjonalnie: bardzo duże ekrany 2K+ — trzymamy stałą szerokość 1520px */
@media (min-width:1921px){
  #firma .xp{ font-size:270px; letter-spacing:-5px; }
}

#baza-wiedzy {
  max-width: 1480px;
  margin: auto;
  padding: 35px 20px 10px;
  position: relative;
  overflow-x: hidden;
  clear: both;
}

/* accordion */
#faq {width: 100%;margin: 200px auto 120px;
    padding: 0 20px;}
.faq {width: 100%;}

@media screen and (min-width:980px){
#faq {display: flex;clear: both;max-width: 1500px; margin:0 auto 120px;padding: 0 20px;}
.faq:first-of-type {background: url('i/faq.webp');background-size: cover;width: 43%;margin: 0 7% 0 0;-webkit-transition: all 0.5s;transition: all 0.5s;background-position: center top;}
.faq:last-of-type {width: 50%;margin: 0 0 0;}
#baza-wiedzy {padding: 100px 20px 10px;}
}

#accordion {width: 100%;margin: 0;}
.accordion {color: #10121b; cursor: pointer; padding: 16px 0 !important; width: 100%; border-top: 1px solid #eaeaea; text-align: left;outline: none; font-size: .94em; transition: 0.4s; margin: 0 auto 1px auto;  font-weight: 600;}
.accordion:after {content: '\002B';color: #10121b;font-weight: 500;float: right;}
.active-accordion:after { content: "\2212"; color: #10121b; font-weight: 300;border: none;}
.accordion-panel { padding: 0; background-color: white; max-height: 0; overflow: hidden; transition: max-height 1.2s ease-out;}
/* aktywny + hover = niebieski, 500 */
.active-accordion,
.accordion:hover { color:#1f86c1; font-weight:600; }

/* nieaktywne = powrót do bazowych wartości */
.accordion:not(.active-accordion){
  color:#10121b;
  font-weight:600;
}

/* zapobieganie „zatrzaskom” focus/active na mobile */
.accordion:focus,
.accordion:active{
  color:inherit;
  font-weight:inherit;
  outline: none;
}
.accordion-panel .pozycja {padding: 4px 4% 4px 0;}
.accordion-panel .pozycja:last-of-type { margin: 10px 0 60px;}
.accordion-panel .pozycja div {margin: 0 ;width: 98%; padding: 2px 0;font-size: 1.3em; color: #112d3e; font-weight: 300; font-family: ''Open Sans'', arial, tahoma, verdana; line-height: 1.7em; letter-spacing: 0.25px;}
.accordion-panel .pozycja div:nth-child(odd) {float: left;width: 81%;text-align: left;padding-left: 1%}
.accordion-panel .pozycja div:nth-child(even) {float: right;width: 17%;text-align: right;padding-right: 1%}
.accordion-panel div li { font-size: 1.2em !important;}
.accordion-panel li a { font-size: 1em !important; font-weight: 400}
.accordion-panel .pozycja { height: auto; min-height: 32px; justify-content: space-between;}
.accordion-panel span.right { white-space: nowrap; margin-left: 50px; font-weight: 600;}
.accordion:first-of-type {border: none;}
@media screen and (min-width:800px){
.accordion {cursor: pointer;padding: 20px 3% !important;width: 100%;border-top: 1px solid #eaeaea;text-align: left;outline: none;font-size: 16px;transition: 0.4s;margin: 0 auto 1px auto;font-weight: 600;}
.accordion:after {font-weight: 500;float: right;margin: -7px 0 0 5px;font-size: 20px;padding: 6px 8px;}
.accordion-panel .pozycja { margin: 0; height: auto; min-height: 32px; padding: 4px 10% 4px 3%;  letter-spacing: 0;font-size: 15px;}
.active-accordion:after { content: "\2212"; color: #0159ae; font-weight: 300;border: none;}
}
@media (max-width: 960px){
  .accordion-panel .pozycja {
  padding: 4px 4% 4px 0;
  font-size: 14.5px;
  line-height: 1.9em;
}
}
@media (max-width: 980px){

#faq {
  width: 100%;
  margin:0px auto 80px;}
}



/* FAQ – mobile: skrót + pełne odsłonięcie po kliknięciu */
@media (max-width: 768px){

  /* — tryb skrótu (aktywny na starcie) — */
  #accordion.mobile-collapsed > .accordion{ transition: opacity .25s ease; }

  /* 1–3 pełne (pamiętaj: nagłówki są w dzieciach 1,3,5) */
  #accordion.mobile-collapsed > .accordion:nth-child(1),
  #accordion.mobile-collapsed > .accordion:nth-child(3){ opacity: 1; }

  /* 4–7: 0.75 / 0.5 / 0.25 / 0.1 (dzieci 7,9,11,13) */
  #accordion.mobile-collapsed > .accordion:nth-child(5){  opacity: .75; }
  #accordion.mobile-collapsed > .accordion:nth-child(7){  opacity: .5;  }
  #accordion.mobile-collapsed > .accordion:nth-child(9){ opacity: .25; }
  #accordion.mobile-collapsed > .accordion:nth-child(11){ opacity: .1;  }

  /* 8. pytanie i kolejne (nagłówki od dziecka nr 15) – ukryte do czasu kliknięcia */
  #accordion.mobile-collapsed > .accordion:nth-child(n+13){ display: none; }

  /* — po kliknięciu: pokaż wszystko i przywróć 100% — */
  #accordion.show-all > .accordion{ display: block !important; opacity: 1 !important; }
  #accordion.show-all > .accordion-panel{ display: block !important; }
}

/* USUŃ tę błędną linię, jeśli masz:
#accordion:nth-child(n+8){ display: none; }
*/




/* pozostała oferta */
.tiles-container {
      display: flex;
      overflow: hidden;
      height: 600px;
      border-radius: 30px;
      gap: 1.5rem;
      margin: 20px auto 70px;
      max-width: 1500px;
    }

    .tile {
      flex: 1;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      cursor: default;
      display: flex;
      align-items: flex-end;
      padding: 2rem;
      color: #fff;
      border-radius: 30px;
      transition: flex 0.5s ease-in-out;
    }



    .tile::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 45%;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
      transition: height 0.4s ease;
      z-index: 1;
    }

    .tile:not(.active)::before {
      height: 25%;
    }

    .tile-label {
      position: absolute;
      bottom: 50px;
      left: 2.5rem;
      z-index: 2;
      font-size: 1rem;
      font-weight: 700;
    }

    .tile:not(.active) .tile-label {
      display: block;
    }

    .tile.active .tile-label {
      display: none;
    }

    .tile-content {
      transition: opacity 0.3s;
      opacity: 0;
      position: relative;
      z-index: 2;
      padding: 1.5rem;
      border-radius: 20px;
    }

    .tile.active .tile-content {
      opacity: 1;
    }

    .tile-content h2 {
      display: block;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: left;
  color: #fff;
  text-transform: none;
  text-shadow: 2px 2px 5px #0000004f;
    }

    .tile p {font-weight: 300;
color: #fff;
  font-size: 13.8px;
  line-height: 22px;
  margin: 20px 0 0 0;
  text-align: left;
  max-width: 400px;
  letter-spacing: .2px;
  text-shadow: 1px 1px 3px #0000004f;
    }

    .tile button {
      background-color: #1f86c1;
      color: #fff;
      border: none;
      padding: 14px 44px;
      font-weight: 700;
      font-size: 11px;
  letter-spacing: 1.8px;
  transition: all 0.3s ease;
  overflow: hidden;
  text-transform: uppercase;
  border-radius: 50px;
  border: 1px solid #1f86c1;
    }

    .tile button:hover {
  box-shadow: 0 0 12px #1f86c1;
  border: 1px solid #ffffff71;}

    /* Mobile */
    @media (max-width: 768px) {
      .tile:not(.active)::before {
  height: 35%;}
  .tile::before {background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);}
      .tile p {font-weight: 300;
color: #fff;
  font-size: 12.2px;
  line-height: 1.7em;}
   .tile-content h2 {
      display: block;
  font-size: 1.5em;}

  .tiles-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    flex-wrap: nowrap;
    height: auto;
    gap: 1.2rem;
    padding: 1rem 1.5rem;
    margin: 10px auto 75px auto;
  }
  .tile button{padding: 12px 30px 12px 37px;font-size:10px}

  .tile {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    height: 500px;
    scroll-snap-align: start;
    transition: none; /* Możesz zostawić lub usunąć animację */
    padding: 0;
  }

  .tile.active {
    flex: 0 0 100%;
  }

  .tile:not(.active) {
    padding: 0;
  }

  .tile:not(.active) .tile-label {
    font-size: 0;
    visibility: hidden;
  }

  .tile:not(.active) .tile-content {
    display: block;
  }
  .tile-content {
  opacity: 1;
}}

 @media (min-width: 768px) {
        .tile.active {
      flex: 4;
    }
  }

  /* Desktop: rozsuwanie na hover */
@media (hover:hover) and (pointer:fine){
  .tiles-container:hover .tile{flex:1;}
  .tiles-container:hover .tile.active{flex:1;}          /* wyłącz domyślny aktywny, kiedy jest hover */
  .tiles-container:hover .tile:hover{flex:4;}           /* tylko najechany rośnie */
  .tiles-container:hover .tile .tile-content{opacity:0;}
  .tiles-container:hover .tile:hover .tile-content{opacity:1;}
  .tiles-container:hover .tile .tile-label{display:block;}
  .tiles-container:hover .tile:hover .tile-label{display:none;}
  .tiles-container:hover .tile:hover::before{height:45%;}/* gradient jak w aktywnym */
}




/* formularz */
.form-shadow-wrapper {
  max-width: 520px;
  margin: auto;
  background: white;
  padding: 50px 0;
  border-radius: 30px;
}

 @media (max-width: 768px) {
.form-shadow-wrapper {padding: 30px 0 0;}
 }

@media (min-width: 1024px) {
 .form-shadow-wrapper {
    position: relative;
    max-width: 550px;
    margin: auto;
    background: white;
    padding: 25px;
    border-radius: 30px;
    box-shadow: -60px 0 100px rgba(0, 0, 0, 0.06);
    clip-path: inset(20px -40px 20px 0 round 30px);
  }
}

.contact-form {
  font-family: 'Poppins', sans-serif;
}

.form-group {
  position: relative;
  margin-bottom: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 16px 20px 14px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 40px;
  outline: none;
  background: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
}
.contact-form input:hover , .contact-form textarea:hover , .contact-form select:hover {border-color: #1f86c1;}
.contact-form textarea {
  border-radius: 25px;
  resize: none;
  min-height: 120px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #1f86c1;
}

.contact-form label {
  position: absolute;
  left: 20px;
  top: 15px;
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease;
  background: white;
  padding: 0 5px;
  font-weight: 200;
}

.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label,
.contact-form select:valid + label {
  top: -10px;
  left: 14px;
  font-size: 12px;
  color: #666;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: transparent;
}
.contact-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  background-color: white;
}
.select-wrapper {
  position: relative;
}

.select-wrapper .arrow {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border: solid #1f86c1;
  border-width: 0 2px 2px 0;
  padding: 6px;
  pointer-events: none;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 30px;
}

.form-check input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  transform: scale(1.1);
}

.form-check label {
  font-size: 13px;
  color: #666;
  display: flex;
  gap: 10px;
}

.form-check a {
  color: #1f86c1;
  text-decoration: none;
}

.form-check a:hover {
  text-decoration: underline;
}

.submit-btn {
  background: #1f86c1;
  color: #fff;
  font-weight: 700;
  padding: 16px 45px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: background 0.3s;
}

.submit-btn:hover {
  background: #231f20;
}
.checkbox-group {position: relative;line-height: 16px;font-size: 11px;width: 100%;font-weight: 200;color: #535953;
  padding: 0 0 40px;}
.checkbox {width: auto !important;
  padding: 40px;
  margin: 3px 16px 20px 8px;
  float: left;}
.form-hint{display:block;margin:6px 14px 10px;color:#d93025;font-size:12px;font-weight:300;}
.form-hint a{color:#d93025;text-decoration:underline;}
.is-hidden{display:none;}
.contact-form .is-error{border-color:#d93025;}



/* kontakt opis */
.contact-box {
  font-family: 'Poppins', sans-serif;
  max-width: 500px;
  margin: auto;
  color: #111;
}

.company-name {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}



.phone-email {
  display: flex;
  align-items: center;
  gap: 15px;
  margin:20px 0 50px;
}

.pinezka {width: 20px;
  margin: 4px 10px -3px 0;
  float: left;}

.phone-icon {
  font-size: 24px;
  color: #1f86c1;
}

.phone-text .phone-number {
  font-size: 2em;font-weight: 200;
  color: #333;
  margin: 0;
  line-height: 1em;
}

.hours {
  font-size: 13px;font-weight: 300;
  color: #333;
  margin: 0;
  line-height: 1em;
}
.hours {
  font-size: 13px;font-weight: 300;
  color: #333;
  margin: 0;
  line-height: 1em;
}

.email {
  font-size: 1em;
  line-height: 1.22em;
}
.email a {
  color: #1f86c1;
  font-weight: 500;
  text-decoration: none;}

.email small {  font-size: 13px;font-weight: 300;
  color: #333;
  margin: 0;
  line-height: 1em;}

.bank-title {
margin-top: 40px;
  text-align: left;
}

.bank-number {
  font-size: 15px;
}

.bank-number span {
  font-size: 13px;
  color: #666;
}

.company-data {
  display: flex;
  flex-wrap: wrap;
max-width: 340px;  justify-content: flex-start;
  font-family: 'Poppins', sans-serif;
 
  line-height: 1.6;
  margin-top: 20px;
}

.company-data div {
  flex: 1 1 150px;
  min-width: 140px;
}

.company-data p {
  margin: 20px 0 ;
  color: #111;
  text-align: left; font-size: .98em;
  line-height: 1.7em;
}

.company-data strong {
  font-weight: 500;
}


.social-icons {
  display: flex;
  gap: 20px;
  margin-top: 25px;
}

.social-icons img {
  width: 26px;
  height: 26px;
  opacity: 0.7;
  transition: 0.3s;
}

.social-icons img:hover {
  opacity: 1;
}



/* kolumny */
.kolumny {
      display: flex;
      flex-wrap: wrap;
max-width: 1200px;
padding: 0 20px;
  margin: 70px auto 0;
    }

    .left-column {
      flex: 1;
      margin-left: 0;
      margin-right: 15px; /* połowa odstępu */
    }

    .right-column {
      flex: 1;
      margin-right: 0;
      margin-left: 15px; /* połowa odstępu */
    }

       .box {
      padding: 0;
    }
    .box p {text-align: left;}
    @media (max-width: 768px) {
      .left-column,
      .right-column {
        width: 100%;
        margin: 0 0 30px 0; /* odstęp między kolumnami w pionie */
      }

      .right-column {
        margin-bottom: 0;
      }

       .kolumny {
      display: block;}
      
         .box {
      padding: 0;
    }

    .client-slider-wrap {display: none;}
    }

 

@media (min-width: 1024px) {
.formularz{
  margin: 0;
  padding-right: 15px;
  background: no-repeat center right;
  background-size: auto;
  background-image: url('i/cien.webp');
}
}


    .social-kontakt {
  gap: 12px;
  margin-top: 30px;
}

.social-kontakt img {
  width: 26px;
  height: 26px;
  opacity: 0.7;
  transition: 0.3s;
  border-radius: 50%;
  opacity: .65;
}
.social-kontakt img:hover {opacity: 1;}




/* stopka */
footer {clear: both;
      width: 1920px;
      max-width: 100%;
      background: #0b0b0b no-repeat bottom right;
      background-size: auto 260px;
      color: #a3a6a5;
      margin: auto;
    }

    .footer-container {
      max-width: 1500px;
      margin: 170px auto 0;
      padding: 140px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .footer-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;
      padding: 0 0 55px;
    }

    .footer-about {
      flex: 1 1 400px;
    }

    .footer-about h4 {
      font-size: 12px;
      color: #fff;
      font-weight: 700;
      margin-bottom: 25px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }

    .footer-about p {
font-size: 13.2px;
  line-height: 1.92;
  max-width: 600px;
  text-align: left;
  margin: 0 0 30px;
  color: #a3a6a5;
  font-weight: 300;
  letter-spacing: .2px;
    }

    .footer-about p strong {
  font-weight: 400;
    }
.footer-about a {margin:20px 0 40px;display: inline-block;}
    .footer-about a:hover {box-shadow: 0 0 12px #1f86c1;}

    .footer-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 60px;
    }

    .footer-column {
      min-width: 180px;
    }

    .footer-column h5 {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 25px;
      letter-spacing: 0.6px;
      cursor: pointer;
    }

    .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-column li {
      margin-bottom: 10px;
      font-size: 13px;
    }

    .footer-column a, .polityka {
      color: #a3a6a5;
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-column a:hover, .polityka:hover {
      color: #fff;
      border-bottom: 1px solid #a3a6a5;
      text-shadow: 0 0 16px #ffffffc1;
    }

    .footer-center {letter-spacing: 0.2px;
      border-top: 1px solid #222;
      padding: 30px 0 10px;
      text-align: center;
      font-size: 13px;
  line-height: 30px;
    }

    .footer-center img {
      width: 152px;
  margin: 55px auto 30px;transition: all 0.3s ease;
  opacity: .8;
    }
.footer-center img:hover {opacity: 1;}
    .footer-center p {
margin: 4px auto;
  font-size: 13px;
  color: #a3a6a5;
  letter-spacing: .2px;
  line-height: 22px;
    }

       .footer-center p a {color: #a3a6a5;transition: all 0.3s ease;}
       .footer-center p a:hover {color: #fff;text-decoration: none;}

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px 0 40px;
      font-size: 13px;
  letter-spacing: .25px;
    }

    .footer-bottom-left,
    .footer-bottom-center,
    .footer-bottom-right {
      flex: 1;
      text-align: center;
    }

    .footer-bottom-left {
      text-align: left;
    }

    .footer-bottom-right {
      text-align: right;
    }

    .footer-bottom a {
      color: #a3a6a5;
      text-decoration: none;transition: color 0.3s;
    }

    .footer-bottom a:hover {
      text-decoration: underline;color: #fff;
    }
    .footer-bottom a strong {font-weight: 600;}

    .footer-bottom-center {
      color: #1f86c1;
      font-weight: 400;
      font-size: 11px;
  letter-spacing: .5px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .footer-columns {
        flex-direction: column;
        gap: 20px;
      }

      .footer-column h5 {
        margin-bottom: 0;
        position: relative;
      }

      .footer-column h5::after {
        content: '+';
        position: absolute;
        right: 0;
        font-size: 18px;
        line-height: 1;
      }

      .footer-column ul {
        display: none;
        margin-top: 8px;
      }

      .footer-column.active ul {
        display: block;
      }

      .cta-button {
        width: 100%;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
      }

      .footer-bottom-left,
      .footer-bottom-center,
      .footer-bottom-right {
        text-align: center;
      }

      .footer-column li {
        margin-bottom: 6px;
      }
    }


     .social-stopka {
right: 0;padding: 0px 0 35px;
left:0;
  gap: 12px;
  display: block;
    }
     .social-stopka img {    -webkit-transition: all 0.5s;transition: all 0.5s;  
        width: 26px;
      border-radius: 50%;
    margin: 0;filter: grayscale(1) brightness(100);}

    .social-stopka img:hover {filter:none}

   .social-stopka a {
      opacity: 0.5;
      transition: all 0.3s ease;
      color: white;
      text-decoration: none;
      border-radius: 50%;
      line-height: 0;padding: 10px 6px;
    }
    .social-stopka a:hover {
      opacity: 1;
    }

    
/* ============ SZYBKI TELEFON ============ */
.telefon{
  position: fixed;
  right: 20px; bottom: 110px;
  z-index: 10000;

  width: 44px; height: 44px;
  border-radius: 50%;
  background: #9ce31e;               /* ON */
  border: 2px solid #fff;
  box-shadow: 5px 3px 10px #00000042;

  display: flex; align-items: center; justify-content: center;
  overflow: visible;                   /* żeby badge mogło „wyjechać” */
  animation: lift 5s ease-in-out infinite;

  /* płynne przejścia koloru i ikony */
  transition: background-color .6s ease;
  will-change: background-color;
}
.telefon img{
  width: 20px; display: block;

  animation: shake 5s ease-in-out infinite;
  transform: rotate(0deg);
  transition: transform .6s ease;
  will-change: transform;
    transform: rotate(0deg); /* zawsze jawny stan początkowy */
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  margin:auto;
  
}
.telefon--off img {
  transform: rotate(120deg); /* OFF – płynny obrót */
}

/* większe ekrany */
@media (min-width:1023px){
  .telefon { width: 48px; height: 48px; right: 40px; bottom: 40px; }
  .telefon img { width: 22px; }
}

/* pływanie koła w górę/dół */
@keyframes lift{
  0%,45%,100% { transform: translateY(0) }
  20%,25%     { transform: translateY(-22px) }
}
/* drżenie słuchawki */
@keyframes shake{
  0%,45%,100% { transform: rotate(0) }
  20%,22%,24%,26%,28% { transform: rotate(-12deg) }
  21%,23%,25%,27%     { transform: rotate(12deg) }
}

/* ====== STAN OFF (po godzinach) ====== */
.telefon--off{
  background: #ff4d4f;
  animation: none;                    /* bez pływania */
}
.telefon--off img{
  animation: none;                    /* bez drżenia */
  transform: rotate(120deg);          /* „odłożona” słuchawka */
}

/* ====== BADGE „?” — wyjeżdża spod kółka ====== */
.telefon__help{
  position: absolute;
  top: 6px;
  right: 12px;
  left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:#fff;
  color:#333;
  font-size:11px;
  line-height:16px;
  text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  opacity:.0;                /* ukryty gdy ON */
  transform: scale(.85);     /* delikatne „zbicie” na starcie */
  pointer-events:none;
  z-index:0;
  transition:
    top .45s ease,
    right .45s ease,
    transform .45s ease,
    opacity .45s ease;
}

/* DOCEL: na „1–2” (ok. 8px na zewnątrz) */
.telefon--off .telefon__help{
  top:-14px;
  right:-18px;
  opacity:1;
  transform: scale(1);
  pointer-events:auto;
  z-index:1;
}

/* ====== TICKER (tekst w kółku) — tylko OFF ====== */
.telefon__ticker{
  position: absolute; left: 3px; right: 3px; bottom: 6px; height: 12px;
  font-size: 9px; color: #fff; letter-spacing: .5px;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.telefon--off .telefon__ticker{ opacity: 1; }
.telefon__ticker-track{
  white-space: nowrap; display: inline-block;
  animation: tel-scroll 8s linear infinite;
}
@keyframes tel-scroll{
  0%{ transform: translateX(100%) } 100%{ transform: translateX(-100%) }
}

/* ====== (opcjonalnie) podstawy popupa — nieużywane teraz ====== */
.telefon__overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:10000; }
.telefon__modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; padding:22px; border-radius:16px; max-width:320px; width:90%;
  text-align:center; z-index:10001; box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.telefon__close{ position:absolute; top:6px; right:10px; background:transparent; border:0; font-size:22px; cursor:pointer; }
.telefon__cta{
  display:inline-block; margin-top:14px; padding:10px 22px; border-radius:22px;
  background:#1f86c1; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:11px;
}
.telefon__modal--fade{ animation: telFade .35s ease forwards; }
@keyframes telFade{ to{ opacity:0; transform:translate(-50%,-46%);} }


 @media (max-width: 1600px) {
.wrap {padding: 0 20px 50px;}
 }
@media (max-width: 500px) {
  .wrap {
    padding: 40px 20px 50px;
  }
}
 #pozostala, #pozostala2 {padding: 0 20px;}


 
#menu1 {display: none;}
#menu1 li a {float: right;}
.sidenav #menu1 {display: block !important;top: 14%;left: 0;right: 0;position: absolute;}
.sidenav #menu1 ul {float: none;margin: 0;list-style: none;padding: 80px 0;display: grid;text-align: right;}
.sidenav #menu1 li {padding: 0 8% 0 0;}
.sidenav #menu1 li a, .sidenav #menu1 li:last-of-type a {border: none;padding: 12px 5px;font-weight: 700;text-decoration: none;color: #000;text-transform: uppercase;letter-spacing: 2px;position: relative;display: inline-block;font-size: 12px;background: transparent !important;}
.sidenav #menu1 li a:hover, .sidenav #menu1 li:last-of-type a:hover {color: #000;}
.sidenav #menu1 li:last-of-type a {margin: 0 auto;}
.sidenav #menu1 li img {max-width: 100%;width: 14px;margin: 13px 10px 0 0;float: left;}

#menu-mobile {display:block;bottom: 8px;right: 0;left: 0;z-index: 1000000;width: 93%;margin: auto;padding: 10px 3.5% 7px;background: #fff;backdrop-filter: blur(10px);position: fixed;box-shadow:-3px 0 12px rgba(0,0,0,0.1);border-radius: 30px;max-width: 400px;opacity: 0;animation: slideIn 0.75s forwards;}
@keyframes slideIn {
  from {
      opacity: 0;
      transform: translateY(55px); /* Start from -55px below the final position */
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}
#menu-mobile .menu {width: 100%;padding:0 0% 5px;max-width: 500px;margin:auto;float: none;}
#menu-mobile .menu .button {width: 20%;  padding: 2px 0 3px;float:left;text-align: center;cursor: pointer;}
/*#menu-mobile .menu .button .main, .close .button {width:90%;padding: 0 5%;transform: translate(0, -70%);cursor: pointer;}*/
#menu-mobile .menu .button .ico {width: 26%;padding: 0 0 5px;margin: 0 auto;}
#menu-mobile .menu a {text-transform: uppercase;color:#000;font-weight: 600;}
#menu-mobile .menu .gray span {display: block;font-size: 7px;  letter-spacing: 1.5px;}
.menu img {display:block !important;}
.mobile-menu {display: grid;}
.overlay {height: 0%;width: 100%;position: fixed;z-index: 1;bottom: 0;left: 0;background-color: rgb(37, 37, 37);background-color: #000000f0;overflow-y: hidden;transition: 0.5s;z-index: 999;}
.overlay-content {position: relative;top: 18%;width: 100%;text-align: center;margin-top: 30px;}
.overlay a {float: left;height: auto;padding: 5px 0;color: #929292 !important;font-size: 1.32em;text-decoration: none;font-weight: 600;margin: 5px auto;transition: 0.5s;font-family: 'poppins';}
.overlay a:hover, .overlay a:focus {color: #fff !important;}
.overlay .closebtn {position: absolute;top: 0;left: 30px;font-size: 50px;}
.colse{height:76px;width:100px;}
.exit {width: 100%;margin: auto;bottom: 76px;position: absolute;transform: translate(0%, 54%);}
.exit img {width: 20%;padding: 0 5%;transform: translate(0, -70%);  cursor: pointer;}
#myNav {display: block;}

.sidenav {display:block;height: 100%;width: 0;position: fixed;z-index: 100;top: 0;right: 0;background-color: #fffffff9;backdrop-filter: blur(10px);overflow-x: hidden;transition: 0.5s;padding-top: 80px;}
.sidenav a {padding: 8px 8px 8px ;text-decoration: none;font-size: 25px;display: block;transition: 0.3s;}
.sidenav a:hover {color: #aaa;border: 0;}
.sidenav .closebtn {position: absolute; top: 0;right: 25px;font-size: 42px;margin-left: 50px;color:#11406e;font-weight:300;}     

@media (min-width:1060px) {
#menu-mobile {display: none;}
#menu1 {display: block;}
}