.ci-about-connected {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(284px, 27.75vw, 400px);
  margin: 0;
  overflow: hidden;
  align-items: center;
  padding: clamp(25px, 2.45vw, 36px) 0 clamp(30px, 2.8vw, 42px);
  color: #fff;
  background-color: #061a4b;
  background-image: var(--ci-about-connected-bg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  scroll-margin-top: 96px;
}

.ci-about-connected::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 20, 62, .08) 0%, rgba(3, 20, 62, .03) 48%, rgba(3, 20, 62, 0) 68%);
  content: "";
  pointer-events: none;
}

.ci-about-connected,
.ci-about-connected * {
  box-sizing: border-box;
}

.ci-about-connected__inner {
  width: min(calc(100% - 104px), 1440px);
  margin: 0 auto;
}

.ci-about-connected__title {
  margin: 0;
  color: #fff;
  font-family: var(--title-font, sans-serif);
  font-size: clamp(43px, 4.45vw, 66px);
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.052em;
}

.ci-about-connected__title > span {
  display: block;
}

.ci-about-connected__title-highlight {
  margin-top: 5px;
  color: #0bd1df;
}

.ci-about-connected__description {
  max-width: 600px;
  margin: clamp(11px, 1.05vw, 16px) 0 0;
  color: #fff;
  font-family: var(--paragraph-font, sans-serif);
  font-size: clamp(16px, 1.28vw, 19px);
  font-weight: 400;
  line-height: 1.24;
}

.ci-about-connected__button {
  display: inline-flex;
  min-height: clamp(42px, 4.2vw, 60px);
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.15vw, 17px);
  margin-top: clamp(14px, 1.45vw, 22px);
  padding: 9px clamp(23px, 2.15vw, 32px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 7px;
  color: #071948;
  background: #fff;
  box-shadow: 0 7px 20px rgba(0, 8, 42, .13);
  font-family: var(--paragraph-font, sans-serif);
  font-size: clamp(15px, 1.22vw, 18px);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ci-about-connected__button svg {
  width: clamp(20px, 1.8vw, 26px);
  height: clamp(20px, 1.8vw, 26px);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ci-about-connected__button:hover,
.ci-about-connected__button:focus-visible {
  color: #fff;
  background: #087cf2;
  box-shadow: 0 9px 24px rgba(0, 57, 153, .26);
  transform: translateY(-2px);
}

.ci-about-connected__button:focus-visible {
  outline: 3px solid #12d6df;
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .ci-about-connected__content {
    width: 55%;
  }

  .ci-about-connected__title {
    font-size: clamp(42px, 4.4vw, 52px);
  }
}

@media (max-width: 900px) {
  .ci-about-connected {
    min-height: 420px;
    padding: 48px 0 52px;
    background-position: 62% 50%;
  }

  .ci-about-connected::before {
    background: linear-gradient(90deg, rgba(2, 17, 54, .32) 0%, rgba(2, 17, 54, .17) 64%, rgba(2, 17, 54, .03) 100%);
  }

  .ci-about-connected__inner {
    width: calc(100% - 48px);
  }

  .ci-about-connected__content {
    width: 63%;
  }

  .ci-about-connected__title {
    font-size: clamp(43px, 6.7vw, 57px);
    line-height: .96;
  }

  .ci-about-connected__description {
    font-size: 17px;
    line-height: 1.32;
  }

  .ci-about-connected__button {
    min-height: 50px;
    padding-right: 26px;
    padding-left: 26px;
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .ci-about-connected {
    min-height: 525px;
    align-items: flex-start;
    padding: 42px 0 44px;
    background-position: 72% 50%;
    scroll-margin-top: 76px;
  }

  .ci-about-connected::before {
    background:
      linear-gradient(180deg, rgba(2, 17, 54, .14) 0%, rgba(2, 17, 54, .42) 62%, rgba(2, 17, 54, .68) 100%),
      linear-gradient(90deg, rgba(2, 17, 54, .52) 0%, rgba(2, 17, 54, .18) 100%);
  }

  .ci-about-connected__inner {
    width: calc(100% - 34px);
  }

  .ci-about-connected__content {
    width: 100%;
  }

  .ci-about-connected__title {
    max-width: 430px;
    font-size: clamp(40px, 11.4vw, 52px);
    line-height: .98;
  }

  .ci-about-connected__title-highlight {
    margin-top: 6px;
  }

  .ci-about-connected__description {
    max-width: 440px;
    margin-top: 17px;
    font-size: 16px;
    line-height: 1.4;
  }

  .ci-about-connected__button {
    width: auto;
    min-height: 50px;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 15px;
  }
}

@media (max-width: 380px) {
  .ci-about-connected__inner {
    width: calc(100% - 30px);
  }

  .ci-about-connected__title {
    font-size: 39px;
  }

  .ci-about-connected__button {
    width: 100%;
    gap: 10px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-about-connected__button {
    transition: none;
  }
}