/* ==========================================================================
   Cases — Figma #2065:277
   ========================================================================== */
.cases {
  width: 100%;
  margin-top: var(--section-gap);
  padding-bottom: var(--section-end);
}

.cases__panel {
  width: 100%;
  border-radius: clamp(24px, calc(70 / var(--design-width) * 100vw), 70px);
  padding: var(--hero-stroke);
  background-color: var(--color-white);
  box-sizing: border-box;
}

.cases__panel-inner {
  padding: clamp(20px, calc(40 / var(--design-width) * 100vw), 40px);
  background-color: var(--color-blue-light);
  border-radius: clamp(14px, calc(49 / var(--design-width) * 100vw), 49px);
  box-sizing: border-box;
}

.cases__layout {
  display: grid;
  grid-template-columns: var(--cases-text-col) var(--cases-media-col);
  gap: var(--layout-gap);
  align-items: stretch;
  height: clamp(420px, calc(710 / var(--design-width) * 100vw), 710px);
  min-height: 0;
}

.cases__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, calc(40 / var(--design-width) * 100vw), 40px);
  min-width: 0;
  height: 100%;
  padding: clamp(40px, calc(80 / var(--design-width) * 100vw), 80px) 0;
  box-sizing: border-box;
}

.cases__title {
  max-width: clamp(260px, calc(414 / var(--design-width) * 100vw), 414px);
}

.cases__label,
.reviews__label,
.articles__label,
.faq__label,
.cta__label {
  display: block;
  margin-bottom: clamp(12px, calc(31 / var(--design-width) * 100vw), 31px);
  font-family: var(--font-montserrat);
  font-weight: 400;
  font-size: clamp(12px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.cases__title,
.reviews__title,
.articles__title,
.faq__title,
.cta__title {
  font-family: var(--font-montserrat);
  font-weight: 400;
  font-size: clamp(28px, calc(55 / var(--design-width) * 100vw), 55px);
  line-height: clamp(32px, calc(57 / var(--design-width) * 100vw), 57px);
  color: var(--color-dark);
}

.cases__desc {
  margin-top: clamp(24px, calc(55 / var(--design-width) * 100vw), 55px);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(22px, calc(26 / var(--design-width) * 100vw), 26px);
  color: var(--color-dark);
  opacity: 0.6;
}

.cta__desc {
  margin-top: clamp(24px, calc(55 / var(--design-width) * 100vw), 55px);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(22px, calc(26 / var(--design-width) * 100vw), 26px);
  color: var(--color-dark);
  opacity: 0.6;
}

.cases__video {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: 1.2;
  color: var(--color-dark);
}

.cases__video-icon {
  display: flex;
  flex-shrink: 0;
  width: clamp(44px, calc(58 / var(--design-width) * 100vw), 58px);
  height: clamp(44px, calc(58 / var(--design-width) * 100vw), 58px);
}

.cases__video-icon img {
  width: 100%;
  height: 100%;
}

.cases__compare-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  align-self: stretch;
  overflow: hidden;
}

.cases__compare {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: clamp(16px, calc(30 / var(--design-width) * 100vw), 30px);
  overflow: hidden;
  user-select: none;
}

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

.cases__compare-image--before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cases__compare-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-right: 2px solid var(--color-white);
}

.cases__compare-image--after {
  display: block;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.cases__compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.cases__compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--color-white);
  transform: translateX(-50%);
}

.cases__compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, calc(50 / var(--design-width) * 100vw), 50px);
  height: clamp(40px, calc(50 / var(--design-width) * 100vw), 50px);
  background-color: var(--color-blue);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cases__compare-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.cases__tabs {
  position: absolute;
  left: clamp(12px, calc(20 / var(--design-width) * 100vw), 20px);
  bottom: clamp(12px, calc(20 / var(--design-width) * 100vw), 20px);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cases__tab {
  padding: clamp(12px, calc(20 / var(--design-width) * 100vw), 20px)
    clamp(16px, calc(25 / var(--design-width) * 100vw), 25px);
  border: 1px solid var(--color-white);
  border-radius: var(--btn-radius);
  background-color: var(--color-white);
  font-family: var(--font-inter);
  font-size: var(--fs-btn);
  line-height: 1;
  color: var(--color-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cases__tab--active {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

/* ==========================================================================
   Reviews — Figma #2065:307
   ========================================================================== */
.reviews {
  width: 100%;
  margin-top: var(--section-gap);
  padding-bottom: var(--section-end);
  overflow: hidden;
}

.reviews__inner {
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

.reviews__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(16px, calc(24 / var(--design-width) * 100vw), 24px);
  margin-bottom: clamp(32px, calc(50 / var(--design-width) * 100vw), 50px);
}

.reviews__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, calc(16 / var(--design-width) * 100vw), 16px);
}

.reviews__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px);
  padding: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px)
    clamp(20px, calc(30 / var(--design-width) * 100vw), 30px);
  border-radius: var(--btn-radius);
  font-family: var(--font-inter);
  font-size: var(--fs-btn);
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.reviews__btn:hover {
  opacity: 0.85;
}

.reviews__btn--ghost {
  background-color: #f2f2f2;
  color: var(--color-dark);
}

.reviews__btn--primary {
  background-color: var(--color-blue);
  border: 1px solid rgba(255, 255, 255, 0.19);
  color: var(--color-white);
}

.reviews__btn-icon {
  width: clamp(11px, calc(13 / var(--design-width) * 100vw), 13px);
  height: auto;
  filter: brightness(0) invert(1);
}

.reviews__slider {
  overflow: visible;
}

.reviews__card.swiper-slide {
  display: flex;
  flex-direction: column;
  width: clamp(300px, calc(651 / var(--design-width) * 100vw), 651px);
  height: clamp(320px, calc(411 / var(--design-width) * 100vw), 411px);
  padding: clamp(20px, calc(30 / var(--design-width) * 100vw), 30px);
  border: 1px solid var(--color-blue-light);
  border-radius: clamp(16px, calc(30 / var(--design-width) * 100vw), 30px);
  background-color: var(--color-white);
  box-sizing: border-box;
}

.reviews__card--accent.swiper-slide {
  background-color: var(--color-blue-light);
  border-color: var(--color-blue-light);
}

.reviews__card-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, calc(30 / var(--design-width) * 100vw), 30px);
  min-height: clamp(80px, calc(110 / var(--design-width) * 100vw), 110px);
  padding-right: clamp(100px, calc(120 / var(--design-width) * 100vw), 120px);
}

.reviews__card-avatar {
  flex-shrink: 0;
  width: clamp(72px, calc(110 / var(--design-width) * 100vw), 110px);
  height: clamp(72px, calc(110 / var(--design-width) * 100vw), 110px);
  border: 1px solid var(--color-blue-light);
  border-radius: 50%;
  object-fit: cover;
}

.reviews__card-meta {
  min-width: 0;
  padding-top: clamp(16px, calc(28 / var(--design-width) * 100vw), 28px);
}

.reviews__card-name {
  font-family: var(--font-montserrat);
  font-weight: 500;
  font-size: clamp(18px, calc(26 / var(--design-width) * 100vw), 26px);
  line-height: 1.23;
  color: var(--color-dark);
}

.reviews__card-date {
  display: block;
  margin-top: clamp(8px, calc(10 / var(--design-width) * 100vw), 10px);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(20px, calc(23 / var(--design-width) * 100vw), 23px);
  color: var(--color-dark);
  opacity: 0.6;
}

.reviews__card-rating {
  position: absolute;
  top: clamp(24px, calc(35 / var(--design-width) * 100vw), 35px);
  right: 0;
  display: flex;
  align-items: center;
  gap: clamp(2px, calc(4 / var(--design-width) * 100vw), 4px);
}

.reviews__star {
  flex-shrink: 0;
  width: clamp(14px, calc(18 / var(--design-width) * 100vw), 18px);
  height: clamp(14px, calc(18 / var(--design-width) * 100vw), 18px);
}

.reviews__card-text {
  margin-top: clamp(24px, calc(35 / var(--design-width) * 100vw), 35px);
  font-family: var(--font-inter);
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(22px, calc(26 / var(--design-width) * 100vw), 26px);
  color: var(--color-dark);
  opacity: 0.6;
}

.reviews__card-more {
  align-self: flex-start;
  margin-top: clamp(24px, calc(35 / var(--design-width) * 100vw), 35px);
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(22px, calc(26 / var(--design-width) * 100vw), 26px);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-dark);
}

.reviews__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 0;
}

.reviews__card-source {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(13px, calc(14 / var(--design-width) * 100vw), 14px);
  line-height: 1;
  color: var(--color-dark);
}

.reviews__card-source-ya {
  color: #fc3f1d;
  font-weight: 500;
}

.reviews__card-votes {
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(14 / var(--design-width) * 100vw), 14px);
}

.reviews__vote {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, calc(6 / var(--design-width) * 100vw), 6px);
  padding: 0;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(11px, calc(13 / var(--design-width) * 100vw), 13px);
  line-height: 1.25;
  color: #262626;
  transition: opacity 0.2s ease;
}

.reviews__vote:hover {
  opacity: 0.7;
}

.reviews__vote-icon {
  flex-shrink: 0;
  width: clamp(14px, calc(17 / var(--design-width) * 100vw), 17px);
  height: clamp(14px, calc(17 / var(--design-width) * 100vw), 17px);
}

.reviews__vote-count {
  min-width: 1ch;
}

.reviews__footer,
.articles__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(24px, calc(40 / var(--design-width) * 100vw), 40px);
}

.reviews__pagination.swiper-pagination,
.articles__pagination.swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(12 / var(--design-width) * 100vw), 12px);
}

.reviews__pagination .swiper-pagination-bullet,
.articles__pagination .swiper-pagination-bullet {
  width: clamp(8px, calc(10 / var(--design-width) * 100vw), 10px);
  height: clamp(8px, calc(10 / var(--design-width) * 100vw), 10px);
  margin: 0;
  border-radius: 50%;
  background-color: #d9d9d9;
  opacity: 1;
}

.reviews__pagination .swiper-pagination-bullet-active,
.articles__pagination .swiper-pagination-bullet-active {
  width: clamp(32px, calc(48 / var(--design-width) * 100vw), 48px);
  border-radius: clamp(4px, calc(8 / var(--design-width) * 100vw), 8px);
  background-color: var(--color-blue);
}

.reviews__nav,
.articles__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(17 / var(--design-width) * 100vw), 17px);
}

.reviews__nav-btn,
.articles__nav-btn {
  display: flex;
  width: clamp(40px, calc(50 / var(--design-width) * 100vw), 50px);
  height: clamp(40px, calc(50 / var(--design-width) * 100vw), 50px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.reviews__nav-btn svg,
.articles__nav-btn svg {
  width: 100%;
  height: 100%;
}

.reviews__nav-btn:hover,
.articles__nav-btn:hover {
  transform: scale(1.05);
}

.reviews__nav-btn:disabled,
.articles__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Articles — Figma #2065:142
   ========================================================================== */
.articles {
  width: 100%;
  margin-top: var(--section-gap);
  padding-bottom: var(--section-end);
}

.articles__bg {
  width: 100%;
  border-radius: clamp(16px, calc(30 / var(--design-width) * 100vw), 30px);
  background-color: var(--color-blue-light);
}

.articles__inner {
  padding: clamp(32px, calc(50 / var(--design-width) * 100vw), 50px)
    var(--container-pad)
    clamp(32px, calc(50 / var(--design-width) * 100vw), 50px);
  box-sizing: border-box;
}

.articles__header {
  display: grid;
  grid-template-columns: var(--grid-title-col) var(--grid-side-col) auto;
  align-items: end;
  gap: var(--layout-gap);
  margin-bottom: clamp(32px, calc(80 / var(--design-width) * 100vw), 80px);
}

.articles__desc {
  grid-column: 2;
  min-width: 0;
  max-width: clamp(260px, calc(414 / var(--design-width) * 100vw), 414px);
  font-family: var(--font-inter);
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(22px, calc(26 / var(--design-width) * 100vw), 26px);
  color: var(--color-dark);
  opacity: 0.6;
}

.articles__all-btn {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px);
  padding: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px)
    clamp(20px, calc(30 / var(--design-width) * 100vw), 30px);
  background-color: var(--color-white);
  border-radius: var(--btn-radius);
  font-family: var(--font-inter);
  font-size: var(--fs-btn);
  line-height: 1;
  white-space: nowrap;
}

.articles__all-btn-icon {
  width: clamp(11px, calc(13 / var(--design-width) * 100vw), 13px);
  height: auto;
}

.articles__slider {
  overflow: visible;
}

.articles__card.swiper-slide {
  width: clamp(280px, calc(400 / var(--design-width) * 100vw), 400px);
  height: auto;
}

.articles__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(12px, calc(16 / var(--design-width) * 100vw), 16px);
  border-radius: clamp(16px, calc(30 / var(--design-width) * 100vw), 30px);
  background-color: var(--color-white);
  box-sizing: border-box;
}

.articles__card-media {
  overflow: hidden;
  border-radius: clamp(12px, calc(20 / var(--design-width) * 100vw), 20px);
}

.articles__card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.articles__card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: clamp(10px, calc(14 / var(--design-width) * 100vw), 14px);
  padding: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px)
    clamp(8px, calc(12 / var(--design-width) * 100vw), 12px)
    clamp(8px, calc(12 / var(--design-width) * 100vw), 12px);
}

.articles__card-date {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background-color: var(--color-bg-page);
  font-family: var(--font-inter);
  font-size: 12px;
  color: var(--color-gray);
}

.articles__card-title {
  font-family: var(--font-montserrat);
  font-weight: 500;
  font-size: clamp(16px, calc(20 / var(--design-width) * 100vw), 20px);
  line-height: 1.25;
  color: var(--color-dark);
}

.articles__card-text {
  font-family: var(--font-inter);
  font-size: clamp(13px, calc(14 / var(--design-width) * 100vw), 14px);
  line-height: 1.45;
  color: var(--color-dark);
  opacity: 0.6;
}

.articles__card-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(40px, calc(50 / var(--design-width) * 100vw), 50px);
  height: clamp(40px, calc(50 / var(--design-width) * 100vw), 50px);
}

.articles__card-arrow img {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   FAQ — Figma #2065:447
   ========================================================================== */
.faq {
  width: 100%;
  margin-top: var(--section-gap);
  padding-bottom: var(--section-end);
}

.faq__inner {
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

.faq__header {
  display: grid;
  grid-template-columns: var(--grid-title-col) var(--grid-side-col) var(--grid-auto-col);
  align-items: end;
  gap: var(--layout-gap);
  margin-bottom: clamp(32px, calc(80 / var(--design-width) * 100vw), 80px);
}

.faq__head {
  min-width: 0;
}

.faq__title {
  max-width: clamp(280px, calc(874 / var(--design-width) * 100vw), 874px);
}

.faq__desc {
  grid-column: 2;
  min-width: 0;
  max-width: clamp(260px, calc(414 / var(--design-width) * 100vw), 414px);
  margin-top: 0;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(22px, calc(26 / var(--design-width) * 100vw), 26px);
  color: var(--color-dark);
  opacity: 0.6;
}

.faq__all-btn {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px);
  padding: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px)
    clamp(20px, calc(30 / var(--design-width) * 100vw), 30px);
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--color-blue);
  font-family: var(--font-inter);
  font-size: var(--fs-btn);
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.faq__all-btn:hover {
  opacity: 0.85;
}

.faq__all-btn-icon {
  width: clamp(11px, calc(13 / var(--design-width) * 100vw), 13px);
  height: auto;
  filter: brightness(0) invert(1);
}

.faq__layout {
  display: grid;
  grid-template-columns: var(--grid-title-col) var(--grid-side-col) var(--grid-auto-col);
  gap: var(--layout-gap);
  align-items: stretch;
}

.faq__accordion {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  min-height: 0;
  width: 100%;
  padding: 0;
  border-radius: clamp(16px, calc(30 / var(--design-width) * 100vw), 30px);
  background-color: var(--color-blue-light);
  box-sizing: border-box;
  overflow: hidden;
}

.faq__item {
  position: relative;
}

.faq__item + .faq__item::before {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--color-white);
}

.faq__item--open + .faq__item::before {
  content: none;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(18px, calc(24 / var(--design-width) * 100vw), 24px)
    clamp(12px, calc(20 / var(--design-width) * 100vw), 20px);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: 1.3;
  text-align: left;
  color: var(--color-dark);
  transition: color 0.2s ease;
}

.faq__chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(16, 32, 43, 0.35);
  border-bottom: 1.5px solid rgba(16, 32, 43, 0.35);
  transform: rotate(-45deg);
  transition: transform 0.25s ease, border-color 0.2s ease;
}

.faq__item--open .faq__chevron {
  transform: rotate(-135deg);
  border-color: var(--color-dark);
}

.faq__item--open .faq__question {
  padding: clamp(20px, calc(30 / var(--design-width) * 100vw), 30px)
    clamp(20px, calc(30 / var(--design-width) * 100vw), 30px)
    clamp(12px, calc(16 / var(--design-width) * 100vw), 16px);
  font-weight: 500;
}

.faq__item--open {
  margin: clamp(6px, calc(8 / var(--design-width) * 100vw), 8px);
  border-radius: clamp(14px, calc(20 / var(--design-width) * 100vw), 20px);
  background-color: var(--color-white);
  overflow: hidden;
}

.faq__answer {
  display: none;
  padding: 0 clamp(20px, calc(30 / var(--design-width) * 100vw), 30px)
    clamp(20px, calc(30 / var(--design-width) * 100vw), 30px);
}

.faq__item--open .faq__answer {
  display: block;
}

.faq__answer p {
  margin: 0;
  font-family: var(--font-inter);
  font-size: clamp(14px, calc(16 / var(--design-width) * 100vw), 16px);
  line-height: clamp(22px, calc(26 / var(--design-width) * 100vw), 26px);
  color: var(--color-dark);
  opacity: 0.6;
}

.faq__figure {
  grid-column: 2 / -1;
  grid-row: 1;
  position: relative;
  margin: 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(16px, calc(30 / var(--design-width) * 100vw), 30px);
}

.faq__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ==========================================================================
   CTA — Figma #2065:480
   ========================================================================== */
.cta {
  width: 100%;
  margin-top: var(--section-gap);
  padding-bottom: var(--section-end);
}

.cta__panel {
  width: 100%;
  border-radius: clamp(24px, calc(70 / var(--design-width) * 100vw), 70px);
  padding: var(--hero-stroke);
  background-color: var(--color-white);
  box-sizing: border-box;
}

.cta__panel-inner {
  padding: clamp(24px, calc(40 / var(--design-width) * 100vw), 40px);
  background-color: var(--color-blue-light);
  border-radius: clamp(14px, calc(49 / var(--design-width) * 100vw), 49px);
  overflow: hidden;
}

.cta__layout {
  display: grid;
  grid-template-columns: minmax(0, calc(494 / 1472 * 100%)) minmax(0, 1fr);
  gap: clamp(24px, calc(40 / var(--design-width) * 100vw), 40px);
  align-items: center;
  min-height: clamp(280px, calc(369 / var(--design-width) * 100vw), 369px);
}

.cta__content {
  padding: clamp(20px, calc(80 / var(--design-width) * 100vw), 80px) 0;
  min-width: 0;
}

.cta__form {
  margin-top: clamp(24px, calc(40 / var(--design-width) * 100vw), 40px);
}

.cta__field {
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(20 / var(--design-width) * 100vw), 20px);
  max-width: clamp(280px, calc(494 / var(--design-width) * 100vw), 494px);
  padding: clamp(8px, calc(10 / var(--design-width) * 100vw), 10px)
    clamp(8px, calc(10 / var(--design-width) * 100vw), 10px)
    clamp(8px, calc(10 / var(--design-width) * 100vw), 10px)
    clamp(24px, calc(35 / var(--design-width) * 100vw), 35px);
  border-radius: 999px;
  background-color: var(--color-white);
}

.cta__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-inter);
  font-size: var(--fs-btn);
  color: var(--color-dark);
}

.cta__input::placeholder {
  color: var(--color-dark);
  opacity: 0.2;
}

.cta__submit {
  display: flex;
  flex-shrink: 0;
  width: clamp(44px, calc(50 / var(--design-width) * 100vw), 50px);
  height: clamp(44px, calc(50 / var(--design-width) * 100vw), 50px);
}

.cta__submit img {
  width: 100%;
  height: 100%;
}

.cta__decor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}

.cta__decor-image {
  display: block;
  width: min(100%, clamp(280px, calc(938 / var(--design-width) * 100vw), 938px));
  height: auto;
  max-height: clamp(220px, calc(451 / var(--design-width) * 100vw), 451px);
  object-fit: contain;
  object-position: right center;
}

/* ==========================================================================
   Responsive — cases, reviews, articles, faq, cta
   ========================================================================== */
@media (max-width: 1200px) {
  .cases__layout,
  .cta__layout,
  .faq__layout {
    grid-template-columns: 1fr;
  }

  .cases__layout {
    height: auto;
  }

  .cases__content {
    height: auto;
    padding: 0 0 clamp(24px, calc(40 / var(--design-width) * 100vw), 40px);
  }

  .cases__compare {
    min-height: clamp(280px, calc(710 / var(--design-width) * 100vw), 710px);
  }

  .faq__accordion,
  .faq__figure {
    grid-column: 1;
    grid-row: auto;
  }

  .cases__content,
  .cta__content {
    padding: 0;
  }

  .cta__decor {
    justify-content: center;
  }

  .cta__decor-image {
    object-position: center;
  }

  .articles__header,
  .faq__header,
  .reviews__header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .faq__desc,
  .faq__all-btn {
    grid-column: 1;
    justify-self: start;
  }

  .reviews__actions {
    justify-content: flex-start;
  }

  .faq__figure {
    order: -1;
  }
}

@media (max-width: 767px) {
  .cases,
  .reviews,
  .articles,
  .faq,
  .cta {
    margin-top: 48px;
  }

  .articles__inner {
    padding-inline: clamp(16px, calc(24 / var(--design-width) * 100vw), 24px);
  }

  .reviews__inner,
  .faq__inner {
    padding-inline: clamp(16px, calc(24 / var(--design-width) * 100vw), 24px);
  }

  .cases__title,
  .reviews__title,
  .articles__title,
  .faq__title,
  .cta__title {
    font-size: 26px;
    line-height: 1.15;
  }

  .reviews__card.swiper-slide {
    width: calc(100vw - 48px);
    max-width: 420px;
  }

  .articles__card.swiper-slide {
    width: calc(100vw - 48px);
    max-width: 360px;
  }

  .cta__field {
    max-width: 100%;
  }
}