html, body, button, a {
  touch-action: manipulation;
}


/* 
 * REVEAL ANIMATION - Zoptymalizowane dla współpracy z accordionem
 */

/* Stan początkowy - element niewidoczny */
.reveal-init {
  opacity: 0 !important;
  will-change: opacity, transform;
}

/* Efekty slide - tylko podczas reveal (stan początkowy) */
.reveal-init[data-reveal-effect*="slide-up"] {
  transform: translateY(30px) !important;
}

.reveal-init[data-reveal-effect*="slide-down"] {
  transform: translateY(-30px) !important;
}

.reveal-init[data-reveal-effect*="slide-left"] {
  transform: translateX(30px) !important;
}

.reveal-init[data-reveal-effect*="slide-right"] {
  transform: translateX(-30px) !important;
}

/* Stan animacji - przejście do widoczności */
.reveal-revealed {
  opacity: 1 !important;
  transform: none !important;
  /* Używamy attr() nie działa, więc musimy ustawić wartość w JS lub użyć klas */
}

/* Różne długości animacji */
.reveal-revealed[data-reveal-duration="0.8"] {
  transition: opacity 0.8s ease, transform 0.8s ease !important;
}

.reveal-revealed[data-reveal-duration="0.85"] {
  transition: opacity 0.85s ease, transform 0.85s ease !important;
}

.reveal-revealed[data-reveal-duration="0.9"] {
  transition: opacity 0.9s ease, transform 0.9s ease !important;
}

.reveal-revealed[data-reveal-duration="1"] {
  transition: opacity 1s ease, transform 1s ease !important;
}

/* Fallback dla innych długości */
.reveal-revealed:not([data-reveal-duration]) {
  transition: opacity 0.8s ease, transform 0.8s ease !important;
}

/* Po zakończeniu reveal - element wraca do normalnego stanu */
/* NIE ma żadnych transition, transform ani will-change */
.reveal-active > *:not(.reveal-init):not(.reveal-revealed) {
  will-change: auto;
  /* Nie definiujemy transition - pozwalamy accordionowi zarządzać tym */
}

/* Optymalizacja: usuń will-change z całego kontenera po reveal */
.reveal-active:not(:has(.reveal-init)):not(:has(.reveal-revealed)) {
  will-change: auto;
}









.highlighted-orange, 
.intro-hero .intro-hero-wrapper strong,
.sec-free-consultation .wrapped strong
 { overflow:hidden; background:var(--text-special); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

@supports (-webkit-touch-callout:none) { 
  @media (max-device-width: 1024px) and (orientation: portrait),
         (max-device-width: 1024px) and (orientation: landscape) {
    .modal .highlighted-orange, 
    .kv .hero .highlighted-orange, 
    .kv .intro-hero .intro-hero-wrapper strong,
    .sec-free-consultation .wrapped strong,
    .sec-am-experience .wrapped .main-info h2 .main-nr-desc strong  { -webkit-text-stroke: 1.5px transparent; font-weight:var(--fw-800); } 
  }
}

    .kv .intro-hero .intro-hero-wrapper strong,
    .sec-free-consultation .wrapped strong { font-weight:var(--fw-900) !important; } 

.lead .highlighted-orange { overflow:hidden; -webkit-background-clip:text; -webkit-text-fill-color:transparent; /* font-weight:800;*/ }

/*
.highlighted-orange-color { color:var(--basic-color-orange); font-weight:600; color:#fff; border:2px solid var(--basic-color-orange); padding: 1px 16px; text-align:center; border-radius:24px; display:inline-block; margin: auto 3px } */


.highlighted-orange-color { /*font-weight:800;*/ text-align:center; display:inline-block; position:relative }

.highlighted-orange-color::after { position:absolute; bottom:2px; left:0; content:""; height:2px; width:100%; padding: -6px 0; z-index:-1; }

.nowrap { white-space: nowrap; }
.ta-c { text-align:center; }
.ta-l { text-align:left; }

*{box-sizing:border-box}

html,body{height:100%}

    body{
      margin:0;
      background:var(--bg-page); /* color:#111;*/
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale; }
    

a, button, button span { cursor:pointer; }
a, button, input { transition: all 0.4s ease; }
* {
  -webkit-tap-highlight-color: transparent;
}
a:focus,
button:focus {
  outline: none;
}

[tabindex]:focus {
  outline: none !important;
}

.framework { overflow:hidden; }

/* header */
.header { margin:0 auto; }
.wrapped { margin:0 auto; display:flex; }



.section .section-header h2 { color:var(--section-text-heading); }
.section .section-header .lead,
.section .section-header .lead p { color:var(--section-text-primary); }

.section .lead { display:flex; flex-direction:column; gap:var(--paragraph-gap); }



.section p { color:var(--section-text-secondary); }
.section p strong { color:var(--section-text-heading); font-weight: var(--fw-700); }

  .section .wrapped  {
        gap: var(--section-gap);
  }

  .section { display:flex; flex-direction:column; gap:var(--section-gap); }
  .section-header { display:flex; flex-direction:column; }
  .section-header .header-container { display:flex; flex-direction:column; gap:var(--elements-gap-s); text-align:center; }
  .section-header .header-container .small-title { display:flex; margin:auto; width:auto; }

.section .headline-wrapper { display:flex; gap:var(--space-8); flex-direction:column; }
.section .headline-wrapper .small-title { color:var(--section-text-tertiary); width:fit-content;  }




  .section-content { font: var(--p-m-regular-font); letter-spacing: var(--p-m-regular-ls);  }



  .smlr-margin-top { margin-top:calc(-0.60 * var(--paragraph-gap)); }
  .smlr-margin-bottom { margin-bottom:calc(-0.60 * var(--paragraph-gap)); }

  .list--style-emoji { list-style-type: none; padding-left:0 !important; }
  .list--style-emoji li { list-style-type: none; display:block !important; }

  .list--style-disc { list-style-type: none; padding-left:0 !important; }
  .list--style-disc li { list-style-type: none; position: relative; }
  .list--style-disc li:before { content: ""; width: 9px; height: 9px; border-radius: 100%; position: absolute; left: 0; top: 6px; }
  .list--style-disc li span { position: relative; display:table; padding-left: 20px; }
  .list--style-disc li span span { display: inline; padding-left:0; }

  .list--style-decimal {list-style:none; padding-left:0 !important; counter-reset:li-counter;}
  .list--style-decimal li {list-style:none; position:relative; counter-increment:li-counter;}
  .list--style-decimal li:before {content:counter(li-counter) "."; position:absolute; left:0; top:0; font-weight:600; width:20px; text-align:left;}
  .list--style-decimal li span {position:relative; display:table; padding-left:22px;}





.sec-services .services-selector .panel-desktop .article-content ul.list--checked-list { list-style-type: none; padding-left:0 !important; display: grid; grid-template-columns: 1fr 1fr; /* dwie kolumny */ }



.list--double-col {  display: grid; grid-template-columns: 1fr 1fr; }


.list--single-col,
.sec-services .services-selector .panel-desktop .article-content ul.list--single-col
     { grid-template-columns: 1fr; }

.list--checked-list li span.list-item { position: relative; padding-left:24px; display:block; }

.list--checked-list li span.list-item:before { 
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0px solid var(--basic-color-orange);
  padding: 3px;
}



/* animacja po hover */
.btn:hover .btn--ico-shooting,
a:hover button .btn--ico-shooting,
.btn:hover .btn--ico-shooting {
  animation: shooting 1.2s cubic-bezier(.22,.9,.3,1) 1;
  animation-iteration-count: 1; /* dwa powtórzenia tej sekwencji */
  /* animation-fill-mode: none; (domyślnie) */
}

@keyframes shooting {
  0%   { transform: translateX(0);    opacity: 1; }
  28%  { transform: translateX(130%); opacity: 0; } /* 1: wystrzał */
  31%  { transform: translateX(-130%);opacity: 0; } /* pojawia się z lewej */
  58%  { transform: translateX(0);    opacity: 1; } /* zatrzymanie w środku */
  100% { transform: translateX(0);    opacity: 1; } /* KONIEC: środek */
}



.coder {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: nodding 6.5s infinite;
}




@keyframes nodding {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(10deg); }
  20%  { transform: rotate(-10deg); }
  30%  { transform: rotate(10deg); }
  40%  { transform: rotate(-10deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}


/*


.sec-services .services-selector .sidebar .tabs .a .article-content ul,
.sec-services .services-selector .panel-desktop ul,
.sec-services .services-selector .sidebar .tabs .a .article-content ol,
.sec-services .services-selector .panel-desktop ol {
  margin: 1em 0;
  padding-left: 2em;
}

.sec-services .services-selector .sidebar .tabs .a .article-content ul,
.sec-services .services-selector .panel-desktop ul {
  list-style-type: disc;
}

.sec-services .services-selector .sidebar .tabs .a .article-content ol,
.sec-services .services-selector .panel-desktop ol {
  list-style-type: decimal;
}


.sec-services .services-selector .sidebar .tabs .a .article-content ul li,
.sec-services .services-selector .panel-desktop ul li,
.sec-services .services-selector .sidebar .tabs .a .article-content ol li,
.sec-services .services-selector .panel-desktop ol li { 
  display:list-item; }

/* zagnieżdżone ul i ol wewnątrz list mają swoje style 
.sec-services .services-selector .sidebar .tabs .a .article-content ul ul,
.sec-services .services-selector .panel-desktop ul ul {
  list-style-type: circle;
}

.sec-services .services-selector .sidebar .tabs .a .article-content ul ul ul,
.sec-services .services-selector .panel-desktop ul ul ul {
ul ul ul {
  list-style-type: square;
}

.sec-services .services-selector .sidebar .tabs .a .article-content ol ol,
.sec-services .services-selector .panel-desktop ol ol {
  list-style-type: lower-alpha; /* a, b, c 
}

.sec-services .services-selector .sidebar .tabs .a .article-content ol ol ol,
.sec-services .services-selector .panel-desktop ol ol ol {
ol ol ol {
  list-style-type: lower-roman; /* i, ii, iii 
}

ul li:marker {
  color: red;        /* kolor kropki 
  font-size: 1.6em;  /* można nawet zmienić wielkość 
}

ol li:marker {
  color: blue;       /* kolor numeru 
  font-weight: bold; /* pogrubienie numeru
}

  .sec-services .services-selector .sidebar .tabs .a .article-content ul.list--style-emoji,
  .sec-services .services-selector .panel-desktop ul.list--style-emoji { list-style-type:none !important; padding-left:0 !important; margin-left:0 !important; }
  .sec-services .services-selector .sidebar .tabs .a .article-content ul.list--style-emoji li,
  .sec-services .services-selector .panel-desktop ul.list--style-emoji li { display:block !important; }*/



@media (min-width: 1px) and (max-width: 640px) {
  .wrapped { width:100%; display:flex; flex-direction:column; padding: 0 var(--wrapper-padding); gap:var(--section-gap) }

  .section-header { gap:var(--elements-gap); width:100%; margin:0 auto; }
  .section .lead { margin: 0 auto; width:100%; }

  .section .box .box-inner { padding:var(--small-box-padding); gap:var(--box-gap); border-radius:var(--box-br); border:1px solid var(--color-black-100); }

  .display-desktop { display:none; }
  .display-mobile { display:block; }
  .mobile--hide { visibility:hidden; } 
  .mobile--show { visibility:visible; } 
}


@media (min-width: 641px) and (max-width: 1023px) {
  .header { padding-top:var(--space-8); }
  .wrapped { max-width:100%; }

  .section .box .box-inner { padding:var(--small-box-padding); gap:var(--box-gap); border-radius:var(--box-br); border:1px solid var(--color-black-100); }
  .section-header { gap:var(--elements-gap); width:70vw; max-width:580px; margin:0 auto; }

  .sec-experience .lead {  }
  .sec-experience .section-content {}

  .sec-experience .block,
  .retailers-map .block-header { width:90vw; max-width:480px; margin:auto; }

  .sec-experience .experience.block { max-width:100%; }

  .sec-experience .block.exp { max-width:580px; }

  .retailers-map.block,
  .retailers-map .block-content { width:100%; max-width:86vw; }

  .retailers-map .block-content { width:100%;  }



  .display-desktop { display:block; }
  .display-mobile { display:none; }
}

@media (min-width: 1024px) and (max-width: 1199px) {

  .header { padding-top:var(--space-8); }
  .wrapped { max-width:100%; }

  .section .box .box-inner { padding:var(--small-box-padding); gap:var(--box-gap); border-radius:var(--box-br); border:1px solid var(--color-black-100); }
  .section-header { gap:var(--elements-gap); max-width:60vw; margin:0 auto; }

  .display-desktop { display:block; }
  .display-mobile { display:none; }

  .sec-experience .lead { max-width:620px; }
}


@media (min-width: 1200px) {
  .header { padding-top:var(--space-8); }
  .wrapped { max-width:100%; max-width:var(--width-wrap-1400); }

  .section .box .box-inner { padding:var(--small-box-padding); gap:var(--box-gap); border-radius:var(--box-br); border:1px solid var(--color-black-100); }
  .section-header { gap:var(--elements-gap); max-width:640px; margin:0 auto; }
  .section-header .lead,
  .sec-experience .block.retailers-map .lead,
  .sec-experience .block.retailers-logos .lead { width:38vw; min-width:580px; max-width:600px; }

  .sec-experience .retailers-map .block-header,
  .sec-experience .block,
  .sec-experience .retailers-logos .block-header,
  .retailers-map .block-header { width:70vw; max-width:680px; margin:auto; }

  .sec-experience .retailers-logos.block,
  .sec-experience .retailers-logos .block-content,
  .sec-experience .retailers-map.block,
  .sec-experience .retailers-map .block-content,
  .sec-experience .experience.block 
   { width:100% !important; max-width:none;  margin:auto;  }

  .sec-experience .block.exp { max-width:750px; }

  .section-header .lead,
  .sec-experience .block.retailers-map .lead,
  .sec-experience .block.retailers-logos .lead { margin:auto; }

  .display-desktop { display:block; }
  .display-mobile { display:none; }
}

@media (min-width: 1480px) {
  .section-header { max-width:720px;  }
.sec-experience .row-direction .lead { max-width: 550px; }
}