@font-face {
  font-family: "X5 Sans";
  src: url("../assets/fonts/X5Sans-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 349;
  font-display: swap;
}

@font-face {
  font-family: "X5 Sans";
  src: url("../assets/fonts/X5Sans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 350 449;
  font-display: swap;
}

@font-face {
  font-family: "X5 Sans";
  src: url("../assets/fonts/X5Sans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 450 560;
  font-display: swap;
}

@font-face {
  font-family: "X5 Sans";
  src: url("../assets/fonts/X5Sans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 561 900;
  font-display: swap;
}

:root {
  --color-green-100: #05320a;
  --color-green-90: #0f5a05;
  --color-green-20: #e8fad1;
  --color-violet-100: #9560ca;
  --color-violet-20: #f1e7ff;
  --color-violet-10: #f9f5ff;
  --color-accent: #9bc30f;
  --color-accent-light: #c3eb91;
  --color-text: #21271f;
  --design-width-desktop: 1440;
  --design-width-mobile: 375;
  --design-width: 1440;
  --page-width: calc(var(--design-width) * 1px);
  --page-zoom: calc(100vw / (var(--design-width) * 1px));
  --mobile-content: 343px;
  --mobile-gutter: 16px;
  --mobile-bp: 767px;
  --container-width: 1240px;
  --btn-icon-size: 56px;
  --btn-icon-bg: var(--color-green-20);
  --btn-icon-bg-hover: #d7f5b0;
  --btn-icon-fg: var(--color-green-90);
  --btn-icon-fg-muted: rgb(15 90 5 / 45%);
  --motion-fast: 180ms;
  --motion-ui: 240ms;
  --motion-reveal: 600ms;
  --header-height: 104px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 767px) {
  :root {
    --design-width: 375;
    --header-height: 52px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  /* Clip horizontally without creating a scroll container for sticky text. */
  overflow-x: clip;
  color: var(--color-text);
  background: #fff;
  font-family: "X5 Sans", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

.page-scale {
  position: relative;
  width: var(--page-width);
  margin-inline: 0;
  zoom: var(--page-zoom);
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: calc(var(--header-height) * var(--page-zoom));
  }

  .page-scale {
    overflow-x: hidden;
    overflow-x: clip;
  }
}

html.is-scale-fallback .page-scale {
  zoom: normal;
  transform-origin: top left;
  will-change: transform;
}

@supports not (zoom: 1) {
  .page-scale {
    zoom: normal;
  }
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

/* ——— Restrained motion system ——— */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--motion-reveal) var(--ease-out),
    transform var(--motion-reveal) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--motion-reveal) var(--ease-out),
    transform var(--motion-reveal) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger].is-revealed > *:nth-child(1) {
  transition-delay: 0ms;
}

[data-reveal-stagger].is-revealed > *:nth-child(2) {
  transition-delay: 70ms;
}

[data-reveal-stagger].is-revealed > *:nth-child(3) {
  transition-delay: 140ms;
}

[data-reveal-stagger].is-revealed > *:nth-child(4) {
  transition-delay: 210ms;
}

@keyframes soft-float-tilt {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-5px) rotate(-1.5deg);
  }
}

@keyframes copy-pulse {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.contacts__heart--float {
  animation: soft-float-tilt 8s var(--ease-out) infinite;
}

.contact-card__copy.is-copied {
  animation: copy-pulse 0.45s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal],
  [data-reveal].is-revealed,
  [data-reveal-stagger] > *,
  [data-reveal-stagger].is-revealed > * {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .contacts__heart--float,
  .contact-card__copy.is-copied {
    animation: none;
  }

  .btn-icon,
  .contact-card__copy,
  .copy-toast,
  .research-button,
  .research-categories button,
  .contacts__email,
  .nav__list a,
  .modal__close,
  .modal-footer__link {
    transition: none;
  }

  .btn-icon:active,
  .contact-card__copy:active,
  .research-button:active,
  .research-categories button:active,
  .modal__close:hover,
  .modal__close:active {
    transform: none;
  }

  .modal,
  .modal__backdrop,
  .modal__frame,
  .mobile-menu {
    transition: none !important;
  }

  .modal.is-open .modal__backdrop,
  .modal__backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(33 39 31 / 55%);
  }

  .modal.is-open,
  .modal.is-open .modal__frame,
  .mobile-menu.is-open {
    opacity: 1;
    transform: none;
  }

  .copy-toast,
  .copy-toast.is-visible {
    transform: translate(-50%, 0);
  }

  @media (max-width: 767px) {
    .modal.is-open .modal__frame {
      transform: scale(var(--page-zoom));
    }
  }
}

@media (max-width: 767px) {
  [data-reveal],
  [data-reveal-stagger] > * {
    will-change: auto;
  }

  [data-reveal-stagger].is-revealed > * {
    transition-delay: 0ms;
  }
}

.btn-icon {
  display: inline-flex;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--btn-icon-fg-muted);
  cursor: pointer;
  background: var(--btn-icon-bg);
  border: 0;
  border-radius: 60px;
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.btn-icon svg,
.btn-icon img {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  pointer-events: none;
}

.btn-icon:hover,
.btn-icon:focus-visible {
  color: var(--btn-icon-fg);
  background: var(--btn-icon-bg-hover);
  box-shadow: 0 0 0 4px rgb(232 250 209 / 70%);
}

.btn-icon:active {
  color: var(--btn-icon-fg);
  background: var(--color-accent-light);
  box-shadow: 0 0 0 3px rgb(195 235 145 / 55%);
  transform: scale(0.96);
}

.btn-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.btn-icon:disabled {
  cursor: default;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

.container {
  width: var(--container-width);
  margin-inline: auto;
}

.hero {
  position: relative;
  width: min(100%, var(--page-width));
  height: 890px;
  margin-inline: auto;
  padding-top: 104px;
  overflow: visible;
  color: #fff;
  background: var(--color-green-100);
  border-radius: 0 0 60px 60px;
  isolation: isolate;
}

.hero__background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.hero__background picture,
.hero__background img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 1440px;
  max-width: none;
  height: 890px;
}

.hero__background img {
  object-fit: fill;
}

.hero__break::before {
  content: "\A";
  white-space: pre;
}

@media (min-width: 768px) {
  .hero__break--mobile::before {
    content: none;
  }
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: var(--page-width);
  height: var(--header-height);
  color: #fff;
  background: var(--color-green-100);
  border-bottom: 1px solid rgb(255 255 255 / 20%);
  zoom: var(--page-zoom);
}

html.is-scale-fallback .header {
  zoom: normal;
  transform-origin: top left;
  transform: scale(var(--page-zoom));
}

.nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 85px;
  height: 104px;
}

.nav__logo {
  display: flex;
  flex: 0 0 156px;
  align-items: center;
  height: 40px;
}

.nav__logo img {
  width: 50px;
  height: 33px;
}

.nav__list {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list a {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.16px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.92;
  transition:
    color var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
}

.nav__list a:hover {
  color: var(--color-accent-light);
  opacity: 1;
}

.nav__menu-btn {
  display: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding-top: 62px;
}

.hero h1 {
  width: 920px;
  margin: 0;
  font-size: 92px;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: -1.84px;
}

.hero__subtitle {
  width: 920px;
  margin: 12px 0 0;
  color: var(--color-accent-light);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.brands {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.brand {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.brand__logo {
  position: relative;
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  place-items: center;
  background: #fff;
  border-radius: 50%;
}

.brand__logo > img {
  width: 29px;
  height: 29px;
}

.brand__logo--chizhik {
  padding: 5px;
}

.chizhik-sign {
  position: relative;
  display: block;
  width: 29.13px;
  height: 29.13px;
  overflow: hidden;
  background: #ffd100;
  border-radius: 50%;
}

.chizhik-sign__part {
  position: absolute;
}

.chizhik-sign__part--1 {
  inset: 20.59% 11.01% 28.15% 27.12%;
}

.chizhik-sign__part--2 {
  inset: 49.28% 17.44% 20.56% 22.58%;
}

.chizhik-sign__part--3 {
  inset: 26.88% 42.19% 31.61% 14.7%;
}

.chizhik-sign__part--4 {
  inset: 39.87% 11.18% 43.82% 68.63%;
}

.chizhik-sign__part--5 {
  inset: 29.69% 24.03% 47.17% 55.17%;
}

.chizhik-sign__part--6 {
  inset: 34.98% 27.54% 55.27% 66.51%;
}

.contact-card {
  position: fixed;
  z-index: 300;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  gap: 48px;
  align-items: center;
  padding: 12px 12px 8px 26px;
  overflow: hidden;
  color: var(--color-text);
  background: #fff;
  border-radius: 40px 40px 0 0;
  zoom: var(--page-zoom);
  box-shadow: 0 -6px 24px rgb(5 50 10 / 12%);
}

html.is-scale-fallback .contact-card {
  zoom: normal;
  transform: scale(var(--page-zoom));
  transform-origin: bottom center;
}

.contact-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.contact-card__text span {
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.contact-card__text a {
  color: var(--color-accent);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
}

.contact-card__copy {
  display: grid;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  place-items: center;
  transition: background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.contact-card__copy:hover,
.contact-card__copy:focus-visible {
  background: var(--color-accent-light);
  box-shadow: 0 0 0 4px rgb(195 235 145 / 55%);
}

.contact-card__copy:active {
  background: #b6e074;
  transform: scale(0.96);
}

.contact-card__copy img {
  width: 24px;
  height: 24px;
}

.contact-card__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.copy-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 1100;
  box-sizing: border-box;
  padding: 12px 20px;
  color: #fff;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.16px;
  pointer-events: none;
  background: var(--color-green-100);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition:
    opacity var(--motion-ui) var(--ease-out),
    transform var(--motion-ui) var(--ease-out),
    visibility var(--motion-ui) var(--ease-out);
}

.copy-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 767px) {
  .hero {
    z-index: 1;
    height: 812px;
    padding-top: 52px;
    border-radius: 0 0 48px 48px;
  }

  .hero__background picture,
  .hero__background img {
    width: 375px;
    height: 812px;
  }

  .header {
    position: fixed;
    border-bottom-color: rgb(240 240 241 / 20%);
  }

  .nav.container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .nav {
    justify-content: space-between;
    height: 52px;
    padding-inline: 16px;
    gap: 0;
  }

  .nav__logo {
    flex: 0 0 auto;
    height: 26px;
  }

  .nav__logo img {
    width: 39px;
    height: 26px;
  }

  .nav__list {
    display: none;
  }

  .nav__menu-btn {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    border: 0;
    background: transparent;
    place-items: center;
  }

  .nav__menu-btn img {
    width: 32px;
    height: 32px;
    max-width: none;
  }

  .nav__menu-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .hero__content.container {
    width: 343px;
    margin-inline: auto;
    padding-top: 48px;
  }

  .hero__break--desktop::before {
    content: none;
  }

  .hero h1 {
    width: 343px;
    font-size: 36px;
    line-height: 38px;
    letter-spacing: -0.18px;
  }

  .hero__subtitle {
    width: 343px;
    margin-top: 10px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.2px;
  }

  .brands {
    gap: 10px;
    margin-top: 32px;
  }

  .brand {
    gap: 6px;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.2px;
  }

  .brand__logo {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  .brand__logo > img {
    width: 20px;
    height: 20px;
  }

  .brand__logo--chizhik {
    padding: 2px;
  }

  .chizhik-sign {
    width: 20px;
    height: 20px;
  }

  .contact-card {
    top: auto;
    right: 16px;
    bottom: 0;
    left: 16px;
    display: flex;
    width: 343px;
    height: 89px;
    margin-inline: 0;
    gap: 8px;
    align-items: center;
    padding: 12px 8px 12px 20px;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -6px 24px rgb(5 50 10 / 12%);
  }

  .contact-card__text {
    position: static;
    width: auto;
    height: auto;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0;
    overflow: visible;
    opacity: 1;
  }

  .contact-card__copy {
    position: static;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background: var(--color-accent);
  }

  .contact-card__copy img {
    opacity: 1;
  }

  .contact-card__copy:hover,
  .contact-card__copy:focus-visible {
    background: var(--color-accent-light);
    box-shadow: 0 0 0 4px rgb(195 235 145 / 55%);
  }

  .contact-card__copy:active {
    background: #b6e074;
  }
}

.mobile-menu {
  display: none;
}

@media (max-width: 767px) {
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    width: var(--page-width);
    height: calc(100dvh / var(--page-zoom));
    overflow: hidden;
    color: #fff;
    background: var(--color-green-100);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    zoom: var(--page-zoom);
    transition:
      opacity var(--motion-ui) var(--ease-out),
      visibility var(--motion-ui) var(--ease-out);
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu__header {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid rgb(240 240 241 / 20%);
  }

  .mobile-menu__logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 26px;
  }

  .mobile-menu__logo img {
    width: 39px;
    height: 26px;
  }

  .mobile-menu__close {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    border: 0;
    background: transparent;
    place-items: center;
  }

  .mobile-menu__close img {
    width: 32px;
    height: 32px;
    max-width: none;
  }

  .mobile-menu__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .mobile-menu__list a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  .mobile-menu__footer a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
  }

  .mobile-menu__list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }

  .mobile-menu__list a {
    display: flex;
    align-items: center;
    height: 68px;
    padding: 0 16px;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.16px;
    white-space: nowrap;
  }

  .mobile-menu__footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 0 16px 40px 24px;
  }

  .mobile-menu__footer p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.16px;
  }

  .mobile-menu__footer a {
    display: block;
    margin-top: 4px;
    color: var(--color-accent);
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.48px;
  }

  html.nav-open,
  body.nav-open {
    overflow: hidden;
  }
}

html.is-scale-fallback .mobile-menu {
  zoom: normal;
  transform-origin: top left;
  transform: scale(var(--page-zoom));
}

.about-intro {
  display: flex;
  width: min(100%, var(--page-width));
  height: 820px;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.about-intro h2 {
  display: flex;
  width: 928px;
  margin: 0;
  flex-direction: column;
  color: var(--color-text);
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
  text-align: center;
}

.about-intro h2 span:last-child {
  color: var(--color-accent);
}

.about-intro__break::before {
  content: none;
}

@media (max-width: 767px) {
  .about-intro {
    height: 702px;
  }

  .about-intro h2 {
    width: 343px;
    gap: 2px;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
  }

  .about-intro__break::before {
    content: "\A";
    white-space: pre;
  }
}

.business-tools {
  position: relative;
  width: min(100%, var(--page-width));
  height: 1367px;
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
}

.business-tools__ribbon {
  position: absolute;
  top: 320px;
  left: 0;
  width: 1440px;
  max-width: none;
  height: 927px;
  object-fit: cover;
  pointer-events: none;
}

.business-tools__header {
  position: absolute;
  z-index: 2;
  top: 124px;
  left: 50%;
  display: flex;
  width: 1030px;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.business-tools__header h2 {
  margin: 0;
  color: var(--color-text);
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
}

.business-tools__header p {
  width: 948px;
  margin: 0;
  color: var(--color-green-100);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
}

.insights {
  position: absolute;
  z-index: 2;
  top: 415px;
  left: 256px;
  width: 928px;
}

.insights__cards {
  display: flex;
  gap: 24px;
}

.insight-card {
  display: flex;
  width: 452px;
  height: 388px;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  border-radius: 40px;
  backdrop-filter: blur(32px);
}

.insight-card--receipts {
  background: rgb(15 90 5 / 80%);
  backdrop-filter: blur(15.75px);
}

.insight-card--surveys {
  background: rgb(149 96 202 / 80%);
}

.insight-card h3 {
  margin: 0;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
}

br.insight-break--mob {
  display: none;
}

.insight-card p {
  margin: 16px 0 0;
  color: #e8fad1;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.insight-card--surveys p {
  width: 400px;
  color: #e9d9ff;
}

.insight-card__tags {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #e8fad1;
  list-style: none;
}

.insight-card--surveys .insight-card__tags {
  color: #e9d9ff;
}

.insight-card__tags li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  white-space: nowrap;
}

.insight-card__tags li:not(:last-child)::after {
  width: 4px;
  height: 4px;
  content: "";
  background: currentcolor;
  border-radius: 50%;
}

.insights__icons {
  position: absolute;
  z-index: 3;
  top: 206px;
  left: 267px;
  width: 266px;
  max-width: none;
  height: 249px;
  object-fit: contain;
  pointer-events: none;
}

.insights__summary {
  display: flex;
  width: 928px;
  min-height: 240px;
  margin-top: 24px;
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: #ebf2ff;
  border-radius: 40px;
}

.insights__summary p {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.72px;
}

.insights__summary p:last-child {
  color: #4c7abc;
}

.business-tools__ribbon-mobile {
  display: none;
}

.business-tools__break--desk::before {
  content: "\A";
  white-space: pre;
}

.business-tools__break--mob::before {
  content: none;
}

@media (max-width: 767px) {
  .business-tools {
    height: 1519px;
  }

  .business-tools__ribbon {
    display: none;
  }

  .business-tools__ribbon-mobile {
    display: block;
    position: absolute;
    z-index: 1;
    top: 396px;
    left: -127px;
    width: 622px;
    height: 400px;
    overflow: hidden;
    pointer-events: none;
  }

  .business-tools__ribbon-mobile img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: fill;
  }

  .business-tools__break--desk::before {
    content: none;
  }

  .business-tools__break--mob::before {
    content: "\A";
    white-space: pre;
  }

  .business-tools__header {
    top: 122px;
    width: 343px;
    gap: 10px;
  }

  .business-tools__header h2 {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
  }

  .business-tools__header p {
    width: 100%;
    color: var(--color-text);
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.2px;
  }

  .insights {
    top: 420px;
    left: 16px;
    width: 343px;
  }

  .insights__cards {
    flex-direction: column;
    gap: 16px;
  }

  .insight-card {
    width: 343px;
    padding: 24px;
    border-radius: 24px;
  }

  .insight-card--receipts {
    height: 342px;
  }

  .insight-card--surveys {
    height: 329px;
  }

  .insight-card h3 {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.48px;
  }

  br.insight-break--desk {
    display: none;
  }

  br.insight-break--mob {
    display: revert;
  }

  .insight-card p {
    margin-top: 8px;
  }

  .insight-card--surveys p {
    width: auto;
  }

  .insight-card__tags {
    gap: 4px;
    max-width: 295px;
  }

  .insight-card__tags li {
    gap: 0;
    height: 20px;
    min-height: 20px;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.14px;
  }

  .insight-card__tags li:not(:last-child)::after {
    margin-left: 4px;
  }

  .insights__icons {
    top: 212px;
    left: 236px;
    width: 135px;
    height: 133px;
    transform: none;
  }

  .insights__summary {
    width: 343px;
    min-height: 0;
    margin-top: 16px;
    padding: 24px;
    border-radius: 24px;
  }

  .insights__summary p {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.72px;
  }
}

.voice-panel {
  --voice-bg-progress: 0;
  --voice-lead-color: var(--color-text);
  --voice-accent-color: var(--color-accent);
  --voice-lead-height: 186px;
  --voice-transition-distance: 400px;
  --voice-color-distance: 50px;
  --voice-transition-extra: calc(var(--voice-transition-distance) - 50px);
  position: relative;
  width: min(100%, var(--page-width));
  height: calc(2751px + var(--voice-transition-extra) / var(--page-zoom));
  margin-inline: auto;
  margin-top: 87px;
  padding-top: 300px;
  overflow: hidden;
  overflow: clip;
  color: #fff;
  background: #fff;
  border-radius: 93px;
}

.voice-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--color-green-100);
  border-radius: inherit;
  opacity: var(--voice-bg-progress);
}

.voice-panel__lead-track {
  position: relative;
  z-index: 5;
  width: 100%;
  height: calc(
    var(--voice-lead-height) +
    var(--voice-transition-distance) / var(--page-zoom)
  );
}

.voice-panel__lead {
  position: sticky;
  top: calc((100vh / var(--page-zoom) - var(--voice-lead-height)) / 2);
  display: flex;
  width: 928px;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
  text-align: center;
}

.voice-panel--scroll-fallback .voice-panel__lead {
  position: relative;
  top: 0;
  will-change: transform;
}

.voice-panel__lead h2,
.voice-panel__lead p {
  margin: 0;
  font: inherit;
}

.voice-panel__lead h2 {
  color: var(--voice-lead-color);
}

.voice-panel__lead p {
  color: var(--voice-accent-color);
}

.voice-panel__stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transform: translateY(
    calc(var(--voice-transition-extra) / var(--page-zoom))
  );
}

.voice-panel__wordmark {
  position: absolute;
  z-index: 1;
  top: 928px;
  left: 50%;
  margin: 0;
  color: var(--color-accent-light);
  font-size: 293.32px;
  font-weight: 700;
  line-height: 313.55px;
  letter-spacing: -11.25px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.voice-panel__ribbon {
  position: absolute;
  z-index: 2;
  top: 1048px;
  left: -68px;
  width: 1575px;
  max-width: none;
  height: 2374px;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: url("../assets/images/voice/voice-ribbon-shape.svg");
  -webkit-mask-position: 0.5px 97px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 1575px 2276px;
  mask-image: url("../assets/images/voice/voice-ribbon-shape.svg");
  mask-position: 0.5px 97px;
  mask-repeat: no-repeat;
  mask-size: 1575px 2276px;
}

.voice-panel__shade {
  position: absolute;
  z-index: 3;
  top: 1132px;
  left: 0;
  width: 1440px;
  height: 1619px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(3 62 3 / 0%) 0%, #033e03 100%);
}

.voice-panel__chizhik {
  position: absolute;
  z-index: 4;
  top: 858px;
  left: 272px;
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.voice-panel__x5-badge {
  position: absolute;
  z-index: 4;
  top: 883.73px;
  left: 1166.86px;
  width: 159.12px;
  height: 134.75px;
  pointer-events: none;
}

.voice-panel__x5-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-panel__decor {
  position: absolute;
  z-index: 4;
  object-fit: cover;
  pointer-events: none;
}

.voice-panel__decor--left {
  top: 1102px;
  left: 0;
  width: 330px;
  height: 237px;
}

.voice-panel__decor--right {
  top: 1146px;
  left: 1068px;
  width: 231px;
  height: 125px;
}

.voice-panel__intro {
  position: absolute;
  z-index: 5;
  top: 1253px;
  left: 256px;
  display: flex;
  width: 928px;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.voice-panel__intro h3 {
  width: 746px;
  margin: 0;
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
}

.voice-panel__intro p {
  width: 706px;
  margin: 0;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.voice-panel__features {
  position: absolute;
  z-index: 5;
  top: 1823px;
  left: 100px;
  width: 1240px;
}

.voice-panel__features > h3 {
  display: flex;
  margin: 0;
  flex-direction: column;
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
}

.voice-panel__features > h3 span:first-child {
  width: 1084px;
}

.voice-panel__features > h3 span:last-child {
  color: var(--color-accent-light);
}

.profile-cards {
  display: flex;
  gap: 24px;
  margin-top: 100px;
}

.profile-card {
  position: relative;
  width: 397.33px;
  height: 472px;
  padding: 32px 22px;
  overflow: visible;
  color: var(--color-text);
  border-radius: 40px;
}

.profile-card--blue {
  background: #ebf2ff;
}

.profile-card--green {
  background: #efffdb;
}

.profile-card--violet {
  background: #f1e7ff;
}

.profile-card__content {
  position: absolute;
  right: 22px;
  bottom: 32px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.profile-card__content h4 {
  margin: 0;
  padding-inline: 50px;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
}

.profile-card__content p {
  width: 353px;
  margin: 0;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.profile-card__desc--mob {
  display: none;
}

.profile-card--blue .profile-card__content p {
  width: 351px;
}

.profile-card__visual {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.profile-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-card__visual--portrait {
  top: -58px;
  left: 47px;
  width: 284px;
  height: 261px;
}

.profile-card__visual--portrait img {
  object-fit: fill;
}

.profile-card__visual--response {
  top: -100px;
  left: 36px;
  width: 325px;
  height: 310px;
}

.profile-card__visual--response img {
  object-fit: fill;
}

.profile-card__visual--builder {
  top: -67px;
  left: 54px;
  width: 290px;
  height: 279px;
}

.profile-card__visual--builder img {
  max-width: none;
  object-fit: fill;
}

.voice-panel__ribbon--mobile {
  display: none;
}

.voice-panel__wordmark-glow {
  display: none;
}

.voice-panel__stage-blur {
  display: none;
}

.voice-break--desk::before,
.voice-break--always::before {
  content: "\A";
  white-space: pre;
}

.voice-break--mob::before {
  content: none;
}

@media (max-width: 767px) {
  .voice-break--desk::before {
    content: none;
  }

  .voice-break--mob::before,
  .voice-break--always::before {
    content: "\A";
    white-space: pre;
  }

  .voice-panel {
    --voice-lead-height: 162px;
    height: calc(3193px + var(--voice-transition-extra) / var(--page-zoom));
    margin-top: 0;
    padding-top: 105px;
    border-radius: 48px;
  }

  .voice-panel__lead {
    width: 343px;
    gap: 2px;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
  }

  .voice-panel__lead h2 {
    width: 100%;
  }

  .voice-panel__lead p {
    width: 100%;
  }

  .voice-panel__lead p span {
    display: block;
  }

  /* Under mask: bottom of letters tucked under green crest */
  .voice-panel__wordmark {
    top: 573px;
    left: 50%;
    z-index: 1;
    font-size: 78.75px;
    line-height: 86.3px;
    letter-spacing: -3.1px;
    transform: translateX(-50%);
  }

  .voice-panel__wordmark-glow {
    display: block;
    position: absolute;
    z-index: 1;
    top: 643px;
    left: 81px;
    width: 208px;
    height: 107px;
    pointer-events: none;
    background: #05320a;
    border-radius: 52px;
    opacity: 0.25;
    filter: blur(13px);
  }

  .voice-panel__stage-blur {
    display: block;
    position: absolute;
    z-index: 4;
    top: 836px;
    left: -60px;
    width: 515px;
    height: 448px;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgb(11 57 16 / 20%) 16.52%,
      #05320a 50%
    );
    filter: blur(25px);
  }

  .voice-panel__ribbon {
    display: none;
  }

  .voice-panel__ribbon--mobile {
    display: block;
    position: absolute;
    z-index: 2;
    top: 607px;
    left: -18px;
    width: 411px;
    height: 601px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: url("../assets/images/voice/voice-ribbon-mobile-mask.svg");
    -webkit-mask-position: 0.42px 25.46px;
    -webkit-mask-size: 410px 593px;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../assets/images/voice/voice-ribbon-mobile-mask.svg");
    mask-position: 0.42px 25.46px;
    mask-size: 410px 593px;
    mask-repeat: no-repeat;
  }

  .voice-panel__ribbon--mobile img {
    width: 411px;
    height: 601px;
    max-width: none;
    object-fit: fill;
  }

  .voice-panel__shade {
    z-index: 3;
    top: 629px;
    left: 0;
    width: 375px;
    height: 620px;
    background: linear-gradient(
      180deg,
      rgb(3 62 3 / 0%) 0%,
      rgb(3 62 3 / 0.45) 48%,
      #05320a 100%
    );
  }

  
  .voice-panel__chizhik {
    z-index: 6;
    top: 534px;
    left: 75px;
    width: 52px;
    height: 52px;
    object-fit: contain;
  }

  .voice-panel__x5-badge {
    z-index: 6;
    top: 545px;
    left: 290px;
    width: 64px;
    height: 55px;
    transform: rotate(-1.88deg);
  }

  .voice-panel__x5-badge img {
    width: 64px;
    height: 55px;
    object-fit: contain;
  }

  .voice-panel__decor--left {
    z-index: 6;
    top: 618px;
    left: -5px;
    width: 102px;
    height: 73px;
    object-fit: contain;
  }

  .voice-panel__decor--right {
    z-index: 6;
    top: 630px;
    left: 268px;
    width: 92px;
    height: 50px;
    object-fit: contain;
  }

  .voice-panel__intro {
    z-index: 7;
    top: 695px;
    left: 48px;
    width: 279px;
    gap: 12px;
  }

  .voice-panel__intro h3 {
    width: 100%;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
  }

  .voice-panel__intro p {
    width: 100%;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.2px;
    font-weight: 700;
  }

  .voice-panel__features {
    top: 1278px;
    left: 16px;
    width: 343px;
  }

  .voice-panel__features > h3 {
    align-items: center;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
    text-align: center;
  }

  .voice-panel__features > h3 span:first-child {
    width: 100%;
  }

  .profile-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 343px;
    margin-top: 72px;
  }

  .profile-card {
    display: block;
    width: 343px;
    height: 470px;
    padding: 32px 22px;
    border-radius: 24px;
    overflow: visible;
  }

  .profile-card__content {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 299px;
    margin-inline: auto;
    gap: 12px;
  }

  .profile-card--blue .profile-card__content {
    margin-top: 146px;
  }

  .profile-card--green .profile-card__content {
    margin-top: 170px;
  }

  .profile-card--violet .profile-card__content {
    margin-top: 194px;
  }

  .profile-card__content h4 {
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }

  .profile-card--blue .profile-card__content h4 {
    width: 214px;
  }

  .profile-card--green .profile-card__content h4 {
    width: 221px;
  }

  .profile-card--violet .profile-card__content h4 {
    width: 249px;
  }

  .profile-card__desc--desk {
    display: none;
  }

  .profile-card__desc--mob {
    display: block;
    width: 100%;
  }

  .profile-card--blue .profile-card__content p {
    width: 100%;
  }

  .profile-card__visual--portrait {
    top: -46px;
    left: 95px;
    width: 153px;
    height: 186px;
    transform: none;
  }

  .profile-card__visual--portrait img {
    object-fit: contain;
    object-position: center top;
  }

  .profile-card__visual--response {
    top: -20px;
    left: 82px;
    width: 180px;
    height: 172px;
  }

  .profile-card__visual--response img {
    object-fit: contain;
    object-position: center top;
  }

  .profile-card__visual--builder {
    top: -18px;
    left: 92px;
    width: 160px;
    height: 154px;
    transform: none;
  }

  .profile-card__visual--builder img {
    max-width: none;
    object-fit: contain;
    object-position: center top;
  }
}

.research-types {
  position: relative;
  width: min(100%, var(--page-width));
  height: 2280px;
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
}

.research-types > h2 {
  position: absolute;
  top: 200px;
  left: 424px;
  width: 591px;
  margin: 0;
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
  text-align: center;
}

.research-row {
  position: absolute;
  left: 100px;
  width: 1240px;
  height: 446px;
}

.research-row--custom {
  top: 362px;
}

.research-row--brand {
  top: 988px;
}

.research-row--syndicated {
  top: 1634px;
  overflow: visible;
}

.research-row__syndicate-decor {
  position: absolute;
  z-index: 1;
  top: -623px;
  left: -100px;
  width: 1440px;
  max-width: none;
  height: 1269px;
  pointer-events: none;
}

.research-card {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 156px;
  display: flex;
  width: 653px;
  height: 446px;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: var(--color-text);
  border-radius: 40px;
}

.research-card--green {
  background: #efffdb;
}

.research-card--blue {
  width: 654px;
  background: #ebf2ff;
}

.research-card--violet {
  z-index: 2;
  width: 928px;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.research-card h3 {
  width: 437px;
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.72px;
}

.research-card p {
  width: 589px;
  margin: 20px 0 0;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.research-card--blue p {
  width: 544px;
}

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

.research-button {
  display: inline-flex;
  height: 64px;
  padding: 4px 32px;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font: 500 17px/1.25 "X5 Sans", Arial, sans-serif;
  letter-spacing: -0.17px;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: 80px;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.research-button:active {
  transform: scale(0.98);
}

.research-button--light {
  background: #fff;
}

.research-button--light:hover,
.research-button--light:focus-visible {
  background: var(--color-green-20);
  box-shadow: 0 0 0 3px rgb(232 250 209 / 80%);
}

.research-button--green {
  color: #fff;
  background: #3a8918;
}

.research-button--green:hover,
.research-button--green:focus-visible {
  background: #2f7313;
  box-shadow: 0 0 0 3px rgb(58 137 24 / 25%);
}

.research-button--blue {
  color: #fff;
  background: #4c7abc;
}

.research-button--blue:hover,
.research-button--blue:focus-visible {
  background: #3f6aa8;
  box-shadow: 0 0 0 3px rgb(76 122 188 / 25%);
}

.research-row__main-visual,
.research-row__magnifier,
.research-row__tendril,
.research-row__brand-visual {
  position: absolute;
  pointer-events: none;
}

.research-row__main-visual {
  z-index: 1;
  top: 16px;
  left: 650px;
  width: 585px;
  height: 484px;
  object-fit: contain;
  transform: scaleX(-1);
}

.research-row__magnifier {
  z-index: 3;
  top: -90px;
  left: 860px;
  width: 388px;
  height: 481px;
  object-fit: contain;
  pointer-events: none;
}

.research-row__tendril--custom {
  z-index: 1;
  top: -71px;
  left: 7px;
  width: 279px;
  height: 234px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.research-row__tendril--custom > span {
  position: relative;
  display: block;
  width: 238.68px;
  height: 149.97px;
  overflow: hidden;
  transform: rotate(-156.08deg) scaleY(-1);
}

.research-row__tendril--custom img {
  position: absolute;
  top: 0;
  left: -71.18%;
  width: 171.18%;
  max-width: none;
  height: 100%;
}

.research-row__custom-badge {
  position: absolute;
  z-index: 4;
  top: 270px;
  left: 721px;
  width: 154px;
  height: 81px;
  object-fit: contain;
  pointer-events: none;
}

.research-row__brand-visual {
  z-index: 1;
  top: -55px;
  left: 480px;
  width: 782px;
  height: 521px;
  object-fit: contain;
  transform: rotate(3.18deg);
}

.research-row__heart {
  position: absolute;
  z-index: 3;
  top: 196px;
  left: 72px;
  width: 115px;
  height: 144px;
  object-fit: contain;
  pointer-events: none;
}

.research-card__copy {
  position: absolute;
  z-index: 3;
  top: 32px;
  left: 32px;
  display: flex;
  width: 420px;
  flex-direction: column;
  gap: 20px;
  border: 0;
  outline: none;
  box-shadow: none;
}

.research-card--violet h3 {
  width: 420px;
}

.research-card--violet p {
  width: 538px;
  margin: 0;
  font-family: "X5 Sans", Arial, sans-serif;
  font-weight: 500;
}

.research-categories {
  position: absolute;
  z-index: 3;
  top: 65px;
  left: 536px;
  display: flex;
  width: 360px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}

.research-categories li {
  width: 360px;
  list-style: none;
}

.research-categories button {
  display: flex;
  width: 100%;
  height: 64px;
  padding: 4px 4px 4px 32px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text);
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.17px;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-radius: 100px;
  box-shadow: 0 4.713px 7.069px rgb(0 0 0 / 8%);
  transition:
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.research-categories button:hover,
.research-categories button:focus-visible {
  background: var(--color-violet-10);
  box-shadow:
    0 6px 14px rgb(149 96 202 / 14%),
    0 0 0 3px rgb(241 231 255 / 90%);
}

.research-categories button:active {
  background: var(--color-violet-20);
  box-shadow: 0 3px 8px rgb(149 96 202 / 12%);
  transform: scale(0.985);
}

.research-categories button:focus-visible {
  outline: 2px solid var(--color-violet-100);
  outline-offset: 3px;
}

.research-categories img {
  width: 56px;
  height: 56px;
  padding: 10px;
  object-fit: contain;
  background: var(--color-violet-20);
  border-radius: 50%;
  transition: background-color 0.22s ease, transform 0.22s ease;
}

.research-categories button:hover img,
.research-categories button:focus-visible img {
  background: #e4d4f8;
  transform: scale(1.04);
}

.research-categories button:active img {
  transform: scale(1);
}

.research-types__break--mob::before,
.research-break--mob::before {
  content: none;
}

.research-types__bg,
.research-row__custom-pom,
.research-row__custom-sprout,
.research-row__syndicate-vine,
.research-row__syndicate-gem {
  display: none;
}

.research-card__desc--mob {
  display: none;
}

@media (max-width: 767px) {
  .research-types {
    display: block;
    width: 375px;
    height: 2175px;
    padding: 0;
    overflow: hidden;
  }

  .research-types__bg {
    display: block;
    position: absolute;
    z-index: 0;
    top: 153px;
    left: 0;
    width: 375px;
    height: 2022px;
    max-width: none;
    pointer-events: none;
    object-fit: fill;
  }

  .research-types > h2 {
    position: absolute;
    top: 136px;
    left: 16px;
    z-index: 2;
    width: 343px;
    height: 80px;
    margin: 0;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
  }

  .research-types__break--mob::before,
  .research-break--mob::before {
    content: "\A";
    white-space: pre;
  }

  .research-row {
    position: absolute;
    left: 0;
    width: 375px;
    margin: 0;
    overflow: visible;
  }

  .research-row--custom {
    top: 256px;
    height: 488px;
    isolation: isolate;
  }

  .research-row--brand {
    top: 804px;
    height: 468px;
  }

  .research-row--syndicated {
    top: 1332px;
    height: 615px;
    overflow: visible;
    isolation: isolate;
  }

  .research-row__main-visual,
  .research-row__magnifier,
  .research-row__custom-badge,
  .research-row__brand-visual,
  .research-row__heart,
  .research-row__syndicate-decor {
    display: none;
  }

  .research-row__custom-pom {
    display: none;
  }

  .research-row__syndicate-vine,
  .research-row__syndicate-gem {
    display: grid;
    place-items: start;
    position: absolute;
    max-width: none;
    overflow: visible;
    pointer-events: none;
  }

  .research-row__syndicate-vine {
    z-index: 1;
    top: -23px;
    left: 191px;
    width: 173.33px;
    height: 117.21px;
  }

  .research-row__syndicate-vine > span {
    position: relative;
    display: block;
    width: 173.33px;
    height: 117.21px;
    overflow: hidden;
    transform: matrix(0.991607, 0.129285, -0.129285, 0.991607, 0, 0);
    transform-origin: 0 0;
  }

  .research-row__syndicate-vine img {
    position: absolute;
    top: 0;
    left: -84.23%;
    width: 184.23%;
    max-width: none;
    height: 100%;
  }

  .research-row__syndicate-gem {
    z-index: 3;
    top: -9.12px;
    left: 300.05px;
    width: 63.92px;
    height: 56.23px;
  }

  .research-row__syndicate-gem > span {
    position: relative;
    display: block;
    width: 63.92px;
    height: 56.23px;
    overflow: hidden;
    transform: matrix(0.992929, 0.118709, -0.118709, 0.992929, 0, 0);
    transform-origin: 0 0;
  }

  .research-row__syndicate-gem img {
    position: absolute;
    top: 0.4%;
    left: -406%;
    width: 505.1%;
    max-width: none;
    height: 210.8%;
  }

  .research-row__tendril--custom {
    display: grid;
    place-items: start;
    position: absolute;
    z-index: 1;
    top: -45px;
    left: 208.34px;
    width: 238.68px;
    height: 149.97px;
    max-width: none;
    overflow: visible;
    pointer-events: none;
  }

  .research-row__tendril--custom > span {
    width: 238.68px;
    height: 149.97px;
    overflow: hidden;
    transform: matrix(-0.977591, 0.210511, 0.210511, 0.977591, 0, 0);
    transform-origin: 0 0;
  }

  .research-row__tendril--custom img {
    top: 0;
    left: -71.18%;
    width: 171.18%;
    height: 100%;
  }

  .research-row__custom-sprout {
    display: block;
    position: absolute;
    z-index: 3;
    top: -15px;
    left: 0;
    width: 85px;
    height: 94px;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
  }

  .research-card {
    position: absolute;
    top: 32px;
    left: 16px;
    z-index: 2;
    width: 343px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 32px 22px;
    overflow: hidden;
    border-radius: 24px;
  }

  .research-row--custom .research-card,
  .research-row--brand .research-card {
    gap: 48px;
    justify-content: flex-end;
  }

  .research-row--custom .research-card {
    height: 460px;
  }

  .research-row--brand .research-card {
    height: 404px;
  }

  .research-row--syndicated .research-card {
    display: block;
    left: 16px;
    width: 341px;
    height: 583px;
    padding: 0;
    overflow: hidden;
    background: #f1e7ff;
  }

  .research-card h3 {
    width: 299px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.48px;
  }

  .research-card p {
    width: 299px;
    margin: 12px 0 0;
  }

  .research-card--blue p {
    width: 299px;
  }

  .research-card__desc--desk {
    display: none;
  }

  .research-card__desc--mob {
    display: block;
  }

  .research-card__actions {
    flex-direction: column;
    gap: 12px;
    width: 299px;
    margin-top: auto;
  }

  .research-button {
    width: 100%;
    height: 48px;
    padding: 4px 32px;
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  .research-card__copy {
    position: absolute;
    top: 32px;
    left: 21px;
    width: 299px;
    gap: 12px;
  }

  .research-card--violet h3,
  .research-card--violet p {
    width: 299px;
  }

  .research-categories {
    position: absolute;
    top: 286px;
    left: 21px;
    width: 299px;
    margin: 0;
    gap: 8px;
  }

  .research-categories li {
    width: 299px;
  }

  .research-categories button {
    height: 56px;
    padding: 4px 4px 4px 20px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.16px;
  }

  .research-categories img {
    width: 48px;
    height: 48px;
    padding: 12px;
  }
}

.team {
  position: relative;
  width: min(100%, var(--page-width));
  height: 840px;
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
}

.team__vine {
  position: absolute;
  z-index: 0;
  top: 260.52px;
  left: 0;
  width: 630.63px;
  max-width: none;
  height: 692.77px;
  object-fit: contain;
  pointer-events: none;
}

.team__heart {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 1159px;
  width: 273px;
  height: 284px;
  object-fit: contain;
  pointer-events: none;
}

.team__vine--mob {
  display: none;
}

.team > h2 {
  position: absolute;
  z-index: 1;
  top: 100px;
  left: 468px;
  width: 505px;
  margin: 0;
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
  text-align: center;
}

.team__viewport {
  position: absolute;
  z-index: 1;
  top: 242px;
  left: 100px;
  width: 1240px;
  height: 422px;
  overflow: hidden;
}

.team__track {
  display: flex;
  width: max-content;
  height: 422px;
  gap: 24px;
  align-items: center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

.team-card {
  position: relative;
  flex: 0 0 292px;
  width: 292px;
  min-width: 292px;
  height: 422px;
  overflow: hidden;
  background: #fff;
  border-radius: 40px;
}

.team-card__photo {
  position: absolute;
  top: -27px;
  left: 0;
  width: 326px;
  max-width: none;
  height: 487px;
  object-fit: cover;
  pointer-events: none;
}

.team-card__photo--2 {
  top: -15px;
  left: -8px;
  width: 314px;
  height: 468px;
}

.team-card__photo--3 {
  top: -19px;
  left: -27px;
  width: 352px;
  height: 525px;
}

.team-card__photo--4 {
  top: -25px;
  left: -12px;
  width: 311px;
  height: 463px;
}

.team-card__photo--5 {
  top: -56px;
  left: -21px;
  width: 341px;
  height: 508px;
}

.team-card__photo--6 {
  top: -26px;
  left: -24px;
  width: 332px;
  height: 495px;
}

.team-card__info {
  position: absolute;
  z-index: 1;
  top: 262px;
  left: 8px;
  display: flex;
  width: 276px;
  padding: 20px;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  color: var(--color-text);
  text-align: center;
  background: #fff;
  border-radius: 32px;
}

.team-card__info--elena {
  top: 261px;
  height: 153px;
}

.team-card__info h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.team-card__info p {
  margin: 0;
  font-family: "X5 Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.team__arrows {
  position: absolute;
  z-index: 2;
  top: 704px;
  left: 50%;
  display: flex;
  gap: 24px;
  align-items: center;
  transform: translateX(-50%);
}

.team__arrow--next {
  transform: scaleX(-1);
}

.team__arrow--next:active {
  transform: scaleX(-1) scale(0.96);
}

.team-break--desk::before {
  content: "\A";
  white-space: pre;
}

.team-break--mob::before {
  content: none;
}

@media (max-width: 767px) {
  .team {
    height: 930px;
    overflow: hidden;
  }

  .team__vine--desk {
    display: none;
  }

  .team__vine--mob {
    display: block;
    top: 441px;
    left: 0;
    z-index: 2;
    width: 167px;
    height: 489px;
    object-fit: fill;
    transform: none;
  }

  .team__heart {
    top: 73px;
    left: 277px;
    width: 143px;
    height: 149px;
  }

  .team > h2 {
    top: 92px;
    left: 16px;
    width: 343px;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
  }

  .team__viewport {
    top: 188px;
    left: 0;
    width: 375px;
    height: 570px;
    padding-left: 16px;
    overflow: hidden;
    box-sizing: border-box;
    touch-action: pan-y;
  }

  .team__track {
    height: 570px;
    gap: 8px;
  }

  .team-card {
    flex: 0 0 343px;
    width: 343px;
    min-width: 343px;
    height: 570px;
    border-radius: 24px;
  }

  .team-card__photo,
  .team-card__photo--2,
  .team-card__photo--3,
  .team-card__photo--4,
  .team-card__photo--5,
  .team-card__photo--6 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
  }

  .team-card__info,
  .team-card__info--elena {
    top: 412px;
    left: 16px;
    width: 311px;
    height: 142px;
    padding: 16px;
    border-radius: 20px;
  }

  .team-card__info h3 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.24px;
  }

  .team-card__info--olga h3 {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.21px;
  }

  .team-break--desk::before {
    content: none;
  }

  .team-break--mob::before {
    content: "\A";
    white-space: pre;
  }

  .team__arrows {
    top: 790px;
    z-index: 3;
    gap: 16px;
  }

  .team__arrows .btn-icon {
    width: 48px;
    height: 48px;
  }
}

.contacts {
  position: relative;
  width: min(100%, var(--page-width));
  height: 1103px;
  margin-inline: auto;
  overflow: hidden;
  background: #fff;
}

.contacts__bg-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.contacts__bg-frame picture,
.contacts__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.contacts__hand-clip {
  display: contents;
}

.contacts__hand {
  position: absolute;
  z-index: 1;
  top: 187.28px;
  left: 776.16px;
  width: 663.84px;
  max-width: none;
  height: 915.72px;
  object-fit: contain;
  pointer-events: none;
}

.contacts__heart {
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 1157px;
  width: 210.9px;
  max-width: none;
  height: 248.04px;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 60%;
}

.contacts__content {
  position: absolute;
  z-index: 2;
  top: 317px;
  left: 86px;
  display: flex;
  width: 633px;
  flex-direction: column;
  gap: 44px;
  align-items: center;
  text-align: center;
}

.contacts__text {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.contacts__content h2 {
  display: flex;
  width: 100%;
  margin: 0;
  flex-direction: column;
  align-items: stretch;
  color: var(--color-text);
  font-size: 58px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -1.16px;
}

.contacts__lead {
  color: var(--color-accent);
}

.contacts__rest {
  width: 100%;
}

.contacts__content p {
  width: 100%;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.contacts__email {
  display: inline-flex;
  justify-content: center;
  color: var(--color-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.72px;
  text-decoration: none;
  border-bottom: 2px solid var(--color-text);
  transition:
    color var(--motion-fast) var(--ease-out),
    border-bottom-color var(--motion-fast) var(--ease-out);
}

.contacts__email:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.contacts__email:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.contacts-break--mob::before {
  content: none;
}

.contacts__desc--mob,
.contacts__rest--mob {
  display: none;
}

@media (max-width: 767px) {
  .contacts {
    width: 375px;
    height: 1232px;
    overflow: hidden;
    background: #fff;
  }

  .contacts__bg-frame {
    inset: auto;
    top: 724.106px;
    left: -40px;
    display: flex;
    width: 521.548px;
    height: 545.705px;
    align-items: center;
    justify-content: center;
    transform: none;
  }

  .contacts__bg-frame picture {
    position: relative;
    inset: auto;
    flex: none;
    width: 501.953px;
    height: 527.079px;
    transform: rotate(-2.17deg);
  }

  .contacts__bg {
    position: relative;
    inset: auto;
    width: 501.953px;
    height: 527.079px;
    max-width: none;
    object-fit: cover;
  }

  .contacts__hand-clip {
    display: block;
    position: absolute;
    top: 628px;
    left: 0;
    z-index: 1;
    width: 375px;
    height: 604px;
    overflow: hidden;
    pointer-events: none;
  }

  .contacts__hand-clip picture,
  .contacts__hand {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 604px;
    max-width: none;
    object-fit: fill;
  }

  .contacts__heart {
    top: 565px;
    left: 255px;
    z-index: 2;
    width: 61px;
    height: 72px;
  }

  .contacts__content {
    top: 145px;
    left: 16px;
    z-index: 3;
    width: 343px;
    gap: 32px;
  }

  .contacts__text {
    gap: 16px;
  }

  .contacts__content h2 {
    gap: 2px;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.16px;
  }

  .contacts-break--mob::before {
    content: "\A";
    white-space: pre;
  }

  .contacts__rest--desk {
    display: none;
  }

  .contacts__rest--mob {
    display: block;
  }

  .contacts__content p,
  .contacts