:root {
  --green: #cbff62;
  --blue: #daeeff;
  --card-blue: #e6f0ff;
  --black: #000000;
  --gray: #494949;
  --line: #a2a2a2;
  --input: #d5d5d5;
}

@font-face {
  font-family: "Lack";
  src: url("./assets/fonts/lack-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/Geist-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/Geist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/Geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/Geist-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/Manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--black);
  font-family: "Geist", Arial, sans-serif;
}

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

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

button,
input {
  font: inherit;
}

.desktop-frame {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 45px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
}

.desktop-head {
  width: 1274px;
  height: 52px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.desktop-logo {
  width: 165px;
  height: 32px;
}

.figma-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 14px;
  font-weight: 500;
}

.header-button {
  width: 193px;
  height: 44px;
  font-size: 16px;
}

.desktop-hero {
  position: relative;
  height: 761px;
  overflow: hidden;
}

.hero-person {
  position: absolute;
  left: 826px;
  top: 37px;
  width: 542px;
  height: 679px;
  object-fit: cover;
}

.highlight {
  position: absolute;
  display: block;
  background: var(--green);
  border-radius: 4px;
}

.round-button {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 7px 13px 7px 21px;
  border: 1px solid #000;
  border-radius: 66px;
  background: #000;
  color: #fff;
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  line-height: 27px;
  white-space: nowrap;
}

.round-button img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.hero-button {
  position: absolute;
  left: 662px;
  top: 17px;
  width: 362px;
  font-size: 24px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.desktop-hero h1 {
  position: absolute;
  left: 83px;
  top: 37px;
  width: 884px;
  font-family: "Lack", Arial, sans-serif;
  font-size: 80px;
  line-height: 70px;
  font-weight: 400;
  letter-spacing: 0;
  z-index: 1;
}

.hero-word-highlight {
  position: relative;
  isolation: isolate;
}

.hero-word-highlight::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -24px;
  bottom: -15px;
  height: 44px;
  border-radius: 4px;
  background: var(--green);
  z-index: -1;
}

.hero-text {
  position: absolute;
  left: 94px;
  top: 289px;
  width: 713px;
  font-size: 28px;
  font-weight: 500;
  line-height: normal;
}

.hero-stat {
  position: absolute;
  width: 340px;
  height: 160px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 40px;
}

.hero-stat b {
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
}

.hero-stat span {
  font-size: 22px;
}

.stat-income {
  left: 105px;
  top: 480px;
  transform: rotate(10.46deg);
}

.stat-workers {
  left: 410px;
  top: 520px;
  transform: rotate(-11.59deg);
}

.desktop-about {
  position: relative;
  height: 1103px;
  overflow: hidden;
}

.desktop-about h2,
.desktop-steps h2,
.desktop-benefits h2,
.desktop-no-invest h2,
.faq-section h2 {
  position: absolute;
  font-family: "Lack", Arial, sans-serif;
  font-weight: 400;
  font-size: 74px;
  line-height: 83px;
  text-align: center;
}

.desktop-about h2 {
  left: 115px;
  top: 50px;
  width: 1210px;
}

.about-highlight {
  left: 609px;
  top: 182px;
  width: 739px;
  height: 36px;
}

.blue-card {
  position: absolute;
  background: var(--card-blue);
  border-radius: 40px;
  overflow: hidden;
}

.blue-card p,
.blue-card li {
  font-size: 20px;
  line-height: normal;
}

.blue-card ul {
  margin: 14px 0 0;
  padding-left: 50px;
}

.figma-icon {
  position: absolute;
  object-fit: contain;
}

.icon-wallet {
  left: 20px;
  top: 20px;
  width: 30px;
  height: 23px;
}

.icon-cards {
  left: 20px;
  top: 20px;
  width: 38px;
  height: 26px;
}

.icon-checklist {
  left: 20px;
  top: 20px;
  width: 36px;
  height: 31px;
}

.icon-worker {
  left: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
}

.icon-growth {
  left: 20px;
  top: 20px;
  width: 31px;
  height: 31px;
}

.about-card-1 {
  left: 94px;
  top: 274px;
  width: 428px;
  height: 557px;
}

.about-card-1 p {
  position: absolute;
  left: 20px;
  top: 59px;
  width: 360px;
}

.about-card-1 .card-visual {
  position: absolute;
  left: 9px;
  top: 278px;
  width: 410px;
  height: 279px;
  object-fit: cover;
}

.about-card-2 {
  left: 542px;
  top: 274px;
  width: 826px;
  height: 252px;
}

.about-card-2 p {
  position: absolute;
  left: 20px;
  top: 62px;
  width: 752px;
}

.about-card-3 {
  left: 542px;
  top: 547px;
  width: 399px;
  height: 284px;
}

.about-card-3 p {
  margin: 66px 20px 0;
}

.about-card-4 {
  left: 969px;
  top: 547px;
  width: 399px;
  height: 284px;
}

.about-card-4 p {
  margin: 76px 20px 0;
}

.about-card-5 {
  left: 94px;
  top: 851px;
  width: 857px;
  height: 252px;
}

.about-card-5 p {
  position: absolute;
  left: 20px;
  top: 67px;
  width: 490px;
}

.about-card-5 .rating-visual {
  position: absolute;
  left: 527px;
  top: 9px;
  width: 291px;
  height: 234px;
  object-fit: cover;
}

.green-cta {
  position: absolute;
  background: var(--green);
  border-radius: 40px;
  overflow: hidden;
}

.about-cta {
  left: 969px;
  top: 851px;
  width: 399px;
  height: 252px;
}

.about-cta p {
  position: absolute;
  left: 36px;
  top: 36px;
  width: 306px;
  font-size: 24px;
  font-weight: 600;
}

.cta-button {
  position: absolute;
  left: 36px;
  top: 155px;
  width: 323px;
  font-size: 24px;
}

.desktop-steps,
.desktop-benefits,
.registration-section,
.state-screen {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, var(--blue) 21.122%, var(--green) 95.115%);
}

.desktop-steps {
  height: 938px;
}

.notch {
  position: absolute;
  width: 195px;
  height: 74px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center;
}

.notch.top {
  top: 0;
  transform: translateX(-50%) rotate(180deg);
}

.notch.bottom {
  bottom: 0;
}

.desktop-steps h2 {
  left: 0;
  top: 124px;
  width: 100%;
}

.steps-subtitle {
  position: absolute;
  left: 0;
  top: 314px;
  width: 100%;
  color: #494949;
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.step-line {
  position: absolute;
  inset: 0;
}

.step-card {
  position: absolute;
  width: 192px;
}

.step-card b {
  display: block;
  font-size: 74px;
  line-height: 83px;
  font-weight: 500;
}

.step-card p {
  font-size: 24px;
  line-height: normal;
  margin-top: 22px;
}

.step-1 {
  left: 97px;
  top: 406px;
}

.step-2 {
  left: 486px;
  top: 406px;
}

.step-3 {
  left: 875px;
  top: 406px;
  width: 286px;
}

.step-4 {
  left: 1266px;
  top: 406px;
  width: 102px;
}

.step-5 {
  left: 338px;
  top: 647px;
}

.step-6 {
  left: 731px;
  top: 647px;
}

.step-arrow {
  position: absolute;
  width: 184px;
  height: 2px;
  background: #000;
}

.step-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: translateY(-50%) rotate(45deg);
}

.arrow-1 {
  left: 244px;
  top: 448px;
}

.arrow-2 {
  left: 635px;
  top: 448px;
}

.arrow-3 {
  left: 1025px;
  top: 448px;
}

.arrow-4 {
  left: 97px;
  top: 689px;
}

.arrow-5 {
  left: 489px;
  top: 689px;
}

.steps-button {
  position: absolute;
  left: 945px;
  top: 744px;
  width: 423px;
  font-size: 24px;
}

.desktop-growth {
  position: relative;
  padding: 50px 94px 80px;
}

.desktop-audience {
  position: relative;
  height: 1377px;
  padding: 0;
  overflow: hidden;
}

.desktop-audience h2,
.desktop-income h2,
.desktop-growth h2 {
  font-family: "Lack", Arial, sans-serif;
  font-size: 74px;
  line-height: 83px;
  text-align: center;
  font-weight: 400;
}

.desktop-audience h2 {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
}

.audience-highlight {
  left: 635px;
  top: 98px;
  width: 380px;
  height: 40px;
}

.audience-copy {
  position: absolute;
  left: 94px;
  top: 187px;
  width: 605px;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  text-align: left;
}

.audience-tabs {
  position: absolute;
  inset: 0;
}

.audience-tab {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 310px;
  height: 86px;
  border: 1px solid #000;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

.audience-tab.active {
  background: var(--green);
  border-color: var(--green);
}

.tab-1 {
  left: 723px;
  top: 187px;
}

.tab-2 {
  left: 1059px;
  top: 187px;
}

.tab-3 {
  left: 723px;
  top: 287px;
}

.tab-4 {
  left: 1059px;
  top: 287px;
}

.audience-cards {
  position: absolute;
  left: 94px;
  top: 427px;
  display: flex;
  gap: 21px;
}

.profile-card {
  position: relative;
  min-height: 552px;
  padding: 16px 18px 24px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 20px;
  overflow: hidden;
}

.audience-cards .profile-card {
  width: 411px;
  height: 900px;
  min-height: 0;
  padding: 0;
  border-radius: 40px;
}

.profile-media {
  position: absolute;
  left: 0;
  top: 0;
  width: 411px;
  height: 467px;
  overflow: hidden;
}

.profile-media-bg {
  position: absolute;
  left: 31px;
  top: 136px;
  width: 347px;
  height: 234px;
  border-radius: 42px;
  background: var(--blue);
}

.audience-cards .profile-person {
  position: absolute;
  max-width: none;
}

.person-mask {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.student-mask {
  left: 36px;
  top: 26px;
  width: 342px;
  height: 344px;
}

.mom-mask {
  left: 59px;
  top: 26px;
  width: 304px;
  height: 344px;
}

.pensioner-mask {
  left: 47px;
  top: 26px;
  width: 305px;
  height: 344px;
}

.student-mask .profile-person {
  left: -48.52%;
  top: -10.75%;
  width: 177.36%;
  height: 142.11%;
}

.mom-mask .profile-person {
  left: -47.72%;
  top: -10.73%;
  width: 187.54%;
  height: 133.25%;
}

.pensioner-mask .profile-person {
  left: -47.73%;
  top: -8.36%;
  width: 203.02%;
  height: 145.13%;
}

.profile-card > img {
  width: 100%;
  height: 212px;
  object-fit: cover;
  object-position: top;
  border-radius: 26px;
  background: var(--blue);
}

.corner-arrow {
  position: absolute;
  left: 327px;
  top: 19px;
  display: block;
  width: 63px;
  height: 63px;
  line-height: 0;
  border-radius: 50%;
  overflow: hidden;
}

.corner-arrow img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.profile-copy {
  position: absolute;
  left: 29px;
  top: 388px;
  width: 351px;
  color: #000;
}

.audience-cards .profile-card h3 {
  margin: 0 0 18px;
  font-size: 32px;
  font-weight: 600;
  line-height: normal;
}

.audience-cards .profile-card p,
.audience-cards .profile-card li {
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}

.audience-cards .profile-card b {
  display: block;
  margin-top: 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}

.audience-cards .profile-card ul {
  margin: 0 0 18px;
  padding-left: 27px;
}

.desktop-income {
  position: relative;
  height: 560px;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.desktop-income h2 {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  z-index: 1;
}

.income-highlight {
  left: 50%;
  top: 180px;
  width: 623px;
  height: 40px;
  transform: translateX(-50%);
}

.income-copy {
  position: absolute;
  left: 83px;
  top: 324px;
  width: 516px;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.income-copy p {
  margin: 0;
}

.income-copy b {
  display: block;
  margin-top: 28px;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
}

.income-bar {
  position: absolute;
  background: linear-gradient(158deg, var(--blue) 21.122%, var(--green) 95.115%);
}

.income-bar b {
  position: absolute;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}

.income-bar p {
  position: absolute;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
  text-align: left;
}

.income-dollar {
  position: absolute;
  top: -40px;
  right: 14px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.income-bar-start {
  left: 636px;
  top: 391px;
  width: 239px;
  height: 119px;
  border-radius: 12px 12px 0 12px;
}

.income-bar-start b {
  left: 21px;
  top: 24px;
}

.income-bar-start p {
  left: 21px;
  top: 53px;
  width: 187px;
  line-height: 99.795%;
}

.income-bar-middle {
  left: 881px;
  top: 337px;
  width: 240px;
  height: 173px;
  border-radius: 12px 12px 0 0;
}

.income-bar-middle b {
  left: 35px;
  top: 78px;
}

.income-bar-middle p {
  left: 21px;
  top: 107px;
  width: 209px;
}

.income-bar-regular {
  left: 1129px;
  top: 266px;
  width: 239px;
  height: 244px;
  border-radius: 12px 12px 12px 0;
}

.income-bar-regular b {
  left: 20px;
  top: 149px;
}

.income-bar-regular p {
  left: 20px;
  top: 178px;
  width: 184px;
}

.desktop-growth {
  position: relative;
  height: 768px;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.desktop-growth h2 {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  z-index: 1;
}

.growth-highlight {
  left: 667px;
  top: 97px;
  width: 558px;
  height: 40px;
}

.growth-step {
  position: absolute;
  width: 300px;
  height: 170px;
  border-radius: 20px;
  background: var(--green);
}

.growth-step b {
  position: absolute;
  left: 20px;
  top: 16px;
  font-size: 74px;
  font-weight: 500;
  line-height: 83px;
}

.growth-step p {
  position: absolute;
  left: 20px;
  top: 123px;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.growth-step-1 {
  left: 94px;
  top: 270px;
}

.growth-step-2 {
  left: 419px;
  top: 454px;
}

.growth-step-3 {
  left: 744px;
  top: 266px;
}

.growth-step-4 {
  left: 1069px;
  top: 454px;
}

.growth-step-4 p {
  top: 102px;
  width: 269px;
  line-height: 26px;
}

.growth-curve {
  position: absolute;
  width: 116px;
  height: 118px;
  border-color: #000;
  border-style: solid;
  border-width: 0;
}

.growth-curve::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.curve-1 {
  left: 260px;
  top: 426px;
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-radius: 0 0 0 92px;
}

.curve-1::after {
  right: -1px;
  bottom: -9px;
  transform: rotate(45deg);
}

.curve-2 {
  left: 586px;
  top: 318px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-radius: 92px 0 0 0;
}

.curve-2::after {
  right: -1px;
  top: -9px;
  transform: rotate(45deg);
}

.curve-3 {
  left: 909px;
  top: 426px;
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-radius: 0 0 0 92px;
}

.curve-3::after {
  right: -1px;
  bottom: -9px;
  transform: rotate(45deg);
}

.growth-note {
  position: absolute;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
}

.growth-note-left {
  left: 94px;
  top: 674px;
  width: 564px;
}

.growth-note-right {
  left: 1069px;
  top: 266px;
  width: 300px;
}

.growth-note-bottom {
  left: 744px;
  top: 674px;
  width: 378px;
}

.desktop-benefits {
  height: 805px;
}

.desktop-benefits h2 {
  left: 0;
  top: 124px;
  width: 100%;
}

.benefit-cards {
  position: absolute;
  inset: 0;
}

.benefit-card {
  position: absolute;
  width: 300px;
  height: 157px;
  margin: 0;
  border-radius: 20px;
  background: #fff;
}

.benefit-card img {
  position: absolute;
  left: 20px;
  top: 20px;
  object-fit: contain;
}

.benefit-card p {
  position: absolute;
  left: 20px;
  margin: 0;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}

.benefit-card-time {
  left: 94px;
  top: 330px;
}

.benefit-card-home {
  left: 419px;
  top: 330px;
}

.benefit-card-rocket {
  left: 744px;
  top: 330px;
}

.benefit-card-percent {
  left: 1069px;
  top: 330px;
}

.benefit-card-growth {
  left: 419px;
  top: 512px;
}

.benefit-card-road {
  left: 744px;
  top: 512px;
}

.benefit-card-device {
  left: 1069px;
  top: 512px;
}

.benefit-card-time p,
.benefit-card-growth p,
.benefit-card-road p {
  top: 91px;
  width: 234px;
}

.benefit-card-home p,
.benefit-card-rocket p,
.benefit-card-percent p,
.benefit-card-device p {
  top: 114px;
  white-space: nowrap;
}

.benefit-card-road p {
  width: 257px;
}

.benefit-card-time img {
  width: 38px;
  height: 41px;
}

.benefit-card-home img {
  width: 39px;
  height: 37px;
}

.benefit-card-rocket img {
  width: 44px;
  height: 32px;
}

.benefit-card-percent img {
  width: 38px;
  height: 29px;
}

.benefit-card-growth img {
  width: 35px;
  height: 35px;
}

.benefit-card-road img {
  width: 29px;
  height: 36px;
}

.benefit-card-device img {
  width: 24px;
  height: 37px;
}

.benefits-button {
  position: absolute;
  left: 94px;
  top: 611px;
  width: 300px;
  gap: 43px;
  font-size: 20px;
  padding-left: 44px;
}

.benefits-button img {
  width: 44px;
  height: 44px;
}

.desktop-no-invest {
  position: relative;
  height: 844px;
  overflow: hidden;
}

.desktop-no-invest h2 {
  left: 0;
  top: 50px;
  width: 100%;
}

.no-invest-highlight {
  left: 868px;
  top: 97px;
  width: 529px;
  height: 40px;
}

.desktop-no-invest p {
  position: absolute;
  font-size: 18px;
  line-height: normal;
}

.ni-left {
  left: 94px;
  top: 266px;
  width: 345px;
}

.ni-right {
  left: 1089px;
  top: 266px;
  width: 279px;
}

.ni-center {
  left: 408px;
  top: 417px;
  width: 624px;
  font-size: 32px !important;
  font-weight: 600;
  text-align: center;
}

.ni-bottom {
  left: 348px;
  top: 657px;
  width: 368px;
}

.ni-shadow {
  position: absolute;
  left: 952px;
  top: 747px;
  width: 447px;
  height: 49px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.16) 35%, rgba(0, 0, 0, 0) 72%);
  filter: blur(8px);
}

.ni-person {
  position: absolute;
  left: 938px;
  top: 411px;
  width: 430px;
  height: 379px;
  object-fit: cover;
}

.ni-arrow-piece {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  transform-origin: center;
}

.ni-left-line {
  left: 483.53px;
  top: 289.38px;
  width: 68px;
  height: 125px;
  transform: rotate(147.98deg) skewX(0.25deg) scaleY(-1);
}

.ni-left-head {
  left: 456.8px;
  top: 309.86px;
  width: 17px;
  height: 16px;
  transform: rotate(-136.25deg) skewX(-0.34deg) scaleY(-1);
}

.ni-right-line {
  left: 1090.38px;
  top: 312.95px;
  width: 65px;
  height: 154px;
  transform: rotate(-106.73deg) skewX(-0.07deg) scaleY(-1);
}

.ni-right-head {
  left: 1176.73px;
  top: 337.79px;
  width: 17px;
  height: 16px;
  transform: rotate(-30.59deg) skewX(0.11deg) scaleY(-1);
}

.ni-bottom-line {
  left: 475.69px;
  top: 517.9px;
  width: 32px;
  height: 115px;
  transform: rotate(27.62deg) skewX(0.16deg) scaleY(-1);
}

.ni-bottom-head {
  left: 466.02px;
  top: 615.22px;
  width: 17px;
  height: 16px;
  transform: rotate(18.09deg) skewX(-0.53deg);
}

.registration-section {
  height: 845px;
}

.registration-section .notch.bottom {
  left: calc(50% - 20.5px);
}

.form-shadow {
  position: absolute;
  left: -7.4px;
  top: 486.6px;
  width: 908.8px;
  height: 345.8px;
  max-width: none;
  pointer-events: none;
}

.form-people-wrap {
  position: absolute;
  left: 94px;
  top: -30px;
  width: 894px;
  height: 794px;
  overflow: hidden;
  pointer-events: none;
}

.form-people {
  position: absolute;
  left: -92px;
  top: 0;
  width: 986px;
  height: 794px;
  max-width: none;
}

.lead-card {
  position: absolute;
  left: 729px;
  top: 116px;
  width: 639px;
  height: 613px;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 30px;
}

.lead-card h2 {
  position: absolute;
  left: 25px;
  top: 34px;
  width: 560px;
  font-size: 32px;
  line-height: 32px;
  font-weight: 500;
}

.lead-card > p,
.lead-subtitle {
  position: absolute;
  left: 27px;
  top: 110px;
  width: 579px;
  margin: 0;
  color: #7c7c7c;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.lead-card label {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.lead-card .lead-field {
  position: absolute;
  left: 25px;
  width: 581px;
}

.lead-field-name {
  top: 180px;
}

.lead-field-phone {
  top: 282px;
}

.lead-field-email {
  top: 384px;
}

.lead-card input {
  width: 581px;
  height: 41px;
  padding: 6px 16px;
  border: 1px solid var(--input);
  border-radius: 10px;
  color: #000;
}

.lead-card input::placeholder {
  color: #cdcdcd;
}

.lead-card button {
  position: absolute;
  left: 26px;
  top: 502px;
  width: 580px;
  height: 50px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 14px;
  background: #000;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
}

.lead-card small {
  position: absolute;
  left: 27px;
  top: 558px;
  display: block;
  margin: 0;
  width: 499px;
  color: #a5a5a5;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.faq-section {
  position: relative;
  height: 742px;
}

.faq-section h2 {
  left: 0;
  top: 50px;
  width: 100%;
}

.faq-highlight {
  left: 640px;
  top: 92px;
  width: 160px;
  height: 40px;
}

.faq-list {
  position: absolute;
  left: 94px;
  top: 187px;
  width: 1274px;
}

.faq-list details {
  border-top: 1px solid var(--line);
  background: #fff;
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 107px;
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 0 90px 0 24px;
  font-size: 24px;
  font-weight: 600;
}

.faq-list summary::after {
  content: "+";
  margin-left: auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  font-size: 34px;
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: "×";
  background: #000;
  color: #fff;
}

.faq-list p {
  padding: 0 24px 36px;
  font-size: 24px;
  font-weight: 300;
}

.desktop-footer {
  height: 142px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 94px;
  background: var(--green);
}

.desktop-footer img {
  width: 165px;
  height: 32px;
}

.desktop-footer p {
  font-size: 24px;
  font-weight: 300;
}

.mobile-frame,
.mobile-menu,
.state-screen {
  display: none;
}

.state-screen {
  min-height: 845px;
}

.state-screen.active {
  display: block;
}

.desktop-error {
  padding: 116px 72px;
}

.desktop-error > img {
  position: absolute;
  left: 86px;
  top: -30px;
  width: 894px;
}

.desktop-success {
  padding-top: 318px;
  text-align: center;
}

.desktop-success h2 {
  font-size: 64px;
  line-height: 70px;
  font-weight: 500;
}

.desktop-success p {
  margin-top: 20px;
  color: var(--gray);
  font-size: 32px;
  font-weight: 500;
}

.error-state input.invalid {
  border-color: red;
}

.error-state em {
  color: red;
  font-size: 12px;
  font-style: normal;
  line-height: 12px;
}

@media (max-width: 767px) {
  body {
    background: #fff;
  }

  .desktop-frame {
    display: none;
  }

  .mobile-frame {
    width: min(100%, 360px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
  }

  .mobile-head {
    height: 67px;
    padding: 16px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }

  .mobile-head img {
    width: 115px;
    height: 22.3px;
  }

  .menu-open {
    width: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    gap: 5px;
    cursor: pointer;
  }

  .menu-open span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #000;
  }

  .mobile-hero {
    position: relative;
    height: 718px;
    overflow: hidden;
  }

  .mobile-hero h1 {
    position: absolute;
    left: 26px;
    top: 16px;
    font-family: "Lack", Arial, sans-serif;
    font-size: 40px;
    line-height: 40px;
    font-weight: 400;
  }

  .mobile-highlight {
    position: absolute;
    left: 35px;
    top: 120px;
    width: 290px;
    height: 20px;
    border-radius: 2px;
    background: var(--green);
  }

  .mobile-hero p {
    position: absolute;
    left: 26px;
    top: 148px;
    width: 309px;
    font-size: 14px;
    line-height: normal;
  }

  .mobile-round {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    height: 36px;
    padding: 7px 13px 7px 21px;
    border-radius: 66px;
    background: #000;
    color: #fff;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .mobile-round img {
    width: 28px;
    height: 28px;
  }

  .mobile-hero .mobile-round {
    position: absolute;
    left: 97px;
    top: 232px;
    width: 224px;
    z-index: 2;
  }

  .mobile-hero-person {
    position: absolute;
    left: 26px;
    top: 250px;
    width: 309px;
    height: 387px;
    object-fit: cover;
  }

  .mobile-stat {
    position: absolute;
    width: 175px;
    height: 82px;
    padding: 12px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 18px;
  }

  .mobile-stat b {
    display: block;
    font-size: 24px;
    font-weight: 600;
  }

  .mobile-stat span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
  }

  .m-stat-1 {
    left: 18px;
    top: 558px;
    transform: rotate(10.46deg);
  }

  .m-stat-2 {
    left: 158px;
    top: 586px;
    transform: rotate(-11.6deg);
  }

  .mobile-about {
    position: relative;
    height: 663px;
  }

  .mobile-about h2,
  .mobile-steps h2,
  .mobile-audience h2,
  .mobile-no-invest h2,
  .mobile-faq h2 {
    font-family: "Lack", Arial, sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    text-align: center;
  }

  .mobile-about h2 {
    position: absolute;
    left: 25px;
    top: 16px;
    width: 309px;
  }

  .mobile-blue {
    position: absolute;
    left: 25px;
    top: 126px;
    width: 285px;
    height: 351px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--card-blue);
  }

  .mobile-blue p {
    margin: 39px 12px 0;
    font-size: 12px;
    line-height: normal;
  }

  .mobile-blue img {
    position: absolute;
    left: 8px;
    top: 171px;
    width: 270px;
    height: 184px;
    object-fit: cover;
  }

  .mobile-green {
    position: absolute;
    left: 25px;
    top: 513px;
    width: 310px;
    height: 134px;
    padding: 20px;
    border-radius: 20px;
    background: var(--green);
  }

  .mobile-green b {
    display: block;
    width: 195px;
    font-size: 18px;
    line-height: normal;
  }

  .mobile-green .mobile-round {
    margin-top: 16px;
    width: 189px;
  }

  .mobile-steps {
    position: relative;
    height: 524px;
    background: linear-gradient(137deg, var(--blue) 21.122%, var(--green) 95.115%);
  }

  .mobile-frame .notch {
    width: 91px;
    height: 35px;
  }

  .mobile-steps h2 {
    position: absolute;
    left: 25px;
    top: 59px;
    width: 309px;
  }

  .mobile-steps > p {
    position: absolute;
    left: 54px;
    top: 121px;
    width: 253px;
    color: var(--gray);
    font-size: 14px;
    text-align: center;
  }

  .mobile-steps ol {
    position: absolute;
    left: 25px;
    top: 173px;
    width: 310px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-steps li {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #000;
  }

  .mobile-steps b {
    font-size: 32px;
    font-weight: 300;
  }

  .mobile-steps span {
    font-size: 12px;
  }

  .mobile-steps .mobile-round {
    position: absolute;
    left: 58px;
    top: 437px;
    width: 244px;
  }

  .mobile-audience {
    padding: 16px 25px;
  }

  .mobile-audience > p {
    margin: 16px 0;
    font-size: 12px;
    line-height: normal;
  }

  .mobile-audience .profile-card {
    min-height: 0;
    margin-bottom: 16px;
    padding: 18px;
  }

  .mobile-audience .profile-card > img {
    height: 180px;
  }

  .mobile-no-invest {
    position: relative;
    min-height: 480px;
    padding: 16px 25px;
    overflow: hidden;
  }

  .mobile-no-invest p {
    width: 186px;
    margin-top: 24px;
    font-size: 12px;
  }

  .mobile-no-invest b {
    display: block;
    width: 187px;
    margin: 28px auto;
    font-size: 14px;
    line-height: 1.16;
    text-align: center;
  }

  .mobile-no-invest img {
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 241px;
  }

  .mobile-registration {
    position: relative;
    height: 736px;
    background: linear-gradient(128deg, var(--blue) 21.122%, var(--green) 95.115%);
  }

  .m-form-people {
    position: absolute;
    left: 26px;
    top: -57px;
    width: 297px;
    height: 317px;
    object-fit: cover;
  }

  .m-lead-card {
    position: absolute;
    left: 25px;
    top: 200px;
    width: 310px;
    height: 485px;
    padding: 34px 25px;
    border: 0;
    border-radius: 20px;
    background: #fff;
  }

  .m-lead-card h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
  }

  .m-lead-card p {
    margin-top: 6px;
    color: #7c7c7c;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
  }

  .m-lead-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 27px;
  }

  .m-lead-card input {
    height: 40px;
    padding: 6px 16px;
    border: 1px solid var(--input);
    border-radius: 10px;
  }

  .m-lead-card button {
    width: 285px;
    height: 38px;
    margin-top: 12px;
    border: 1px solid #000;
    border-radius: 14px;
    background: #000;
    color: #fff;
    font-size: 14px;
  }

  .m-lead-card small {
    display: block;
    margin-top: 8px;
    color: #a5a5a5;
    font-size: 10px;
    line-height: 14px;
  }

  .mobile-faq {
    padding: 16px 26px;
  }

  .mobile-faq details {
    border-top: 1px solid var(--line);
  }

  .mobile-faq details:last-child {
    border-bottom: 1px solid var(--line);
  }

  .mobile-faq summary {
    min-height: 40px;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .mobile-faq p {
    width: 211px;
    padding-bottom: 12px;
    font-size: 12px;
    font-weight: 300;
  }

  .mobile-footer {
    min-height: 70px;
    padding: 24px 16px;
    background: var(--green);
  }

  .mobile-footer img {
    width: 115px;
  }

  .mobile-footer p {
    margin-top: 10px;
    font-size: 10px;
    font-weight: 300;
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.2);
  }

  .mobile-menu.is-open {
    display: block;
  }

  .mobile-menu-panel {
    width: min(100%, 360px);
    margin: 0 auto;
    padding: 16px 25px;
    background: #fff;
  }

  .mobile-menu-panel img {
    width: 310px;
    height: 44px;
    margin-bottom: 10px;
  }

  .mobile-menu-panel a:not(.figma-button) {
    display: block;
    width: 309px;
    padding: 6px 0;
    font-size: 14px;
  }

  .menu-register {
    width: 310px;
    height: 28px;
    margin-top: 6px;
    border-radius: 6px;
    font-size: 14px;
  }

  .mobile-error,
  .mobile-success {
    width: 360px;
    min-height: 470px;
    margin: 0 auto;
  }

  .mobile-success {
    padding-top: 67px;
    text-align: center;
    background: linear-gradient(140deg, var(--blue) 21.122%, var(--green) 95.115%);
  }

  .mobile-success h2 {
    width: 349px;
    margin: 0 auto;
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
  }

  .mobile-success p {
    margin-top: 12px;
    color: var(--gray);
    font-size: 18px;
    font-weight: 500;
  }

  .mobile-success img {
    width: 352px;
    margin: 28px auto 0;
  }
}