:root {
  --lynx--black: #1f2022;
  --lynx--white: white;
  --lynx--medium-purple: #8979ec;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.w-layout-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

.navbar-logo-left {
  background-color: #fff;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.navbarcontainer {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  text-decoration: none;
  display: flex;
}

.navbar-content {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  text-decoration: none;
  display: flex;
}

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

.solar {
  object-fit: cover;
}

.navbar-menu {
  grid-column-gap: 32px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.navbar-menu .dark-mode-toggle,
.w-nav-menu .dark-mode-toggle {
  margin-left: 16px;
  margin-right: 0;
  align-self: center;
  flex-shrink: 0;
}

/* Ensure button is inline with nav links */
.w-nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.navbar-link {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 12px;
  text-decoration: none;
  display: flex;
}

.text {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.navbar-button {
  grid-column-gap: 8px;
  background-color: #000;
  border-radius: 9999px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  text-decoration: none;
  display: flex;
}

.text-2 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}

.hero-stack {
  grid-row-gap: 80px;
  background-color: #fff;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 64px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

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

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

.text-3 {
  text-align: center;
}

.actions {
  grid-column-gap: 16px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
  text-decoration: none;
  display: flex;
}

.button-style {
  grid-column-gap: 8px;
  background-color: #000;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 177px;
  height: 55px;
  padding: 12px 24px;
  text-decoration: none;
  display: flex;
}

.text-4 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.solar_3d {
  transform-origin: 50% 100%;
  mix-blend-mode: normal;
  object-fit: cover;
}

.solar-framework-planet-first-design-system-for-digital-experiences-0 {
  color: #000;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 66px;
  font-weight: 800;
  line-height: 120%;
  text-decoration: none;
}

.solar-framework-planet-first-design-system-for-digital-experiences-1 {
  text-align: center;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #30f 0%, #787f89 100%);
  -webkit-background-clip: text;
  background-clip: text;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 66px;
  font-weight: 800;
  line-height: 120%;
  text-decoration: none;
}

.solar-framework-planet-first-design-system-for-digital-experiences-3 {
  color: #000;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 120%;
  text-decoration: none;
}

.footer {
  grid-row-gap: 40px;
  object-fit: fill;
  background-color: #e7e0ec;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 64px 24px 8px;
  text-decoration: none;
  display: block;
  position: sticky;
  left: auto;
  right: auto;
  overflow: hidden;
}

.columns {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 960px;
  text-decoration: none;
  display: flex;
}

.frame-1 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 320px;
  text-decoration: none;
  display: flex;
}

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

.logo-wrapper {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
  text-decoration: none;
  display: flex;
}

.frame-2 {
  grid-row-gap: 11px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}

.text-5 {
  color: #000;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}

.hi-im-ravi-palwe-product-designer-ive-spent-more-than-19-years-crafting-large-scale-accessible-high {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.small-columns {
  grid-column-gap: 32px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 410px;
  padding-top: 79px;
  text-decoration: none;
  display: flex;
}

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

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

.text-6 {
  color: #212121;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}

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

.link-style {
  color: #212121;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.text-7 {
  color: #212121;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}

.link-style-2 {
  color: #212121;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.copyright {
  grid-column-gap: 32px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 960px;
  padding-top: 16px;
  padding-bottom: 16px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 -1px #e4ebf3;
}

.text-8 {
  color: #333;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.footer-2 {
  grid-row-gap: 40px;
  background-color: #e7e0ec;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 64px 24px 8px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.frame-3 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 320px;
  text-decoration: none;
  display: flex;
}

.column-3, .column-4 {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.text-9 {
  color: #212121;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}

.text-10 {
  color: #212121;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}

.link-style-3 {
  color: #212121;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.hero-without-image {
  background-color: #fff;
  border-bottom: 1px solid #e4ebf3;
  padding: 120px 30px 40px;
  position: relative;
  margin-top: 0;
}

.container {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.hero-wrapper-two {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.margin-bottom-24px {
  margin-bottom: 24px;
  font-family: Lato, sans-serif;
}

.button-primary {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  border-radius: 9999px;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  transition: all .2s;
}

.button-primary:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary:active {
  background-color: #43464d;
}

.brand {
  height: auto;
  padding-top: 20px;
}

.navbar {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-link {
  cursor: pointer;
  transition: opacity .2s;
}

.nav-link.w--current, .nav-link.current_state {
  color: #4830ff;
}

.hero-heading-right {
  grid-column-gap: 80px;
  background-color: #fff;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 64px 24px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.container-2 {
  grid-column-gap: 80px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  text-decoration: none;
  display: flex;
}

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

.text-11 {
  color: #000;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 120%;
  text-decoration: none;
}

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

.rectangle-462 {
  object-fit: cover;
}

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

.text-12 {
  color: #212121;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.text-13 {
  color: #212121;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.text-14 {
  color: #212121;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.we-design-for-lifecycle-and-modularity-which-sounds-dry-but-its-how-you-stop-waste-reusable-parts-cl {
  color: #212121;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}

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

.text-15 {
  color: #000;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 120%;
  text-decoration: none;
}

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

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

.text-16 {
  color: #212121;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.text-17 {
  color: #212121;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.lottie-animation {
  width: 370px;
}

.solar-sun-animation {
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
}

.solar-sun-animation > div {
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
}

@media screen and (max-width: 767px) {
  .solar-sun-animation {
    max-width: 100%;
    min-height: 220px;
  }
}

@media screen and (max-width: 479px) {
  .solar-sun-animation {
    max-width: 100%;
    min-height: 180px;
  }
}

.heading {
  font-family: Lato, sans-serif;
  font-size: 40px;
}

.heading-2 {
  font-family: Lato, sans-serif;
}

.heading-2.subhead {
  font-size: 20px;
}

.paragraphheader {
  margin-bottom: 0;
  padding-bottom: 24px;
  padding-left: 0;
  font-family: Lato, sans-serif;
  font-size: 17px;
  line-height: 30px;
  display: block;
}

.paragraphheader:focus {
  font-size: 20px;
}

.paragraphheader.sub {
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
}

.paragraphheader.sub3 {
  padding-bottom: 8px;
  font-family: Lato, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.gallery-slider {
  border-bottom: 1px solid #e4ebf3;
  padding: 80px 30px;
  position: relative;
}

.gallery-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.gallery-block {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.gallery-slide {
  background-color: #0000;
  height: auto;
}

.gallery-slide-wrapper {
  max-width: 47%;
  margin-right: 6%;
}

.gallery-slide-image {
  position: relative;
}

.gallery-image {
  width: 100%;
}

.gallery-slide-text {
  color: #f5f7fa;
  margin-bottom: 0;
  line-height: 32px;
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.gallery-slider-left {
  justify-content: center;
  align-items: center;
  width: 40px;
  display: flex;
  left: -50px;
}

.gallery-slider-left:focus-visible, .gallery-slider-left[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.slider-arrow-embed {
  color: #1a1b1f;
}

.gallery-slider-right {
  justify-content: center;
  align-items: center;
  width: 40px;
  display: flex;
  right: -50px;
}

.gallery-slider-right:focus-visible, .gallery-slider-right[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.gallery-slide-nav {
  display: none;
}

.team-slider {
  box-sizing: border-box;
  aspect-ratio: auto;
  opacity: 1;
  overflow-wrap: normal;
  object-fit: fill;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4ebf3;
  margin-left: auto;
  margin-right: auto;
  padding: 120px 30px 10px;
  font-family: Lato, sans-serif;
  display: block;
  position: relative;
}

.centered-heading {
  text-align: center;
  margin-bottom: 16px;
}

.centered-subheading {
  text-align: center;
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
}

.team-slider-wrapper {
  background-color: #0000;
  height: auto;
  margin-top: 50px;
}

.team-slide-wrapper {
  width: 21%;
  margin-right: 5%;
}

.team-block {
  background-color: #fff;
  padding-bottom: 24px;
}

.team-member-image-two {
  margin-bottom: 18px;
}

.team-block-info {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
}

.team-member-name-two {
  margin-bottom: 12px;
  font-family: Lato, sans-serif;
  font-weight: 600;
}

.team-member-text {
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
}

.text-link-arrow {
  color: #1a1b1f;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  display: flex;
}

.arrow-embed {
  margin-left: 2px;
  display: flex;
}

.team-slider-arrow {
  display: none;
}

.team-slider-nav {
  margin-top: 24px;
  font-size: 10px;
  position: static;
  bottom: -60px;
}

.image {
  margin-top: 20px;
}

.image-2 {
  margin-top: 20px;
  padding-top: 0;
}

.image-3, .image-4 {
  margin-top: 20px;
}

.features-list {
  border-bottom: 1px solid #e4ebf3;
  padding: 80px 30px;
  position: relative;
}

.features-wrapper-two {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.features-left {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 40%;
  display: flex;
}

.features-paragraph {
  margin-bottom: 24px;
}

.features-right {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 46%;
  margin-bottom: -16px;
  display: flex;
}

.features-block-two {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.features-image {
  object-fit: cover;
  width: 80px;
  height: 80px;
  margin-right: 16px;
}

.mask {
  box-sizing: border-box;
  object-fit: fill;
  width: auto;
}

.div-block-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #f5f7fa;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-top: 44px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  display: grid;
}

.lottie-animation-2 {
  width: 370px;
}

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

.div-block-3 {
  margin-top: 44px;
  margin-left: auto;
  margin-right: auto;
}

.hero-without-image-2 {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4ebf3;
  padding: 120px 30px 0;
  position: relative;
  margin-top: 0;
}

.container-3 {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.hero-wrapper-two-2 {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.margin-bottom-24px-2 {
  margin-bottom: 24px;
}

.button-primary-2 {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  border-radius: 9999px;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  transition: all .2s;
}

.button-primary-2:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary-2:active {
  background-color: #43464d;
}

.quick-stack {
  padding-left: 8px;
  padding-right: 8px;
}

.features-metrics {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4ebf3;
  padding: 17px 30px 60px;
  position: relative;
}

.features-wrapper {
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.features-block {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.features-title {
  margin-bottom: 8px;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
}

.features-title-small {
  font-size: 24px;
  line-height: 32px;
}

.logos-without-title {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4ebf3;
  padding: 60px 30px;
  position: relative;
}

.clients-wrapper-three {
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: -10px;
  display: flex;
}

.clients-image-three {
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

.image-5 {
  border-radius: 0;
  margin-bottom: 18px;
  margin-right: 21px;
}

.cell-4 {
  padding-left: 24px;
}

.hero-wrapper-two-3 {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.card_s1 {
  background-color: #fff;
}

.card_s1.card {
  background-color: #f6f7fa;
}

.div-block-4 {
  background-color: #4db5ab;
  padding: 20px;
}

.div-block-5 {
  text-align: center;
  background-color: #f6f7fa;
  margin-bottom: 18px;
}

.image-6 {
  padding: 8px 8px 9px;
}

.cell-5 {
  text-align: center;
  background-color: #fff;
}

.image-7 {
  text-align: center;
}

.lynx-subtitle {
  color: var(--lynx--black);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-family: Varela, sans-serif;
  font-size: 12px;
  line-height: 140%;
}

.lynx-button {
  background-color: var(--lynx--black);
  color: var(--lynx--white);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 22px 36px;
  font-family: Varela, sans-serif;
  font-size: 13px;
  line-height: 140%;
  text-decoration: none;
  transition: background-color .2s;
}

.lynx-button:hover {
  background-color: var(--lynx--medium-purple);
}

.lynx-content-hero {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1392px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.lynx-heading-hero {
  color: var(--lynx--black);
  max-width: 900px;
  margin-top: 0;
  margin-bottom: 36px;
  font-family: PT Serif, serif;
  font-size: 58px;
  font-weight: 400;
  line-height: 114%;
}

.lynx-block-center-hero {
  z-index: 10;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: -30px;
  display: flex;
  position: relative;
}

.lynx-hero-oval {
  background-image: url('../images/Hero_2.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 800px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  min-height: 650px;
  display: flex;
  box-shadow: 0 60px 60px -15px #1f20221a;
}

.quick-stack-3 {
  margin-left: auto;
  margin-right: auto;
}

.team-image-wrapper {
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.team-member-wrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}

.team-socials {
  grid-column-gap: .875rem;
  grid-row-gap: .875rem;
  background-color: #cbfb45;
  border-radius: 1rem;
  grid-template-rows: auto;
  grid-template-columns: max-content;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: center;
  margin-top: .5rem;
  padding: .25rem 1rem;
  display: flex;
}

.member-info-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: #fff;
  border-radius: 1.5rem;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
}

.team-social-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.text-size-medium {
  font-size: 1.25rem;
  font-weight: 400;
}

.team-list {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start center;
  display: grid;
}

.margin-bottom {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.text-size-large {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}

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

.team-image {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.team-item {
  background-color: #f8f8f8;
  border-radius: 2rem;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
}

.features-metrics-2 {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4ebf3;
  padding: 60px 30px;
  position: relative;
}

.container-4 {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.features-wrapper-2 {
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.features-block-2 {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.features-title-2 {
  margin-bottom: 8px;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
}

.features-title-small-2 {
  font-size: 24px;
  line-height: 32px;
}

@media screen and (max-width: 991px) {
  .navbar-logo-left {
    padding-right: 0;
  }

  .navbar-menu {
    max-width: unset;
  }

  .navbar-link, .navbar-button {
    justify-content: center;
  }

  .text-3 {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
  }

  .solar-framework-planet-first-design-system-for-digital-experiences-0, .solar-framework-planet-first-design-system-for-digital-experiences-1, .solar-framework-planet-first-design-system-for-digital-experiences-3 {
    font-size: 40px;
  }

  .columns {
    flex-direction: column;
    align-items: center;
  }

  .column, .content-style, .footer-links, .column-3, .column-4 {
    align-items: center;
  }

  .container {
    max-width: 728px;
  }

  .container-2 {
    flex-direction: column;
    align-items: center;
  }

  .gallery-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-slider-left {
    left: -20px;
  }

  .gallery-slider-right {
    right: -20px;
  }

  .team-slide-wrapper {
    width: 47%;
    margin-right: 6%;
  }

  .features-wrapper-two {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .features-left {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .features-right {
    max-width: 100%;
  }

  .container-3 {
    max-width: 728px;
  }

  .features-wrapper {
    justify-content: space-between;
  }

  .clients-image-three {
    margin-bottom: 30px;
  }

  .lynx-heading-hero {
    font-size: 48px;
  }

  .lynx-hero-oval {
    min-height: 500px;
  }

  .team-list {
    grid-column-gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .container-4 {
    max-width: 728px;
  }

  .features-wrapper-2 {
    justify-content: space-between;
  }
}

@media screen and (max-width: 767px) {
  .text-3 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .hero-without-image, .gallery-slider {
    padding: 100px 15px 60px;
  }

  .gallery-slide {
    margin-left: 10px;
    margin-right: 10px;
  }

  .gallery-slide-text {
    line-height: 30px;
  }

  .gallery-slider-left {
    left: -20px;
  }

  .gallery-slider-right {
    right: -20px;
  }

  .team-slider, .features-list, .hero-without-image-2, .features-metrics {
    padding: 100px 15px 60px;
  }

  .features-wrapper {
    flex-wrap: wrap;
    margin-bottom: -40px;
  }

  .features-block {
    width: 50%;
    margin-bottom: 40px;
  }

  .logos-without-title {
    padding: 60px 15px;
  }

  .clients-wrapper-three {
    margin-bottom: -30px;
  }

  .clients-image-three {
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .lynx-heading-hero {
    font-size: 40px;
  }

  .lynx-hero-oval {
    min-height: 320px;
  }

  .team-image-wrapper {
    height: 100%;
  }

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

  .team-list {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .text-size-large {
    font-size: 1.125rem;
  }

  .features-metrics-2 {
    padding: 60px 15px;
  }

  .features-wrapper-2 {
    flex-wrap: wrap;
    margin-bottom: -40px;
  }

  .features-block-2 {
    width: 50%;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 479px) {
  .hero-stack {
    grid-row-gap: 0px;
    justify-content: flex-start;
    padding-top: 100px;
    padding-bottom: 16px;
  }

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

  .title-section {
    margin-left: 0;
  }

  .text-3 {
    margin: 0 8px 15px;
  }

  .solar_3d {
    object-fit: contain;
    object-position: 0% 0%;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: 150px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
    padding-left: 0;
  }

  .solar-framework-planet-first-design-system-for-digital-experiences-0, .solar-framework-planet-first-design-system-for-digital-experiences-1, .solar-framework-planet-first-design-system-for-digital-experiences-3 {
    font-size: 30px;
  }

  .small-columns {
    flex-direction: column;
    align-items: center;
  }

  .menu-button {
    background-color: #41353500;
    flex: 0 auto;
  }

  .div-block {
    margin-left: auto;
    margin-right: auto;
    position: static;
  }

  .container {
    max-width: none;
  }

  .lottie-animation {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .gallery-wrapper {
    grid-template-columns: 1fr;
  }

  .gallery-slide-wrapper {
    max-width: 100%;
    margin-right: 0%;
  }

  .gallery-slider-left {
    left: -20px;
  }

  .gallery-slider-right {
    right: -20px;
  }

  .centered-heading {
    margin-bottom: 24px;
  }

  .team-slide-wrapper {
    width: 100%;
    margin-right: 0%;
  }

  .features-right {
    margin-bottom: -30px;
  }

  .features-block-two {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 30px;
  }

  .features-image {
    margin-bottom: 10px;
  }

  .div-block-2 {
    grid-template-columns: .25fr;
    grid-auto-flow: column;
  }

  .lottie-animation-2 {
    display: flex;
  }

  .cell-2 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: center;
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
  }

  .cell-3 {
    grid-column-gap: 11px;
    grid-row-gap: 11px;
    padding: 0;
  }

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

  .quick-stack {
    padding-left: 0;
  }

  .clients-wrapper-three {
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-items: center;
    margin-bottom: 0;
    display: grid;
  }

  .clients-image-three {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .cell-4 {
    padding-left: 0;
  }

  .lottie-animation-3 {
    display: block;
  }

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

  .lynx-heading-hero {
    font-size: 34px;
  }

  .lynx-hero-oval {
    min-height: 200px;
  }

  .team-list {
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

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

#w-node-a63ddd61-4fb4-9944-85a9-bb0f555c1037-80b3a17a, #w-node-_5ed11728-c0b0-a2c7-7127-def660295460-4a88fcd8 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
}

#w-node-_6057d890-98e4-d5b1-bc89-d9c91f6e4046-4a88fcd8, #w-node-_115e023f-8601-1931-bd47-203dab0f947a-4a88fcd8, #w-node-_167ea977-0bb9-fd52-5aea-ecd1837d88a7-4a88fcd8, #w-node-caca7597-19c0-9f81-18f6-686a64b90b96-4a88fcd8, #w-node-d54ec266-8879-f17c-5f59-5f9e488ba6d1-4a88fcd8, #w-node-_680af0b6-d696-f8e8-0b2d-125c72777727-594e3092 {
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
}

@media screen and (max-width: 479px) {
  #w-node-a63ddd61-4fb4-9944-85a9-bb0f555c1037-80b3a17a {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  #w-node-_5ed11728-c0b0-a2c7-7127-def660295460-4a88fcd8 {
    grid-template-rows: auto;
    grid-template-columns: minmax(238px, .25fr);
  }

  #w-node-_5ed11728-c0b0-a2c7-7127-def660295463-4a88fcd8 {
    grid-row: span 1 / span 1;
  }

  #w-node-_6057d890-98e4-d5b1-bc89-d9c91f6e4046-4a88fcd8 {
    grid-template-rows: auto;
    grid-template-columns: minmax(238px, .25fr);
  }

  #w-node-_6057d890-98e4-d5b1-bc89-d9c91f6e4049-4a88fcd8 {
    grid-row: span 1 / span 1;
  }

  #w-node-_115e023f-8601-1931-bd47-203dab0f947a-4a88fcd8 {
    grid-template-rows: auto;
    grid-template-columns: minmax(238px, .25fr);
  }

  #w-node-_115e023f-8601-1931-bd47-203dab0f947d-4a88fcd8 {
    grid-row: span 1 / span 1;
  }

  #w-node-_167ea977-0bb9-fd52-5aea-ecd1837d88a7-4a88fcd8 {
    grid-template-rows: auto;
    grid-template-columns: minmax(238px, .25fr);
  }

  #w-node-_167ea977-0bb9-fd52-5aea-ecd1837d88aa-4a88fcd8 {
    grid-row: span 1 / span 1;
  }

  #w-node-caca7597-19c0-9f81-18f6-686a64b90b96-4a88fcd8 {
    grid-template-rows: auto;
    grid-template-columns: minmax(238px, .25fr);
  }

  #w-node-caca7597-19c0-9f81-18f6-686a64b90b99-4a88fcd8 {
    grid-row: span 1 / span 1;
  }

  #w-node-d54ec266-8879-f17c-5f59-5f9e488ba6d1-4a88fcd8 {
    grid-template-rows: auto;
    grid-template-columns: minmax(238px, .25fr);
  }

  #w-node-d54ec266-8879-f17c-5f59-5f9e488ba6d4-4a88fcd8 {
    grid-row: span 1 / span 1;
  }

  #w-node-_680af0b6-d696-f8e8-0b2d-125c72777727-594e3092 {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
}

/* Dark Mode Styles */
:root {
  --dark-mode-bg: #1a1a1a;
  --dark-mode-text: #e0e0e0;
  --dark-mode-text-secondary: #b0b0b0;
  --dark-mode-nav-bg: #1f1f1f;
  --dark-mode-footer-bg: #2a2a2a;
  --dark-mode-border: #3a3a3a;
  --dark-mode-card-bg: #242424;
  --dark-mode-button-bg: #4830ff;
  --dark-mode-button-hover: #5a45ff;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 16px;
  vertical-align: middle;
  transition: all 0.3s ease;
  color: #000;
  font-size: 20px;
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 10;
}

.dark-mode-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.1);
}

.dark-mode-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

/* Default: show sun icon (light mode) */
.dark-mode-toggle .sun {
  display: block;
}

.dark-mode-toggle .moon {
  display: none;
}

/* When dark mode is active: show moon icon */
body.dark-mode .dark-mode-toggle .sun {
  display: none;
}

body.dark-mode .dark-mode-toggle .moon {
  display: block;
}

/* Dark Mode Active State */
body.dark-mode {
  background-color: var(--dark-mode-bg);
  color: var(--dark-mode-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .navbar {
  background-color: var(--dark-mode-nav-bg);
  border-bottom: 1px solid var(--dark-mode-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .hero-stack {
  background-color: var(--dark-mode-bg);
}

body.dark-mode .footer-2,
body.dark-mode .footer {
  background-color: var(--dark-mode-footer-bg);
}

body.dark-mode .text,
body.dark-mode .text-3,
body.dark-mode .text-5,
body.dark-mode .text-6,
body.dark-mode .text-7,
body.dark-mode .text-8,
body.dark-mode .text-9,
body.dark-mode .text-10,
body.dark-mode .text-11,
body.dark-mode .text-12,
body.dark-mode .text-13,
body.dark-mode .text-14,
body.dark-mode .text-15,
body.dark-mode .text-16,
body.dark-mode .text-17,
body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--dark-mode-text);
}

body.dark-mode .solar-framework-planet-first-design-system-for-digital-experiences-0,
body.dark-mode .solar-framework-planet-first-design-system-for-digital-experiences-3 {
  color: var(--dark-mode-text);
}

body.dark-mode .hi-im-ravi-palwe-product-designer-ive-spent-more-than-19-years-crafting-large-scale-accessible-high,
body.dark-mode .paragraphheader {
  color: var(--dark-mode-text-secondary);
}

body.dark-mode .nav-link {
  color: var(--dark-mode-text);
}

body.dark-mode .nav-link.w--current,
body.dark-mode .nav-link.current_state {
  color: var(--lynx--medium-purple);
}

body.dark-mode .link-style,
body.dark-mode .link-style-2,
body.dark-mode .link-style-3 {
  color: var(--dark-mode-text-secondary);
}

body.dark-mode .link-style:hover,
body.dark-mode .link-style-2:hover,
body.dark-mode .link-style-3:hover {
  color: var(--dark-mode-text);
}

body.dark-mode .button-style,
body.dark-mode .button-primary,
body.dark-mode .button-primary-2 {
  background-color: var(--dark-mode-button-bg);
  color: var(--lynx--white);
}

body.dark-mode .button-style:hover,
body.dark-mode .button-primary:hover,
body.dark-mode .button-primary-2:hover {
  background-color: var(--dark-mode-button-hover);
}

body.dark-mode .hero-without-image,
body.dark-mode .hero-without-image-2 {
  background-color: var(--dark-mode-bg);
  border-bottom-color: var(--dark-mode-border);
}

body.dark-mode .card_s1 {
  background-color: var(--dark-mode-card-bg);
}

body.dark-mode .card_s1.card {
  background-color: var(--dark-mode-card-bg);
}

body.dark-mode .features-list,
body.dark-mode .gallery-slider,
body.dark-mode .team-slider {
  background-color: var(--dark-mode-bg);
  border-bottom-color: var(--dark-mode-border);
}

body.dark-mode .features-metrics,
body.dark-mode .features-metrics-2,
body.dark-mode .logos-without-title {
  background-color: var(--dark-mode-card-bg);
  border-bottom-color: var(--dark-mode-border);
}

body.dark-mode .copyright {
  box-shadow: 0 -1px var(--dark-mode-border);
}

body.dark-mode .dark-mode-toggle {
  color: var(--dark-mode-text);
  border-color: var(--dark-mode-text);
}

body.dark-mode .dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .w-nav-link {
  color: var(--dark-mode-text);
}

body.dark-mode .w-nav-link.w--current {
  color: var(--lynx--medium-purple);
}

/* Mobile hamburger menu styles for better readability */
[data-nav-menu-open] {
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-nav-menu-open] .w-nav-link {
  color: #000000 !important;
  padding: 16px 20px !important;
  display: block !important;
  border-bottom: 1px solid #e4ebf3;
  transition: background-color 0.2s ease;
}

[data-nav-menu-open] .w-nav-link:hover {
  background-color: #f5f5f5 !important;
}

[data-nav-menu-open] .w-nav-link.w--current {
  color: var(--lynx--medium-purple) !important;
  background-color: rgba(72, 48, 255, 0.05) !important;
}

[data-nav-menu-open] .w-nav-link strong {
  color: inherit !important;
}

/* Dark mode mobile menu */
body.dark-mode [data-nav-menu-open] {
  background-color: var(--dark-mode-nav-bg) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border-top: 1px solid var(--dark-mode-border);
}

body.dark-mode [data-nav-menu-open] .w-nav-link {
  color: var(--dark-mode-text) !important;
  border-bottom-color: var(--dark-mode-border) !important;
}

body.dark-mode [data-nav-menu-open] .w-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode [data-nav-menu-open] .w-nav-link.w--current {
  color: var(--lynx--medium-purple) !important;
  background-color: rgba(72, 48, 255, 0.15) !important;
}

/* Mobile menu overlay */
.w-nav-overlay {
  background-color: rgba(0, 0, 0, 0.1);
}

body.dark-mode .w-nav-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Hamburger button when open */
.w-nav-button.w--open {
  background-color: #f5f5f5 !important;
  color: #000000 !important;
}

body.dark-mode .w-nav-button.w--open {
  background-color: var(--dark-mode-card-bg) !important;
  color: var(--dark-mode-text) !important;
}

body.dark-mode .div-block-2,
body.dark-mode .div-block-5 {
  background-color: var(--dark-mode-card-bg);
}

body.dark-mode .team-block {
  background-color: var(--dark-mode-card-bg);
}

body.dark-mode .heading,
body.dark-mode .heading-2 {
  color: var(--dark-mode-text);
}

/* Logo color changes in dark mode */
body.dark-mode .solar {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

body.dark-mode .brand {
  filter: brightness(0) invert(1);
}

body.dark-mode .brand img.solar {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Dark mode styles for how-to-use.html page */
/* Override CSS variables for dark mode */
:root.dark-mode,
html.dark-mode,
html[data-theme="dark"],
body.dark-mode {
  --bg-app-canvas: #1a1a1a;
  --bg-card-surface: #242424;
  --bg-card-surface-hover: #2a2a2a;
  --bg-badge-neutral: #1f1f1f;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-tertiary: #888888;
  --text-link: #DDEE88;
  --border-subtle: #3a3a3a;
  --border-contrast: #4a4a4a;
}

body.dark-mode .container44 {
  background-color: var(--dark-mode-bg);
  color: var(--dark-mode-text);
  padding-top: 120px;
}

body.dark-mode .container44 header {
  background-color: var(--dark-mode-card-bg);
  border-color: var(--dark-mode-border);
  color: var(--dark-mode-text);
}

body.dark-mode .container44 header h1 {
  color: var(--dark-mode-text);
}

body.dark-mode .container44 header .subtitle {
  color: var(--dark-mode-text-secondary);
}

body.dark-mode .container44 section {
  background-color: var(--dark-mode-card-bg);
  border-color: var(--dark-mode-border);
  color: var(--dark-mode-text);
}

body.dark-mode .container44 section h2,
body.dark-mode .container44 section h3,
body.dark-mode .container44 section h4 {
  color: var(--dark-mode-text);
}

body.dark-mode .container44 section p {
  color: var(--dark-mode-text-secondary);
}

body.dark-mode .container44 .download-section {
  background: linear-gradient(135deg, rgba(221, 238, 136, 0.2) 0%, rgba(187, 221, 85, 0.2) 100%);
  border-color: var(--dark-mode-border);
  color: var(--dark-mode-text);
}

body.dark-mode .container44 .download-section h2,
body.dark-mode .container44 .download-section p {
  color: var(--dark-mode-text);
}

body.dark-mode .container44 .code-block {
  background-color: #0a0a0a;
  border-color: var(--dark-mode-border);
}

body.dark-mode .container44 .code-block code {
  color: #e5e5e5;
}

body.dark-mode .container44 .btn-primary {
  background-color: var(--dark-mode-button-bg);
  color: var(--lynx--white);
}

body.dark-mode .container44 .btn-primary:hover {
  background-color: var(--dark-mode-button-hover);
}

body.dark-mode .container44 .btn-secondary {
  background-color: transparent;
  color: var(--dark-mode-text);
  border-color: var(--dark-mode-border);
}

body.dark-mode .container44 .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .container44 .feature-card {
  background-color: var(--dark-mode-bg);
  border-color: var(--dark-mode-border);
}

body.dark-mode .container44 .feature-title {
  color: var(--dark-mode-text);
}

body.dark-mode .container44 .feature-desc {
  color: var(--dark-mode-text-secondary);
}

body.dark-mode .container44 .color-swatch {
  background-color: var(--dark-mode-card-bg);
  border-color: var(--dark-mode-border);
}

body.dark-mode .container44 .color-name {
  color: var(--dark-mode-text-secondary);
}

body.dark-mode .container44 .color-value {
  color: var(--dark-mode-text-tertiary);
}

body.dark-mode .container44 .alert {
  border-left-color: currentColor;
}

body.dark-mode .container44 .alert-success {
  background-color: rgba(52, 211, 153, 0.15);
  color: var(--dark-mode-text);
}

body.dark-mode .container44 .alert-info {
  background-color: rgba(13, 148, 136, 0.15);
  color: var(--dark-mode-text);
}

body.dark-mode .container44 .alert-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: var(--dark-mode-text);
}

body.dark-mode .container44 .steps li::before {
  background-color: var(--dark-mode-button-bg);
  color: var(--lynx--white);
}

body.dark-mode .container44 .highlight {
  background-color: rgba(221, 238, 136, 0.3);
  color: var(--accent-primary);
}

body.dark-mode .container44 ul li,
body.dark-mode .container44 ol li {
  color: var(--dark-mode-text-secondary);
}

body.dark-mode .container44 strong {
  color: var(--dark-mode-text);
}

/* LinkedIn icon visibility in dark mode */
body.dark-mode .w-inline-block img[alt*="LinkedIn"],
body.dark-mode .w-inline-block img[src*="linkedin"],
body.dark-mode .w-inline-block img[src*="product%20icon-2"] {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Alternative: if the icon is in a link */
body.dark-mode a.w-inline-block img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

body.dark-mode a.w-inline-block:hover img {
  opacity: 1;
}

/* Principle page icons visibility in dark mode */
body.dark-mode .team-block-info img,
body.dark-mode .team-block-info .image,
body.dark-mode .team-block-info .image-2,
body.dark-mode .team-block-info .image-3,
body.dark-mode .team-block-info .image-4 {
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

/* Target iconoir icons specifically */
body.dark-mode img[src*="iconoir_arc-3d"],
body.dark-mode img[src*="iconoir_accessibility"],
body.dark-mode img[src*="iconoir_angle-tool"],
body.dark-mode img[src*="iconoir_soil-alt"] {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Responsive styles for dark mode toggle */
@media screen and (max-width: 991px) {
  .dark-mode-toggle {
    width: 36px;
    height: 36px;
    margin-left: 12px;
  }

  .dark-mode-toggle svg {
    width: 18px;
    height: 18px;
  }

  .navbar-menu .dark-mode-toggle,
  .w-nav-menu .dark-mode-toggle {
    margin-left: 12px;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  body.dark-mode .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .dark-mode-toggle {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    padding: 0;
  }

  .dark-mode-toggle svg {
    width: 16px;
    height: 16px;
  }

  .navbar-menu .dark-mode-toggle,
  .w-nav-menu .dark-mode-toggle {
    margin-left: 8px;
    margin-right: 8px;
  }

  /* Ensure toggle is visible in mobile menu */
  .w-nav-menu[data-nav-menu-open] .dark-mode-toggle {
    display: inline-flex !important;
    margin: 8px auto;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure button is visible even when menu is collapsed */
  .navbar .dark-mode-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media screen and (max-width: 479px) {
  .dark-mode-toggle {
    width: 30px;
    height: 30px;
    margin-left: 6px;
  }

  .dark-mode-toggle svg {
    width: 14px;
    height: 14px;
  }

  .navbar-menu .dark-mode-toggle,
  .w-nav-menu .dark-mode-toggle {
    margin-left: 6px;
    margin-right: 6px;
  }

  /* Ensure toggle button is accessible on very small screens */
  .w-nav-menu .dark-mode-toggle {
    min-width: 30px;
    min-height: 30px;
  }

  /* Responsive dark mode styles for how-to-use page */
  body.dark-mode .container44 {
    padding: 100px 16px 16px;
  }

  body.dark-mode .container44 header,
  body.dark-mode .container44 section {
    padding: 16px;
  }

  body.dark-mode .container44 .download-section {
    padding: 24px 16px;
  }

  body.dark-mode .container44 .code-block {
    padding: 12px;
    font-size: 12px;
  }

  body.dark-mode .container44 .color-grid {
    grid-template-columns: 1fr;
  }

  body.dark-mode .container44 .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* Ensure images are responsive in dark mode */
@media screen and (max-width: 767px) {
  body.dark-mode .theme-image {
    max-width: 100%;
    height: auto;
  }

  body.dark-mode .w-layout-cell .theme-image {
    width: 100%;
    max-width: 260px;
  }
}

@media screen and (max-width: 479px) {
  body.dark-mode .w-layout-cell .theme-image {
    max-width: 100%;
    width: 100%;
  }
}

/* Touch-friendly dark mode toggle */
@media (hover: none) and (pointer: coarse) {
  .dark-mode-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .dark-mode-toggle:active {
    transform: scale(0.95);
    background-color: rgba(0, 0, 0, 0.1);
  }

  body.dark-mode .dark-mode-toggle:active {
    background-color: rgba(255, 255, 255, 0.15);
  }
}

/* Additional mobile responsive improvements for dark mode */
@media screen and (max-width: 767px) {
  /* Ensure dark mode text is readable on mobile */
  body.dark-mode {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Improve dark mode card spacing on mobile */
  body.dark-mode .card_s1 {
    padding: 16px;
  }

  /* Better spacing for dark mode sections on mobile */
  body.dark-mode .hero-without-image {
    padding: 24px 16px;
  }

  /* Improve dark mode footer on mobile */
  body.dark-mode .footer-2 {
    padding: 32px 16px 8px;
  }
}

/* Prevent horizontal scroll on mobile in dark mode */
@media screen and (max-width: 479px) {
  body.dark-mode {
    overflow-x: hidden;
  }

  body.dark-mode * {
    max-width: 100%;
  }

  /* Ensure images don't overflow in dark mode */
  body.dark-mode img {
    max-width: 100%;
    height: auto;
  }
}

/* GitHub Button Styles */
.button-secondary {
  grid-column-gap: 8px;
  background-color: transparent;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  height: 55px;
  padding: 12px 24px;
  text-decoration: none;
  display: inline-flex;
  transition: all 0.2s ease;
  color: #000;
}

.button-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.3);
}

.button-secondary .text-4 {
  color: #000;
}

.github-icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

/* Open Source Badge */
.opensource-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background-color: rgba(221, 238, 136, 0.2);
  border: 1px solid rgba(221, 238, 136, 0.4);
  border-radius: 9999px;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #6B8E23;
  margin-bottom: 16px;
}

/* Dark mode styles for new elements */
body.dark-mode .button-secondary {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

body.dark-mode .button-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .button-secondary .text-4 {
  color: #fff;
}

body.dark-mode .opensource-badge {
  background-color: rgba(221, 238, 136, 0.15);
  border-color: rgba(221, 238, 136, 0.3);
  color: #DDEE88;
}

body.dark-mode .github-icon {
  filter: brightness(0) invert(1);
}