/* ==========================================================================
   JAAQOB | Tworzenie stron www (post 374) | nowe klasy strony
   Zasady: tylko klasy jq-www-*, bez nadpisywania klas motywu, bez style="".
   Elementy motywu stylujemy wyłącznie w zasięgu sekcji jq-www-* (selektor potomka).
   Przyciski (.btn) i linki (.link, .jq-www-link) zostają w stylu motywu.
   Wartości (kolory, fonty, obramowania) wzięte z motywu jaaqobnew.
   Ładować po CSS motywu (enqueue z zależnością od głównego arkusza).
   ========================================================================== */

/* Krytyczny CSS (plugin jaaqob-perf, assets/www-critical.css) ukrywa sekcje poniżej pierwszego ekranu (content-visibility: hidden),
   dopóki nie dojdą pełne style - tutaj je przywracamy (te same selektory, później w kaskadzie) */
main > section:not(.jq-www-hero):not(.jq-www-proof),
body > footer.footer {
  content-visibility: visible;
}

@media (max-width: 991px) {
  main > section.jq-www-proof {
    content-visibility: visible;
  }
}

/* ---------- Wspólne ---------- */
/* Secondary (.btn--border): hover = koral + biały tekst (motyw wypełnia navy) */
.btn--border:after {
  background: #ec7c6b;
}

.btn--border:hover,
.btn--border:focus-visible {
  color: #fff;
}

/*
  Mobile: wszystkie CTA jak .nav__consultations
  (motyw: max-width 767px → width 100%, padding 16/12, font .btn 12/14).
*/
@media (max-width: 767px) {
  .jq-www-hero .btn,
  .jq-www-section .btn,
  .jq-www-price .btn,
  .jq-www-form .btn,
  .jq-www-cases .btn,
  .jq-www-ai .btn,
  .jq-www-dark .btn,
  .jq-www-services .btn,
  .offer-page-single__qa--www-services .btn,
  .jq-www-faq__more-btn {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding-top: 16px;
    padding-bottom: 12px;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.1em;
    text-align: center;
    white-space: normal;
  }

  .jq-www-hero .btn:not(.btn--border),
  .jq-www-section .btn:not(.btn--border),
  .jq-www-price .btn:not(.btn--border),
  .jq-www-form .btn:not(.btn--border),
  .jq-www-cases .btn:not(.btn--border),
  .jq-www-ai .btn:not(.btn--border),
  .jq-www-dark .btn:not(.btn--border),
  .jq-www-services .btn:not(.btn--border),
  .offer-page-single__qa--www-services .btn:not(.btn--border),
  .jq-www-sticky .btn:not(.btn--border) {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
  }

  .jq-www-hero__ctas,
  .jq-www-btns,
  .jq-www-faq__more {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .jq-www-hero__btn {
    flex-shrink: 1;
    white-space: normal;
  }

  .jq-www-price__btn,
  .jq-www-form__btn,
  .offer-page-single__dark-btn {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.1em;
  }
}

.jq-www-section {
  position: relative;
  padding: 96px 0;
}

.jq-www-section--soft {
  background-color: #f6f6f7;
}

.jq-www-after {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  color: #353746;
  font-size: 16px;
  line-height: 26px;
}

.jq-www-after--light {
  color: rgba(255, 255, 255, 0.8);
}

.jq-www-link {
  color: #ec7c6b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.3s ease-in-out;
}

.jq-www-link:hover,
.jq-www-link:focus-visible {
  color: #222c49;
}

.jq-www-after--light .jq-www-link:hover,
.jq-www-after--light .jq-www-link:focus-visible {
  color: #fff;
}

.jq-www-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.jq-www-dark {
  overflow: hidden;
}

/* Desktop: nagłówki i leady na środku; mobile: do lewej (niżej) */
.jq-www-head-center {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: wrap;
}

.jq-www-lead-center {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 52px;
  text-align: center;
  text-wrap: pretty;
  font-size: 16px;
  line-height: 26px;
}

/*
  Odstęp nagłówek → podtytuł: jak w korzyściach B2B
  (motyw: .c-icon-cards__title { margin-bottom: 13px }).
*/
.jq-www-head-center:has(+ .jq-www-lead-center),
.jq-www-b2b .c-icon-cards__title,
.jq-www-process-head .www-services-page__over-steps-title,
.jq-www-form__title,
.jq-www-ai .offer-page-single__dark-title,
.jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-title {
  margin-bottom: 13px;
}

.jq-www-head-center + .jq-www-lead-center,
.jq-www-b2b .c-icon-cards__title + .c-icon-cards__text,
.jq-www-process-head .www-services-page__over-steps-description,
.jq-www-process-head .jq-www-lead-center,
.jq-www-form__lead,
.jq-www-ai .jq-www-lead-center,
.jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-description {
  margin-top: 0;
}

/* Nagłówek bez podtytułu → treść: 52px */
.jq-www-head-center:not(:has(+ .jq-www-lead-center)):not(:has(+ .www-services-page__over-steps-description)):not(:has(+ .jq-www-form__lead)) {
  margin-bottom: 52px;
}

@media (max-width: 991px) {
  .jq-www-section {
    padding: 64px 0;
  }

  /* Nagłówek/lead → content sekcji: 32px */
  .jq-www-lead-center,
  .jq-www-b2b .c-icon-cards__text,
  .jq-www-cases .jq-www-lead-center,
  .jq-www-ai .jq-www-lead-center,
  .jq-www-form__head,
  .jq-www-price__head,
  .jq-www-proof__head,
  .jq-www-services__title,
  .jq-www-knowledge .offer-page-single__read-also-title,
  .offer-page-single__qa--www-services .offer-page-single__qa-title,
  .jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-description,
  .jq-www-head-center:not(:has(+ .jq-www-lead-center)):not(:has(+ .www-services-page__over-steps-description)):not(:has(+ .jq-www-form__lead)) {
    margin-bottom: 32px;
  }

  .jq-www-proof,
  .jq-www-ai,
  .jq-www-dark.offer-page-single__dark,
  .jq-www-wcag.offer-page-single__wcag,
  .offer-page-single__qa.offer-page-single__qa--www-services,
  .jq-www-knowledge,
  .offer-page-single__read-also.jq-www-knowledge {
    padding: 64px 0;
  }

  .www-services-page__over-steps.jq-www-process-head {
    padding: 64px 0 32px;
  }

  .jq-www-process {
    padding-bottom: 64px;
  }

  .jq-www-price > .container-md::before {
    margin: -64px 0 64px;
  }
}

/* ---------- Sygnet w tle (paralaksa: js/jq-www.js ustawia --jq-py, --jq-mx, --jq-my) ---------- */
.jq-www-hero {
  position: relative;
  /* x: ukryj wychodzący sygnet; y: widoczny — inaczej laptop/telefon są ucinane */
  /* clip zamiast hidden: hidden zamienia overflow-y na auto i ucina scenę w pionie */
  overflow-x: clip;
  overflow-y: visible;
}

.jq-www-b2b,
.jq-www-cases,
.jq-www-price,
.jq-www-form,
.jq-www-ai,
.jq-www-services {
  position: relative;
  overflow: hidden;
}

.jq-www-b2b > .container-md,
.jq-www-cases > .container-md,
.jq-www-price > .container-md,
.jq-www-form > .container-md,
.jq-www-ai > .container,
.jq-www-services > .container-md,
.jq-www-hero > .container {
  position: relative;
  z-index: 1;
}

.jq-www-deco {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: no-repeat center / contain;
  transform: translate3d(var(--jq-mx, 0px), calc(var(--jq-py, 0px) + var(--jq-my, 0px)), 0);
  will-change: transform;
}

/* Pełny sygnet (szary + koral) — tylko w hero, za laptopem, wychodzi w prawo */
.jq-www-deco--hero {
  top: -4%;
  right: -30%;
  width: 88%;
  max-width: 520px;
  aspect-ratio: 824 / 536;
  background-image: url("../../img/jq-www/sygnet/Right-false4.svg");
  opacity: 0.9;
}

@media (max-width: 991px) {
  .jq-www-deco--hero {
    top: 2%;
    right: -18%;
    width: 78%;
    opacity: 0.55;
  }
}

/* ---------- Animacje wejścia (klasy nadaje js/jq-www.js; bez JS treść jest widoczna) ---------- */
.jq-www-reveal [data-aos] {
  opacity: 0;
  transition:
    opacity 0.8s ease-out,
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.jq-www-reveal [data-aos="fade-up"] {
  translate: 0 32px;
}

.jq-www-reveal [data-aos="fade-left"] {
  translate: 48px 0;
}

.jq-www-reveal [data-aos="fade-right"] {
  translate: -48px 0;
}

.jq-www-reveal [data-aos="zoom-in"] {
  scale: 0.94;
}

/* Karty / kafle: wjazd od dołu (bez blur i bez 3D) */
.jq-www-reveal [data-aos="flip-up"] {
  translate: 0 40px;
}

.jq-www-reveal [data-aos].jq-www-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/*
  Mobile: tylko fade (bez translate/scale) — ostrość grafik na retina.
  Slidery boczne + case studies: od razu widoczne.
*/
@media (max-width: 991px) {
  .jq-www-reveal [data-aos],
  .jq-www-reveal [data-aos].jq-www-in {
    translate: none !important;
    scale: none !important;
    transform: none !important;
    transition: opacity 0.55s ease-out;
  }

  .jq-www-case:hover .jq-www-case__img img,
  .jq-www-case:hover .single-img,
  .jq-www-case:hover .single-realisation__img {
    transform: none;
  }

  .jq-www-reveal .jq-www-proof__list [data-aos],
  .jq-www-reveal .jq-www-b2b .c-icon-cards__row [data-aos],
  .jq-www-reveal .jq-www-b2b .jq-www-cards-row [data-aos],
  .jq-www-reveal .jq-www-ai__list [data-aos],
  .jq-www-reveal .jq-www-case[data-aos] {
    opacity: 1 !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

.jq-www-reveal [data-aos-delay="100"] { transition-delay: 0.1s; }
.jq-www-reveal [data-aos-delay="150"] { transition-delay: 0.15s; }
.jq-www-reveal [data-aos-delay="200"] { transition-delay: 0.2s; }
.jq-www-reveal [data-aos-delay="250"] { transition-delay: 0.25s; }
.jq-www-reveal [data-aos-delay="300"] { transition-delay: 0.3s; }
.jq-www-reveal [data-aos-delay="350"] { transition-delay: 0.35s; }
.jq-www-reveal [data-aos-delay="400"] { transition-delay: 0.4s; }
.jq-www-reveal [data-aos-delay="500"] { transition-delay: 0.5s; }
.jq-www-reveal [data-aos-delay="600"] { transition-delay: 0.6s; }

/* ---------- Karty 3D: pochylenie za kursorem + światło (js/jq-www.js, tylko mysz) ---------- */
/* Karty: bez tiltu 3D i bez koralowego glow pod kursorem */
.jq-www-card,
.jq-www-proof__item,
.jq-www-case,
.jq-www-ai__item,
.jq-www-services__card {
  position: relative;
  transition: border-color 0.3s ease-in-out, box-shadow 0.35s ease-in-out, background-color 0.45s ease-in-out;
}

/* ---------- 01 Hero ---------- */
.jq-www-hero {
  /* 0 na dole — odstęp 64px do „Zaufali nam” daje sama sekcja proof */
  padding: 16px 0 0;
}

.jq-www-hero__row {
  align-items: center;
}

.jq-www-hero__title,
.jq-www-hero .offer-page-single__top-title {
  margin-top: 0;
}

/* Pełna szerokość kolumny (motyw: --www-services max-width 405px) */
.jq-www-hero__text,
.jq-www-hero .offer-page-single__top-text-wrapper--www-services {
  width: 100%;
  max-width: 100%;
}

.jq-www-hero__title,
.jq-www-hero__desc,
.jq-www-hero__ai,
.jq-www-hero__note {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.jq-www-hero__title {
  text-wrap: pretty;
}

.jq-www-hero__desc {
  margin: 28px 0 28px;
}

.jq-www-hero__ai {
  margin: 0;
  padding: 16px 22px 16px 20px;
  border-left: 2px solid #ec7c6b;
  background: linear-gradient(90deg, #fbf1ef 0%, rgba(251, 241, 239, 0.35) 100%);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: #353746;
}

.jq-www-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}

@media (min-width: 1200px) {
  .jq-www-hero__ctas {
    flex-wrap: nowrap;
  }
}

.jq-www-hero__btn {
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}

/* cień jak .nav__consultations — tylko filled CTA */
.jq-www-hero__btn:not(.btn--border) {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
}

.jq-www-hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: #83858e;
  white-space: normal;
}

.jq-www-hero__note::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: url("../../img/jq-www/icons/check.svg") center / contain no-repeat;
}

.jq-www-hero__stage {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.88;
  min-height: 0;
  /* Odsunięcie od tekstu; wychodzi poza grid w prawo */
  margin: 0 -150px 0 8px;
}

.jq-www-hero__stage::before {
  content: none;
}

/* Kamera dopasowuje scenę do szerokości płótna — zapas w pionie, żeby laptop i telefon nie wystawały poza canvas */
.jq-www-hero__canvas {
  position: absolute;
  left: -10%;
  top: -16%;
  z-index: 1;
  display: block;
  width: 128%;
  height: 132%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.jq-www-hero__stage.is-ready .jq-www-hero__canvas {
  opacity: 1;
}

/* Grafika zastępcza tylko bez WebGL — nie pokazywać w trakcie ładowania 3D */
.jq-www-hero__fallback {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1;
  translate: 0 -50%;
  opacity: 0;
}

.jq-www-hero__fallback img {
  display: block;
  width: 100%;
  height: auto;
}

.jq-www-hero__stage.is-fallback .jq-www-hero__fallback {
  display: block;
  animation: jq-www-show 0.35s ease-out forwards;
}

@keyframes jq-www-show {
  to {
    opacity: 1;
  }
}

/* Bez WebGL albo bez sprzętowej grafiki: kadr sceny zamiast starej grafiki zastępczej */
.jq-www-hero__stage.is-fallback .jq-www-hero__poster ~ .jq-www-hero__fallback {
  display: none;
}

/* Komputer bez sprzętowej grafiki: kadr desktopowy w miejscu płótna (te same proporcje co .jq-www-hero__canvas) */
@media (min-width: 992px) {
  .jq-www-hero__stage.is-fallback .jq-www-hero__poster {
    position: absolute;
    left: -10%;
    top: -16%;
    z-index: 1;
    display: block;
    width: 128%;
    max-width: none;
    height: 132%;
    pointer-events: none;
    animation: jq-www-show 0.35s ease-out forwards;
  }

  .jq-www-hero__stage.is-fallback .jq-www-hero__poster img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
  }
}

/* Telefon i tablet: statyczny kadr sceny 3D (ostatnia klatka intro) do pierwszej interakcji,
   potem płótno z żywą sceną przykrywa go bez powtarzania intro (jq-www-hero3d.js) */
.jq-www-hero__poster {
  display: none;
}

@media (max-width: 991px) {
  .jq-www-hero__stage .jq-www-hero__poster {
    position: absolute;
    left: -6%;
    top: -4%;
    z-index: 1;
    display: block;
    width: 112%;
    max-width: none;
    height: 112%;
    pointer-events: none;
    transition: opacity 0.35s ease-out;
  }

  .jq-www-hero__stage .jq-www-hero__poster img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .jq-www-hero__stage.is-ready .jq-www-hero__poster {
    opacity: 0;
  }

}

/* Odstęp breadcrumbs → hero */
.breadcrumb__nav {
  margin-bottom: 8px;
}

/* Laptopy / średnie monitory: większa scena, bez ucinania */
@media (min-width: 992px) and (max-width: 1399px) {
  .jq-www-hero {
    padding: 32px 0 0;
  }

  .breadcrumb__nav {
    margin-bottom: 8px;
  }

  .jq-www-hero__desc {
    margin: 22px 0 20px;
  }

  .jq-www-hero__ai {
    padding: 12px 18px 12px 16px;
    font-size: 15px;
    line-height: 24px;
  }

  .jq-www-hero__ctas {
    margin-top: 28px;
  }

  .jq-www-hero__note {
    margin-top: 24px;
  }

  .jq-www-hero__stage {
    margin: 8px -90px 0 0;
  }
}

/* Niski viewport: mniejsza scena, ale bez agresywnego ucinania */
@media (min-width: 992px) and (max-height: 900px) {
  .jq-www-hero {
    padding: 24px 0 0;
  }

  .breadcrumb__nav {
    margin-bottom: 8px;
  }
}

@media (min-width: 992px) and (max-height: 780px) {
  .jq-www-hero {
    padding: 16px 0 0;
  }
}

@media (max-width: 1199px) {
  .jq-www-hero__stage {
    margin-right: -50px;
    margin-left: 0;
  }
}

@media (max-width: 991px) {
  .jq-www-hero {
    /* 0 na dole — odstęp 64px daje sama sekcja „Zaufali nam” (bez podwójnego) */
    padding: 12px 0 0;
  }

  .jq-www-hero__text {
    position: relative;
    z-index: 2;
    max-width: 100%;
  }

  .jq-www-hero__desc {
    margin: 24px 0 20px;
  }

  .jq-www-hero__stage {
    aspect-ratio: 1 / 0.8;
    max-height: none;
    margin: 28px 0 0;
  }

  .jq-www-hero__canvas {
    left: -6%;
    top: -4%;
    width: 112%;
    height: 112%;
  }
}

@keyframes jq-www-rise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- 02 Zaufali nam ---------- */
.jq-www-proof {
  padding: 96px 0;
}

.jq-www-proof__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 36px;
  margin-bottom: 52px;
}

.jq-www-proof__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Raleway-Bold";
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #222533;
}

.jq-www-proof__line {
  flex: 1 1 60px;
  height: 1px;
  background-color: rgba(224, 225, 226, 0.9);
}

.jq-www-proof__stats {
  display: flex;
  gap: 48px;
}

.jq-www-proof__stat {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.jq-www-proof__stat strong {
  font-family: "Raleway-Bold";
  font-weight: 500;
  font-size: 40px;
  line-height: 46px;
  color: #ec7c6b;
  font-variant-numeric: tabular-nums;
}

.jq-www-proof__stat span {
  font-size: 14px;
  line-height: 20px;
  color: #353746;
}

.jq-www-proof__list {
  list-style: none;
  padding: 0;
  row-gap: 24px;
}

.jq-www-proof__col {
  display: flex;
}

.jq-www-proof__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: 188px;
  margin: 0;
  padding: 26px 22px 24px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid rgba(224, 225, 226, 0.8);
}

.jq-www-proof__item:hover,
.jq-www-proof__item:focus-visible {
  border-color: #ec7c6b;
}

.jq-www-proof__item:focus-visible {
  outline: 2px solid #ec7c6b;
  outline-offset: 3px;
}

/* Jednokolorowe navy jak na jaaqob.pl; na hover oryginalne barwy marki */
.jq-www-proof__logo {
  width: auto;
  max-width: 150px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 18px;
  filter: brightness(0) saturate(100%) invert(13%) sepia(28%) saturate(1234%) hue-rotate(192deg) brightness(94%) contrast(92%);
  opacity: 1;
  transition: filter 0.35s ease-in-out;
}

.jq-www-proof__item:hover .jq-www-proof__logo,
.jq-www-proof__item:focus-visible .jq-www-proof__logo {
  filter: none;
}

.jq-www-proof__desc {
  flex-grow: 1;
  margin: 0 0 18px;
  min-height: 44px;
  font-size: 14px;
  line-height: 22px;
  color: #353746;
}

.jq-www-proof__ref {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  white-space: nowrap;
  /* jak .link / „Zobacz case study” — tekst navy, koral tylko podkreślenie (::after) i lupa */
  color: #222c49;
  transition: color 0.3s ease-in-out;
  pointer-events: none;
}

/* Hover całego kafła = pełne podkreślenie .link (motyw: .link:after width 36px → 100%) */
.jq-www-proof__item:hover .jq-www-proof__ref::after,
.jq-www-proof__item:focus-visible .jq-www-proof__ref::after,
.jq-www-case:hover .jq-www-case__more::after,
.jq-www-case:focus-within .jq-www-case__more::after,
.jq-www-services__card:hover .jq-www-services__more::after,
.jq-www-services__card:focus-visible .jq-www-services__more::after {
  width: 100%;
}

.jq-www-proof__ref-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

@media (max-width: 991px) {
  .jq-www-proof__line {
    display: none;
  }

  .jq-www-proof__stats {
    width: 100%;
  }

  /* Boczny slider — zawsze widać fragment następnego kafła */
  .jq-www-proof__list.row {
    flex-wrap: nowrap;
    align-items: stretch;
    column-gap: 0;
    row-gap: 0;
    margin-left: -15px;
    margin-right: -15px;
    padding: 4px 15px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .jq-www-proof__list.row::-webkit-scrollbar {
    display: none;
  }

  .jq-www-proof__col {
    /* 100vw - pad lewy - gap - peek następnego */
    flex: 0 0 calc(100vw - 15px - 12px - 40px);
    width: calc(100vw - 15px - 12px - 40px);
    max-width: calc(100vw - 15px - 12px - 40px);
    padding-left: 0;
    padding-right: 12px;
    scroll-snap-align: start;
  }

  .jq-www-proof__col:last-child {
    padding-right: 15px;
  }

  .jq-www-proof__item {
    min-height: 188px;
  }
}

@media (max-width: 767px) {
  .jq-www-proof__stat strong {
    font-size: 32px;
    line-height: 38px;
  }

  .jq-www-proof__list.row {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-inline: 20px;
  }

  .jq-www-proof__col {
    flex-basis: calc(100vw - 20px - 12px - 40px);
    width: calc(100vw - 20px - 12px - 40px);
    max-width: calc(100vw - 20px - 12px - 40px);
  }

  .jq-www-proof__col:last-child {
    padding-right: 20px;
  }
}

/* ---------- 03 Korzyści B2B: karty z odsłanianym opisem ---------- */
.jq-www-b2b.c-icon-cards {
  margin-top: 0; /* motyw: .c-icon-cards { margin-top: 80px } */
}

.jq-www-b2b .c-icon-cards__text {
  margin-bottom: 52px;
}

.jq-www-b2b .c-icon-cards__row,
.jq-www-cards-row {
  row-gap: 24px;
  margin-top: 0;
  padding-top: 0; /* motyw: .c-icon-cards__row { padding-top: 40px } → 52+40≈96 */
}

@media (max-width: 991px) {
  /* Boczny slider B2B — zawsze widać fragment następnego kafła */
  .jq-www-b2b .c-icon-cards__row.row,
  .jq-www-b2b .jq-www-cards-row {
    flex-wrap: nowrap;
    align-items: stretch;
    margin-left: -15px;
    margin-right: -15px;
    padding: 4px 15px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    row-gap: 0;
  }

  .jq-www-b2b .c-icon-cards__row.row::-webkit-scrollbar,
  .jq-www-b2b .jq-www-cards-row::-webkit-scrollbar {
    display: none;
  }

  .jq-www-b2b .c-icon-cards__item-wrapper {
    display: flex;
    flex: 0 0 calc(100vw - 15px - 12px - 40px);
    width: calc(100vw - 15px - 12px - 40px);
    max-width: calc(100vw - 15px - 12px - 40px);
    padding-left: 0;
    padding-right: 12px;
    scroll-snap-align: start;
    align-self: stretch;
  }

  .jq-www-b2b .c-icon-cards__item-wrapper:last-child {
    padding-right: 15px;
  }

  .jq-www-b2b .c-icon-cards__item,
  .jq-www-b2b .jq-www-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  /* Opisy kart −2px względem desktopu (16 → 14) */
  .jq-www-b2b .c-icon-cards__item-text,
  .jq-www-b2b .jq-www-card__more > .c-icon-cards__item-text {
    font-size: 14px;
    line-height: 22px;
  }
}

@media (max-width: 767px) {
  .jq-www-b2b .c-icon-cards__row.row,
  .jq-www-b2b .jq-www-cards-row {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-inline: 20px;
  }

  .jq-www-b2b .c-icon-cards__item-wrapper {
    flex-basis: calc(100vw - 20px - 12px - 40px);
    width: calc(100vw - 20px - 12px - 40px);
    max-width: calc(100vw - 20px - 12px - 40px);
  }

  .jq-www-b2b .c-icon-cards__item-wrapper:last-child {
    padding-right: 20px;
  }
}

.jq-www-card {
  height: 100%;
  padding: 32px 28px;
  background-color: #fff;
  border: 1px solid rgba(224, 225, 226, 0.8);
}

.jq-www-card--reveal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 36px 32px 30px;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  outline: none;
}

.jq-www-card--reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Hover: tylko granat, bez koralu / łososia */
  background: linear-gradient(155deg, #2a334d 0%, #222c49 48%, #1a2035 100%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.jq-www-card--reveal .c-icon-cards__item-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.jq-www-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
  border-radius: 50%;
  background-color: rgba(34, 44, 73, 0.06);
  overflow: hidden;
  transition: background-color 0.35s ease-in-out;
}

.jq-www-card__icon img {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: filter 0.45s ease-in-out;
}

.jq-www-card--reveal .c-icon-cards__item-title {
  margin: 24px 0 0;
  transition: color 0.45s ease-in-out;
}

.jq-www-card__more {
  display: block;
}

.jq-www-card__more > .c-icon-cards__item-text {
  margin: 0;
  padding-top: 14px;
  font-size: 14px;
  line-height: 22px;
  color: #353746;
  transition: color 0.45s ease-in-out;
}

.jq-www-card__mark {
  position: absolute;
  right: -28px;
  bottom: -30px;
  z-index: -1;
  width: 180px;
  height: 180px;
  opacity: 0.07;
  rotate: -8deg;
  /* SVG ikon są koralowe — wymuszamy navy, żeby nie było łososia w tle */
  filter: brightness(0) saturate(100%) invert(14%) sepia(24%) saturate(1186%) hue-rotate(191deg) brightness(93%) contrast(92%);
  transition: opacity 0.5s ease-in-out, scale 0.7s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease-in-out;
}

.jq-www-card--reveal:hover,
.jq-www-card--reveal:focus-visible,
.jq-www-card--reveal:focus-within {
  border-color: #222533;
}

.jq-www-card--reveal:hover::before,
.jq-www-card--reveal:focus-visible::before,
.jq-www-card--reveal:focus-within::before {
  opacity: 1;
}

/* Bez koralowego hoveru ikony — na ciemnym tle ikona zostaje jasna, bez wypełnienia koralem */
.jq-www-card--reveal:hover .jq-www-card__icon,
.jq-www-card--reveal:focus-visible .jq-www-card__icon,
.jq-www-card--reveal:focus-within .jq-www-card__icon {
  background-color: rgba(255, 255, 255, 0.12);
}

.jq-www-card--reveal:hover .jq-www-card__icon img,
.jq-www-card--reveal:focus-visible .jq-www-card__icon img,
.jq-www-card--reveal:focus-within .jq-www-card__icon img {
  filter: brightness(0) invert(1);
}

.jq-www-card--reveal:hover .c-icon-cards__item-title,
.jq-www-card--reveal:focus-visible .c-icon-cards__item-title,
.jq-www-card--reveal:focus-within .c-icon-cards__item-title {
  color: #fff;
}

.jq-www-card--reveal:hover .jq-www-card__more > .c-icon-cards__item-text,
.jq-www-card--reveal:focus-visible .jq-www-card__more > .c-icon-cards__item-text,
.jq-www-card--reveal:focus-within .jq-www-card__more > .c-icon-cards__item-text {
  color: rgba(255, 255, 255, 0.78);
}

.jq-www-card--reveal:hover .jq-www-card__mark,
.jq-www-card--reveal:focus-visible .jq-www-card__mark,
.jq-www-card--reveal:focus-within .jq-www-card__mark {
  opacity: 0.08;
  filter: brightness(0) invert(1);
}

.jq-www-card--reveal:focus-visible {
  outline: 2px solid #ec7c6b;
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .jq-www-b2b .c-icon-cards__item-wrapper {
    position: relative;
    z-index: 0;
  }

  .jq-www-b2b .c-icon-cards__item-wrapper:has(.jq-www-card--reveal:hover),
  .jq-www-b2b .c-icon-cards__item-wrapper:has(.jq-www-card--reveal:focus-within) {
    z-index: 2;
  }
}

@media (max-width: 991px) {
  .jq-www-card--reveal {
    min-height: 0;
  }
}

/* ---------- 04 Case studies ---------- */
.jq-www-cases .jq-www-lead-center {
  margin-bottom: 52px;
}

.jq-www-cases__row {
  margin-top: 0;
}

.jq-www-case {
  display: flex;
  flex-direction: column;
}

.jq-www-case__img {
  position: relative;
  height: auto;
  aspect-ratio: 425 / 420;
  margin: 0;
  overflow: hidden;
}

/* Nadpisanie motywu (absolute + object-fit:cover + transform) — ostre skalowanie */
.jq-www-case__img picture,
.jq-www-case__img img,
.jq-www-case .single-img,
.jq-www-case .single-realisation__img {
  position: static !important;
  display: block;
  top: auto !important;
  left: auto !important;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  object-fit: contain;
  image-rendering: auto;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

@media (hover: none), (max-width: 991px) {
  .jq-www-case:hover .jq-www-case__img img,
  .jq-www-case:hover .single-img,
  .jq-www-case:hover .single-realisation__img,
  .single-realisation.jq-www-case:hover .single-img {
    transform: none !important;
  }
}

.jq-www-case__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 28px 28px;
  text-align: left;
}

.jq-www-case__logo {
  width: auto;
  max-width: 150px;
  height: 28px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 16px;
}

.jq-www-case__desc {
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 24px;
  color: #353746;
}

.jq-www-case__more {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-top: auto;
}

/* Case studies: hover jak w motywie — ramka + zoom obrazka (.7s), bez podskoku karty */
.jq-www-case {
  overflow: hidden;
}

.jq-www-case__img img,
.jq-www-case .single-img,
.jq-www-case .single-realisation__img {
  transform: scale(1);
  transition: transform 0.7s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .jq-www-case:hover .jq-www-case__img img,
  .jq-www-case:hover .single-img,
  .jq-www-case:hover .single-realisation__img {
    transform: scale(1.1);
  }
}

/* ---------- 06 Cena ---------- */
.jq-www-price__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "line line"
    "head head"
    "includes intro"
    "includes aside";
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
}

/* Lekka kreska między formularzem wyceny a ceną — szerokość grida */
.jq-www-price > .container-md::before {
  content: "";
  display: block;
  grid-area: line;
  height: 1px;
  margin: -96px 0 96px;
  background-color: rgba(224, 225, 226, 0.9);
}

.jq-www-price__head {
  grid-area: head;
  max-width: 820px;
  margin: 0 auto 52px;
  text-align: center;
}

.jq-www-price__title {
  margin-bottom: 0;
  text-wrap: pretty;
}

.jq-www-price__intro {
  grid-area: intro;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 26px;
  color: #353746;
  text-wrap: pretty;
}

.jq-www-price__intro strong {
  font-family: "Raleway-Bold";
  font-weight: 500;
  color: #222c49;
}

.jq-www-price__includes {
  grid-area: includes;
  padding: 28px 28px 24px;
  background-color: #fff;
  border: 1px solid rgba(224, 225, 226, 0.9);
}

.jq-www-price__panel-title {
  margin: 0 0 16px;
  font-family: "Raleway-Bold";
  font-weight: 500;
  font-size: 21px;
  line-height: 30px;
  color: #222533;
}

.jq-www-price__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.jq-www-price__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  font-size: 15px;
  line-height: 24px;
  color: #353746;
}

.jq-www-price__item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.jq-www-price__aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  min-height: 100%;
  padding: 0;
}

.jq-www-price__facts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.jq-www-price__fact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.jq-www-price__fact-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(34, 44, 73, 0.06);
}

.jq-www-price__fact-icon img {
  width: 26px;
  height: 26px;
}

.jq-www-price__fact p {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: #353746;
  text-wrap: pretty;
}

.jq-www-price__btn {
  align-self: flex-start;
  margin: 0;
}

/* Lista „odhacza się” po wejściu w widok */
.jq-www-reveal .jq-www-price__includes .jq-www-price__list li {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.5s ease-out, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li {
  opacity: 1;
  translate: 0 0;
}

.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(1) { transition-delay: 0.1s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(2) { transition-delay: 0.15s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(3) { transition-delay: 0.2s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(4) { transition-delay: 0.25s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(5) { transition-delay: 0.3s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(6) { transition-delay: 0.35s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(7) { transition-delay: 0.4s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(8) { transition-delay: 0.45s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(9) { transition-delay: 0.5s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(10) { transition-delay: 0.55s; }
.jq-www-reveal .jq-www-price__includes.jq-www-in .jq-www-price__list li:nth-child(11) { transition-delay: 0.6s; }

@media (max-width: 991px) {
  .jq-www-price__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "line"
      "head"
      "intro"
      "includes"
      "aside";
    row-gap: 0;
    column-gap: 0;
  }

  .jq-www-price__head {
    margin: 0 auto 13px;
    text-align: left;
    max-width: none;
  }

  .jq-www-price__intro {
    margin: 0 0 32px;
  }

  .jq-www-price__includes {
    margin-bottom: 28px;
    padding: 28px 24px 22px;
  }

  .jq-www-price__aside {
    gap: 28px;
  }

  .jq-www-price__btn {
    display: none;
  }
}

.jq-www-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jq-www-checklist li {
  position: relative;
  padding: 7px 0 7px 34px;
  font-size: 15px;
  line-height: 24px;
  color: #353746;
}

.jq-www-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 22px;
  height: 22px;
  background: url("../../img/jq-www/icons/check.svg") center / contain no-repeat;
}


/* ---------- 07 Formularz wyceny ---------- */
.jq-www-form__head {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.jq-www-form__lead {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 26px;
  color: #353746;
}

.jq-www-form__row {
  align-items: stretch;
  row-gap: 48px;
}

.jq-www-form__fields {
  padding: 8px 32px 0 0;
}

.jq-www-form__fields .form-textarea {
  min-height: 140px;
}

.jq-www-form__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 36px 28px;
  overflow: hidden;
  isolation: isolate;
  background-color: #f6f6f7;
}

.jq-www-form__steps-title {
  margin-bottom: 20px;
  font-family: "Raleway-SemiBold";
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #83858e;
}

.jq-www-form__steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  counter-reset: jq-www-step;
}

.jq-www-form__step {
  position: relative;
  padding: 0 0 16px 56px;
  counter-increment: jq-www-step;
}

.jq-www-form__step::before {
  content: counter(jq-www-step);
  position: absolute;
  left: 0;
  top: -4px;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0 0 2px;
  border-radius: 50%;
  background-color: #ec7c6b;
  box-shadow: 0 0 0 6px #f6f6f7, 0 10px 24px rgba(236, 124, 107, 0.35);
  color: #fff;
  font-family: "Raleway-Bold";
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/* „3” w Raleway optycznie niżej niż 1/2 — dodatkowe podciągnięcie */
.jq-www-form__step:nth-child(3)::before {
  padding-bottom: 4px;
}

.jq-www-form__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: -2px;
  width: 2px;
  background: linear-gradient(180deg, rgba(236, 124, 107, 0.7), rgba(236, 124, 107, 0.15));
  transform-origin: top;
  transition: scale 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.jq-www-reveal .jq-www-form__step:not(:last-child)::after {
  scale: 1 0;
}

.jq-www-reveal .jq-www-form__step.jq-www-in:not(:last-child)::after {
  scale: 1 1;
}

.jq-www-form__step strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Raleway-Bold";
  font-weight: 500;
  font-size: 17px;
  line-height: 25px;
  color: #222533;
}

.jq-www-form__step p {
  margin: 0;
  font-size: 14px;
  line-height: 23px;
  color: #353746;
}

.jq-www-expert {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 16px 40px rgba(34, 37, 51, 0.06);
}

.jq-www-expert__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  align-self: start;
  object-fit: cover;
  object-position: 50% 22%;
}

.jq-www-expert__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px 16px 16px;
}

.jq-www-expert__text p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: #353746;
}

.jq-www-expert__name {
  font-size: 16px;
  line-height: 22px;
  color: #222533;
}

.jq-www-expert__role {
  color: #83858e;
}

.jq-www-expert__desc {
  margin-top: 4px;
}

@media (max-width: 991px) {
  .jq-www-form__aside {
    padding: 32px 24px 28px;
  }

  .jq-www-expert {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .jq-www-expert__photo {
    height: 100%;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 112px;
  }
}

.jq-www-form__hint {
  margin: 8px 0 16px;
  font-size: 13px;
  line-height: 20px;
  color: #83858e;
}

.jq-www-form__submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
}

.jq-www-form__btn {
  display: inline-block;
  width: auto;
  min-width: 280px;
  margin: 0;
  padding: 14px 40px;
  font-family: "Raleway-Bold";
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.jq-www-form__note {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: #83858e;
}

.jq-www-form__status {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid #ec7c6b;
  background-color: #fdf2f0;
  font-size: 14px;
  color: #222533;
}

@media (max-width: 991px) {
  .jq-www-form__head {
    margin-bottom: 32px;
    text-align: left;
  }

  .jq-www-form__fields {
    padding-right: 0;
  }

  .jq-www-form__btn {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- 09 Responsywność / WCAG ---------- */
@media (min-width: 992px) {
  .jq-www-wcag__top {
    align-items: center;
  }

  .jq-www-wcag__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .jq-www-wcag .offer-page-single__wcag-title {
    margin: 0 0 16px;
  }
}

.jq-www-wcag .offer-page-single__wcag-title {
  text-wrap: pretty;
}

.jq-www-wcag.offer-page-single__wcag {
  padding: 96px 0;
}

.offer-page-single__qa.offer-page-single__qa--www-services {
  padding: 96px 0;
}

/* ---------- 08 AI / GEO (ciemna sekcja) ---------- */
.jq-www-ai,
.jq-www-dark.offer-page-single__dark {
  padding: 96px 0;
}

.jq-www-ai .offer-page-single__dark-title {
  display: block;
  width: 100%;
  max-width: none;
  text-align: center;
  text-wrap: wrap;
}

.jq-www-ai__demo {
  max-width: 960px;
  margin: 0 auto;
}

.jq-www-ai .jq-www-lead-center,
.jq-www-ai .offer-page-single__dark-description--www-services {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 52px;
}

.jq-www-ai__chat {
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}

.jq-www-ai__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.jq-www-ai__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
}

.jq-www-ai__bar span {
  margin-left: auto;
  font-family: "Raleway-SemiBold";
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.jq-www-ai__bar .jq-www-ai__bar-title {
  overflow: hidden;
  margin-left: 14px;
  font-family: "Raleway-SemiBold";
  font-weight: 400;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.72);
}

.jq-www-ai__window {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

/* Historia rozmów jak w ChatGPT / Gemini */
.jq-www-ai__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(0, 0, 0, 0.14);
}

.jq-www-ai__new {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  font-family: "Raleway-SemiBold";
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}

.jq-www-ai__new svg,
.jq-www-ai__clip svg,
.jq-www-ai__send svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jq-www-ai__side-label {
  margin: 10px 10px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
}

.jq-www-ai__thread {
  overflow: hidden;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}

.jq-www-ai__thread--active {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.jq-www-ai__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jq-www-ai__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 24px 26px 8px;
}

.jq-www-ai__msg--q {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
  max-width: 78%;
}

.jq-www-ai__q-text {
  margin: 0;
  padding: 12px 18px;
  border-radius: 16px 16px 4px 16px;
  background-color: #ec7c6b;
  font-size: 15px;
  line-height: 23px;
  color: #fff;
}

/* Kafelek załącznika: w wiadomości i w polu wpisywania */
.jq-www-ai__file {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.05);
}

.jq-www-ai__file-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: #ec7c6b;
  font-family: "Raleway-Bold";
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
}

.jq-www-ai__file-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jq-www-ai__file-text strong {
  overflow: hidden;
  font-family: "Raleway-SemiBold";
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.9);
}

.jq-www-ai__file-text span {
  font-size: 12px;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.5);
}

.jq-www-ai__msg--a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
}

.jq-www-ai__thinking {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.jq-www-ai__dots {
  display: inline-flex;
  gap: 4px;
  padding: 11px 14px;
  border-radius: 4px 14px 14px 14px;
  background-color: rgba(255, 255, 255, 0.06);
}

.jq-www-ai__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.65);
  animation: jq-www-ai-dot 1.2s ease-in-out infinite;
}

.jq-www-ai__dots i:nth-child(2) { animation-delay: 0.15s; }
.jq-www-ai__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes jq-www-ai-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Pole wpisywania */
.jq-www-ai__composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 20px 20px;
  padding: 10px 10px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.04);
}

.jq-www-ai__file--draft {
  display: none;
  align-self: flex-start;
  max-width: min(320px, 100%);
}

.jq-www-ai__file-progress {
  display: none;
  overflow: hidden;
  width: 120px;
  height: 3px;
  margin: 7px 0 6px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.12);
}

.jq-www-ai__file-progress i {
  display: block;
  height: 100%;
  background-color: #ec7c6b;
  transform-origin: left center;
}

.jq-www-ai__input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jq-www-ai__clip {
  display: flex;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}

.jq-www-ai__field {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.9);
}

.jq-www-ai__placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.jq-www-ai__send {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

/* ---------- Przebieg animacji czatu (klasy stanu ustawia js/jq-www.js) ---------- */
@keyframes jq-www-ai-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes jq-www-ai-upload {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.jq-www-ai--pending .jq-www-ai__msg--q,
.jq-www-ai--pending .jq-www-ai__msg--a,
.jq-www-ai--pending .jq-www-ai__answer {
  display: none;
}

.jq-www-ai--attach .jq-www-ai__clip {
  color: #ec7c6b;
}

.jq-www-ai--attach .jq-www-ai__file--draft {
  display: flex;
  animation: jq-www-ai-in 0.35s ease-out both;
}

.jq-www-ai--attach .jq-www-ai__file-size {
  display: none;
}

.jq-www-ai--attach .jq-www-ai__file-progress {
  display: block;
}

.jq-www-ai--attach .jq-www-ai__file-progress i {
  animation: jq-www-ai-upload 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.jq-www-ai--uploaded .jq-www-ai__file-progress {
  display: none;
}

.jq-www-ai--uploaded .jq-www-ai__file-size {
  display: inline;
}

.jq-www-ai--drafting .jq-www-ai__placeholder {
  display: none;
}

.jq-www-ai--drafting .jq-www-ai__send {
  background-color: #ec7c6b;
  color: #fff;
}

.jq-www-ai--press .jq-www-ai__send {
  transform: scale(0.86);
}

.jq-www-ai--sent .jq-www-ai__file--draft {
  display: none;
}

.jq-www-ai--sent .jq-www-ai__placeholder {
  display: inline;
}

.jq-www-ai--sent .jq-www-ai__clip {
  color: rgba(255, 255, 255, 0.55);
}

.jq-www-ai--sent .jq-www-ai__send {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  transform: none;
}

.jq-www-ai--sent .jq-www-ai__msg--q {
  display: flex;
  animation: jq-www-ai-in 0.4s ease-out both;
}

.jq-www-ai--thinking .jq-www-ai__msg--a {
  display: flex;
  animation: jq-www-ai-in 0.4s ease-out both;
}

.jq-www-ai--thinking .jq-www-ai__thinking {
  display: flex;
}

.jq-www-ai--answering .jq-www-ai__thinking {
  display: none;
}

.jq-www-ai--answering .jq-www-ai__answer {
  display: block;
  animation: jq-www-ai-in 0.3s ease-out both;
}

.jq-www-ai__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(236, 124, 107, 0.14);
}

.jq-www-ai__answer {
  max-width: 82%;
  padding: 14px 18px;
  border-radius: 4px 16px 16px 16px;
  background-color: rgba(255, 255, 255, 0.06);
}

.jq-www-ai__typed {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.88);
}

.jq-www-ai__typed.jq-www-ai--typing::after,
.jq-www-ai__draft.jq-www-ai--typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -3px;
  background-color: #ec7c6b;
  animation: jq-www-caret 0.9s steps(2) infinite;
}

@keyframes jq-www-caret {
  50% { opacity: 0; }
}

.jq-www-ai__source {
  display: inline-flex;
  margin-top: 12px;
  padding: 4px 11px;
  border: 1px solid rgba(236, 124, 107, 0.5);
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  color: #ec7c6b;
  transition: opacity 0.5s ease-out, translate 0.5s ease-out;
}

.jq-www-ai--pending:not(.jq-www-ai--done) .jq-www-ai__source {
  opacity: 0;
  translate: 0 6px;
}

.jq-www-ai__list {
  margin-top: 40px;
  row-gap: 24px;
}

.jq-www-ai .jq-www-ai__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 36px;
  padding-bottom: 36px;
  text-align: left;
}

.jq-www-ai__item > * {
  position: relative;
}

.jq-www-ai__item::before {
  content: "";
  position: absolute;
  inset: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.03);
  transition: border-color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  pointer-events: none;
}

.jq-www-ai__item:hover::before {
  border-color: #ec7c6b;
  background-color: rgba(236, 124, 107, 0.06);
}

.jq-www-ai__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 24px;
  border-radius: 50%;
  background-color: rgba(236, 124, 107, 0.12);
  transition: background-color 0.35s ease-in-out;
}

.jq-www-ai .jq-www-ai__icon .icon-list__icon {
  width: 32px;
  height: 32px;
  margin: 0;
}

.jq-www-ai__item:hover .jq-www-ai__icon {
  background-color: rgba(236, 124, 107, 0.24);
}

.jq-www-ai .jq-www-ai__title {
  margin: 22px 0 10px;
  padding: 0 24px;
  font-family: "Raleway-Bold";
  font-weight: 500;
  font-size: 19px;
  line-height: 28px;
  text-align: left;
  color: #fff;
}

.jq-www-ai .jq-www-ai__item .jq-www-ai__text {
  margin: 0;
  padding: 0 24px;
  font-size: 15px;
  line-height: 24px;
  text-align: left;
  color: rgba(255, 255, 255, 0.75);
}

.jq-www-ai__after {
  margin-top: 40px;
  text-align: center;
  font-family: "Raleway-SemiBold";
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 991px) {
  /* Boczny slider AI — zawsze widać fragment następnego kafła */
  .jq-www-ai__list.row {
    flex-wrap: nowrap;
    align-items: stretch;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 32px;
    padding: 4px 15px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    row-gap: 0;
  }

  .jq-www-ai__list.row::-webkit-scrollbar {
    display: none;
  }

  .jq-www-ai .jq-www-ai__item {
    flex: 0 0 calc(100vw - 15px - 12px - 40px);
    width: calc(100vw - 15px - 12px - 40px);
    max-width: calc(100vw - 15px - 12px - 40px);
    padding-left: 0;
    padding-right: 12px;
    scroll-snap-align: start;
  }

  .jq-www-ai .jq-www-ai__item::before {
    inset: 0 12px 0 0;
  }

  .jq-www-ai .jq-www-ai__item:last-child {
    padding-right: 15px;
  }

  .jq-www-ai .jq-www-ai__item:last-child::before {
    inset: 0;
  }

  .jq-www-ai__after {
    margin-top: 28px;
  }
}

@media (max-width: 767px) {
  .jq-www-ai__list.row {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-inline: 20px;
  }

  .jq-www-ai .jq-www-ai__item {
    flex-basis: calc(100vw - 20px - 12px - 40px);
    width: calc(100vw - 20px - 12px - 40px);
    max-width: calc(100vw - 20px - 12px - 40px);
  }

  .jq-www-ai .jq-www-ai__item:last-child {
    padding-right: 20px;
  }
}

/* CTA końcowe: podtytuł → button = 52px */
.jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-title {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: wrap;
}

.jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-description {
  display: block;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 52px;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  text-wrap: pretty;
}

.jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-btn {
  display: table;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Mobile: nagłówki / leady / after do lewej; CTA na ciemnym tle zostaje wyśrodkowane */
@media (max-width: 991px) {
  .jq-www-head-center,
  .jq-www-services__title,
  .jq-www-b2b .c-icon-cards__title,
  .jq-www-cases .homepage__case-study-title,
  .jq-www-process-head .www-services-page__over-steps-title,
  .www-services-page__over-steps.jq-www-process-head,
  .jq-www-ai .offer-page-single__dark-title,
  .jq-www-form__head,
  .jq-www-form__title,
  .jq-www-price__head,
  .jq-www-price__title,
  .jq-www-price__intro,
  .offer-page-single__qa--www-services .offer-page-single__qa-title,
  .jq-www-knowledge .offer-page-single__read-also-title {
    display: block;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    text-wrap: wrap;
  }

  .jq-www-lead-center,
  .jq-www-after,
  .jq-www-b2b .c-icon-cards__text,
  .jq-www-cases .homepage__case-study-description,
  .jq-www-process-head .www-services-page__over-steps-description,
  .jq-www-process-head .jq-www-lead-center,
  .jq-www-ai .offer-page-single__dark-description,
  .jq-www-form__lead,
  .jq-www-ai__after {
    display: block;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-title,
  .jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-description {
    display: block;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: wrap;
  }

  .jq-www-dark:not(.jq-www-ai) .offer-page-single__dark-btn {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media (max-width: 991px) {
  .jq-www-ai__window {
    grid-template-columns: minmax(0, 1fr);
  }

  .jq-www-ai__side {
    display: none;
  }
}

@media (max-width: 767px) {
  .jq-www-ai__msg--q,
  .jq-www-ai__answer {
    max-width: 100%;
  }

  .jq-www-ai__msg--q {
    margin-left: 26px;
  }

  .jq-www-ai__body {
    padding: 20px 16px 4px;
  }

  .jq-www-ai__composer {
    margin: 10px 12px 14px;
  }

  .jq-www-ai__bar > span {
    display: none;
  }

  .jq-www-ai__q-text,
  .jq-www-ai__typed,
  .jq-www-ai__field {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ---------- 05 Proces ---------- */
/* Jedno ciągłe szare tło: odstęp 52px jako padding (nie margin — margin wychodził poza sekcję = biała szczelina) */
.www-services-page__over-steps.jq-www-process-head,
.offer-page-single__steps.jq-www-process,
.offer-page-single__steps--www-services.jq-www-process {
  margin-top: 0;
  margin-bottom: 0;
  background-color: #f6f6f7;
  border: 0;
  box-shadow: none;
}

.www-services-page__over-steps.jq-www-process-head {
  padding: 96px 0 52px;
  text-align: center;
}

.jq-www-process-head .www-services-page__over-steps-description,
.jq-www-process-head .jq-www-lead-center {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  text-wrap: pretty;
}

.jq-www-process {
  padding: 16px 0 96px;
}

.www-services-page__over-steps.jq-www-process-head + .jq-www-process {
  margin-top: 0;
}

.jq-www-process .offer-page-single__steps-img-wrapper {
  z-index: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

/* Motyw powiększa 1. grafikę ujemnymi marginami i ucina górę — tablety mają być identyczne */
@media (min-width: 768px) {
  .jq-www-process.offer-page-single__steps--www-services .row .img-wrapper {
    margin: 0 !important;
    justify-content: center;
  }

  .jq-www-process.offer-page-single__steps--www-services .row .img-wrapper img {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .jq-www-process.offer-page-single__steps--www-services .row .img-wrapper {
    margin: 4px 0 32px !important;
    justify-content: center;
  }
}

.jq-www-process .jq-www-device {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .jq-www-process .jq-www-device {
    max-width: 440px;
  }

  .jq-www-process .jq-www-device__shell {
    box-shadow:
      0 0 0 0.5px var(--jq-dev-rim-line),
      0 1px 2px rgba(18, 20, 28, 0.12),
      0 6px 12px -6px rgba(18, 20, 28, 0.2),
      0 18px 28px -16px rgba(18, 20, 28, 0.28);
  }
}

/* Krok 1: ten sam korpus; zrzut poza układem, żeby nie rozpychał tabletu */
.jq-www-device--static .jq-www-device__viewport {
  position: relative;
  background: #f4f6f8;
}

.jq-www-device--static .jq-www-device__page {
  position: absolute;
  inset: 0;
  width: calc(100% + 2px);
  max-width: none;
  height: 100%;
  margin-left: -1px;
  object-fit: cover;
  object-position: center;
  will-change: auto;
}

.jq-www-process .offer-page-single__steps-container::before,
.jq-www-process .offer-page-single__steps-container::after {
  z-index: 0;
}

.jq-www-process .offer-page-single__steps-single-step {
  position: relative;
  z-index: 1;
}

/* ---------- 12 Inne usługi (4 boxy) ---------- */
.jq-www-services__title {
  margin-bottom: 52px;
}

.jq-www-services__row {
  row-gap: 24px;
}

.jq-www-services__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid rgba(224, 225, 226, 0.8);
}

.jq-www-services__card:hover {
  border-color: #ec7c6b;
}

.jq-www-services__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  padding: 16px 12px;
  overflow: hidden;
  background-color: #f6f6f7;
}

.jq-www-services__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.7s ease-in-out;
}

.jq-www-services__card:hover .jq-www-services__img img {
  transform: scale(1.06);
}

.jq-www-services__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 24px 28px;
}

.jq-www-services__name {
  margin-bottom: 18px;
  font-family: "Raleway-Bold";
  font-weight: 500;
  font-size: 19px;
  line-height: 28px;
  color: #222c49;
}

.jq-www-services__more {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-top: auto;
}

.jq-www-services .jq-www-after {
  margin-top: 40px;
}

@media (max-width: 991px) {
  .jq-www-services__img {
    height: 230px;
  }
}

@media (max-width: 767px) {
  .jq-www-services__img {
    height: 210px;
  }
}

/* ---------- 99 Okno listu referencyjnego ---------- */
.jq-www-dialog {
  position: fixed;
  inset: 0;
  width: min(760px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100vh - 48px);
  margin: auto;
  overflow-y: auto;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.jq-www-dialog::backdrop {
  background: rgba(34, 37, 51, 0.75);
}

.jq-www-dialog[open] {
  animation: jq-www-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* bez translate — zostawiony translate na dialogu rozmywa skan listu na mobile */
  translate: none;
  transform: none;
}

.jq-www-dialog__img {
  display: block;
  width: 100%;
  height: auto;
  transform: none;
  image-rendering: auto;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.jq-www-dialog__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(224, 225, 226, 0.8);
}

.jq-www-dialog__title {
  margin: 0;
  font-family: "Raleway-Bold";
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #222533;
}

.jq-www-dialog__close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(224, 225, 226, 0.8);
  border-radius: 50%;
  background: #fff;
  font-size: 24px;
  line-height: 1;
  color: #222533;
  cursor: pointer;
  transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.jq-www-dialog__close:hover,
.jq-www-dialog__close:focus-visible {
  border-color: #ec7c6b;
  color: #ec7c6b;
}

.jq-www-dialog__body {
  padding: 24px;
}

/* ---------- 10 FAQ ---------- */
.offer-page-single__qa--www-services .offer-page-single__qa-title {
  margin-bottom: 52px;
}

.jq-www-faq > li {
  background-color: #fff;
  border: 1px solid #e0e1e2;
  transition:
    border-color 0.25s ease-in-out,
    box-shadow 0.25s ease-in-out,
    background-color 0.25s ease-in-out;
}

.jq-www-faq > li:hover {
  border-color: rgba(236, 124, 107, 0.55);
  box-shadow: 0 8px 24px rgba(34, 37, 51, 0.06);
}

.jq-www-faq > li.active {
  border-color: #ec7c6b;
  box-shadow: 0 10px 28px rgba(34, 37, 51, 0.08);
}

/* Strzałki: ścieżki względne do css/ (na FTP /_theme/... z CSS motywu nie działa) */
.jq-www-faq .offer-page-single__qa-list-item-button::after,
.jq-www-faq .qa-button::after {
  background-image: url("../../img/offer/qa-arrow-down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.jq-www-faq .offer-page-single__qa-list-item.active .qa-button::after {
  background-image: url("../../img/offer/qa-arrow-up.svg");
}

.jq-www-faq__more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.jq-www-faq__more-btn {
  margin: 0;
}

.jq-www-faq.is-expanded + .jq-www-faq__more {
  display: none;
}

/* ---------- 13 Baza wiedzy ---------- */
.offer-page-single__read-also.jq-www-knowledge,
.jq-www-knowledge {
  padding: 96px 0;
  margin-bottom: 0;
}

.jq-www-knowledge .offer-page-single__read-also-title {
  margin-bottom: 52px;
}

.jq-www-knowledge .single-post {
  background-color: #fff;
}

.jq-www-knowledge .single-post__txt-wrapper {
  background-color: #fff;
}

/* Baza wiedzy: ramka + lekki zoom zdjęcia (jak inne usługi); bez przesuwania za myszą (motyw) */
.jq-www-knowledge .single-post {
  height: auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(224, 225, 226, 0.8);
  box-shadow: none;
  transition: border-color 0.3s ease-in-out;
}

.jq-www-knowledge .single-post:hover,
.jq-www-knowledge .single-post:focus-within {
  border-color: #ec7c6b;
  box-shadow: none;
}

.jq-www-knowledge .single-post__img-wrapper,
.jq-www-knowledge .img-wrapper {
  margin: 0;
  overflow: hidden;
}

.jq-www-knowledge .single-post__img,
.jq-www-knowledge .single-img {
  top: 0 !important;
  left: 0 !important;
  transform: scale(1);
  transition: transform 0.7s ease-in-out;
}

.jq-www-knowledge .single-post:hover .single-post__img,
.jq-www-knowledge .single-post:hover .single-img {
  transform: scale(1.06);
}

.jq-www-knowledge .single-post__txt-wrapper--small {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  padding: 16px 24px;
}

.jq-www-knowledge .single-post__title--small {
  margin-top: 0;
  margin-bottom: 0;
}

/* ---------- 99 Przyklejone CTA: mobile pasek na dole; desktop podmienia przycisk w nav ---------- */
.jq-www-sticky {
  display: none;
}

@media (max-width: 991px) {
  .jq-www-sticky {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    justify-content: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(34, 37, 51, 0.1);
    translate: 0 120%;
    transition: translate 0.35s ease-in-out, opacity 0.35s ease-in-out;
    opacity: 0;
    pointer-events: none;
  }

  .jq-www-sticky--visible {
    translate: 0 0;
    opacity: 1;
    pointer-events: auto;
  }

  .jq-www-sticky__btn {
    width: 100%;
    max-width: 420px;
    margin: 0;
    text-align: center;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
  }

  body.jq-www-sticky-on {
    padding-bottom: 76px;
  }

  /* Przyklejony nagłówek (przewijanie w górę) bez "Bezpłatnej konsultacji", gdy na dole jest pasek z wyceną */
  body.jq-www-sticky-on .header.fixed .nav--mobile .nav__bottom {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jq-www-dialog[open] {
    animation: none;
  }

  [data-jq-www-tilt],
  .jq-www-proof__item,
  .jq-www-sticky,
  .jq-www-price__list li {
    transition: none;
  }

  .jq-www-deco {
    transform: none;
  }
}

/* ==========================================================================
   Wdrożenie WordPress: okno listu referencyjnego jak na stronie referencji
   (skan po lewej, logo i treść listu po prawej). Bez treści zostaje sam skan.
   ========================================================================== */
.jq-www-dialog__text:empty {
  display: none;
}

.jq-www-dialog--with-text {
  width: min(1100px, calc(100vw - 32px));
}

.jq-www-dialog--with-text .jq-www-dialog__body {
  display: grid;
  grid-template-columns: minmax(0, 373px) minmax(0, 1fr);
  gap: 37px;
  align-items: start;
}

.jq-www-dialog__logo {
  margin-bottom: 25px;
}

.jq-www-dialog__logo img {
  display: block;
  max-width: 180px;
  max-height: 60px;
  width: auto;
  height: auto;
}

.jq-www-dialog__desc {
  font-size: 15px;
  line-height: 1.63;
  color: #353746;
}

.jq-www-dialog__desc p {
  margin: 0 0 18px;
}

.jq-www-dialog__desc p:last-child {
  margin-bottom: 0;
}

/* Usługi, których dotyczy list (pole single_reference__services) */
.jq-www-dialog__services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #e6e6ea;
  list-style: none;
}

.jq-www-dialog__services li {
  margin: 0;
  padding: 0;
}

.jq-www-dialog__services li::before {
  content: none;
}

.jq-www-dialog__service {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #d9d9df;
  border-radius: 999px;
  font-family: "Raleway-SemiBold", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: #222c49;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Najechanie i fokus: wypełnienie koralowe (stan pokazany na projekcie) */
a.jq-www-dialog__service:hover,
a.jq-www-dialog__service:focus-visible {
  border-color: #ec7c6b;
  color: #fff;
  background: #ec7c6b;
}

/* Linki w treści listu (frazy podlinkowane do stron ofert) */
.jq-www-dialog__desc a {
  color: #ec7c6b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.jq-www-dialog__desc a:hover,
.jq-www-dialog__desc a:focus-visible {
  text-decoration: none;
}

@media (max-width: 991px) {
  .jq-www-dialog--with-text .jq-www-dialog__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   Wdrożenie WordPress: poprawki tablet (768-991 px) i zdjęcie eksperta
   ========================================================================== */

/* Zdjęcie eksperta: wysokość karty wyznacza tekst, zdjęcie tylko ją wypełnia
   (height: 100% w siatce potrafiło przyjąć wysokość z atrybutu height i rozciągać kartę) */
@media (max-width: 991px) {
  .jq-www-expert {
    position: relative;
  }

  .jq-www-expert__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 112px;
    height: 100%;
    min-height: 0;
  }

  .jq-www-expert__text {
    grid-column: 2;
    min-height: 112px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Slidery: szerokość kafla od kontenera (nie od 100vw), widać ok. 2,5 kafla */
  .jq-www-proof__col {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
  }

  .jq-www-b2b .c-icon-cards__item-wrapper {
    flex: 0 0 46%;
    width: 46%;
    max-width: 46%;
  }

  /* Proces: układ jednokolumnowy jak na mobile, więc ten sam odstęp pod tabletem */
  .jq-www-process.offer-page-single__steps--www-services .row .img-wrapper {
    margin: 4px 0 32px !important;
  }
}