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

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

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

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

@font-face {
  font-family: Die Grotesk A;
  src: url('fonts/die-grotesk-a-medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Die Grotesk A;
  src: url('fonts/die-grotesk-a-regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Pstimes;
  src: url('fonts/PSTimes-Regular-2.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.navbar {
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  height: 64px;
  text-decoration: none;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.container {
  grid-column-gap: 32px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.logo {
  object-fit: fill;
  width: 12rem;
  overflow: hidden;
}

.navigation {
  grid-column-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.navbar-label {
  grid-column-gap: 4px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.nav-text {
  color: #fff;
  text-align: center;
  letter-spacing: -.013em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
}

.actions {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.navbar-action {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.button-style {
  grid-column-gap: 8px;
  background-color: #0000000d;
  border-radius: 9px;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  height: 36px;
  padding-left: 14px;
  padding-right: 14px;
  text-decoration: none;
  display: flex;
}

.label-style-2 {
  color: #0000007a;
  letter-spacing: -.013em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
}

.navbar-action-2 {
  border-radius: 9999px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.secondary-cta {
  grid-column-gap: 6px;
  border: .5px solid #fff;
  border-radius: 99999px;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  height: 36px;
  padding-left: 18px;
  padding-right: 18px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 1px 1px #0000001f, 0 0 4px #0000000a, 0 4px 8px #00000014;
}

.secondary-cta:hover {
  background-color: #ffffff1a;
}

.label-style-3 {
  color: #fff;
  letter-spacing: -.006em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.section_hero {
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 9rem;
  padding-bottom: 9rem;
  text-decoration: none;
  display: flex;
}

.container-large {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding-left: 0;
  padding-right: 0;
  text-decoration: none;
  display: flex;
}

.hero-content-wrapper {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 75rem;
  text-decoration: none;
  display: flex;
}

.content-wrapper {
  grid-row-gap: 1.6rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.hero-heading {
  color: #fff;
  text-align: center;
  letter-spacing: -.125rem;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Die Grotesk A, Arial, sans-serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.body-text {
  color: #979797;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 135%;
  text-decoration: none;
}

.actions-2 {
  grid-column-gap: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.button {
  grid-column-gap: 8px;
  background-color: #fff;
  border-radius: 999px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 1px 1px #0000001f, 0 0 4px #0000000a, 0 4px 8px #00000014;
}

.button:hover {
  background-color: #ffffffe6;
}

.button-text {
  color: #000;
  letter-spacing: -.014em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.img-showcase {
  grid-row-gap: 48px;
  object-fit: cover;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 800px;
  padding: 0;
  display: flex;
}

.section-learn {
  grid-row-gap: 64px;
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 96px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.container-5 {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.container-6 {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 640px;
  text-decoration: none;
  display: flex;
}

.heading-medium {
  color: #fff;
  text-align: center;
  letter-spacing: -.09375rem;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Die Grotesk A, Arial, sans-serif;
  font-size: 4rem;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.text-4 {
  color: #979797;
  text-align: center;
  letter-spacing: -.014em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.container-7 {
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1280px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.content-style {
  grid-column-gap: 64px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.feature-text {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.featured-icon {
  background-color: #252525;
  border-radius: 20px;
}

.feature-icon {
  overflow: hidden;
}

.text-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.feature-heading {
  color: #fff;
  text-align: center;
  letter-spacing: -.06rem;
  width: 100%;
  margin-top: 0;
  margin-bottom: 18px;
  font-family: Die Grotesk A, Arial, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.feature-heading.text-style-center {
  text-align: left;
  line-height: 100%;
}

.feature-body-text {
  color: #979797;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
}

.frame-style-2 {
  overflow: hidden;
}

.vector {
  border-style: solid;
  border-width: undefinedpx;
  object-fit: cover;
  border-color: #fff;
}

.section_works {
  grid-row-gap: 96px;
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.section-header {
  grid-row-gap: 32px;
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 96px;
  text-decoration: none;
  display: flex;
}

.section-header.padding-bottom-0 {
  padding-bottom: 0;
}

.container-8 {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 640px;
  text-decoration: none;
  display: flex;
}

.design-landing-pages-in-minutes-not-weeks {
  color: #fff;
  text-align: center;
  letter-spacing: -.022em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 54px;
  text-decoration: none;
}

.design-endless-variations-of-high-quality-landing-pages-in-only-a-few-minutes-say-goodbye-to-wasting {
  color: #979797;
  text-align: center;
  letter-spacing: -.014em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.container-9 {
  grid-column-gap: 32px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.portfolio-mockup {
  background-color: #252525;
  overflow: hidden;
}

.safari-light {
  background-color: #fff;
  border-radius: 12.9653px;
  overflow: hidden;
  box-shadow: 0 7.97867px 23.936px #00000059, 0 0 #0000003b;
}

.background {
  background-image: linear-gradient(#fff, #fff), url('../images/background.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom-right-radius: 12.9653px;
  border-bottom-left-radius: 12.9653px;
  min-height: 426px;
  overflow: hidden;
}

.img_dark {
  object-fit: cover;
}

.fill {
  background-color: #ccc;
  background-image: linear-gradient(#000000f2, #000000f2);
}

.glass-effect {
  background-color: #0000;
}

.title-bar-2 {
  grid-column-gap: 7.97867px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 3.98933px;
  text-decoration: none;
  display: flex;
}

.window-controls {
  grid-column-gap: 4.488px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: .498667px;
  text-decoration: none;
  display: flex;
}

.close-button {
  background-color: #ff736a;
  border: .249333px solid #0000001a;
  border-radius: 49.8667px;
}

.minimize-button {
  background-color: #febc2e;
  border: .249333px solid #0000001a;
  border-radius: 49.8667px;
}

.zoom-button {
  background-color: #19c332;
  border: .249333px solid #0000001a;
  border-radius: 49.8667px;
}

.search-bar {
  grid-column-gap: 2.992px;
  border-radius: 49.8667px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 301.693px;
  height: 17.952px;
  padding-left: 4.98667px;
  padding-right: 4.98667px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.search-bar-background {
  position: absolute;
  top: 0;
  left: 0;
}

.blur {
  opacity: .67;
}

.blur-effect {
  -webkit-backdrop-filter: blur(9.97333px);
  backdrop-filter: blur(9.97333px);
  background-color: #0000001a;
  border-radius: 498.667px;
}

.fill-2 {
  background-color: #333;
  background-image: linear-gradient(#ffffff14, #ffffff14);
  border-radius: 147.605px;
}

.glass-effect-2 {
  background-color: #0000;
  border-radius: 147.605px;
}

.url {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6px;
  font-weight: 500;
  line-height: 7.98px;
  text-decoration: none;
}

.right-icon {
  color: #fff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6px;
  font-weight: 500;
  line-height: 7.98px;
  text-decoration: none;
}

.segmented-control {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 1.99467px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.button-style-4 {
  border-radius: 49.8667px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  min-width: 13.9627px;
  height: 13.9627px;
  padding-left: 2.49333px;
  padding-right: 2.49333px;
  text-decoration: none;
  display: flex;
}

.symbol {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6px;
  font-weight: 500;
  line-height: 10.97px;
  text-decoration: none;
}

.separator {
  grid-column-gap: 4.98667px;
  justify-content: flex-start;
  align-items: center;
  width: 1.496px;
  padding-left: .498667px;
  padding-right: .498667px;
  text-decoration: none;
  display: flex;
}

.separator-line {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: .498667px;
  height: 9.97333px;
  text-decoration: none;
  display: flex;
}

.symbol-2 {
  color: #555;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6px;
  font-weight: 500;
  line-height: 10.97px;
  text-decoration: none;
}

.pull-down-button {
  grid-column-gap: .997333px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  height: 17.952px;
  padding-left: 3.98933px;
  padding-right: 3.98933px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.icon {
  color: #fff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6px;
  font-weight: 500;
  line-height: 10.97px;
  text-decoration: none;
}

.dropdown-indicator {
  color: #c4c4c4;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6px;
  font-weight: 400;
  line-height: 10.97px;
  text-decoration: none;
}

.col-text-right {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.wrapper {
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 512px;
  display: flex;
}

.wrapper.flex {
  text-align: center;
  justify-content: center;
  align-items: center;
  max-width: 31.25rem;
}

.works-heading {
  color: #fff;
  letter-spacing: -.09375rem;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Die Grotesk A, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 100%;
}

.text-5 {
  color: #979797;
  letter-spacing: -.014em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.col-text-left {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.container-13 {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 512px;
  text-decoration: none;
  display: flex;
}

.works-body-text {
  color: #979797;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 135%;
  text-decoration: none;
}

.max-width {
  max-width: 30rem;
}

.section-how {
  grid-row-gap: 32px;
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 7.5rem;
  text-decoration: none;
  display: flex;
}

.container-14 {
  grid-row-gap: 18px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 640px;
  text-decoration: none;
  display: flex;
}

.text {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 54px;
  text-decoration: none;
}

.text-6 {
  color: #979797;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.horizontal-tabs {
  grid-column-gap: 8px;
  background-color: #252525;
  border: 1px solid #373737;
  border-radius: 99999px;
  justify-content: center;
  align-items: center;
  width: 38rem;
  margin-bottom: 3.75rem;
  padding: 8px;
  text-decoration: none;
  display: flex;
}

.tab-button-base {
  grid-column-gap: 8px;
  color: #979797;
  background-color: #252525;
  border-radius: 99999px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 2px #1018280f, 0 1px 3px #1018281a;
}

.tab-button-base.w--current {
  color: #fff;
  background-color: #0b0a09;
}

.text-7 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.tab-button-base-2 {
  grid-column-gap: 8px;
  border-radius: 99999px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.text-8 {
  color: #979797;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.tab-button-base-3 {
  grid-column-gap: 8px;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.tabs-content {
  grid-row-gap: 32px;
  background-color: #00000026;
  border-radius: 18.2335px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 898px;
  padding: 27.3503px 27.3503px 20rem;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.safari-light-2 {
  background-color: #fff;
  border-radius: 14.7752px;
  overflow: hidden;
  box-shadow: 0 9.09244px 27.2773px #00000059, 0 0 #0000003b;
}

.background-2 {
  background-image: linear-gradient(#fff, #fff), url('../images/background.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom-right-radius: 14.7752px;
  border-bottom-left-radius: 14.7752px;
  min-height: 485px;
  overflow: hidden;
}

.title-bar-3 {
  grid-column-gap: 9.09244px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 4.54622px;
  text-decoration: none;
  display: flex;
}

.window-controls-2 {
  grid-column-gap: 5.1145px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: .568278px;
  text-decoration: none;
  display: flex;
}

.close-button-2 {
  background-color: #ff736a;
  border: .284139px solid #0000001a;
  border-radius: 56.8277px;
}

.minimize-button-2 {
  background-color: #febc2e;
  border: .284139px solid #0000001a;
  border-radius: 56.8277px;
}

.zoom-button-2 {
  background-color: #19c332;
  border: .284139px solid #0000001a;
  border-radius: 56.8277px;
}

.button-group {
  grid-column-gap: 2.27311px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 2.27311px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.liquid-glass {
  position: absolute;
  top: 0;
  left: 0;
}

.blur-2 {
  -webkit-backdrop-filter: blur(11.3655px);
  backdrop-filter: blur(11.3655px);
  background-color: #0000001a;
  border-radius: 568.277px;
}

.fill-3 {
  background-color: #333;
  background-image: linear-gradient(#ffffff14, #ffffff14);
  border-radius: 168.21px;
}

.glass-effect-3 {
  background-color: #0000;
  border-radius: 168.21px;
}

.button-style-5 {
  border-radius: 56.8277px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  min-width: 15.9118px;
  height: 15.9118px;
  padding-left: 2.84139px;
  padding-right: 2.84139px;
  text-decoration: none;
  display: flex;
}

.symbol-3 {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 12.5px;
  text-decoration: none;
}

.search-bar-2 {
  grid-column-gap: 3.40966px;
  border-radius: 56.8277px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 343.808px;
  height: 20.458px;
  padding-left: 5.68277px;
  padding-right: 5.68277px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.url-2 {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 9.09px;
  text-decoration: none;
}

.right-icon-2 {
  color: #fff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 9.09px;
  text-decoration: none;
}

.segmented-control-2 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 2.27311px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.separator-2 {
  grid-column-gap: 5.68277px;
  justify-content: flex-start;
  align-items: center;
  width: 1.70483px;
  padding-left: .568278px;
  padding-right: .568278px;
  text-decoration: none;
  display: flex;
}

.separator-line-2 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: .568278px;
  height: 11.3655px;
  text-decoration: none;
  display: flex;
}

.symbol-4 {
  color: #555;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 12.5px;
  text-decoration: none;
}

.pull-down-button-2 {
  grid-column-gap: 1.13656px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  height: 20.458px;
  padding-left: 4.54622px;
  padding-right: 4.54622px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.icon-2 {
  color: #fff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 12.5px;
  text-decoration: none;
}

.dropdown-indicator-2 {
  color: #c4c4c4;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 400;
  line-height: 12.5px;
  text-decoration: none;
}

.content-style-2 {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 584px;
  text-decoration: none;
  display: flex;
}

.text-9 {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 46px;
  font-weight: 400;
  line-height: 54.7px;
  text-decoration: none;
}

.text-10 {
  color: #979797;
  text-align: center;
  letter-spacing: -.014em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 27.35px;
  text-decoration: none;
}

.tabs {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.tabs-content-panel {
  width: 52.7063rem;
}

.tab-pane-content {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.mock-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.white-span {
  color: #fff;
}

.section_footer {
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 9rem;
  padding-bottom: 9rem;
  text-decoration: none;
  display: flex;
}

.footer-heading {
  color: #fff;
  text-align: center;
  letter-spacing: -.125rem;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Die Grotesk A, Arial, sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.footer-content-wrapper {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 50rem;
  text-decoration: none;
  display: flex;
}

.section_footer_showcase {
  grid-row-gap: 0px;
  object-fit: cover;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.code-embed {
  background-color: #0b0a09;
  width: 100%;
}

.section-showcase {
  grid-row-gap: 48px;
  object-fit: cover;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 800px;
  padding: 0;
  display: flex;
  position: relative;
}

.browser-sc {
  aspect-ratio: 1024 / 583;
  object-fit: cover;
  width: 80%;
  padding-left: 0;
  position: absolute;
}

.section-interactive {
  background-color: #0b0a09;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  padding-top: 96px;
  padding-bottom: 96px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.section-style {
  grid-row-gap: 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.features-container {
  grid-column-gap: 32px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.shadecraft {
  background-color: #252525;
  overflow: hidden;
}

.features-video-wrapper {
  background-color: #242424;
  justify-content: center;
  align-items: flex-end;
  width: 60rem;
  height: 32rem;
  display: flex;
  overflow: hidden;
}

.features-video {
  object-fit: cover;
  border-bottom-right-radius: 14.4941px;
  border-bottom-left-radius: 14.4941px;
  overflow: hidden;
}

.fill-4 {
  background-color: #ccc;
  background-image: linear-gradient(#000000f2, #000000f2);
}

.glass-effect-4 {
  background-color: #0000;
}

.title-bar-4 {
  grid-column-gap: 8.91945px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 4.45972px;
  text-decoration: none;
  display: flex;
}

.window-controls-3 {
  grid-column-gap: 5.01719px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: .557465px;
  text-decoration: none;
  display: flex;
}

.close-button-3 {
  background-color: #ff736a;
  border: .278733px solid #0000001a;
  border-radius: 55.7465px;
}

.minimize-button-3 {
  background-color: #febc2e;
  border: .278733px solid #0000001a;
  border-radius: 55.7465px;
}

.zoom-button-3 {
  background-color: #19c332;
  border: .278733px solid #0000001a;
  border-radius: 55.7465px;
}

.search-bar-3 {
  grid-column-gap: 3.34479px;
  border-radius: 55.7465px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 337.267px;
  height: 20.0688px;
  padding-left: 5.57465px;
  padding-right: 5.57465px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.search-bar-background-2 {
  position: absolute;
  top: 0;
  left: 0;
}

.blur-3 {
  opacity: .67;
}

.blur-effect-2 {
  -webkit-backdrop-filter: blur(11.1493px);
  backdrop-filter: blur(11.1493px);
  background-color: #0000001a;
  border-radius: 557.465px;
}

.fill-5 {
  background-color: #333;
  background-image: linear-gradient(#ffffff14, #ffffff14);
  border-radius: 165.01px;
}

.glass-effect-5 {
  background-color: #0000;
  border-radius: 165.01px;
}

.left-icon {
  object-fit: cover;
}

.url-3 {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 8.92px;
  text-decoration: none;
}

.segmented-control-3 {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 2.22986px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.button-style-6 {
  border-radius: 55.7465px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  min-width: 15.609px;
  height: 15.609px;
  padding-left: 2.78733px;
  padding-right: 2.78733px;
  text-decoration: none;
  display: flex;
}

.symbol-5 {
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 12.26px;
  text-decoration: none;
}

.separator-3 {
  grid-column-gap: 5.57465px;
  justify-content: flex-start;
  align-items: center;
  width: 1.6724px;
  padding-left: .557465px;
  padding-right: .557465px;
  text-decoration: none;
  display: flex;
}

.separator-line-3 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: .557465px;
  height: 11.1493px;
  text-decoration: none;
  display: flex;
}

.symbol-6 {
  color: #555;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 12.26px;
  text-decoration: none;
}

.pull-down-button-3 {
  grid-column-gap: 1.11493px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  height: 20.0688px;
  padding-left: 4.45972px;
  padding-right: 4.45972px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.icon-3 {
  color: #fff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 500;
  line-height: 12.26px;
  text-decoration: none;
}

.dropdown-indicator-3 {
  color: #c4c4c4;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7px;
  font-weight: 400;
  line-height: 12.26px;
  text-decoration: none;
}

.features-wrapper-right {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.container-17 {
  grid-column-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 512px;
  text-decoration: none;
  display: flex;
}

.library-svg {
  object-fit: cover;
  border-radius: 20px;
}

.features-text-wrapper {
  grid-row-gap: 0rem;
  text-align: left;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 512px;
  text-decoration: none;
  display: flex;
}

.text-11 {
  color: #fff;
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: 400;
  line-height: 30px;
  text-decoration: none;
}

.bullet-text {
  color: #979797;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Geist, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 400;
  line-height: 130%;
  text-decoration: none;
}

.bullets {
  grid-column-gap: .2rem;
  grid-row-gap: .2rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 512px;
  text-decoration: none;
  display: flex;
}

.bullet-point {
  grid-column-gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.hugeiconstick-01 {
  object-fit: cover;
  overflow: hidden;
}

.features-wrapper-left {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.preview-video {
  background-color: #242424;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.features-container-flex {
  grid-column-gap: 32px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
  display: flex;
}

.nav-link {
  color: #fff;
  padding: 8px 12px;
  font-family: Geist, Arial, sans-serif;
}

.nav-link.w--current {
  color: #fff9;
}

.nav-menu {
  width: 100%;
}

@media screen and (max-width: 991px) {
  .navbar {
    margin-top: 0;
  }

  .container {
    grid-column-gap: 18px;
    justify-content: space-between;
    align-items: center;
  }

  .actions {
    width: 100%;
  }

  .container-7 {
    justify-content: flex-start;
    align-items: center;
  }

  .content-style {
    grid-row-gap: 2rem;
    flex-flow: column;
    width: 60%;
  }

  .tabs-content-panel, .browser-sc {
    width: 100%;
  }

  .nav-menu {
    background-color: #0b0a09;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0;
    padding-left: 0;
  }

  .menu-icon {
    color: #fff;
    width: 100%;
  }

  .menu-button {
    background-color: #9797970f;
    border-radius: 8px;
    padding: 12px;
  }

  .menu-button.w--open {
    background-color: #131110;
  }
}

@media screen and (max-width: 767px) {
  .logo {
    width: 30rem;
  }

  .hero-heading {
    font-size: 4rem;
  }

  .horizontal-tabs {
    width: 25rem;
  }

  .features-container {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .features-video-wrapper {
    width: 100%;
    height: 30rem;
  }

  .features-wrapper-right, .features-wrapper-left {
    margin-top: 2.5rem;
  }

  .features-container-flex {
    flex-flow: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }

  .nav-menu {
    flex-flow: row;
    display: flex;
  }
}

@media screen and (max-width: 479px) {
  .container {
    grid-column-gap: 15px;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
  }

  .logo {
    width: 20rem;
  }

  .navigation {
    grid-column-gap: 18px;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
  }

  .nav-text {
    font-size: 12px;
  }

  .secondary-cta {
    height: 1.75rem;
    font-family: Geist, Arial, sans-serif;
    font-size: 12px;
    display: none;
  }

  .label-style-3 {
    font-size: 13px;
  }

  .section_hero {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .hero-heading {
    font-size: 3rem;
  }

  .body-text {
    font-size: .95rem;
  }

  .button-text {
    font-size: 1rem;
  }

  .img-showcase {
    height: 100%;
  }

  .section-learn {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .container-5 {
    padding-left: 0;
    padding-right: 0;
  }

  .container-6 {
    max-width: none;
  }

  .heading-medium {
    font-size: 3rem;
  }

  .container-7 {
    padding-left: 0;
    padding-right: 0;
  }

  .content-style {
    width: 90%;
  }

  .feature-heading {
    font-size: 1.8rem;
  }

  .feature-body-text, .works-body-text {
    font-size: .95rem;
    line-height: 125%;
  }

  .section-how {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .horizontal-tabs {
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .tab-button-base {
    font-family: Geist, Arial, sans-serif;
    font-size: 12px;
  }

  .tab-button-base.w--current {
    font-size: 12px;
  }

  .tabs {
    padding-left: 0;
    padding-right: 0;
  }

  .section_footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-showcase {
    height: 400px;
  }

  .features-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .features-video-wrapper {
    height: 15rem;
  }

  .bullet-text {
    font-size: .85rem;
  }

  .features-wrapper-left {
    grid-row-gap: 2rem;
  }

  .features-container-flex {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nav-link {
    text-align: center;
  }

  .nav-menu {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}


@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Die Grotesk A';
  src: url('fonts/die-grotesk-a-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Die Grotesk A';
  src: url('fonts/die-grotesk-a-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pstimes';
  src: url('fonts/PSTimes-Regular-2.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Mobile fixes */
@media screen and (max-width: 767px) {
  /* Fix middle features container - video should come first on mobile */
  .features-container:nth-child(2) {
    flex-direction: column-reverse;
  }
  
  /* Ensure all features containers stack properly on mobile */
  .features-container {
    flex-direction: column;
  }
}

@media screen and (max-width: 479px) {
  /* Increase video height on small mobile */
  .features-video-wrapper {
    height: 18rem;
    min-height: 250px;
  }
  
  /* Fix middle features container on small mobile */
  .features-container:nth-child(2) {
    flex-direction: column-reverse;
  }
  
  /* Ensure mobile nav menu displays properly when opened */
  .nav-menu.w--open {
    display: flex !important;
    flex-direction: column;
    background-color: #0b0a09;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    padding: 1rem;
    z-index: 999;
  }
  
  .nav-link {
    padding: 0.75rem 0;
  }
}

/* Specific fix for the middle features container that has text-first on desktop */
@media screen and (max-width: 767px) {
  .features-container-reverse {
    flex-direction: column-reverse !important;
  }
}

/* Additional mobile fixes - video height */
@media screen and (max-width: 767px) {
  .features-video-wrapper {
    height: auto;
    min-height: 300px;
    aspect-ratio: 16/10;
  }
  
  .preview-video {
    width: 100%;
    height: 100%;
  }
  
  .preview-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media screen and (max-width: 479px) {
  .features-video-wrapper {
    min-height: 280px;
    aspect-ratio: 16/11;
  }
}

/* Mobile nav fix - Webflow specific */
.w-nav-menu {
  display: none;
}

.w-nav-menu.w--open {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background-color: #0b0a09;
  padding: 1rem 2rem;
  z-index: 1000;
  border-bottom: 1px solid #333;
}

@media screen and (min-width: 768px) {
  .w-nav-menu {
    display: flex !important;
  }
}

.menu-button.w--open {
  background-color: transparent;
}

/* Complete video container height fixes across breakpoints */

/* Tablet - 991px and below */
@media screen and (max-width: 991px) {
  .features-video-wrapper {
    width: 100%;
    height: 450px;
    min-height: 450px;
  }
}

/* Landscape mobile - 767px and below */
@media screen and (max-width: 767px) {
  .features-video-wrapper {
    width: 100%;
    height: 400px;
    min-height: 400px;
  }
}

/* Portrait mobile - 568px and below */
@media screen and (max-width: 568px) {
  .features-video-wrapper {
    width: 100%;
    height: 380px;
    min-height: 380px;
  }
}

/* Small mobile - 479px and below */
@media screen and (max-width: 479px) {
  .features-video-wrapper {
    width: 100%;
    height: 350px;
    min-height: 350px;
  }
}

/* Extra small mobile - 375px and below */
@media screen and (max-width: 375px) {
  .features-video-wrapper {
    width: 100%;
    height: 320px;
    min-height: 320px;
  }
}

/* Complete mobile navigation fix */
@media screen and (max-width: 767px) {
  .nav-menu {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    background-color: #0b0a09;
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid #222;
  }
  
  .nav-menu.w--open {
    display: flex !important;
  }
  
  .w-nav-menu.w--open {
    display: flex !important;
  }
  
  .menu-button {
    display: flex !important;
    cursor: pointer;
    padding: 10px;
  }
  
  .w-nav-button {
    display: flex !important;
  }
  
  .menu-icon {
    width: 24px;
    height: 18px;
    position: relative;
  }
  
  .w-icon-nav-menu {
    width: 24px;
    height: 18px;
  }
  
  .nav-link {
    padding: 12px 0;
    display: block;
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .menu-button,
  .w-nav-button {
    display: none !important;
  }
  
  .nav-menu {
    display: flex !important;
    position: static;
    background: transparent;
    flex-direction: row;
    padding: 0;
    border: none;
  }
}
/* Fix navbar alignment on desktop */
@media screen and (min-width: 768px) {
  .nav-menu, .w-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: left !important;
    gap: 24px;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* Fix navbar - override width and alignment */
.nav-menu {
  width: auto !important;
  flex: 0 0 auto !important;
}

.container {
  justify-content: flex-start !important;
}

.actions {
  margin-left: auto !important;
}

@media screen and (min-width: 768px) {
  .nav-menu, .w-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 24px;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
  }
}

/* Show login button on mobile */
@media screen and (max-width: 767px) {
  .secondary-cta {
    display: flex !important;
  }
  
  .actions, .navbar-action-2 {
    display: flex !important;
  }
}

@media screen and (max-width: 479px) {
  .secondary-cta {
    display: flex !important;
    height: auto;
    padding: 6px 12px;
    font-size: 12px;
  }
}