.gp-page {
  margin: 0;
  background: #f8f4f2;
}

.gp-promo,
.gp-promo * {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

.gp-promo {
  --gp-black: #1c1b29;
  --gp-green: #97c680;
  --gp-dark-green: #2b573f;
  --gp-bg: #f8f4f2;
  --gp-card: #ffffff;
  --gp-salad: #cddaab;
  --gp-brown: #e9d6c4;
  --gp-border: #dadce1;
  --gp-muted: #969bb9;
  --gp-shadow: 0 10px 40px 0 rgba(66, 66, 66, 0.15);
  width: 100%;
  overflow: hidden;
  padding: 36px 0;
  background: var(--gp-bg);
  color: var(--gp-black);
  font-family: "Inter", sans-serif;
}

.gp-promo a {
  color: inherit;
  text-decoration: none;
}

.gp-promo img,
.gp-promo svg {
  display: block;
}

.gp-promo svg {
  shape-rendering: geometricPrecision;
}

.gp-promo figure {
  margin: 0;
}

.gp-promo__container {
  width: 100%;
  max-width: 1750px;
  margin: 0 auto;
  padding: 0 15px;
}

.gp-promo__banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(420px, 1fr);
  align-items: stretch;
  overflow: hidden;
  min-height: 360px;
  border: 1px solid var(--gp-border);
  border-radius: 25px;
  background: var(--gp-card);
  box-shadow: var(--gp-shadow);
}

.gp-promo__banner::before {
  position: absolute;
  top: -72px;
  left: -54px;
  width: 210px;
  height: 210px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(151, 198, 128, 0.32) 0, rgba(151, 198, 128, 0) 68%);
  pointer-events: none;
}

.gp-promo__banner::after {
  position: absolute;
  right: 43%;
  bottom: -88px;
  width: 190px;
  height: 190px;
  content: "";
  border-radius: 36px;
  background: linear-gradient(135deg, rgba(233, 214, 196, 0.5), rgba(205, 218, 171, 0.24));
  transform: rotate(18deg);
  pointer-events: none;
}

.gp-promo__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(24px, 3vw, 38px);
}

.gp-promo__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 34px;
  padding: 7px 13px 7px 10px;
  border-radius: 10em;
  border: 1px solid rgba(151, 198, 128, 0.7);
  background: linear-gradient(135deg, var(--gp-green), var(--gp-salad));
  color: var(--gp-black);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(151, 198, 128, 0.22);
}

.gp-promo__badge-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  color: var(--gp-black);
}

.gp-promo__badge-icon svg {
  width: 23px;
  height: 23px;
}

.gp-promo__content h2 {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--gp-black);
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 700;
  line-height: 118%;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.gp-promo__content h2 span {
  color: var(--gp-black);
  box-shadow: inset 0 -0.35em 0 0 var(--gp-green);
}

.gp-promo__text {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--gp-black);
  font-size: 16px;
  font-weight: 400;
  line-height: 155%;
  opacity: 0.86;
  overflow-wrap: anywhere;
}

.gp-promo__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  max-width: 780px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.gp-promo__benefits li {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 10px;
  color: var(--gp-black);
  font-size: 14px;
  font-weight: 600;
  line-height: 145%;
  overflow-wrap: anywhere;
}

.gp-promo__benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-top: -6px;
  border: 1px solid rgba(151, 198, 128, 0.45);
  border-radius: 50%;
  background: rgba(205, 218, 171, 0.38);
  color: var(--gp-dark-green);
}

.gp-promo__benefit-icon svg,
.gp-promo__benefit-icon img {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.gp-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.gp-promo .gp-promo__btn,
.gp-promo .gp-promo__btn:link,
.gp-promo .gp-promo__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  max-width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--gp-black);
  border-radius: 10em;
  background: var(--gp-black);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 130%;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 14px 26px rgba(28, 27, 41, 0.18);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.gp-promo .gp-promo__btn:hover,
.gp-promo .gp-promo__btn:focus {
  background: #424259;
  border-color: #424259;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 16px 30px rgba(28, 27, 41, 0.22);
  transform: translateY(-1px);
}

.gp-promo .gp-promo__btn:focus-visible {
  outline: 2px solid var(--gp-green);
  outline-offset: 3px;
}

.gp-promo .gp-promo__btn:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  transform: translateY(0);
}

.gp-promo .gp-promo__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--gp-green);
  color: var(--gp-black);
  -webkit-text-fill-color: var(--gp-black);
}

.gp-promo .gp-promo__btn-icon svg {
  width: 17px;
  height: 17px;
}

.gp-promo__action-note {
  margin: 8px 0 0;
  color: var(--gp-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
}

.gp-promo__media {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 360px;
  overflow: hidden;
  background: var(--gp-black);
}

.gp-promo__media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, rgba(28, 27, 41, 0) 42%, rgba(28, 27, 41, 0.42) 100%);
  pointer-events: none;
}

.gp-promo__media::before {
  position: absolute;
  inset: 18px;
  z-index: 2;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  pointer-events: none;
}

.gp-promo__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gp-promo__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.8s ease, transform 5.6s ease;
  pointer-events: none;
}

.gp-promo__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.gp-promo__slide img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.gp-promo__stat-sets {
  position: absolute;
  right: 26px;
  bottom: 26px;
  left: 26px;
  z-index: 3;
  min-height: 82px;
}

.gp-promo__stats {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: end;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.gp-promo__stats.is-active {
  opacity: 1;
  transform: translateY(0);
}

.gp-promo__stat {
  position: relative;
  min-width: 0;
  padding: 17px 18px 17px 54px;
  border: 2px solid rgba(151, 198, 128, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--gp-black);
  box-shadow: 0 14px 32px rgba(28, 27, 41, 0.24);
  backdrop-filter: blur(10px);
}

.gp-promo__stat::before {
  position: absolute;
  top: 50%;
  left: 29px;
  width: 22px;
  height: 22px;
  content: "";
  border-radius: 50%;
  background: var(--gp-green);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.76), 0 0 0 5px rgba(151, 198, 128, 0.22);
  transform: translate(-50%, -50%);
}

.gp-promo__stat::after {
  position: absolute;
  top: 50%;
  left: 29px;
  width: 22px;
  height: 22px;
  content: "";
  border: 2px solid rgba(151, 198, 128, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  animation: gp-stat-pulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes gp-stat-pulse {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.9);
  }
}

.gp-promo__stat strong,
.gp-promo__stat span {
  display: block;
  overflow-wrap: anywhere;
}

.gp-promo__stat strong {
  font-size: 16px;
  font-weight: 800;
  line-height: 125%;
}

.gp-promo__stat span {
  margin-top: 3px;
  color: var(--gp-dark-green);
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
}

.gp-promo__dots {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 10em;
  background: rgba(28, 27, 41, 0.38);
  backdrop-filter: blur(8px);
}

.gp-promo__dot {
  width: 7px;
  height: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.56);
  cursor: pointer;
  transition: width 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
}

.gp-promo__dot.is-active {
  width: 20px;
  border-radius: 10em;
  background: var(--gp-green);
}

.gp-promo__dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media screen and (max-width: 1280px) {
  .gp-promo__banner {
    grid-template-columns: minmax(0, 1.3fr) minmax(390px, 1fr);
  }

  .gp-promo__content {
    padding: 28px;
  }

  .gp-promo__content h2 {
    font-size: 36px;
  }
}

@media screen and (max-width: 1024px) {
  .gp-promo__banner {
    grid-template-columns: minmax(0, 1.15fr) minmax(350px, 1fr);
    min-height: 330px;
  }

  .gp-promo__content {
    padding: 24px;
  }

  .gp-promo__content h2 {
    font-size: 32px;
  }

  .gp-promo__benefits {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .gp-promo__media,
  .gp-promo__slide img {
    min-height: 330px;
  }

  .gp-promo__stat-sets {
    right: 18px;
    bottom: 18px;
    left: 18px;
    min-height: 96px;
  }

  .gp-promo__stat {
    padding: 14px 14px 14px 48px;
  }

  .gp-promo__stat::before {
    left: 25px;
    width: 20px;
    height: 20px;
  }

  .gp-promo__stat::after {
    left: 25px;
    width: 20px;
    height: 20px;
  }

  .gp-promo__stat strong {
    font-size: 14px;
  }

  .gp-promo__stat span {
    font-size: 13px;
  }
}

@media screen and (max-width: 768px) {
  .gp-promo {
    padding: 28px 0;
  }

  .gp-promo__banner {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 20px;
  }

  .gp-promo__content {
    padding: 22px 20px 20px;
  }

  .gp-promo__content h2 {
    margin-top: 15px;
    font-size: 32px;
  }

  .gp-promo__text {
    margin-top: 12px;
    font-size: 15px;
  }

  .gp-promo__actions {
    margin-top: 20px;
  }

  .gp-promo__btn {
    width: 100%;
    min-height: 54px;
    justify-content: space-between;
    font-size: 14px;
    text-align: left;
  }

  .gp-promo__action-note {
    text-align: center;
  }

  .gp-promo__media {
    min-height: 0;
    padding: 0 14px 14px;
    background: var(--gp-card);
  }

  .gp-promo__media::after {
    content: none;
  }

  .gp-promo__media::before {
    content: none;
  }

  .gp-promo__slides {
    display: none;
  }

  .gp-promo__stat-sets {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    min-height: 64px;
    margin-top: 0;
  }

  .gp-promo__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .gp-promo__stat {
    padding: 13px 14px;
    border-width: 1px;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(28, 27, 41, 0.1);
  }

  .gp-promo__stat::before,
  .gp-promo__stat::after {
    content: none;
  }

  .gp-promo__dots {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .gp-promo {
    padding: 24px 0;
  }

  .gp-promo__container {
    padding: 0 12px;
  }

  .gp-promo__content {
    padding: 20px 18px 18px;
  }

  .gp-promo__content h2 {
    font-size: 30px;
  }

  .gp-promo__stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .gp-promo__stat-sets {
    min-height: 142px;
  }
}

@media screen and (max-width: 375px) {
  .gp-promo__content h2 {
    font-size: 28px;
  }

  .gp-promo__benefits li {
    font-size: 13px;
  }

  .gp-promo__stat-sets {
    min-height: 150px;
  }

  .gp-promo .gp-promo__btn {
    gap: 7px;
    padding-right: 14px;
    padding-left: 14px;
    font-size: 11px;
  }
}

@media screen and (max-width: 320px) {
  .gp-promo__container {
    padding: 0 8px;
  }

  .gp-promo__content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .gp-promo__badge {
    gap: 6px;
    padding-right: 10px;
    padding-left: 8px;
    font-size: 10px;
  }

  .gp-promo__content h2 {
    font-size: 26px;
  }

  .gp-promo__stat-sets {
    min-height: 158px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-promo__slide,
  .gp-promo__stats,
  .gp-promo__dot {
    transition: none;
  }

  .gp-promo__stat::after {
    animation: none;
  }
}

/* <picture> wraps the slide image — make it fill the slide like the bare <img> does. */
.gp-promo__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* RTL (Hebrew) — the dir="rtl" attribute lives on <html> via language_attributes(). */
html[dir="rtl"] .gp-promo__content,
html[dir="rtl"] .gp-promo__text,
html[dir="rtl"] .gp-promo__content h2,
html[dir="rtl"] .gp-promo__action-note {
  text-align: right;
  direction: rtl;
}

/* Resolve each line's direction by its own strong characters so trailing
   punctuation (the period) sits at the visual left, not the start of the line. */
html[dir="rtl"] .gp-promo__content h2,
html[dir="rtl"] .gp-promo__content h2 span {
  unicode-bidi: plaintext;
}

/* Mirror the two-column grid so content stays on the visually-leading (right) side. */
html[dir="rtl"] .gp-promo__banner {
  direction: rtl;
}

/* Badge: icon sits on the right of the text. */
html[dir="rtl"] .gp-promo__badge {
  flex-direction: row-reverse;
  text-align: right;
}

/* Benefit rows: icon on the right of the text, the whole pair pinned to the
   right edge of its grid cell. In an RTL flex container the natural source
   order (icon first) places the icon on the right; flex-start = the right
   (leading) side in RTL, so it pins the row to the right. */
html[dir="rtl"] .gp-promo__benefits li {
  flex-direction: row;
  justify-content: flex-start;
  text-align: right;
  direction: rtl;
}

/* CTA arrow points the other way. */
html[dir="rtl"] .gp-promo__btn-icon {
  transform: scaleX(-1);
}

/* Stat cards: dot indicator and padding flip to the right side. */
html[dir="rtl"] .gp-promo__stat {
  padding: 17px 54px 17px 18px;
}

html[dir="rtl"] .gp-promo__stat::before,
html[dir="rtl"] .gp-promo__stat::after {
  right: 29px;
  left: auto;
  transform: translate(50%, -50%);
}

html[dir="rtl"] .gp-promo__stat::after {
  animation-name: gp-stat-pulse-rtl;
}

@keyframes gp-stat-pulse-rtl {
  0% {
    opacity: 0.85;
    transform: translate(50%, -50%) scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: translate(50%, -50%) scale(1.9);
  }
}

/* Decorative blob mirrors to the opposite corner. */
html[dir="rtl"] .gp-promo__banner::before {
  right: -54px;
  left: auto;
}

html[dir="rtl"] .gp-promo__banner::after {
  right: auto;
  left: 43%;
}

/* Dots cluster moves to the left under RTL. */
html[dir="rtl"] .gp-promo__dots {
  right: auto;
  left: 26px;
}

@media screen and (max-width: 1024px) {
  html[dir="rtl"] .gp-promo__stat {
    padding: 14px 48px 14px 14px;
  }

  html[dir="rtl"] .gp-promo__stat::before,
  html[dir="rtl"] .gp-promo__stat::after {
    right: 25px;
    left: auto;
  }
}

@media screen and (max-width: 768px) {
  html[dir="rtl"] .gp-promo__btn {
    text-align: right;
  }

  html[dir="rtl"] .gp-promo__stat {
    padding: 13px 14px;
  }
}