/* =============================================================================
   柳林生活网 · 企业站模板 —— 扁平化组件样式
   依赖：flat.css（先加载）
   说明：本文件替换原 header.css / index.css / footer.css 的视觉部分，
        为新 header.html / index.html / footer.html / leftnav.html 提供样式。
   ============================================================================= */

/* ==========================================================================
   1. 顶部品牌区
   ========================================================================== */
.st-header {
  background: var(--c-surface);
  border-bottom: var(--bd-1) solid var(--c-border);
}

.st-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--h-header-top);
  padding-block: var(--sp-4);
}

/* 品牌：logo 或纯文字名 */
.st-brand { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.st-brand__logo {
  flex: none;
  max-height: 60px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
}
.st-brand__mark {
  flex: none;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-brand), var(--c-rose));
  color: var(--c-text-invert);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  box-shadow: var(--sh-brand);
}
.st-brand__text { min-width: 0; }
.st-brand__name {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--c-navy);
  letter-spacing: .01em;
}
.st-brand__kw {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46ch;
}

/* 右侧：电话 CTA */
.st-header__cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.st-phone {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--c-brand-soft);
  border: var(--bd-1) solid rgba(var(--c-brand-rgb), .18);
}
.st-phone__icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--c-brand);
  color: var(--c-text-invert);
}
.st-phone__icon svg { width: 18px; height: 18px; display: block; }
.st-phone__label { font-size: var(--fs-xs); color: var(--c-text-mute); line-height: 1.3; }
.st-phone__num {
  font-family: var(--ff-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.st-header__expired {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--c-brand-soft);
  border: var(--bd-1) solid rgba(var(--c-brand-rgb), .2);
  font-size: var(--fs-base);
  color: var(--c-brand);
}

/* ==========================================================================
   2. 主导航（扁平：白底 + 底部指示条，取消黑底）
   ========================================================================== */
/* 顶部导航条：主色纯色背景（#e84545，全站统一，明亮醒目） */
.st-nav {
  background: var(--c-brand);
  border-bottom: 0;
  box-shadow: 0 2px 10px rgba(var(--c-brand-rgb), .22);
}
.st-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--h-nav);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.st-nav__inner::-webkit-scrollbar { display: none; }

.st-nav__item {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--h-nav);
  padding-inline: var(--sp-5);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.st-nav__item::after {
  content: '';
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  bottom: 0;
  height: 3px;
  border-radius: var(--r-pill) var(--r-pill) 0 0;
  background: transparent;
  transition: background var(--tr-fast);
}
.st-nav__item:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.st-nav__item:hover::after { background: rgba(255, 255, 255, .9); }
/* 当前页：白底红字胶囊，层级最清楚 */
.st-nav__item.is-current { color: var(--c-brand); font-weight: var(--fw-semi); background: #fff; }
.st-nav__item.is-current::after { background: transparent; }
.st-nav__item.is-current:hover { color: var(--c-brand-dark); background: #fff; }

/* 移动端汉堡按钮 */
.st-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  margin-left: auto;
  border: var(--bd-1) solid rgba(255, 255, 255, .38);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
}
.st-nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  margin: 4px auto;
  border-radius: var(--r-pill);
  background: #fff;
  transition: var(--tr-fast);
}

/* ==========================================================================
   3. Banner 横幅
   ========================================================================== */
.st-banner {
  position: relative;
  width: 100%;
  background: var(--c-surface-2);
  overflow: hidden;
}
/* 横幅图：宽度撑满容器、高度按原图比例自适应，不做裁切 */
.st-banner__img {
  display: block;
  width: 100%;
  height: auto;
}
/* 无横幅时的兜底渐变块（渐变由模板按店铺 id 动态生成，每个店铺都不同） */
.st-banner--fallback {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 叠一层细网格纹理，避免纯渐变显得空 */
.st-banner--fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}
.st-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--sp-10);
  color: #fff;
}
.st-banner__eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: var(--sp-3);
}
.st-banner__title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.35;
  max-width: 44em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
/* 关键词标签 */
.st-banner__tags {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.st-banner__tag {
  display: inline-block;
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  border: var(--bd-1) solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(4px);
  font-size: var(--fs-xs);
  color: #fff;
  line-height: 1.7;
}
.st-banner__bar {
  width: 64px;
  height: 4px;
  margin-top: var(--sp-5);
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
}

/* ==========================================================================
   4. 页面主体容器
   ========================================================================== */
.st-main {
  padding-block: var(--sp-8) var(--sp-16);
}
.st-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.st-layout--full { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   5. 通用面板（替代原 .main_content_bgc）
   ========================================================================== */
.st-panel {
  background: var(--c-surface);
  border: var(--bd-1) solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  margin-bottom: var(--sp-6);
  box-shadow: var(--sh-xs);
}
.st-panel:last-child { margin-bottom: 0; }
.st-panel--flush { padding: 0; overflow: hidden; }

/* 面板内标题行（列表页用） */
.st-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

/* 面板标题行内的主区 / 副标题 / 右侧更多 —— 与 .lin-sec-head 保持完全一致 */
.st-panel__main { min-width: 0; }
.st-panel__sub {
  margin: var(--sp-2) 0 0 var(--sp-4);
  font-size: var(--fs-base);
  color: var(--c-text-mute);
  line-height: var(--lh-base);
}
.st-panel__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  white-space: nowrap;
  transition: color var(--tr-fast);
}
.st-panel__more:hover { color: var(--c-brand); }
.st-panel__more::after {
  content: '';
  width: 6px; height: 6px;
  border-top: var(--bd-2) solid currentColor;
  border-right: var(--bd-2) solid currentColor;
  transform: rotate(45deg) translateY(1px);
}
.st-panel__title {
  position: relative;
  margin: 0;
  padding-left: var(--sp-4);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-navy);
  letter-spacing: .01em;
}
.st-panel__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--c-brand), var(--c-rose));
}
.st-panel__sub {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.st-panel__body { min-width: 0; }

/* 面包屑 */
.st-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-5) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.st-crumb a { color: var(--c-text-mute); transition: color var(--tr-fast); }
.st-crumb a:hover { color: var(--c-brand); }
.st-crumb__sep { color: var(--c-border-strong, var(--c-border)); }
.st-crumb__cur {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-sub);
}

/* 空状态 */
.st-empty {
  grid-column: 1 / -1;
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  border-radius: var(--r-lg);
  border: var(--bd-1) dashed var(--c-border);
  background: var(--c-surface-2);
}
.st-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-5);
  color: var(--c-text-mute);
  opacity: .55;
}
.st-empty__icon svg { width: 100%; height: 100%; }
.st-empty__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text-sub);
}
.st-empty__sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}

/* ==========================================================================
   6. 数据展示条（新增板块）
   ========================================================================== */
.st-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.st-stat {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: var(--bd-1) solid var(--c-border);
  text-align: center;
  overflow: hidden;
}
.st-stat::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c-brand), var(--c-rose));
}
.st-stat__num {
  font-family: var(--ff-num);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: 1.15;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.st-stat__num em {
  font-style: normal;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--c-brand);
  margin-left: 2px;
}
.st-stat__label {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--c-text-sub);
}

/* ==========================================================================
   7. 联系方式卡片（新增板块）
   ========================================================================== */
.st-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: var(--bd-1) solid var(--c-border);
  background: var(--c-surface);
}
.st-contact-card__main {
  padding: var(--sp-8);
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-plum) 100%);
  color: var(--c-text-invert);
}
.st-contact-card__eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .62;
}
.st-contact-card__title {
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.st-contact-card__phone {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-num);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.st-contact-card__phone svg { width: 26px; height: 26px; flex: none; opacity: .82; }
.st-contact-card__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  opacity: .74;
}
.st-contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.st-contact-card__actions .lin-btn--primary {
  background: var(--c-brand);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.st-contact-card__actions .lin-btn--ghost {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .26);
  color: var(--c-text-invert);
}
.st-contact-card__actions .lin-btn--ghost:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .42);
  color: var(--c-text-invert);
}

/* 右侧信息列表 */
.st-contact-card__side {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--c-surface);
}
.st-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.st-info-row__icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-brand-soft);
  color: var(--c-rose);
}
.st-info-row__icon svg { width: 18px; height: 18px; display: block; }
.st-info-row__label {
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  line-height: 1.5;
}
.st-info-row__value {
  margin-top: 1px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  line-height: 1.6;
  word-break: break-word;
}

/* ==========================================================================
   8. 机构动态（文章列表）
   ========================================================================== */
.st-news { display: grid; gap: var(--sp-3); }
.st-news__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: var(--bd-1) solid var(--c-border-soft);
  background: var(--c-surface);
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.st-news__item:hover {
  border-color: rgba(var(--c-brand-rgb), .32);
  background: var(--c-surface-2);
  color: inherit;
}
.st-news__date {
  flex: none;
  width: 56px;
  text-align: center;
  padding: var(--sp-2) 0;
  border-radius: var(--r-sm);
  background: var(--c-brand-soft);
  font-family: var(--ff-num);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--c-brand);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.st-news__body { min-width: 0; flex: 1 1 auto; }
.st-news__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  line-height: var(--lh-base);
  transition: color var(--tr-fast);
}
.st-news__item:hover .st-news__title { color: var(--c-brand); }
.st-news__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  line-height: var(--lh-base);
}

/* ==========================================================================
   9. 服务优势（扁平卡片网格，替代原步骤条）
   ========================================================================== */
.st-adv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.st-adv__item {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-navy);
  transition: background var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
}
/* 右上角一抹品牌色光晕，增加层次 */
.st-adv__item::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c-brand-rgb), .38), transparent 68%);
  pointer-events: none;
}
.st-adv__item:hover {
  background: linear-gradient(135deg, var(--c-brand), var(--c-rose));
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
}
.st-adv__no {
  display: block;
  font-family: var(--ff-num);
  font-size: 42px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .02em;
  background: linear-gradient(135deg, var(--c-brand), var(--c-rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: none;
}
.st-adv__item:hover .st-adv__no {
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .62));
  -webkit-background-clip: text;
  background-clip: text;
}
.st-adv__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-base);
  color: var(--c-text-invert);
}
.st-adv__text em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-weight: var(--fw-base, 400);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .62);
}

/* ==========================================================================
   10. 服务流程（横向时间轴，扁平化重做）
   ========================================================================== */
.st-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  position: relative;
  padding-top: var(--sp-2);
}
.st-flow::before {
  content: '';
  position: absolute;
  left: 8.33%;
  right: 8.33%;
  top: calc(var(--sp-2) + 26px);
  height: var(--bd-2);
  background: linear-gradient(90deg,
    transparent,
    var(--c-border) 6%,
    var(--c-border) 94%,
    transparent);
  z-index: 0;
}
.st-flow__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--sp-2);
}
.st-flow__dot {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-surface);
  border: var(--bd-2) solid var(--c-border);
  font-family: var(--ff-num);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-text-mute);
  transition: all var(--tr-base);
}
.st-flow__step:hover .st-flow__dot {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-text-invert);
  box-shadow: var(--sh-brand);
  transform: translateY(-3px);
}
.st-flow__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-text-sub);
  line-height: var(--lh-base);
}

/* ==========================================================================
   12. 案例展示（横向滚动，扁平化）
   ========================================================================== */
.st-cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.st-case {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: var(--bd-1) solid var(--c-border);
  background: var(--c-surface);
  transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
}
.st-case:hover {
  border-color: rgba(var(--c-brand-rgb), .34);
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
  color: inherit;
}
.st-case__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2);
  overflow: hidden;
}
.st-case__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tr-slow);
}
.st-case:hover .st-case__thumb img { transform: scale(1.06); }
.st-case__mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: rgba(43, 46, 74, .62);
  color: var(--c-text-invert);
  font-size: var(--fs-base);
  opacity: 0;
  transition: opacity var(--tr-base);
}
.st-case:hover .st-case__mask { opacity: 1; }
.st-case__mask svg { width: 26px; height: 26px; }
.st-case__title {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  line-height: var(--lh-base);
  transition: color var(--tr-fast);
}
.st-case:hover .st-case__title { color: var(--c-brand); }

/* ==========================================================================
   13. 关于我们（图文排版）
   ========================================================================== */
.st-about { min-width: 0; }
.st-about__logo {
  display: block;
  max-width: 180px;
  max-height: 100px;
  object-fit: contain;
  margin-bottom: var(--sp-5);
}
.st-about__content {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-text-sub);
}
.st-about__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin-block: var(--sp-4);
}
.st-about__content p { margin: 0 0 var(--sp-4); }
.st-about__content h3,
.st-about__content h4 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}
.st-about__content a { color: var(--c-brand); text-decoration: underline; }
.st-about__content table { width: 100%; border-collapse: collapse; }
.st-about__content td,
.st-about__content th {
  padding: var(--sp-3);
  border: var(--bd-1) solid var(--c-border);
}

/* 过期提示条 */
.st-notice {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-brand-soft);
  border-left: var(--bd-3) solid var(--c-brand);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-text-sub);
}
.st-notice strong,
.st-notice font { color: var(--c-brand); font-weight: var(--fw-semi); }
.st-notice a { color: var(--c-brand); text-decoration: underline; }

/* ==========================================================================
   14. 侧栏（leftnav.html）
   ========================================================================== */
.st-side { display: grid; gap: var(--sp-5); }
.st-side__card {
  border-radius: var(--r-lg);
  border: var(--bd-1) solid var(--c-border);
  background: var(--c-surface);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.st-side__head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--bd-1) solid var(--c-border);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  border-left: var(--bd-3) solid var(--c-brand);
}
.st-side__list { padding: var(--sp-2); display: grid; gap: 2px; }
.st-side__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.st-side__link:hover { background: var(--c-brand-soft); color: var(--c-brand); }
.st-side__link.is-current {
  background: var(--c-brand);
  color: var(--c-text-invert);
  font-weight: var(--fw-medium);
}

/* 侧栏联系块 */
.st-side__contact { padding: var(--sp-5); }
.st-side__contact-row { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); }
.st-side__contact-row + .st-side__contact-row { border-top: var(--bd-1) dashed var(--c-border); }
.st-side__contact-label { flex: none; width: 4em; font-size: var(--fs-sm); color: var(--c-text-mute); }
.st-side__contact-value { font-size: var(--fs-base); color: var(--c-text); word-break: break-all; }

/* ==========================================================================
   15. 内页：文章正文 / 列表
   ========================================================================== */
.st-article {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-text-sub);
}
.st-article img { max-width: 100%; height: auto; border-radius: var(--r-md); margin-block: var(--sp-4); }
.st-article p { margin: 0 0 var(--sp-5); }
.st-article h1, .st-article h2, .st-article h3, .st-article h4 {
  margin: var(--sp-8) 0 var(--sp-4);
  color: var(--c-navy);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.st-article h1 { font-size: var(--fs-xl); }
.st-article h2 { font-size: var(--fs-lg); }
.st-article h3 { font-size: var(--fs-md); }
.st-article ul, .st-article ol { padding-left: 1.5em; margin: 0 0 var(--sp-5); }
.st-article li { margin-bottom: var(--sp-2); }
.st-article blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: var(--bd-3) solid var(--c-brand);
  background: var(--c-surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-text-sub);
}
.st-article a { color: var(--c-brand); }

/* 文章列表项 */
.st-list { display: grid; gap: var(--sp-4); }
.st-list__item {
  display: block;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: var(--bd-1) solid var(--c-border);
  background: var(--c-surface);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.st-list__item:hover {
  border-color: rgba(var(--c-brand-rgb), .32);
  box-shadow: var(--sh-sm);
  color: inherit;
}
.st-list__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  line-height: var(--lh-base);
}
.st-list__item:hover .st-list__title { color: var(--c-brand); }
.st-list__meta {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
/* meta 行内的图标：必须显式给尺寸，否则 SVG 会撑满可用宽度 */
.st-list__meta svg {
  width: 14px;
  height: 14px;
  flex: none;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
  opacity: .75;
}
.st-list__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  line-height: var(--lh-base);
}

/* 文章头部 */
.st-article-head {
  padding-bottom: var(--sp-5);
  border-bottom: var(--bd-1) solid var(--c-border);
  margin-bottom: var(--sp-6);
}
.st-article-head__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-navy);
}
.st-article-head__meta {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
/* meta 行内的图标：必须显式给尺寸，否则 SVG 会撑满可用宽度 */
.st-article-head__meta > span {
  display: inline-flex;
  align-items: center;
}
.st-article-head__meta svg {
  width: 15px;
  height: 15px;
  flex: none;
  display: inline-block;
  margin-right: 6px;
  opacity: .8;
}

/* 兜底：正文内出现的无尺寸 SVG 一律不放大 */
.st-article svg:not([width]) {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

/* 分页 */
.st-pager {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.st-pager a,
.st-pager span {
  min-width: 38px;
  height: 38px;
  padding-inline: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: var(--bd-1) solid var(--c-border);
  background: var(--c-surface);
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  transition: all var(--tr-fast);
}
.st-pager a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.st-pager .current,
.st-pager span.current {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-text-invert);
  font-weight: var(--fw-semi);
}

/* ==========================================================================
   16. 留言板
   ========================================================================== */
.st-comment { display: grid; gap: var(--sp-4); }
.st-comment__item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: var(--bd-1) solid var(--c-border);
  background: var(--c-surface);
}
.st-comment__avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-brand-soft);
  color: var(--c-rose);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.st-comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-comment__body { min-width: 0; flex: 1 1 auto; }
.st-comment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.st-comment__name { font-weight: var(--fw-semi); color: var(--c-text); }
.st-comment__time { font-size: var(--fs-sm); color: var(--c-text-mute); }
.st-comment__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  line-height: var(--lh-base);
  word-break: break-word;
}

/* 表单 */
.st-form { display: grid; gap: var(--sp-5); }
.st-form__row { display: grid; gap: var(--sp-2); }
.st-form__label {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-text-sub);
}
.st-form__label .req { color: var(--c-brand); margin-left: 2px; }
.st-form__control {
  width: 100%;
  min-height: var(--h-control);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bd-1) solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.st-form__control:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb), .12);
}
textarea.st-form__control { min-height: 120px; resize: vertical; line-height: var(--lh-base); }
.st-form__control::placeholder { color: var(--c-text-mute); }
.st-form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* 信息表格（联系我们） */
.st-table { width: 100%; border-collapse: collapse; }
.st-table th,
.st-table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: var(--bd-1) solid var(--c-border);
  font-size: var(--fs-base);
  vertical-align: top;
}
.st-table th {
  width: 120px;
  font-weight: var(--fw-medium);
  color: var(--c-text-mute);
  background: var(--c-surface-2);
}
.st-table td { color: var(--c-text); }
.st-table tr:last-child th,
.st-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   17. 页脚（扁平深色）
   ========================================================================== */
.st-foot {
  background: var(--c-navy);
  color: rgba(255, 255, 255, .76);
  font-size: var(--fs-base);
}
.st-foot a { color: rgba(255, 255, 255, .76); }
.st-foot a:hover { color: #fff; }

.st-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-10);
  padding-block: var(--sp-12) var(--sp-8);
}
.st-foot__brand { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.st-foot__mark {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--c-brand), var(--c-rose));
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  line-height: 1.2;
  text-align: center;
  letter-spacing: .04em;
  overflow: hidden;
}
.st-foot__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: #fff; line-height: 1.3; }
.st-foot__kw { font-size: var(--fs-sm); color: rgba(255, 255, 255, .5); }
.st-foot__desc { line-height: var(--lh-loose); max-width: 38ch; }
.st-foot__addr {
  margin-top: var(--sp-4);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-base);
}
.st-foot__addr svg { width: 16px; height: 16px; flex: none; margin-top: 4px; opacity: .7; }

.st-foot__col-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: #fff;
  margin-bottom: var(--sp-4);
}
.st-foot__links { display: grid; gap: var(--sp-3); }
.st-foot__links--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.st-foot__bottom {
  padding-block: var(--sp-5);
  border-top: var(--bd-1) solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .48);
}
.st-foot__bottom a { color: rgba(255, 255, 255, .48); }

.st-foot__flink {
  padding-block: var(--sp-5);
  border-top: var(--bd-1) solid rgba(255, 255, 255, .08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
}
.st-foot__flink-label { color: rgba(255, 255, 255, .42); flex: none; }

/* 悬浮客服：右下竖排 */
.st-float {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-8);
  z-index: var(--z-float);
  display: grid;
  gap: var(--sp-3);
}
.st-float__panel {
  position: absolute;
  right: calc(100% + var(--sp-3));
  bottom: 0;
  width: 210px;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: var(--bd-1) solid var(--c-border);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: all var(--tr-base);
}
.st-float__item:hover .st-float__panel { opacity: 1; visibility: visible; transform: none; }
.st-float__panel-title {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  margin-bottom: var(--sp-3);
}
.st-float__panel-line {
  font-family: var(--ff-num);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  padding-block: var(--sp-1);
  word-break: break-all;
}

/* ==========================================================================
   18. 响应式
   ========================================================================== */
@media (max-width: 1180px) {
  .st-header__inner { min-height: 72px; }
  .st-brand__name { font-size: var(--fs-xl); }
  .st-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .st-header__inner { flex-wrap: wrap; gap: var(--sp-4); }
  .st-brand__name { font-size: var(--fs-lg); }
  .st-brand__kw { max-width: 100%; }

  .st-nav__toggle { display: block; }
  .st-nav__inner {
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-block: var(--sp-2);
  }
  .st-nav__inner.is-open { display: flex; }
  .st-nav__item {
    height: 44px;
    border-radius: var(--r-sm);
    justify-content: flex-start;
  }
  .st-nav__item::after { display: none; }
  /* 移动端导航在品牌色底上：当前项用半透明白底白字，保持可读 */
  .st-nav__item.is-current { background: rgba(255, 255, 255, .2); color: #fff; }
  .st-nav { overflow: visible; }

  .st-layout,
  .st-layout--full { grid-template-columns: minmax(0, 1fr); }
  .st-side { order: 2; }

  .st-panel { padding: var(--sp-5); }
  .st-panel__head { gap: var(--sp-3); margin-bottom: var(--sp-6); }
  /* 标题字号与 .lin-sec-head__title 完全同步，避免列表页/首页标题大小不一致 */
  .st-panel__title { font-size: var(--fs-2xl); }
  .st-contact-card { grid-template-columns: minmax(0, 1fr); }
  .st-contact-card__main,
  .st-contact-card__side { padding: var(--sp-6); }
  .st-contact-card__phone { font-size: var(--fs-2xl); }

  .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .st-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-8); }
  .st-flow::before { display: none; }

  .st-foot__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}

@media (max-width: 640px) {
  .st-header__inner { min-height: 0; padding-block: var(--sp-4); }
  .st-brand__logo { max-height: 44px; max-width: 160px; }
  .st-brand__mark { width: 44px; height: 44px; font-size: var(--fs-md); }
  .st-header__cta { width: 100%; }
  .st-phone { flex: 1 1 auto; }

  .st-panel { padding: var(--sp-4); border-radius: var(--r-md); }
  .st-panel__title { font-size: var(--fs-xl); }
  .st-article-head__title { font-size: var(--fs-lg); }
  .st-empty { padding: var(--sp-10) var(--sp-4); }
  .st-contact-card__main,
  .st-contact-card__side { padding: var(--sp-5); }
  .st-contact-card__phone { font-size: var(--fs-xl); }
  .st-contact-card__phone svg { width: 20px; height: 20px; }

  .st-stat { padding: var(--sp-5) var(--sp-3); }
  .st-stat__num { font-size: var(--fs-2xl); }

  .st-adv,
  .st-cases { grid-template-columns: minmax(0, 1fr); }

  .st-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-flow__dot { width: 44px; height: 44px; font-size: var(--fs-base); }

  .st-news__item { padding: var(--sp-3); gap: var(--sp-3); }
  .st-news__date { width: 48px; font-size: var(--fs-sm); }

  /* 文章列表（document 列表页）移动端：减少内边距、标题字号回落、摘要两行截断 */
  .st-list { gap: var(--sp-3); }
  .st-list__item { padding: var(--sp-4); }
  .st-list__title { font-size: var(--fs-base); }
  .st-list__desc { margin-top: var(--sp-2); font-size: var(--fs-sm); }
  .st-list__meta { gap: var(--sp-3); font-size: var(--fs-xs); }

  /* 区块标题（goods 等页使用的 lin-sec-head）与 st-panel 保持同一档位 */
  .lin-sec-head { margin-bottom: var(--sp-6); }
  .lin-sec-head__title { font-size: var(--fs-xl); }
  .lin-sec-head__sub { font-size: var(--fs-sm); }

  .st-comment__item { padding: var(--sp-4); gap: var(--sp-3); }

  .st-float { right: var(--sp-3); bottom: var(--sp-5); }
  .st-float__panel { display: none; }

  .st-table th,
  .st-table td { padding: var(--sp-3); }
  .st-table th { width: 84px; }

  .st-foot__links--cols { grid-template-columns: minmax(0, 1fr); }
}

/* 打印：去掉装饰，保证可读 */
@media print {
  .st-nav, .st-float, .st-header__cta { display: none !important; }
  .st-foot { background: #fff; color: #000; }
  body { background: #fff; }
}

/* ==========================================================================
   19. 列表行式布局（服务项目 / 信息列表）
   ========================================================================== */
.st-rows { display: grid; gap: var(--sp-4); }

.st-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border: var(--bd-1) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}
.st-row:hover {
  border-color: rgba(var(--c-brand-rgb), .32);
  box-shadow: var(--sh-sm);
  transform: translateX(2px);
}
.st-row__thumb {
  flex: 0 0 168px;
  width: 168px;
  height: 118px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface-2);
}
.st-row__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-row__body { flex: 1 1 auto; min-width: 0; }
.st-row__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-base);
  color: var(--c-text);
  transition: color var(--tr-fast);
}
.st-row:hover .st-row__title { color: var(--c-brand); }
.st-row__meta {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}
.st-row__tag {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  background: rgba(var(--c-brand-rgb), .09);
  color: var(--c-brand);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.st-row__time { color: var(--c-text-mute); }
.st-row__desc {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text-sub);
}
.st-row__go {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--c-text-mute);
  background: var(--c-surface-2);
  transition: color var(--tr-fast), background var(--tr-fast);
}
.st-row__go svg { width: 16px; height: 16px; }
.st-row:hover .st-row__go { color: #fff; background: var(--c-brand); }

@media (max-width: 640px) {
  .st-row { gap: var(--sp-3); padding: var(--sp-3); }
  .st-row__thumb { flex-basis: 108px; width: 108px; height: 88px; }
  .st-row__title { font-size: var(--fs-base); }
  .st-row__desc { display: none; }
  .st-row__go { display: none; }
}

/* ==========================================================================
   20. 遗留依赖（原 reset.css 迁入，勿删）
   --------------------------------------------------------------------------
   这几条规则来自已删除的 reset.css。它们不是本模板新写的，
   而是被 footer.js / contactus.html 真实依赖，因此单独保留在此处。
   ========================================================================== */

/* 19.1 图片放大层 —— footer.js 的 picAmplification() 与点击关闭逻辑依赖 */
.picApt_box {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  min-width: 1200px;
  background-color: rgba(0, 0, 0, .7);
  z-index: 9999999;
}
.picApt_box_tiem {
  height: 60%;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.picApt_box.hide { display: none; }

/* 19.2 电话打码「点击查看」—— contactus.html 使用
   （.aboutus_content_item 显示 ****，点击后由 footer.js 换成真实号码）
   注意：此处用本模板变量替代原 --private-primary，避免依赖已删除的 reset.css */
span.aboutus_content_item {
  font-weight: normal;
  color: var(--c-text) !important;
}
span.aboutus_content_item:after {
  content: "****";
  font-weight: normal;
  font-size: var(--fs-base);
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
span.aboutus_content_item_xing:after {
  content: '';
  font-weight: normal;
  font-size: var(--fs-base);
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
span.aboutus_content_item_name {
  margin-left: var(--sp-2);
  margin-right: var(--sp-10);
  color: var(--c-brand);
  cursor: pointer;
  font-weight: normal;
}
span.aboutus_content_item_name:hover { color: var(--c-brand-dark); }
.aboutus_content_div { position: relative; float: left; }