/* 章节标题 + 副标题上下排列 */
.section-intro--stack {
  display: block;
  margin-bottom: 56px;
}

.section-intro--stack > p {
  max-width: 640px;
  margin-top: 18px;
}

/* 项目章节标题独占一屏：垂直居中，标题放大 */
/* 滚动定位会给悬浮导航留出 scroll-padding（桌面 88px / 手机 72px），屏顶落在导航下方；
   下内边距 = 上内边距 + 这段偏移，内容才在导航以下的可见区域里居中 */
.ai-intro {
  display: flex;
  align-items: center;
  padding: 72px 0 168px;
  border-top: 1px solid var(--color-border-subtle);
}

.ai-intro .section-intro--stack {
  margin-bottom: 0;
}

.ai-intro .section-intro h2 {
  font-size: clamp(44px, 7vw, 96px);
}

.ai-intro .section-intro--stack > p {
  margin-top: 24px;
  font-size: 18px;
}

/* AI 联创和 OPC 项目：一个项目一个模块，按时间倒序；有视频的模块左文右竖屏视频 */
.ai-section {
  padding: 120px 0;
  border-top: 1px solid var(--color-border-subtle);
}

.project-list {
  border-top: 2px solid var(--color-border-strong);
}

/* 一个项目一屏：每个项目独立成屏，内容在导航以下的可见区垂直居中；
   下内边距 = 上内边距 + 导航高度（88px），与 .ai-intro 同一套居中逻辑 */
.ai-project {
  display: flex;
  align-items: center;
  padding: 64px 0 152px;
}

.ai-project .section-shell {
  flex: none;
}

.ai-project .project-module {
  padding: 0;
  border-bottom: 0;
}

/* 单屏内的网页产品卡片：桌面端文字在左、浏览器外框在右，一屏放得下 */
.ai-project .project-module--screens {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.ai-project .pm-screens {
  margin-top: 0;
}

/* 单屏网页产品卡片里功能点单列排：左栏窄，两列会挤 */
.ai-project .project-module--screens .pm-points {
  grid-template-columns: 1fr;
  gap: 14px 0;
  margin-top: 28px;
}

.project-module {
  padding: 64px 0;
  border-bottom: 1px solid var(--color-border-default);
}

.project-module:last-child {
  border-bottom: 0;
}

.project-module--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.pm-copy {
  max-width: 720px;
}

.pm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
}

.pm-index {
  color: var(--color-text-subtle);
}

.pm-title {
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
}

.pm-tagline {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--fw-medium);
}

.pm-lead {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: var(--lh-read);
  text-wrap: pretty;
}

.pm-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 36px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.pm-points li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: start;
}

.pm-points .dot {
  margin-top: 6px;
}

.pm-points h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
}

.pm-points p {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: var(--lh-read);
  text-wrap: pretty;
}

.pm-facts {
  display: grid;
  gap: 10px;
  margin: 32px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-subtle);
}

.pm-facts div {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-3);
  align-items: baseline;
}

.pm-facts dt {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
}

.pm-facts dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
}

.pm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 28px;
}

.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 竖屏视频（9:16），设计系统 icon-btn 做控制，光谱进度线 */
.pm-media {
  width: clamp(260px, 26vw, 340px);
  margin: 0;
}

.pm-video {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: var(--border-hair) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-bg-inverse);
  box-shadow: var(--shadow-soft);
}

.pm-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.pm-video__controls {
  position: absolute;
  bottom: 16px;
  left: 14px;
  display: flex;
  gap: 8px;
}

.pm-video__controls .icon-btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.pm-video .ic-pause,
.pm-video .ic-sound {
  display: none;
}

.pm-video.is-playing .ic-play {
  display: none;
}

.pm-video.is-playing .ic-pause {
  display: block;
}

.pm-video:not(.is-muted) .ic-muted {
  display: none;
}

.pm-video:not(.is-muted) .ic-sound {
  display: block;
}

.pm-video__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
}

.pm-video__progress span {
  display: block;
  height: 100%;
  background: var(--color-text-inverse);
  transform: scaleX(0);
  transform-origin: left center;
}

.pm-media figcaption {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-align: center;
}

@media (max-width: 860px) {
  .ai-section {
    padding: 88px 0;
  }

  .ai-intro {
    padding: 48px 0 128px;
  }

  .ai-intro .section-intro--stack > p {
    font-size: 16px;
  }

  .section-intro--stack {
    margin-bottom: 40px;
  }

  .project-module {
    padding: 48px 0;
  }

  /* 手机：视频提到一句话介绍之后、亮点之前，不用滚过整段文字才看到 */
  .project-module--media {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .project-module--media .pm-copy {
    display: contents;
  }

  .project-module--media .pm-points,
  .project-module--media .pm-facts,
  .project-module--media .pm-foot {
    order: 2;
  }

  .pm-points {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .project-module--media .pm-media {
    order: 1;
    align-self: center;
    width: min(300px, 82vw);
    margin: 32px 0 4px;
  }

  .ai-project {
    padding: 48px 0 120px;
  }

  /* 手机：单屏卡片回到上下堆叠，浏览器外框占满版心 */
  .ai-project .project-module--screens {
    display: block;
  }

  .ai-project .pm-screens {
    margin-top: 36px;
  }
}

/* 网页产品模块：上面一栏文字（和 Mono 模块同一套），下面浏览器外框占满版心、与文字左右对齐；
   分段按钮和当前页说明放在外框下同一行 */
/* 文字占满版心：一句话介绍在桌面端一行放下；角色、形态、标签和外链合成一条信息栏，右端与下方外框对齐 */
.project-module--screens .pm-copy {
  max-width: none;
}

.pm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 48px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
}

.pm-bar .pm-facts {
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pm-bar .pm-facts div {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.pm-bar .pm-foot {
  flex: 1;
  margin: 0;
}

.pm-screens {
  margin: 48px 0 0;
}

.browser {
  overflow: hidden;
  border: var(--border-hair) solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-soft);
}

.browser__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-bottom: var(--border-hair) solid var(--color-border-subtle);
  background: var(--color-bg-hover);
}

.browser__dots {
  display: flex;
  gap: 7px;
}

.browser__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-default);
}


.browser__view {
  position: relative;
  aspect-ratio: 1600 / 1013;
  background: #fff;
}

.browser__view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.browser__view img.is-active {
  opacity: 1;
}

.pm-screens__nav {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pm-screens__nav::-webkit-scrollbar {
  display: none;
}

.pm-screens__nav .segmented__btn {
  position: relative;
  flex: none;
  min-height: 36px;
  overflow: hidden;
  white-space: nowrap;
}

/* 选中按钮底部光谱计时线：走满自动换下一页；悬停或离开视口时暂停 */
.pm-screens__timer {
  position: absolute;
  right: 14px;
  bottom: 4px;
  left: 14px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-text-default);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.pm-screens__nav .segmented__btn.is-selected .pm-screens__timer {
  opacity: 1;
  animation: screen-timer 4.5s linear forwards;
  animation-play-state: paused;
}

.pm-screens.is-cycling .segmented__btn.is-selected .pm-screens__timer {
  animation-play-state: running;
}

@keyframes screen-timer {
  to { transform: scaleX(1); }
}

.pm-screens__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 18px;
}

.pm-screens__caption {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 15px;
  text-align: right;
}

@media (max-width: 860px) {
  .pm-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .pm-bar .pm-foot {
    flex: none;
  }

  .pm-screens {
    margin-top: 36px;
  }

  .pm-screens__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
  }

  .pm-screens__caption {
    text-align: left;
  }

  .browser__bar {
    height: 32px;
    padding: 0 12px;
  }

  .browser__dots i {
    width: 8px;
    height: 8px;
  }


  .pm-screens__nav {
    justify-content: flex-start;
  }

  /* 手机：五个分段按钮收紧内边距，一行放下不被截断 */
  .pm-screens__nav .segmented__btn {
    padding-inline: 10px;
    font-size: 12px;
  }
}

/* 桌面：视频控制按钮缩小一档；手机保持 44px 触控 */
@media (min-width: 861px) {
  .pm-video__controls .icon-btn {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
  }
}