@charset "UTF-8";
/* =============================================================================
   hebang-home.css —— 首页十段

   取值只来自 token，断点手写并与 token 常量一致。
   段标题的首词单独一层，颜色由 CSS 给它。
   ============================================================================= */

/* --- 段标题 --- */

.hebang-title {
  margin: 0 0 var(--hebang-space-6);
  font-size: var(--hebang-fs-h2);
  font-weight: var(--hebang-weight-bold);
  line-height: var(--hebang-lh-head);
  letter-spacing: -0.01em;
}

.hebang-title-first {
  color: var(--hebang-color-primary-text);
}

.hebang-lead {
  max-width: 62ch;
  margin: 0 0 var(--hebang-space-6);
  color: var(--hebang-color-text);
}

/* 标题左、按钮右的段头，用于项目与博客两段 */
.hebang-section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hebang-space-7);
  margin-bottom: var(--hebang-space-9);
}

.hebang-section-bar .hebang-title {
  margin-bottom: 0;
}

/* --- 首屏 --- */

/*
 * 段根保留横向留白，背景图放在圆角内层，内容为纵向标题区。
 * 各断点通过内边距决定段高，避免固定高度裁切多行标题。
 */
.hebang-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
  /*
   * 行高使用比例而不是像素值：逐字符圆环的字号比段根小，写死像素行高会把它撑大、字符偏离圆周。
   * 写在段根上而不是内容盒上：圆环徽标是段根的子元素，写在内容盒里它继承不到。
   */
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

.hebang-heading-inner {
  position: relative;
}

@media (width < 768px) {
  .hebang-hero {
    flex-wrap: wrap;
    padding: 0;
  }
}

/* 中韩短标题默认保留两行排版空间；桌面服务标题单独恢复一行。 */
html:is(:lang(zh), :lang(ko)) :is(.hebang-hero, .hebang-about, .hebang-services) .hebang-heading-title {
  min-block-size: 2lh;
  letter-spacing: 0;
  text-wrap: balance;
}

/* --- 关于 --- */

/*
 * 段根只承担横向 20px 留白与定位上下文；两列排布、列间距与纵向留白都在内层，
 * 内层因此跨满段高，并按站点容器宽度 1362px 居中。
 */
.hebang-about {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

.hebang-about-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 20px 28px;
  width: 100%;
  max-width: 1362px;
  margin-inline: auto;
  padding-block: 60px 120px;
}

.hebang-about-media {
  position: relative;
  display: flex;
  flex: 0 0 49%;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

@media (max-width: 1366px) {
  .hebang-about-media {
    flex: 0 0 48%;
    align-self: flex-start;
  }

}

.hebang-about-body {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  padding-left: 30px;
}

.hebang-figure {
  position: relative;
  margin: 0;
  text-align: left;
}

.hebang-about-media-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.hebang-figure--media {
  position: relative;
  width: 100%;
}

.hebang-figure--media img,
.hebang-figure--main img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.hebang-figure--main {
  width: 100%;
  margin: 0;
}

.hebang-figure--media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/*
 * 媒体列两层入场：下排生产图用 fadeInUp、厂房图用 fadeInLeft，各 1.25s、缓动 ease。
 * 类名由 is_revealed 加上，减少动效时不加类、元素保持最终状态。
 */
@keyframes hebang-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hebang-fade-in-left {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hebang-about-media.is_revealed .hebang-about-media-inner {
  animation: hebang-fade-in-up 1.25s ease both;
}

.hebang-about-media.is_revealed .hebang-figure--main {
  animation: hebang-fade-in-left 1.25s ease both;
}

/* 内容列的左内边距只有 >1366 档存在；这条必须排在基础规则之后，否则会被盖掉 */
@media (max-width: 1366px) {
  .hebang-about-body {
    padding-left: 0;
  }
}

.hebang-about-lead {
  margin: 0;
  color: var(--hebang-color-text);
  font-size: 17px;
  line-height: 30px;
}
.hebang-about .hebang-heading {
  text-align: left;
}

.hebang-about .hebang-heading-sub {
  display: inline-block;
  color: var(--hebang-color-primary-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: normal;
  text-transform: none;
}

.hebang-about .hebang-heading-title {
  margin: 10px 0 22px;
  color: var(--hebang-color-primary-heading);
  font-family: var(--hebang-font-heading);
  font-size: 52px;
  font-weight: 700;
  line-height: 58px;
  letter-spacing: -1px;
}

/* --- 标签页（关于段） --- */

/* 三层分别承担外间距、底板圆角和标签导航布局。 */
.hebang-tabs-wrap {
  display: block;
  margin-top: 35px;
}

.hebang-tabs {
  display: block;
}

.hebang-tabs-menu {
  background-color: var(--hebang-color-surface-alt);
  border-radius: 3px;
}

.hebang-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

/*
 * 三个标签等分导航宽度，避免短文案留下空白并使激活态偏移。
 */
.hebang-tabs-link {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 36px;
  border-radius: 4.25px;
  border: 0;
  background: transparent;
  color: var(--hebang-color-text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

@media (max-width: 1366px) {
  .hebang-tabs-link {
    font-size: 15px;
  }
}

/* 激活标签只保留上圆角，与标签面板形成相连的视觉块 */
.hebang-tabs-link {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.hebang-tabs-link:hover,
.hebang-tabs-link.is_active {
  color: var(--hebang-color-primary-text);
}

.hebang-tabs-content {
  padding: 0;
}

/*
 * 激活面板播放入场动画；隐藏面板使用 hidden，避免读屏与键盘焦点进入不可见内容。
 * 面板自身不留内边距，内容缩进由 .hebang-tabs-area 承担，两种面板因此共用同一套规格。
 */
.hebang-tabs-panel {
  padding: 0;
  color: var(--hebang-color-text);
}

.hebang-tabs-panel.is_active {
  animation: hebang-slide-down 5s ease-out;
}

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

@keyframes hebang-slide-down {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }

  10% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 面板内容层：上内边距把内容与标签导航分开，窄档再由断点补左缩进 */
.hebang-tabs-area {
  padding: 30px 0 0;
}

/* 引导句右侧两级各留 20px：外层负责段落盒宽，内层负责文字断行宽度。 */
.hebang-tabs-desc {
  margin-right: 20px;
}

.hebang-tabs-lead {
  margin: 0 20px 0 0;
  padding: 0;
  color: var(--hebang-color-text);
  font-size: 17px;
  line-height: 30px;
}

.hebang-features {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* 条目的上外边距是特性表的高度来源；字号与行高固定，不随条目文字变化 */
.hebang-features li {
  display: flex;
  align-items: center;
  margin-top: 14px;
  font-size: 16px;
  line-height: 30px;
}

/* 勾选图是描边圆：圆形由边框与圆角共同构成，缺一就不成圆 */
.hebang-about .hebang-features li .hebang-icon {
  position: relative;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 2px solid var(--hebang-color-primary);
  border-radius: 50%;
  color: var(--hebang-color-primary);
  font-size: 15px;
  line-height: 30px;
}

/* 特性文字比同段正文小一档、不加粗，长条目才放得进一行 */
.hebang-tabs .hebang-feature-text {
  display: inline;
  font-size: 15px;
  font-weight: 400;
  line-height: 30px;
}

.hebang-feature-text {
  color: var(--hebang-color-ink);
  font-weight: 500;
}

/* --- 手风琴（关于段，1024 及以下才显示） --- */

/*
 * 标签页与手风琴同时保留在 DOM 中，由断点切换可见结构，确保两种布局展示同一内容。
 */
.hebang-tabs-accordion {
  display: none;
  border-radius: 3px;
}

.hebang-accordion-item {
  position: relative;
  background-color: var(--hebang-color-surface-alt);
  border-radius: 4.25px 4.25px 0 0;
}

.hebang-accordion-heading {
  /* 标题元素只作按钮容器：字号与行高沿用段根继承值，参与布局的是按钮本体 */
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/*
 * 手风琴在宽档隐藏，但计算样式仍要逐项对齐；
 * 1024 及以下由窄档规则收窄按钮内边距。
 */
.hebang-accordion-button {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 10px 36px;
  border: 0;
  border-radius: 3.25px 3.25px 0 0;
  background: transparent;
  color: var(--hebang-color-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  text-align: left;
  align-items: center;
  cursor: pointer;
}

.hebang-accordion-panel {
  padding: 0;
}

.hebang-about .hebang-accordion-button[aria-expanded="true"] {
  background: var(--hebang-color-primary-tint);
  color: var(--hebang-color-primary-text);
}

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

/* 按钮行与标签导航同宽，按钮在行内居中。 */
.hebang-about-bottom {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 50px;
}

.hebang-about-action {
  display: flex;
  position: relative;
  justify-content: center;
}

/* 按钮外层把行高归零：行内块按钮的行盒否则会多出基线以下的空隙 */
.hebang-about-action-btn {
  line-height: 0;
}

/*
 * 宽屏底部按钮是块级文字按钮：字号与行高比主色填充按钮大，
 * 内边距用纵向取值撑出高度，因此不沿用原子层的行高与最小高度。
 * 外框宽度按文字宽度固定，容器拉伸不会改变按钮尺寸。
 */
.hebang-about .hebang-about-action .hebang-btn {
  display: inline-block;
  width: 217.66px;
  min-height: 0;
  padding: 15px 38px;
  border: 0;
  border-radius: 2px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}

/*
 * 按钮分两层：外框承载定位、裁剪与列宽，
 * 链接承载内边距与文字。这里只有一层，取外框的定位与裁剪行为。
 */
.hebang-about .hebang-about-action .hebang-btn {
  position: relative;
  overflow: hidden;
  justify-content: normal;
  align-items: normal;
  gap: normal;
  text-align: start;
}

/* 窄档手风琴按钮的横向内边距收窄，纵向保持基础值 */
@media (max-width: 1024px) {
  /* 窄档标签按钮与手风琴按钮同规格：上下 15/20、左 20，负下外边距与面板相接 */
  .hebang-tabs-link,
  .hebang-accordion-button {
    margin: 0 0 -25px 0;
    padding: 15px 0 20px 20px;
    font-size: 16px;
  }

  .hebang-accordion-item {
    margin-bottom: 15px;
  }

  .hebang-accordion-item:last-child {
    margin-bottom: 0;
  }

  /* 手风琴面板的上内边距与标签面板同值；窄档再补左缩进 */
  .hebang-tabs-area {
    padding: 30px 0 0 20px;
  }
}

/* 标签页只在桌面档显示，1024 及以下交给手风琴；标题同时降到 1366 档的字号 */
@media (max-width: 1366px) {
  .hebang-about .hebang-heading-title {
    font-size: 40px;
    line-height: 46px;
  }
}

/* 宽档特性文字与手风琴按钮回到基准字号 */
@media (min-width: 1367px) {
  .hebang-tabs .hebang-feature-text {
    font-size: 17px;
  }

  .hebang-accordion-button {
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  .hebang-about-inner {
    flex-direction: column;
    padding-block: 80px 76px;
  }

  .hebang-about-media {
    flex: 0 0 auto;
    width: 100%;
  }

  .hebang-about-body {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 30px;
    padding-left: 0;
  }

  .hebang-tabs {
    display: none;
  }

  .hebang-tabs-accordion {
    display: block;
    border-radius: 3px;
  }

}

@media (width < 768px) {
  .hebang-features {
    display: block;
  }

  /* 按钮随正文列在窄屏占满可用宽度。 */
  .hebang-about-bottom {
    width: auto;
  }

  .hebang-about .hebang-heading-title {
    font-size: 30px;
    line-height: 40px;
  }
}

/* --- 服务带 --- */

/*
 * 段根是纵向弹性容器：正文行与标签页行之间由段根的行间距加上标签页行的上外边距构成。
 * 排版值写在段根上，标签按钮与序号靠继承拿到 1.7 的行高比例。
 * 桌面端底部留白扣除联系条的半高覆盖后，仍需保留内容与联系条之间的间距。
 */
.hebang-services {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 72px 0 180px;
  background-color: var(--hebang-color-primary-dark);
  color: var(--hebang-color-white);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

/*
 * 分割覆盖在区块顶部，不占正文空间；表面色承接上方区块以兼容明暗主题。
 */
.hebang-services-divider,
.hebang-portfolio-divider {
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  direction: ltr;
  line-height: 0;
  pointer-events: none;
}

.hebang-services-divider svg,
.hebang-portfolio-divider svg {
  display: block;
  width: 100%;
  height: 26px;
}

.hebang-portfolio-divider svg {
  height: 120px;
}

.hebang-services-divider-fill,
.hebang-portfolio-divider-fill {
  fill: var(--hebang-color-surface);
}

/* 资质区在服务区上方时，分割曲线沿用资质区底色。 */
.hebang-certificates + .hebang-services .hebang-services-divider-fill {
  fill: var(--hebang-color-primary-tint);
}

.hebang-services-divider-edge,
.hebang-portfolio-divider-edge,
.hebang-portfolio-divider-rim {
  fill: none;
  stroke: var(--hebang-color-primary);
  stroke-width: 1.5px;
  stroke-linecap: round;
}

.hebang-portfolio-divider-rim {
  opacity: 0.45;
}

/* 窄屏压低装饰起伏，描边通过 SVG 的 non-scaling-stroke 保持清晰。 */
@media (width < 768px) {
  .hebang-services-divider svg {
    height: 16px;
  }

  .hebang-portfolio-divider svg {
    width: 180%;
    max-width: none;
    height: 76px;
    margin-left: -40%;
  }
}

/* 产品线稿置于正文下方的留白，保持静态，避免造成可拖动或可点击的误解。 */
.hebang-services-deco {
  position: absolute;
  left: 24px;
  bottom: 26px;
  width: 210px;
  text-align: left;
  pointer-events: none;
}

/* 图片外层只承担定位与层级，不参与尺寸计算。 */
.hebang-services-deco-media {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 顶端对齐让行盒高度等于图片高度，不把行高带来的下沿空隙算进容器 */
.hebang-services-deco-img {
  position: relative;
  z-index: 1;
  display: inline;
  vertical-align: top;
  width: 100%;
  height: auto;
  mix-blend-mode: unset;
}

/*
 * 正文行分两层：外层留 10px 侧边，内层自己封顶 1380 并居中。
 * 合成一层就得在「按百分比留边」和「固定上限」之间二选一。
 */
.hebang-services-content {
  padding-inline: 10px;
}

.hebang-services-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding: 10px 0;
}

/*
 * 两列宽度之和超过正文行时按比例收缩而不换行，因此写百分比宽度、
 * 保留默认收缩因子，不改成等分。
 */
.hebang-services-heading-col,
.hebang-services-lead-col {
  position: relative;
  z-index: 4;
  display: flex;
  flex: 0 1 auto;
  gap: 20px;
  width: 100%;
  padding: 10px;
}

.hebang-services-heading-col {
  flex-direction: column;
}

.hebang-services-lead-col {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hebang-services .hebang-heading {
  text-align: left;
}

.hebang-services .hebang-heading-sub {
  display: inline-block;
  color: var(--hebang-color-primary-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hebang-services .hebang-heading-title {
  margin: 10px 0 0;
  color: var(--hebang-color-white);
  font-family: var(--hebang-font-heading);
  font-size: 52px;
  font-weight: 700;
  line-height: 58px;
  letter-spacing: -2px;
}

/* 引导句外层承担与下方按钮的实际净间距，内层段落保留自己的下外边距。 */
.hebang-services-lead-body {
	width: 100%;
	max-width: 760px;
	margin-bottom: -25px;
}

.hebang-services-lead {
	width: 100%;
	margin: 0 0 26px;
	color: var(--hebang-color-white);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}

/* 步骤行默认保留左右留白，桌面卡片带在宽档覆盖为视口全宽。 */
.hebang-services-row {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  padding-inline: 20px;
}

.hebang-services-row-inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
  width: 100%;
  max-width: 1362px;
  margin-inline: auto;
}

.hebang-services-steps-wrap {
  width: 100%;
  min-width: 0;
}

.hebang-services .hebang-service-cards {
  display: flex;
  width: 100%;
  height: clamp(420px, 58vh, 600px);
  overflow: hidden;
}

.hebang-services .hebang-service-card {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  color: var(--hebang-color-white);
  transition: flex-grow 0.3s ease;
}

.hebang-services .hebang-service-card:hover,
.hebang-services .hebang-service-card:focus-within {
  flex-grow: 3.6667;
  color: var(--hebang-color-white);
}

.hebang-services .hebang-service-card:focus-visible {
  outline: 3px solid var(--hebang-color-primary-soft);
  outline-offset: -3px;
}

.hebang-services .hebang-service-card-media,
.hebang-services .hebang-service-card-shade {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
}

.hebang-services .hebang-service-card-media {
  left: 50%;
  width: 55vw;
  transform: translateX(-50%);
}

.hebang-services .hebang-service-card-shade {
  width: 100%;
}

.hebang-services .hebang-service-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hebang-services .hebang-service-card-shade {
  background: linear-gradient(180deg, rgba(12, 31, 10, 0.42), rgba(12, 31, 10, 0.82));
}

.hebang-services .hebang-service-card-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: clamp(14px, 1.5vw, 24px);
}

.hebang-services .hebang-service-card-number {
  position: absolute;
  top: clamp(14px, 1.5vw, 24px);
  left: clamp(14px, 1.5vw, 24px);
  color: var(--hebang-color-white);
  font-size: 28px;
  font-weight: 700;
}

.hebang-services .hebang-service-card-title {
  display: block;
  color: var(--hebang-color-white);
  font-family: var(--hebang-font-heading);
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.hebang-services .hebang-service-card-body {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.hebang-services .hebang-service-card:hover .hebang-service-card-body,
.hebang-services .hebang-service-card:focus-within .hebang-service-card-body {
  max-height: 280px;
  opacity: 1;
}

.hebang-services .hebang-service-card-description {
  display: block;
  margin-top: 16px;
  color: var(--hebang-color-white);
  font-size: 16px;
  line-height: 1.55;
}

.hebang-services .hebang-service-card-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 16px;
  background: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
  font-size: 16px;
  line-height: 1.4;
}

.hebang-services .hebang-service-card-action svg path {
  fill: currentColor;
}

/* 手风琴默认叠图呈现，手机断点单独切换为纵向阅读。 */
.hebang-services .hebang-tabs-pane {
  position: relative;
  display: block;
}

.hebang-services .hebang-accordion-panel .hebang-tabs-media img {
  display: inline;
  vertical-align: top;
}

.hebang-services .hebang-tabs-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  height: 100%;
  border-radius: 10px;
}

.hebang-services .hebang-tabs-media img {
  object-fit: cover;
}

.hebang-services .hebang-tabs-media picture {
  display: block;
  width: 100%;
  height: clamp(280px, 48vh, 520px);
}

.hebang-services .hebang-accordion-panel .hebang-tabs-media img {
  display: inline;
}

.hebang-services .hebang-tabs-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  padding: 24px;
  pointer-events: none;
}

.hebang-services .hebang-tabs-lead,
.hebang-services .hebang-tabs-lead p {
  margin: 0;
  padding: 0;
  color: var(--hebang-color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
}

.hebang-services .hebang-tabs-lead {
  max-width: min(680px, 72%);
  padding: 12px 16px;
  border-radius: 3px;
  background: rgba(18, 40, 10, 0.82);
}

.hebang-services .hebang-tabs-lead p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  color: var(--hebang-color-white);
  line-height: 1.55;
}

.hebang-services .hebang-tabs-action {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 3;
  pointer-events: auto;
}

/* 面板内的文字链接：实心主色块加一枚悬停接替的箭头。 */
.hebang-services .hebang-tabs-action a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  background-color: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
}

/*
 * 段头的按钮外层是弹性子项，内层才是行内块链接：
 * 合成一层会让弹性子项把行内块块级化成块，按钮宽度随之被拉满。
 */
.hebang-services-action {
  /* 外层不自建行盒：行高会把行内块按钮下方的空隙算进高度 */
  flex: 0 0 auto;
  line-height: 0;
}

/*
 * 段头的按钮是行内块加一层行内弹性内容盒：内容盒承载文字与箭头的排布，
 * 按钮本体承载内边距、裁剪与悬停填充，不沿用原子层的弹性布局与最小高度。
 */
.hebang-services-action .hebang-btn {
  position: relative;
  display: inline-block;
  gap: normal;
  align-items: normal;
  justify-content: normal;
  overflow: hidden;
  min-height: 0;
  padding: 15px 32px;
  border: 0;
  border-radius: 2px;
  background-color: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-align: start;
}

.hebang-services-action .hebang-btn span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hebang-services-action .hebang-btn .hebang-btn-arrow {
  position: relative;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 20px;
}

.hebang-services-action .hebang-btn svg path {
  fill: var(--hebang-color-primary-ink);
}

/* --- 服务带：手风琴（1024 及以下） --- */

.hebang-services .hebang-tabs-accordion {
  display: none;
  border-radius: 0;
}

.hebang-services .hebang-services-step-number,
.hebang-services .hebang-services-step-chevron {
  display: none;
}

.hebang-services .hebang-accordion-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 18px;
  border: 0;
  border-radius: 3.25px 3.25px 0 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.28);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}

.hebang-services .hebang-accordion-button[aria-expanded="true"] {
  color: var(--hebang-color-primary-soft);
}

.hebang-services .hebang-accordion-item {
  background-color: transparent;
  border-radius: 4.25px 4.25px 0 0;
}

.hebang-services .hebang-accordion-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.hebang-services .hebang-accordion-panel {
  padding: 0;
}

/* --- 服务带：断点 --- */

@media (min-width: 768px) {
	.hebang-services-heading-col,
	.hebang-services-lead-col {
		width: 45%;
	}

	.hebang-services-lead-col {
		width: 55%;
	}
}

@media (min-width: 768px) and (max-width: 1366px) {
  .hebang-services-heading-col {
    width: 45%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hebang-services-heading-col,
  .hebang-services-lead-col {
    width: 100%;
  }
}

@media (max-width: 1366px) {
  .hebang-services {
    padding: 64px 0 180px;
  }

  .hebang-services .hebang-heading-title {
    font-size: 40px;
    line-height: 50px;
  }

  .hebang-services-lead-body {
    width: 100%;
  }

  .hebang-services .hebang-accordion-button {
    font-size: 16px;
    text-align: left;
  }

}

@media (max-width: 1024px) {
  .hebang-services {
    padding: 48px 0 90px;
  }

  .hebang-services-deco {
    left: 20px;
    bottom: 10px;
    width: 120px;
  }

  .hebang-services-inner {
    flex-direction: column;
  }

  .hebang-services-row {
    flex-wrap: wrap;
  }

  .hebang-services .hebang-service-cards {
    display: none;
  }

  .hebang-services .hebang-tabs-accordion {
    display: block;
  }

  .hebang-services .hebang-accordion-button {
    font-size: 20px;
    margin: 0 0 18px;
    padding: 10px 0 0;
  }

  .hebang-services .hebang-accordion-item {
    margin-bottom: 15px;
  }

  .hebang-services .hebang-accordion-item:last-child {
    margin-bottom: 0;
  }

  .hebang-services .hebang-tabs-body { padding: 14px; }
  .hebang-services .hebang-tabs-lead { max-width: 100%; padding: 10px 12px; }
  .hebang-services .hebang-tabs-lead p { font-size: 14px; }
  .hebang-services .hebang-tabs-action { right: 14px; bottom: 14px; margin: 0; }

}

@media (min-width: 1025px) {
  .hebang-services-inner {
    flex-direction: column;
    align-items: center;
  }

  .hebang-services-heading-col,
  .hebang-services-lead-col {
    flex: none;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
  }

  .hebang-services-heading-col {
    align-items: flex-start;
  }

  .hebang-services .hebang-heading,
  .hebang-services-lead-body {
    width: 100%;
    text-align: left;
  }

  .hebang-services .hebang-heading-title {
    white-space: nowrap;
  }

  html:is(:lang(zh), :lang(ko)) .hebang-services .hebang-heading-title {
    min-block-size: 0;
    text-wrap: nowrap;
  }

  .hebang-services-lead-body {
    max-width: 900px;
    margin-bottom: 0;
  }

  .hebang-services-lead {
    margin-bottom: 0;
    text-align: left;
  }

  .hebang-services-row {
    margin-top: 24px;
    padding-inline: 0;
  }

  .hebang-services-row-inner {
    max-width: none;
  }

}

@media (hover: none) {
  .hebang-services .hebang-service-cards {
    display: none;
  }

  .hebang-services .hebang-tabs-accordion {
    display: block;
  }
}

@media (width < 768px) {
  .hebang-services {
    gap: 0;
    padding: var(--hebang-mobile-section-space) 0;
  }

  .hebang-services .hebang-services-content,
  .hebang-services .hebang-services-row {
    padding-inline: var(--hebang-gutter);
  }

  .hebang-services .hebang-services-inner {
    gap: var(--hebang-mobile-content-gap);
    padding: 0;
  }

  .hebang-services .hebang-services-heading-col,
  .hebang-services .hebang-services-lead-col {
    padding: 0;
  }

  .hebang-services .hebang-services-lead-body,
  .hebang-services .hebang-services-lead {
    margin: 0;
  }

  .hebang-services .hebang-services-lead {
    line-height: 1.6;
  }

  .hebang-services .hebang-services-row {
    margin-top: 24px;
  }

  /* 窄屏隐藏边角装饰，优先保留正文与产品内容的阅读空间。 */
  .hebang-services-deco {
    display: none;
  }

  .hebang-services .hebang-heading-title {
    font-size: var(--hebang-mobile-section-title);
    line-height: 1.3;
    letter-spacing: 0;
  }

  .hebang-services .hebang-accordion-item {
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
  }

  .hebang-services .hebang-accordion-button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    margin: 0;
    padding: 16px;
    border-radius: 7px;
    color: var(--hebang-color-white);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
  }

  .hebang-services .hebang-accordion-button[aria-expanded="true"] {
    color: var(--hebang-color-primary-soft);
  }

  .hebang-services .hebang-accordion-button:active {
    background: rgba(17, 24, 39, 0.18);
  }

  .hebang-services .hebang-accordion-button:focus-visible,
  .hebang-services .hebang-tabs-action a:focus-visible {
    outline: 2px solid var(--hebang-color-primary-soft);
    outline-offset: -4px;
  }

  .hebang-services .hebang-services-step-number {
    display: block;
    color: var(--hebang-color-primary-soft);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }

  .hebang-services .hebang-services-step-label {
    overflow-wrap: anywhere;
  }

  .hebang-services .hebang-services-step-chevron {
    display: block;
  }

  .hebang-services .hebang-accordion-button[aria-expanded="true"] .hebang-services-step-chevron {
    transform: rotate(180deg);
  }

  /* 手机按正文、图片、操作顺序阅读，不让说明或按钮遮住图片。 */
  .hebang-services .hebang-tabs-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px 16px;
  }

  .hebang-services .hebang-tabs-body {
    position: static;
    padding: 0;
    pointer-events: auto;
  }

  .hebang-services .hebang-tabs-lead {
    max-width: none;
    padding: 0;
    background: transparent;
  }

  .hebang-services .hebang-tabs-lead p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: 16px;
    line-height: 1.6;
  }

  .hebang-services .hebang-tabs-media picture {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .hebang-services .hebang-accordion-panel .hebang-tabs-media img {
    display: block;
    border-radius: 4px;
  }

  .hebang-services .hebang-tabs-action {
    position: static;
    width: 100%;
    margin: 0;
  }

  .hebang-services .hebang-tabs-action a {
    width: 100%;
    min-height: var(--hebang-mobile-control-h);
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
  }
}

/* --- 联系条 --- */

/* 桌面端用半高上覆盖衔接服务段，窄屏回到普通文档流。 */
.hebang-bar {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 38px 20px;
  margin: var(--hebang-bar-overlap, -70px) 0 0 260px;
  border-radius: 30px 0 0 30px;
  background-color: var(--hebang-color-primary);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--hebang-color-primary-ink);
}

/* 电话入口下方覆盖主色，避免背景图降低文字对比度。 */
.hebang-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hebang-color-primary);
  opacity: 0.85;
}

.hebang-bar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1120px;
}

.hebang-bar-text {
  flex: 1 1 620px;
  min-width: 0;
  max-width: 620px;
}

.hebang-bar-title {
  margin: 0;
  color: var(--hebang-color-primary-ink);
  font-family: var(--hebang-font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.hebang-bar-lead {
  margin: 8px 0 0;
  color: var(--hebang-color-primary-ink);
  font-size: 15px;
  line-height: 1.5;
}

.hebang-phonebox {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hebang-phonebox-call {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--hebang-color-primary-ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.hebang-phonebox-call:hover,
.hebang-phonebox-call:focus-visible {
  color: var(--hebang-color-primary-ink);
  text-decoration: underline;
}

.hebang-phonebox-call:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.hebang-phonebox-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--hebang-color-white);
}

.hebang-phonebox-icon svg {
  width: 28px;
  height: 28px;
  fill: var(--hebang-color-primary);
}

.hebang-phonebox-hours {
  color: var(--hebang-color-primary-ink);
  font-size: 14px;
  line-height: 1.4;
}

.hebang-phonebox-call + .hebang-phonebox-hours {
  margin-left: 74px;
}

@media (max-width: 1366px) {
  .hebang-bar {
    margin: var(--hebang-bar-overlap, -70px) 0 0;
    border-radius: 0;
    background-position: center left;
  }

  .hebang-bar-inner {
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  .hebang-bar {
    margin: 0;
    padding: 24px 16px;
    background-position: top left;
  }

  .hebang-bar::before {
    opacity: 1;
  }

  .hebang-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hebang-bar-text {
    flex: none;
  }
}

@media (width < 768px) {
  .hebang-bar {
    padding: 22px 12px;
  }

  .hebang-bar-title {
    font-size: 24px;
  }

  .hebang-bar-lead {
    font-size: 14px;
  }

  .hebang-phonebox-call {
    gap: 12px;
    font-size: 22px;
  }

  .hebang-phonebox-icon {
    width: 48px;
    height: 48px;
  }

  .hebang-phonebox-call + .hebang-phonebox-hours {
    margin-left: 60px;
  }
}

/* --- 为什么选择 --- */

/*
 * 段根只承担两侧槽位与底色；块向内边距与 1362 上限都落在内层，宽档由 auto 外边距居中。
 */
.hebang-why {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 10px;
  background-color: var(--hebang-color-surface);
  font-size: var(--hebang-fs-17);
  font-weight: var(--hebang-weight-regular);
  line-height: 1.7;
}

/*
 * 行容器允许换行并按 space-between 排布：标题列占满整行，两列卡片夹着图列排在第二行。
 * 卡片盒上的图标底盘要向左上越出 40px，行容器的左右内边距与列的 10px 内边距共同容纳它。
 */
.hebang-why-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1362px;
  margin: 0 auto;
  padding: 104px 0 110px;
}

/* 标题列独占第一行，标题块在列内水平居中。 */
.hebang-why-head {
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  padding: 10px;
}

/*
 * 标题块与下方卡片共用左侧起点，长标题在最大宽度内换行。
 * 30px 下外边距是标题块与第二行之间的净间距。
 */
.hebang-why-heading-col {
  position: relative;
  width: 100%;
  max-width: 900px;
  gap: 20px;
}

.hebang-why .hebang-heading {
  margin: 0 0 30px;
  text-align: left;
}

.hebang-why .hebang-heading-sub {
  display: inline-block;
  color: var(--hebang-color-primary-text);
  font-size: var(--hebang-fs-16);
  font-weight: var(--hebang-weight-medium);
  line-height: 25px;
  text-transform: uppercase;
}

.hebang-why .hebang-heading-title {
  margin: 15px 0 0;
  color: var(--hebang-color-ink);
  font-family: var(--hebang-font-heading);
  font-size: 52px;
  font-weight: var(--hebang-weight-bold);
  line-height: 58px;
  letter-spacing: -2px;
  text-wrap: balance;
}

/*
 * 两列卡片同规格：纵向排列、列内两卡相隔 80px，列顶 25px 是它与标题行的净间距。
 * 默认占满整行，768 起按列分排，1024 起每列半宽。
 */
.hebang-why-cards-a,
.hebang-why-cards-b {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  margin-top: 25px;
  padding: 10px;
}

/* 卡片盒负责底色、圆角与定位：图标底盘要越出它的上边与左边。 */
.hebang-why-card-inner {
  position: relative;
  padding-top: 40px;
  border-radius: 6px;
  background-color: var(--hebang-color-surface-alt);
  background-image: var(--hebang-why-texture, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-color var(--hebang-dur-slower) var(--hebang-ease);
}

.hebang-why-card-media {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 80px;
  border-radius: 6px;
  background-color: var(--hebang-color-primary);
  box-shadow: 0 8px 32px -8px var(--hebang-color-primary);
  transition: background-color var(--hebang-dur-slower) var(--hebang-ease);
}

/*
 * 行高归零让行盒等于图标高度；图标自身是行内元素，行高由它自己声明。
 */
.hebang-why-card-icon {
  line-height: 0;
}

.hebang-why-card-icon .hebang-icon {
  color: var(--hebang-color-primary-ink);
  font-size: 45px;
  line-height: 1;
}

.hebang-why-card-icon .hebang-icon {
  transition: color var(--hebang-dur-slower) var(--hebang-ease);
}

.hebang-why-card-content {
  position: relative;
  padding: 40px;
}

/* 标题右侧留白让长标题在卡片内提前换行 */
.hebang-why-card-title-wrap {
  margin: 0 0 15px;
  padding: 0 30px 0 0;
}

.hebang-why-card-title {
  margin: 0 0 15px;
  color: var(--hebang-color-ink);
  font-family: var(--hebang-font-heading);
  font-size: var(--hebang-fs-24);
  font-weight: var(--hebang-weight-bold);
  line-height: 36px;
  transition: color var(--hebang-dur-slower) var(--hebang-ease);
}

.hebang-why-card-fact {
  display: block;
  margin-bottom: 6px;
  color: var(--hebang-color-ink);
  font-weight: var(--hebang-weight-bold);
}

.hebang-why-card-desc {
  margin: 0;
  color: var(--hebang-color-text);
  font-size: var(--hebang-fs-17);
  line-height: 1.7;
  transition: color var(--hebang-dur-slower) var(--hebang-ease);
}

/* 图列默认占满整行，768 起占 33%，1024 起回到整行并挪到卡片列之后。 */
.hebang-why-figure-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 70px;
  width: 100%;
  margin-top: 25px;
}

.hebang-why-figure {
  margin: 0;
  text-align: center;
}

/* 底对齐：行内块下方不再留基线以下的空隙，行盒高度等于图片高度。 */
.hebang-why-figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: var(--hebang-radius-md);
}

/* 悬停时卡片整体换主色，图标底盘与卡片互换明暗，文字转深墨。 */
.hebang-why-card-inner:hover {
  background-color: var(--hebang-color-primary);
  background-image: var(--hebang-why-texture-hover, none);
}

.hebang-why-card-inner:hover .hebang-why-card-media {
  background-color: var(--hebang-color-white);
}

.hebang-why-card-inner:hover .hebang-why-card-icon .hebang-icon {
  color: var(--hebang-color-primary);
}

.hebang-why-card-inner:hover .hebang-why-card-title,
.hebang-why-card-inner:hover .hebang-why-card-desc {
  color: var(--hebang-color-primary-ink);
}

/* 悬停时图标翻半圈再翻回：动画只挂在 svg 上，底盘保持不动。 */
.hebang-why-card-inner:hover .hebang-why-card-icon .hebang-icon {
  animation: hebang-why-icon-fold var(--hebang-dur-slower) var(--hebang-ease);
}

@keyframes hebang-why-icon-fold {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(90deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@media (min-width: 768px) {
  .hebang-why-cards-a,
  .hebang-why-cards-b {
    width: 32%;
  }

  .hebang-why-figure-col {
    width: 33%;
  }
}

@media (max-width: 1366px) {
  .hebang-why-card-content {
    padding: 20px;
  }

  .hebang-why-heading-col {
    width: 100%;
    max-width: 900px;
  }

  .hebang-why .hebang-heading-title {
    font-size: 40px;
    line-height: 50px;
  }

  .hebang-why-card-title {
    font-size: var(--hebang-fs-20);
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .hebang-why-cards-a,
  .hebang-why-cards-b {
    width: 50%;
  }

  .hebang-why-figure-col {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .hebang-why-inner {
    padding: 60px 0 80px;
  }

  .hebang-why-heading-col {
    width: 100%;
    max-width: 900px;
  }

  /* 图列挪到两个卡片列之后，并让出与其他列同样的 10px 槽位 */
  .hebang-why-figure-col {
    order: 99999;
    padding: 0 10px;
  }
}

@media (width < 768px) {
  /* 移动档允许子项换行，避免窄屏里内容溢出容器 */
  .hebang-why-head,
  .hebang-why-cards-a,
  .hebang-why-cards-b,
  .hebang-why-figure-col {
    flex-wrap: wrap;
  }

  .hebang-why-heading-col {
    width: 100%;
    max-width: 100%;
  }

  .hebang-why .hebang-heading-title {
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 0;
  }

  .hebang-why-card-title {
    line-height: 30px;
  }
}

/* --- 项目 --- */

/*
 * 段根承载揭盖装饰与底色；锅盖跨越上方留白，正文避开顶部锅沿。
 * 叠加层是整段大小的伪元素，内容行必须自己抬到它之上，否则会被背景图盖住。
 */
.hebang-portfolio {
  position: relative;
  display: block;
  padding: 146px 0 120px;
  background-color: var(--hebang-color-secondary);
  color: var(--hebang-color-white);
  font-size: var(--hebang-fs-17);
  font-weight: var(--hebang-weight-regular);
  line-height: 1.7;
}

.hebang-portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hebang-portfolio-bg, none);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  opacity: 0.3;
}

.hebang-portfolio-lid {
  position: absolute;
  z-index: 2;
  top: -58px;
  left: 50%;
  width: clamp(260px, 29vw, 420px);
  transform: translateX(-50%);
  pointer-events: none;
}

.hebang-portfolio-lid img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-16px) rotate(-7deg);
}

/* 基础状态即为打开后的完整画面；无脚本和减少动效时仍保留标题与锅盖。 */
@media (prefers-reduced-motion: no-preference) {
  .hebang-portfolio.is_revealed .hebang-portfolio-lid img {
    animation: hebang-lid-open 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .hebang-portfolio.is_revealed .hebang-portfolio-heading-col {
    animation: hebang-collection-reveal 0.8s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes hebang-lid-open {
  from { transform: translateY(12px) rotate(-2deg); }
  to { transform: translateY(-16px) rotate(-7deg); }
}

@keyframes hebang-collection-reveal {
  from { opacity: 0.35; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* 两行内容都要压到叠加层之上；抬高只用定位，不加层级序号，避免自建新的堆叠上下文 */
.hebang-portfolio-head,
.hebang-portfolio-row {
  position: relative;
}

/* 头部行左右各留 20px，宽档由内层自己的 1362 上限接管，两层不能合并 */
.hebang-portfolio-head {
  display: flex;
  flex-direction: column;
  padding-inline: 20px;
}

/*
 * 标题与可选按钮按版心左侧起点排布，标题宽度不依赖按钮是否启用。
 * 内层上限 1362 是本段自己的版心，比主题版心宽。
 */
.hebang-portfolio-head-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--hebang-space-6);
  width: 100%;
  max-width: min(100%, 1362px);
  margin-inline: auto;
  padding-block: 10px;
}

.hebang-portfolio-heading-col {
  position: relative;
  gap: var(--hebang-space-6);
  width: 100%;
  max-width: 100%;
}

.hebang-portfolio .hebang-heading {
  text-align: left;
}

/* 深色底上的绿色小标签不能用白底那一档，这里取亮阶 */
.hebang-portfolio .hebang-heading-sub {
  display: inline-block;
  color: var(--hebang-color-primary-soft);
  font-size: var(--hebang-fs-16);
  font-weight: var(--hebang-weight-medium);
  line-height: 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hebang-portfolio .hebang-heading-title {
  max-width: 1000px;
  margin: 20px auto 0;
  color: var(--hebang-color-white);
  font-family: var(--hebang-font-heading);
  font-size: clamp(40px, 4.8vw, 72px);
  font-weight: var(--hebang-weight-bold);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hebang-portfolio-title-intro {
  display: inline;
  margin-right: 0.25em;
  font-size: 0.52em;
  font-weight: var(--hebang-weight-regular);
  letter-spacing: -0.02em;
}

.hebang-portfolio-title-main {
  display: inline;
}

.hebang-portfolio .hebang-heading-title.hebang-portfolio-title-single-line {
  white-space: nowrap;
  text-wrap: nowrap;
  overflow-wrap: normal;
}

.hebang-portfolio-action {
  position: relative;
  align-self: center;
  gap: var(--hebang-space-6);
}

/* 按钮外层不自建行盒：行高会把行内块按钮下方的空隙算进容器高度 */
.hebang-portfolio-action-btn {
  line-height: 0;
}

/* 与 .hebang-services-action .hebang-btn 同构：不沿用原子层的弹性布局与最小高度 */
.hebang-portfolio-action .hebang-btn {
  position: relative;
  display: inline-block;
  gap: normal;
  align-items: normal;
  justify-content: normal;
  overflow: hidden;
  min-height: 0;
  padding: 15px 32px;
  border: 0;
  border-radius: var(--hebang-radius-xs);
  background-color: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
  font-size: var(--hebang-fs-18);
  font-weight: var(--hebang-weight-bold);
  line-height: 28px;
  text-align: start;
}

.hebang-portfolio-action .hebang-btn span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hebang-portfolio-action .hebang-btn .hebang-btn-arrow {
  position: relative;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 20px;
}

.hebang-portfolio-action .hebang-btn svg path {
  fill: var(--hebang-color-primary-ink);
}

/* 块容器收纳换行卡片的完整高度，避免 Firefox 在懒加载图片到达后才撑开纵向 flex 祖先。 */
.hebang-portfolio-row {
  display: block;
  padding-inline: 20px;
  margin-top: calc(var(--hebang-space-6) + 12px);
}

.hebang-portfolio-row-inner {
  display: block;
  width: 100%;
  max-width: 1705px;
  margin-inline: auto;
}

/*
 * 行列两层是栅格做法：行用负外边距把列槽推到网格之外，列再用等量内边距把卡片收回原位。
 * 卡片左缘因此与网格内容左缘对齐。
 */
.hebang-portfolio-grid-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12.75px;
}

.hebang-portfolio-col {
  flex: 0 0 auto;
  width: 33.333333%;
  max-width: 100%;
  padding-inline: 12.75px;
}

.hebang-portfolio-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--hebang-space-7);
  border-radius: var(--hebang-radius-md);
}

.hebang-portfolio-thumb {
  display: block;
  width: 100%;
  height: 100%;
}

.hebang-portfolio-thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hebang-portfolio-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

.hebang-portfolio-item:hover .hebang-portfolio-thumb img,
.hebang-portfolio-item:focus-within .hebang-portfolio-thumb img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .hebang-portfolio-thumb img {
    transition: none;
  }

  .hebang-portfolio-item:hover .hebang-portfolio-thumb img,
  .hebang-portfolio-item:focus-within .hebang-portfolio-thumb img {
    transform: none;
  }
}

/* 宽屏卡片文案常驻图片下缘，手机端由独立标题区承担品类识别。 */
.hebang-portfolio-details {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 58px 20px 18px;
  background: linear-gradient(180deg, rgba(17, 25, 24, 0.3) 0%, rgba(17, 25, 24, 0.93) 62%);
  transition: background-color var(--hebang-dur) var(--hebang-ease);
}

.hebang-portfolio-item:hover .hebang-portfolio-details,
.hebang-portfolio-item:focus-within .hebang-portfolio-details {
  background-color: rgba(17, 25, 24, 0.12);
}

.hebang-portfolio-title {
  margin: 0 0 4px;
  color: var(--hebang-color-white);
  font-family: var(--hebang-font-heading);
  font-size: var(--hebang-fs-20);
  font-weight: var(--hebang-weight-bold);
  line-height: 1.34;
}

.hebang-portfolio-title a {
  color: var(--hebang-color-white);
  transition: all var(--hebang-dur) var(--hebang-ease);
}

.hebang-portfolio-title-cat {
  min-width: 0;
}

.hebang-portfolio-title a:hover,
.hebang-portfolio-title a:focus {
  color: var(--hebang-color-primary-soft);
}

.hebang-portfolio-cate {
  margin: 0 0 var(--hebang-space-6);
  padding-bottom: var(--hebang-space-6);
  /* 四边同色、只在底边留宽度：分隔线是纯装饰，取的是边框色这一条登记值 */
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--hebang-color-white-veil);
  color: var(--hebang-color-white);
  font-size: var(--hebang-fs-16);
  line-height: 1.7;
}

.hebang-portfolio-cate a {
  color: var(--hebang-color-white);
  transition: all var(--hebang-dur) var(--hebang-ease);
}

.hebang-portfolio-cate a:hover,
.hebang-portfolio-cate a:focus {
  color: var(--hebang-color-primary-soft);
}

.hebang-portfolio-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--hebang-space-3);
  color: var(--hebang-color-white);
  font-size: var(--hebang-fs-16);
  line-height: 28px;
  transition: all var(--hebang-dur) var(--hebang-ease) 0s;
}

.hebang-portfolio-link:hover,
.hebang-portfolio-link:focus {
  color: var(--hebang-color-primary-soft);
}

/* 两枚同形加号在悬停时左右接替：一枚滑出、一枚滑入，底盘是它们的裁剪框 */
.hebang-portfolio-link em {
  position: relative;
  display: block;
  overflow: hidden;
  width: 30px;
  height: 30px;
  background-color: var(--hebang-color-primary);
  border-radius: var(--hebang-radius-xs);
  transition: inherit;
}

.hebang-portfolio-link em > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  fill: var(--hebang-color-white);
  transform: translate(-50%, -50%);
  transition: inherit;
}

.hebang-portfolio-link em > svg:first-child {
  left: -100%;
}

.hebang-portfolio-link:hover em,
.hebang-portfolio-link:focus em {
  background-color: var(--hebang-color-primary-hover);
}

.hebang-portfolio-link:hover em > svg:first-child,
.hebang-portfolio-link:focus em > svg:first-child {
  left: 50%;
}

.hebang-portfolio-link:hover em > svg:last-child,
.hebang-portfolio-link:focus em > svg:last-child {
  left: 150%;
}

@media (max-width: 1366px) {
  .hebang-portfolio {
    padding-inline: 10px;
  }

  .hebang-portfolio-head,
  .hebang-portfolio-row {
    padding-inline: 10px;
  }

  .hebang-portfolio-heading-col {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  .hebang-portfolio {
    padding-top: 130px;
    padding-bottom: 53px;
  }

  .hebang-portfolio-lid {
    top: -28px;
  }

  .hebang-portfolio-head-inner {
    justify-content: flex-start;
    max-width: min(100%, 1024px);
  }

  .hebang-portfolio-heading-col {
    width: 100%;
    max-width: 100%;
  }

  .hebang-portfolio .hebang-heading {
    text-align: left;
  }
}

@media (max-width: 991px) {
  .hebang-portfolio-col {
    width: 50%;
  }
}

@media (width < 768px) {
  .hebang-portfolio {
    padding-top: 94px;
  }

  /* 窄屏锅盖缩入交界留白，浅弧横向裁切以保留锅沿曲率。 */
  .hebang-portfolio-lid {
    top: -44px;
    width: 220px;
  }

  .hebang-portfolio-head-inner {
    max-width: min(100%, 767px);
  }

  .hebang-portfolio-row-inner {
    max-width: min(100%, 767px);
  }

  .hebang-portfolio-grid-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-inline: 0;
  }

  .hebang-portfolio-col {
    min-width: 0;
    width: auto;
    padding-inline: 0;
  }

  /* 图片与标题分区，手机取景裁去空台面，文案不遮住锅具。 */
  .hebang-portfolio-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    background: var(--hebang-color-surface);
  }

  .hebang-portfolio-thumb {
    flex-shrink: 0;
    overflow: hidden;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .hebang-portfolio-thumb img {
    object-position: 50% var(--hebang-portfolio-image-y, 50%);
  }

  .hebang-portfolio-details {
    position: static;
    flex: 1;
    padding: 10px 12px;
    background: none;
    transition: none;
  }

  .hebang-portfolio-item:hover .hebang-portfolio-details,
  .hebang-portfolio-item:focus-within .hebang-portfolio-details {
    background: none;
  }

  .hebang-portfolio-title {
    margin: 0;
    color: var(--hebang-color-ink);
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .hebang-portfolio-title a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
  }

  .hebang-portfolio-title a:hover,
  .hebang-portfolio-title a:focus {
    color: var(--hebang-color-primary-text);
  }

  /* 手机入口由图片和标题承接，辅助说明与重复操作只在宽屏展示。 */
  .hebang-portfolio-cate,
  .hebang-portfolio-icon {
    display: none;
  }

  .hebang-portfolio .hebang-heading-title {
    font-size: clamp(30px, 7vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.03em;
  }
}

/* --- 常见问题与询价入口 --- */

/*
 * 插画居中覆盖内容区域，低透明度与问题底色共同保证正文对比度。
 */
.hebang-faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  gap: var(--hebang-space-6);
  padding: 120px 0;
  background-color: var(--hebang-color-primary-dark);
  background-image: linear-gradient(rgba(42, 76, 17, 0.92), rgba(42, 76, 17, 0.92)), var(--hebang-faq-bg, none);
  color: #e5eedf;
  font-size: var(--hebang-fs-17);
  font-weight: var(--hebang-weight-regular);
  line-height: 1.7;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
}
.hebang-faq-heading,
.hebang-faq-accordion {
  position: relative;
}



/* 箱式容器只留横向留白，内层自己封顶 1360 并居中；子项纵向排布由内层承担 */
.hebang-faq-boxed {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0 var(--hebang-space-6);
}

.hebang-faq-boxed-inner {
  display: flex;
  align-items: flex-start;
  flex-grow: 1;
  gap: var(--hebang-space-6);
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
}

.hebang-faq .hebang-faq-boxed-inner {
  flex-direction: column;
  max-width: 1000px;
}

.hebang-faq .hebang-faq-col--faq {
  width: 100%;
  padding-right: 0;
}

.hebang-faq .hebang-faq-heading-desc,
.hebang-faq .hebang-faq-heading-desc p {
  margin-inline: auto;
  max-width: 760px;
}

.hebang-faq-help {
  position: relative;
  align-self: stretch;
  padding: 24px 0 0;
  text-align: center;
}

.hebang-faq-help-content {
  position: relative;
  z-index: 1;
}

.hebang-faq-sketch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1100px;
  max-width: 115%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.12;
  pointer-events: none;
}

.hebang-faq .hebang-faq-acc-item {
  background-color: rgb(255 255 255 / 6%);
}

.hebang-faq .hebang-faq-heading-title,
.hebang-faq .hebang-faq-acc-title,
.hebang-faq .hebang-faq-acc-button {
  color: var(--hebang-color-white);
}

.hebang-faq .hebang-faq-heading-sub {
  color: var(--hebang-color-primary-soft);
}

.hebang-faq .hebang-faq-acc-body {
  border-color: rgb(255 255 255 / 16%);
  color: #e5eedf;
}

.hebang-faq .hebang-faq-heading-desc p,
.hebang-faq .hebang-faq-acc-body p {
  color: #e5eedf;
}

.hebang-faq .hebang-faq-acc-icon svg path {
  fill: currentColor;
}

/* 左列纵向居中，标题与手风琴之间由列自己的行距给出 */
.hebang-faq-col--faq {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--hebang-space-6);
  width: 55.067%;
  min-width: 0;
  padding-right: 45px;
}

.hebang-faq-heading {
  max-width: 100%;
}

/* 标题块与标题之间那层容器只贡献 5px 下外边距，两层不能合并 */
.hebang-faq-heading-widget {
  margin-bottom: var(--hebang-space-1);
}

.hebang-faq-heading-box {
  text-align: left;
}

.hebang-faq-heading-inner {
  position: relative;
}

.hebang-faq-heading-sub {
  display: inline-block;
  color: var(--hebang-color-primary);
  font-size: var(--hebang-fs-16);
  font-weight: var(--hebang-weight-medium);
  line-height: 25px;
  text-transform: uppercase;
}

.hebang-faq-heading-title {
  margin: var(--hebang-space-5) 0 0;
  color: var(--hebang-color-ink);
  font-family: var(--hebang-font-heading);
  font-size: 52px;
  font-weight: var(--hebang-weight-bold);
  line-height: 58px;
  letter-spacing: -2px;
}

/*
 * 引导句的内外边距同时落在两层上：两层的上外边距合并成一处，右外边距不合并，
 * 断行宽度因此比标题窄 40px。
 */
.hebang-faq-heading-desc,
.hebang-faq-heading-desc p {
  margin: var(--hebang-space-7) var(--hebang-space-6) 0 0;
  font-size: var(--hebang-fs-18);
  line-height: 32px;
}

/*
 * 容器自成格式化上下文：末条的下外边距留在这层里，
 * 不会穿出去把段高改成另一种结果。
 */
.hebang-faq-accordion-slot {
  contain: layout;
  padding-top: var(--hebang-space-6);
}

.hebang-faq-acc-item {
  margin-bottom: var(--hebang-space-6);
  padding-top: 16px;
  border-radius: var(--hebang-radius-xs);
  background-color: var(--hebang-color-surface-alt);
  cursor: pointer;
}

/* 标题元素只作按钮容器：参与布局的是按钮本体，字号与行高沿用段根继承值 */
.hebang-faq-acc-header {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* 标题允许在图标预留区内收缩换行，避免长问题文字覆盖右侧图标。 */
.hebang-faq-acc-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 50px 0 0;
  border: 0;
  border-radius: var(--hebang-radius-xs);
  background: transparent;
  color: var(--hebang-color-ink);
  font-family: inherit;
  font-size: var(--hebang-fs-20);
  font-weight: var(--hebang-weight-bold);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.hebang-faq-acc-icon {
  position: absolute;
  top: var(--hebang-space-3);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  margin: -7px var(--hebang-space-8) 0 0;
}

.hebang-faq-acc-icon-closed {
  display: block;
}

/* 加减号与标题同色：填充由 CSS 给出，标记里不带内联 fill */
.hebang-faq-acc-icon svg {
  fill: var(--hebang-color-ink);
}

.hebang-faq-acc-icon-opened {
  display: none;
}

.hebang-faq-acc-button[aria-expanded="true"] .hebang-faq-acc-icon-closed {
  display: none;
}

.hebang-faq-acc-button[aria-expanded="true"] .hebang-faq-acc-icon-opened {
  display: block;
}

.hebang-faq-acc-title {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
  padding: 0 0 var(--hebang-space-6);
  color: var(--hebang-color-ink);
}

.hebang-faq-acc-body {
  padding: 22px var(--hebang-space-8) 23px;
  border-top: var(--hebang-border-width) solid rgba(31, 31, 31, 0.102);
  font-size: var(--hebang-fs-18);
  line-height: var(--hebang-space-8);
}

.hebang-faq-acc-body p {
  margin: 0;
  color: var(--hebang-color-text);
  line-height: var(--hebang-space-8);
}

/* --- 最新动态 --- */

/*
 * 段根是装箱容器：块向内边距落在段根，底部保持自然流以免覆盖页脚。
 * 行高用比例而不是像素：卡片元信息与日期的字号比段根小，像素行高会让它们跟着偏大。
 * 段内正文比主题默认细一档，粗体在小字号下显得拥挤。
 */
.hebang-blog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 95px 0 110px;
  margin-bottom: 0;
  background-color: var(--hebang-color-surface-alt);
  color: var(--hebang-color-text);
  font-family: var(--hebang-font-sans);
  font-size: var(--hebang-fs-17);
  font-weight: var(--hebang-weight-regular);
  line-height: 1.7;
}

.hebang-blog-head {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 10px;
}

/* 段头在这一层限宽：比段宽窄，居中由这一层吸收 */
.hebang-blog-head-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  max-width: 1385px;
  margin: 0 auto;
  padding: 10px 0;
}

/*
 * 两列各占一半宽：列高由标题列决定，按钮列只把内容贴到底部。
 */
.hebang-blog-heading-col,
.hebang-blog-action-col {
  position: relative;
  display: flex;
  gap: 20px;
  width: 50%;
  min-width: 0;
  padding: 10px;
}

.hebang-blog-heading-col {
  flex-direction: column;
}

/*
 * 标题容器留 5px 下外边距：标题列的高度由「小标签行盒、标题上外边距、标题高度、这 5px」
 * 四段构成，少这一段列高会矮 5px，按钮列的贴底位置跟着上移。
 */
.hebang-blog-heading {
  margin-bottom: 5px;
  max-width: 100%;
}

.hebang-blog .hebang-heading {
  text-align: left;
}

.hebang-blog .hebang-heading-sub {
  display: inline-block;
  color: var(--hebang-color-primary-text);
  font-size: var(--hebang-fs-16);
  font-weight: var(--hebang-weight-medium);
  line-height: 25px;
  text-transform: uppercase;
}

.hebang-blog .hebang-heading-title {
  margin: 15px 0 0;
  color: var(--hebang-color-ink);
  font-family: var(--hebang-font-heading);
  font-size: 52px;
  font-weight: var(--hebang-weight-bold);
  line-height: 58px;
  letter-spacing: -2px;
}

.hebang-blog-action-col {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-end;
}

/*
 * 按钮外层留 15px 下外边距：按钮因此停在列底之上 15px。
 * 窄档列高改由自身内容决定，这段留白要收掉，否则列会高出 15px。
 */
.hebang-blog-action-wrap {
  margin-bottom: 15px;
}

/* 按钮外层不自建行盒：行高会把行内块按钮下方的空隙算进容器高度 */
.hebang-blog-action {
  display: block;
  line-height: 0;
}

/* 与 .hebang-services-action .hebang-btn 同构：不沿用原子层的弹性布局与最小高度 */
.hebang-blog-action .hebang-btn {
  position: relative;
  display: inline-block;
  gap: normal;
  align-items: normal;
  justify-content: normal;
  overflow: hidden;
  min-height: 0;
  padding: 15px 38px;
  border: 0;
  border-radius: var(--hebang-radius-xs);
  background-color: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
  font-size: var(--hebang-fs-18);
  font-weight: var(--hebang-weight-medium);
  line-height: 28px;
  text-align: start;
}

.hebang-blog-action .hebang-btn span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hebang-blog-action .hebang-btn .hebang-btn-arrow {
  position: relative;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 20px;
}

.hebang-blog-action .hebang-btn svg path {
  fill: var(--hebang-color-primary-ink);
}

/*
 * 轮播行留 10px 左右槽位，行内层留 10px 上下留白：槽位不参与内层的限宽，
 * 宽档时内层才会以 1385 为上限居中，而不是被槽位再吃掉一次。
 *
 * 宽度必须写死成 100%：本行是换行纵向弹性容器的子项，交叉尺寸默认取自内容，
 * 而内容里轮播轨道的宽度又是库按容器宽度算出来的，不写死会互相追着变大。
 */
.hebang-blog-row {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0 10px;
}

.hebang-blog-row-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 1385px;
  margin: 0 auto;
  padding: 10px 0;
}

.hebang-blog-content-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

/*
 * 轮播根到幻灯列表之间不再有布局层：列表与轨道的位置、裁剪与浮动都由库给出，
 * 中间加一层限宽或内边距会改变每屏张数取整时的基准宽度。
 * 上限与定宽必须留在这一层，否则父级换行纵向弹性容器的交叉尺寸会与轨道宽度互相追着变大。
 */
.hebang-post-slider-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
}

/*
 * 幻灯张的左右外边距就是卡片间距：库按「列表宽 ÷ 每屏张数」定宽后要减去
 * 这张幻灯片横向占用的外边距，写在这里的 15px 因此同时决定卡片宽度。
 */
.hebang-post-item {
  display: flex;
  height: auto;
  margin: 0 15px;
}

/*
 * 卡片底色与图片圆角分两层：图片自身带圆角，卡片只负责底色，
 * 于是图片上方两角贴合卡片，下方两角由正文区接住。
 */
.hebang-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--hebang-color-surface);
  border-radius: var(--hebang-radius-md);
}

.hebang-post-image-wrap {
  position: relative;
}

.hebang-post-thumb {
  display: block;
  overflow: hidden;
}

/* 悬停时图片放大，容器裁掉溢出，缩放因此只发生在卡片内部 */
.hebang-post-thumb img {
  width: 100%;
  border-radius: var(--hebang-radius-md);
  transition: all 0.3s ease;
}

.hebang-post-card:hover .hebang-post-thumb img {
  transform: scale(1.1);
}

/*
 * 分类角标压在图片下缘：负的下偏移让角标一半落在图片上、一半落在正文区。
 * 定位相对图片容器，因此卡片高度不受它影响。
 */
.hebang-post-cate {
  position: absolute;
  left: 30px;
  bottom: -14px;
  display: inline-block;
  padding: 0 12px 3px;
  border-radius: var(--hebang-radius-sm);
  background-color: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
  font-size: var(--hebang-fs-15);
  line-height: 28px;
}

.hebang-post-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 38px 30px 25px;
}

.hebang-post-title {
  margin: 0;
  color: var(--hebang-color-ink);
  font-family: var(--hebang-font-heading);
  font-size: 24px;
  font-weight: var(--hebang-weight-bold);
  line-height: 34px;
}

/* 链接保持行内：块化会让整行可点，标题换行时命中区域跟着变宽 */
.hebang-post-title a {
  display: inline;
  color: var(--hebang-color-ink);
  text-decoration: none;
}

.hebang-post-meta {
  display: flex;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  color: var(--hebang-color-text);
  font-size: var(--hebang-fs-16);
}

/* 署名与日期之间用圆点分隔：圆点由伪元素给出，不进入文本内容 */
.hebang-post-meta li {
  position: relative;
  margin-left: 15px;
  padding-left: 20px;
}

.hebang-post-meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: var(--hebang-radius-circle);
  background-color: var(--hebang-color-text);
}

.hebang-post-meta li:first-child {
  margin-left: 0;
  padding-left: 0;
}

.hebang-post-meta li:first-child::before {
  display: none;
}

.hebang-post-meta li span {
  font-weight: var(--hebang-weight-bold);
  text-transform: capitalize;
}

/*
 * 底栏用上边框与正文区隔开：上内边距把内容推离边框，上外边距把边框推离元信息。
 * 箭头是 40px 的行内块，这一行的高度由它的行盒撑出，不需要另写固定高度。
 */
.hebang-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto 0 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--hebang-color-border-veil);
}

.hebang-post-read {
  color: var(--hebang-color-text);
}

.hebang-post-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--hebang-radius-xs);
  background-color: var(--hebang-color-chip);
  color: var(--hebang-color-text);
  font-size: var(--hebang-fs-20);
  transition: all 0.5s ease;
}

.hebang-post-arrow .hebang-icon {
  width: 20px;
  height: 20px;
}

.hebang-post-card:hover .hebang-post-arrow {
  background-color: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
}

/* --- 响应式 --- */

/* 这一档起横向留白由段根承担。 */
@media (max-width: 1366px) {
  .hebang-faq {
    padding-inline: var(--hebang-space-3);
  }


  .hebang-faq-boxed {
    padding-left: var(--hebang-space-3);
    padding-right: 0;
  }

  .hebang-faq-col--faq {
    padding-right: var(--hebang-space-6);
  }




  .hebang-faq-heading-title {
    font-size: var(--hebang-fs-40);
    line-height: 50px;
  }

  .hebang-blog-row {
    padding: 0 5px;
  }

  .hebang-blog-row-inner {
    padding: 0;
  }

  /* 标题字号降一档，行高仍按宽档的 58px：两行标题的块高在这一档不变 */
  .hebang-blog .hebang-heading-title {
    font-size: var(--hebang-fs-40);
  }

  /* 卡片标题与元信息同步降一档，卡片高度因此比宽档矮两行字 */
  .hebang-post-title {
    font-size: var(--hebang-fs-17);
    line-height: 26px;
  }

  .hebang-post-meta li {
    font-size: var(--hebang-fs-13);
  }
}

@media (max-width: 1024px) {
  .hebang-faq {
    padding-block: var(--hebang-space-12) var(--hebang-space-13);
  }



  .hebang-faq-boxed,
  .hebang-faq-boxed-inner {
    flex-direction: column;
  }

  .hebang-faq-col--faq {
    width: 100%;
  }

  .hebang-faq-heading-desc,
  .hebang-faq-heading-desc p {
    margin-right: 0;
  }

  .hebang-blog {
    padding: 50px 0 250px;
  }

  .hebang-blog .hebang-heading-title {
    line-height: 52px;
  }
}

@media (width < 768px) {
  .hebang-section-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hebang-space-5);
  }

  .hebang-faq-boxed {
    padding-inline: var(--hebang-space-3);
  }

  .hebang-faq-col--faq {
    padding-right: 0;
  }



  .hebang-faq-heading-title {
    font-size: var(--hebang-fs-30);
    line-height: var(--hebang-space-9);
    letter-spacing: 0;
  }

  /* 窄档标题字号降到 18px，按钮与图标仍按 20px 取行高 */
  .hebang-faq-acc-title {
    padding: 0 0 var(--hebang-space-7);
    font-size: var(--hebang-fs-18);
  }

  /*
   * 窄档容器改为换行排布：段根与两列在纵向堆叠时允许子项换行，
   * 不然长标题会把列撑宽。
   */
  .hebang-faq,
  .hebang-faq-boxed-inner,
  .hebang-faq-col--faq {
    flex-wrap: wrap;
  }


  /*
   * 窄档两列改堆叠：段头与轮播行都收到内容宽度，列宽交回整行，
   * 纵向堆叠时允许子项换行，不然长标题会把列撑宽。
   */
  .hebang-blog {
    padding-bottom: 80px;
    flex-wrap: wrap;
  }

  .hebang-blog-head-inner,
  .hebang-blog-row-inner {
    max-width: min(100%, 767px);
  }

  .hebang-blog-heading-col,
  .hebang-blog-action-col,
  .hebang-blog-content-col {
    flex-wrap: wrap;
    width: 100%;
  }

  /* 按钮列改居中；外层留白收掉，列高回到内容高度 */
  .hebang-blog-action-col {
    justify-content: center;
  }

  .hebang-blog-action-wrap {
    margin-bottom: 0;
  }

  /* 窄屏标题与正文共用左侧起点。 */
  .hebang-blog .hebang-heading {
    text-align: left;
  }

  .hebang-blog .hebang-heading-title {
    font-size: var(--hebang-fs-30);
    line-height: 40px;
  }

  .hebang-title {
    font-size: var(--hebang-fs-h3);
    line-height: var(--hebang-lh-snug);
  }
}

/* 标题标识只装饰小标签，保留文本与各模块原有的深浅背景配色。 */
.home .hebang-main .hebang-hero-copy {
  text-align: left;
}

.home .hebang-main :is(.hebang-hero-category, .hebang-heading-sub, .hebang-faq-heading-sub, .hebang-certificates-eyebrow) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--hebang-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.home .hebang-main :is(.hebang-hero-category, .hebang-heading-sub, .hebang-faq-heading-sub, .hebang-certificates-eyebrow)::after,
.home .hebang-main .hebang-bar-title::after {
  content: "";
  flex: 0 0 40px;
  order: -1;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--hebang-color-primary);
}

.home .hebang-main :is(.hebang-heading-title, .hebang-faq-heading-title, .hebang-certificates-head h2) {
  margin-top: 0;
  margin-inline: 0;
  font-family: var(--hebang-font-heading);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: left;
}

.home .hebang-main .hebang-portfolio-title-intro {
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* 分词动画输出独立空格片段，保留空白才能维持词间距。 */
.home .hebang-main [data-hebang-split-text] > [aria-hidden="true"] > span {
  white-space: pre-wrap;
}

.home .hebang-main .hebang-certificates-head {
  text-align: left;
}

/* 联系条没有小标签，标识放在标题左侧，不额外增加段高。 */
.home .hebang-main .hebang-bar-title {
  position: relative;
  padding-left: 52px;
  letter-spacing: -0.025em;
  text-align: left;
}

.home .hebang-main .hebang-bar-title::after {
  position: absolute;
  top: 0.6em;
  left: 0;
  transform: translateY(-50%);
  background: currentColor;
}

/* 窄屏缩短装饰线，给三语标签和长标题保留折行宽度。 */
@media (width < 768px) {
  .home .hebang-main :is(.hebang-hero-category, .hebang-heading-sub, .hebang-faq-heading-sub, .hebang-certificates-eyebrow) {
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .home .hebang-main :is(.hebang-hero-category, .hebang-heading-sub, .hebang-faq-heading-sub, .hebang-certificates-eyebrow)::after {
    flex-basis: 24px;
    width: 24px;
  }

  .home .hebang-main :is(.hebang-heading-title, .hebang-faq-heading-title, .hebang-bar-title, .hebang-certificates-head h2) {
    font-size: var(--hebang-mobile-section-title);
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  .home .hebang-main :is(.hebang-about, .hebang-portfolio, .hebang-services, .hebang-why, .hebang-faq, .hebang-blog) { padding-block: var(--hebang-mobile-section-space); }
  .home .hebang-main .hebang-portfolio { padding-top: 94px; }
  .home .hebang-main :is(.hebang-about, .hebang-portfolio, .hebang-why, .hebang-faq, .hebang-blog) { padding-inline: var(--hebang-gutter); }
  .home .hebang-main :is(.hebang-portfolio-head, .hebang-portfolio-row, .hebang-why-head, .hebang-why-cards-a, .hebang-why-cards-b, .hebang-faq-boxed, .hebang-blog-head, .hebang-blog-row, .hebang-blog-heading-col, .hebang-blog-action-col, .hebang-blog-content-col) { padding-inline: 0; }
  .home .hebang-main .hebang-portfolio .hebang-portfolio-title-single-line { font-size: clamp(16px, 5vw, 26px); }
  .home .hebang-main .hebang-why-inner { padding-block: 0; }
  .home .hebang-main .hebang-services-content { padding-inline: var(--hebang-gutter); }
  .home .hebang-main :is(.hebang-services-heading-col, .hebang-services-lead-col) { padding-inline: 0; }
  .home .hebang-main :is(.hebang-why-card-title, .hebang-post-title) { font-size: var(--hebang-mobile-card-title); line-height: 1.4; }
  .home .hebang-main .hebang-why-card-content { padding: var(--hebang-mobile-content-gap); }
  .home .hebang-main :is(.hebang-about-body p, .hebang-services-lead, .hebang-why-card-desc, .hebang-faq-heading-desc p) { font-size: var(--hebang-fs-body); line-height: var(--hebang-lh-base); }

  .home .hebang-main :is(.hebang-about-action, .hebang-portfolio-action) {
    justify-content: flex-start;
    width: 100%;
  }

  .home .hebang-main :is(.hebang-about-action-btn, .hebang-portfolio-action-btn) {
    width: 100%;
  }

  .home .hebang-main :is(.hebang-hero-link, .hebang-about-action .hebang-btn, .hebang-portfolio-action .hebang-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65%;
    min-width: min(200px, 100%);
    min-height: var(--hebang-mobile-control-h);
    padding: 11px 16px;
    font-size: var(--hebang-fs-16);
    line-height: 1.5;
    border-radius: var(--hebang-radius);
  }

  .home .hebang-main .hebang-hero-link .hebang-btn-content {
    gap: 10px;
  }

  .home .hebang-main .hebang-bar-title {
    padding-left: 32px;
  }

  .home .hebang-main .hebang-bar-title::after {
    width: 24px;
  }
}

/* 指定章节的眉题与主标题共用中轴，说明正文与内容网格保留原有对齐。 */
.home .hebang-main :is(
  .hebang-portfolio .hebang-heading,
  .hebang-services .hebang-heading,
  .hebang-why .hebang-heading,
  .hebang-faq .hebang-faq-heading-box
) {
  text-align: center;
}

.home .hebang-main .hebang-why-head {
  justify-content: center;
}

.home .hebang-main .hebang-why-heading-col {
  margin-inline: auto;
}

.home .hebang-main :is(
  .hebang-portfolio .hebang-heading-sub,
  .hebang-services .hebang-heading-sub,
  .hebang-why .hebang-heading-sub,
  .hebang-faq .hebang-faq-heading-sub,
  .hebang-certificates-eyebrow
) {
  justify-content: center;
  text-align: center;
}

.home .hebang-main :is(
  .hebang-portfolio .hebang-heading-title,
  .hebang-services .hebang-heading-title,
  .hebang-why .hebang-heading-title,
  .hebang-faq .hebang-faq-heading-title,
  .hebang-certificates-head h2
) {
  text-align: center;
}

.home .hebang-main .hebang-portfolio .hebang-heading-title {
  margin-inline: auto;
}

.home .hebang-main .hebang-certificates-head {
  text-align: center;
}

.home .hebang-main .hebang-portfolio-title {
  text-align: center;
}

.home .hebang-main .hebang-services-lead-body {
  margin-inline: auto;
  text-align: center;
}

.home .hebang-main .hebang-services-lead {
  text-align: center;
}

.home .hebang-main .hebang-why-card-title-wrap {
  padding-inline: 0;
  text-align: center;
}

.home .hebang-main .hebang-why-card-desc {
  text-align: center;
}

.home .hebang-main .hebang-faq-heading-desc,
.home .hebang-main .hebang-faq-heading-desc p {
  text-align: center;
}