.elementor-64 .elementor-element.elementor-element-de793b5{--display:flex;--min-height:90vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--padding-top:0px;--padding-bottom:080px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-de793b5:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-de793b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-64 .elementor-element.elementor-element-5ec2417{--display:flex;--min-height:90vh;}.elementor-64 .elementor-element.elementor-element-2655705{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;}.elementor-64 .elementor-element.elementor-element-ecf29ab{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-counter .elementor-counter-number-wrapper{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-counter .elementor-counter-title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-64 .elementor-element.elementor-element-6f68d5d .elementor-counter-title{justify-content:start;color:#54595F;font-family:"Work Sans", Sans-serif;font-size:12px;font-weight:400;}.elementor-64 .elementor-element.elementor-element-6f68d5d .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#000000;font-family:"Work Sans", Sans-serif;font-weight:200;}.elementor-64 .elementor-element.elementor-element-88b2a26 .elementor-counter-title{justify-content:start;color:#54595F;font-family:"Work Sans", Sans-serif;font-size:12px;font-weight:400;}.elementor-64 .elementor-element.elementor-element-88b2a26 .elementor-counter-number-wrapper{text-align:{{VALUE}};--counter-prefix-grow:0;--counter-suffix-grow:1;--counter-number-grow:0;color:#000000;font-family:"Work Sans", Sans-serif;font-weight:200;}.elementor-64 .elementor-element.elementor-element-c047225{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-64 .elementor-element.elementor-element-44e8ad4 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:158px;font-weight:300;color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-64 .elementor-element.elementor-element-1e41c5d{text-align:center;font-family:"Work Sans", Sans-serif;font-weight:300;color:#000000;}.elementor-64 .elementor-element.elementor-element-d5811c0{text-align:start;font-family:"Work Sans", Sans-serif;font-weight:400;}.elementor-64 .elementor-element.elementor-element-94f2459{--display:flex;}.elementor-64 .elementor-element.elementor-element-a1ace55{--display:flex;--justify-content:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-64 .elementor-element.elementor-element-e264649 img{max-width:120%;}.elementor-64 .elementor-element.elementor-element-3ef0472{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-64 .elementor-element.elementor-element-3ef0472:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-3ef0472 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-64 .elementor-element.elementor-element-b6e771b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 020px 0px;text-align:center;}.elementor-64 .elementor-element.elementor-element-b6e771b .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:97px;font-weight:300;color:#000000;}.elementor-64 .elementor-element.elementor-element-a64c2d1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 25px;--row-gap:20px;--column-gap:25px;--padding-top:0px;--padding-bottom:0100px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-a64c2d1:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-a64c2d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-64 .elementor-element.elementor-element-76f5b31{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-64 .elementor-element.elementor-element-a59fa79{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-64 .elementor-element.elementor-element-e7d2ef3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-64 .elementor-element.elementor-element-a81a8cd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-64 .elementor-element.elementor-element-fbbd6a3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-fbbd6a3:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-fbbd6a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-64 .elementor-element.elementor-element-8d05918{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 020px 0px;text-align:center;}.elementor-64 .elementor-element.elementor-element-8d05918 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:97px;font-weight:300;color:#000000;}.elementor-64 .elementor-element.elementor-element-cdb54fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-64 .elementor-element.elementor-element-cdb54fa:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-cdb54fa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}@media(max-width:1024px){.elementor-64 .elementor-element.elementor-element-ecf29ab{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-64 .elementor-element.elementor-element-de793b5{--content-width:1380px;}.elementor-64 .elementor-element.elementor-element-5ec2417{--width:1%;}.elementor-64 .elementor-element.elementor-element-2655705{--width:70%;}.elementor-64 .elementor-element.elementor-element-a1ace55{--width:72%;}.elementor-64 .elementor-element.elementor-element-a64c2d1{--content-width:1600px;}.elementor-64 .elementor-element.elementor-element-76f5b31{--width:25%;}.elementor-64 .elementor-element.elementor-element-a59fa79{--width:25%;}.elementor-64 .elementor-element.elementor-element-e7d2ef3{--width:25%;}.elementor-64 .elementor-element.elementor-element-a81a8cd{--width:25%;}.elementor-64 .elementor-element.elementor-element-cdb54fa{--content-width:1600px;}}@media(max-width:767px){.elementor-64 .elementor-element.elementor-element-ecf29ab{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-f0e0409 */.hero{ position: relative; min-height: 80vh; }

.vertical-rail{
  position: absolute;
  left: -40px;
  top: 40px;          /* start pod menu */
  bottom: 60px;       /* koniec nad dołem */
  width: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 500;                 /* baza */
  color: rgba(0,0,0,.65);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;

  z-index: 50;
  pointer-events: none;
}

.vertical-rail .vn-top,
.vertical-rail .vn-bottom{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.vertical-rail .vn-line{
  flex: 1;
  min-height: 400px;            /* żeby linia nie znikała */
  width: 0;
  border-left: 1px solid rgba(0,0,0,.28);
  margin: 14px 0;
}

.vertical-rail .vn-bottom{
  font-weight: 600;             /* brand trochę mocniej */
}

/* ===== RESPONSYWNOŚĆ ===== */

/* tablet */
@media (max-width: 1024px){
  .vertical-rail{
    left: -30px;
    top: 30px;
    bottom: 40px;
  }
  .vertical-rail .vn-line{
    min-height: 360px;
  }
}

/* mobile — ukrywamy */
@media (max-width: 767px){
  .vertical-rail{
    display: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-d5811c0 */.hero-microproof{
  white-space: nowrap;
}
@media (max-width: 767px){
  .hero-microproof{ white-space: normal; }
}
/* kontener na CTA pod nagłówkiem */
.hero-cta-row{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  margin-top: 22px;
}

/* PRIMARY: używa Twojego .cta-corners (narożniki L) */
.hero-cta-primary .elementor-button{
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* SECONDARY: tekstowy link, minimalistyczny */
.hero-cta-secondary a,
.hero-cta-secondary .elementor-button{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;

  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  color: rgba(0,0,0,.70) !important;
  text-decoration: none !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  transition: color .15s ease, transform .15s ease;
}

/* mały “chevron” bez ikonki (opcjonalnie) */
.hero-cta-secondary a::after,
.hero-cta-secondary .elementor-button::after{
  content: "→";
  opacity: .7;
  transform: translateX(0);
  transition: transform .15s ease, opacity .15s ease;
}

.hero-cta-secondary a:hover,
.hero-cta-secondary .elementor-button:hover{
  color: rgba(0,0,0,.95) !important;
  transform: translateY(-1px);
}

.hero-cta-secondary a:hover::after,
.hero-cta-secondary .elementor-button:hover::after{
  transform: translateX(2px);
  opacity: 1;
}

/* micro-proof linijka */
.hero-microproof{
  flex-basis: 100%;
  margin-top: 2px;

  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(0,0,0,.55);
}

/* mobile: trochę ciaśniej */
@media (max-width: 767px){
  .hero-cta-row{ gap: 14px 16px; }
  .hero-microproof{ font-size: 11px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d923bac */.hero{ position: relative; }

/* pozycja na dole (dopasuj) */
.scroll-mouse{
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 34px;
  height: 54px;

  border: 1px solid rgba(0,0,0,.35);
  border-radius: 999px;

  display: inline-block;
  text-decoration: none !important;

  z-index: 60;
  -webkit-tap-highlight-color: transparent;
}

/* kropka w środku */
.scroll-mouse__wheel{
  position: absolute;
  left: 50%;
  top: 14px;                 /* start kropki */
  width: 6px;
  height: 6px;
  margin-left: -3px;

  border-radius: 50%;
  background: rgba(0,0,0,.55);

  animation: wheelDown 1.35s ease-in-out infinite;
}

@keyframes wheelDown{
  0%   { transform: translateY(0);   opacity: .9; }
  60%  { transform: translateY(14px); opacity: .25; }
  100% { transform: translateY(18px); opacity: 0; }
}

/* hover subtelnie */
.scroll-mouse:hover{
  border-color: rgba(0,0,0,.55);
}
.scroll-mouse:hover .scroll-mouse__wheel{
  background: rgba(0,0,0,.75);
}

/* mobile opcjonalnie ukryj */
@media (max-width: 767px){
  .scroll-mouse{ display: none !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2655705 */.hero-left{
  display: grid !important;
  grid-template-rows: auto 1fr !important; /* liczniki / reszta */
  min-height: 90vh;
  row-gap: 120px; /* KLUCZ: odstęp między licznikami a resztą */
}

/* liczniki – niech nie pchają się marginem */
.hero-left .elementor-widget-counter{
  margin-top: 20px !important;
}

/* teksty: równo pod licznikami, ale zrobione przez row-gap */
.hero-left .hero-copy{
  align-self: start !important;
  justify-self: start !important;
  transform: translateX(0) !important;
}

/* opis pod tytułem */
.hero-left .hero-copy .elementor-widget-text-editor{
  margin-top: 14px !important;
  margin-left: 15px;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e264649 *//* FUTURE MINIMAL 3D: wrapper daje perspektywę */
.mb-future{
  perspective: 1600px;
  perspective-origin: 60% 35%;
}

/* animujemy obrazek */
.mb-future img{
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  transform-origin: 70% 75%;
  backface-visibility: hidden;

  opacity: 0;
  filter: blur(2px);

  animation:
    mbFutureIn 1.05s cubic-bezier(.16, 1, .3, 1) .10s forwards,
    mbFutureFloat 5.8s ease-in-out 1.25s infinite;
}

/* wejście: bardziej "tech" (czysty easing, mały overshoot, zero przesady) */
@keyframes mbFutureIn{
  0%{
    opacity: 0;
    filter: blur(3px);
    transform:
      translate3d(240px,-26px,260px)
      rotateY(-82deg) rotateX(18deg) rotateZ(10deg)
      scale(.95);
  }
  55%{
    opacity: 1;
    filter: blur(0px);
    transform:
      translate3d(0,0,0)
      rotateY(16deg) rotateX(-4deg) rotateZ(-2.5deg)
      scale(1.01);
  }
  78%{
    transform:
      translate3d(0,10px,0)
      rotateY(-6deg) rotateX(2deg) rotateZ(1.2deg)
      scale(1);
  }
  100%{
    opacity: 1;
    filter: blur(0px);
    transform:
      translate3d(0,0,0)
      rotateY(0deg) rotateX(0deg) rotateZ(0deg)
      scale(1);
  }
}

/* stała lewitacja: bardzo subtelna + mikro-rotacja */
@keyframes mbFutureFloat{
  0%,100%{
    transform: translate3d(0,0,0) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  }
  50%{
    transform: translate3d(0,-10px,0) rotateY(-2.2deg) rotateX(1.2deg) rotateZ(-0.8deg);
  }
}

/* minimalistyczny "specular/shine" – pseudo-połysk po ekranie */
.mb-future::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  opacity: 0;
  mix-blend-mode: soft-light;

  background:
    radial-gradient(60% 40% at 60% 20%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%);

  transform: translate3d(40px,-20px,0) rotate(-8deg);
  animation: mbShine 1.05s cubic-bezier(.16, 1, .3, 1) .10s forwards;
}

@keyframes mbShine{
  0%{ opacity: 0; }
  45%{ opacity: .55; }
  100%{ opacity: .18; }
}

/* jeśli wrapper nie jest pozycjonowany, dopnij */
.mb-future{ position: relative; }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .mb-future img, .mb-future::after{ animation: none !important; opacity: 1 !important; filter: none !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a64c2d1 *//* ===== USŁUGI (tylko ta sekcja) ===== */
.wn-services{
  padding: 2px 2px;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.wn-services__wrap{ max-width: 720px; margin: 0 auto; }

.wn-services__title{
  margin: 0 0 10px;
  font-size: clamp(20px, 4vw, 27px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.wn-services__lead,
.wn-services__p{
  color: rgba(0,0,0,.70);
  line-height: 1.6;
  font-size: 12px;
}

.wn-services__lead{ margin: 0 0 28px; }
.wn-services__p{ margin: 0; max-width: 62ch; line-height: 1.65; }

.wn-services__list{ display: grid; gap: 22px; }

.wn-services__item{ position: relative; padding-left: 14px; }

.wn-services__h3{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* kropka + oddychanie */
.wn-services__item::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  transform-origin:center;
  animation: wnDotBreath 2.4s ease-in-out infinite;
}

.wn-services__item:nth-child(2)::before{ animation-delay: .15s; }
.wn-services__item:nth-child(3)::before{ animation-delay: .30s; }
.wn-services__item:nth-child(4)::before{ animation-delay: .45s; }

@keyframes wnDotBreath{
  0%,100%{ transform: scale(1); opacity:.45; }
  50%{ transform: scale(1.35); opacity:.18; }
}

/* pasek na dole */
.wn-services__tags{
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  flex-wrap:wrap;
  gap: 5px;
  align-items:center;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}
.wn-services__sep{ opacity:.55; }


/* ===== RAMKA L-KI (corner-box) ===== */
.corner-box{
  position: relative;

  --line: 2px;
  --c: rgba(0,0,0,.78);
  --gap: 28px;

  /* długości rogów */
  --tl-h: 82px;  --tl-v: 160px;
  --tr-h: 40px;  --tr-v: 40px;
  --bl-h: 40px;  --bl-v: 40px;
  --br-h: 160px; --br-v: 82px;

  /* hover: “łączenie” */
  --h-hover: 92%;
  --v-hover: 88%;

  /* offset “na zewnątrz” */
  --off: 8px;
}

.corner-box__inner{
  position: relative;
  padding: var(--gap);
}

/* wspólne dla rogów */
.corner-box::before,
.corner-box::after,
.corner-box__inner::before,
.corner-box__inner::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.95;
  background-repeat:no-repeat;

  /* 2-etap: najpierw width, potem height */
  transition:
    width .34s ease,
    height .34s ease .14s,
    opacity .25s ease;

  background-image:
    linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c));
  background-size:
    var(--line) 100%,
    100% var(--line);
}

/* pozycje + offsety */
.corner-box::before{ top:0; left:0;  transform: translate(calc(-1 * var(--off)), calc(-1 * var(--off))); }
.corner-box::after{  top:0; right:0; transform: translate(var(--off), calc(-1 * var(--off))); }
.corner-box__inner::before{ bottom:0; left:0;  transform: translate(calc(-1 * var(--off)), var(--off)); }
.corner-box__inner::after{  bottom:0; right:0; transform: translate(var(--off), var(--off)); }

/* wymiary rogów */
.corner-box::before{ width: var(--tl-h); height: var(--tl-v); background-position: 0 0, 0 0; }
.corner-box::after{  width: var(--tr-h); height: var(--tr-v); background-position: 100% 0, 0 0; }
.corner-box__inner::before{ width: var(--bl-h); height: var(--bl-v); background-position: 0 0, 0 100%; }
.corner-box__inner::after{  width: var(--br-h); height: var(--br-v); background-position: 100% 0, 0 100%; }

/* hover “łączenia” */
.corner-box:hover::before,
.corner-box:hover::after,
.corner-box:hover .corner-box__inner::before,
.corner-box:hover .corner-box__inner::after{
  width: var(--h-hover);
  height: var(--v-hover);
  opacity: 1;
}

/* reverse też 2-etapowo (najpierw height, potem width) */
.corner-box:not(:hover)::before,
.corner-box:not(:hover)::after,
.corner-box:not(:hover) .corner-box__inner::before,
.corner-box:not(:hover) .corner-box__inner::after{
  transition:
    height .28s ease,
    width .34s ease .10s,
    opacity .25s ease;
}


/* ===== dostępność (wyłącza animacje) ===== */
@media (prefers-reduced-motion: reduce){
  .wn-services__item::before{ animation: none; }
  .corner-box::before,
  .corner-box::after,
  .corner-box__inner::before,
  .corner-box__inner::after{ transition: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1189458 *//* =========================
   REALIZACJE / SLIDER (SCROLL LOOP) — FINAL
   ========================= */

.wn-services__wrap--wide{
  max-width: 1600px;
  margin: 0 auto;
}

.wn-slider{
  position: relative;
  margin-top: 16px;

  --gap: 22px;
  --pad: 14px;
  --edge: 70px;  /* miejsce na strzałki + rogi */
  --peek: 0px;
}

/* TRACK = flex + scrollLeft (musi być auto!) */
.wn-slider__track{
  display: flex;
  gap: var(--gap);

  overflow-x: auto !important;     /* WYMAGANE dla scrollLeft */
  overflow-y: visible !important;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  padding: var(--pad) calc(var(--pad) + var(--edge));
  scroll-padding-left: calc(var(--pad) + var(--edge));
  scroll-padding-right: calc(var(--pad) + var(--edge));

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  perspective: 1100px;
  transform-style: preserve-3d;
}
.wn-slider__track::-webkit-scrollbar{ height: 0; }

/* slide: 2-up */
.wn-slide{
  flex: 0 0 calc((100% - var(--gap) - var(--peek)) / 2);
  scroll-snap-align: start;

  transform-style: preserve-3d;
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  will-change: transform, filter, opacity;
}

.wn-slide__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.wn-slide__body{ padding-top: 10px; }
.wn-slide__title{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wn-slide__desc{
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(0,0,0,.70);
  max-width: 62ch;
}

/* ===== okno przeglądarki ===== */
.wn-browser{
  position: relative;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.02);

  --line: 2px;
  --c: #000;
  --off: 10px;

  --tl-h: 34px; --tl-v: 42px;
  --br-h: 42px; --br-v: 34px;

  --h-hover: 92%;
  --v-hover: 88%;
}

.wn-browser__thumb{ position: relative; padding-top: 22px; }
.wn-browser__thumb::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 22px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.wn-browser__thumb::after{
  content:"";
  position:absolute;
  top: 7px;
  left: 10px;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.30);
  box-shadow: 12px 0 0 rgba(0,0,0,.22), 24px 0 0 rgba(0,0,0,.14);
  opacity: .9;
}
.wn-browser__thumb img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.01);
}

/* L-ki */
.wn-browser::before,
.wn-browser::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity: 1;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c));
  background-size: var(--line) 100%, 100% var(--line);
  transition: width .34s ease, height .34s ease .14s, opacity .25s ease;
}
.wn-browser::before{
  top: calc(-1 * var(--off));
  left: calc(-1 * var(--off));
  width: var(--tl-h);
  height: var(--tl-v);
  background-position: 0 0, 0 0;
}
.wn-browser::after{
  bottom: calc(-1 * var(--off));
  right: calc(-1 * var(--off));
  width: var(--br-h);
  height: var(--br-v);
  background-position: 100% 0, 0 100%;
}

.wn-slide__link:hover .wn-browser::before,
.wn-slide__link:hover .wn-browser::after{
  width: var(--h-hover);
  height: var(--v-hover);
}
.wn-slide__link:hover .wn-browser{
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.05);
}
.wn-slide__link:not(:hover) .wn-browser::before,
.wn-slide__link:not(:hover) .wn-browser::after{
  transition: height .28s ease, width .34s ease .10s, opacity .25s ease;
}

/* phone mockup */
.wn-phone{
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 148px;
  aspect-ratio: 9 / 19.5;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  overflow: hidden;
  z-index: 3;
}
.wn-phone::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.12);
  pointer-events:none;
}
.wn-phone::after{
  content:"";
  position:absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  pointer-events:none;
}
.wn-phone__screen{
  position:absolute;
  inset: 9px;
  border-radius: 16px;
  overflow: hidden;
}
.wn-phone__screen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.wn-slide__link:hover .wn-phone{
  transform: translateY(-2px) scale(1.02);
  transition: transform .35s ease;
}

/* arrows */
.wn-slider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  padding: 6px 10px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #000 !important;
  font-size: 54px !important;
  line-height: 1 !important;
  cursor: pointer;

  opacity: .55;
  transition: transform .22s ease, opacity .22s ease;

  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.wn-slider__btn:hover{
  opacity: 1;
  transform: translateY(calc(-50% - 3px));
}
.wn-slider__btn--prev{ left: 22px; }
.wn-slider__btn--next{ right: 22px; }

.wn-slider__btn:focus,
.wn-slide__link:focus{ outline:none !important; box-shadow:none !important; }
.wn-slider__btn:focus-visible{
  outline: 2px solid #000 !important;
  outline-offset: 6px;
  border-radius: 10px;
}
.wn-slide__link:focus-visible{
  outline: 2px solid #000 !important;
  outline-offset: 6px;
  border-radius: 18px;
}

/* responsive */
@media (max-width: 820px){
  .wn-slider{ --pad: 12px; --edge: 18px; --peek: 0px; }
  .wn-slide{ flex-basis: 100%; }
  .wn-slider__btn{ display:none !important; }
  .wn-phone{ width: 118px; right: 12px; bottom: 12px; }
}
@media (max-width: 520px){
  .wn-phone{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wn-slide{ transition:none; }
  .wn-browser::before, .wn-browser::after{ transition:none; }
  .wn-slider__track{ scroll-behavior:auto; }
}/* End custom CSS */