/* ==========================================================================
   SAN TOP — landing page
   Layout bazowy: 1920px. 1920–1200px = zewnętrzne skalowanie transform.
   Responsywność właściwa: < 1200px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   WSPÓLNY STYL — warto przenieść do globalnego CSS
   -------------------------------------------------------------------------- */
:root {
  --st-orange: #f27532;
  --st-orange-deep: #f37020;
  --st-orange-light: #f4ab82;
  --st-green: #008842;
  --st-green-700: #19562d;
  --st-green-800: #07552e;
  --st-green-900: #003724;
  --st-green-950: #0a2610;
  --st-footer: #001d13;
  --st-cream: #f6f5f0;
  --st-beige: #f3ece6;
  --st-ink: #0b3b26;
  --st-white: #ffffff;

  --st-radius-sm: 8px;
  --st-radius: 16px;
  --st-radius-lg: 28px;
  --st-radius-xl: 40px;

  --st-container: 1650px;
  --st-font: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --st-font-serif: "Lora", Georgia, "Times New Roman", serif;
}

.st-container {
  width: var(--st-container);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.st-container--narrow  { width: 1540px; }
.st-container--wide    { width: 1750px; }
.st-container--gallery { width: 1700px; }

/* Placeholder zdjęcia (do podmiany na docelową grafikę) */
.st-ph {
  position: relative;
  overflow: hidden;
  background-color: #dcdcd6;
  background-image: repeating-linear-gradient(135deg,
      rgba(0, 0, 0, .045) 0 10px, rgba(0, 0, 0, 0) 10px 20px);
}
.st-ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font: 500 14px/1.4 "Courier New", Courier, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .45);
}
.st-ph--dark { background-color: #2a3a30; }
.st-ph--dark::after { color: rgba(255, 255, 255, .55); }

/* Placeholder tła sekcji — podpis przy górnej krawędzi, nie na treści */
.st-ph--bg::after {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px 24px;
}

/* Nagłówek sekcji: linia — TYTUŁ — linia */
.st-heading {
  display: flex;
  align-items: center;
  gap: 46px;
  justify-content: center;
}
.st-heading__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--st-orange);
}
.st-heading__text {
  flex: 0 0 auto;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--st-green-900);
  white-space: nowrap;
}
.st-heading__text em {
  font-style: normal;
  color: var(--st-green);
}
.st-heading--light .st-heading__text { color: #fff; }
.st-heading--light .st-heading__line { background: rgba(255, 255, 255, .75); }
.st-heading--on-orange .st-heading__line { background: #fff; }
.st-heading--on-orange .st-heading__text { color: var(--st-green-900); }
.st-heading--on-orange .st-heading__text em { color: #fff; }

/* Przyciski */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 0;
  border-radius: 999px;
  font-family: var(--st-font);
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s ease, background-color .2s ease, color .2s ease;
}
.st-btn:hover { filter: brightness(1.07); text-decoration: none; }
.st-btn--green {
  background: var(--st-green-900);
  color: #fff;
}
.st-btn--green:hover { color: #fff; }
.st-btn--orange {
  background: var(--st-orange-deep);
  color: #fff;
}
.st-btn--orange:hover { color: #fff; }

/* Okrągła/kwadratowa strzałka „przewiń niżej” między sekcjami */
.st-jump {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--st-radius);
  font-size: 34px;
  z-index: 3;
}
.st-jump--orange { background: var(--st-orange-deep); color: #fff; }
.st-jump--white  { background: #fff; color: var(--st-orange-deep); }
.st-jump--green  { background: var(--st-green-900); color: #fff; }

/* ==========================================================================
   1. HEADER
   ========================================================================== */
.st-header {
  background: #fff;
  height: 212px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}
.st-header__inner {
  display: flex;
  align-items: center;
  gap: 0;
}
.st-header__logo { flex: 0 0 auto; width: 230px; }
.st-header__logo img { display: block; width: 100%; height: auto; }
.st-header__logo .st-ph { height: 62px; border-radius: 4px; }

.st-header__nav {
  display: flex;
  align-items: center;
  gap: 78px;
  margin-left: 100px;
}
.st-header__link {
  font-size: 22px;
  font-weight: 700;
  color: var(--st-green-900);
  text-decoration: none;
}
.st-header__link:hover { color: var(--st-orange-deep); text-decoration: none; }

.st-header__cta {
  margin-left: auto;
  height: 90px;
  padding: 0 58px;
  font-size: 22px;
  background: var(--st-green-900);
  overflow: hidden;
}

.st-header__lang { flex: 0 0 auto; margin-left: 86px; }
.st-header__lang-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--st-green-900);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 8px;
}
.st-header__lang-select {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #d8ded9;
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  background: #fff;
  cursor: pointer;
}
.st-header__flag {
  width: 44px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(#fff 0 50%, #dc143c 50% 100%);
  border: 1px solid #e6e6e6;
  flex: 0 0 auto;
}
.st-header__lang-code { font-size: 20px; font-weight: 600; color: var(--st-green-900); }
.st-header__lang-select .fa-chevron-down { font-size: 14px; color: var(--st-green); }

/* ==========================================================================
   2. HERO
   ========================================================================== */
.st-hero {
  position: relative;
  height: 1190px;
}
.st-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.st-hero__inner {
  position: relative;
  height: 100%;
  z-index: 2;
}
.st-hero__content {
  position: absolute;
  top: 78px;
  left: 0;
  width: 760px;
  color: #fff;
}
.st-hero__title {
  margin: 0;
  font-size: 92px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
}
.st-hero__subtitle {
  margin: 14px 0 0;
  font-size: 68px;
  font-weight: 800;
  line-height: 1.18;
}
.st-hero__rule {
  width: 196px;
  height: 3px;
  background: #fff;
  margin: 34px 0 30px;
}
.st-hero__lead {
  margin: 0;
  font-size: 31px;
  line-height: 1.42;
  font-weight: 500;
}
.st-hero__cta {
  position: absolute;
  top: 848px;
  left: 5px;
  width: 431px;
  height: 90px;
  font-size: 26px;
}

.st-hero__badges {
  position: absolute;
  top: 770px;
  left: 653px;
  width: 900px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 42px;
}
.st-hero__badge {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 28px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(3px);
  border-radius: 12px;
}
.st-hero__badge-icon {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: var(--st-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.st-hero__badge-text {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.22;
  color: #fff;
}

.st-hero__note {
  position: absolute;
  top: 548px;
  left: 1409px;
  width: 250px;
  display: flex;
  gap: 22px;
  color: #fff;
}
.st-hero__note-bar {
  position: relative;
  flex: 0 0 auto;
  width: 2px;
  background: #fff;
  margin-top: 6px;
  align-self: stretch;
}
.st-hero__note-chevron {
  position: absolute;
  top: -16px;
  left: -9px;
  font-size: 20px;
}
.st-hero__note-small {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.st-hero__note-big {
  font-size: 52px;
  font-weight: 800;
  color: var(--st-orange);
  line-height: 1.05;
  margin: 2px 0 2px;
  white-space: nowrap;
}
.st-hero__note-desc { font-size: 24px; line-height: 1.28; font-weight: 500; }
.st-hero__dash {
  position: absolute;
  left: 405px;
  right: 285px;
  top: 735px;
  border-top: 2px dashed rgba(255, 255, 255, .75);
}

/* ==========================================================================
   3. KORZYŚCI — 4 karty
   ========================================================================== */
.st-features {
  background: #fff;
  position: relative;
  padding-bottom: 96px;
}
.st-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  margin-top: -44px;
  position: relative;
  z-index: 4;
}
.st-feature {
  position: relative;
  padding: 82px 34px 40px;
  border-radius: var(--st-radius-lg);
  min-height: 432px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .10);
}
.st-feature--light { background: #fff; color: var(--st-ink); }
.st-feature--dark  { background: var(--st-green); color: #fff; }

.st-feature__icon {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.st-feature--light .st-feature__icon { background: var(--st-green); color: #fff; }
.st-feature--dark  .st-feature__icon { background: #fff; color: var(--st-green); }

.st-feature__title {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.st-feature--light .st-feature__title { color: var(--st-green); }
.st-feature--dark  .st-feature__title { color: #fff; }
.st-feature__title strong { font-weight: 800; }

.st-feature__sep {
  width: 100%;
  height: 1px;
  margin-bottom: 24px;
}
.st-feature--light .st-feature__sep { background: #cfe3d6; }
.st-feature--dark  .st-feature__sep { background: rgba(255, 255, 255, .45); }

.st-feature__text {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
}
.st-feature__foot {
  width: 152px;
  height: 1px;
  margin: auto auto 0;
}
.st-feature--light .st-feature__foot { background: #9aa79f; }
.st-feature--dark  .st-feature__foot { background: rgba(255, 255, 255, .6); }

/* ==========================================================================
   4. WIDAĆ WYRAŹNĄ RÓŻNICĘ — porównanie
   ========================================================================== */
.st-compare {
  background: #fff;
  padding-bottom: 128px;
}
.st-compare__heading { margin-bottom: 74px; }
.st-compare__heading .st-heading__text {
  font-size: 44px;
  letter-spacing: .01em;
  color: var(--st-green);
}
.st-compare__heading .st-heading__text em { color: var(--st-orange); }

.st-compare__panel {
  position: relative;
  border-radius: 64px;
  overflow: hidden;
  min-height: 730px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}
.st-compare__panel-bg { position: absolute; inset: 0; }
.st-compare__frame {
  position: absolute;
  inset: 22px;
  border: 2px dashed rgba(255, 255, 255, .6);
  border-radius: 46px;
  pointer-events: none;
  z-index: 2;
}
.st-compare__side {
  position: relative;
  z-index: 3;
  flex: 0 0 366px;
  padding: 106px 46px 40px;
  color: #fff;
}
.st-compare__side--left { text-align: right; }
.st-compare__label {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .34em;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  margin: 0 0 34px;
}
.st-compare__list { list-style: none; margin: 0; padding: 0; }
.st-compare__list li {
  font-size: 21px;
  line-height: 1.38;
  font-weight: 500;
  padding: 0 0 0 18px;
  margin-bottom: 34px;
}
.st-compare__side--left .st-compare__list li {
  padding: 0 18px 0 0;
  border-right: 2px solid rgba(255, 255, 255, .9);
}
.st-compare__side--right .st-compare__list li {
  border-left: 2px solid rgba(255, 255, 255, .9);
}

.st-compare__media {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  margin: 0;
}
.st-compare__media .st-ph { flex: 1 1 50%; }

.st-compare__tabs {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  z-index: 5;
}
.st-compare__tab {
  border: 0;
  padding: 0 52px;
  height: 76px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background: rgba(120, 120, 120, .85);
  cursor: pointer;
}
.st-compare__tab.is-active { background: var(--st-green); }

.st-compare__nav {
  position: absolute;
  top: 46px;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: 22px;
  z-index: 5;
  cursor: pointer;
}
.st-compare__nav--prev { left: 356px; background: var(--st-green); }
.st-compare__nav--next { right: 356px; background: rgba(150, 150, 150, .85); }

/* ==========================================================================
   5. CYTAT — pas pomarańczowy
   ========================================================================== */
.st-quote {
  background: var(--st-orange);
  padding: 57px 0 22px;
  border-top: 0;
}
.st-quote__inner {
  border-top: 1px solid rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(255, 255, 255, .85);
  padding: 76px 0 60px;
  text-align: center;
  color: #fff;
}
.st-quote__text {
  margin: 0 auto;
  max-width: 1420px;
  font-family: var(--st-font-serif);
  font-size: 44px;
  line-height: 1.44;
  font-weight: 400;
}
.st-quote__rule {
  width: 128px;
  height: 3px;
  background: #fff;
  margin: 52px auto 30px;
}
.st-quote__sign {
  font-size: 25px;
  letter-spacing: .05em;
  color: #111;
}
.st-quote__sign strong { font-weight: 800; }

/* ==========================================================================
   6. GALERIA
   ========================================================================== */
.st-gallery {
  background: #fff;
  padding: 74px 0 78px;
}
.st-gallery__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 61px;
}
.st-gallery__viewport { overflow: hidden; flex: 1 1 auto; }
.st-gallery__track {
  display: flex;
  gap: 40px;
  transition: transform .45s ease;
}
.st-gallery__item { flex: 0 0 459px; }
.st-gallery__item .st-ph {
  height: 452px;
  border-radius: var(--st-radius-lg);
}
.st-gallery__nav {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 12px;
  background: var(--st-green);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* ==========================================================================
   7. SPOSÓB UŻYCIA
   ========================================================================== */
.st-usage {
  position: relative;
  background: var(--st-green-800);
  padding: 74px 0 100px;
  overflow: hidden;
}
.st-usage__deco {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(255, 255, 255, .07) 0 40%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(90% 50% at 88% 100%, rgba(0, 0, 0, .18) 0 50%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.st-usage__inner { position: relative; z-index: 2; }
.st-usage__heading .st-heading__text { color: #fff; }
.st-usage__heading .st-heading__line { background: rgba(255, 255, 255, .55); }

.st-usage__card {
  position: relative;
  margin: 96px 0 0 190px;
  width: 1360px;
  min-height: 838px;
  background: #fff;
  border-radius: var(--st-radius-xl);
  display: flex;
  align-items: center;
}
.st-usage__media {
  position: absolute;
  left: -196px;
  top: 76px;
  width: 852px;
  height: 686px;
}
.st-usage__media .st-ph {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.st-usage__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 108px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--st-green-800);
  font-size: 36px;
  cursor: pointer;
}
.st-usage__next {
  position: absolute;
  right: -38px;
  top: 76px;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 12px;
  background: var(--st-green-800);
  color: var(--st-orange);
  font-size: 30px;
  cursor: pointer;
}
.st-usage__body {
  margin-left: 762px;
  padding: 92px 70px 92px 0;
  width: 520px;
}
.st-usage__rule {
  width: 108px;
  height: 3px;
  background: var(--st-orange);
}
.st-usage__list {
  list-style: none;
  margin: 44px 0 44px;
  padding: 0;
}
.st-usage__list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 30px;
  font-size: 25px;
  line-height: 1.32;
  font-weight: 600;
  color: var(--st-green-800);
}
.st-usage__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 14px;
  background: var(--st-orange);
}

/* ==========================================================================
   8. PAKOWANIE I LOGISTYKA
   ========================================================================== */
.st-packaging { background: var(--st-cream); }
.st-packaging__top {
  position: relative;
  padding: 106px 0 84px;
  text-align: center;
}
.st-packaging__jump { top: -50px; }
.st-packaging__lead {
  margin: 128px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--st-orange-deep);
}
.st-packaging__lead-rule {
  width: 410px;
  height: 1px;
  background: var(--st-orange);
  margin: 84px auto 0;
}

.st-packaging__split { display: flex; }
.st-packaging__col {
  flex: 0 0 50%;
  max-width: 50%;
  min-height: 811px;
  position: relative;
}
.st-packaging__col--left { background: #fff; }
.st-packaging__col--right {
  background: linear-gradient(160deg, #fa8208 0%, #f0700f 45%, #b74a06 100%);
  overflow: hidden;
}

.st-packaging__left-inner {
  padding: 100px 0 0 137px;
  display: flex;
  gap: 40px;
}
.st-packaging__spec { width: 380px; }
.st-packaging__title {
  margin: 0;
  white-space: nowrap;
  font-size: 38px;
  font-weight: 800;
  color: var(--st-green);
}
.st-packaging__subtitle {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--st-orange-deep);
}
.st-packaging__dashed {
  border: 0;
  border-top: 2px dashed var(--st-green);
  opacity: .8;
  margin: 40px 0 34px;
  width: 280px;
}
.st-packaging__list { list-style: none; margin: 0; padding: 0; }
.st-packaging__list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 600;
  color: var(--st-green-800);
}
.st-packaging__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  background: var(--st-orange);
}
.st-packaging__list b { color: var(--st-orange-deep); font-weight: 800; }

.st-packaging__hint {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 48px;
}
.st-packaging__hint-media {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid var(--st-green);
  overflow: hidden;
}
.st-packaging__hint-media .st-ph { width: 100%; height: 100%; }
.st-packaging__hint-body {
  border-left: 2px dashed var(--st-green);
  padding-left: 24px;
  max-width: 170px;
}
.st-packaging__hint-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--st-orange-deep);
}
.st-packaging__hint-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--st-green-800);
}

.st-packaging__bag {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding-top: 8px;
}
.st-packaging__bag .st-ph {
  width: 300px;
  height: 470px;
}
.st-packaging__dim {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 600;
  padding-top: 6px;
}
.st-packaging__dim-line {
  flex: 1 1 auto;
  width: 2px;
  background: #1a1a1a;
  margin: 6px 0;
}

.st-packaging__right-inner {
  position: relative;
  z-index: 2;
  padding: 88px 0 0 128px;
  color: #fff;
}
.st-packaging__brand {
  margin: 0;
  font-size: 54px;
  font-weight: 800;
  color: var(--st-green-800);
  line-height: 1;
}
.st-packaging__brand-sub {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.st-packaging__truck {
  position: absolute;
  left: 0;
  right: 0;
  top: 205px;
  height: 380px;
}
.st-packaging__truck .st-ph { width: 100%; height: 100%; background-color: #7a4a1e; }
.st-packaging__claim {
  position: absolute;
  left: 128px;
  bottom: 96px;
  z-index: 3;
  border-left: 2px solid rgba(255, 255, 255, .6);
  padding-left: 26px;
  color: #fff;
}
.st-packaging__claim-title {
  margin: 0 0 12px;
  font-size: 27px;
  font-weight: 800;
}
.st-packaging__claim-text {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.35;
}
.st-packaging__claim-note {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
}

/* ==========================================================================
   9. WYDAJNOŚĆ
   ========================================================================== */
.st-yield {
  position: relative;
  background: var(--st-green-950);
  padding: 118px 0 0;
  overflow: hidden;
}
.st-yield__bg { position: absolute; inset: 0; opacity: .5; }
.st-yield__inner { position: relative; z-index: 2; }
.st-yield__lead {
  margin: 88px auto 0;
  max-width: 1020px;
  text-align: center;
  color: #fff;
  font-size: 27px;
  line-height: 1.5;
  font-weight: 500;
}
.st-yield__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 84px;
  margin-top: 104px;
  align-items: start;
}
.st-yield__card {
  background: #fdfcfa;
  border-radius: var(--st-radius-lg);
  padding: 44px 52px 40px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .25);
}
.st-yield__card-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 26px;
}
.st-yield__card-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--st-green-800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.st-yield__card-title {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  color: var(--st-green-800);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.st-yield__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--st-ink);
  text-align: center;
}
.st-yield__table th {
  font-size: 22px;
  font-weight: 500;
  padding: 10px 8px 22px;
  line-height: 1.35;
  border-bottom: 1px solid #dfded6;
}
.st-yield__table td {
  font-size: 22px;
  font-weight: 500;
  padding: 15px 8px;
  border-bottom: 1px solid #ecebe4;
}
.st-yield__table tr:last-child td { border-bottom: 0; }
.st-yield__table tbody tr:nth-child(even) { background: #f1f2e7; }
.st-yield__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 62px 0 0;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
}
.st-yield__note .fa-leaf { color: var(--st-orange); font-size: 32px; }
.st-yield__foot { position: relative; height: 112px; }
.st-yield__foot .st-jump { bottom: -50px; }

/* ==========================================================================
   10. WIEDZA I PRAKTYKA
   ========================================================================== */
.st-knowledge__band {
  background: var(--st-orange);
  height: 244px;
  display: flex;
  align-items: center;
}
.st-knowledge__cards {
  background: #fff;
  padding: 100px 0 92px;
  position: relative;
}
.st-knowledge__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 104px;
}
.st-know-card {
  border: 1px solid #e3e3dd;
  border-radius: var(--st-radius-lg);
  padding: 32px 32px 40px;
  background: #fff;
}
.st-know-card__media { position: relative; }
.st-know-card__media .st-ph {
  height: 372px;
  border-radius: var(--st-radius-sm);
}
.st-know-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 128px;
  height: 128px;
  border: 0;
  border-radius: 50%;
  background: var(--st-orange-deep);
  color: #fff;
  font-size: 44px;
  cursor: pointer;
}
.st-know-card__title {
  margin: 34px 0 8px;
  font-size: 30px;
  font-weight: 800;
  color: var(--st-green-800);
}
.st-know-card__text {
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 500;
  color: var(--st-ink);
}
.st-know-card__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 800;
  color: var(--st-green-800);
  text-decoration: none;
}
.st-know-card__link i { color: var(--st-orange-deep); font-size: 20px; }
.st-know-card__link:hover { color: var(--st-orange-deep); text-decoration: none; }

/* ==========================================================================
   11. KATALOG PRODUKTÓW
   ========================================================================== */
.st-catalog__band {
  position: relative;
  background: var(--st-cream);
  height: 264px;
  display: flex;
  align-items: center;
}
.st-catalog__band .st-jump { top: -50px; }

.st-catalog__body { background: #fff; padding: 60px 0 148px; }
.st-catalog__panel {
  position: relative;
  min-height: 760px;
  border-radius: var(--st-radius-xl);
  background: var(--st-green-700);
  overflow: visible;
}
.st-catalog__panel-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--st-radius-xl);
  overflow: hidden;
  background:
    radial-gradient(80% 80% at 80% 20%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%),
    var(--st-green-700);
}
.st-catalog__media {
  position: absolute;
  left: -135px;
  top: 66px;
  width: 950px;
  height: 640px;
  border-radius: 0 var(--st-radius-xl) var(--st-radius-xl) 0;
  background: linear-gradient(150deg, #f3a06e 0%, #f07d34 60%, #ef6f1e 100%);
  z-index: 2;
}
.st-catalog__media .st-ph {
  position: absolute;
  left: 120px;
  top: 60px;
  width: 830px;
  height: 500px;
  background-color: transparent;
  background-image: none;
}
.st-catalog__media .st-ph::after { color: rgba(255, 255, 255, .8); }

.st-catalog__next {
  position: absolute;
  right: -42px;
  top: 100px;
  z-index: 4;
  width: 84px;
  height: 84px;
  border: 0;
  background: #fff;
  color: var(--st-orange-deep);
  font-size: 30px;
  cursor: pointer;
}
.st-catalog__content {
  position: relative;
  z-index: 3;
  margin-left: 950px;
  padding: 96px 60px 60px 0;
  color: #fff;
}
.st-catalog__eyebrow {
  margin: 0 0 4px;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
}
.st-catalog__title {
  margin: 0 0 34px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.28;
  color: var(--st-orange);
}
.st-catalog__rule {
  width: 108px;
  height: 3px;
  background: var(--st-orange);
  margin-bottom: 30px;
}
.st-catalog__desc-title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
}
.st-catalog__desc {
  margin: 0 0 52px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--st-orange);
}
.st-catalog__cta-wrap { position: relative; }
.st-catalog__cta-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 128px;
  width: 1000px;
  background: var(--st-orange-deep);
}
.st-catalog__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  width: 366px;
  border: 2px dashed rgba(255, 255, 255, .9);
  background: #fff;
  color: var(--st-orange-deep);
  font-size: 28px;
  font-weight: 800;
  text-decoration: none;
}
.st-catalog__cta:hover { color: var(--st-green-800); text-decoration: none; }

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.st-faq__band {
  position: relative;
  background: var(--st-cream);
  padding: 106px 0 96px;
}
.st-faq__band .st-jump { top: -50px; }
.st-faq__subtitle {
  margin: 106px 0 0;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--st-orange-deep);
}
.st-faq__body { background: #fff; padding: 84px 0 96px; }

.st-faq__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 110px;
  margin-bottom: 60px;
}
.st-faq__row--single { grid-template-columns: 948px; justify-content: center; margin-bottom: 0; }

.st-faq__item { position: relative; padding-top: 30px; }
.st-faq__row > .st-faq__item { align-items: stretch; }
.st-faq__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--st-green-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 2;
}
.st-faq__item { display: flex; }
.st-faq__q {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 22px;
  background: var(--st-orange-deep);
  color: #fff;
  font-family: var(--st-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  padding: 44px 60px;
  min-height: 132px;
  text-align: center;
  cursor: pointer;
}
.st-faq__q:not([aria-controls]) { cursor: default; }
.st-faq__answer {
  display: none;
  margin: -46px 0 0;
  padding: 96px 120px 60px;
  border-radius: 30px;
  background: var(--st-green-900);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.st-faq__answer.is-open { display: block; }
.st-faq__answer p { margin: 0; }
.st-faq__answers { position: relative; }

/* ==========================================================================
   13. FORMULARZ KONTAKTOWY
   ========================================================================== */
.st-contact {
  position: relative;
  background: var(--st-beige);
  padding: 130px 0 150px;
  overflow: hidden;
}
.st-contact__leaf {
  position: absolute;
  width: 300px;
  height: 380px;
  opacity: .55;
}
.st-contact__leaf--tl { left: -40px; top: 120px; }
.st-contact__leaf--br { right: -30px; bottom: 60px; }
.st-contact__leaf .st-ph {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: none;
  border: 1px dashed #cbb9a6;
  border-radius: 12px;
}
.st-contact__leaf .st-ph::after { color: #b39982; font-size: 12px; }

.st-contact__inner { position: relative; z-index: 2; }
.st-contact__title {
  margin: 0;
  text-align: center;
  font-size: 52px;
  font-weight: 800;
  color: var(--st-green-900);
}
.st-contact__subtitle {
  margin: 14px 0 0;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  color: var(--st-green-800);
}
.st-contact__card {
  position: relative;
  width: 1440px;
  max-width: 100%;
  margin: 92px auto 0;
  background: #fff;
  border-radius: var(--st-radius-xl);
  padding: 92px 104px 128px;
  box-shadow: 0 30px 70px rgba(120, 96, 78, .18);
}
.st-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 78px;
}
.st-contact__field--full { grid-column: 1 / -1; text-align: center; }
.st-contact__label {
  display: block;
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 800;
  color: var(--st-green-800);
}
.st-contact__input,
.st-contact__textarea {
  width: 100%;
  border: 1px solid #c9cdc9;
  border-radius: 12px;
  padding: 22px 26px;
  font-family: var(--st-font);
  font-size: 24px;
  font-weight: 500;
  color: var(--st-ink);
  background: #fff;
}
.st-contact__input::placeholder,
.st-contact__textarea::placeholder { color: #a8aca8; }
.st-contact__input:focus,
.st-contact__textarea:focus { outline: 2px solid var(--st-green); outline-offset: 0; }
.st-contact__textarea { min-height: 200px; resize: vertical; text-align: center; }
.st-contact__submit {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  height: 128px;
  padding: 0 74px;
  font-size: 30px;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(0, 55, 36, .25);
}
.st-contact__submit i { font-size: 34px; }

/* ==========================================================================
   14. CERES — o firmie
   ========================================================================== */
.st-about { display: flex; background: var(--st-green-900); }
.st-about__col {
  flex: 0 0 52.1%;
  max-width: 52.1%;
  padding: 282px 120px 70px 122px;
  color: #fff;
}
.st-about__logo { width: 330px; margin-bottom: 68px; }
.st-about__logo .st-ph { height: 74px; background-color: rgba(255, 255, 255, .1); }
.st-about__logo .st-ph::after { color: rgba(255, 255, 255, .6); }
.st-about__title {
  margin: 0 0 40px;
  font-size: 38px;
  font-weight: 800;
}
.st-about__text {
  margin: 0 0 32px;
  font-size: 24px;
  line-height: 1.45;
  font-weight: 500;
  max-width: 770px;
}
.st-about__cta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding: 26px 40px;
  border: 2px solid #fff;
  border-radius: var(--st-radius-sm);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  text-decoration: none;
}
.st-about__cta:hover { background: #fff; color: var(--st-green-900); text-decoration: none; }
.st-about__claim {
  margin: 96px 0 0;
  text-align: center;
  font-family: var(--st-font-serif);
  font-size: 46px;
  line-height: 1.35;
  color: #fff;
}
.st-about__claim span { color: var(--st-orange); }
.st-about__media { flex: 1 1 auto; }
.st-about__media .st-ph { width: 100%; height: 100%; min-height: 1318px; }

/* ==========================================================================
   15. STOPKA
   ========================================================================== */
.st-footer { display: flex; min-height: 299px; background: var(--st-footer); }
.st-footer__brand {
  flex: 0 0 422px;
  background: #fff;
  display: flex;
  align-items: center;
  padding-left: 68px;
}
.st-footer__brand-logo { width: 244px; }
.st-footer__brand-logo .st-ph { height: 66px; }
.st-footer__main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 0 150px 0 74px;
  color: #fff;
}
.st-footer__links { display: flex; flex-direction: column; gap: 2px; }
.st-footer__links a {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
}
.st-footer__links a:hover { color: var(--st-orange); text-decoration: none; }
.st-footer__copy {
  margin: 46px 0 0;
  font-size: 19px;
  letter-spacing: .02em;
  color: #fff;
}
.st-footer__right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 56px;
}
.st-footer__social { display: flex; align-items: center; gap: 68px; }
.st-footer__social a { color: #fff; font-size: 36px; }
.st-footer__social a:hover { color: var(--st-orange); }
.st-footer__made {
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  color: var(--st-orange);
}

/* ==========================================================================
   RESPONSYWNOŚĆ — poniżej 1200px
   ========================================================================== */
@media (max-width: 1199.98px) {
  .st-container,
  .st-container--narrow,
  .st-container--wide,
  .st-container--gallery { width: 100%; padding-left: 24px; padding-right: 24px; }

  .st-heading { gap: 20px; }
  .st-heading__text { font-size: 26px; letter-spacing: .14em; white-space: normal; text-align: center; }

  /* Header */
  .st-header { height: auto; padding: 18px 0; }
  .st-header__inner { flex-wrap: wrap; gap: 16px; }
  .st-header__logo { width: 150px; }
  .st-header__nav { order: 4; width: 100%; margin-left: 0; gap: 28px; justify-content: center; }
  .st-header__link { font-size: 16px; }
  .st-header__cta { height: 54px; padding: 0 26px; font-size: 15px; }
  .st-header__lang { margin-left: 18px; }
  .st-header__lang-label { display: none; }

  /* Hero */
  .st-hero { height: auto; }
  .st-hero__bg { position: relative; height: 320px; }
  .st-hero__inner { padding-top: 32px; padding-bottom: 40px; background: var(--st-green-800); }
  .st-hero__content { position: static; width: 100%; }
  .st-hero__title { font-size: 42px; }
  .st-hero__subtitle { font-size: 30px; }
  .st-hero__lead { font-size: 18px; }
  .st-hero__rule { margin: 20px 0 18px; }
  .st-hero__cta { position: static; width: 100%; max-width: 320px; height: 62px; font-size: 18px; margin-top: 28px; }
  .st-hero__badges { position: static; width: 100%; margin-top: 32px; gap: 14px; }
  .st-hero__badge { background: rgba(255, 255, 255, .12); }
  .st-hero__badge-icon { width: 56px; height: 56px; font-size: 22px; }
  .st-hero__badge-text { font-size: 15px; }
  .st-hero__note { position: static; margin-top: 32px; }
  .st-hero__note-big { font-size: 38px; }
  .st-hero__note-desc { font-size: 17px; }
  .st-hero__dash { display: none; }

  /* Karty korzyści */
  .st-features { padding-bottom: 48px; }
  .st-features__grid { grid-template-columns: repeat(2, 1fr); gap: 74px 24px; margin-top: 70px; }
  .st-feature { min-height: 0; padding: 62px 22px 30px; }
  .st-feature__title { font-size: 19px; }
  .st-feature__text { font-size: 15px; }
  .st-feature__icon { width: 68px; height: 68px; font-size: 28px; top: -34px; }

  /* Porównanie */
  .st-compare { padding-bottom: 56px; }
  .st-compare__heading { margin-bottom: 34px; }
  .st-compare__heading .st-heading__text { font-size: 26px; }
  .st-compare__panel { flex-direction: column; border-radius: 28px; min-height: 0; padding-top: 120px; }
  .st-compare__frame { inset: 12px; border-radius: 20px; }
  .st-compare__side { flex: 1 1 auto; padding: 24px 26px; text-align: left; }
  .st-compare__side--left { text-align: left; order: 2; }
  .st-compare__side--right { order: 3; }
  .st-compare__side--left .st-compare__list li {
    padding: 0 0 0 16px;
    border-right: 0;
    border-left: 2px solid rgba(255, 255, 255, .9);
  }
  .st-compare__list li { font-size: 16px; margin-bottom: 20px; }
  .st-compare__media { order: 1; height: 300px; }
  .st-compare__tabs { top: 24px; }
  .st-compare__tab { height: 54px; padding: 0 22px; font-size: 15px; }
  .st-compare__nav { display: none; }

  /* Cytat */
  .st-quote { padding: 28px 0 14px; }
  .st-quote__inner { padding: 40px 0 32px; }
  .st-quote__text { font-size: 22px; }
  .st-quote__sign { font-size: 17px; }

  /* Galeria */
  .st-gallery { padding: 40px 0; }
  .st-gallery__inner { gap: 14px; }
  .st-gallery__track { gap: 20px; }
  .st-gallery__item { flex: 0 0 260px; }
  .st-gallery__item .st-ph { height: 260px; border-radius: 18px; }
  .st-gallery__nav { width: 44px; height: 44px; font-size: 16px; }

  /* Sposób użycia */
  .st-usage { padding: 44px 0 60px; }
  .st-usage__card { margin: 40px 0 0; width: 100%; min-height: 0; flex-direction: column; border-radius: 24px; }
  .st-usage__media { position: relative; left: 0; top: 0; width: 100%; height: 300px; }
  .st-usage__next { right: 12px; top: 12px; width: 54px; height: 54px; font-size: 20px; }
  .st-usage__play { width: 88px; height: 74px; font-size: 26px; }
  .st-usage__body { margin-left: 0; width: 100%; padding: 34px 26px 40px; }
  .st-usage__list li { font-size: 17px; margin-bottom: 20px; padding-left: 26px; }
  .st-usage__list li::before { width: 10px; height: 10px; top: 8px; }

  /* Pakowanie */
  .st-jump { width: 68px; height: 68px; font-size: 24px; }
  .st-packaging__top { padding: 66px 0 46px; }
  .st-packaging__jump { top: -34px; }
  .st-packaging__lead { margin-top: 48px; font-size: 17px; }
  .st-packaging__lead-rule { margin-top: 42px; width: 60%; }
  .st-packaging__split { flex-direction: column; }
  .st-packaging__col { flex: 1 1 auto; max-width: 100%; min-height: 0; }
  .st-packaging__left-inner { flex-direction: column; padding: 44px 24px 48px; }
  .st-packaging__spec { width: 100%; }
  .st-packaging__title { font-size: 26px; }
  .st-packaging__subtitle { font-size: 18px; }
  .st-packaging__list li { font-size: 17px; margin-bottom: 18px; }
  .st-packaging__bag { justify-content: center; }
  .st-packaging__bag .st-ph { width: 190px; height: 300px; }
  .st-packaging__hint-body { max-width: none; }
  .st-packaging__hint-text { font-size: 16px; }
  .st-packaging__right-inner { padding: 44px 24px 0; }
  .st-packaging__brand { font-size: 34px; }
  .st-packaging__brand-sub { font-size: 17px; }
  .st-packaging__truck { position: relative; top: 0; height: 220px; margin-top: 26px; }
  .st-packaging__claim { position: static; padding: 26px 0 44px 26px; margin: 0 24px; }
  .st-packaging__claim-title,
  .st-packaging__claim-text { font-size: 18px; }
  .st-packaging__claim-note { font-size: 14px; }

  /* Wydajność */
  .st-yield { padding-top: 62px; }
  .st-yield__lead { font-size: 17px; margin-top: 40px; }
  .st-yield__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 44px; }
  .st-yield__card { padding: 26px 22px; }
  .st-yield__card-title { font-size: 20px; }
  .st-yield__table th,
  .st-yield__table td { font-size: 16px; padding: 10px 4px; }
  .st-yield__note { font-size: 16px; margin-top: 34px; }
  .st-yield__foot { height: 70px; }

  /* Wiedza */
  .st-knowledge__band { height: 150px; }
  .st-knowledge__cards { padding: 56px 0 48px; }
  .st-knowledge__grid { grid-template-columns: 1fr; gap: 32px; }
  .st-know-card__media .st-ph { height: 220px; }
  .st-know-card__play { width: 80px; height: 80px; font-size: 28px; }
  .st-know-card__title { font-size: 21px; margin-top: 22px; }
  .st-know-card__text { font-size: 16px; }
  .st-know-card__link { font-size: 17px; }

  /* Katalog */
  .st-catalog__band { height: 150px; }
  .st-catalog__band .st-jump { top: -34px; }
  .st-catalog__body { padding: 34px 0 64px; }
  .st-catalog__panel { min-height: 0; border-radius: 24px; }
  .st-catalog__panel-bg { border-radius: 24px; }
  .st-catalog__media { position: relative; left: 0; top: 0; width: 100%; height: 280px; border-radius: 24px 24px 0 0; }
  .st-catalog__media .st-ph { position: absolute; inset: 20px; width: auto; height: auto; }
  .st-catalog__next { left: auto; right: 14px; top: 14px; width: 54px; height: 54px; font-size: 20px; }
  .st-catalog__content { margin-left: 0; padding: 34px 24px 44px; }
  .st-catalog__eyebrow,
  .st-catalog__title { font-size: 22px; }
  .st-catalog__desc-title,
  .st-catalog__desc { font-size: 17px; }
  .st-catalog__cta-bar { display: none; }
  .st-catalog__cta { width: 100%; max-width: 320px; height: 76px; font-size: 19px; }

  /* FAQ */
  .st-faq__band { padding: 62px 0 48px; }
  .st-faq__band .st-jump { top: -34px; }
  .st-faq__subtitle { margin-top: 44px; font-size: 17px; }
  .st-faq__body { padding: 40px 0 56px; }
  .st-faq__row { grid-template-columns: 1fr; gap: 46px; margin-bottom: 46px; }
  .st-faq__row--single { grid-template-columns: 1fr; }
  .st-faq__q { font-size: 16px; padding: 26px 24px; min-height: 0; border-radius: 16px; }
  .st-faq__badge { width: 48px; height: 48px; font-size: 18px; }
  .st-faq__answer { padding: 60px 24px 32px; font-size: 16px; border-radius: 20px; }

  /* Kontakt */
  .st-contact { padding: 62px 0 96px; }
  .st-contact__leaf { display: none; }
  .st-contact__title { font-size: 28px; }
  .st-contact__subtitle { font-size: 17px; }
  .st-contact__card { width: 100%; margin-top: 40px; padding: 34px 22px 84px; border-radius: 24px; }
  .st-contact__grid { grid-template-columns: 1fr; gap: 20px; }
  .st-contact__label { font-size: 19px; }
  .st-contact__input,
  .st-contact__textarea { font-size: 16px; padding: 14px 16px; }
  .st-contact__submit { height: 68px; padding: 0 32px; font-size: 18px; bottom: -26px; border-radius: 16px; }
  .st-contact__submit i { font-size: 20px; }

  /* CERES */
  .st-about { flex-direction: column; }
  .st-about__col { flex: 1 1 auto; max-width: 100%; padding: 48px 24px 44px; }
  .st-about__logo { width: 200px; margin-bottom: 30px; }
  .st-about__title { font-size: 24px; margin-bottom: 22px; }
  .st-about__text { font-size: 16px; }
  .st-about__cta { font-size: 18px; padding: 16px 24px; }
  .st-about__claim { font-size: 26px; margin-top: 48px; }
  .st-about__media .st-ph { min-height: 300px; }

  /* Stopka */
  .st-footer { flex-direction: column; }
  .st-footer__brand { flex: 1 1 auto; padding: 26px 24px; justify-content: center; }
  .st-footer__main { flex-direction: column; align-items: flex-start; padding: 32px 24px 40px; gap: 26px; }
  .st-footer__links a { font-size: 17px; }
  .st-footer__copy { margin-top: 18px; font-size: 14px; }
  .st-footer__right { margin-left: 0; align-items: flex-start; gap: 22px; }
  .st-footer__social { gap: 34px; }
  .st-footer__social a { font-size: 26px; }
}

@media (max-width: 767.98px) {
  .st-features__grid { grid-template-columns: 1fr; gap: 68px; }
  .st-hero__badges { grid-template-columns: 1fr; }
  .st-hero__title { font-size: 34px; }
  .st-hero__subtitle { font-size: 24px; }
  .st-gallery__item { flex: 0 0 82%; }
  .st-gallery__item .st-ph { height: 220px; }
  .st-quote__text { font-size: 19px; }
  .st-about__claim { font-size: 21px; }
}

@media (max-width: 575.98px) {
  .st-container,
  .st-container--narrow,
  .st-container--wide,
  .st-container--gallery { padding-left: 16px; padding-right: 16px; }
  .st-heading__text { font-size: 20px; }
  .st-header__logo { width: 128px; }
  .st-header__cta { height: 46px; padding: 0 18px; font-size: 13px; gap: 8px; }
  .st-hero__title { font-size: 28px; }
  .st-hero__subtitle { font-size: 20px; }
  .st-hero__lead { font-size: 16px; }
  .st-compare__tab { padding: 0 14px; font-size: 13px; }
  .st-contact__title { font-size: 22px; }
}