:root {
  --sq-violet: #7c3aed;
  --sq-violet-2: #6d28d9;
  --sq-violet-3: #4f46e5;
  --sq-violet-soft: #f3eeff;
  --sq-violet-line: #ddd6fe;
  --sq-footer: #101018;
  --sq-footer-text: #a7a8ba;
}

html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.has-sq-static-header {
  background: #fff !important;
  padding-top: 0 !important;
}

.header,
.header__mobile,
.footer:not(.sq-static-footer),
.home__popup,
.home__popup__wrapper,
.portfolio__detailed__loading,
.portfolio__reviews__loading {
  display: none !important;
}

.wrapper,
.portfolio__content,
.portfolio__content__inner,
.portfolio__head,
.portfolio__slider,
.portfolio__detailed,
.portfolio__certificates,
.portfolio__certification,
.portfolio__reviews,
.sq-static-footer {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.sq-static-header {
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(17, 17, 26, .06) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
  z-index: 100 !important;
}

.sq-static-header *,
.sq-static-footer * {
  box-sizing: border-box !important;
}

.sq-static-header a,
.sq-static-footer a {
  text-decoration: none !important;
}

.sq-static-header__inner {
  align-items: center !important;
  display: flex !important;
  gap: 28px !important;
  justify-content: space-between !important;
  margin: 0 auto !important;
  min-height: 104px !important;
  padding: 0 !important;
  width: min(1760px, calc(100% - 120px)) !important;
}

.sq-logo,
.sq-footer-logo {
  color: #12121d !important;
  font: 900 33px/1 Inter, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.sq-logo span,
.sq-footer-logo span {
  color: var(--sq-violet) !important;
}

.sq-nav {
  align-items: center !important;
  display: flex !important;
  gap: 32px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sq-nav a {
  color: #1f2030 !important;
  font: 800 17px/1 Inter, Arial, sans-serif !important;
}

.sq-nav a:hover {
  color: var(--sq-violet) !important;
}

.sq-social {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
}

.sq-social a {
  align-items: center !important;
  background: #f4f0ff !important;
  border-radius: 999px !important;
  color: var(--sq-violet) !important;
  display: inline-flex !important;
  height: 46px !important;
  justify-content: center !important;
  width: 46px !important;
}

.sq-auth,
.sq-cta {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.sq-auth {
  border: 1px solid #e7e3f6 !important;
  border-radius: 999px !important;
  color: #1f2030 !important;
  font: 900 17px/1 Inter, Arial, sans-serif !important;
  min-height: 56px !important;
  padding: 0 28px !important;
}

.sq-cta {
  background: linear-gradient(135deg, var(--sq-violet-3), var(--sq-violet)) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 32px -18px rgba(124, 58, 237, .9) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: 900 18px/1 Inter, Arial, sans-serif !important;
  min-height: 58px !important;
  padding: 0 34px !important;
}

.portfolio__head {
  background: #f5f5f6 !important;
  display: block !important;
  padding: 54px 0 48px !important;
  position: relative !important;
}

.portfolio__head > h1 {
  color: #263642 !important;
  font: 900 clamp(30px, 2.15vw, 44px)/1.14 Inter, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  margin: 0 0 38px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.portfolio__slider {
  background: #f5f5f6 !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
}

.portfolio__slider .portfolio__slide {
  display: none !important;
  height: auto !important;
  left: auto !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  visibility: hidden !important;
  width: auto !important;
}

.portfolio__slider .portfolio__slide.is-active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.portfolio__slide.is-active .portfolio__slide__inner {
  align-items: center !important;
  display: grid !important;
  gap: 58px !important;
  grid-template-columns: minmax(520px, .96fr) minmax(520px, .88fr) !important;
  height: auto !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  width: min(1640px, calc(100% - 120px)) !important;
}

.portfolio__slide__left {
  align-items: center !important;
  display: flex !important;
  height: auto !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  width: auto !important;
}

.portfolio__slide__image {
  align-items: center !important;
  display: flex !important;
  height: auto !important;
  justify-content: center !important;
  margin: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  width: 100% !important;
  z-index: 1 !important;
}

.portfolio__slide__image img {
  box-shadow: none !important;
  display: block !important;
  filter: none !important;
  height: auto !important;
  inset: auto !important;
  max-height: 470px !important;
  max-width: 860px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  position: relative !important;
  visibility: visible !important;
  width: 100% !important;
}

.portfolio__slide__mobile {
  bottom: -2% !important;
  height: auto !important;
  margin: 0 !important;
  max-width: 165px !important;
  min-width: 96px !important;
  overflow: visible !important;
  padding: 0 !important;
  position: absolute !important;
  right: 2% !important;
  width: 17% !important;
  z-index: 2 !important;
}

.portfolio__slide__mobile img {
  display: block !important;
  height: auto !important;
  inset: auto !important;
  max-height: 330px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  position: relative !important;
  visibility: visible !important;
  width: 100% !important;
}

.portfolio__slide__right {
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  max-width: 740px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  width: auto !important;
  z-index: 5 !important;
}

.portfolio__slide__logo {
  display: block !important;
  height: auto !important;
  margin: 0 0 14px !important;
  min-height: 0 !important;
  position: static !important;
}

.portfolio__slide__logo:empty {
  display: none !important;
}

.portfolio__slide__logo img {
  display: block !important;
  height: auto !important;
  max-height: 62px !important;
  max-width: 300px !important;
  object-fit: contain !important;
  position: relative !important;
  width: auto !important;
}

.portfolio__slide__title {
  color: var(--sq-violet) !important;
  font: 800 clamp(24px, 1.45vw, 32px)/1.14 Inter, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  margin: 0 0 20px !important;
  max-width: 740px !important;
  position: relative !important;
  text-transform: uppercase !important;
  z-index: 6 !important;
}

.portfolio__slide__dir {
  color: #263642 !important;
  font: 800 clamp(21px, 1.3vw, 28px)/1.22 Inter, Arial, sans-serif !important;
  margin: 0 0 20px !important;
}

.portfolio__slide__descr {
  color: #333 !important;
  font: 400 clamp(18px, 1.05vw, 22px)/1.42 "Museo Sans Cyrl", Arial, sans-serif !important;
}

.portfolio__slide__list ul {
  display: grid !important;
  gap: 14px 40px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  list-style: none !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
}

.portfolio__slide__list li {
  color: #333 !important;
  font: 400 clamp(18px, 1.05vw, 22px)/1.34 "Museo Sans Cyrl", Arial, sans-serif !important;
  margin: 0 !important;
  padding: 0 0 0 24px !important;
  position: relative !important;
}

.portfolio__slide__list li::before,
.portfolio__slide__list li:before,
.portfolio__partner li::before,
.portfolio__partner li:before,
.portfolio__detailed__content ul li::before,
.portfolio__detailed__content ul li:before,
.portfolio__review__text ul li::before,
.portfolio__review__text ul li:before {
  background: var(--sq-violet) !important;
  border-color: var(--sq-violet) !important;
  border-radius: 999px !important;
  color: var(--sq-violet) !important;
  content: "" !important;
  height: 9px !important;
  left: 0 !important;
  position: absolute !important;
  top: .55em !important;
  width: 9px !important;
}

.portfolio__detailed__content li::marker,
.portfolio__review__text li::marker {
  color: var(--sq-violet) !important;
}

.portfolio__slide__buttons {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.portfolio__slide__case,
.portfolio__slide__detailed,
.portfolio__detailed__btn {
  align-items: center !important;
  background: linear-gradient(135deg, var(--sq-violet-3), var(--sq-violet)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 22px 40px -22px rgba(124, 58, 237, .9) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: inline-flex !important;
  font: 900 16px/1 Inter, Arial, sans-serif !important;
  justify-content: center !important;
  min-height: 58px !important;
  min-width: 230px !important;
  opacity: 1 !important;
  padding: 0 30px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
}

.portfolio__slide__case:hover,
.portfolio__slide__detailed:hover,
.portfolio__detailed__btn:hover {
  background: linear-gradient(135deg, #4338ca, var(--sq-violet-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
}

.portfolio__slider__button,
#prewbutton,
#prevbutton,
#nextbutton {
  background: linear-gradient(135deg, var(--sq-violet-3), var(--sq-violet)) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 34px -18px rgba(124, 58, 237, .9) !important;
  color: #fff !important;
  display: block !important;
  height: 58px !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  visibility: visible !important;
  width: 52px !important;
  z-index: 60 !important;
}

.portfolio__slider__prev,
#prewbutton,
#prevbutton {
  left: 0 !important;
}

.portfolio__slider__next,
#nextbutton {
  right: 0 !important;
}

.portfolio__slider__button::before,
#prewbutton::before,
#prevbutton::before,
#nextbutton::before {
  background: none !important;
  border-right: 4px solid #fff !important;
  border-top: 4px solid #fff !important;
  content: "" !important;
  display: block !important;
  height: 15px !important;
  left: 50% !important;
  position: absolute !important;
  top: 50% !important;
  width: 15px !important;
}

.portfolio__slider__prev::before,
#prewbutton::before,
#prevbutton::before {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

.portfolio__slider__next::before,
#nextbutton::before {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

.portfolio__slider__button::after,
#prewbutton::after,
#prevbutton::after,
#nextbutton::after {
  content: none !important;
  display: none !important;
}

.portfolio__detailed {
  background: #fff !important;
  display: block !important;
  padding: 72px 0 !important;
}

.portfolio__detailed.is-collapsed {
  display: none !important;
}

.portfolio__detailed.active {
  display: block !important;
}

.portfolio__detailed__inner,
.portfolio__certificates .container,
.portfolio__reviews .container {
  margin: 0 auto !important;
  padding: 0 !important;
  width: min(1280px, calc(100% - 96px)) !important;
}

.portfolio__detailed__inner .container {
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

.portfolio__detailed__title,
.portfolio__subtitle,
.portfolio__reviews__title,
.portfolio__certificates__title,
.portfolio__certification h2,
.portfolio__reviews h2 {
  color: #333 !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.portfolio__detailed__content {
  color: #333 !important;
  font: 400 23px/1.55 "Museo Sans Cyrl", Arial, sans-serif !important;
  overflow: visible !important;
}

.portfolio__detailed__content img {
  display: block !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.portfolio__detailed__content table {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.portfolio__detailed__btn {
  margin: 44px auto 0 !important;
}

.portfolio__certificates {
  background: #fff !important;
  display: block !important;
  padding: 72px 0 !important;
}

.portfolio__partner {
  align-items: center !important;
  display: grid !important;
  gap: 64px !important;
  grid-template-columns: 1fr 420px !important;
  margin: 0 !important;
}

.portfolio__partner .text,
.portfolio__partner .img {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.portfolio__partner .text p,
.portfolio__partner .text li {
  color: #333 !important;
  font: 400 24px/1.45 "Museo Sans Cyrl", Arial, sans-serif !important;
}

.portfolio__partner .text ul {
  list-style: none !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
}

.portfolio__partner .text li {
  margin: 0 0 16px !important;
  padding-left: 28px !important;
  position: relative !important;
}

.portfolio__partner .img {
  align-items: center !important;
  display: flex !important;
  gap: 38px !important;
  justify-content: center !important;
}

.portfolio__certification {
  align-items: start !important;
  display: grid !important;
  gap: 54px 70px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  list-style: none !important;
  margin: 64px 0 0 !important;
  padding: 0 !important;
}

.portfolio__certification li {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  width: auto !important;
}

.portfolio__certification img,
.portfolio__certification svg {
  filter: hue-rotate(94deg) saturate(1.5) brightness(.92) !important;
}

.portfolio__certification p {
  color: #333 !important;
  font: 400 24px/1.2 "Museo Sans Cyrl", Arial, sans-serif !important;
  margin: 18px 0 0 !important;
}

.portfolio__reviews {
  background: #fff !important;
  padding: 72px 0 92px !important;
}

.portfolio__reviews__content {
  display: grid !important;
  gap: 38px !important;
}

.portfolio__review {
  background: #fff !important;
  border: 1px solid #e3e3e8 !important;
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
}

.portfolio__review__col {
  border: 0 !important;
  float: none !important;
  width: auto !important;
}

.portfolio__review__left {
  border-right: 1px solid #e3e3e8 !important;
  padding: 36px !important;
}

.portfolio__review__right {
  padding: 40px !important;
}

.portfolio__review__logo img {
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
}

.portfolio__review__site,
.portfolio__review__text p {
  color: #333 !important;
  font: 400 22px/1.5 "Museo Sans Cyrl", Arial, sans-serif !important;
}

.portfolio__review__site a,
.portfolio__review__text a,
.portfolio__review__author,
.portfolio__review__author a,
.portfolio__review__author span {
  color: var(--sq-violet) !important;
}

.portfolio__review__author {
  font: italic 28px/1.25 "Museo Sans Cyrl", Arial, sans-serif !important;
  margin-top: 24px !important;
  text-align: right !important;
}

.sq-static-footer {
  background: var(--sq-footer) !important;
  clear: both !important;
  color: var(--sq-footer-text) !important;
  display: block !important;
  margin: 0 !important;
  overflow: visible !important;
  padding: 98px 0 44px !important;
  position: relative !important;
  width: 100% !important;
  z-index: 1 !important;
}

.sq-static-footer__inner {
  margin: 0 auto !important;
  padding: 0 !important;
  width: min(1680px, calc(100% - 120px)) !important;
}

.sq-static-footer__grid {
  align-items: start !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  display: grid !important;
  gap: 80px !important;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr !important;
  margin: 0 !important;
  padding: 0 0 78px !important;
}

.sq-footer-logo {
  color: #f6f4ff !important;
  display: inline-flex !important;
  margin: 0 0 36px !important;
}

.sq-footer-brand p,
.sq-static-footer p {
  color: #9091a4 !important;
  font: 600 20px/1.55 Inter, Arial, sans-serif !important;
  margin: 0 0 28px !important;
  max-width: 390px !important;
}

.sq-static-footer h2 {
  color: #fff !important;
  font: 900 17px/1 Inter, Arial, sans-serif !important;
  letter-spacing: .16em !important;
  margin: 0 0 28px !important;
  text-transform: uppercase !important;
}

.sq-static-footer ul {
  display: grid !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sq-static-footer li {
  margin: 0 !important;
  padding: 0 !important;
}

.sq-static-footer li::before {
  content: none !important;
  display: none !important;
}

.sq-static-footer a,
.sq-footer-phone {
  color: #a7a8ba !important;
  font: 700 20px/1.35 Inter, Arial, sans-serif !important;
}

.sq-static-footer a:hover {
  color: #fff !important;
}

.sq-footer-social {
  align-items: center !important;
  display: flex !important;
  gap: 14px !important;
}

.sq-footer-social a {
  align-items: center !important;
  background: #20202c !important;
  border-radius: 999px !important;
  color: #d7d4e8 !important;
  display: inline-flex !important;
  height: 50px !important;
  justify-content: center !important;
  width: 50px !important;
}

.sq-footer-social a:hover {
  background: var(--sq-violet) !important;
  color: #fff !important;
}

.sq-footer-bottom {
  align-items: center !important;
  color: #a7a8ba !important;
  display: flex !important;
  gap: 24px !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding-top: 32px !important;
}

.sq-footer-bottom p {
  color: #a7a8ba !important;
  font: 700 18px/1.3 Inter, Arial, sans-serif !important;
  margin: 0 !important;
  max-width: none !important;
}

.sq-footer-bottom div {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.sq-footer-bottom a {
  font-size: 18px !important;
}

.sq-footer-lang {
  align-items: center !important;
  background: #191923 !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 999px !important;
  color: #fff !important;
  display: inline-flex !important;
  font: 900 18px/1 Inter, Arial, sans-serif !important;
  gap: 12px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
}

@media (max-width: 1280px) {
  .sq-static-header__inner,
  .sq-static-footer__inner {
    width: calc(100% - 48px) !important;
  }

  .sq-nav {
    gap: 20px !important;
  }

  .sq-auth {
    display: none !important;
  }

  .portfolio__slide.is-active .portfolio__slide__inner {
    gap: 42px !important;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr) !important;
    width: calc(100% - 56px) !important;
  }

  .portfolio__slide__image img {
    max-height: 420px !important;
    max-width: 690px !important;
  }

  .portfolio__slide__title {
    font-size: clamp(23px, 2vw, 30px) !important;
  }

  .portfolio__slide__dir {
    font-size: clamp(20px, 1.8vw, 25px) !important;
  }

  .sq-static-footer__grid {
    gap: 48px !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 960px) {
  .sq-static-header__inner {
    min-height: 82px !important;
    width: calc(100% - 32px) !important;
  }

  .sq-nav,
  .sq-social,
  .sq-auth {
    display: none !important;
  }

  .sq-logo {
    font-size: 28px !important;
  }

  .sq-cta {
    font-size: 15px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
  }

  .portfolio__head {
    padding: 34px 0 36px !important;
  }

  .portfolio__head > h1 {
    font-size: clamp(24px, 6vw, 32px) !important;
    margin-bottom: 24px !important;
  }

  .portfolio__slide.is-active .portfolio__slide__inner {
    display: block !important;
    width: calc(100% - 32px) !important;
  }

  .portfolio__slide__left {
    margin-bottom: 28px !important;
  }

  .portfolio__slide__image img {
    max-height: none !important;
    max-width: 720px !important;
    width: 100% !important;
  }

  .portfolio__slide__mobile {
    max-width: 150px !important;
    min-width: 88px !important;
    right: 3% !important;
    width: 20% !important;
  }

  .portfolio__slide__right {
    max-width: none !important;
  }

  .portfolio__slide__logo img {
    max-height: 54px !important;
    max-width: 260px !important;
  }

  .portfolio__slide__title {
    font-size: 24px !important;
  }

  .portfolio__slide__dir {
    font-size: 21px !important;
  }

  .portfolio__slide__descr,
  .portfolio__slide__list li {
    font-size: 18px !important;
  }

  .portfolio__slide__list ul {
    gap: 12px !important;
    grid-template-columns: 1fr !important;
  }

  .portfolio__slide__buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .portfolio__slide__case,
  .portfolio__slide__detailed,
  .portfolio__detailed__btn {
    min-width: 0 !important;
    width: 100% !important;
  }

  .portfolio__slider__button,
  #prewbutton,
  #prevbutton,
  #nextbutton {
    height: 50px !important;
    top: 34% !important;
    width: 42px !important;
  }

  .portfolio__detailed__inner,
  .portfolio__certificates .container,
  .portfolio__reviews .container,
  .sq-static-footer__inner {
    width: calc(100% - 32px) !important;
  }

  .portfolio__detailed__content {
    font-size: 18px !important;
  }

  .portfolio__partner {
    display: block !important;
  }

  .portfolio__partner .img {
    margin-top: 30px !important;
  }

  .portfolio__certification {
    gap: 34px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portfolio__review {
    display: block !important;
  }

  .portfolio__review__left {
    border-bottom: 1px solid #e3e3e8 !important;
    border-right: 0 !important;
  }

  .portfolio__review__right {
    padding: 28px !important;
  }

  .sq-static-footer {
    padding: 64px 0 32px !important;
  }

  .sq-static-footer__grid {
    gap: 34px !important;
    grid-template-columns: 1fr !important;
    padding-bottom: 46px !important;
  }

  .sq-footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}