@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
  --color-text: #000000;
  --color-text-secondary: rgba(0, 0, 0, 0.5);
  --color-background: #ffffff;
  --color-ui-light: #f7f7f7;
  --color-ui-border: #d3d3d3;
  --color-underline: #c0c0c0;
  --color-now: #53D14D;
  
  --spacing-01: 2px;
  --spacing-02: 4px;
  --spacing-03: 8px;
  --spacing-04: 10px;
  --spacing-05: 16px;
  --spacing-06: 24px;
  --spacing-07: 32px;
  --spacing-08: 40px;
  --spacing-09: 48px;
  --spacing-10: 64px;
  --spacing-11: 80px;
  --spacing-12: 96px;
  --spacing-13: 160px;
  
  --border-radius-sm: 10px;
  --border-radius-md: 20px;
  
  --container-max-width: 1200px;
  --container-padding: var(--spacing-06);
}

/* Typography */
.medium, .text-block, .text-sequence a, .hobbies h2 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.019em;
}
.regular, .role, .company, .achievement, .top-nav, .footer-links {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
}

.h1 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.h2 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.022em;
}
.h3 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: -0.022em;
}
.h4 {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: -0.019em;
}
.big {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.023em;
  max-width: 990px;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.bold {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.06em;
}
.md {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.011em;
}
.bd {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

a,
button,
input,
select,
h1,
h2,
h3,
h4,
h5,
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    background: none;

    -webkit-font-smoothing: antialiased;
}

menu, ol, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.div,
.div * {
  box-sizing: border-box;
}
.div {
  background: #ffffff;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.highlight-04 {
  position: absolute;
  left: -5%;
  top: -100%;
  z-index: 0;
  pointer-events: none;
}
.stonks-text {
  height: 220px;
  position: relative;
  width: 100%;
  z-index: 1;
}
.stonks-text-01, .stonks-text-02, .stonks-text-03, .stonks-text-04 {
  position: absolute;
  max-width: 200px;
}

.stonks-text-01 {
  top: 28%;
}
.stonks-text-02 {
  left: 26%;
  top: 2%;
}
.stonks-text-03 {
  right: 28%;
  top: -24%;
}
.stonks-text-04 {
  right: 1%;
  top: -46%;
}

.div,
.div * {
  box-sizing: border-box;
}
.div {
  background: #ffffff;
  height: auto;
  position: relative;
  overflow: hidden;
}
.div2 {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-medium-font-family, "Inter-Medium", sans-serif);
  font-size: var(--p-medium-font-size, 34px);
  line-height: var(--p-medium-line-height, 130%);
  letter-spacing: var(--p-medium-letter-spacing, -0.019em);
  font-weight: var(--p-medium-font-weight, 500);
  position: absolute;
  left: 138px;
  top: 10081px;
  width: 233px;
}
.div3 {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-medium-font-family, "Inter-Medium", sans-serif);
  font-size: var(--p-medium-font-size, 34px);
  line-height: var(--p-medium-line-height, 130%);
  letter-spacing: var(--p-medium-letter-spacing, -0.019em);
  font-weight: var(--p-medium-font-weight, 500);
  position: absolute;
  left: 434px;
  top: 10022px;
  width: 217px;
}
.now {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  padding-top: 16px;
  color: var(--color-now);
  animation: now-blink 1.2s infinite ease-in-out;
}

@keyframes now-blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.now-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-now);
  margin-right: 4px;
  vertical-align: middle;
  animation: now-blink 1.2s infinite ease-in-out;
}
.div4 {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-medium-font-family, "Inter-Medium", sans-serif);
  font-size: var(--p-medium-font-size, 34px);
  line-height: var(--p-medium-line-height, 130%);
  letter-spacing: var(--p-medium-letter-spacing, -0.019em);
  font-weight: var(--p-medium-font-weight, 500);
  position: absolute;
  left: 713px;
  top: 9962px;
  width: 250px;
}
.div5 {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-medium-font-family, "Inter-Medium", sans-serif);
  font-size: var(--p-medium-font-size, 34px);
  line-height: var(--p-medium-line-height, 130%);
  letter-spacing: var(--p-medium-letter-spacing, -0.019em);
  font-weight: var(--p-medium-font-weight, 500);
  position: absolute;
  left: 1013px;
  top: 9913px;
  width: 188px;
}
.more {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 678px;
  margin: var(--spacing-09) 0;
}
.subtitle-05 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.icon-message {
  flex-shrink: 0;
  width: 146px;
  height: 80px;
  position: relative;
  overflow: visible;
}
.more-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.label {
  color: var(--text-02, rgba(0, 0, 0, 0.5));
  text-align: left;
  position: relative;
  align-self: stretch;
  padding-top: var(--spacing-04, 10px);
}
.text-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.divider {
  align-self: stretch;
  flex-shrink: 0;
  height: 1px;
  position: relative;
  overflow: visible;
  width: 100%;
  display: block;
}
.list {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.divider2 {
  align-self: stretch;
  flex-shrink: 0;
  height: 1px;
  position: relative;
  overflow: visible;
  width: 100%;
  display: block;
}
.content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10, 64px);
  align-items: flex-start;
  justify-content: flex-start;
  width: 1060px;
  position: relative;
  margin: var(--spacing-05) 0;
  padding-left: calc(46px + var(--spacing-06));
}
.header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}
.h-1 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 800px;
  position: relative;
}
.text-line {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-05, 16px);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.code {
  font-family: var(--code-font-family);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
  font-weight: var(--code-font-weight);
  font-style: var(--code-font-style);
}
._2022 {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
}
.rshb {
  flex-shrink: 0;
  width: 53px;
  height: 51px;
  position: relative;
  overflow: visible;
}
.text-line-rshb {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
}
.text-line-other {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
  align-self: stretch;
  padding-bottom: var(--spacing-05);
}
.problems {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-09, 48px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.problem {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
  flex: 1;
}
.img-01 {
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  object-fit: cover;
}
.intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.intro-ext {
  display: flex;
  flex-direction: column;
  gap: 33px;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 840px;
  position: relative;
}
.intro-one {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
  width: 840px;
}
.intro-two {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
  width: 840px;
}
.intro-two video {
  width: 100%;
  max-width: 840px;
  height: auto;
  margin-bottom: var(--spacing-05);
  border-radius: var(--border-radius-sm);
  object-fit: cover;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  display: block;
}
.intro-images {
  display: flex;
  flex-direction: row;
  row-gap: 0px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-shrink: 0;
  position: relative;
}
.img-02 {
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  flex-shrink: 0;
  width: 543px;
  height: 318px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 543/318;
}
.img-04 {
  margin: 0 0 0 -390px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px 1px 1px 1px;
  flex-shrink: 0;
  width: 604px;
  height: 353px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 604/353;
}
.img-03 {
  margin: 0 0 0 -390px;
  border-width: 1px 1px 1px 0px;
  flex: 1;
  width: 693px;
  height: 351px;
  position: relative;
  object-fit: cover;
}
.advantages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.advantages-group {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-09, 48px);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.plus {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-05, 16px);
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.icon, .icon2 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: auto;
  position: relative;
  overflow: visible;
  margin-top: -0.5em;
}
.implement {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 917px;
  max-width: 650px;
  position: relative;
}
.img-group {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 916px;
  position: relative;
}
.img-05 {
  flex-shrink: 0;
  width: 610px;
  height: 343px;
  position: relative;
  object-fit: cover;
}
.implement-img {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  width: fit-content;
  overflow: visible;
}
.img-06, .img-07 {
  width: 291px;
  height: 164px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 291/164;
}
.implement-features {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  width: 100%;
}
.imp-01 {
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  position: relative;
}
.imp-02 {
  margin: 0 0 0 -1px;
  border-radius: 0px 10px 10px 0px;
  border-style: solid;
  border-color: var(--ui-03, #d3d3d3);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 520px;
  position: relative;
}
.stage-1 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}
.subtitle-01 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 225px;
  position: relative;
}
.subtitle-stage-01 {
  color: var(--text-02, rgba(0, 0, 0, 0.5));
  text-align: left;
  position: relative;
  align-self: stretch;
}
.subtitle-stage-02 {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
  align-self: stretch;
}
.stage-group {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-09, 48px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.stage-one {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  width: fit-content;
  position: relative;
}
.img-08 {
  flex-shrink: 0;
  width: 467px;
  height: 301px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 467/301;
}
.figma {
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
  align-self: stretch;
}
.stage-two {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  width: fit-content;
  position: relative;
}
.img-09 {
  flex-shrink: 0;
  width: 467px;
  height: 296px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 467/296;
}
.stage-2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}
.subtitle-02 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 344px;
  position: relative;
}
.pluses {
  padding: 0px 0px var(--spacing-05, 16px) 0px;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-08, 40px);
  row-gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.plus2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 460px;
  position: relative;
}
.icon3 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: auto;
  position: relative;
  overflow: visible;
}
.plus-text {
  margin: 0 0 0 -32px;
  color: var(--text-01, #000000);
  text-align: left;
  position: relative;
  flex: 1;
}
.icon4 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: auto;
  position: relative;
  overflow: visible;
}
.icon5 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: auto;
  position: relative;
  overflow: visible;
}
.img-10 {
  flex-shrink: 0;
  width: 609px;
  height: 343px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 609/343;
}
.stage-2-img {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 291px;
  position: relative;
}
.img-11 {
  align-self: stretch;
  flex-shrink: 0;
  height: 163px;
  position: relative;
  object-fit: cover;
}
.img-12 {
  align-self: stretch;
  flex-shrink: 0;
  height: 163px;
  position: relative;
  object-fit: cover;
}
.keys {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02, 4px);
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  position: relative;
}
.keys-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02, 4px);
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  position: relative;
}
.keys-item-01,
.keys-item-02,
.keys-item-03 {
  display: inline-flex;
  padding: var(--spacing-01, 2px) var(--spacing-02, 4px);
  border-radius: 6px;
  width: fit-content;
  position: relative;
}
.keys-item-01 .medium,
.keys-item-02 .medium,
.keys-item-03 .medium {
  white-space: nowrap;
  font-size: 32px;
  line-height: 1.2;
}
.keys-item-01 {
  background: #e4ccff;
}
.keys-item-02 {
  background: #ffe8a3;
}
.keys-item-03 {
  background: #aff4c6;
}
.stage-3 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}
.subtitle-03 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 423px;
  position: relative;
}
.stage-3-group {
  padding: var(--spacing-05, 16px) 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 600px;
  position: relative;
}
.stage-3-textline {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-03, 8px);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  flex-wrap: wrap;
}


.hill {
  align-self: stretch;
  flex-shrink: 0;
  height: 424px;
  position: relative;
}
.pretty-face, .hill-text, .rmn, .def {
  position: absolute;
}
.pretty-face {
  top: 12%;
  left: 36.5%;
  transform: scale(0.3);
}
.hill-text {
  color: var(--text-01, #000000);
  width: 50%;
  bottom: 0;
  right: 0;
  transform: translate(10%, -50%);
}
.rmn {
  width: 174px;
  height: 170px;
  left: 42%;
  top: 12%;
  overflow: visible;
}
.group-36 {
  width: 1060px;
  height: 403px;
  /*left: 0px;*/
  /*top: 308px;*/
  /*overflow: visible;*/
}
.def {
  width: 94.85px;
  height: 80.94px;
  left: 72%;
  overflow: visible;
}
.solutions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.solutions-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-09, 48px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}
.solutions-01 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-07, 32px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.subtitle {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-06, 24px);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.line {
  background: #ffbdf2;
  border-radius: 14px;
  align-self: stretch;
  flex-shrink: 0;
  width: 17px;
  position: relative;
}
.title-list {
  color: var(--text-04, #dc4dc0);
  text-align: left;
  position: relative;
}
.solution {
  padding: 0px 0px 0px var(--spacing-09, 48px);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  max-width: 80%;
}
.solutions-02 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-07, 32px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.icon-arrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 50px;
  height: auto;
  position: relative;
  overflow: visible;
}
.solutions-03 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-07, 32px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.value {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-09, 48px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}

.value .medium {
  max-width: 840px;
  width: 100%;
}

.subtitle-04 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.saving {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-03, 8px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 840px;
  position: relative;
}
.highlight-01, .highlight-02, .highlight-03_1, .highlight-03_2 {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.highlight-01:before, .highlight-02:before, .highlight-03_1:before, .highlight-03_2:before {
  content: "";
  position: absolute;
  z-index: -1;
}
.highlight-01:before {
  background: url("./highlight-01.svg") no-repeat;
  width: 130%;
  height: 200%;
  transform: scale(0.87, 0.8) translate(-10%, -8%);
}
.highlight-02:before {
  background: url("./highlight-02.svg") no-repeat;
  height: 100%;
  width: 140%;
  transform: translate(-8%, 40%) scaleX(0.86);
}
.highlight-03_1:before {
  background: url("./highlight-03_1.svg") no-repeat;
  height: 100%;
  width: 100%;
  transform: translate(-2%, 45%) scaleX(0.85);
}
.highlight-03_2:before {
  background: url("./highlight-03_2.svg") no-repeat;
  height: 190%;
  width: 100%;
  transform: translate(7%, -3%) scaleX(0.87);
}
.standard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}
.standard-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-03, 8px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 840px;
  position: relative;
  z-index: 2;
}
.standard-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  height: fit-content;
  position: relative;
}
.standard-one {
  border-radius: 10px 0px 0px 10px;
  border-style: solid;
  border-color: var(--ui-03, #d3d3d3);
  border-width: 1px;
  padding: var(--spacing-05, 16px);
  display: flex;
  flex-direction: row;
  gap: 0px;
  flex-shrink: 0;
  width: 340px;
  position: relative;
  height: fit-content;
}
.standard-two {
  margin: 0 0 0 -1px;
  border-radius: 0px 10px 10px 0px;
  border-style: solid;
  border-color: var(--ui-03, #d3d3d3);
  border-width: 1px;
  padding: var(--spacing-05, 16px);
  display: flex;
  flex-direction: row;
  gap: 0px;
  flex-shrink: 0;
  max-width: 500px;
  position: relative;
  height: fit-content;
}
.scalability {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-03, 8px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 840px;
  position: relative;
}
.highlight-03 {
  flex-shrink: 0;
  width: 440px;
  height: 88px;
  position: absolute;
  left: 17px;
  top: 120px;
  overflow: visible;
}
.finnaly {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-09, 48px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1060px;
  position: relative;
}
.finnaly-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-09, 48px);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div19 {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-big-font-family, "Inter-Medium", sans-serif);
  font-size: var(--p-big-font-size, 96px);
  line-height: var(--p-big-line-height, 100%);
  letter-spacing: var(--p-big-letter-spacing, -0.023em);
  font-weight: var(--p-big-font-weight, 500);
  position: relative;
}
.x-12 {
  position: relative;
}
.x-12:before {
  content: "";
  position: absolute;
  background: url("./x12.svg") no-repeat;
  width: 150%;
  height: 150%;
  transform: translate(16%, -18%);
}
.finnaly-form {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 928px;
  position: relative;
}
.gifs {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.gifs2 {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-shrink: 0;
  width: 528px;
  height: 705px;
  position: relative;
}
.item {
  background: #efefef;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(528px / 3);
  height: 235px;
  position: relative;
  overflow: hidden;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item .video2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video {
  flex-shrink: 0;
  width: 1804px;
  height: 3208px;
  position: relative;
  aspect-ratio: 1804/3208;
}
.img {
  flex-shrink: 0;
  width: 467px;
  height: 622px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 467/622;
}
.video2 {
  flex-shrink: 0;
  width: 353px;
  height: 265px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 353/265;
}
.img2 {
  flex-shrink: 0;
  width: 206.38px;
  height: 275px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 206.38/275;
}
.img3 {
  flex-shrink: 0;
  width: 235px;
  height: 235px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
}
.img4 {
  flex-shrink: 0;
  width: 382px;
  height: 509px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 382/509;
}
.video3 {
  flex-shrink: 0;
  width: 193px;
  height: 345px;
  position: relative;
  aspect-ratio: 193/345;
}
.item2 {
  background: #efefef;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 176px;
  height: 235px;
  position: relative;
  overflow: hidden;
}
.video4 {
  flex-shrink: 0;
  width: 176px;
  height: 236px;
  position: relative;
  aspect-ratio: 176/236;
}
.finnaly-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-06, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 484px;
  position: relative;
}
.present {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div21 {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--h3-font-family, "Inter-Medium", sans-serif);
  font-size: var(--h3-font-size, 40px);
  line-height: var(--h3-line-height, 150%);
  letter-spacing: var(--h3-letter-spacing, -0.022000000000000002em);
  font-weight: var(--h3-font-weight, 500);
  position: relative;
  align-self: stretch;
}
.img-13 {
  flex-shrink: 0;
  width: 352px;
  height: 265px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 352/265;
}
.experiment {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.img-14 {
  flex-shrink: 0;
  width: 351px;
  height: 255px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 351/255;
}
.icon-back {
  width: 46px;
  height: 57px;
  position: fixed;
  top: var(--spacing-04);
  left: var(--spacing-05);
  overflow: visible;
  z-index: 100;
  opacity: 1;
  transition: opacity 0.1s ease;
}

.icon-back.hidden {
  opacity: 0;
  pointer-events: none;
}

.links {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-02, 4px);
  align-items: center;
  justify-content: center;
  position: sticky;
  right: 24px;
  top: 24px;
}
.telegram {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-regular-font-family, "Inter-Regular", sans-serif);
  font-size: var(--p-regular-font-size, 20px);
  font-weight: var(--p-regular-font-weight, 400);
  position: relative;
}
.div22 {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-regular-font-family, "Inter-Regular", sans-serif);
  font-size: var(--p-regular-font-size, 20px);
  font-weight: var(--p-regular-font-weight, 400);
  position: relative;
}
.linked-in {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-regular-font-family, "Inter-Regular", sans-serif);
  font-size: var(--p-regular-font-size, 20px);
  font-weight: var(--p-regular-font-weight, 400);
  position: relative;
}
.cv {
  color: var(--text-01, #000000);
  text-align: left;
  font-family: var(--p-regular-font-family, "Inter-Regular", sans-serif);
  font-size: var(--p-regular-font-size, 20px);
  font-weight: var(--p-regular-font-weight, 400);
  position: relative;
}

@keyframes waveLine {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(1px, 0);
  }
  50% {
    transform: translate(0, -1px);
  }
  75% {
    transform: translate(-1px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

path[stroke="#BABABA"] {
  animation: waveLine 0.05s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

 /*Адаптивная вёрстка */
@media screen and (max-width: 1200px) {
  .content {
    width: 100%;
    max-width: 710px;
    margin: var(--spacing-05) auto;
    padding-left: calc(46px + var(--spacing-06));
  }

  .header, .intro-ext, .saving, .standard-text, .scalability {
    width: 100%;
  }

  .h-1 {
    width: 100%;
  }

  .text-line-other, .intro-one, .intro-two, .problem, .plus-text, .figma,
  .standard-text, .scalability, .saving, .hill-text, .solution,
  .title-list, .finnaly-text, .stonks-text-01, .stonks-text-02,
  .stonks-text-03, .stonks-text-04, .more-list {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .stonks-text {
    width: 100%;
    height: auto;
    position: relative;
  }

  .stonks-text-01, .stonks-text-02, .stonks-text-03, .stonks-text-04 {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: var(--spacing-05);
  }

  .more {
    width: 100%;
    position: relative;
    left: auto;
    top: auto;
    padding: var(--spacing-05);
  }

  .problems {
    gap: var(--spacing-06);
  }

  /* Фиксим изображения */
  img {
    max-width: 100%;
    height: auto !important;
  }

  .intro-images {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-05);
  }

  .intro-images img {
    margin: 0;
    width: 100%;
  }

  .img-group {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-05);
  }

  .implement-img {
    flex-direction: row;
    width: 100%;
    gap: var(--spacing-05);
  }

  /* Фиксим Hill секцию */
  .hill {
    height: auto;
    position: relative;
    margin-top: var(--spacing-09);
  }

  .group-36 {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
  }

  .def {
    position: relative;
    left: auto;
    top: auto;
    margin: var(--spacing-05) auto;
  }

  .hill-text {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-05);
  }

  .rmn {
    position: relative;
    left: auto;
    top: auto;
    margin: var(--spacing-05) auto;
  }

  .stage-group {
    flex-direction: column;
    gap: var(--spacing-07);
  }

  .stage-one, .stage-two {
    width: 100%;
  }

  .finnaly-form {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-07);
  }

  .gifs2 {
    width: 100%;
    height: auto;
  }

  .finnaly-group {
    width: 100%;
  }

  .solutions-list {
    width: 100%;
  }

  .solution {
    width: 100%;
    padding: 0;
  }

  .title-list, .solution .medium {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .title-list br, .solution .medium br {
    display: none;
  }

  .stage-1, .stage-2, .stage-3 {
    width: 100%;
  }

  .subtitle-stage-01, .subtitle-stage-02, .figma {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .subtitle-stage-01 br, .subtitle-stage-02 br, .figma br {
    display: none;
  }

  .value, .standard {
    width: 100%;
  }

  .saving, .standard-text {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .standard-group {
    width: 100%;
    height: auto;
  }

  .standard-one, .standard-two {
    width: 100%;
  }

  .implement {
    width: 100%;
    max-width: 650px;
  }

  .img-group {
    width: 100%;
  }

  .implement-img {
    width: 100%;
  }

  .img-05, .img-06, .img-07 {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .stonks-text {
    background: url('./highlight-04.svg') no-repeat top right;
  }
  .highlight-04 {
    display: none;
  }

  .content {
    padding: 0 var(--spacing-03);
    width: 100%;
    max-width: 710px;
    overflow: hidden;
    gap: var(--spacing-06);
  }

  .more {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .subtitle-05 {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .subtitle-05 .h2 {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .icon-message {
    width: 146px;
    height: 80px;
    margin: 0;
    padding: 0;
    transform: scale(0.7);
    transform-origin: left center;
  }

  .more-list {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .list {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .text-form {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .text-form .md {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .problems {
    flex-direction: column;
  }
  
  .text-line {
    flex-wrap: wrap;
    gap: var(--spacing-03);
  }

  ._2022 {
    width: 100%;
  }

  .rshb {
    width: 37px;
    height: 36px;
  }

  .text-line-rshb {
    white-space: nowrap;
  }
  
  .text-line-other br, .intro-one br, .intro-two br, .problem br, .plus-text br,
  .standard-text br, .scalability br, .saving br, .hill-text br, .solution br,
  .title-list br, .finnaly-text br {
    display: none;
  }
  
  .advantages-group {
    flex-direction: column;
    gap: var(--spacing-05);
  }
  
  .implement-features {
    flex-direction: column;
    gap: var(--spacing-05);
    width: 100%;
  }
  
  .imp-01, .imp-02 {
    width: 100%;
    margin: 0;
    border-radius: 10px;
    padding: var(--spacing-05);
  }
  
  .imp-01 .medium, .imp-02 .medium {
    width: 100%;
    font-size: 32px;
    line-height: 1.2;
  }
  
  .pluses {
    gap: var(--spacing-05);
  }
  
  .plus2 {
    width: 100%;
  }
  
  .standard-group {
    flex-direction: column;
    gap: var(--spacing-05);
  }
  
  .implement {
    width: 100%;
    max-width: 650px;
  }
  
  .img-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
    width: 100%;
  }

  .img-05 {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .implement-img {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-05);
    position: relative;
    width: 100%;
  }

  .img-06, .img-07 {
    width: calc(50% - var(--spacing-03));
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
  }

  .value, .standard {
    gap: var(--spacing-06);
  }
  
  .icon-back {
    display: none;
  }
  
  .icon-back.show-on-scroll {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.1s ease, transform 0.1s ease;
  }
  
  .icon-back.show-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .solution {
    flex-direction: row;
    gap: var(--spacing-05);
    align-items: flex-start;
    padding: 0;
    margin: 0;
    max-width: 100%;
    margin-left: var(--spacing-03);
  }

  .solution .medium {
    font-size: 20px;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    flex: 1;
  }

  .title-list {
    font-size: 24px;
    line-height: 1.3;
    padding-left: var(--spacing-03);
  }

  .icon-arrow {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    flex-shrink: 0;
  }

  .stonks-text, .more {
    padding: var(--spacing-03);
  }

  .solutions-01, .solutions-02, .solutions-03 {
    gap: var(--spacing-05);
  }

  .subtitle {
    gap: var(--spacing-04);
    padding-top: var(--spacing-05);
    padding-bottom: var(--spacing-05);
  }

  .stage-1, .stage-2, .stage-3 {
    gap: var(--spacing-05);
  }

  .subtitle-01, .subtitle-02, .subtitle-03 {
    width: 100%;
  }

  .subtitle-stage-01 {
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-text-secondary);
  }

  .subtitle-stage-02 {
    font-size: 24px;
    line-height: 1.3;
  }

  .figma {
    font-size: 20px;
    line-height: 1.4;
  }

  .stage-3-group {
    width: 100%;
    padding: var(--spacing-05) 0;
  }

  .stage-3-textline {
    flex-direction: column;
    gap: var(--spacing-04);
    align-items: flex-start;
  }

  .stage-3-textline .medium:first-child {
    padding-right: 0;
    width: 100%;
  }

  .stage-3-textline .medium:first-child::after {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: 40px;
    margin-top: var(--spacing-04);
  }

  .gifs {
    display: none;
  }
  
  .gifs2 {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-shrink: 0;
    width: 100%;
    height: auto;
    position: relative;
  }

  .item {
    background: #efefef;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(100% / 3);
    height: 235px;
    position: relative;
    overflow: hidden;
  }

  .item2 {
    display: none;
  }

  .finnaly-form {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-07);
  }

  .finnaly-group {
    width: 100%;
  }

  .solutions-list {
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
  }

  .solution {
    flex-direction: row;
    gap: var(--spacing-05);
    align-items: flex-start;
    padding: 0;
    margin: 0;
    max-width: 100%;
    margin-left: var(--spacing-03);
  }

  .solution .medium {
    font-size: 20px;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    flex: 1;
  }

  .title-list {
    font-size: 24px;
    line-height: 1.3;
  }

  .finnaly-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-05) !important;
  }

  .finnaly-text .h3 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  .finnaly-text .big {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    font-size: 36px !important;
    line-height: 1.3 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.023em !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    hyphens: auto !important;
    word-break: normal !important;
    position: relative !important;
    z-index: 1 !important;
  }

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

  .keys-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02, 4px);
    padding: 0;
    margin: 0;
  }

  .keys-item-01,
  .keys-item-02,
  .keys-item-03 {
    width: 100%;
    padding: var(--spacing-05);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .keys-item-01 .medium,
  .keys-item-02 .medium,
  .keys-item-03 .medium {
    white-space: normal;
    font-size: 24px;
    line-height: 24px;
    width: 100%;
  }

  .keys-item-01 {
    background: #e4ccff;
  }

  .keys-item-02 {
    background: #ffe8a3;
  }

  .keys-item-03 {
    background: #aff4c6;
  }

  .subtitle-05 {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
  }

  .subtitle-05 .h2 {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .icon-arrow {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    flex-shrink: 0;
  }

  .stage-one .figma,
  .stage-two .figma {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .finnaly {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .standard-one, .standard-two {
    margin: 0 !important;
    border-radius: 10px !important;
    border-style: solid !important;
    border-color: var(--ui-03, #d3d3d3) !important;
    border-width: 1px !important;
    padding: var(--spacing-05, 16px) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    text-align: left !important;
  }

  .star2 {
    width: 300px;
    height: 300px;
    position: absolute;
    right: -25px;
    bottom: -55px;
    z-index: 2;
    pointer-events: none;
  }

  .implement .medium {
    width: 100%;
    max-width: 100%;
  }

  .stage-2 > .medium {
    width: 100%;
    max-width: 840px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .intro-two {
    width: 100%;
    padding: 0 var(--spacing-03);
  }

  .intro-two video {
    width: 100%;
    max-width: 840px;
    height: auto;
    margin-bottom: var(--spacing-05);
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    display: block;
  }

  .stonks-text {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0;
    margin: 0;
  }

  .stonks-text-01, .stonks-text-02, .stonks-text-03, .stonks-text-04 {
    position: relative;
    left: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-05);
    padding: 0;
    z-index: 1;
  }

  .intro-one {
    width: 100%;
    padding-top: var(--spacing-06);
  }
}

@media screen and (max-width: 480px) {
  :root {
    --spacing-10: 32px;
    --spacing-09: 24px;
    --spacing-08: 20px;
    --spacing-07: 16px;
  }
  
  .medium, .text-block, .text-sequence a, .hobbies h2 {
    font-size: 20px;
    line-height: 1.4;
  }
  
  .regular, .role, .company, .achievement, .top-nav, .footer-links {
    font-size: 16px;
    line-height: 1.3;
  }
  
  .h1 {
    font-size: 32px;
    line-height: 1.2;
  }
  
  .h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  
  .h3 {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  
  .h4 {
    font-size: 22px;
    line-height: 1.3;
  }
  
  .big {
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  
  .bold {
    font-size: 22px;
    line-height: 1.3;
  }
  
  .item {
    width: 100%;
  }
  
  .links {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-03);
  }
  
  .content {
    padding: 0 var(--spacing-03);
    gap: var(--spacing-06);
  }
  
  .plus {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .plus-text {
    margin: var(--spacing-03) 0 0 0;
  }
  
  /* Дополнительные стили для Hill на мобильных */
  .hill-text {
    font-size: 24px;
  }

  .solution {
    font-size: 18px;
    line-height: 1.4;
  }

  .title-list {
    font-size: 20px;
    line-height: 1.3;
  }

  .stonks-text-01, .stonks-text-02, .stonks-text-03, .stonks-text-04 {
    font-size: 18px;
    line-height: 1.4;
  }

  .more-list {
    font-size: 18px;
    line-height: 1.4;
  }

  .saving, .standard-text {
    font-size: 18px;
    line-height: 1.4;
    padding: 0;
    margin: 0;
  }

  .saving .bold, .standard-text .bold {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .saving .medium, .standard-text .medium {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .solutions-list {
    gap: var(--spacing-07);
  }

  .title-list {
    font-size: 20px;
    line-height: 1.3;
  }

  .solution .medium {
    font-size: 18px;
    line-height: 1.4;
  }

  .icon-arrow {
    width: 40px;
  }

  .subtitle-stage-01 {
    font-size: 18px;
    line-height: 1.4;
  }

  .subtitle-stage-02 {
    font-size: 20px;
    line-height: 1.3;
  }

  .figma {
    font-size: 18px;
    line-height: 1.4;
  }

  .stage-1, .stage-2, .stage-3 {
    gap: var(--spacing-04);
  }

  .stage-3-group {
    padding: var(--spacing-04) 0;
  }

  .stage-3-textline {
    gap: var(--spacing-03);
  }

  .finnaly-text .h3 {
    font-size: 20px;
  }

  .finnaly-text .big {
    font-size: 36px;
  }

  .keys-item-01, .keys-item-02, .keys-item-03 {
    padding: var(--spacing-03);
  }

  .keys-item-01 .medium, .keys-item-02 .medium, .keys-item-03 .medium {
    font-size: 18px;
    line-height: 1.4;
    padding: 0;
    margin: 0;
  }

  .subtitle-05 {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
  }

  .subtitle-05 .h2 {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .icon-arrow {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    flex-shrink: 0;
  }

  .stage-one .figma,
  .stage-two .figma {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .finnaly {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .standard-one, .standard-two {
    margin: 0 !important;
    border-radius: 10px !important;
    border-style: solid !important;
    border-color: var(--ui-03, #d3d3d3) !important;
    border-width: 1px !important;
    padding: var(--spacing-05, 16px) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    text-align: left !important;
  }

  .star2 {
    width: 225px;
    height: 225px;
    position: absolute;
    right: -35px;
    bottom: -55px;
    z-index: 2;
  }

  .implement .medium {
    font-size: 18px;
    line-height: 1.4;
  }

  .stage-2 > .medium {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .intro-two {
    padding: 0;
  }

  .intro-two video {
    margin-bottom: var(--spacing-03);
  }
}

.star2 {
  width: 407px;
  height: 407px;
  position: absolute;
  right: -120px;
  bottom: -120px;
  z-index: 2;
  pointer-events: none;
}

.implement-img {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  width: fit-content;
  overflow: visible;
}

.img-06, .img-07 {
  width: 291px;
  height: 164px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 291/164;
}

.star2 {
  width: 407px;
  height: 407px;
  position: absolute;
  right: -120px;
  bottom: -120px;
  z-index: 2;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .star2 {
    width: 300px;
    height: 300px;
    right: -65px;
    bottom: -105px;
  }

  .implement-img {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-05);
    position: relative;
    width: 100%;
  }

  .img-06, .img-07 {
    width: calc(50% - var(--spacing-03));
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
  }
}

@media screen and (max-width: 480px) {
  .star2 {
    width: 225px;
    height: 225px;
    right: -15px;
    bottom: -15px;
  }

  .polygon {
    width: 140.625px;
    height: 140.625px;
    right: -9.375px;
    bottom: -9.375px;
  }

  .around {
    width: 180%;
    height: 180%;
    margin-left: 0;
    margin-top: var(--spacing-02);
  }
}

.implement .medium .code {
  width: 840px;
}

.stage-2 > .medium {
  width: 100%;
  max-width: 840px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.implement-img-2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05, 16px);
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  width: fit-content;
  overflow: visible;
}

@media screen and (max-width: 768px) {
  .implement-img-2 {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-05);
    position: relative;
    width: 100%;
  }

  .implement-img-2 .img-11,
  .implement-img-2 .img-12 {
    width: calc(50% - var(--spacing-03));
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
  }
}

.polygon {
  width: 254.375px;
  height: 254.375px;
  position: absolute;
  right: -75px;
  bottom: -75px;
  z-index: 2;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .polygon {
    width: 187.5px;
    height: 187.5px;
    right: -40.625px;
    bottom: -15.625px;
  }
}

@media screen and (max-width: 480px) {
  .polygon {
    width: 140.625px;
    height: 140.625px;
    right: -9.375px;
    bottom: -9.375px;
  }

  .around {
    width: 180%;
    height: 180%;
    margin-left: 0;
    margin-top: var(--spacing-02);
  }
}

.around {
  width: 215px;
  height: 53px;
  background-image: url("./around.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--spacing-05);
}

@media screen and (max-width: 768px) {
  .around {
    width: 100%;
    height: 40px;
    margin-left: 0;
    margin-top: var(--spacing-02);
  }
}

.analytics-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-01);
}

.analytics-line .medium {
  white-space: nowrap;
}

.analytics-line .around {
  width: 215px;
  height: 53px;
  background-image: url("./around.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .analytics-line {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-05);
    flex-wrap: nowrap;
  }

  .analytics-line .medium {
    white-space: nowrap;
    font-size: 32px;
    line-height: 1.2;
  }

  .analytics-line .around {
    width: 215px;
    height: 53px;
    margin: 0;
  }
}

@media screen and (max-width: 480px) {
  .analytics-line .medium {
    font-size: 20px;
    line-height: 1.4;
  }

  .analytics-line .around {
    width: 180%;
    height: 180%;
  }
}

@media screen and (max-width: 768px) {
  .intro-two {
    width: 100%;
    padding: 0 var(--spacing-03);
  }

  .intro-two video {
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-04);
    max-width: 100%;
    display: block;
  }

  .intro-two .medium {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .intro-ext {
    width: 100%;
    gap: var(--spacing-05);
  }

  .intro-one {
    width: 100%;
    padding-top: var(--spacing-06);
  }
}

@media screen and (max-width: 480px) {
  .intro-two {
    padding: 0;
  }

  .intro-two video {
    margin-bottom: var(--spacing-03);
  }

  .intro-two .medium {
    font-size: 20px;
    line-height: 1.4;
  }
}

@media screen and (max-width: 768px) {
  .standard-one, .standard-two {
    margin: 0 !important;
    border-radius: 10px !important;
    border-style: solid !important;
    border-color: var(--ui-03, #d3d3d3) !important;
    border-width: 1px !important;
    padding: var(--spacing-05, 16px) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    text-align: left !important;
  }

  .standard-one .medium, .standard-two .medium {
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .standard-group {
    flex-direction: column !important;
    gap: var(--spacing-05) !important;
    width: 100% !important;
    height: auto !important;
  }
}

@media screen and (max-width: 768px) {
  .intro-two {
    width: 100%;
    padding: 0 var(--spacing-03);
  }

  .intro-two video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: var(--spacing-04);
    display: block !important;
    object-fit: contain !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media screen and (max-width: 480px) {
  .intro-two {
    padding: 0;
  }

  .intro-two video {
    margin-bottom: var(--spacing-03);
  }
}

@media screen and (max-width: 768px) {
  .imp-01 .medium, .imp-02 .medium, .standard-one .medium, .standard-two .medium {
    font-size: 20px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
}

.mobile-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-only {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .div {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  .stonks-text {
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .stonks-text-01, 
  .stonks-text-02, 
  .stonks-text-03, 
  .stonks-text-04 {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: var(--spacing-05);
  }

  .content {
    height: auto;
    overflow: visible;
    padding: 0 var(--spacing-03);
    width: 100%;
    max-width: 710px;
    gap: var(--spacing-06);
  }
}

@media screen and (max-width: 768px) {
  .stonks {
    position: relative;
    width: 100%;
    overflow: visible;
  }

  .stonks-text {
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .stonks-text-01, 
  .stonks-text-02, 
  .stonks-text-03, 
  .stonks-text-04 {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: var(--spacing-05);
  }
}

@media screen and (max-width: 768px) {
  .hill {
    display: none;
  }
}

.hill-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .hill-mobile {
    display: block;
    width: 385px;
    height: 209px;
    margin: var(--spacing-06) 0;
    position: relative;
  }

  .hill-mobile img:not(.pretty-face-mobile):not(.rmn-mobile) {
    width: 100%;
    height: auto;
  }

  .pretty-face-mobile,
  .rmn-mobile {
    display: block;
    position: absolute;
    z-index: 2;
  }

  .pretty-face-mobile {
    width: 80px;
    height: auto;
    bottom: 160px;
    right: 165px;
  }

  .rmn-mobile {
    width: 160px;
    height: auto;
    bottom: 120px;
    right: 75px;
  }
}

.def-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .def-mobile {
    display: block;
    position: absolute;
    width: 96px;
    height: 82px;
    bottom: 200px;
    left: 280px;
    z-index: 1;
  }
}

.hill-text-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .hill-text-mobile {
    display: block;
    position: absolute;
    color: var(--text-01, #000000);
    width: 60%;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    font-size: 20px;
    line-height: 1.4;
    text-align: right;
  }
}

/* CTA Section */
.cta-section {
  margin-bottom: var(--spacing-09);
  max-width: 850px;
}

.form-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: -0.019em;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-03);
}

.cta-button {
  background: var(--color-text);
  color: var(--color-background);
  padding: var(--spacing-04);
  border-radius: var(--border-radius-sm);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  border: none;
  transition: transform 0.2s;
}

.cta-button:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .cta-button {
    font-size: 36px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .form-label {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: -0.019em;
  }
}

/* Footer */
footer {
  margin-top: 0;
  margin-left: calc(-1 * var(--spacing-06));
  margin-right: calc(-1 * var(--container-padding));
  background: var(--color-background);
}

.footer-links {
  display: flex;
  gap: var(--spacing-02);
  align-items: center;
  padding: var(--spacing-06);
  padding-left: var(--spacing-06);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

@media (max-width: 875px) {
  footer {
    margin-left: calc(-1 * var(--spacing-06));
    margin-right: calc(-1 * var(--container-padding));
  }
}

@media (max-width: 768px) {
  footer {
    margin-left: calc(-1 * var(--spacing-06));
    margin-right: calc(-1 * var(--container-padding));
  }
}

@media (max-width: 480px) {
  footer {
    margin-left: calc(-1 * var(--spacing-03));
    margin-right: calc(-1 * var(--spacing-03));
  }

  .footer-links {
    padding-left: var(--spacing-03);
  }
}

.video-squat {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .video-squat {
    width: 100%;
    max-width: 100vw;
    height: auto;
  }
}

.now-fixed {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  background: #fff;
  color: var(--color-now);
  border-radius: 24px;
  padding: 10px 24px 10px 16px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-02);
}

.now-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-now);
  margin-right: 4px;
  vertical-align: middle;
  animation: now-blink 1.2s infinite ease-in-out;
}

@keyframes now-blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

@media (max-width: 600px) {
  .now-fixed {
    top: 12px;
    right: 12px;
    font-size: 15px;
    padding: 7px 14px 7px 10px;
  }
  .now-dot {
    width: 8px;
    height: 8px;
    margin-right: 6px;
  }
}

.strike-now {
  color: var(--color-text);
  text-decoration: line-through;
  text-decoration-color: var(--color-now);
  text-decoration-thickness: 2px;
}

#example-toggle {
  border-bottom: 2px dashed var(--color-now);
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 768px) {
  .now-fixed {
    display: none !important;
  }
}