/* ============================================================
   sections.css — 四个板块 + 产品配色主题
   ============================================================ */

/* ==========================================================
   屏 1 · 首页
   ========================================================== */
.page-home {
  background: linear-gradient(150deg, var(--c-dark) 0%, var(--c-dark-2) 62%, #10141c 100%);
}
.page-home::before { display: none; }

.home__bg { position: absolute; inset: 0; overflow: hidden; }

.home__year {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-en);
  font-size: clamp(2.4rem, 7.68rem, 6.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--c-dark-deep);
  opacity: .95;
  white-space: nowrap;
  user-select: none;
}

.home__block { position: absolute; opacity: .55; }
.home__block--a { right: 6%;  top: 44%; width: 28%; height: 0.34rem; background: #1c2a63; }
.home__block--b { right: 12%; top: 60%; width: 27%; height: 0.96rem; background: #5a1a2c; }
.home__block--c { left: 44%;  top: 66%; width: 6%;  height: 0.22rem; background: #4b1622; }

.home__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    118deg,
    transparent 0 0.62rem,
    rgba(255, 255, 255, .022) 0.62rem 0.63rem
  );
}

.home__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home__title {
  font-family: var(--f-en);
  font-size: clamp(0.38rem, 1.1712rem, 0.92rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: .008em;
  color: #fff;
  text-align: left;
}
.home__title .ln { display: block; }
.home__title .hl { color: var(--c-brand-2); font-weight: 800; }

.home__title .ln {
  opacity: 0;
  transform: translateY(0.26rem);
  animation: heroIn .95s var(--ease) forwards;
}
.home__title .ln:nth-child(1) { animation-delay: .10s; }
.home__title .ln:nth-child(2) { animation-delay: .22s; }
.home__title .ln:nth-child(3) { animation-delay: .34s; }
.home__title .ln:nth-child(4) { animation-delay: .46s; }
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 官网介绍片入口：标题下方的播放框，右上角切角 ---- */
.home__play {
  display: grid;
  place-items: center;
  margin-top: 0.42rem;
  width: 1.12rem;
  height: 0.58rem;
  background: rgba(12, 15, 22, .82);
  clip-path: polygon(0 0, calc(100% - 0.14rem) 0, 100% 0.14rem, 100% 100%, 0 100%);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.26rem);
  animation: heroIn .95s var(--ease) forwards .62s;
  transition: background .3s ease;
}
.home__play:hover { background: var(--c-brand-2); }

.home__play-tri {
  width: 0;
  height: 0;
  border-left: 0.17rem solid #fff;
  border-top: 0.1rem solid transparent;
  border-bottom: 0.1rem solid transparent;
  margin-left: 0.05rem;
  transition: border-left-color .3s ease;
}
.home__play:hover .home__play-tri { border-left-color: var(--c-dark); }

/* ==========================================================
   屏 2 · 产品信息
   ========================================================== */
.prod {
  position: relative;
  z-index: 2;
  height: 100vh;
  padding-top: var(--nav-h);

  /* ── 舞台 ──────────────────────────────────────────────
     产品屏里主视觉、文案、INTRO 条各自贴着视口的左右边缘定位，
     但它们的宽度都有 px 上限（art 700 / info 560 / reel 760，单位 px）。
     于是屏幕越宽，几块内容被扯得越开，中间空出一大片——
     2K 下已经明显，4K 下中间能空出 2000px 以上。
     这里给内容定一个最大宽度并居中：超过 --stage-w 的部分变成
     两侧留白，内容维持在设计时的疏密关系上。
     ≤1920px 时 --stage-x 为 0，1080p 上不会凭空多出两侧留白。 */
  --stage-w: min(100%, 19.2rem);
  --stage-x: calc((100% - var(--stage-w)) / 2);

  /* 主视觉的左边缘与宽度抽成变量，INTRO 占位条要跟着它的右边缘走，
     否则图一变宽就把占位条整个盖住（它在 art 下层）。 */
  --art-x: calc(var(--stage-x) + clamp(0.24rem, var(--stage-w) * .04, 0.96rem));
  --art-w: min(calc(var(--stage-w) * .56), 10.8rem);
}

/* ---- 抽象主视觉 ---- */
/* ---- Swiper 容器 ----
   铺满整个产品屏，每个 slide 成为 art / info 的定位上下文，
   于是下面那些百分比定位不用改一个字就照旧生效。
   z-index 沿用原来 .prod__art 的 2，保证仍压在 INTRO 占位条之上。 */
.prod__swiper {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.prod__swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}

.prod__art {
  position: absolute;
  left: var(--art-x);
  top: 6%;
  width: var(--art-w);
  height: 84%;
  z-index: 2;
}

.art__halo {
  position: absolute;
  left: 50%; top: 46%;
  width: 108%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--g-accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--g-accent) 10%, transparent) 42%,
    transparent 68%);
  filter: blur(0.06rem);
}

.art__ring {
  position: absolute;
  left: 50%; top: 46%;
  width: 74%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-14deg);
  border: 0.015rem solid color-mix(in srgb, var(--g-accent) 46%, transparent);
  border-radius: 50%;
}
.art__ring::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 0.01rem dashed color-mix(in srgb, var(--g-accent) 30%, transparent);
  border-radius: 50%;
}

.art__slab {
  position: absolute;
  background: color-mix(in srgb, var(--g-accent) 70%, transparent);
  opacity: .1;
}
.art__slab--1 {
  right: -2%; top: 18%;
  width: 40%; height: 11%;
  transform: skewY(-8deg);
}
.art__slab--2 {
  left: -4%; bottom: 16%;
  width: 34%; height: 7%;
  transform: skewY(6deg);
}

.art__glyph {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  height: 96%;
  width: auto;
  color: var(--g-accent);
  fill: currentColor;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.18rem 0.34rem color-mix(in srgb, var(--g-deep) 34%, transparent));
}

/* ---- 产品配图（AI 生成的主视觉 KV） ---- */
.art__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 四张 KV 都是 1400x1866 的竖构图。contain 时高度顶满、横向只剩 ~700px，
     宽屏上主视觉与右侧文案之间会空出一大片。改用 cover 让它横向铺开，
     代价是裁掉上下各一小截天空/地面——这几张图的主体都在中部，裁得掉。 */
  object-fit: cover;
  object-position: center 45%;
  /* 图为浅白底，正片叠底后与页面底色及下层光晕自然融合 */
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 74% 62% at 50% 48%, #000 62%, transparent 99%);
          mask-image: radial-gradient(ellipse 74% 62% at 50% 48%, #000 62%, transparent 99%);
}

/* 有配图时让位：隐藏抽象造型、压暗装饰层 */
.prod__art.has-img .art__glyph { display: none; }
.prod__art.has-img .art__ring  { opacity: .5; }
.prod__art.has-img .art__slab  { opacity: .06; }
.prod__art.has-img .art__grid  { opacity: .2; }
.prod__art:not(.has-img) .art__img { display: none; }

.art__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--g-deep) 40%, transparent) 0.01rem, transparent 0.01rem);
  background-size: 0.18rem 0.18rem;
  opacity: .35;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 20%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 46%, #000 20%, transparent 72%);
}

/* 入场动画：跟着 Swiper 的当前 slide 走，每切一张重放一次。
   主视觉的横向位移交给 Swiper 的滑动本身，这里不再叠加 artIn，
   否则一次切换会看到「滑动 + 自己再挪一下」的双重运动。 */
.prod__swiper .swiper-slide-active .art__glyph { animation: glyphIn 1.15s var(--ease) both .06s; }
.prod__swiper .swiper-slide-active .art__img   { animation: imgIn 1.15s var(--ease) both .06s; }
.prod.is-in .prod__play { animation: infoIn .8s var(--ease) both .3s; }
@keyframes glyphIn { from { opacity: 0; transform: translate(-50%, -44%) scale(.94); } }
@keyframes imgIn   { from { opacity: 0; transform: scale(.96); } }

/* ---- 文案 ---- */
.prod__info {
  position: absolute;
  right: calc(var(--stage-x) + var(--page-x));
  top: 16%;
  width: min(calc(var(--stage-w) * .44), 5.6rem);
  text-align: right;
}

.prod__tag {
  font-family: var(--f-en);
  font-size: 0.1rem;
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--g-accent);
  margin-bottom: 0.12rem;
}

.prod__cn {
  font-size: clamp(0.34rem, 0.8256rem, 0.62rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--c-ink);
}

.prod__en {
  font-family: var(--f-en);
  font-size: clamp(0.15rem, 0.288rem, 0.21rem);
  font-weight: 600;
  letter-spacing: .06em;
  margin-top: 0.06rem;
  background: linear-gradient(92deg, var(--g-accent), var(--c-brand));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.prod__rule {
  display: block;
  width: 0.84rem;
  height: 0.01rem;
  margin: 0.22rem 0 0.22rem auto;
  background: linear-gradient(90deg, transparent, var(--c-ink-4));
  transform: skewY(-14deg);
  transform-origin: right;
}

.prod__lead {
  font-size: 0.135rem;
  color: var(--c-ink-2);
  margin-bottom: 0.06rem;
}
.prod__desc p {
  font-size: 0.135rem;
  color: var(--c-ink-2);
}

.prod__swiper .swiper-slide-active .prod__info > * { animation: infoIn .8s var(--ease) both; }
.prod__swiper .swiper-slide-active .prod__info > *:nth-child(1) { animation-delay: .06s; }
.prod__swiper .swiper-slide-active .prod__info > *:nth-child(2) { animation-delay: .12s; }
.prod__swiper .swiper-slide-active .prod__info > *:nth-child(3) { animation-delay: .18s; }
.prod__swiper .swiper-slide-active .prod__info > *:nth-child(4) { animation-delay: .24s; }
.prod__swiper .swiper-slide-active .prod__info > *:nth-child(5) { animation-delay: .30s; }
.prod__swiper .swiper-slide-active .prod__info > *:nth-child(6) { animation-delay: .36s; }
@keyframes infoIn { from { opacity: 0; transform: translateY(0.16rem); } }

/* ---- 视频占位条 ---- */
.prod__reel {
  /* 贴着主视觉右下角：左端压在图上，右端探出图外，INTRO 字样才露得出来 */
  position: absolute;
  left: calc(var(--art-x) + var(--art-w) - 3rem);
  bottom: 17%;
  z-index: 1;
  width: 4.8rem;
  height: 1.68rem;
  background: linear-gradient(112deg,
    color-mix(in srgb, var(--g-accent) 10%, #eff3f8) 0%,
    #f2f5f9 60%,
    color-mix(in srgb, var(--g-deep) 5%, #eaeff5) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 96% 100%, 0 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.16rem 0.22rem;
}
.prod__reel-tag {
  font-family: var(--f-en);
  font-size: 0.11rem;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--c-ink-2);
  border-top: 0.015rem solid var(--c-ink);
  padding-top: 0.09rem;
  min-width: 1.68rem;
  text-align: center;
}
.prod__reel-dot {
  width: 0.15rem;
  height: 0.15rem;
  background: var(--g-accent);
  margin-left: 0.14rem;
  margin-top: 0.02rem;
}

/* ---- intro 视频入口：占位条上方的播放框 ---- */
.prod__play {
  /* 与 .prod__reel 同一套定位参数：贴住占位条上沿、右端内缩 22px */
  position: absolute;
  left: calc(var(--art-x) + var(--art-w) - 3rem + 4.8rem - 2.08rem);
  bottom: calc(17% + 1.68rem - 0.01rem);
  z-index: 4;
  display: none;
  place-items: center;
  width: 1.86rem;
  height: 0.62rem;
  border: 0.015rem solid var(--c-ink);
  border-bottom: none;
  background: rgba(244, 246, 249, .72);
  -webkit-backdrop-filter: blur(0.02rem);
          backdrop-filter: blur(0.02rem);
  cursor: pointer;
  transition: background .3s ease;
}
.prod.has-pv .prod__play { display: grid; }
.prod__play:hover { background: color-mix(in srgb, var(--g-accent) 18%, #fff); }

.prod__play-tri {
  width: 0;
  height: 0;
  border-left: 0.15rem solid var(--c-ink);
  border-top: 0.09rem solid transparent;
  border-bottom: 0.09rem solid transparent;
  margin-left: 0.04rem;
  transition: border-left-color .3s ease;
}
.prod__play:hover .prod__play-tri { border-left-color: var(--g-accent); }

/* ---- intro 视频弹层 ---- */
.pv {
  position: fixed;
  inset: 0;
  /* 要盖过顶栏：.nav 带 backdrop-filter，会被提升为独立合成层 */
  z-index: 1000;
  display: none;
  place-items: center;
}
.pv.is-on { display: grid; }

.pv__mask {
  position: absolute;
  inset: 0;
  background: rgba(20, 23, 30, .82);
  animation: pvFade .3s ease both;
}

/* 顶栏的 backdrop-filter 会另起合成层，遮罩压不住它，弹层期间直接让它退场 */
body.is-pv .nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.pv__box {
  position: relative;
  animation: pvIn .42s var(--ease) both;
}

/* 让容器贴合视频自身比例，避免竖版片源在宽框里留大片黑边；
   宽高都只给上限，替换元素会自己等比缩放到框内 */
.pv__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 17.28rem;
  max-height: 80vh;
  background: #000;
  box-shadow: 0 0.24rem 0.6rem rgba(0, 0, 0, .45);
}

.pv__close {
  position: absolute;
  right: -6px;
  bottom: 100%;
  margin-bottom: 0.12rem;
  width: 0.36rem;
  height: 0.36rem;
  font-size: 0.3rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), color .3s ease;
}
.pv__close:hover { color: var(--c-brand-2); transform: rotate(90deg); }

@keyframes pvFade { from { opacity: 0; } }
@keyframes pvIn   { from { opacity: 0; transform: translateY(0.18rem) scale(.98); } }

/* ---- 弹层的图文形态：新闻正文 / 新闻列表 ---- */
.pv [hidden] { display: none; }        /* 作者样式会盖掉 hidden 的 UA 规则 */
.pv__doc {
  width: 8.4rem;
  max-width: calc(100vw - 40px);
  max-height: 76vh;
  overflow-y: auto;
  padding: 0.4rem 0.44rem;
  background: #fff;
  box-shadow: 0 0.24rem 0.6rem rgba(0, 0, 0, .45);
}
.nvdoc__date {
  font-family: var(--f-en);
  font-size: 0.13rem;
  letter-spacing: .12em;
  color: var(--c-brand);
}
.nvdoc__title {
  margin: 0.1rem 0 0.24rem;
  font-size: 0.24rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
}
.nvdoc__h {
  margin: 0.3rem 0 0.14rem;
  font-size: 0.17rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink);
}
.nvdoc__h:first-of-type { margin-top: 0.2rem; }
.nvdoc p + p { margin-top: 0.16rem; }
.nvdoc p:not(.nvdoc__date) {
  font-size: 0.15rem;
  line-height: 2;
  color: var(--c-ink-2);
}

.nvlist__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.18rem 0;
  border-bottom: 1px solid #eceef2;
  background: transparent;
  cursor: pointer;
  transition: color .3s ease;
}
.nvlist__item:hover { color: var(--c-brand); }
.nvlist__date {
  display: block;
  margin-bottom: 0.06rem;
  font-family: var(--f-en);
  font-size: 0.12rem;
  letter-spacing: .1em;
  color: var(--c-ink-3);
}
.nvlist__t { font-size: 0.16rem; line-height: 1.6; color: inherit; }

/* ---- 缩略图切换 ---- */
.prod__thumbs {
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.12rem;
  z-index: 3;
}

.thumb {
  position: relative;
  width: clamp(0.84rem, 1.536rem, 1.12rem);
  height: clamp(0.6rem, 1.0752rem, 0.76rem);
  border: 0.02rem solid transparent;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--g-accent) 24%, #fff),
    color-mix(in srgb, var(--g-deep) 18%, #fff));
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.thumb:hover { transform: translateY(-5px); }
.thumb.is-active {
  border-color: var(--c-brand);
  box-shadow: 0 0.08rem 0.2rem rgba(29, 33, 41, .14);
  transform: translateY(-5px);
}

/* 自动轮播进度条：进度由 Swiper 的 autoplayTimeLeft 逐帧写进 --prod-progress，
   所以悬停暂停时它是真的停在当前位置，而不是靠 CSS 定时动画硬跑。
   暂停时 .prod 上的 .is-auto 被摘掉，进度条随之归零。 */
.thumb.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.03rem;
  z-index: 2;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left center;
}
.prod.is-auto .thumb.is-active::after {
  transform: scaleX(var(--prod-progress, 0));
}

.thumb__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: .8;
}
.thumb__art svg {
  height: 76%;
  width: auto;
  color: var(--g-accent);
  fill: currentColor;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thumb__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* 有配图时缩略图直接用图，隐藏抽象造型 */
.thumb.has-img .thumb__art { opacity: 1; }
.thumb.has-img .thumb__art svg { display: none; }
.thumb:not(.has-img) .thumb__art img { display: none; }

.thumb__cn {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.03rem 0.04rem;
  font-size: 0.1rem;
  letter-spacing: .04em;
  text-align: center;
  color: #fff;
  background: linear-gradient(transparent, rgba(29, 33, 41, .78) 40%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
   屏 3 · 了解我们
   ========================================================== */
.about {
  position: relative;
  z-index: 2;
  height: 100vh;
  padding: calc(var(--nav-h) + 3vh) var(--rail-w) 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__tabs {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  width: min(8.8rem, 100%);
  justify-content: flex-end;
  margin-bottom: 3vh;
  flex: none;
}
.about__tab {
  padding: 0.06rem 0.18rem;
  font-size: 0.135rem;
  letter-spacing: .04em;
  color: var(--c-ink-2);
  transition: background .3s ease, color .3s ease;
}
.about__tab:hover { color: var(--c-brand); }
.about__tab.is-active { background: var(--c-brand); color: #fff; }
.about__tab-sep {
  width: 0.01rem;
  height: 0.18rem;
  background: var(--c-line);
  margin-left: 0.06rem;
}

.about__panel {
  display: none;
  width: min(8.8rem, 100%);
  flex: 1;
  min-height: 0;
}
.about__panel.is-active { display: block; }

.about__scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 0.14rem;
}

.vision {
  font-size: clamp(0.24rem, 0.5952rem, 0.44rem);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: .12em;
  text-align: right;
  margin-bottom: 6vh;
  background: linear-gradient(96deg, #4aa8ff 6%, #b58bff 46%, #ff9ecb 78%, #7fd7ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.vision__q {
  -webkit-text-fill-color: var(--c-ink-4);
  color: var(--c-ink-4);
  font-weight: 200;
}

.about__p {
  font-size: 0.135rem;
  color: var(--c-ink-2);
  margin-bottom: 0.2rem;
  letter-spacing: .02em;
}
.about__p .mark { color: var(--c-brand); font-weight: 600; }

.about__creed {
  font-size: 0.14rem;
  font-weight: 600;
  color: var(--c-brand);
  margin-top: 0.3rem;
}
.about__creed-en {
  font-family: var(--f-en);
  font-size: 0.14rem;
  letter-spacing: .06em;
  color: var(--c-ink-3);
  padding-bottom: 0.2rem;
}

/* ==========================================================
   屏 4 · 新闻动态 + 页脚
   ========================================================== */
.page-news { display: block; }

.news {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 6vh) var(--rail-w) 4vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news__body {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(0.2rem, 0.576rem, 0.54rem);
  align-items: center;
}
.news__body.is-in .news__text   { animation: infoIn .7s var(--ease) both .05s; }
.news__body.is-in .news__visual { animation: infoIn .7s var(--ease) both .12s; }

/* ---- 左：文本 ---- */
.news__text { padding-left: clamp(0, 0.576rem, 0.6rem); }

.news__date {
  font-family: var(--f-en);
  font-size: clamp(0.4rem, 0.8832rem, 0.66rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-ink-4);
  letter-spacing: .01em;
}
.news__date span { margin: 0 0.06rem; font-weight: 200; }
.news__year {
  font-family: var(--f-en);
  font-size: 0.2rem;
  font-weight: 300;
  color: var(--c-ink-4);
  margin-top: 0.02rem;
  margin-bottom: 6vh;
}

.news__title {
  font-size: 0.16rem;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.7;
  margin-bottom: 0.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news__desc {
  font-size: 0.125rem;
  color: var(--c-ink-3);
  line-height: 1.95;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news__more {
  display: inline-block;
  margin-top: 0.22rem;
  font-family: var(--f-en);
  font-size: 0.12rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-brand);
}
.news__more span { letter-spacing: -.1em; margin-left: 0.04rem; }
.news__more:hover span { margin-left: 0.1rem; transition: margin .3s var(--ease); }

/* ---- 右：视觉 ---- */
.news__visual { position: relative; padding: 5% 0; }

.news__hatch {
  position: absolute;
  left: 16%; right: -4%;
  top: 0; bottom: 8%;
  background: repeating-linear-gradient(
    -46deg,
    transparent 0 0.05rem,
    rgba(29, 33, 41, .13) 0.05rem 0.06rem
  );
}

.news__cover {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 8.4;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(140deg, #7c93b8, #b9c8dc 52%, #dfe7f1);
}
.news__cover[data-theme="indigo"] { background: linear-gradient(140deg, #26306f, #4356c8 46%, #93a6ff); }
.news__cover[data-theme="teal"]   { background: linear-gradient(140deg, #0d5f5a, #17b3a3 46%, #93e7dc); }
.news__cover[data-theme="jade"]   { background: linear-gradient(140deg, #175c33, #3fa85f 46%, #a8e6b8); }
/* 配图新闻：底图铺满 + 压暗，保证封面文字可读（须放在 data-theme 之后，简写会重置 size） */
.news__cover.has-img { background-size: cover; background-position: center; }
.news__cover.has-img::after {
  background: linear-gradient(140deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .14) 58%, rgba(0, 0, 0, .4));
}
.news__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 68% 26%, rgba(255,255,255,.42), transparent 52%);
}
.news__cover-cn {
  position: relative;
  z-index: 2;
  font-size: clamp(0.3rem, 0.6912rem, 0.54rem);
  font-weight: 700;
  letter-spacing: .22em;
  color: #fff;
  text-shadow: 0 0.04rem 0.22rem rgba(0, 0, 0, .28);
  padding-left: .22em;
}

.news__slogan {
  position: absolute;
  right: 4%;
  top: -6%;
  z-index: 3;
  font-family: var(--f-en);
  font-size: 0.11rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-align: right;
  color: var(--c-ink);
}
.news__pink {
  position: absolute;
  right: 4%;
  top: 3%;
  z-index: 3;
  width: 0.78rem;
  height: 0.08rem;
  background: var(--c-pink);
}

/* ---- 分页 ---- */
.news__foot {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  margin-top: 4vh;
  padding-left: clamp(0, 0.576rem, 0.6rem);
}
.news__pager { display: flex; gap: 0.08rem; }
.pg {
  width: 0.42rem;
  height: 0.42rem;
  border: 0.01rem solid var(--c-line);
  font-family: var(--f-en);
  font-size: 0.15rem;
  color: var(--c-ink-4);
  transition: all .28s ease;
}
.pg:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pg.is-active { border-color: var(--c-ink); color: var(--c-ink); }

.news__all {
  padding: 0.11rem 0.26rem;
  border: 0.01rem solid var(--c-line);
  font-size: 0.13rem;
  letter-spacing: .06em;
  color: var(--c-ink-2);
  transition: all .3s ease;
}
.news__all:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* ---- 页脚 ---- */
.foot {
  position: relative;
  z-index: 2;
  background: #fff;
  border-top: 0.01rem solid var(--c-line);
  padding: 0.34rem var(--rail-w) 0.4rem;
  text-align: center;
  font-size: 0.115rem;
  line-height: 2;
  color: var(--c-ink-3);
}
.foot__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
  margin-bottom: 0.14rem;
  font-size: 0.125rem;
  color: var(--c-ink-2);
}
.foot__links a:hover { color: var(--c-brand); }
.foot__links span { color: var(--c-ink-4); }

.foot__warn {
  max-width: 7.6rem;
  margin: 0 auto 0.14rem;
  color: var(--c-ink-2);
}
.foot__line span { margin: 0 0.08rem; color: var(--c-ink-4); }
.foot__copy { margin-top: 0.12rem; }
.foot__copy a { color: inherit; }
.foot__copy a:hover { color: var(--c-brand); }

/* ==========================================================
   响应式
   ========================================================== */
@media (max-width: 1180px) {
  .prod__art  { width: 42vw; left: 3vw; }
  .prod__info { width: 46vw; }
  .prod__reel { display: none; }
  /* 占位条没了，播放键改挂在文案区下方，补回底边 */
  .prod__play {
    left: auto;
    right: var(--page-x);
    bottom: 18%;
    width: 156px;
    height: 54px;
    border-bottom: 1.5px solid var(--c-ink);
  }
  .about, .news { padding-left: 4vw; padding-right: 4vw; }
  .foot { padding-left: 4vw; padding-right: 4vw; }
}

@media (max-width: 900px) {
  .fp__page { overflow-y: auto; }

  .home__play { width: 104px; height: 44px; margin-top: 28px; }

  /* 产品：改为上下堆叠 */
  .prod { display: flex; flex-direction: column; padding: calc(var(--nav-h) + 16px) 20px 130px; }
  .prod__art {
    position: relative; left: auto; top: auto;
    width: 100%; height: 30vh; flex: none; margin-bottom: 12px;
  }
  /* 堆叠后容器是宽扁的，cover 会把竖构图裁成一条，这里回退到 contain */
  .art__img { object-fit: contain; }
  .prod__info {
    position: relative; right: auto; top: auto;
    width: 100%; text-align: left;
  }
  .prod__rule { margin-left: 0; transform-origin: left; background: linear-gradient(90deg, var(--c-ink-3), transparent); }
  /* 堆叠布局：播放键回到文档流，跟在文案后面 */
  .prod__play {
    position: relative;
    left: auto; right: auto; bottom: auto;
    align-self: flex-start;
    width: 148px;
    height: 46px;
    margin-top: 18px;
  }
  .prod__thumbs { bottom: 18px; gap: 8px; }
  .thumb { width: 74px; height: 54px; }

  /* 了解我们 */
  .about { padding: calc(var(--nav-h) + 16px) 20px 30px; }
  .about__tabs { justify-content: flex-start; }
  .vision { text-align: left; letter-spacing: .06em; }


  /* 新闻：单列 */
  .news { padding: calc(var(--nav-h) + 16px) 20px 30px; }
  .news__body { grid-template-columns: 1fr; }
  .news__text { padding-left: 0; order: 2; }
  .news__visual { order: 1; }
  .news__year { margin-bottom: 18px; }
  .news__slogan, .news__pink { display: none; }
  .news__foot { flex-wrap: wrap; gap: 14px; padding-left: 0; }
  .foot { padding: 0.26rem 0.2rem 0.34rem; }
}