.home-desktop {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.home-desktop .navbar {
  display: flex;
  flex-direction: column;
  width: 1920px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--color-schemes-color-scheme-1-background);
}

.home-desktop .header {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-around;
  padding: 0px var(--spacing-sizing-page-padding-padding-global) 0px
    var(--spacing-sizing-page-padding-padding-global);
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: transparent;
}

.home-desktop .container {
  justify-content: space-between;
  flex: 1;
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.home-desktop .column {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .company-logo {
  position: relative;
  width: 84px;
  height: 36px;
}

.home-desktop .div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .column-2 {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  margin-left: -2.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-black);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .link {
  display: flex;
  flex-direction: column;
  width: 94px;
  align-items: flex-start;
  position: relative;
}

.home-desktop .nav-link-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .link-text {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  margin-left: -6.50px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .chevron-down {
  position: relative;
  width: 24px;
  height: 24px;
  margin-right: -6.50px;
}

.home-desktop .actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  margin-left: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-black);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);

  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);
}

.home-desktop .button-2w {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  margin-left: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
  border: 1px solid;
  border-color: var(--primitives-color-white);
}

.home-desktop .button-2 {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  margin-left: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-black);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
  border: 1px solid;
  border-color: var(--primitives-color-black);
}

.home-desktop .button-blackbg {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10.5px 20px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  margin-right: -2.00px;
  margin-left: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
  background-color: var(--primitives-color-neutral-darkest);
  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);
}
.home-desktop .button-11 {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  margin-left: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-black);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);

  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);
}
.home-desktop .button-22 {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13.5px 20px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  margin-right: -2.00px;
  margin-left: 00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
  background-color: var(--primitives-color-neutral-darkest);
  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);
}

.home-desktop .button-3 {
  all: unset;
  box-sizing: border-box;
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  margin-left: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .content-wrapper {
  display: flex;
  flex-direction: column;
  width: 1800px;
  height: 1000px;
  align-items: center;
  gap: 80px;
  position: relative;
  background-color: var(--color-schemes-color-scheme-1-background);
}

.home-desktop .content {
  display: flex;
  align-items: flex-start;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.home-desktop .div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  padding: 0px 80px 0px var(--spacing-sizing-page-padding-padding-global);
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.home-desktop .content-2 {
  display: flex;
  flex-direction: column;
  max-width: var(--spacing-sizing-max-width-max-width-medium);
  align-items: flex-start;
  gap: 32px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .content-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .medium-length-hero {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--heading-h1-font-family);
  font-weight: var(--heading-h1-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-h1-font-size);
  letter-spacing: var(--heading-h1-letter-spacing);
  line-height: var(--heading-h1-line-height);
  font-style: var(--heading-h1-font-style);
}

.home-desktop .p {
  position: relative;
  align-self: stretch;
  font-family: var(--text-medium-normal-font-family);
  font-weight: var(--text-medium-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-medium-normal-font-size);
  letter-spacing: var(--text-medium-normal-letter-spacing);
  line-height: var(--text-medium-normal-line-height);
  font-style: var(--text-medium-normal-font-style);
}

.home-desktop .button-4 {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  margin-left: -2.00px;
  background-color: var(--primitives-color-neutral-darkest);
  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);
}

.home-desktop .button-5 {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  margin-right: -1.00px;
  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);
}

.home-desktop .placeholder-image {
  align-self: stretch;
  position: relative;
  flex: 1;
  flex-grow: 1;
  object-fit: cover;
}

.home-desktop .container-wrapper {
  display: flex;
  flex-direction: column;
  width: 1800px;
  align-items: center;
  gap: 80px;
  padding: var(--spacing-sizing-section-padding-padding-section-large)
    var(--spacing-sizing-page-padding-padding-global)
    var(--spacing-sizing-section-padding-padding-section-large)
    var(--spacing-sizing-page-padding-padding-global);
  position: relative;
  flex: 0 0 auto;
  background-color: var(--color-schemes-color-scheme-1-background);
}

.home-desktop .container-2 {
  display: flex;
  flex-direction: column;
  max-width: var(--spacing-sizing-container-container-large);
  align-items: flex-start;
  gap: 80px;
  position: relative;
  width: var(--spacing-sizing-container-container-large);
  flex: 0 0 auto;
}

.home-desktop .component {
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .img {
  height: 640px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  object-fit: cover;
}

.home-desktop .list {
  flex-direction: column;
  gap: 32px;
  padding: 8px 0px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.home-desktop .list-item {
  gap: 24px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.home-desktop .img-2 {
  position: relative;
  width: 48px;
  height: 48px;
}

.home-desktop .div-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.home-desktop .content-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .heading {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--heading-h5-font-family);
  font-weight: var(--heading-h5-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-h5-font-size);
  letter-spacing: var(--heading-h5-letter-spacing);
  line-height: var(--heading-h5-line-height);
  font-style: var(--heading-h5-font-style);
}

.home-desktop .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .action {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .button-6 {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .img-3 {
  position: relative;
  width: 17px;
  height: 20px;
}
.home-desktop .img-31 {
  position: relative;
  width: 17px;
  height: 20px;
}

.home-desktop .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .container-3 {
  flex-direction: column;
  max-width: var(--spacing-sizing-container-container-large);
  gap: 80px;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.home-desktop .section-title {
  display: flex;
  flex-direction: column;
  max-width: var(--spacing-sizing-max-width-max-width-large);
  align-items: center;
  gap: 24px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .heading-2 {
  align-self: stretch;
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-h2-font-size);
  text-align: center;
  line-height: var(--heading-h2-line-height);
  position: relative;
  margin-top: -1.00px;
  font-family: var(--heading-h2-font-family);
  font-weight: var(--heading-h2-font-weight);
  letter-spacing: var(--heading-h2-letter-spacing);
  font-style: var(--heading-h2-font-style);
}

.home-desktop .text {
  position: relative;
  align-self: stretch;
  font-family: var(--text-medium-normal-font-family);
  font-weight: var(--text-medium-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-medium-normal-font-size);
  text-align: center;
  letter-spacing: var(--text-medium-normal-letter-spacing);
  line-height: var(--text-medium-normal-line-height);
  font-style: var(--text-medium-normal-font-style);
}

.home-desktop .div-4 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .placeholder-image-2 {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 752px;
  object-fit: cover;
}

.home-desktop .div-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.home-desktop .placeholder-image-3 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.home-desktop .layout {
  display: flex;
  flex-direction: column;
  width: 1920px;
  align-items: center;
  gap: 80px;
  padding: var(--spacing-sizing-section-padding-padding-section-large)
    var(--spacing-sizing-page-padding-padding-global)
    var(--spacing-sizing-section-padding-padding-section-large)
    var(--spacing-sizing-page-padding-padding-global);
  position: relative;
  flex: 0 0 auto;
  background-color: var(--primitives-color-neutral-dark);
}

.home-desktop .row {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .heading-3 {
  align-self: stretch;
  color: var(--primitives-color-white);
  font-size: var(--heading-h4-font-size);
  line-height: var(--heading-h4-line-height);
  position: relative;
  margin-top: -1.00px;
  font-family: var(--heading-h4-font-family);
  font-weight: var(--heading-h4-font-weight);
  letter-spacing: var(--heading-h4-letter-spacing);
  font-style: var(--heading-h4-font-style);
}

.home-desktop .text-2 {
  position: relative;
  align-self: stretch;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .action-2 {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .button-7 {
  all: unset;
  box-sizing: border-box;
  position: relative;
  width: fit-content;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .logo {
  display: flex;
  flex-direction: column;
  width: 1800px;
  align-items: center;
  gap: 48px;
  padding: var(--spacing-sizing-section-padding-padding-section-medium) 0px
    var(--spacing-sizing-section-padding-padding-section-medium) 0px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--color-schemes-color-scheme-1-background);
}

.home-desktop .heading-wrapper {
  justify-content: center;
  gap: 8px;
  padding: 0px var(--spacing-sizing-page-padding-padding-global) 0px
    var(--spacing-sizing-page-padding-padding-global);
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.home-desktop .heading-4 {
  width: 560px;
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-medium-bold-font-size);
  text-align: center;
  line-height: var(--text-medium-bold-line-height);
  position: relative;
  margin-top: -1.00px;
  font-family: var(--text-medium-bold-font-family);
  font-weight: var(--text-medium-bold-font-weight);
  letter-spacing: var(--text-medium-bold-letter-spacing);
  font-style: var(--text-medium-bold-font-style);
}

.home-desktop .content-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .content-6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -52.00px;
  margin-right: -52.00px;
}

.home-desktop .placeholder-logo {
  position: relative;
  width: 148px;
  height: 56px;
}

.home-desktop .placeholder-logo-2 {
  position: relative;
  width: 200px;
  height: 56px;
}

.home-desktop .section-title-2 {
  align-items: center;
  gap: 16px;
  display: flex;
  flex-direction: column;
  max-width: var(--spacing-sizing-max-width-max-width-large);
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .tagline-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .tagline {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--heading-tagline-font-family);
  font-weight: var(--heading-tagline-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-tagline-font-size);
  text-align: center;
  letter-spacing: var(--heading-tagline-letter-spacing);
  line-height: var(--heading-tagline-line-height);
  white-space: nowrap;
  font-style: var(--heading-tagline-font-style);
}

.home-desktop .content-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .content-8 {
  display: flex;
  max-width: var(--spacing-sizing-max-width-max-width-xlarge);
  align-items: flex-start;
  gap: 32px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .column-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: var(--color-schemes-color-scheme-1-foreground);
  border: 1px solid;
  border-color: var(--color-schemes-color-scheme-1-border);
}

.home-desktop .div-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .content-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .heading-5 {
  align-self: stretch;
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-h6-font-size);
  line-height: var(--heading-h6-line-height);
  position: relative;
  margin-top: -1.00px;
  font-family: var(--heading-h6-font-family);
  font-weight: var(--heading-h6-font-weight);
  letter-spacing: var(--heading-h6-letter-spacing);
  font-style: var(--heading-h6-font-style);
}

.home-desktop .price {
  position: relative;
  align-self: stretch;
  font-family: var(--heading-h1-font-family);
  font-weight: var(--heading-h1-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-h1-font-size);
  letter-spacing: var(--heading-h1-letter-spacing);
  line-height: var(--heading-h1-line-height);
  font-style: var(--heading-h1-font-style);
}

.home-desktop .divider {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.home-desktop .list-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .div-7 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .text-3 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .actions-2 {
  all: unset;
  box-sizing: border-box;
  gap: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .button-8 {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  position: relative;
  align-self: stretch ;
  flex: 0 0 auto;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  margin-right: -2.00px;
  margin-left: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
  background-color: var(--primitives-color-neutral-darkest);
  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);}

.home-desktop .button-9 {
  all: unset;
  box-sizing: border-box;
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--primitives-color-white);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .column-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  padding: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--color-schemes-color-scheme-1-foreground);
  border: 1px solid;
  border-color: var(--color-schemes-color-scheme-1-border);
}

.home-desktop .container-4 {
  display: flex;
  flex-direction: column;
  max-width: var(--spacing-sizing-container-container-large);
  align-items: flex-start;
  gap: 80px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .section-title-3 {
  align-items: flex-start;
  gap: 24px;
  display: flex;
  flex-direction: column;
  max-width: var(--spacing-sizing-max-width-max-width-large);
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .heading-6 {
  align-self: stretch;
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-h2-font-size);
  line-height: var(--heading-h2-line-height);
  position: relative;
  margin-top: -1.00px;
  font-family: var(--heading-h2-font-family);
  font-weight: var(--heading-h2-font-weight);
  letter-spacing: var(--heading-h2-letter-spacing);
  font-style: var(--heading-h2-font-style);
}

.home-desktop .row-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .stars {
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .quote {
  position: relative;
  align-self: stretch;
  font-family: var(--heading-h6-font-family);
  font-weight: var(--heading-h6-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--heading-h6-font-size);
  letter-spacing: var(--heading-h6-letter-spacing);
  line-height: var(--heading-h6-line-height);
  font-style: var(--heading-h6-font-style);
}

.home-desktop .avatar {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .avatar-image {
  position: relative;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.home-desktop .avatar-content {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--text-regular-semi-bold-font-family);
  font-weight: var(--text-regular-semi-bold-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-regular-semi-bold-font-size);
  letter-spacing: var(--text-regular-semi-bold-letter-spacing);
  line-height: var(--text-regular-semi-bold-line-height);
  white-space: nowrap;
  font-style: var(--text-regular-semi-bold-font-style);
}

.home-desktop .text-4 {
  position: relative;
  width: fit-content;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  white-space: nowrap;
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .placeholder-logo-3 {
  position: relative;
  width: 120px;
  height: 48px;
}

.home-desktop .content-10 {
  display: flex;
  flex-direction: column;
  max-width: var(--spacing-sizing-max-width-max-width-large);
  align-items: center;
  gap: 32px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .footer {
  display: flex;
  flex-direction: column;
  width: 1800px;
  align-items: center;
  gap: 80px;
  padding: var(--spacing-sizing-section-padding-padding-section-medium)
    var(--spacing-sizing-page-padding-padding-global)
    var(--spacing-sizing-section-padding-padding-section-medium)
    var(--spacing-sizing-page-padding-padding-global);
  background-color: var(--color-schemes-color-scheme-1-background);
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .content-11 {
  display: flex;
  height: 248px;
  align-items: flex-start;
  gap: 128px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.home-desktop .newsletter {
  display: flex;
  flex-direction: column;
  width: 500px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.home-desktop .actions-3 {
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .text-input {
  padding: 12px;
  position: relative;
  flex-grow: 1;
  margin-top: -1.00px;
  margin-bottom: -1.00px;
  margin-left: -1.00px;
  border: 1px solid;
  border-color: var(--primitives-color-neutral-darkest);
  background: none;
  flex: 1;
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: #00000099;
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  font-style: var(--text-regular-normal-font-style);
}

.home-desktop .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  font-family: var(--text-tiny-normal-font-family);
  font-weight: var(--text-tiny-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-tiny-normal-font-size);
  letter-spacing: var(--text-tiny-normal-letter-spacing);
  line-height: var(--text-tiny-normal-line-height);
  font-style: var(--text-tiny-normal-font-style);
}

.home-desktop .links {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.home-desktop .column-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.home-desktop .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--text-regular-semi-bold-font-family);
  font-weight: var(--text-regular-semi-bold-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-regular-semi-bold-font-size);
  letter-spacing: var(--text-regular-semi-bold-letter-spacing);
  line-height: var(--text-regular-semi-bold-line-height);
  font-style: var(--text-regular-semi-bold-font-style);
}

.home-desktop .div-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .link-2 {
  display: flex;
  align-items: flex-start;
  padding: 8px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .text-wrapper-6 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--text-small-normal-font-family);
  font-weight: var(--text-small-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-small-normal-font-size);
  letter-spacing: var(--text-small-normal-letter-spacing);
  line-height: var(--text-small-normal-line-height);
  font-style: var(--text-small-normal-font-style);
}

.home-desktop .link-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: var(--text-small-normal-font-family);
  font-weight: var(--text-small-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-small-normal-font-size);
  letter-spacing: var(--text-small-normal-letter-spacing);
  line-height: var(--text-small-normal-line-height);
  white-space: nowrap;
  font-style: var(--text-small-normal-font-style);
}

.home-desktop .credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .divider-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-top: -1.00px;
  object-fit: cover;
}

.home-desktop .row-2 {
  justify-content: space-between;
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home-desktop .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--text-small-normal-font-family);
  font-weight: var(--text-small-normal-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-small-normal-font-size);
  letter-spacing: var(--text-small-normal-letter-spacing);
  line-height: var(--text-small-normal-line-height);
  white-space: nowrap;
  font-style: var(--text-small-normal-font-style);
}

.home-desktop .footer-links {
  display: inline-flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.home-desktop .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--text-small-link-font-family);
  font-weight: var(--text-small-link-font-weight);
  color: var(--color-schemes-color-scheme-1-text);
  font-size: var(--text-small-link-font-size);
  letter-spacing: var(--text-small-link-letter-spacing);
  line-height: var(--text-small-link-line-height);
  text-decoration: underline;
  white-space: nowrap;
  font-style: var(--text-small-link-font-style);
}

/* end of main code >>>>>>>>>>>>>>>>>>>>>>>>>

/* ================================
   CINEMATIC MONOCHROME STYLING
================================ */

/* ===== BUTTON BASE STYLES ===== */
.home-desktop .button,
.home-desktop .button-2,
.home-desktop .button-11,
.home-desktop .button-5,
.home-desktop .button-2w,
.home-desktop .button-22,
.home-desktop .button-blackbg,
.home-desktop .button-4,
.home-desktop .button-8 {
  border: 1px solid;
  border-radius: 6px;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* ===== BUTTON VARIANTS ===== */

/* Black text preset */
.home-desktop .button,
.home-desktop .button-2,
.home-desktop .button-11,
.home-desktop .button-5 {
  color: #000;
  border-color: #000;
}

/* White text preset */
.home-desktop .button-2w,
.home-desktop .button-22,
.home-desktop .button-blackbg,
.home-desktop .button-4,
.home-desktop .button-8 {
  color: #fff;
  border-color: #fff;
}

/* ===== BUTTON EFFECTS ===== */

/* Hover: Enlarge */
.home-desktop .button:hover,
.home-desktop .button-2:hover,
.home-desktop .button-11:hover,
.home-desktop .button-5:hover,
.home-desktop .button-2w:hover,
.home-desktop .button-22:hover,
.home-desktop .button-blackbg:hover,
.home-desktop .button-4:hover,
.home-desktop .button-8:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Click: White flash */
.home-desktop .button:active,
.home-desktop .button-2:active,
.home-desktop .button-11:active,
.home-desktop .button-5:active,
.home-desktop .button-2w:active,
.home-desktop .button-22:active,
.home-desktop .button-blackbg:active,
.home-desktop .button-4:active,
.home-desktop .button-8:active {
  transform: scale(0.95);
  background-color: #fff !important;
  color: #000 !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 0 6px rgba(255, 255, 255, 0.05); }
}

.home-desktop .button,
.home-desktop .button-2,
.home-desktop .button-11,
.home-desktop .button-5,
.home-desktop .button-2w,
.home-desktop .button-22,
.home-desktop .button-blackbg,
.home-desktop .button-4,
.home-desktop .button-8 {
  animation: subtlePulse 3s infinite ease-in-out;
}
/* ===================================
   🎞️ CINEMATIC VIGNETTE + GRAIN + ANIMATIONS
=================================== */

/* 3. TEXT FADE-IN + SLIDE-UP */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeUp 1s ease forwards;
}
/* ================================
   CINEMATIC MONOCHROME STYLING
================================ */

/* ===== BUTTON BASE STYLES ===== */
.home-desktop .button,
.home-desktop .button-2,
.home-desktop .button-11,
.home-desktop .button-5,
.home-desktop .button-2w,
.home-desktop .button-22,
.home-desktop .button-blackbg,
.home-desktop .button-4,
.home-desktop .button-8 {
  border: 1px solid;
  border-radius: 6px;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}

/* ===== BUTTON VARIANTS ===== */

/* Black text preset */
.home-desktop .button,
.home-desktop .button-2,
.home-desktop .button-11,
.home-desktop .button-5 {
  color: #000;
  border-color: #000;
}

/* White text preset */
.home-desktop .button-2w,
.home-desktop .button-22,
.home-desktop .button-blackbg,
.home-desktop .button-4,
.home-desktop .button-8 {
  color: #fff;
  border-color: #fff;
}

/* ===== BUTTON EFFECTS ===== */

/* Hover: Enlarge */
.home-desktop .button:hover,
.home-desktop .button-2:hover,
.home-desktop .button-11:hover,
.home-desktop .button-5:hover,
.home-desktop .button-2w:hover,
.home-desktop .button-22:hover,
.home-desktop .button-blackbg:hover,
.home-desktop .button-4:hover,
.home-desktop .button-8:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Click: White flash */
.home-desktop .button:active,
.home-desktop .button-2:active,
.home-desktop .button-11:active,
.home-desktop .button-5:active,
.home-desktop .button-2w:active,
.home-desktop .button-22:active,
.home-desktop .button-blackbg:active,
.home-desktop .button-4:active,
.home-desktop .button-8:active {
  transform: scale(0.95);
  background-color: #fff !important;
  color: #000 !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.home-desktop .button,
.home-desktop .button-2,
.home-desktop .button-11,
.home-desktop .button-5,
.home-desktop .button-2w,
.home-desktop .button-22,
.home-desktop .button-blackbg,
.home-desktop .button-4,
.home-desktop .button-8 {
  animation: subtlePulse 3s infinite ease-in-out;
}
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 0 6px rgba(255, 255, 255, 0.05); }
}

/* ===============================
   🎯 Back to Top Cinematic Button
=============================== */
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  padding: 10px 16px;
  font-size: 14px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

#back-to-top:hover {
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

/* end of code - 2 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

/* ===================================
   🎯 CINEMATIC HUD-STYLE OVERLAYS
=================================== */
/* 2. CORNER BRACKETS */


/* 3. FLOATING TIMECODE */
#hud-timecode {
  position: fixed;
  top: 20px;
  right: 20px;
  font-family: monospace;
  font-size: 20px;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.52);
  z-index: 999;
}


/* 4. ROTATING SVG RING */
.hud-rotator {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 5%;
  left: 5%;
  z-index: 0;
  opacity: 0.2;
}

.hud-rotator svg {
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 5. EDGE PINGS */
.hud-ping:hover::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  top: -6px;
  right: -6px;
  animation: ping 1.2s ease-out infinite;
}
@keyframes ping {
  0% { opacity: 1; transform: scale(0.8); }
  80% { opacity: 0; transform: scale(2.5); }
  100% { opacity: 0; transform: scale(3); }
}

/* 6. HUD GLOW FRAME */
.hud-glow {
  border: 10px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 100px rgba(255, 255, 255, 0.08);
  padding: 16px;
  position: relative;
  z-index: 1;
}

/* 7. DATA STREAM TEXT */
.hud-stream {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  overflow: hidden;
  z-index: 10;
}
.hud-stream span {
  display: inline-block;
  padding-left: 100%;
  animation: stream 30s linear infinite;
}
@keyframes stream {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}