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

@font-face {
  font-family: "MiSans";
  src: url("fonts/MiSans-Semibold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --black: #000;
  --text-secondary: #666;
  --line: #e3e5ed;
  --accent: #03f;
  --content-min: 1280px;
  --content-max: 1680px;
  --page-gutter: 60px;
  --radius-300: clamp(228.571px, 17.8571vw, 300px);
  --font-weight-regular: 400;
  --font-weight-semibold: 500;
}

* {
  box-sizing: border-box;
}

html {
  min-width: var(--content-min);
  background: #fff;
}

body {
  min-width: var(--content-min);
  min-height: 100vh;
  margin: 0;
  color: var(--black);
  font-family: "PingFang SC", "MiSans", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}

p,
li,
dd,
dt,
a,
button,
input,
textarea,
select {
  font-weight: var(--font-weight-regular);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: var(--font-weight-semibold);
}

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

img {
  display: block;
}

.point-bg {
  min-height: 100vh;
  background-color: #fff;
  background-image: radial-gradient(circle at 1px 1px, rgba(230, 230, 230, 0.6) 1px, transparent 1.1px);
  background-size: 14px 14px;
}

.responsive-notice {
  display: none;
}

@media (max-width: 1024px) {
  body:not(.responsive-notice-ready) > * {
    visibility: hidden;
  }

  html.responsive-notice-active,
  body.responsive-notice-active {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  .responsive-notice {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: block;
    min-width: 0;
    overflow: hidden;
    background-color: #fff;
    background-image: radial-gradient(circle at 1px 1px, rgba(230, 230, 230, 0.6) 1px, transparent 1.1px);
    background-size: 14px 14px;
  }

  .responsive-notice-panel {
    position: absolute;
    top: 22vh;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    max-width: calc(100vw - 40px);
    transform: translateX(-50%);
  }

  .responsive-notice-art {
    width: 83px;
    height: 68px;
    object-fit: contain;
  }

  .responsive-notice-panel p {
    margin: 20px 0 26px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    white-space: nowrap;
  }

  .responsive-notice-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 32px;
    padding: 6px 16px;
    border: 0;
    border-radius: 100px;
    color: #000;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    background: #e8e8e8;
    cursor: pointer;
    transition: background-color 180ms ease;
  }

  .responsive-notice-button:hover,
  .responsive-notice-button:focus-visible {
    background: #ddd;
  }

  .responsive-notice-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  body.responsive-notice-dismissed .responsive-notice {
    display: none;
  }
}

@media (max-width: 390px) {
  .responsive-notice-panel {
    max-width: calc(100vw - 24px);
  }

  .responsive-notice-panel p {
    font-size: clamp(14px, 4.1026vw, 16px);
  }

  .responsive-notice-button {
    width: 112px;
    height: 40px;
    font-size: 16px;
  }
}

[data-site-header] {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
}

.site-header {
  width: 100%;
  min-width: var(--content-min);
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition:
    background-color 220ms ease,
    -webkit-backdrop-filter 220ms ease,
    backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: #fff;
}

.design-system-page .site-header.is-scrolled,
.ai-workflow-page .site-header.is-scrolled,
.team-management-page .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.product-page [data-site-header] {
  position: relative;
  top: auto;
  z-index: auto;
}

.product-page .site-header,
.product-page .site-header.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-max);
  height: 80px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.brand-group,
.brand,
.nav-actions,
.nav-links,
.nav-tools {
  display: flex;
  align-items: center;
}

.brand-group {
  gap: 12px;
  flex: 0 0 auto;
}

.brand {
  height: 32px;
}

.brand-logo {
  width: 154px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0);
  transition: filter 180ms ease;
}

.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  filter: brightness(0) invert(40%);
}

.phone {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
  transition: color 180ms ease;
}

.phone:hover,
.phone:focus-visible,
.phone:active {
  color: #999;
}

.nav-actions,
.nav-links {
  gap: 40px;
}

.nav-tools {
  gap: 12px;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
}

.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 100px;
  background: #000;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 220ms ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-current::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.about-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: 7px;
  width: 100px;
  height: 32px;
  border: 1px solid #000;
  border-radius: 100px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
}

.about-label,
.about-arrow {
  position: relative;
  z-index: 1;
}

.about-arrow {
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.about-arrow img {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  transition: transform 420ms cubic-bezier(0.25, 1, 0.5, 1), filter 180ms ease;
}

.arrow-next {
  transform: translateX(-22px);
}

.about-button:hover,
.about-button:focus-visible {
  color: #fff;
  background: #444;
}

.about-button.is-current {
  color: #fff;
  background: #000;
}

.about-button.is-current:hover,
.about-button.is-current:focus-visible {
  background: #444;
}

.about-button:hover .arrow-primary,
.about-button:focus-visible .arrow-primary {
  transform: translateX(22px);
}

.about-button:hover .arrow-next,
.about-button:focus-visible .arrow-next {
  transform: translateX(0);
}

.about-button:hover .about-arrow img,
.about-button:focus-visible .about-arrow img,
.about-button.is-current .about-arrow img {
  filter: invert(1);
}

.language-switch {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 24px 24px;
  gap: 2px;
  width: 58px;
  height: 32px;
  padding: 4px;
  border-radius: 100px;
  background: #e8e8e8;
}

.language-switch-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #000;
  transform: translateX(0);
  transition: transform 460ms cubic-bezier(0.28, 0.11, 0.32, 1);
  will-change: transform;
}

.language-option {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 17px;
  transition: color 180ms ease, background-color 180ms ease;
}

.language-zh {
  color: #fff;
}

.language-en {
  color: #000;
}

.language-option:not(.is-current):hover,
.language-option:not(.is-current):focus-visible {
  background: #fff;
}

.language-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.language-switch.is-en-selected .language-switch-indicator {
  transform: translateX(26px);
}

.language-switch.is-en-selected .language-zh {
  color: #000;
}

.language-switch.is-en-selected .language-en {
  color: #fff;
  background: transparent;
}

/* English placeholder */
.english-page {
  min-height: 100vh;
  overflow: hidden;
}

.english-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-top: 228px;
}

.english-empty-icon {
  position: relative;
  width: 96px;
  height: 58px;
}

.english-empty-symbol {
  width: 58px;
  height: 58px;
  transform: scaleX(-1);
}

.english-empty-character {
  position: absolute;
  top: 9.1px;
  left: 67.3px;
  width: 28.7px;
  height: 43.49px;
}

.english-empty p {
  margin: 23px 0 24px;
  color: #666;
  font-size: 14px;
  line-height: 26px;
}

.english-empty-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 6px 16px;
  border-radius: 100px;
  background: #e8e8e8;
  font-size: 14px;
  line-height: 20px;
  transition: background-color 180ms ease;
}

.english-empty-link:hover,
.english-empty-link:focus-visible {
  background: #dcdcdc;
}

.english-empty-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 404 */
.not-found-root,
.not-found-page {
  min-width: 0;
}

.not-found-page {
  min-height: 100vh;
  overflow: hidden;
}

.not-found-main {
  position: relative;
  min-height: 100vh;
}

.not-found-content {
  position: absolute;
  top: 26vh;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.not-found-art {
  width: 83px;
  height: 68px;
  object-fit: contain;
}

.not-found-content p {
  margin: 20px 0 26px;
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  white-space: nowrap;
}

.not-found-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 6px 16px;
  border-radius: 100px;
  color: #000;
  background: #e8e8e8;
  font-size: 14px;
  line-height: 20px;
  transition: background-color 180ms ease;
}

.not-found-button:hover,
.not-found-button:focus-visible {
  background: #dcdcdc;
}

.not-found-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.not-found-footer {
  bottom: max(24px, 16.444vh);
  font-size: 12px;
}

/* Product experience: Goto Top */
.goto-top {
  position: fixed;
  right: 28px;
  bottom: 16px;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #333;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  cursor: pointer;
  pointer-events: none;
  transition:
    color 180ms ease,
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 220ms;
}

.goto-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.goto-top:hover,
.goto-top:focus-visible,
.goto-top:active {
  color: #999;
}

.goto-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.goto-top-icon {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("assets/goto-top.svg") center / contain no-repeat;
  mask: url("assets/goto-top.svg") center / contain no-repeat;
}

body.responsive-notice-active .goto-top {
  display: none;
}

.brand:focus-visible,
.phone:focus-visible,
.nav-link:focus-visible,
.about-button:focus-visible,
.home-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.page-content,
.home-main {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
}

.home-main {
  min-height: max(820px, calc(100vh - 80px));
  padding-top: max(0px, calc(22vh - 80px));
}

.home-showcase {
  display: flex;
  flex-direction: column;
  gap: 66px;
  width: 100%;
  margin: 0 auto;
}

.home-row {
  display: block;
  width: 100%;
  height: clamp(106.667px, 8.3333vw, 140px);
}

.home-product-motion,
.home-design-motion,
.home-ai-motion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 66px;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.home-product-row:hover > .home-product-motion,
.home-product-row:focus-visible > .home-product-motion {
  transform: translateX(-40px);
}

.home-design-row:hover > .home-design-motion,
.home-design-row:focus-visible > .home-design-motion {
  transform: translateX(40px);
}

.home-ai-row:hover > .home-ai-motion,
.home-ai-row:focus-visible > .home-ai-motion {
  transform: translateX(-40px);
}

.home-row h1,
.home-row h2 {
  flex: 0 0 auto;
  margin: 0;
  font-family: "MiSans", sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 56px;
  white-space: nowrap;
}

.home-media {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.home-row:nth-child(1) .home-media,
.home-row:nth-child(2) .home-media {
  width: clamp(497.778px, 38.8889vw, 653.333px);
}

.home-row:nth-child(3) .home-media {
  width: clamp(480.889px, 37.5694vw, 631.167px);
}

.home-marquee-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: home-marquee 20s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.home-page .home-marquee-track {
  animation-play-state: running;
}

.home-marquee-track img {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  object-fit: contain;
}

@keyframes home-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.home-fade-gallery {
  background: #f7fbff;
}

.home-fade-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.home-fade-slide.is-active {
  z-index: 2;
  opacity: 1;
}

.home-zoom-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center;
  animation: home-zoom 16s infinite;
  animation-play-state: paused;
  will-change: transform;
}

.home-page .home-zoom-image {
  animation-play-state: running;
}

@keyframes home-zoom {
  0% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  78% {
    transform: scale(1.2);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }

  100% {
    transform: scale(1);
  }
}

.home-footer-meta {
  position: absolute;
  right: auto;
  bottom: 40px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  color: #999;
  font-size: 13px;
  line-height: 22px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.home-footer-meta .phone {
  color: #999;
}

.home-footer-meta .phone:hover,
.home-footer-meta .phone:focus-visible,
.home-footer-meta .phone:active {
  color: #c7c7c7;
}

.about-footer-meta,
.special-footer-meta {
  bottom: 16px;
  font-size: 12px;
}

.about-main {
  min-height: max(820px, calc(100vh - 80px));
  padding-top: 44px;
  padding-bottom: 108px;
}

.page-heading {
  margin: 0 0 56px;
  font-family: "MiSans", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 56px;
}

.profile {
  position: relative;
  min-height: 150px;
  border-bottom: 1px solid rgba(227, 229, 237, 0.75);
}

.about-header-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 98px;
  object-fit: contain;
}

.identity-row,
.profile-details {
  position: absolute;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.identity-row {
  top: 25.6px;
  left: 112px;
  gap: 14px;
}

.identity-row strong {
  margin-right: 43px;
}

.profile-details {
  top: 70.6px;
  left: 110px;
  gap: 32px;
}

.profile-details strong {
  margin-right: -1px;
}

.identity-row strong,
.profile-details strong {
  font-weight: 500;
}

.identity-row,
.profile-details {
  font-size: 14px;
  line-height: normal;
}

.experience {
  margin-top: 56px;
}

.experience > h2 {
  margin: 0 0 28px;
  font-family: "MiSans", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.experience-card {
  height: 290px;
  padding: 28px 17px 28px 28px;
  overflow: hidden;
  border: 0.5px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.experience-card h3 {
  margin: 0 0 32px;
  font-family: "MiSans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.experience-card p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 24px;
}

.experience-card p:last-child {
  margin-bottom: 0;
}

.pe-stage {
  width: 100%;
  margin: 0 auto;
  padding-top: 34px;
  background: #fff;
}

.pe-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-gutter) * 2));
  height: 56px;
  margin: 0 auto 40px;
}

.product-page .pe-title-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-page .pe-title-bar.is-stuck {
  height: 104px;
}

.product-page .pe-title-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  background: #fff;
  transform: translateX(-50%);
}

.pe-title-name {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 20px;
}

.pe-title-name h1 {
  margin: 0;
  font-family: "MiSans", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 56px;
  white-space: nowrap;
}

.pe-title-name img {
  width: 159.5px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0);
}

.project-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  height: 44px;
  padding: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #f4f7ff;
  box-sizing: border-box;
  white-space: nowrap;
}

.project-tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 0;
  width: var(--tab-width, 0px);
  height: 36px;
  border-radius: 999px;
  background: rgb(29, 29, 31);
  transform: translateX(var(--tab-x, 0px));
  opacity: 0;
  pointer-events: none;
}

.project-tabs.is-ready .project-tab-indicator {
  opacity: 1;
  will-change: width, transform;
  transition:
    width 460ms cubic-bezier(0.28, 0.11, 0.32, 1),
    transform 460ms cubic-bezier(0.28, 0.11, 0.32, 1);
}

.project-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  color: #000;
  font-size: 14px;
  line-height: 18px;
  opacity: 0.8;
  -webkit-tap-highlight-color: transparent;
}

.project-tab.is-current {
  color: #fff;
  opacity: 1;
}

.project-tabs:not(.is-ready) .project-tab.is-current {
  border-radius: 100px;
  background: #000;
}

.project-tab:not(.is-current):hover,
.project-tab:not(.is-current):focus-visible {
  opacity: 1;
}

.project-tabs.is-ready .project-tab {
  will-change: color;
  transition: color 180ms ease;
}

.project-tab:focus-visible {
  outline: none;
}

.pe-cont {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.pe-cont-one {
  height: 601px;
  background: #f7f9ff;
}

.pe-cont-one-inner {
  position: relative;
  width: 717px;
  height: 100%;
  margin: 0 auto;
}

.pe-cont-one-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 629px;
  height: 525px;
  object-fit: contain;
  opacity: 0.5;
  transform: translate(-50%, -50%);
}

.pe-cont-one-copy {
  position: absolute;
  top: 196px;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 717px;
  color: #000;
}

.pe-cont-one-copy p,
.pe-cont-one-copy h2 {
  width: 100%;
  margin: 0;
}

.pe-cont-one-copy p {
  font-size: 16px;
  line-height: 28px;
}

.pe-cont-one-copy h2 {
  font-size: 40px;
  line-height: 55px;
  text-align: center;
}

.pe-cont-two {
  height: 1155px;
  color: #fff;
  background: #1e1e1f;
}

.pe-cont-two-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(100%, 1440px);
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}

.pe-cont-two-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 100px var(--page-gutter) 0;
}

.pe-problems > h2,
.pe-plan-heading h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
  text-align: center;
}

.pe-problems > h2 {
  margin-bottom: 76px;
}

.pe-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.pe-problem-card {
  height: 192px;
  padding: 36px 33px 24px 28px;
  border-radius: 20px;
  background: #232324;
}

.pe-problem-card h3 {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.pe-problem-card p {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
}

.pe-plan {
  margin-top: 111px;
}

.pe-plan-heading p {
  margin: 40px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}

.pe-step-list {
  display: flex;
  flex-direction: column;
  gap: 49px;
  margin: 70px 0 0;
  padding: 0;
  list-style: none;
}

.pe-step {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 98px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.pe-step-last {
  min-height: 72px;
  padding-bottom: 0;
  border-bottom: 0;
}

.pe-step-number {
  flex: 0 0 87px;
  font-family: "MiSans", sans-serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 72px;
}

.pe-step-copy {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pe-step-copy h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.pe-step-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 24px;
}

.pe-step-desc-wide {
  display: flex;
  gap: 28px;
  white-space: nowrap;
}

.pe-rounded-top-300 {
  border-radius: var(--radius-300) var(--radius-300) 0 0;
}

.pe-rounded-bottom-300 {
  border-radius: 0 0 var(--radius-300) var(--radius-300);
}

.pe-language-foundation,
.pe-language-elements,
.pe-language-rules {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.pe-language-foundation {
  height: 772px;
  background: #f8faff;
}

.pe-language-foundation-inner {
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-gutter) * 2));
  height: 100%;
  margin: 0 auto;
  padding: 120px 0 115px;
}

.pe-language-foundation-inner > h2 {
  margin: 0 0 80px;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
}

.pe-language-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(112px, 11.041667vw, 159px) minmax(0, 1fr) clamp(112px, 11.041667vw, 159px) minmax(0, 1fr);
  align-items: start;
}

.pe-language-column h3,
.pe-language-result h3 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
}

.pe-language-item {
  margin-top: 36px;
}

.pe-language-item + .pe-language-item {
  margin-top: 36px;
}

.pe-language-item strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 24px;
  padding: 0 16px;
  border-radius: 100px;
  color: #fff;
  background: #000;
  font-size: 14px;
  line-height: 14px;
}

.pe-language-item p,
.pe-language-result p {
  margin: 16px 0 0;
  color: #666;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 26px;
}

.pe-language-item b {
  font-weight: var(--font-weight-semibold);
}

.pe-language-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 192px auto 0;
  border-radius: 50%;
  background: #ebedf2;
  font-size: 25px;
  line-height: 32px;
}

.pe-language-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
}

.pe-language-result > div {
  width: 100%;
}

.pe-language-result > span {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
}

.pe-language-elements {
  height: 560px;
  background: #fff;
}

.pe-language-elements-inner,
.pe-language-rules-inner {
  display: flex;
  align-items: center;
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-gutter) * 2));
  height: 100%;
  margin: 0 auto;
}

.pe-language-elements-inner {
  gap: clamp(96px, 10vw, 168px);
}

.pe-language-elements-inner > h2,
.pe-language-rules-inner > h2 {
  flex: 0 0 clamp(286px, 22.916667vw, 385px);
  margin: 0;
  font-size: 40px;
  line-height: 64px;
}

.pe-element-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 160px);
  gap: 40px;
  min-width: 0;
}

.pe-element-card {
  position: relative;
  min-width: 0;
  height: 160px;
  padding: 28px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, #f2f6ff 18%, #fff 85%);
}

.pe-element-card-tall {
  grid-row: 1 / 3;
  height: 360px;
  padding-left: 21px;
}

.pe-element-card h3,
.pe-element-card p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.pe-element-card h3 {
  font-size: 20px;
  line-height: 28px;
}

.pe-element-card p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
}

.pe-element-card img {
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 54%;
  height: auto;
  object-fit: contain;
}

.pe-element-card-tall img {
  right: 7%;
  bottom: 22%;
  width: 86%;
}

.pe-language-rules {
  height: 610px;
  background: #f8faff;
}

.pe-language-rules-inner {
  gap: clamp(96px, 10vw, 168px);
  padding-top: 80px;
  padding-bottom: 88px;
}

.pe-language-rules-content {
  flex: 1 1 auto;
  min-width: 0;
}

.pe-language-rules-content p {
  margin: 0 0 36px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 26px;
}

.pe-language-rules-content img {
  display: block;
  width: min(100%, 780px);
  height: auto;
  margin-left: auto;
  object-fit: contain;
}

.design-language {
  position: relative;
  width: 100%;
  height: 864px;
  overflow: hidden;
  background-color: #fff;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(226, 226, 226, 0.62) 1px, transparent 1.1px),
    linear-gradient(117deg, #fff 52%, rgba(249, 246, 254, 0.76) 76%, rgba(233, 247, 255, 0.78) 100%);
  background-size: 14px 14px, 100% 100%;
}

.dl-shell {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  height: 864px;
  margin: 0 auto;
}

.dl-shell > h2 {
  position: absolute;
  top: 80px;
  left: 50%;
  z-index: 5;
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.dl-tabs {
  --dl-tab-x: 0px;
  --dl-tab-width: 96px;
  position: absolute;
  top: 170px;
  left: 50%;
  z-index: 6;
  display: grid;
  grid-template-columns: 96px 100px 100px 100px 72px 72px 128px 128px;
  width: 808px;
  height: 56px;
  padding: 6px;
  overflow: hidden;
  border-radius: 100px;
  background: #f4f7ff;
  transform: translateX(-50%);
}

.dl-tab-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 0;
  width: var(--dl-tab-width);
  height: 44px;
  border-radius: 100px;
  background: #000;
  transform: translateX(var(--dl-tab-x));
  transition: width 460ms cubic-bezier(0.28, 0.11, 0.32, 1), transform 460ms cubic-bezier(0.28, 0.11, 0.32, 1);
  will-change: width, transform;
}

.dl-tab {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  color: #666;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 180ms ease;
  white-space: nowrap;
}

.dl-tab:hover,
.dl-tab:focus-visible {
  color: #000;
}

.dl-tab.is-active {
  color: #fff;
}

.dl-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.dl-panels,
.dl-panel {
  position: absolute;
  inset: 0;
}

.dl-panel {
  z-index: 1;
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity 420ms ease, filter 620ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 620ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, filter, transform;
}

.dl-panel.is-active {
  z-index: 2;
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transform: translateY(0);
}

.dl-panel.is-leaving {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-12px);
}

.dl-panel[hidden] {
  display: none;
}

.dl-summary {
  position: absolute;
  top: 274px;
  left: 50%;
  width: min(900px, calc(100% - 160px));
  margin: 0;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  transform: translateX(-50%);
}

.dl-body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.dl-body h3,
.dl-body h4,
.dl-body p {
  margin: 0;
}

.dl-body h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.dl-body p {
  font-size: 12px;
  line-height: 24px;
}

.dl-body img {
  object-fit: contain;
}

.dl-radius-layout {
  top: 364px;
  display: grid;
  grid-template-columns: 228px 40px 350px 350px;
  align-items: center;
  gap: 60px;
  width: 1148px;
  height: 400px;
}

.dl-radius-intro,
.dl-radius-card,
.dl-show-card,
.dl-color-top,
.dl-color-bottom,
.dl-texture-layout,
.dl-layout-card,
.dl-motion-principles,
.dl-motion-spec,
.dl-motion-use-card {
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #f2f6ff 8%, #fff 96%);
}

.dl-radius-intro {
  position: relative;
  height: 400px;
  color: #fff;
}

.dl-radius-intro p {
  position: relative;
  z-index: 1;
  padding: 42px 24px 0;
}

.dl-radius-intro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dl-flow-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #666;
  background: #f2f5fb;
  font-size: 22px;
  line-height: 1;
}

.dl-radius-card {
  position: relative;
  height: 400px;
  padding: 24px;
}

.dl-radius-card > p {
  margin-top: 16px;
}

.dl-radius-card img {
  position: absolute;
  top: 162px;
  left: 24px;
  width: 302px;
  height: auto;
}

.dl-graphic-layout {
  top: 374px;
  display: grid;
  grid-template-columns: 350px 580px 250px;
  gap: 40px;
  width: 1260px;
  height: 400px;
}

.dl-show-card {
  position: relative;
}

.dl-show-card h3 {
  position: absolute;
  top: 24px;
  left: 20px;
}

.dl-graphic-before {
  height: 400px;
}

.dl-graphic-before img {
  position: absolute;
  top: 86px;
  left: 21px;
  width: 245px;
  height: 280px;
}

.dl-graphic-middle {
  display: grid;
  grid-template-columns: repeat(2, 270px);
  grid-template-rows: 201px 159px;
  gap: 40px;
  height: 400px;
}

.dl-graphic-middle .dl-show-card {
  height: 201px;
}

.dl-graphic-middle img {
  position: absolute;
}

.dl-grc-two {
  top: 69px;
  left: 49px;
  width: 172px;
  height: 108px;
}

.dl-icon-grid-card img {
  top: 24px;
  left: 53px;
  width: 164px;
  height: 153px;
}

.dl-graphic-middle .dl-graphic-wide {
  grid-column: 1 / -1;
  height: 159px;
}

.dl-graphic-wide img {
  top: 43px;
  left: 74px;
  width: 432px;
  height: 72px;
}

.dl-graphic-nav {
  height: 400px;
}

.dl-graphic-nav img {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 119px;
  height: 331px;
}

.dl-color-layout {
  top: 344px;
  width: 1220px;
  height: 460px;
}

.dl-color-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 250px 400px 1fr 154px;
  align-items: start;
  gap: 20px;
  height: 227px;
  padding: 38px 60px;
}

.dl-color-copy p,
.dl-color-use p {
  margin-top: 8px;
  color: #666;
}

.dl-color-scale {
  width: 400px;
  height: 98px;
  margin-top: 7px;
}

.dl-color-use {
  padding-left: 37px;
}

.dl-color-use p:first-child {
  margin-top: 0;
}

.dl-color-dots {
  width: 154px;
  height: 90px;
  margin-top: 9px;
}

.dl-color-bottom {
  position: relative;
  height: 280px;
  margin-top: -47px;
  padding: 25px 57px 0;
}

.dl-color-labels {
  display: grid;
  grid-template-columns: 388px 1fr;
  height: 47px;
  padding-top: 2px;
  font-size: 14px;
  line-height: 28px;
}

.dl-color-bottom img,
.dl-texture-bottom > img {
  width: 1106px;
  height: 208px;
}

.dl-dark-layout {
  top: 344px;
  width: 1280px;
  height: 445px;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(120deg, #050505, #343434);
}

.dl-dark-top {
  display: grid;
  grid-template-columns: 250px 292px 250px 177px;
  align-items: start;
  gap: 28px;
  height: 175px;
  padding: 34px 60px 0;
}

.dl-dark-copy p,
.dl-dark-contrast {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.8);
}

.dl-dark-top img:first-of-type {
  width: 292px;
  height: 98px;
}

.dl-dark-top img:last-of-type {
  width: 177px;
  height: 66px;
  margin-top: 23px;
}

.dl-dark-bottom {
  display: grid;
  grid-template-columns: 568px 465px;
  gap: 102px;
  height: 270px;
  padding: 25px 60px 0;
  border-radius: 20px 20px 0 0;
  background: rgba(0, 0, 0, 0.42);
}

.dl-dark-bottom h3 {
  margin-bottom: 16px;
  font-size: 14px;
}

.dl-dark-bottom img {
  width: 100%;
  height: 160px;
}

.dl-texture-layout {
  top: 336px;
  width: 1220px;
  height: 458px;
}

.dl-texture-top {
  display: grid;
  grid-template-columns: 183px 109px 1fr 140px 160px 140px;
  align-items: center;
  gap: 24px;
  height: 178px;
  padding: 28px 60px 0;
}

.dl-texture-copy p,
.dl-texture-rule p {
  margin-top: 8px;
  color: #666;
}

.dl-texture-rule h4 {
  font-size: 14px;
  line-height: 28px;
}

.dl-texture-top > img:nth-of-type(1) {
  width: 109px;
  height: 100px;
}

.dl-texture-top > img:nth-of-type(2) {
  width: 140px;
  height: 58px;
}

.dl-texture-top > img:nth-of-type(3) {
  width: 140px;
  height: 52px;
}

.dl-texture-bottom {
  height: 280px;
  padding: 0 57px;
  background: rgba(248, 250, 255, 0.8);
}

.dl-layout-grid {
  top: 336px;
  display: grid;
  grid-template-columns: repeat(2, 590px);
  gap: 40px;
  width: 1220px;
  height: 440px;
}

.dl-layout-card {
  position: relative;
  height: 440px;
  padding: 32px;
}

.dl-layout-card > p {
  margin-top: 8px;
  color: #666;
}

.dl-layout-card img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.dl-build-one {
  width: 461px;
  height: 72px;
  margin-top: 20px;
  margin-bottom: 43px;
}

.dl-build-three {
  width: 460px;
  height: 132px;
  margin-top: 16px;
}

.dl-build-two {
  width: 457px;
  height: 100px;
  margin-top: 20px;
  margin-bottom: 44px;
}

.dl-build-four {
  width: 460px;
  height: 131px;
  margin-top: 14px;
}

.dl-motion-rule-layout {
  top: 344px;
  width: 1220px;
  height: 451px;
}

.dl-motion-principles {
  position: relative;
  z-index: 1;
  height: 227px;
  padding: 32px;
}

.dl-motion-principle-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.dl-motion-principle-list > div {
  display: flex;
  align-items: center;
  gap: 28px;
}

.dl-motion-principle-list img {
  width: 56px;
  height: 56px;
}

.dl-motion-principle-list p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #666;
}

.dl-motion-principle-list strong {
  color: #000;
  font-size: 14px;
  line-height: 28px;
}

.dl-motion-spec {
  position: relative;
  height: 260px;
  margin-top: -36px;
  padding: 29px 32px 0;
}

.dl-motion-spec > div {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}

.dl-motion-spec > div:last-of-type {
  padding-left: 54px;
}

.dl-motion-spec img {
  width: 1150px;
  height: 155px;
  margin-top: 18px;
}

.dl-motion-use-layout {
  top: 340px;
  display: grid;
  grid-template-columns: repeat(3, 360px);
  gap: 40px;
  width: 1160px;
  height: 420px;
}

.dl-motion-use-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.dl-motion-use-card {
  position: relative;
  height: 190px;
  padding: 28px 32px;
}

.dl-motion-use-card > p {
  margin-top: 4px;
  color: #666;
}

.dl-motion-use-card > img {
  position: absolute;
  right: 32px;
  bottom: 12px;
  max-width: calc(100% - 64px);
  height: auto;
}

.dl-motion-use-tall {
  height: 420px;
}

.dl-motion-use-tall > img {
  right: auto;
  bottom: -26px;
  left: 36px;
  width: 288px;
  height: 331px;
}

.pe-flow-section {
  position: relative;
  width: 100%;
  padding: 100px 0 118.640625px;
  overflow: hidden;
  color: #fff;
  background: #1e1e1f;
}

.pe-flow-section h2,
.pe-light-inner > h2 {
  margin: 0;
  font-family: "MiSans", sans-serif;
  font-size: 40px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-align: center;
}

.pe-flow-section h2 {
  line-height: 55px;
}

.pe-flow-inner {
  width: 100%;
}

.pe-flow-visual {
  display: block;
  width: min(79.722222vw, 1339px);
  height: auto;
  margin: 80px auto 0;
  object-fit: contain;
}

.pe-light-section {
  width: 100%;
  overflow: hidden;
  color: #000;
  background: #f6f8fe;
}

.pe-light-inner {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding-right: clamp(53.33px, 4.166667vw, 70px);
  padding-left: clamp(53.33px, 4.166667vw, 70px);
}

.pe-light-inner > h2 {
  line-height: 40px;
}

.pe-landing-inner {
  padding-top: 80px;
  padding-bottom: 48px;
}

.tabs-2 {
  --tabs-2-x: 6px;
  --tabs-2-width: 152px;
  position: relative;
  display: grid;
  grid-template-columns: 152px 107px 107px;
  width: 378px;
  height: 56px;
  margin: 46px auto 0;
  padding: 6px;
  border: 0;
  border-radius: 28px;
  background: #fff;
}

.tabs-2-indicator {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 0;
  width: var(--tabs-2-width);
  height: 44px;
  border-radius: 22px;
  background: #000;
  opacity: 0;
  transform: translateX(var(--tabs-2-x));
  transition: width 460ms cubic-bezier(0.28, 0.11, 0.32, 1), transform 460ms cubic-bezier(0.28, 0.11, 0.32, 1), opacity 180ms ease;
  will-change: width, transform;
}

.tabs-2.is-ready .tabs-2-indicator {
  opacity: 1;
}

.tabs-2-tab {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 22px;
  color: #000;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 14px;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 180ms ease;
  white-space: nowrap;
}

.tabs-2-tab.is-active {
  color: #fff;
}

.tabs-2-tab:focus-visible {
  outline: 2px solid #2475ff;
  outline-offset: -3px;
}

.landing-copy-stage {
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: 46px;
}

.landing-copy {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 320ms ease, filter 420ms ease, transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.landing-copy.is-active {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transform: translateY(0);
}

.landing-copy.is-leaving {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-8px);
}

.landing-copy[hidden] {
  display: none;
}

.landing-copy-foundation,
.landing-copy-application {
  display: flex;
  align-items: flex-start;
}

.landing-copy-foundation {
  gap: 46px;
  margin: 0 20px;
}

.landing-copy-application {
  right: 2px;
  left: 2px;
  gap: 54px;
}

.landing-metric,
.pe-result-metrics > div {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  height: 40px;
  white-space: nowrap;
}

.landing-metric strong,
.pe-result-metrics strong {
  font-family: "MiSans", sans-serif;
  font-size: 40px;
  font-weight: var(--font-weight-semibold);
  line-height: 40px;
}

.landing-metric small,
.pe-result-metrics small {
  font-size: 20px;
  line-height: 24px;
}

.landing-metric span,
.pe-result-metrics span {
  margin: 21px 0 0 8px;
  color: #666;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 14px;
}

.landing-copy > p {
  flex: 1 1 auto;
  margin: 18px 0 0;
  color: #000;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
}

.landing-copy-private > p {
  position: absolute;
  top: 6px;
  left: 102px;
  width: calc(100% - 204px);
  margin: 0;
}

.landing-panel-stage {
  position: relative;
  width: calc(100% + 4px);
  margin-top: 46px;
  margin-left: -2px;
  aspect-ratio: 1324 / 558;
  overflow: hidden;
}

.landing-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity 420ms ease, filter 620ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 620ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, filter, transform;
}

.landing-panel.is-active {
  z-index: 2;
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transform: translateY(0);
}

.landing-panel.is-leaving {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-12px);
}

.landing-panel[hidden] {
  display: none;
}

.landing-panel img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

.pe-motivation-results .pe-light-inner {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pe-result-metrics {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 60px;
  margin-left: -3px;
}

.pe-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(35.56px, 2.777778vw, 46.67px);
  margin-top: 44px;
}

.pe-result-card {
  position: relative;
  aspect-ratio: 640 / 503;
  overflow: hidden;
  border-radius: 20px;
}

.pe-result-card-left {
  background: linear-gradient(137deg, #fff 18%, rgba(255, 255, 255, 0) 92%);
}

.pe-result-card-right {
  background: linear-gradient(226deg, #fff 18%, rgba(255, 255, 255, 0) 92%);
}

.pe-result-card h3,
.pe-result-card p {
  position: absolute;
  left: 5%;
  z-index: 1;
  margin: 0;
}

.pe-result-card h3 {
  top: 6.56%;
  font-family: "MiSans", sans-serif;
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
}

.pe-result-card p {
  top: 15.3%;
  width: 89.7%;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
}

.pe-result-card > img {
  position: absolute;
  top: 35.19%;
  left: 6.25%;
  display: block;
  width: 87.5%;
  height: auto;
}

.pe-result-card-right > img {
  left: 3.125%;
}

.pe-inspect-results .pe-light-inner {
  padding-top: 80px;
  padding-bottom: 140px;
}

.pe-inspect-metrics {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 40px;
  margin: 60px 20px 0;
  white-space: nowrap;
}

.pe-inspect-metrics span,
.pe-inspect-metrics small {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
}

.pe-inspect-metrics strong {
  font-family: "MiSans", sans-serif;
  font-size: 40px;
  font-weight: var(--font-weight-semibold);
  line-height: 40px;
}

.pe-inspect-metrics strong:nth-of-type(2) {
  color: #00dca5;
}

.pe-inspect-metrics b {
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
}

.pe-inspect-metrics small {
  margin-left: 4px;
  color: #666;
}

.pe-inspect-grid {
  margin-top: 60px;
}

.pe-inspect-grid .pe-result-card {
  aspect-ratio: 640 / 480;
}

.pe-inspect-card-left {
  background: linear-gradient(138.5deg, #fff 18%, rgba(255, 255, 255, 0) 92%);
}

.pe-inspect-card-right {
  background: linear-gradient(224.4deg, #fff 18%, rgba(255, 255, 255, 0) 92%);
}

.pe-inspect-grid .pe-result-card h3 {
  top: 6.88%;
}

.pe-inspect-grid .pe-result-card p {
  top: 16.25%;
}

.pe-inspect-grid .pe-result-card > img {
  left: 5.31%;
  width: 89.38%;
}

.pe-inspect-card-left > img {
  top: 30.63%;
}

.pe-inspect-card-right > img {
  top: 32.92%;
}

.zc-hero {
  position: relative;
  width: 100%;
  height: 601px;
  overflow: hidden;
  background: #f7f9ff;
}

.zc-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
}

.zc-hero-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 538.507px;
  height: 374.383px;
  object-fit: cover;
  opacity: 0.5;
  transform: translate(-50%, -50%) rotate(105deg);
  transform-origin: center;
}

.zc-hero-copy {
  position: absolute;
  top: 220px;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 840px;
  transform: translateX(-50%);
}

.zc-hero-copy p,
.zc-hero-copy h2 {
  width: 100%;
  margin: 0;
  text-align: center;
}

.zc-hero-copy p {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
}

.zc-hero-copy h2 {
  font-size: 40px;
  line-height: 55px;
}

.zc-overview {
  width: 100%;
  height: 368px;
  min-height: 368px;
  overflow: hidden;
}

.zc-overview-inner {
  display: grid;
  grid-template-columns: minmax(380px, 37%) 1fr;
  gap: clamp(56px, 4.8611vw, 82px);
  align-items: start;
  width: 100%;
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  padding: 100px clamp(53.33px, 4.166667vw, 70px) 80px;
}

.zc-overview-heading h2,
.zc-overview-heading p {
  margin: 0;
}

.zc-overview-heading h2 {
  font-size: 40px;
  line-height: 64px;
}

.zc-overview-heading p {
  margin-top: 8px;
  font-size: 22px;
  line-height: 38px;
}

.zc-issue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(48px, 5.5556vw, 93px);
  row-gap: 34px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.zc-issue-list li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.zc-issue-list strong {
  font-family: "MiSans", sans-serif;
  font-size: 32px;
  line-height: 40px;
}

.zc-issue-list span {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 26px;
}

.zc-details {
  position: relative;
  width: 100%;
  overflow: visible;
  background-color: #fff;
  background-image: radial-gradient(circle at 1px 1px, rgba(226, 226, 226, 0.62) 1px, transparent 1.1px);
  background-size: 14px 14px;
}

.zc-details-cap {
  position: absolute;
  top: 145px;
  left: 0;
  width: 100%;
  height: 838px;
  border-radius: var(--radius-300) var(--radius-300) 0 0;
  background: linear-gradient(178deg, #f8faff 0%, rgba(248, 250, 255, 0) 74%);
}

.zc-details-accent {
  position: absolute;
  top: 8px;
  left: max(71px, calc(50% - 479px));
  z-index: 2;
  width: 110px;
  height: 135.5px;
  object-fit: contain;
}

.zc-details-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 245px clamp(71.11px, 5.555556vw, 93.33px) 140px;
}

.zc-details-inner > h2 {
  margin: 0;
  font-size: 40px;
  line-height: 64px;
  text-align: center;
}

.zc-comparison {
  width: 100%;
  margin-top: 80px;
}

.zc-comparison-a1 {
  margin-top: 70px;
}

.zc-comparison-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(54px, 5.5556vw, 93px);
  margin: 0 1px 28px;
}

.zc-comparison-copy p {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 26px;
}

.zc-comparison-copy strong {
  font-weight: var(--font-weight-semibold);
}

.zc-comparison > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.zc-comparison-a1 > img {
  width: 93%;
}

.zc-comparison > .zc-image-narrow {
  width: 84.375%;
}

.zc-group-title {
  margin-top: 100px !important;
}

.site-footer {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  color: #fff;
  background: #1e1e1f;
}

.site-footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.site-footer-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1680px;
  height: 120px;
  margin: 0 auto;
  padding: 37px 60px;
}

.site-footer-contact,
.site-footer-signature {
  display: flex;
  align-items: center;
}

.site-footer-contact {
  gap: 21px;
}

.site-footer-signature {
  position: relative;
  justify-content: space-between;
  width: 107px;
  height: 46px;
}

.site-footer-signature img:first-child {
  width: 40px;
  height: 46px;
}

.site-footer-signature img:last-child {
  width: 56px;
  height: 16px;
}

.site-footer-divider {
  width: 1px;
  height: 16px;
}

.site-footer-contact p,
.site-footer-copyright {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 16px;
}

.site-footer-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-footer-copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.site-footer-icp,
.site-footer-icp:visited,
.site-footer-icp:hover,
.site-footer-icp:focus-visible,
.site-footer-icp:active {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 16px;
}

html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--reveal-delay, 0ms),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 04 - Design System */
.design-system-page {
  background: #fff;
}

.ds-stage {
  width: 100%;
  margin: 0 auto;
  padding-top: 34px;
  overflow: hidden;
  background: #fff;
}

.ds-title-bar {
  margin-bottom: 51px;
}

.ds-title-name img {
  width: 114px;
  height: 20px;
  object-fit: contain;
  opacity: 0.6;
  filter: none;
}

.ds-hero {
  position: relative;
  width: 100%;
  height: 732px;
  overflow: hidden;
  border-radius: var(--radius-300);
  color: #fff;
  background: #1e1e1f;
}

.ds-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 732px;
  margin: 0 auto;
}

.ds-hero-art {
  position: absolute;
  top: 291px;
  left: 50%;
  width: min(29.41vw, 423px);
  height: auto;
  opacity: 0.24;
  transform: translate(-50%, -50%) rotate(0.83deg);
}

.ds-hero-copy {
  position: absolute;
  top: 210px;
  left: 50%;
  z-index: 1;
  width: min(1000px, calc(100% - 120px));
  text-align: center;
  transform: translateX(-50%);
}

.ds-hero-copy h2,
.ds-hero-copy > p,
.ds-hero-link p,
.ds-hero-capabilities h3,
.ds-hero-capabilities p {
  margin: 0;
}

.ds-hero-copy h2 {
  font-size: 40px;
  line-height: 40px;
}

.ds-hero-copy > p {
  margin-top: 40px;
  color: #fff;
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
}

.ds-hero-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}

.ds-hero-link > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 16px;
  border-radius: 100px;
  color: #000;
  background: #fff;
  font-size: 14px;
  line-height: 14px;
}

.ds-hero-link p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 24px;
}

.ds-hero-link a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ds-hero-capabilities {
  position: absolute;
  right: 10.49%;
  bottom: 154px;
  left: 10.49%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 92px;
}

.ds-hero-capabilities article {
  display: grid;
  grid-template-columns: 81px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  min-width: 0;
}

.ds-hero-capabilities strong {
  font-family: "MiSans", sans-serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 72px;
}

.ds-hero-capabilities h3 {
  padding-top: 7px;
  font-size: 20px;
  line-height: 28px;
}

.ds-hero-capabilities p {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
}

.ds-point-area {
  min-height: 0;
}

.ds-content {
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-gutter) * 2));
  margin-right: auto;
  margin-left: auto;
}

.ds-section-title {
  margin: 0;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
}

.ds-panorama {
  padding-top: 80px;
}

.ds-panorama .ds-section-title {
  line-height: 64px;
}

.ds-full-image,
.ds-media > img,
.ds-application-mask > img {
  width: 100%;
  height: auto;
}

.ds-full-image {
  margin-top: 60px;
  aspect-ratio: 1320 / 574;
  object-fit: cover;
}

.ds-tab-section {
  margin-top: 100px;
}

.ds-tabs {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  height: 56px;
  margin: 50px auto 0;
  padding: 6px;
  overflow: hidden;
  border-radius: 100px;
  background: #f4f7ff;
  white-space: nowrap;
}

.ds-tab-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 0;
  width: var(--ds-tab-width, 0px);
  height: 44px;
  border-radius: 100px;
  background: #000;
  opacity: 0;
  transform: translateX(var(--ds-tab-x, 0px));
  pointer-events: none;
}

.ds-tabs.is-ready .ds-tab-indicator {
  opacity: 1;
  transition:
    width 460ms cubic-bezier(0.28, 0.11, 0.32, 1),
    transform 460ms cubic-bezier(0.28, 0.11, 0.32, 1);
  will-change: width, transform;
}

.ds-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 100px;
  color: #666;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  transition: color 180ms ease;
}

.ds-tab.is-active {
  color: #fff;
}

.ds-tabs:not(.is-ready) .ds-tab.is-active {
  background: #000;
}

.ds-tab:focus-visible {
  outline: none;
}

.ds-panels {
  position: relative;
}

.ds-panel {
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 420ms ease,
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ds-panel.is-active {
  opacity: 1;
  transform: translateY(0);
}

.ds-panel.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ds-panel[hidden] {
  display: none;
}

.ds-panel-summary {
  width: fit-content;
  max-width: calc(100% - 120px);
  margin: 48px auto 0;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}

.ds-media {
  position: relative;
  display: block;
  width: 100%;
  margin: 50px 0 0;
}

.ds-media figcaption h3,
.ds-media figcaption p {
  margin: 0;
}

.ds-media figcaption h3 {
  font-size: 20px;
  line-height: 28px;
}

.ds-media figcaption p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 24px;
}

.ds-spec-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ds-spec-overlay-global {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6.1%;
  padding: 2.42% 1.74% 0 2.42%;
}

.ds-spec-overlay-components > div,
.ds-spec-overlay-whitepaper > div {
  position: absolute;
}

.ds-overlay-desktop {
  top: 11.81%;
  left: 2.42%;
  width: 11.44%;
}

.ds-overlay-screen {
  top: 11.81%;
  left: 53.18%;
  width: 44.47%;
  color: #fff;
}

.ds-overlay-mobile {
  top: 62.86%;
  left: 2.42%;
  width: 11.44%;
}

.ds-component-section {
  padding: 80px 0 70px;
  border-radius: var(--radius-300) var(--radius-300) 0 0;
  background: linear-gradient(133deg, #f8faff 9%, #f6f9ff 92%);
}

.ds-component-section .ds-tabs {
  margin-top: 40px;
  background: #fff;
}

.ds-component-section .ds-panel-summary {
  margin-top: 50px;
}

.ds-tools-section .ds-panel-summary {
  margin-top: 50px;
}

.ds-tools-media {
  position: relative;
}

.ds-tools-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7%;
  padding: 2.88% 2.27% 0;
  pointer-events: none;
}

.ds-tools-overlay h3 {
  font-size: 20px;
  line-height: 28px;
}

.ds-tools-overlay > div:first-child h3 {
  margin-left: 16.03%;
}

.ds-tools-overlay p {
  max-width: 580px;
}

.ds-results {
  margin-top: 80px;
  padding: 90px 0 110px;
  background: #f6f9fe;
}

.ds-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
  min-height: 108px;
  margin-top: 80px;
}

.ds-results-grid article,
.ds-results-grid p {
  min-width: 0;
  margin: 0;
}

.ds-result-heading {
  display: flex;
  align-items: baseline;
  gap: 20px;
  white-space: nowrap;
}

.ds-result-heading strong {
  flex: 0 0 auto;
  font-family: "MiSans", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
}

.ds-result-heading small {
  font-size: 20px;
  line-height: 20px;
}

.ds-result-heading span {
  color: #666;
  font-size: 14px;
  line-height: 14px;
}

.ds-results-grid article > p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 26px;
}

.ds-application-mask {
  width: 100%;
  margin-top: 60px;
  -webkit-mask-image: linear-gradient(to bottom, #000 31.06%, rgba(0, 0, 0, 0.476) 63.25%, transparent 85.27%);
  mask-image: linear-gradient(to bottom, #000 31.06%, rgba(0, 0, 0, 0.476) 63.25%, transparent 85.27%);
}

#ds-tools-token .ds-media > img {
  aspect-ratio: 1320 / 540;
  object-fit: cover;
}

.ds-application-mask > img {
  aspect-ratio: 1320 / 404;
  object-fit: cover;
}

@media (max-width: 1360px) {
  .ds-hero-capabilities {
    right: 8.75%;
    left: 8.75%;
    gap: 72px;
  }

  .ds-hero-capabilities article {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
  }

  .ds-hero-capabilities strong {
    font-size: 64px;
  }

  .ds-hero-capabilities p {
    white-space: normal;
  }

  .ds-results-grid {
    gap: 64px;
  }

  .pe-flow-section {
    padding-top: 88px;
    padding-bottom: 104px;
  }

  .pe-flow-section h2,
  .pe-light-inner > h2 {
    font-size: 36px;
  }

  .pe-flow-visual {
    margin-top: 70px;
  }

  .landing-copy-foundation {
    gap: 34px;
    margin-right: 12px;
    margin-left: 12px;
  }

  .site-footer-inner {
    padding-right: 53.33px;
    padding-left: 53.33px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .home-product-motion,
  .home-design-motion,
  .home-ai-motion {
    transform: none !important;
  }

  .home-marquee-track,
  .home-zoom-image {
    animation: none !important;
  }

  .home-fade-slide {
    transition: none !important;
  }
}

/* 05 - AI Workflow */
.ai-workflow-page {
  background: #fff;
}

.aiw-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 34px;
  padding-bottom: 139px;
  overflow: hidden;
  background: #fff;
}

.aiw-stage::before {
  content: "";
  position: absolute;
  top: 739px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  background-image: radial-gradient(circle at 1px 1px, rgba(230, 230, 230, 0.6) 1px, transparent 1.1px);
  background-size: 14px 14px;
  pointer-events: none;
}

.aiw-title-bar {
  position: relative;
  z-index: 2;
  margin-bottom: 52px;
}

.aiw-title-name img {
  width: 154px;
  height: 20px;
  object-fit: contain;
  opacity: 0.4;
  filter: none;
}

.aiw-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(810.55px, calc(32.7273vw + 260.73px));
  overflow: hidden;
  border-radius: var(--radius-300);
  color: #fff;
  background: #111;
}

.aiw-hero-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.aiw-hero-copy {
  position: absolute;
  top: 80px;
  left: 50%;
  z-index: 1;
  width: calc(100% - 120px);
  text-align: center;
  transform: translateX(-50%);
}

.aiw-hero-copy h2,
.aiw-hero-copy p,
.aiw-workflow h2,
.aiw-media,
.aiw-note h3,
.aiw-note p,
.aiw-code-bridge {
  margin: 0;
}

.aiw-hero-copy h2,
.aiw-workflow h2 {
  font-size: 40px;
  line-height: 40px;
}

.aiw-hero-copy p {
  margin-top: 40px;
  font-size: 20px;
  line-height: 28px;
}

.aiw-hero-image {
  position: absolute;
  top: 258px;
  left: 50%;
  width: calc(100% - 240px);
  max-width: 1440px;
  height: auto;
  transform: translateX(-50%);
}

.aiw-workflow {
  position: relative;
  z-index: 1;
}

.aiw-workflow-code {
  margin-top: 80px;
}

.aiw-workflow-three-d {
  margin-top: 140px;
}

.aiw-content {
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-gutter) * 2));
  margin-right: auto;
  margin-left: auto;
}

.aiw-workflow h2 {
  text-align: center;
}

.aiw-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 466;
  margin-top: 80px;
  overflow: hidden;
}

.aiw-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiw-media figcaption {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aiw-note,
.aiw-code-bridge {
  position: absolute;
}

.aiw-note h3 {
  font-size: 20px;
  line-height: 28px;
}

.aiw-note p,
.aiw-code-bridge {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;
}

.aiw-note p {
  margin-top: 12px;
}

.aiw-code-design {
  top: 6.87%;
  left: 2.42%;
  width: 24.17%;
}

.aiw-code-bridge {
  top: 37.12%;
  left: 34.24%;
  width: 21.36%;
}

.aiw-code-delivery {
  top: 6.87%;
  left: 62.58%;
  width: 29.77%;
}

.aiw-code-delivery p + p {
  margin-top: 12px;
}

.aiw-three-d-step-one,
.aiw-three-d-step-two,
.aiw-three-d-step-three {
  top: 6.87%;
  width: 20.91%;
}

.aiw-three-d-step-one {
  left: 2.42%;
}

.aiw-three-d-step-two {
  left: 39.32%;
}

.aiw-three-d-step-three {
  left: 76.06%;
}

.aiw-three-d-video {
  top: 26.2084%;
  left: 82.5758%;
  width: 8.4849%;
  height: 25.7787%;
}

@media (max-width: 1360px) {
  .aiw-hero-copy p {
    font-size: 18px;
  }

  .aiw-workflow h2 {
    font-size: 36px;
  }
}

/* 06 - Team Management */
.team-management-page {
  background: #fff;
}

.tm-stage {
  --tm-hero-height: clamp(724px, 56.5278vw, 949.67px);
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 34px;
  overflow: hidden;
  background: #fff;
}

.tm-stage::before {
  content: "";
  position: absolute;
  top: calc(141px + 20vw);
  right: 0;
  left: 0;
  z-index: 0;
  height: 1839px;
  background: linear-gradient(to bottom, #eff1f5 63.187%, rgba(239, 241, 245, 0));
  opacity: 0.97;
  pointer-events: none;
}

.tm-title-bar {
  position: relative;
  z-index: 2;
  margin-bottom: 51px;
}

.tm-title-name img {
  width: 154px;
  height: 20px;
  object-fit: contain;
  opacity: 0.4;
  filter: brightness(0);
}

.tm-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--tm-hero-height);
  overflow: hidden;
  border-radius: var(--radius-300);
  color: #fff;
  background: #111;
}

.tm-hero-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.tm-hero-content-group {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 1680px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

.tm-hero-copy {
  position: absolute;
  top: 100px;
  left: 50%;
  z-index: 2;
  width: calc(100% - 120px);
  text-align: center;
  transform: translateX(-50%);
}

.tm-hero-copy h2,
.tm-hero-copy p,
.tm-strategy h3,
.tm-strategy p,
.tm-section h2,
.tm-section-summary,
.tm-media,
.tm-media h3,
.tm-media h4,
.tm-media p,
.tm-media small,
.tm-results h2,
.tm-results p {
  margin: 0;
}

.tm-hero-copy h2,
.tm-section h2,
.tm-results h2 {
  font-size: 40px;
  line-height: 40px;
}

.tm-hero-copy p {
  margin-top: 40px;
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
}

.tm-strategies {
  position: absolute;
  top: 308px;
  left: var(--page-gutter);
  z-index: 2;
  width: min(64.03%, 1076px);
}

.tm-strategy {
  display: grid;
  grid-template-columns: 115px minmax(0, 1fr);
  column-gap: 20px;
  min-height: 98px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tm-strategy + .tm-strategy {
  margin-top: 49px;
}

.tm-strategy:last-child {
  border-bottom: 0;
}

.tm-strategy strong {
  font-family: "MiSans", sans-serif;
  font-size: 72px;
  font-weight: var(--font-weight-semibold);
  line-height: 72px;
}

.tm-strategy-copy {
  padding-top: 8px;
}

.tm-strategy h3 {
  font-size: 20px;
  line-height: 28px;
}

.tm-strategy-points {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.7);
}

.tm-strategy-points p {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
}

.tm-hero-orbit {
  position: absolute;
  top: 34.03%;
  right: 4.44%;
  width: 31.25%;
  max-width: 525px;
  height: auto;
  opacity: 0.58;
  transform: rotate(129.68deg) scaleY(-1);
  pointer-events: none;
}

.tm-section,
.tm-development-bg,
.tm-results {
  position: relative;
  z-index: 1;
}

.tm-professional {
  margin-top: 110px;
}

.tm-content {
  width: calc(100% - (var(--page-gutter) * 2));
  max-width: calc(var(--content-max) - (var(--page-gutter) * 2));
  margin-right: auto;
  margin-left: auto;
}

.tm-section h2,
.tm-section-summary {
  text-align: center;
}

.tm-section-summary {
  margin-top: 50px;
  font-size: 14px;
  line-height: 26px;
}

.tm-media {
  position: relative;
  width: 100%;
  margin-top: 60px;
  overflow: hidden;
}

.tm-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-media figcaption {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tm-media-professional {
  aspect-ratio: 1320 / 493;
  margin-top: 80px;
}

.tm-media-process {
  aspect-ratio: 1320 / 487;
}

.tm-media-talent {
  aspect-ratio: 1320 / 486.931;
}

.tm-card-copy {
  position: absolute;
}

.tm-card-copy h3 {
  font-size: 20px;
  line-height: 28px;
}

.tm-card-copy h4,
.tm-card-copy p,
.tm-card-copy small {
  font-size: 14px;
  line-height: 24px;
}

.tm-card-copy h4 {
  font-weight: var(--font-weight-semibold);
}

.tm-card-copy p {
  margin-top: 12px;
}

.tm-pro-goal {
  top: 6.49%;
  left: 2.12%;
  width: 43.49%;
}

.tm-pro-goal h4:first-of-type {
  margin-top: 28px;
}

.tm-pro-goal h4 + h4 {
  margin-top: 157px;
}

.tm-pro-review {
  top: 6.49%;
  left: 51.82%;
  width: 47.42%;
}

.tm-pro-share {
  top: 59.03%;
  left: 51.82%;
  width: 47.42%;
}

.tm-development-bg {
  margin-top: 110px;
  padding: 110px 0 134px;
  border-radius: var(--radius-300);
  background: linear-gradient(to bottom, #ebeffc, #eefcff);
  opacity: 0.97;
}

.tm-process {
  min-height: 663px;
}

.tm-talent {
  min-height: 663px;
  margin-top: 160px;
}

.tm-process-project {
  top: 5.75%;
  left: 2.12%;
  width: 25.3%;
}

.tm-process-review {
  top: 5.75%;
  left: 33.41%;
  width: 29.85%;
}

.tm-process-other {
  top: 5.75%;
  left: 68.41%;
  width: 25.3%;
}

.tm-process-efficiency {
  top: 58.52%;
  left: 33.41%;
  width: 29.85%;
}

.tm-talent-assessment {
  top: 7.8%;
  left: 2.12%;
  width: 25.3%;
}

.tm-talent-strength {
  top: 7.8%;
  left: 33.86%;
  width: 29.24%;
}

.tm-talent-space {
  top: 7.8%;
  left: 68.94%;
  width: 29.24%;
}

.tm-talent-strength small {
  display: block;
  margin-top: 4px;
  color: #999;
  font-weight: var(--font-weight-regular);
}

.tm-results {
  height: clamp(707.56px, 55.2778vw, 928.67px);
  overflow: hidden;
  background-color: #fff;
  background-image: url("assets/team-results-bg.png");
  background-repeat: no-repeat;
  background-position: center clamp(-51.33px, -3.0556vw, -39.11px);
  background-size: min(100%, 1680px) auto;
}

.tm-results-inner {
  position: relative;
  width: 100%;
  max-width: 1680px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

.tm-results h2 {
  position: absolute;
  top: clamp(71.11px, 5.5556vw, 93.33px);
  left: 6.1111%;
}

.tm-results-grid {
  position: absolute;
  top: clamp(234.67px, 18.3333vw, 308px);
  left: 6.1111%;
  display: grid;
  grid-template-columns: 19.3047% 22.1893%;
  column-gap: 5.9172%;
  row-gap: clamp(61.33px, 4.7917vw, 80.5px);
  width: 93.8889%;
}

.tm-results-grid article,
.tm-results-grid p {
  min-width: 0;
}

.tm-result-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tm-result-value strong {
  font-family: "MiSans", sans-serif;
  font-size: 40px;
  font-weight: var(--font-weight-semibold);
  line-height: 40px;
}

.tm-result-value span {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
}

.tm-results-grid article > p:last-child {
  margin-top: 16px;
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
}

.tm-results-visual {
  position: absolute;
  top: clamp(12.44px, 0.9722vw, 16.33px);
  left: 53.8194%;
  width: 42.0139%;
  height: 87.9397%;
  overflow: hidden;
}

.tm-results-visual::before,
.tm-results-visual::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: 24.2857%;
  pointer-events: none;
}

.tm-results-visual::before {
  top: -2%;
  background: linear-gradient(to bottom, #fff 29.706%, rgba(255, 255, 255, 0) 124.41%);
}

.tm-results-visual::after {
  bottom: 0;
  background: linear-gradient(to top, #fff 29.706%, rgba(255, 255, 255, 0) 124.41%);
}

.tm-results-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1441px) {
  .tm-strategies {
    width: 64.03%;
  }

}

@media (max-width: 1360px) {
  .tm-hero-copy h2,
  .tm-section h2 {
    font-size: 36px;
  }

  .tm-hero-copy p {
    font-size: 18px;
  }

  .tm-strategy-points {
    gap: 24px;
  }

  .tm-strategy-points p {
    font-size: 13px;
  }

}

/* 03 - Product Experience: Zhipu customer-service IP */
.zip-stage {
  position: relative;
  overflow: visible;
}

.zip-title-bar,
.zip-stage > .pe-title-bar {
  margin-bottom: 70px;
}

.zip-canvas {
  position: relative;
  width: 100%;
  height: min(198.6111vw, 3336.667px);
  overflow: hidden;
  border-radius: var(--radius-300) var(--radius-300) 0 0;
  color: #fff;
  background: linear-gradient(115deg, #4b8cfd 0%, #cce0fd 100%);
}

.zip-artboard {
  position: relative;
  width: 100%;
  max-width: 1680px;
  height: min(198.6111vw, 3336.667px);
  margin-right: auto;
  margin-left: auto;
}

.zip-canvas h2,
.zip-canvas h3,
.zip-canvas p {
  margin: 0;
}

.zip-glow,
.zip-pattern,
.zip-orbit,
.zip-main-character,
.zip-deco,
.zip-floating-character,
.zip-app-bg,
.zip-bottom-character {
  position: absolute;
  pointer-events: none;
}

.zip-glow {
  border-radius: 50%;
}

.zip-glow-top {
  top: -3.86%;
  left: 45.83%;
  width: 62.43%;
  height: 37.73%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 68%);
}

.zip-glow-middle {
  top: 19.9%;
  left: -10.21%;
  width: 116.39%;
  height: 19.1%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 72%);
}

.zip-pattern {
  width: 25.6%;
  height: 13.99%;
  object-fit: cover;
  opacity: 0.82;
}

.zip-pattern-one {
  top: 16.54%;
  left: 0;
}

.zip-pattern-two {
  top: 53.32%;
  left: 71.05%;
}

.zip-pattern-three {
  top: 67.94%;
  left: 49.04%;
}

.zip-pattern-four {
  top: 80.77%;
  left: 65.43%;
}

.zip-orbit-left {
  top: 10.91%;
  left: 0;
  width: 15.83%;
  height: auto;
}

.zip-orbit-right {
  top: 3.5%;
  left: 62.5%;
  width: 34.72%;
  height: auto;
}

.zip-main-character {
  top: 7.02%;
  left: 61.56%;
  width: 16.7%;
  height: auto;
}

.zip-deco-star-one {
  top: 11.68%;
  left: 47.85%;
  width: 5.04%;
  height: auto;
  filter: blur(0.46px);
  transform: rotate(64.42deg) scaleY(-1);
}

.zip-deco-z-one {
  top: 15.58%;
  left: 77.22%;
  width: 5.56%;
  height: auto;
  transform: rotate(27.66deg);
}

.zip-hero-content {
  position: absolute;
  top: 6.88%;
  left: 15.69%;
  z-index: 2;
  width: 40%;
}

.zip-hero-content h2 {
  font-size: 52px;
  line-height: 72px;
}

.zip-hero-content h2 > span {
  display: block;
}

.zip-brand-line {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.zip-brand-line img {
  width: 112px;
  height: 50px;
  object-fit: contain;
}

.zip-hero-content > p {
  margin-top: 29px;
  margin-left: 4px;
  font-size: 26px;
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
}

.zip-language-panel {
  position: absolute;
  top: 17.1%;
  left: 7.57%;
  width: 84.72%;
  height: 33.85%;
  border-radius: 60px 0 60px 60px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.zip-language-content,
.zip-applications,
.zip-scenarios {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.zip-language-heading {
  position: absolute;
  top: 19.2%;
  left: 15%;
  width: 70%;
  text-align: center;
}

.zip-language-heading h2,
.zip-applications > h2 {
  font-size: 40px;
  line-height: 64px;
}

.zip-language-heading p {
  margin-top: 16px;
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 34px;
}

.zip-feature {
  position: absolute;
  text-align: center;
}

.zip-feature h3,
.zip-welcome h3,
.zip-scenario h3 {
  font-size: 20px;
  line-height: 34px;
}

.zip-feature p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 28px;
}

.zip-feature img {
  display: block;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.zip-feature-form {
  top: 26.61%;
  left: 24.1%;
  width: 23.61%;
}

.zip-feature-form img {
  width: 41.76%;
  margin-top: 54px;
}

.zip-feature-brand {
  top: 26.61%;
  left: 63.75%;
  width: 12.01%;
}

.zip-feature-brand img {
  width: 68.79%;
  margin-top: 72px;
}

.zip-feature-link {
  position: absolute;
  top: 31.15%;
  left: 38.96%;
  width: 26.39%;
  height: auto;
}

.zip-feature-shape {
  top: 38.67%;
  left: 31.39%;
  width: 37.01%;
}

.zip-feature-shape img {
  width: 85.74%;
  margin-top: 60px;
}

.zip-applications > h2 {
  position: absolute;
  top: 55.14%;
  left: 15%;
  width: 70%;
  text-align: center;
}

.zip-welcome,
.zip-scenario {
  position: absolute;
}

.zip-welcome {
  top: 58.85%;
  left: 7.64%;
  width: 48.61%;
}

.zip-welcome h3,
.zip-scenario h3 {
  margin-bottom: 24px;
  text-align: left;
}

.zip-welcome img,
.zip-scenario img {
  display: block;
  width: 100%;
  height: auto;
}

.zip-ipchrome {
  position: absolute;
  z-index: 3;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.zip-ipchrome-small {
  top: 63.47%;
  left: 50.21%;
  width: 3.47%;
  height: 1.87%;
}

.zip-floating-character {
  top: 59.72%;
  left: 78.33%;
  width: 10.83%;
  height: auto;
  transform: rotate(180deg) scaleY(-1);
}

.zip-app-bg {
  top: 62.34%;
  left: 56.25%;
  width: 10.42%;
  height: auto;
}

.zip-deco-star-two {
  top: 69.09%;
  left: 80.76%;
  width: 5.19%;
  height: auto;
  filter: blur(0.46px);
  transform: rotate(64.42deg) scaleY(-1);
}

.zip-deco-z-two {
  top: 71.22%;
  left: 54.37%;
  width: 4.08%;
  height: auto;
  transform: rotate(27.66deg);
}

.zip-scenario-error {
  top: 78.99%;
  left: 7.57%;
  width: 34.72%;
}

.zip-scenario-card {
  top: 78.99%;
  left: 55.21%;
  width: 15.63%;
}

.zip-scenario-error h3,
.zip-scenario-card h3 {
  margin-left: 1px;
}

/* Module headings below each page title use the regular weight. */
.pe-stage h2,
.pe-stage h3,
.pe-stage h4,
.ds-stage h2,
.ds-stage h3,
.ds-stage h4,
.aiw-stage h2,
.aiw-stage h3,
.aiw-stage h4,
.tm-stage h2,
.tm-stage h3,
.tm-stage h4,
.about-main h2,
.about-main h3,
.about-main h4 {
  font-weight: 400;
}

/* All explicit 40px typography uses the site medium weight. */
.page-heading,
.pe-title-name h1,
.pe-cont-one-copy h2,
.pe-problems > h2,
.pe-plan-heading h2,
.pe-language-foundation-inner > h2,
.pe-language-elements-inner > h2,
.pe-language-rules-inner > h2,
.dl-shell > h2,
.pe-flow-section h2,
.pe-light-inner > h2,
.landing-metric strong,
.pe-result-metrics strong,
.pe-inspect-metrics strong,
.zc-hero-copy h2,
.zc-overview-heading h2,
.zc-details-inner > h2,
.ds-hero-copy h2,
.ds-stage .ds-section-title,
.ds-result-heading strong,
.aiw-hero-copy h2,
.aiw-workflow h2,
.tm-hero-copy h2,
.tm-section h2,
.tm-results h2,
.tm-result-value strong,
.zip-language-heading h2,
.zip-applications > h2 {
  font-weight: var(--font-weight-semibold);
}

.zip-bottom-fade {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 100vw;
  height: 13.71%;
  background: linear-gradient(to bottom, rgba(242, 247, 255, 0) 26.667%, rgba(242, 247, 255, 0.6) 96.591%);
  transform: translateX(-50%);
  pointer-events: none;
}

.zip-bottom-character {
  right: auto;
  bottom: clamp(-55.53px, -3.3056vw, -42.31px);
  left: 50%;
  z-index: 5;
  width: clamp(128px, 10vw, 168px);
  height: clamp(152.89px, 11.9444vw, 200.67px);
  object-fit: cover;
  transform: translateX(-50%) rotate(-9.2deg);
}

.zip-page .site-footer {
  z-index: 6;
}

[data-zip-parallax] {
  --zip-parallax-x: 0px;
  --zip-parallax-y: 0px;
  --zip-parallax-base: translateZ(0);
  transform: translate3d(var(--zip-parallax-x), var(--zip-parallax-y), 0) var(--zip-parallax-base);
  will-change: transform;
}

[data-zip-parallax].zip-deco-star-one,
[data-zip-parallax].zip-deco-star-two {
  --zip-parallax-base: rotate(64.42deg) scaleY(-1);
}

[data-zip-parallax].zip-deco-z-one,
[data-zip-parallax].zip-deco-z-two {
  --zip-parallax-base: rotate(27.66deg);
}

[data-zip-parallax].zip-floating-character {
  --zip-parallax-base: rotate(180deg) scaleY(-1);
}

@media (max-width: 1360px) {
  .zip-hero-content h2 {
    font-size: 46px;
    line-height: 64px;
  }

  .zip-hero-content > p {
    font-size: 22px;
  }

  .zip-language-heading h2,
  .zip-applications > h2 {
    font-size: 36px;
  }

  .zip-language-heading p,
  .zip-feature h3,
  .zip-welcome h3,
  .zip-scenario h3 {
    font-size: 18px;
  }

  .zip-feature p {
    font-size: 13px;
  }
}

/* Homepage display headings use the requested bold weight. */
.home-page h1,
.home-page h2,
.home-page h3 {
  font-weight: 500;
}

/* Page titles are emphasized without changing the weight of module headings. */
.pe-title-name h1 {
  font-weight: 500;
}

.pe-title-name > h1 + img {
  display: none;
}