:root {
  --brand-600: #24824e;
  --brand-500: #34a164;
  --brand-400: #5cbc85;
}

* {
  scroll-behavior: smooth;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f2faf5;
}
::-webkit-scrollbar-thumb {
  background: #93d7ae;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-500);
}

/* 导航链接 */
.nav-link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1b5235;
  transition: color 0.3s;
  padding: 0.5rem 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--brand-500);
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
  color: var(--brand-600);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active {
  color: var(--brand-600);
}

/* 移动端菜单链接 */
.mobile-link {
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1b5235;
  padding: 0.7rem 0.75rem;
  border-radius: 0.6rem;
  transition: color 0.3s, background-color 0.3s, padding-left 0.3s;
}
.mobile-link:hover,
.mobile-link:active {
  color: var(--brand-600);
  background: #f2faf5;
  padding-left: 1rem;
}

.mobileMenuOpen #mobileMenu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/*
  修复：header 在 .scrolled 状态下带 backdrop-filter，会为其内部元素创建
  包含块（containing block），使内部 position:fixed 的 #mobileMenu 不再相对
  视口定位，而被困在半透明的 header 内 —— 表现为菜单面板"变透明"。
  菜单打开时移除 header 的 backdrop-filter 并改为不透明背景即可还原。
*/
.mobileMenuOpen #siteHeader {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
}
.mobileMenuOpen #mobileMenu > div {
  background-color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mobileMenuOpen #menuBtn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobileMenuOpen #menuBtn span:nth-child(2) {
  opacity: 0;
}
.mobileMenuOpen #menuBtn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 头部滚动状态 */
#siteHeader {
  background: transparent;
}
#siteHeader.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(36, 130, 78, 0.08), 0 8px 32px rgba(11, 38, 24, 0.04);
}
#siteHeader.scrolled nav > div {
  height: 3.75rem;
}

/* 页脚链接 */
.footer-link {
  font-size: 0.875rem;
  color: rgba(224, 244, 232, 0.5);
  transition: color 0.3s, padding-left 0.3s;
}
.footer-link:hover {
  color: #fff;
  padding-left: 0.35rem;
}

/* 图片缩放 */
.img-zoom {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.group:hover .img-zoom,
.img-zoom:hover {
  transform: scale(1.07);
}

/* 滚动揭示动画 */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 卡片入场 */
.card-enter {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-enter.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 浮动动画 */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(6deg); }
}
.animate-float {
  animation: float 7s ease-in-out infinite;
}
.animate-float-slow {
  animation: float 11s ease-in-out infinite;
}

@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.5; }
}
.animate-bounce-slow {
  animation: bounceSlow 2.4s ease-in-out infinite;
}

/* 英雄数字动画 */
@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 英雄幻灯片 */
.hero-slide {
  /* --s 由 JS 按全局进度赋值，所有层共享同一条时间轴 */
  transform: scale(var(--s, 1.06)) translateX(var(--x, 0%));
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.8s linear;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
/* 桌面端使用视差固定背景，移动端禁用（iOS 不支持且会抖动） */
@media (min-width: 1024px) {
  .hero-slide {
    background-attachment: fixed;
  }
}
.hero-slide.is-active {
  opacity: 1;
}
/* 退场：保持退场瞬间的缩放值，只淡出，画面定格在最后一帧 */
.hero-slide.is-leaving {
  opacity: 0;
}
.hero-slide.is-incoming {
  opacity: 0;
}

/* 时间线项 */
.tl-item {
  position: relative;
}
.tl-dot {
  position: absolute;
  left: 1rem;
  top: 0.35rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 9999px;
  background: #fff;
  border: 3px solid var(--brand-500);
  z-index: 10;
  transition: transform 0.4s, box-shadow 0.4s;
}
.tl-item:hover .tl-dot {
  transform: scale(1.35);
  box-shadow: 0 0 0 6px rgba(52, 161, 100, 0.18);
}
@media (min-width: 1024px) {
  .tl-dot {
    left: 50%;
    transform: translateX(-50%);
  }
  .tl-item:hover .tl-dot {
    transform: translateX(-50%) scale(1.35);
  }
}

/* 时间线卡片翻转感 */
.tl-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s, border-color 0.5s;
}
.tl-card:hover {
  transform: translateY(-6px);
  border-color: rgba(92, 188, 133, 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* 产品/业务卡片 */
.biz-card {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s;
}
/* 桌面端：卡片内图片与文字均为 absolute 铺满，需显式高度撑开卡片，
   否则父级高度为 0，整栏会塌陷（此前误删，现恢复） */
@media (min-width: 1024px) {
  .biz-card {
    height: 340px;
  }
}
.biz-card:hover {
  transform: translateY(-10px);
}
.biz-card:hover .biz-img {
  transform: scale(1.12);
}
.biz-img {
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.biz-card .biz-overlay {
  background: linear-gradient(to top, rgba(11, 38, 24, 0.92) 0%, rgba(11, 38, 24, 0.25) 55%, transparent 100%);
  transition: opacity 0.5s;
}
.biz-card .biz-points {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s, margin-top 0.45s;
}
.biz-card:hover .biz-points {
  max-height: 120px;
  opacity: 1;
  margin-top: 0.75rem;
}

/* 产品卡片 */
.prod-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s;
}
.prod-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(36, 130, 78, 0.14);
}
.prod-card:hover .prod-img {
  transform: scale(1.1);
}
.prod-img {
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.prod-badge {
  transition: transform 0.4s, opacity 0.4s;
}

/* 图库 */
.gal-item {
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s;
}
.gal-item:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 38px rgba(11, 38, 24, 0.2);
  z-index: 10;
}
.gal-item:hover .gal-img {
  transform: scale(1.15);
}
.gal-img {
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.gal-item:hover .gal-cap {
  opacity: 1;
  transform: translateY(0);
}
.gal-cap {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s, transform 0.45s;
}

/* 筛选按钮 */
.filter-btn {
  padding: 0.6rem 1.4rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #c2e9d1;
  color: #24824e;
  background: #fff;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.filter-btn:hover {
  border-color: var(--brand-500);
  background: #f2faf5;
  transform: translateY(-2px);
}
.filter-btn.active {
  background: var(--brand-600);
  color: #fff;
  border-color: var(--brand-600);
  box-shadow: 0 8px 20px rgba(36, 130, 78, 0.25);
}

/* 产品搜索框 */
.prod-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 20rem;
}
.prod-search-icon {
  position: absolute;
  left: 0.9rem;
  width: 1rem;
  height: 1rem;
  color: rgba(61, 50, 38, 0.4);
  pointer-events: none;
}
.prod-search input {
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 2.5rem;
  border-radius: 9999px;
  border: 1px solid #c2e9d1;
  background: #fff;
  font-size: 0.875rem;
  color: #3d3226;
  outline: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
  appearance: none;
}
.prod-search input::placeholder {
  color: rgba(61, 50, 38, 0.38);
}
.prod-search input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(36, 130, 78, 0.12);
}
.prod-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.prod-search-clear {
  position: absolute;
  right: 0.7rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  border: none;
  background: rgba(61, 50, 38, 0.08);
  color: rgba(61, 50, 38, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, color .25s ease;
}
.prod-search-clear.show {
  display: flex;
}
.prod-search-clear:hover {
  background: rgba(61, 50, 38, 0.16);
  color: #3d3226;
}

/* 灯箱 */
#lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
#lightbox.open #lbImg {
  transform: scale(1);
}

/* 产品详情弹窗 */
#prodModal.open {
  opacity: 1;
  pointer-events: auto;
}
#prodModal.open #prodModalPanel {
  transform: scale(1);
}
#prodModalPanel {
  scrollbar-width: thin;
}

/* 英雄统计项 */
.stat-item {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid rgba(92, 188, 133, 0.4);
  transition: border-color 0.4s;
}
.stat-item:hover {
  border-left-color: var(--brand-500);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .card-enter {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* hero 正文：白色柔和阴影，保证在绿色背景图上清晰可读 */
.hero-lead {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 255, 255, 0.75),
    0 0 26px rgba(255, 255, 255, 0.55);
}

/* ============ 移动端排版优化 ============ */
@media (max-width: 1023px) {
  /* 统一收窄左右安全边距，避免内容贴边 */
  .max-w-\[1400px\] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* 章节纵向留白收紧，减少滚动疲劳 */
  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  @media (min-width: 400px) {
    section {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
  }

  /* 品牌卡片图：4/5 竖图在手机上过高，已由 JS 设 16/10 */
  #brandLines .relative.min-h-\[240px\] {
    min-height: 240px !important;
  }
  #brandLines .p-4.xs\:p-5 {
    padding: 1rem !important;
  }
  #brandLines .p-5.xs\:p-6 {
    padding: 1.25rem !important;
  }
  /* 品牌亮点三栏在窄屏改单列 */
  #brandLines .grid-cols-1.sm\:grid-cols-3 {
    gap: 0.75rem;
  }

  /* 产品卡片：描述取消固定最小高度 */
  .prod-card .p-4 {
    padding: 1rem !important;
  }

  /* 品牌理念区浮动徽章：避免溢出屏幕 */
  #about .absolute.-bottom-6 {
    bottom: -1rem !important;
    right: 0.5rem !important;
  }
  #about .absolute.-top-4 {
    top: -0.75rem !important;
    left: -0.25rem !important;
  }
  /* 理念区图片 4/5 过高 */
  #about .aspect-\[4\/5\] {
    aspect-ratio: 4 / 3 !important;
  }

  /* 时间线：左侧留白与圆点对齐收紧 */
  .tl-item .pl-9 {
    padding-left: 2.25rem !important;
  }
  .tl-dot {
    left: 0.25rem !important;
    width: 0.7rem !important;
    height: 0.7rem !important;
  }
  .tl-card {
    max-width: 100% !important;
  }

  /* 图库：两列时行高加大，避免图片过扁 */
  #galleryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 移动端无 hover，标题常驻 */
  .gal-cap {
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 0.625rem !important;
  }
  .gal-cap .text-sm {
    font-size: 0.8125rem !important;
  }

  /* 移动端菜单：字号与间距优化 */
  .mobile-link {
    font-size: 1rem;
    padding: 0.7rem 0.75rem;
  }

  /* 英雄区统计：统一定为两行（2×2），任何屏幕宽度都不单行 */
  #heroStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem;
  }
  #heroStats .text-3xl {
    font-size: 1.75rem !important;
  }
  .stat-item {
    padding-left: 0.75rem;
  }

  /* 统计区统一两行（2×2），按屏幕宽度微调间距与字号 */
  /* 640–767px：收紧行距让区块更紧凑 */
  @media (min-width: 640px) and (max-width: 767px) {
    #heroStats {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 1.125rem 1rem;
    }
  }
  /* 481–639px：2×2 更紧凑 */
  @media (min-width: 481px) and (max-width: 639px) {
    #heroStats {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 1rem 0.875rem;
    }
    #heroStats .text-3xl {
      font-size: 1.625rem !important;
    }
  }
  /* ≤480px 且屏幕较高：2×2 保持可读 */
  @media (max-width: 480px) {
    #heroStats {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.875rem 0.75rem;
    }
  }
  /* 矮屏手机（高度不足）：仍为两行，仅压缩字号与间距 */
  @media (max-width: 767px) and (max-height: 700px) {
    #heroStats {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.625rem 0.75rem;
    }
  }

  /* hero 首屏：手机端内容整体靠上，减少顶部留白（电脑端不变） */
  #home {
    align-items: flex-start !important;
    /* 用 dvh 排除移动端浏览器工具栏，避免 100vh 虚高 */
    min-height: 100dvh;
  }
  #home > .relative.max-w-\[1400px\] {
    padding-top: 4.25rem !important;
    padding-bottom: 2rem !important;
    /* box-sizing 保证 padding 计入高度，flex 让统计区可吸收剩余空间 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  /* 内部文案块保持自然高度 */
  #home > .relative.max-w-\[1400px\] > .max-w-3xl {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  /* 统计区自动吸收剩余空间，底部留白适度，避免被挤出首屏 */
  #heroStats {
    margin-top: auto !important;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
  }
  /* 首屏各元素间距收紧，让内容更聚拢靠上 */
  .hero-title {
    margin-bottom: 0.875rem !important;
  }
  .hero-lead {
    margin-bottom: 1.25rem !important;
  }
  /* 按钮组与统计区间距同步收紧 */
  #home .flex.flex-col.xs\:flex-row {
    margin-bottom: 1.75rem !important;
  }
  /* 矮屏手机：整体再压缩，确保统计区不超出第一屏 */
  @media (max-width: 767px) and (max-height: 720px) {
    #home > .relative.max-w-\[1400px\] {
      padding-top: 3.5rem !important;
      padding-bottom: 1.25rem !important;
    }
    .hero-title {
      font-size: 2.25rem !important;
      margin-bottom: 0.625rem !important;
    }
    .hero-lead {
      font-size: 0.75rem !important;
      line-height: 1.5 !important;
      margin-bottom: 0.875rem !important;
    }
    /* 按钮改横向并排，显著减少纵向占用 */
    #home .flex.flex-col.xs\:flex-row {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 0.625rem !important;
      margin-bottom: 1rem !important;
    }
    #home .flex.flex-col.xs\:flex-row a {
      flex: 1;
      padding-left: 0.875rem !important;
      padding-right: 0.875rem !important;
      padding-top: 0.625rem !important;
      padding-bottom: 0.625rem !important;
      font-size: 0.875rem !important;
    }
    #heroStats {
      gap: 0.625rem 0.75rem;
      padding-top: 0.875rem;
      padding-bottom: 0.75rem;
    }
    #heroStats .text-3xl {
      font-size: 1.25rem !important;
    }
    #heroStats .text-lg {
      font-size: 0.875rem !important;
    }
    .stat-item div:last-child {
      font-size: 0.6875rem !important;
      margin-top: 0.125rem !important;
    }
  }

  /* 统计区间距（margin 由上方 margin-top:auto 控制靠底） */
  #heroStats {
    gap: 1rem;
  }
  /* 统计项上方分隔留白收紧 */
  .stat-item {
    padding-left: 0.75rem;
  }

  /* 联系卡片内边距 */
  #contact .p-8 {
    padding: 1.5rem !important;
  }

  /* 回到顶部按钮：避开底部安全区，缩小 */
  #backTop {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  /* 灯箱关闭按钮放大便于点击 */
  #lbClose {
    width: 2.75rem;
    height: 2.75rem;
    top: 1rem;
    right: 1rem;
  }
  #lbImg {
    max-height: 70vh;
  }

  /* 页脚：两列间距收紧 */
  footer .gap-10 {
    gap: 2rem;
  }
}

/* 超小屏（≤400px）进一步收敛 */
@media (max-width: 400px) {
  .max-w-\[1400px\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #heroStats {
    gap: 1rem;
  }
  #heroStats .text-3xl {
    font-size: 1.5rem !important;
  }
  #heroStats .text-lg {
    font-size: 1rem !important;
  }
  .mobile-link {
    font-size: 0.95rem;
    padding: 0.65rem 0.7rem;
  }
  /* 标题在超小屏进一步收敛 */
  .hero-title {
    font-size: 2.75rem !important;
  }
  /* 超小屏首屏再上移，保证内容在第一屏可见 */
  #home > .relative.max-w-\[1400px\] {
    padding-top: 4.75rem !important;
    padding-bottom: 2.5rem !important;
  }
  .hero-lead {
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
  }
  /* 品牌亮点图标行改单列更清晰 */
  #brandLines .grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
}

/* ============ 手机端：理念四卡 2×2 小方块（仅按宽度判断，电脑端不受影响） ============ */
@media (max-width: 767px) {
  /* 业务卡片：移动端小方块拼两列 */
  .biz-card .p-3 {
    padding: 0.875rem !important;
  }
  .biz-card h3 {
    font-size: 0.95rem !important;
    margin-bottom: 0.25rem !important;
  }
  .biz-card .biz-tags {
    flex-wrap: wrap;
    overflow: visible;
  }
  .biz-card .biz-points {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 0.5rem;
  }

  .philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
  .philosophy-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0;
    padding: 0.875rem 0.9rem 1rem !important;
    border-radius: 0.9rem;
    max-width: 240px;
    width: 100%;
    margin: 0 auto;
  }
  .philosophy-card .ph-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem !important;
    flex-shrink: 0;
    border-radius: 0.6rem;
  }
  .philosophy-card .ph-icon svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  .philosophy-card h3 {
    font-size: 0.875rem;
    margin-bottom: 0.25rem !important;
    line-height: 1.3;
  }
  .philosophy-card p {
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .philosophy-card h3,
  .philosophy-card p {
    min-width: 0;
  }
}

/* ============ 手机端正文统一字号（与 hero 导语 0.8125rem 一致） ============ */
@media (max-width: 1023px) {
  /* 站点正文：与 .hero-lead 基准字号保持一致，标题一律不改动 */
  #about p,
  #brandLines p,
  #business p,
  #products p,
  #gallery p,
  #journey p,
  #contact p,
  #contact li,
  .philosophy-card p:not(.ph-desc),
  .biz-card p:not(.biz-desc),
  .biz-points li,
  .prod-card p,
  .tl-card p,
  .gal-cap p,
  footer p,
  footer a,
  footer li,
  footer span {
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
  }
  /* 列表项/小标题类文字同尺寸，但保留原有的字重与颜色 */
  #brandLines .text-sm,
  #business .text-sm,
  #products .text-sm,
  #gallery .text-sm,
  .biz-points .text-sm {
    font-size: 0.8125rem !important;
  }
}

/* 矮屏手机：正文随 hero 导语同步收敛到 0.75rem，避免溢出 */
@media (max-width: 767px) and (max-height: 720px) {
  #about p,
  #brandLines p,
  #business p,
  #products p,
  #gallery p,
  #journey p,
  #contact p,
  #contact li,
  .philosophy-card p:not(.ph-desc),
  .biz-card p:not(.biz-desc),
  .biz-points li,
  .prod-card p,
  .tl-card p,
  .gal-cap p,
  footer p,
  footer a,
  footer li,
    footer span {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
  }
}

/* ============ 电脑端（≥1024px）：品牌理念区整体收缩，保证一屏可见 ============ */
@media (min-width: 1024px) {
  /* 理念区纵向留白收紧 */
  #about {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* 左右两栏间距与图片比例，避免图片过高 */
  #about .grid.lg\:grid-cols-2 {
    gap: 2.5rem !important;
  }
  #about .aspect-\[4\/5\] {
    aspect-ratio: 4 / 3.4 !important;
  }

  /* 标题与正文：适度收字号与行高 */
  #about h2 {
    font-size: 2.25rem !important;
    line-height: 1.2;
    margin-bottom: 0.75rem !important;
  }
  #about p {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  #about .philosophy-grid {
    gap: 0.75rem !important;
  }

  /* 四大理念小卡：整体缩为紧凑方块 */
  #about .philosophy-card {
    padding: 0.875rem 1rem !important;
    border-radius: 0.85rem;
  }
  #about .philosophy-card .ph-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.6rem;
    margin-bottom: 0.5rem !important;
  }
  #about .philosophy-card .ph-icon svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }
  #about .philosophy-card h3 {
    font-size: 0.9375rem !important;
    line-height: 1.3;
    margin-bottom: 0.25rem !important;
  }
  #about .philosophy-card p {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
  }
}

/* 矮屏电脑（高度≤800px）：进一步压缩理念区，确保一屏容纳 */
@media (min-width: 1024px) and (max-height: 800px) {
  #about {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  #about p {
    font-size: 0.875rem !important;
  }
  #about h2 {
    font-size: 2rem !important;
  }
  #about .philosophy-card {
    padding: 0.75rem 0.875rem !important;
  }
}

/* ============ 电脑端（≥1024px）：品牌主线卡片降低高度，贴合文字内容 ============ */
@media (min-width: 1024px) {
  /* 图片区：取消原 440px 固定高度，改为较小下限，避免塌陷又不撑高整卡 */
  #brandLines .bl-media {
    min-height: 240px !important;
    max-height: 300px;
  }
  /* 右侧内容区：大幅收紧内边距，整卡高度由内容决定 */
  #brandLines .bl-body {
    padding: 1rem 1.5rem !important;
    justify-content: center;
  }
  /* 定位标签 */
  #brandLines .bl-body .rounded-full.mb-5 {
    margin-bottom: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  /* 正文（原 mb-7 = 1.75rem） */
  #brandLines .bl-body > p {
    margin-bottom: 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
  }
  /* 三个卖点小卡（原 gap-4 / mb-7） */
  #brandLines .bl-body .grid.grid-cols-1 {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  #brandLines .bl-body .grid.grid-cols-1 > div {
    padding: 0.5rem 0.75rem !important;
  }
  #brandLines .bl-body .grid.grid-cols-1 > div > div:first-child {
    margin-bottom: 0.125rem !important;
  }
  #brandLines .bl-body .grid.grid-cols-1 > div > div:last-child {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }
  /* 底部关键词标签 */
  #brandLines .bl-body .flex.flex-wrap {
    gap: 0.375rem !important;
  }
  #brandLines .bl-body .flex.flex-wrap span {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.75rem !important;
  }
  /* 两张卡片之间的纵向间距 */
  #brandLines {
    gap: 1.25rem !important;
  }
  /* 信息框内大标题：原 lg:text-4xl(2.25rem) 是最大高度来源，压到 1.5rem */
  #brandLines .bl-badge .font-serif {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.25rem !important;
  }
  /* 图片区左下角信息框：紧贴内容，去掉多余留白 */
  #brandLines .bl-badge {
    padding: 0.875rem 1.125rem !important;
    border-radius: 0.85rem;
  }
  #brandLines .bl-badge .text-\[10px\] {
    margin-bottom: 0.25rem !important;
    line-height: 1.2 !important;
  }
  #brandLines .bl-badge .font-serif {
    line-height: 1.15 !important;
    margin-bottom: 0.25rem !important;
  }
  #brandLines .bl-badge .text-sm {
    line-height: 1.35 !important;
  }
  /* 外层定位容器收紧，让框更贴近图片底部 */
  #brandLines .absolute.bottom-0.left-0.right-0 {
    padding: 1.25rem !important;
  }
}

/* ============ 产品轮播：固定两行，左右滑动 ============ */
.prod-slider {
  position: relative;
}
/* 轨道：固定两行，按列填充，横向滚动；列宽保证每屏恰好 col 列 */
.prod-track {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 0.75rem) / 2);
  gap: 0.75rem;
  overflow-x: auto;
  /* 明确禁止纵向滚动：只写 overflow-x:auto 时，另一轴的 visible 会被计算成 auto，
     再加上卡片入场动画 translateY(28px) 会撑出纵向溢出，导致手机端能上下拖动 */
  overflow-y: hidden;
  /* 给入场动画的 28px 位移留出空间，避免卡片被裁切（同时替代原来的 pb-2） */
  padding-bottom: 1.75rem;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
@media (min-width: 400px) {
  .prod-track {
    grid-auto-columns: calc((100% - 1rem) / 2);
    gap: 1rem;
  }
}
@media (min-width: 1024px) {
  .prod-track {
    grid-auto-columns: calc((100% - 3.5rem) / 3);
    gap: 1.75rem;
  }
}
@media (min-width: 1280px) {
  .prod-track {
    grid-auto-columns: calc((100% - 5.25rem) / 4);
  }
}

.prod-track::-webkit-scrollbar {
  display: none;
}
.prod-track > .prod-card {
  scroll-snap-align: start;
}
.prod-track.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
/* 左右箭头 */
.prod-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  color: #3d3226;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: opacity .25s ease, background .25s ease, transform .25s ease;
}
.prod-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.prod-arrow-prev { left: -0.75rem; }
.prod-arrow-next { right: -0.75rem; }
.prod-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}
/* 分页圆点 */
.prod-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: rgba(61, 50, 38, 0.22);
  transition: width .3s ease, background .3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.prod-dot.active {
  width: 1.1rem;
  background: #8a6a3d;
}
/* 手机端滑动提示：默认隐藏，仅 ≤767px 显示 */
.prod-swipe-hint {
  display: none;
}

@media (max-width: 767px) {
  .prod-arrow { display: none; }

  /* 手机端滑动提示：左右滑动查看所有产品 */
  .prod-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: #24824e;
    opacity: 0.85;
  }
  .prod-swipe-hint .hint-arrow {
    display: inline-block;
    animation: swipeMove 1.6s ease-in-out infinite;
  }
  @keyframes swipeMove {
    0%, 100% { transform: translateX(-2px); opacity: 0.5; }
    50% { transform: translateX(2px); opacity: 1; }
  }
}

/* ============ 电脑端（≥1024px）：hero 主标题适度缩小 ============ */
@media (min-width: 1024px) {
  .hero-title {
    font-size: 4.75rem !important;
    line-height: 1.06 !important;
  }
}
@media (min-width: 1280px) {
  .hero-title {
    font-size: 6rem !important;
  }
}

/* ============ 电脑端（≥1024px）：改为固定高度容器纵向滑动 ============ */
@media (min-width: 1024px) {
  /* 轨道改为纵向流动的多列网格，容器限高后内部上下滚动 */
  .prod-track {
    display: grid;
    grid-template-rows: none;
    grid-auto-flow: row;
    /* 电脑端统一 4 列，卡片整体缩小 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 1.25rem;
    /* 限高：约三行卡片，露出滚动条暗示可上下滑 */
    max-height: 36rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    /* 右侧留出滚动条空间，避免卡片贴边；纵向可滚动，无需手机端那 28px 底部留白 */
    padding-right: 0.5rem;
    padding-bottom: 0;
  }
  /* 纵向滚动条：品牌绿半透明，弱化存在感但仍提示可滑动 */
  .prod-track {
    scrollbar-width: thin;
    scrollbar-color: rgba(52, 161, 100, 0.3) rgba(36, 130, 78, 0.05);
  }
  .prod-track::-webkit-scrollbar {
    display: block;
    width: 8px;
  }
  .prod-track::-webkit-scrollbar-track {
    background: rgba(36, 130, 78, 0.05);
    border-radius: 9999px;
    /* 轨道内嵌，视觉上像一条滑条槽 */
    margin: 0.35rem 0;
  }
  .prod-track::-webkit-scrollbar-thumb {
    background: rgba(52, 161, 100, 0.34);
    border-radius: 9999px;
    /* 内缩形成滑条与槽的间隙 */
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 2.5rem;
    transition: background .25s ease;
  }
  .prod-track::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 161, 100, 0.55);
    background-clip: padding-box;
  }
  .prod-track::-webkit-scrollbar-thumb:active {
    background: rgba(36, 130, 78, 0.72);
    background-clip: padding-box;
  }
  .prod-track > .prod-card {
    scroll-snap-align: start;
  }
  /* 电脑端不再需要左右箭头与分页圆点 */
  .prod-arrow {
    display: none !important;
  }
  #prodDots {
    display: none !important;
  }
  /* 内容可滚动时提示：鼠标为纵向拖拽手势 */
  .prod-track.is-dragging {
    scroll-snap-type: none;
    cursor: ns-resize;
  }
  /* 右侧滑条槽：极淡的品牌绿半透明轨道 */
  .prod-slider::after {
    content: '';
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    right: 0;
    width: 8px;
    border-radius: 9999px;
    background: rgba(36, 130, 78, 0.05);
    pointer-events: none;
    z-index: 3;
  }
  /* 电脑端卡片整体收敛：圆角、内边距、图片、文字、标签同步缩小 */
  .prod-card {
    border-radius: 0.85rem !important;
  }
  .prod-card .p-4 {
    padding: 0.8rem !important;
  }
  /* 图片区由 4/3 压到 5/4，降低卡片高度 */
  .prod-card .aspect-\[4\/3\] {
    aspect-ratio: 5 / 4 !important;
  }
  .prod-card h3 {
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.3rem !important;
  }
  /* 描述限制 2 行，避免 4 列下卡片高低不齐 */
  .prod-card p {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.5rem !important;
    min-height: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-card .flex.flex-wrap {
    gap: 0.25rem !important;
  }
  .prod-card .flex.flex-wrap span {
    font-size: 0.625rem !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 0.3rem !important;
  }
  /* 4 列下取消悬停上移，避免与纵向滚动叠加抖动 */
  .prod-card:hover {
    transform: none !important;
  }

  .prod-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity .3s ease;
  }
  /* 底部渐隐：避开右侧滑条槽宽度，避免叠色 */
  .prod-slider > .prod-fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0.625rem;
    height: 2.5rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity .3s ease;
  }
  .prod-slider.can-scroll-up::before,
  .prod-slider.can-scroll-down > .prod-fade-bottom {
    opacity: 1;
  }
}

/* ============ 手机端（<1024px）：产品卡片整体缩小，一行两列 ============ */
@media (max-width: 1023px) {
  /* 卡片圆角与内边距同步收敛 */
  .prod-card {
    border-radius: 0.85rem !important;
  }
  .prod-card .p-4 {
    padding: 0.7rem !important;
  }
  /* 图片区改为 1/1 方形，配合两列更协调，同时压低卡片高度 */
  .prod-card .aspect-\[4\/3\] {
    aspect-ratio: 1 / 1 !important;
  }
  /* 标题：原 text-base/text-lg 收敛 */
  .prod-card h3 {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.3rem !important;
  }
  /* 描述：两列布局下限制为 2 行，避免卡片被文字撑高 */
  .prod-card p {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.45rem !important;
    min-height: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 标签：缩小字号与间距，一行两列放得下 */
  .prod-card .flex.flex-wrap {
    gap: 0.25rem !important;
  }
  .prod-card .flex.flex-wrap span {
    font-size: 0.625rem !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 0.3rem !important;
  }
  /* 两列下取消悬停上移，避免误触与抖动 */
  .prod-card:hover {
    transform: none !important;
  }
}