.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://s3.eu-central-1.amazonaws.com/wp.files/wp-content/uploads/2025/05/hero-bg-1920%40x2-2.jpg.webp);
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 312px;
  padding: 25px 0;
  position: relative;
}

.hero__heading {
  color: #FFF;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}

.hero__desc {
  color: #FFF;
  font-size: 18px;
  line-height: 28px;
  margin-top: 20px;
}

.hero__row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.hero__button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  background: #013851;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.hero__list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__list li {
  color: #FFF;
  font-size: 18px;
  line-height: 28px;
  position: relative;
  padding-left: 28px;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.hero__list li:last-child {
  padding-right: 0;
  border-right: none;
}

.hero__list li::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: 0;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 16L16 12M16 12L12 8M16 12H8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

@media (max-width: 1439px) {
  .hero {
    background-image: url(https://s3.eu-central-1.amazonaws.com/wp.files/wp-content/uploads/2025/05/hero-bg-1440%40x2-2.jpg.webp);
  }
}
@media (max-width: 989px) {
  .hero__heading {
    font-size: 23px;
    line-height: 1;
  }
  .hero__desc {
    font-size: 14px;
    line-height: 1;
    margin-top: 16px;
  }
  .hero__row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }
  .hero__list {
    order: 1;
    gap: 8px;
  }
  .hero__list li {
    font-size: 12px;
    line-height: 20px;
    padding-left: 18px;
    padding-right: 8px;
  }
  .hero__list li::before {
    width: 14px;
    height: 14px;
    top: calc(50% - 7px);
  }
  .hero__list li:nth-child(2) {
    display: none;
  }
  .hero__button {
    order: 2;
  }
}
@media (max-width: 599px) {
  .hero {
    background-image: url(https://s3.eu-central-1.amazonaws.com/wp.files/wp-content/uploads/2025/05/hero-bg-600%40x2-1.jpg.webp);
  }
  .hero__content {
    height: 215px;
    padding: 20px 0;
  }
  .hero__button {
    font-size: 14px;
    line-height: 44px;
    height: 44px;
    gap: 5px;
    padding: 0 12px;
  }
  .hero__button svg {
    display: block;
    height: 18px;
    width: 18px;
  }
}
.benefits {
  background: #F2F4F7;
}

.benefits__content {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.benefits__col {
  flex: 1 1 auto;
}

.benefits__title {
  color: var(--Grey-900, #101828);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.benefits__title--for-md {
  display: none;
}

.benefits__list li {
  color: #475467;
  font-size: 16px;
  line-height: 20px;
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

.benefits__list li:last-child {
  margin-bottom: 0;
}

.benefits__list li::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M7.50024 12L10.5002 15L16.5002 9M22.0002 12C22.0002 17.5228 17.5231 22 12.0002 22C6.4774 22 2.00024 17.5228 2.00024 12C2.00024 6.47715 6.4774 2 12.0002 2C17.5231 2 22.0002 6.47715 22.0002 12Z" stroke="%232E90FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.benefits__list-heading {
  color: var(--Primary-500, #2E90FA);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
}

.benefits__button {
  margin-top: 40px;
}

.benefits__img {
  flex: 0 1 639px;
}

@media (max-width: 1247px) {
  .benefits__content {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .benefits__col {
    order: 2;
  }
  .benefits__title {
    text-align: center;
  }
  .benefits__title--for-lg {
    display: none;
  }
  .benefits__title--for-md {
    display: block;
  }
  .benefits__button {
    display: none;
  }
  .benefits__img {
    order: 1;
    flex: none;
  }
}
@media (max-width: 599px) {
  .benefits__title {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 24px;
  }
  .benefits__list li {
    font-size: 14px;
    line-height: 20px;
  }
  .benefits__list-heading {
    font-size: 16px;
    line-height: 26px;
  }
  .benefits__img {
    max-width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }
}
.diagram {
  background: var(--Grey-100, #F2F4F7);
}

.diagram__accordion {
  border-top: 1px solid var(--Grey-300, #D0D5DD);
  transition: all 0.2s ease-out;
}

.diagram__accordion-heading {
  color: #1570EF;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 0;
  cursor: pointer;
}

.diagram__accordion-heading svg {
  display: block;
  transition: transform 0.2s ease-out;
}

.diagram__accordion.open .diagram__accordion-heading svg {
  transform: rotate(180deg);
}

.diagram__accordion-body-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: all 0.2s ease-out;
}

.diagram__accordion.open .diagram__accordion-body-wrapper {
  grid-template-rows: 1fr;
}

.diagram__accordion-body {
  min-height: 0;
}

.diagram__accordion-body-inner {
  padding-bottom: 72px;
}

.diagram__accordion-body-content {
  border-radius: 12px;
  background: #FFF;
}

.diagram__info {
  color: var(--Grey-800, #1D2939);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 24px 17px;
  border-radius: 8px;
  background: var(--Primary-100, #D1E9FF);
}

.diagram__disclaimer {
  color: var(--Greyscale-Grey-500, #70707A);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  position: relative;
  padding: 8px 12px;
  padding-left: 44px;
  margin-top: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
}

.diagram__disclaimer::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 8px;
  left: 16px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.0917" y="4.34121" width="16.8" height="16.8" rx="8.4" stroke="%232E90FA" stroke-width="1.2"/><path d="M11.8197 15.3192V10.7412H13.1637V15.3192H11.8197ZM12.5057 10.2372C12.291 10.2372 12.1137 10.1859 11.9737 10.0832C11.8337 9.98054 11.7637 9.81721 11.7637 9.59321C11.7637 9.34121 11.8337 9.17321 11.9737 9.08921C12.1137 8.99588 12.291 8.94921 12.5057 8.94921C12.6924 8.94921 12.8557 8.99588 12.9957 9.08921C13.145 9.17321 13.2197 9.34121 13.2197 9.59321C13.2197 9.82654 13.145 9.99454 12.9957 10.0972C12.8557 10.1905 12.6924 10.2372 12.5057 10.2372ZM12.4917 18.8052C11.6517 18.8052 10.863 18.6465 10.1257 18.3292C9.3977 18.0212 8.7537 17.5919 8.1937 17.0412C7.64303 16.4812 7.20903 15.8372 6.8917 15.1092C6.5837 14.3719 6.4297 13.5832 6.4297 12.7432C6.4297 11.9032 6.5837 11.1192 6.8917 10.3912C7.20903 9.65388 7.64303 9.00988 8.1937 8.45921C8.7537 7.89921 9.3977 7.46521 10.1257 7.15721C10.863 6.83988 11.6517 6.68121 12.4917 6.68121C13.3317 6.68121 14.1157 6.83988 14.8437 7.15721C15.581 7.46521 16.225 7.89921 16.7757 8.45921C17.3357 9.00988 17.7697 9.65388 18.0777 10.3912C18.395 11.1192 18.5537 11.9032 18.5537 12.7432C18.5537 13.5832 18.395 14.3719 18.0777 15.1092C17.7697 15.8372 17.3357 16.4812 16.7757 17.0412C16.225 17.5919 15.581 18.0212 14.8437 18.3292C14.1157 18.6465 13.3317 18.8052 12.4917 18.8052ZM12.4917 17.5592C13.1637 17.5592 13.789 17.4379 14.3677 17.1952C14.9464 16.9432 15.455 16.5979 15.8937 16.1592C16.3417 15.7112 16.687 15.1979 16.9297 14.6192C17.1817 14.0312 17.3077 13.4059 17.3077 12.7432C17.3077 12.0712 17.1817 11.4459 16.9297 10.8672C16.687 10.2885 16.3417 9.77988 15.8937 9.34121C15.455 8.89321 14.9417 8.54788 14.3537 8.30521C13.775 8.05321 13.1544 7.92721 12.4917 7.92721C11.8197 7.92721 11.1944 8.05321 10.6157 8.30521C10.037 8.54788 9.5237 8.89321 9.0757 9.34121C8.63703 9.77988 8.2917 10.2932 8.0397 10.8812C7.79703 11.4599 7.6757 12.0805 7.6757 12.7432C7.6757 13.4152 7.79703 14.0405 8.0397 14.6192C8.2917 15.1979 8.63703 15.7112 9.0757 16.1592C9.5237 16.5979 10.037 16.9432 10.6157 17.1952C11.2037 17.4379 11.829 17.5592 12.4917 17.5592Z" fill="%232E90FA"/></svg>');
}

.diagram__chart {
  height: 272px;
  position: relative;
  background-position: center;
  background-size: calc(100% - 40px) auto;
  /* background-size: 1172.38px auto; */
  background-repeat: no-repeat;
  background-image: url(https://s3.eu-central-1.amazonaws.com/wp.files/wp-content/uploads/2025/05/diagram.png.webp);
}

.diagram__chart-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  right: 48px;
  bottom: 88px;
}

.diagram__chart-box {
  color: var(--Greyscale-Grey-500, #70707A);
  font-size: 12px;
  line-height: 160%;
  padding: 8px 10px;
  padding-left: 22px;
  border-radius: 8px;
  position: relative;
  border: 1px solid var(--Primary-400, #53B1FD);
  background: rgba(255, 255, 255, 0.7);
}

.diagram__chart-box::before {
  content: "";
  display: block;
  width: 4px;
  height: 40px;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  top: calc(50% - 20px);
  background: var(--Primary-400, #53B1FD);
}

.diagram__chart-box--grey {
  border: 1px solid var(--Grey-300, #D0D5DD);
}

.diagram__chart-box--grey::before {
  background: #D0D5DD;
}

.diagram__chart-box-value {
  color: var(--Main-Color-Black, #0A112F);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 989px) {
  .diagram__info {
    font-size: 14px;
    line-height: 20px;
    padding: 16px;
  }
  .diagram__disclaimer {
    font-weight: 400;
    padding: 8px 12px;
    padding-left: 32px;
    margin-top: 12px;
  }
  .diagram__disclaimer::before {
    left: 5px;
  }
  .diagram__chart {
    height: 230px;
    background-size: calc(100% - 10px) auto;
    background-image: url(https://s3.eu-central-1.amazonaws.com/wp.files/wp-content/uploads/2025/05/diagram-md.png.webp);
  }
  .diagram__chart-row {
    gap: 6px;
    right: 8px;
    bottom: 70px;
  }
  .diagram__chart-box {
    font-size: 10px;
    padding: 6px;
    padding-left: 15px;
  }
  .diagram__chart-box::before {
    height: 28px;
    left: 7px;
    top: calc(50% - 14px);
  }
  .diagram__chart-box-value {
    font-size: 12px;
    line-height: 1.3;
  }
}
@media (max-width: 599px) {
  .diagram__accordion-body-inner {
    padding-bottom: 32px;
  }
}
@media (max-width: 399px) {
  .diagram__chart {
    height: 230px;
    background-size: auto calc(100% - 32px);
    background-image: url(https://s3.eu-central-1.amazonaws.com/wp.files/wp-content/uploads/2025/05/diagram-sm.png.webp);
  }
  .diagram__chart-row {
    bottom: 50px;
  }
}
