/* Pasek admina WP (32px) przesuwa stronę w dół, a header jest pozycjonowany względem okna */
.admin-bar {
  --admin-bar-height: 2rem;
}

.site-header {
  position: absolute;
  top: calc(var(--space-12) + var(--admin-bar-height, 0px));
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  max-width: var(--container-max);
  min-height: calc(3.125rem + 2 * var(--space-20));
  margin-inline: auto;
  padding: var(--space-20) var(--space-32);
}

.site-header__bar {
  position: fixed;
  top: calc(var(--space-12) + var(--space-20) + var(--admin-bar-height, 0px));
  right: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-32);
  pointer-events: none;
}

.site-header__logo a,
.site-header__logo img {
  display: block;
}

.site-header__logo img {
  width: auto;
  height: 2rem;
}

.site-nav {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-24);
  border-radius: 999px;
  background-color: var(--color-light-blue);
  pointer-events: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list > li:not(.menu-cta) {
  max-width: var(--item-width, 10rem);
  margin-right: 2.25rem;
  overflow: hidden;
  white-space: nowrap;
}

.site-nav__list > li:has(+ .menu-cta) {
  margin-right: var(--space-24);
}

.site-nav__list a:not(.btn) {
  color: var(--color-navy);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-sm);
  text-decoration: none;
}

.site-nav__toggle {
  width: 0;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--color-navy);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
}

.site-nav__toggle svg {
  display: block;
}

.site-header.is-collapsed .site-nav__toggle {
  width: 1.5rem;
  margin-right: var(--space-24);
  opacity: 1;
  visibility: visible;
}

.site-header.is-collapsed .site-nav__list > li:not(.menu-cta) {
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  visibility: hidden;
}

/* Wspólne tempo animacji: 550ms, cubic-bezier(0.95, 0, 0.58, 1) */
.site-header.is-ready .site-nav__toggle,
.site-header.is-ready .site-nav__list > li:not(.menu-cta) {
  transition-property: width, max-width, margin-right, opacity, visibility;
  transition-duration: var(--duration-md);
  transition-timing-function: var(--ease-smart);
}

@media (prefers-reduced-motion: reduce) {
  .site-header.is-ready .site-nav__toggle,
  .site-header.is-ready .site-nav__list > li:not(.menu-cta) {
    transition: none;
  }
}

/* Ligatura jako jeden znak: bez odstępu w środku, za nią zwykły odstęp nagłówka */
.lig {
  letter-spacing: 0;
  margin-inline-end: var(--lig-spacing, 0);
}

/* hero */
.hero {
  padding: var(--space-12);
  color: var(--text-inverse);
}

.hero__inner {
  position: relative;
  height: 46.5rem;
  overflow: hidden;
  border-radius: var(--space-8);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-navy);
}

.hero__media::before,
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero__media::before {
  background-color: var(--color-blue);
  mix-blend-mode: darken;
}

.hero__media::after {
  background-color: rgb(0 0 0 / 0.1);
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__shapes {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 51.625rem;
  height: 15rem;
  fill: var(--color-blue);
}

/* 744px mockupu widoczne od prawej krawędzi, reszta wychodzi poza hero */
.hero__image {
  position: absolute;
  right: -24.875rem;
  bottom: -9.125rem;
  width: 71.375rem;
  max-width: none;
  height: auto;
  border-radius: var(--space-16);
}

.hero__container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-width: calc(var(--container-max) - 2 * var(--space-12));
  margin-inline: auto;
  padding: 9.25rem var(--space-20) var(--space-20);
}

.hero__title {
  margin: 0;
  font-weight: var(--font-weight-regular);
  font-size: 3.75rem;
  letter-spacing: var(--letter-spacing-md);
}

.hero__title-sans {
  display: block;
  font-family: var(--font-body);
  line-height: 1.18;
}

.hero__title-serif {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-2xs);
}

.hero__description {
  max-width: 25.5rem;
  margin: var(--space-24) 0 0;
}

.hero__ctas {
  display: flex;
  gap: var(--space-12);
  margin-top: 2.625rem;
}

.hero__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: 0 0 var(--space-16) var(--space-16);
}

.hero__caption {
  margin: 0;
}

.hero__logos {
  display: flex;
  max-width: 25.5rem;
  overflow: hidden;
}

/* Każda kopia przesuwa się o własną szerokość (z odstępem), więc pętla się domyka */
.hero__logos-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.5rem;
  margin: 0;
  padding: 0 2.5rem 0 0;
  list-style: none;
  animation: hero-marquee 20s linear infinite;
}

.hero__logos:hover .hero__logos-track {
  animation-play-state: paused;
}

@keyframes hero-marquee {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logos-track {
    animation: none;
  }
}

.hero__logo {
  display: block;
}

/* eyebrow — mała etykieta-pigułka nad nagłówkiem sekcji (Body 12 500) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--space-4);
  background-color: var(--bg-subtle);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-2xl);
  letter-spacing: var(--letter-spacing-sm);
  white-space: nowrap;
}

/* problem */
.problem {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-96) var(--space-56) 0;
  scroll-margin-top: var(--space-96);
}

.problem__tabs {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
}

.problem__header {
  display: flex;
  align-items: flex-end;
  gap: 2.625rem;
}

.problem__title {
  flex: 1;
  margin: 0;
  color: var(--text-heading);
}

/* Przełącznik-pigułka; cyjanowe tło aktywnej zakładki to wskaźnik przesuwany przez tabs.js */
.problem__switch {
  position: relative;
  display: flex;
  flex-shrink: 0;
  padding: var(--space-8);
  border: 0.5px solid var(--border-default);
  border-radius: 999px;
  isolation: isolate;
}

.problem__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10.9375rem;
  height: 3.75rem;
  padding-inline: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-heading);
  white-space: nowrap;
  cursor: pointer;
}

.problem__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.problem__indicator {
  position: absolute;
  top: var(--space-8);
  left: 0;
  z-index: -1;
  width: var(--tabs-indicator-width, 0);
  height: 3.75rem;
  border-radius: 999px;
  background-color: var(--accent);
  transform: translateX(var(--tabs-indicator-x, 0));
}

/* Bez JS: tło na aktywnym przycisku zamiast wskaźnika */
.problem__tabs:not(.is-ready) .problem__tab[aria-selected="true"] {
  background-color: var(--accent);
}

.problem__tabs.is-ready .problem__indicator {
  transition:
    transform var(--duration-md) var(--ease-smart),
    width var(--duration-md) var(--ease-smart);
}

/* Panele leżą w jednej komórce siatki, żeby przenikać się bez skoku wysokości */
.problem__panels {
  display: grid;
  border-radius: var(--space-12);
  background-color: var(--bg-warm);
}

.problem__panel {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: var(--space-48);
  padding: 2.625rem var(--space-96) 2.625rem var(--space-64);
  border-radius: var(--space-12);
}

.problem__panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.problem__media {
  position: relative;
  flex-shrink: 0;
  width: 34.0625rem;
  height: 34.5625rem;
}

.problem__shapes {
  position: absolute;
  top: 21.5625rem;
  left: -1.0625rem;
  width: 13.875rem;
  height: 12.25rem;
  fill: var(--color-blue);
}

.problem__image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.problem__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-48);
  min-width: 0;
}

.problem__heading {
  margin: 0;
  color: var(--text-heading);
}

.problem__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.problem__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

.problem__item-icon {
  display: block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.problem__item-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.problem__item-title,
.problem__item-description {
  margin: 0;
}

.problem__item-title {
  color: var(--text-heading);
}

.problem__item-description {
  color: var(--text-secondary);
}

/* Zmiana panelu: przenikanie z lekkim przesunięciem treści; hidden zostaje w układzie, ale znika z drzewa dostępności */
.problem__panel[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.problem__tabs.is-ready .problem__panel {
  transition:
    opacity var(--duration-md) var(--ease-smart),
    visibility 0s linear;
}

.problem__tabs.is-ready .problem__panel[hidden] {
  transition:
    opacity var(--duration-md) var(--ease-smart),
    visibility 0s linear var(--duration-md);
}

.problem__tabs.is-ready .problem__media,
.problem__tabs.is-ready .problem__content {
  transition: transform var(--duration-md) var(--ease-smart);
}

.problem__panel[hidden] .problem__media {
  transform: translateX(calc(-1 * var(--space-24)));
}

.problem__panel[hidden] .problem__content {
  transform: translateX(var(--space-24));
}

@media (prefers-reduced-motion: reduce) {
  .problem__tabs.is-ready .problem__indicator,
  .problem__tabs.is-ready .problem__panel,
  .problem__tabs.is-ready .problem__panel[hidden],
  .problem__tabs.is-ready .problem__media,
  .problem__tabs.is-ready .problem__content {
    transition: none;
  }

  .problem__panel[hidden] .problem__media,
  .problem__panel[hidden] .problem__content {
    transform: none;
  }
}

/* features */
.features {
  position: relative;
  max-width: var(--container-max);
  height: 75.5625rem;
  margin-inline: auto;
}

.features__title {
  position: absolute;
  top: 34.2731rem;
  right: var(--space-56);
  left: var(--space-56);
  margin: 0;
  color: var(--text-heading);
  text-align: center;
}

.features__images {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --features-shift: postęp scrolla od -1 do 1 (features.js), --depth: zasięg parallaxy */
.features__item {
  --depth: 0rem;

  position: absolute;
  border-radius: var(--space-12);
  transform: translate3d(0, calc(var(--features-shift, 0) * var(--depth)), 0);
  will-change: transform;
}

.features__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* pozycje dla sekcji 1440 × 1209, według kolejności w ACF */
.features__item:nth-child(1) {
  --depth: -2.5rem;

  top: 15.2106rem;
  left: 10.1875rem;
  width: 18.1875rem;
  height: 10.3125rem;
}

.features__item:nth-child(2) {
  --depth: -4rem;

  top: 12.0231rem;
  left: 55.75rem;
  width: 25.4375rem;
  height: 14.4375rem;
}

.features__item:nth-child(3) {
  --depth: 3rem;

  top: 48.3356rem;
  left: 62.6875rem;
  width: 18.5rem;
  height: 5.625rem;
}

/* przerywana ramka nad obrazkiem */
.features__item:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--accent);
  border-radius: inherit;
  pointer-events: none;
}

.features__item:nth-child(4) {
  --depth: 4.5rem;

  top: 52.2731rem;
  left: 33.3125rem;
  width: 22.25rem;
  height: 11.875rem;
}

.features__item:nth-child(5) {
  --depth: 2rem;

  top: 50.4606rem;
  left: 7.0625rem;
  width: 14.875rem;
  height: 3.625rem;
  box-shadow: 0 0 2.75rem 0 rgb(0 0 0 / 0.11);
}

/* wejście: klasa is-animated dodawana przez JS, is-visible po wjechaniu w viewport.
   Opacity na elemencie (razem z ramką i cieniem), ruch na obrazku (element ma już parallaxę) */
.features.is-animated .features__title,
.features.is-animated .features__item,
.features.is-animated .features__image {
  transition:
    opacity var(--duration-md) var(--ease-smart),
    transform var(--duration-md) var(--ease-smart);
  transition-delay: var(--delay, 0ms);
}

.features.is-animated .features__item {
  transition-property: opacity;
}

.features.is-animated:not(.is-visible) .features__title,
.features.is-animated:not(.is-visible) .features__item {
  opacity: 0;
}

.features.is-animated:not(.is-visible) .features__title {
  transform: translateY(var(--space-24));
}

.features.is-animated:not(.is-visible) .features__image {
  transform: translateY(var(--space-32)) scale(0.96);
}

.features__item:nth-child(2) { --delay: 80ms; }
.features__item:nth-child(3) { --delay: 160ms; }
.features__item:nth-child(4) { --delay: 240ms; }
.features__item:nth-child(5) { --delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .features__item {
    transform: none;
  }

  .features.is-animated .features__title,
  .features.is-animated .features__item,
  .features.is-animated .features__image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* numbers */
.numbers {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
  padding: var(--space-120) var(--space-56);
  background: var(--gradient-fade);
}

.numbers__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.numbers__title {
  margin: 0;
  color: var(--text-heading);
}

.numbers__description {
  max-width: 35rem;
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--line-height-3xl);
}

.numbers__list {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbers__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20.75rem;
  height: 21.375rem;
  padding: var(--space-24);
  border-radius: var(--space-12);
  background-color: var(--color-white);
}

/* co druga karta opuszczona o 42px */
.numbers__card:nth-child(even) {
  margin-top: 2.625rem;
}

.numbers__card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.numbers__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--border-default);
  border-radius: var(--space-4);
  color: var(--text-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-2xl);
  letter-spacing: var(--letter-spacing-sm);
}

.numbers__label-icon {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}

.numbers__metric {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  margin: 0;
  color: var(--text-heading);
}

/* przycięcie do wysokości wersalików */
.numbers__value,
.numbers__suffix {
  text-box: trim-both cap alphabetic;
}

.numbers__card-description {
  margin: 0;
  color: var(--text-secondary);
}

/* approach */
.approach {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-32) var(--space-56) var(--space-80);
  scroll-margin-top: var(--space-96);
}

.approach__title {
  margin: 0;
  color: var(--text-heading);
}

.approach__tabs {
  padding: var(--space-4);
  border-radius: var(--space-12);
  background-color: var(--bg-warm);
}

/* Pasek zakładek; białe tło aktywnej zakładki to wskaźnik przesuwany przez tabs.js */
.approach__switch {
  position: relative;
  display: flex;
  padding: var(--space-12);
  isolation: isolate;
}

.approach__tab {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 0;
  height: var(--space-64);
  padding-inline: 1.75rem;
  border: 0;
  border-radius: var(--space-8);
  background: none;
  color: var(--text-heading);
  white-space: nowrap;
  cursor: pointer;
}

.approach__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.approach__tab-icon {
  display: block;
  flex-shrink: 0;
  width: var(--space-16);
  height: var(--space-16);
}

.approach__indicator {
  position: absolute;
  top: var(--space-12);
  left: 0;
  z-index: -1;
  width: var(--tabs-indicator-width, 0);
  height: var(--space-64);
  border-radius: var(--space-8);
  background-color: var(--color-white);
  transform: translateX(var(--tabs-indicator-x, 0));
}

/* Bez JS: tło na aktywnym przycisku zamiast wskaźnika */
.approach__tabs:not(.is-ready) .approach__tab[aria-selected="true"] {
  background-color: var(--color-white);
}

.approach__tabs.is-ready .approach__indicator {
  transition:
    transform var(--duration-md) var(--ease-smart),
    width var(--duration-md) var(--ease-smart);
}

/* Panele leżą w jednej komórce siatki, żeby przenikać się bez skoku wysokości */
.approach__panels {
  display: grid;
  border-radius: 0.625rem;
  background-color: var(--color-white);
}

.approach__panel {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-12) var(--space-12) var(--space-12) 2.625rem;
  border-radius: 0.625rem;
}

.approach__panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.approach__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2.625rem;
  min-width: 0;
  padding-block: var(--space-24);
}

.approach__heading {
  margin: 0;
  color: var(--text-heading);
}

.approach__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.approach__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

/* Ramka 20×22, glif z siatki 24 przeskalowany do 20px i opuszczony o 2px */
.approach__check {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  width: 1.25rem;
  height: 1.375rem;
  color: var(--accent);
}

.approach__check .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.approach__item-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.approach__item-title,
.approach__item-description {
  margin: 0;
}

.approach__item-title {
  color: var(--text-heading);
}

.approach__item-description {
  color: var(--text-secondary);
}

.approach__cta .btn {
  width: 100%;
}

.approach__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 47.375rem;
  height: 32.3125rem;
  overflow: hidden;
  border-radius: var(--space-8);
  background-color: var(--accent);
}

/* 670×440, przesunięty o 1px w lewo od środka */
.approach__image {
  display: block;
  width: 41.875rem;
  height: 27.5rem;
  margin-right: 0.125rem;
  border-radius: var(--space-12);
  object-fit: cover;
}

/* Zmiana panelu: przenikanie z lekkim przesunięciem; hidden zostaje w układzie, ale znika z drzewa dostępności */
.approach__panel[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.approach__tabs.is-ready .approach__panel {
  transition:
    opacity var(--duration-md) var(--ease-smart),
    visibility 0s linear;
}

.approach__tabs.is-ready .approach__panel[hidden] {
  transition:
    opacity var(--duration-md) var(--ease-smart),
    visibility 0s linear var(--duration-md);
}

.approach__tabs.is-ready .approach__content,
.approach__tabs.is-ready .approach__image {
  transition: transform var(--duration-md) var(--ease-smart);
}

.approach__panel[hidden] .approach__content {
  transform: translateY(var(--space-16));
}

.approach__panel[hidden] .approach__image {
  transform: translateY(var(--space-32));
}

@media (prefers-reduced-motion: reduce) {
  .approach__tabs.is-ready .approach__indicator,
  .approach__tabs.is-ready .approach__panel,
  .approach__tabs.is-ready .approach__panel[hidden],
  .approach__tabs.is-ready .approach__content,
  .approach__tabs.is-ready .approach__image {
    transition: none;
  }

  .approach__panel[hidden] .approach__content,
  .approach__panel[hidden] .approach__image {
    transform: none;
  }
}

/* cards */
.cards {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2.625rem var(--space-56);
}

.cards__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: var(--space-56);
  border-bottom: 0.5px solid var(--border-default);
}

.cards__title {
  margin: 0;
  color: var(--text-heading);
}

.cards__title-accent {
  display: block;
  color: var(--accent);
}

.cards__buttons {
  display: flex;
  flex-shrink: 0;
}

.cards__list {
  display: flex;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* karta: domyślnie beżowa, aktywna (hover / focus, domyślnie pierwsza) ciemna ze zdjęciem i opisem */
.cards__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  height: 32.1875rem;
  padding: var(--space-32);
  overflow: hidden;
  border-radius: var(--space-12);
  background-color: var(--bg-warm);
  color: var(--text-heading);
  isolation: isolate;
  transition: color var(--duration-md) var(--ease-smart);
}

.cards__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cards__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--duration-md) var(--ease-smart);
}

/* przyciemnienie od dołu pod tekstem */
.cards__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(188.14deg, rgb(0 0 0 / 0) 48.602%, rgb(0 0 0 / 0.6) 104.32%);
}

.cards__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  transform: scale(1.06);
  transition: transform var(--duration-md) var(--ease-smart);
}

.cards__icon {
  display: block;
  flex-shrink: 0;
  width: var(--space-32);
  height: var(--space-32);
  background-color: currentColor;
  mask: var(--cards-icon) center / contain no-repeat;
}

.cards__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cards__item-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-2xs);
  letter-spacing: var(--letter-spacing-sm);
}

/* opis rozwijany przez grid 0fr → 1fr */
.cards__description {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--duration-md) var(--ease-smart),
    opacity var(--duration-md) var(--ease-smart);
}

.cards__description-inner {
  min-height: 0;
  overflow: hidden;
}

.cards__description-text {
  margin: 0;
  padding-top: var(--space-12);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-md);
}

.cards__item.is-active {
  color: var(--text-inverse);
}

.cards__item.is-active .cards__media {
  opacity: 1;
}

.cards__item.is-active .cards__image {
  transform: scale(1);
}

.cards__item.is-active .cards__description {
  grid-template-rows: 1fr;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cards__item,
  .cards__media,
  .cards__image,
  .cards__description {
    transition: none;
  }

  .cards__image {
    transform: none;
  }
}

/* pricing */
.pricing {
  /* Sticky nagłówek tabeli chowa się pod pływającym menu (12 + 20 + 50px pigułki) z odstępem 16px */
  --pricing-sticky-top: calc(6.125rem + var(--admin-bar-height, 0px));
  --pricing-border: 0.5px solid var(--border-default);

  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-120) var(--space-56) var(--space-56);
  color: var(--text-heading);
}

.pricing__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.pricing__title,
.pricing__description {
  margin: 0;
}

/* Maska: 1377px minus 120px pustego paddingu nad tabelą */
.pricing__mask {
  position: relative;
  margin-top: var(--space-56);
  overflow: clip;
  transition: height var(--duration-md) var(--ease-smart);
}

.pricing.is-enhanced .pricing__mask {
  height: 78.5625rem;
}

.pricing.is-enhanced .pricing__mask.is-expanded {
  height: auto;
  padding-bottom: calc(var(--space-24) + 3.25rem + var(--space-24));
}

.pricing__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.pricing__col-label {
  width: 25rem;
}

.pricing__table th {
  font-weight: inherit;
  text-align: left;
}

/* :where – zerowa specyficzność, paddingi ustawiają klasy komórek */
:where(.pricing__table) :is(th, td) {
  padding: 0;
}

/* nagłówek tabeli */
.pricing__table thead > tr > * {
  vertical-align: top;
  border-top: var(--pricing-border);
  border-bottom: 1px solid var(--border-default);
  background-color: var(--color-white);
}

.pricing__table thead > tr > :first-child {
  border-left: var(--pricing-border);
  border-top-left-radius: var(--space-12);
}

.pricing__table thead > tr > :last-child {
  border-right: var(--pricing-border);
  border-top-right-radius: var(--space-12);
}

/* Po rozwinięciu nagłówek z planami trzyma się góry ekranu */
.pricing__mask.is-expanded thead > tr > * {
  position: sticky;
  top: var(--pricing-sticky-top);
  z-index: 4;
}

/* Cokół: biały pas od góry ekranu do nagłówka, żeby wiersze nie prześwitywały nad nim.
   Przed przyklejeniem wystaje ponad maskę, więc overflow: clip go ukrywa */
.pricing__mask.is-expanded thead > tr > ::before {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 100%;
  left: -1px;
  height: var(--pricing-sticky-top);
  background-color: var(--color-white);
}

.pricing__corner {
  padding: var(--space-32) var(--space-24);
}

.pricing__switch {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.pricing__periods {
  position: relative;
  display: inline-flex;
  padding: var(--space-2);
  border: var(--pricing-border);
  border-radius: 999px;
  background-color: var(--color-white);
}

.pricing__periods-indicator {
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0;
  width: var(--indicator-width, 0);
  border-radius: 999px;
  background-color: var(--color-navy);
  transform: translateX(var(--indicator-x, 0));
}

.pricing.is-ready .pricing__periods-indicator {
  transition:
    transform var(--duration-md) var(--ease-smart),
    width var(--duration-md) var(--ease-smart);
}

.pricing__period {
  position: relative;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--color-navy);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--duration-md) var(--ease-smart);
}

.pricing__period[aria-pressed="true"] {
  color: var(--color-white);
}

/* Bez JS nie ma wskaźnika, tło dostaje aktywny przycisk */
.pricing:not(.is-enhanced) .pricing__period[aria-pressed="true"] {
  background-color: var(--color-navy);
}

.pricing__period:focus-visible,
.pricing__cta:focus-visible,
.pricing__info:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pricing__save {
  margin: 0;
  white-space: nowrap;
}

.pricing__save strong {
  font-weight: var(--font-weight-medium);
}

/* kolumny planów */
.pricing__plan {
  padding: var(--space-32) var(--space-20);
}

.pricing__plan.is-featured {
  background-color: var(--color-blue);
}

.pricing__plan-name {
  display: block;
  text-box: trim-both cap alphabetic;
}

.pricing__prices {
  display: grid;
  margin-top: var(--space-32);
}

.pricing__price {
  display: flex;
  grid-area: 1 / 1;
  align-items: flex-end;
  gap: var(--space-4);
  transition:
    opacity var(--duration-md) var(--ease-smart),
    transform var(--duration-md) var(--ease-smart),
    visibility var(--duration-md) var(--ease-smart);
}

/* Cena miesięczna odjeżdża w górę, roczna wjeżdża od dołu (i odwrotnie) */
.pricing[data-period="annual"] .pricing__price[data-period="monthly"],
.pricing[data-period="monthly"] .pricing__price[data-period="annual"] {
  opacity: 0;
  visibility: hidden;
}

.pricing[data-period="annual"] .pricing__price[data-period="monthly"] {
  transform: translateY(-0.75rem);
}

.pricing[data-period="monthly"] .pricing__price[data-period="annual"] {
  transform: translateY(0.75rem);
}

.pricing__amount,
.pricing__suffix {
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

.pricing__suffix {
  color: var(--text-muted);
  text-transform: uppercase;
}

.pricing__plan.is-featured .pricing__suffix {
  color: var(--color-navy);
}

.pricing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  margin-top: var(--space-24);
  padding-inline: var(--space-16);
  border-radius: 999px;
  background-color: var(--color-gray-50);
  color: var(--color-navy);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-sm);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.pricing__plan.is-featured .pricing__cta {
  background-color: var(--color-white);
}

.pricing__cta:hover,
.pricing__plan.is-featured .pricing__cta:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* wiersze */
.pricing__table tbody > tr > * {
  border-bottom: var(--pricing-border);
}

.pricing__table tbody > tr > :first-child {
  border-left: var(--pricing-border);
}

.pricing__table tbody > tr > :last-child {
  border-right: var(--pricing-border);
}

.pricing__table tbody .is-featured {
  background-color: var(--color-light-blue);
}

.pricing__group-name {
  height: 5.4375rem;
  padding: 2.625rem var(--space-24) var(--space-20);
  vertical-align: bottom;
}

.pricing__row-label {
  height: 3.75rem;
  padding-inline: var(--space-24);
}

.pricing__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
}

.pricing__group-name .pricing__label {
  gap: var(--space-12);
}

.pricing__badge {
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.625rem;
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-sm);
}

.pricing__value {
  height: 3.75rem;
  padding-inline: var(--space-20);
}

.pricing__value-inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.pricing__check {
  width: 1rem;
  height: 1rem;
}

.pricing__note,
.pricing__dash {
  font-size: 0.8125rem;
  line-height: var(--line-height-md);
}

.pricing__unlimited {
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-blue);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-2xl);
  white-space: nowrap;
}

.pricing__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* tooltip */
.pricing__tooltip {
  position: relative;
  z-index: 3;
  display: inline-flex;
}

.pricing__info {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gray-300);
  font-size: 1rem;
  cursor: help;
  transition: color 0.3s ease;
}

.pricing__info:hover,
.pricing__info:focus-visible {
  color: var(--color-navy);
}

.pricing__tooltip-text {
  position: absolute;
  bottom: calc(100% + var(--space-8));
  left: 50%;
  width: max-content;
  max-width: 15rem;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--space-4);
  background-color: var(--color-navy);
  color: var(--color-white);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, var(--space-4));
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

.pricing__tooltip:is(:hover, :focus-within):not(.is-dismissed) .pricing__tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* „See all features”: gradient z rozmyciem na dole maski (487px) */
.pricing__more {
  display: none;
}

.pricing.is-enhanced .pricing__more {
  position: absolute;
  right: -0.25rem;
  bottom: 0;
  left: -0.25rem;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 30.4375rem;
  padding-bottom: var(--space-24);
  pointer-events: none;
}

/* Rozmycie narasta ku dołowi, na nim biały gradient */
.pricing__more::before,
.pricing__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition:
    opacity var(--duration-md) var(--ease-smart),
    visibility var(--duration-md) var(--ease-smart);
}

.pricing__more::before {
  backdrop-filter: blur(6px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
}

.pricing__more::after {
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, var(--color-white) 100%);
}

.pricing__mask.is-expanded .pricing__more::before,
.pricing__mask.is-expanded .pricing__more::after {
  opacity: 0;
  visibility: hidden;
}

.pricing__more-button {
  pointer-events: auto;
}

.pricing__more-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform var(--duration-md) var(--ease-smart);
}

.pricing__mask.is-expanded .pricing__more-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .pricing__mask,
  .pricing.is-ready .pricing__periods-indicator,
  .pricing__period,
  .pricing__price,
  .pricing__cta,
  .pricing__info,
  .pricing__tooltip-text,
  .pricing__more::before,
  .pricing__more::after,
  .pricing__more-icon {
    transition: none;
  }
}

/* cta */
.cta {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-24) var(--space-56);
}

.cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-64) 2.625rem;
  overflow: hidden;
  border-radius: var(--space-12);
  isolation: isolate;
}

.cta__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-navy);
}

.cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-blue);
  mix-blend-mode: darken;
}

.cta__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rozmyta plama — ta sama grafika dwa razy, obrócona */
.cta__glow {
  position: absolute;
  width: 162.9475rem;
  max-width: none;
  height: 124.2044rem;
  pointer-events: none;
}

.cta__glow--back {
  top: -65.93rem;
  left: -66.6675rem;
  transform: rotate(-175.2deg);
}

.cta__glow--front {
  top: -32.765rem;
  left: -18.78rem;
  transform: rotate(-9.17deg);
}

.cta__shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 83rem;
  height: 26.125rem;
  overflow: visible;
  fill: var(--color-blue);
}

.cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 39.625rem;
}

.cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  color: var(--text-inverse);
}

.cta__title,
.cta__description {
  margin: 0;
}

.cta__buttons {
  display: flex;
  gap: var(--space-12);
}

.cta__image {
  position: absolute;
  top: 6.3125rem;
  left: 44.5625rem;
  width: 34.9375rem;
  height: 23rem;
  border: 0.75rem solid rgb(255 255 255 / 0.3);
  border-radius: var(--space-12);
  object-fit: cover;
  box-shadow:
    -12px 16px 45px rgb(0 0 0 / 0.11),
    -50px 66px 82px rgb(0 0 0 / 0.1),
    -112px 148px 111px rgb(0 0 0 / 0.06),
    -199px 263px 132px rgb(0 0 0 / 0.02);
}

/* footer */
.site-footer {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-96) var(--space-56) var(--space-32);
  overflow: hidden;
  color: var(--text-heading);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__shapes {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48.1875rem;
  height: 26.5625rem;
  fill: var(--color-blue);
}

.site-footer__main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.site-footer__nav-list,
.site-footer__links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__caption {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  text-transform: uppercase;
}

.site-footer__caption p {
  margin: 0;
}

.site-footer__credit {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
}

.site-footer__credit-logo {
  display: block;
  width: auto;
  height: 0.75rem;
}

.site-footer__contact {
  position: absolute;
  top: 17.9375rem;
  left: 57.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
  width: 29.375rem;
}

.site-footer__address {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.site-footer__logo {
  display: block;
  width: auto;
  height: 2rem;
}

/* faq */
/* Bez kontenera: poziome linie listy idą na całą szerokość strony */
.faq {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
  padding: var(--space-120) 0 var(--space-96);
}

.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.faq__title,
.faq__description {
  margin: 0;
}

.faq__title {
  color: var(--text-heading);
}

.faq__description {
  color: var(--text-secondary);
}

/* Górna i dolna linia na całą szerokość strony, linie między pytaniami tylko w kolumnie */
.faq__list {
  display: flex;
  justify-content: center;
  border-block: 1px solid var(--border-default);
}

.faq__items {
  width: 68.875rem;
  border-inline: 1px solid var(--border-default);
}

.faq__item {
  position: relative;
  padding: 1.75rem var(--space-64);
  overflow: hidden;
  isolation: isolate;
}

.faq__item + .faq__item {
  border-top: 1px solid var(--border-default);
}

/* Niebieskie tło zjeżdża z góry po najechaniu */
.faq__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-blue);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.faq__item:hover::before,
.faq__item:has(.faq__toggle:focus-visible)::before {
  transform: translateY(0);
}

.faq__question {
  margin: 0;
  font: inherit;
}

.faq__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-heading);
  font-family: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__toggle:focus-visible {
  outline: none;
}

.faq__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.faq__icon-vertical {
  transform: rotate(90deg);
  transform-origin: 10px 10px;
  transition: transform var(--duration-md) var(--ease-smart);
}

.faq__item.is-open .faq__icon-vertical {
  transform: rotate(0deg);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition:
    grid-template-rows var(--duration-md) var(--ease-smart),
    opacity var(--duration-md) var(--ease-smart),
    visibility 0s linear var(--duration-md);
}

/* visibility chowa zamkniętą odpowiedź przed czytnikami ekranu i tabem */
.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.faq__answer-inner {
  min-height: 0;
  overflow: hidden;
  color: var(--text-secondary);
}

.faq__answer-inner p {
  margin: 0;
}

.faq__answer-inner > :first-child {
  margin-top: var(--space-20);
}

.faq__answer-inner p + p {
  margin-top: var(--space-12);
}

@media (prefers-reduced-motion: reduce) {
  .faq__item::before,
  .faq__icon-vertical,
  .faq__answer {
    transition: none;
  }
}