/* ========================================
   lowcarbon-clone 全站样式（唯一一份）
   皮肤真相源：styles/spec-led-bulkhead.md（纯黑极简，全直角，无阴影，Outfit）
   来源：C:\Users\PPT\Led bulkhead\css\style.css :root 原样冻结 + banner/ph-badge 增补
   ======================================== */

/* ===== Outfit 自托管（原来从 fonts.googleapis.com 加载，手机端跨域拖慢首屏）=====
   字体本地 css/fonts/（拉丁 + 拉丁扩展两个子集，300-700 可变字体同一文件）；
   路径相对本文件（css/），所以语言页/深层页不用改。font-display:swap 不挡首屏。 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ===== 颜色 ===== */
  --primary:           #000000;
  --secondary:         #989898;
  --accent:            #000000;

  --bg-body:           #FFFFFF;
  --bg-card:           #F2F2F2;
  --text-primary:      #000000;
  --text-secondary:    #555555;
  --text-body:         #333333;
  --link-color:        #b91c1c;

  --nav-bg:            #FFFFFF;
  --nav-link-color:    #000000;
  --nav-shadow:        none;

  --footer-bg:         #000000;
  --text-on-dark:      #FFFFFF;
  --text-on-dark-muted: rgba(255,255,255,0.5);

  --input-bg:          #FFFFFF;
  --input-border:      #000000;
  --input-radius:      0px;
  --input-focus-border:#000000;
  --input-focus-shadow: 0 0 0 1px inset;

  --border-color:      #DEE2E6;
  --border-width:      1px;

  /* ===== 排版 ===== */
  --font-family:       'Outfit', Helvetica, Arial, sans-serif;
  --font-size-hero:    38px;
  --font-size-h2:      30px;
  --font-size-card:    18px;
  --font-size-body:    14px;
  --font-size-small:   12px;

  /* ===== 间距与圆角 ===== */
  --section-padding:   80px 0;
  --container-max:     1300px;
  --container-wide:    1400px;
  --container-narrow:  800px;

  --spacing-sm:        40px 0;
  --spacing-md:        80px 0;
  --spacing-lg:        120px 0;
  --spacing-xl:        160px 0;

  --border-radius:     0px;
  --btn-radius:        0px;
  --card-radius:       0px;
  --pill-radius:       0px;
  --accordion-radius:  0px;
  --nav-radius:        0px;

  /* ===== 高度/尺寸 ===== */
  --hero-min-height:   70vh;
  --banner-height:     360px;
  --card-image-height: 280px;
  --slider-height:     500px;

  /* ===== 投影 ===== */
  --shadow-sm:         none;
  --shadow-card:       none;
  --shadow-lg:         none;
  --shadow-nav:        none;

  /* ===== 渐变/特效 ===== */
  --gradient-primary:  linear-gradient(135deg, #000000, #333333);
  --hero-overlay:      linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2));

  /* ===== 交互与动画 ===== */
  --nav-hover-effect:    underline;
  --nav-hover-color:     #000000;
  --nav-hover-bg:        transparent;
  --nav-hover-underline: true;
  --btn-hover-effect:    outline;
  --card-hover-effect:   lift;
  --transition-duration: 0.45s;
  --transition-timing:   ease-in-out;
  --scroll-reveal:       none;
  --nav-fixed:           true;

  /* ===== Logo 自适应 ===== */
  --logo-dark-display:     none;
  --logo-light-display:    inline-block;

  /* ===== 入场动画 ===== */
  --entrance-duration:     0.6s;
  --entrance-delay-base:   0s;
  --entrance-delay-stagger: 0.15s;
  --entrance-easing:       ease;

  /* ===== 数字滚动 ===== */
  --counter-duration:      2s;
  --counter-easing:        ease-out;

  /* ===== 图片 hover ===== */
  --card-image-hover:        overlay;
  --card-image-overlay-color: rgba(0,0,0,0.6);
  --card-image-overlay-text:  #FFFFFF;

  /* ===== 底部链接 & 社交 ===== */
  --footer-link-hover-color:  #FFFFFF;
  --social-hover-color:       #FFFFFF;
  --social-hover-scale:       1.0;

  /* ===== Tab ===== */
  --tab-hover-bg:             rgba(0,0,0,0.05);
  --tab-active-bg:            #000000;
  --tab-active-color:         #FFFFFF;

  /* ===== Accordion ===== */
  --accordion-hover-bg:       rgba(0,0,0,0.03);

  /* ===== Stats ===== */
  --stats-hover-scale:        1.0;

  /* ===== Slider ===== */
  --slider-pause-on-hover:    true;
}

/* ===== 正文链接（全站统一红、无下划线、斜体；导航/页脚/按钮不受影响） ===== */
main p a:not(.btn), main li a:not(.btn) {
  color: var(--link-color);
  text-decoration: none;
  font-style: italic;
}
main p a:not(.btn):hover, main li a:not(.btn):hover { color: var(--link-color); text-decoration: none; }
/* UI 区域取消斜体：面包屑/目录/卡片/表格/tab 不跟随正文斜体（正文 FAQ 保持斜体） */
main p.small a:not(.btn),
main ul.small a:not(.btn),
main .card a:not(.btn),
main th a:not(.btn),
main .nav a:not(.btn),
main .nav-link:not(.btn),
main .tabs-underline a:not(.btn) { font-style: normal; }

/* ===== Banner 横幅（子页面统一高度，改上面的数字即全站生效） ===== */
.product-hero,
.detail-banner {
  min-height: var(--banner-height);
}

/* ===== 缺图占位标注（默认隐藏，缺图才显示，防闪） ===== */
.ph-badge { display: none !important; background: #000; color: #fff; font-size: 0.78rem; letter-spacing: 0.02em; padding: 8px 12px; }
.ph-badge b { color: #ffd75e; font-weight: 600; }
.ph-badge.ph-visible { display: block !important; }
.ph-badge.ph-hidden { display: none !important; }

/* ===== Related products — carousel（详情页以后用） ===== */
.related-section .carousel-indicators { bottom: -10px; }
.related-section .carousel-indicators button { background-color: var(--text-secondary); }
.related-section .carousel-indicators button.active { background-color: var(--primary); }
.related-section .carousel-control-prev,
.related-section .carousel-control-next { width: 5%; opacity: 0.85; }
.related-section .carousel-inner.pb-5 { padding-bottom: 3rem !important; }
.related-section .card { display: flex; flex-direction: column; }
.related-section .card-body { flex: 1; display: flex; flex-direction: column; }
.related-section .card-title {
  min-height: 2.8em; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.related-section .card-text {
  min-height: 3em;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; flex: 1;
}
.related-section .carousel-item .row { align-items: stretch; }
@media (max-width: 767px) {
  .detail-banner { min-height: 220px !important; }
}

/* ===== 容器宽度覆盖 ===== */
.container-wide {
  max-width: var(--container-wide) !important;
  margin-left: auto;
  margin-right: auto;
}
.container-narrow {
  max-width: var(--container-narrow) !important;
  margin-left: auto;
  margin-right: auto;
}

/* ===== 全局样式 ===== */
html {
  scroll-padding-top: 90px;
}
body {
  font-family: var(--font-family);
  color: var(--text-primary);
  background: var(--bg-body);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ===== 按钮 ===== */
.btn-primary-custom {
  background-color: var(--primary);
  color: #fff;
  border: 2px solid var(--primary);
  border-radius: var(--btn-radius);
  font-family: var(--font-family);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition-duration) var(--transition-timing);
}
.btn-primary-custom:hover {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-custom {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--pill-radius);
  font-family: var(--font-family);
  transition: all var(--transition-duration) var(--transition-timing);
}
.btn-outline-custom:hover {
  background: var(--primary);
  color: #fff;
}
/* BACK TO TOP 按钮：SVG 在左，hover 红线由中向两边延伸 */
.back-to-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 6px;
}
.back-to-top::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #b91c1c;
  transition: width 0.4s ease, left 0.4s ease;
}
.back-to-top:hover { color: var(--text-primary); }
.back-to-top:hover::after { width: 100%; left: 0; }
.back-to-top svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== 分类/型号 Pills（覆盖 Bootstrap 默认蓝） ===== */
.nav-pills .nav-link {
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--pill-radius);
  background: transparent;
  font-weight: 500;
  transition: all var(--transition-duration) var(--transition-timing);
}
.nav-pills .nav-link:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.nav-pills .nav-link.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

/* ===== 高级规格表（黑头条 + 高行 + 横线分隔） ===== */
.spec-table {
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
}
.spec-table > :not(caption) > * > * {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.spec-table tbody tr:last-child > * {
  border-bottom: 0;
}
.spec-table thead th {
  background: var(--primary);
  color: #fff;
  border: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spec-table tbody th {
  width: 42%;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-right: 1px solid var(--border-color);
}
.spec-table tbody td {
  background: var(--bg-body);
  color: var(--text-primary);
  font-weight: 500;
}

/* ===== 下划线 Tab（与导航同款，由 JS/组件之外的 Tab 区共用） ===== */

/* ===== 区块标题 ===== */
.section-title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ===== 产品/户外详情页 H2 按源码首字母大写显示（列表页/他页仍全大写） ===== */
/* 只有同时含参数表和推荐块的详情页命中：列表页缺 pdRecommend，solution/ble 缺 spec-table，retail-lighting 缺 pdRecommend */
body:has(#pdRecommend):has(.spec-table) .section-title {
  text-transform: none;
}

.section-subtitle {
  font-size: var(--font-size-body);
  color: var(--text-secondary);
}

/* ===== 导航链接 ===== */
.nav-link-custom {
  color: var(--nav-link-color);
  border-radius: var(--nav-radius);
  position: relative;
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--font-size-body);
  letter-spacing: 0.08em;
  transition: color var(--transition-duration) var(--transition-timing);
}
.nav-link-custom:hover {
  color: var(--nav-hover-color);
}
.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--nav-hover-color, var(--primary));
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-link-custom:hover::after {
  width: 100%;
  left: 0;
}

/* 德语导航 Contact 按钮：译文 Kontaktieren Sie uns 长一倍，单独收小半档 + 防换行（只命中 html[lang=de]，他语言不动） */
html[lang="de"] #mainNav > a.btn {
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ===== 输入框 ===== */
.input-custom {
  background: var(--input-bg);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  transition: border-color var(--transition-duration) var(--transition-timing),
              box-shadow var(--transition-duration) var(--transition-timing);
}
.input-custom:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
  outline: none;
}

/* ===== 卡片 ===== */
.card-custom {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing);
}
.card-custom:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* ===== 卡片图片 ===== */
.card-img-top {
  border-top-left-radius: var(--card-radius) !important;
  border-top-right-radius: var(--card-radius) !important;
}

/* ===== 卡片图片容器 ===== */
.card-img-wrapper {
  height: var(--card-image-height);
  overflow: hidden;
  position: relative;
}
.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-duration) var(--transition-timing),
              filter var(--transition-duration) var(--transition-timing);
}
/* ===== You May Also Need 配图定高 200px（仅图片区，文字区不含） ===== */
#pdRecommend .card-img-wrapper { height: 200px; }
/* ===== product 列表 5 分组按 4:3 显示（原图即 4:3，不再裁剪；别页不受影响） ===== */
#track .card-img-wrapper,
#linear .card-img-wrapper,
#proof .card-img-wrapper,
#downlight .card-img-wrapper,
#neon .card-img-wrapper {
  height: auto;
  aspect-ratio: 4 / 3;
}
.card-custom:hover .card-img-wrapper img {
  transform: scale(1.08);
}
/* ===== 产品图 hover 底线：底部中间向两边延伸（4px 高） ===== */
.cards-grid-section .card-img-wrapper::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: #b91c1c;
  transition: width 0.4s ease;
  z-index: 2;
  pointer-events: none;
}
.cards-grid-section .card-custom:hover .card-img-wrapper::before {
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .cards-grid-section .card-custom:hover .card-img-wrapper::before { animation: none; opacity: 0; }
}
.card-img-overlay-custom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-card);
  padding: 12px 16px;
}
.card-img-overlay-custom::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: var(--border-color);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-custom:hover .card-img-overlay-custom::after {
  opacity: 1;
}
.card-img-overlay-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 0.3s ease;
}
.card-img-overlay-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
.card-custom:hover .card-img-overlay-title {
  transform: translateY(-6px);
}
.card-custom:hover .card-img-overlay-desc {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}

/* ===== 手风琴 ===== */
.accordion-item-custom {
  border: none;
  border-radius: var(--accordion-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color) !important;
}
.accordion-btn-custom {
  transition: background-color var(--transition-duration) var(--transition-timing),
              padding-left var(--transition-duration) var(--transition-timing);
}
.accordion-btn-custom:hover {
  background-color: var(--accordion-hover-bg);
  padding-left: 1.5rem;
}

.accordion-item,
.accordion-item:first-of-type .accordion-button,
.accordion-button:not(.collapsed) {
  border-radius: var(--accordion-radius) !important;
}
.accordion-item { border: none !important; }
.accordion-button:not(.collapsed) {
  color: #fff !important;
  background-color: var(--primary) !important;
}
.accordion-button:not(.collapsed)::after {
  filter: invert(1);
}
.accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ===== Tab ===== */
.tab-btn-custom {
  border-radius: var(--pill-radius) var(--pill-radius) 0 0;
  padding: 12px 24px;
  margin: 0 4px;
  border: none;
  border-bottom: 1px solid var(--border-color) !important;
  background: transparent;
  font-family: var(--font-family);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-small);
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}
.tab-btn-custom:hover {
  background-color: var(--tab-hover-bg);
}
.tab-btn-custom.active {
  background-color: var(--tab-active-bg) !important;
  color: var(--tab-active-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.nav-tabs .nav-link {
  border-radius: var(--pill-radius) !important;
  color: var(--text-primary) !important;
}
.nav-tabs .nav-link.active {
  background-color: var(--tab-active-bg) !important;
  color: var(--tab-active-color) !important;
}
.nav-tabs .nav-link:focus {
  box-shadow: none !important;
}

/* ===== 全站共享下划线 Tab（首页 / product / outdoor / 产品详情页共用，与导航同款飘入下划线） ===== */
.tabs-underline {
  border-bottom: 1px solid var(--border-color) !important;
}
.tabs-underline .nav-link {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-body);
  padding: 0.75rem 0.25rem !important;
  margin: 0 0 -1px 0 !important;
}
.tabs-underline .nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: width 0.3s ease, left 0.3s ease, background-color 0.3s ease;
}
.tabs-underline .nav-link:hover {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.tabs-underline .nav-link:hover::after {
  width: 100%;
  left: 0;
}
.tabs-underline .nav-link.active {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.tabs-underline .nav-link.active::after {
  width: 100%;
  left: 0;
  background: var(--primary);
}

/* ===== 产品详情交互：主图淡入淡出 + Tab 内容浮入（全站详情页共用，纯 transition） ===== */
.gallery-main {
  transition: opacity 0.35s ease;
}
.gallery-main.gallery-fading {
  opacity: 0;
}
.tab-content > .tab-pane {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.tab-content > .tab-pane:not(.show) {
  opacity: 0;
  transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
  .gallery-main,
  .tab-content > .tab-pane {
    transition: none;
  }
}
/* ===== 详情页副图 hover 微放大（主图 .gallery-main 除外，全站详情页共用） ===== */
.pd-zoom {
  transition: transform 0.35s ease;
}
.pd-zoom:hover {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .pd-zoom {
    transition: none;
  }
}

/* ===== 通用上浮 reveal（二级标题等，滚动进入视口触发，全站共用） ===== */
.js-loaded .reveal-up {
  opacity: 0;
}
.reveal-up.animate {
  animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important;
}

/* ===== 新闻正文主题 v1（new-info 文章页共用：左正文卡片 + 右侧栏 hover 阴影 + Related Product 依次上浮） ===== */
.article-card{background:#fff;border:1px solid var(--border-color);padding:2rem;transition:box-shadow .3s ease}
.article-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.side-card{transition:box-shadow .3s ease}
.side-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
@media(max-width:767px){.article-card{padding:1.25rem}}
.js-loaded .rp-fade .rp-item{opacity:0}
.rp-fade.animate .rp-item{animation:fadeInUp .5s ease forwards}
.rp-fade.animate .rp-item:nth-of-type(1){animation-delay:.05s}
.rp-fade.animate .rp-item:nth-of-type(2){animation-delay:.2s}
.rp-fade.animate .rp-item:nth-of-type(3){animation-delay:.35s}

/* ===== 轮播导航提亮（白色箭头/指示点在亮图上可见，全站共用） ===== */
.carousel-control-prev,
.carousel-control-next {
  opacity: 0.9;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.carousel-indicators [data-bs-target] {
  opacity: 0.9;
}

/* ===== Stats ===== */
.stats-section {
  background: var(--gradient-primary);
  color: var(--text-on-dark);
}
.stats-number {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
}
.stats-suffix {
  font-size: 1.5rem;
  font-weight: 600;
  vertical-align: super;
}
.stats-number-custom {
  transition: transform var(--transition-duration) var(--transition-timing);
  display: inline-block;
}
.stats-number-custom:hover {
  transform: scale(var(--stats-hover-scale));
}

/* ===== 底部链接 ===== */
.footer-link-custom {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: color var(--transition-duration) var(--transition-timing);
}
.footer-link-custom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--footer-link-hover-color);
  transition: width 0.3s ease;
}
.footer-link-custom:hover {
  color: var(--footer-link-hover-color);
}
.footer-link-custom:hover::after {
  width: 100%;
}

/* ===== 社交图标 ===== */
.social-icon-custom {
  color: var(--text-on-dark-muted);
  font-size: 1.25rem;
  display: inline-block;
  transition: color var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing);
}
.social-icon-custom:hover {
  color: var(--social-hover-color);
  transform: scale(var(--social-hover-scale));
}

/* ===== Footer Logo ===== */
.footer-logo {
  width: 200px;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

/* ===== 渐变 section ===== */
.section-gradient {
  background: var(--gradient-primary);
  color: var(--text-on-dark);
}

.section-dark {
  background: var(--footer-bg);
  color: var(--text-on-dark);
}

/* ===== 语言切换器 ===== */
.lang-switcher {
  position: relative;
}
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--nav-link-color, #000);
  border: 1px solid rgba(128,128,128,0.3);
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
}
.lang-switcher-btn:hover {
  border-color: rgba(128,128,128,0.6);
  background: rgba(128,128,128,0.08);
}
.lang-switcher-btn .arrow {
  font-size: 0.65rem;
  transition: transform var(--transition-duration) var(--transition-timing);
}
.lang-switcher.open .lang-switcher-btn .arrow {
  transform: rotate(180deg);
}
.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--nav-bg, #fff);
  border: 1px solid var(--border-color);
  min-width: 320px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.25s ease;
  z-index: 1001;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.lang-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-dropdown a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  font-family: var(--font-family);
  transition: all 0.2s ease;
}
.lang-dropdown a:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.lang-dropdown a.active {
  color: var(--text-primary);
  font-weight: 500;
}
.lang-dropdown a.active::before {
  content: '\2713 ';
  font-size: 0.8rem;
}

/* ===== 导航栏滚动效果 ===== */
.navbar.navbar-scrolled {
  box-shadow: var(--shadow-lg) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px);
}
/* fill 用 backwards 而不用 forwards：forwards 会让结束帧的 transform（含单位矩阵）永久残留，
   li 变成定位基准，Mega 面板 left:0/right:0 就只撑满按钮宽度。backwards 进场视觉相同，播完回归自然样式。 */
.navbar .nav-item {
  opacity: 1;
  animation: navItemFadeIn 0.4s ease backwards;
}
.navbar .nav-item:nth-child(1) { animation-delay: 0.1s; }
.navbar .nav-item:nth-child(2) { animation-delay: 0.15s; }
.navbar .nav-item:nth-child(3) { animation-delay: 0.2s; }
.navbar .nav-item:nth-child(4) { animation-delay: 0.25s; }
.navbar .nav-item:nth-child(5) { animation-delay: 0.3s; }
.navbar .nav-item:nth-child(6) { animation-delay: 0.35s; }
.navbar .nav-item:nth-child(7) { animation-delay: 0.4s; }

/* ===== 导航下拉 & Product Mega 菜单（纯黑极简：全直角，无阴影） ===== */
.dropdown-menu-custom {
  background: var(--nav-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--nav-radius);
  padding: 0.5rem 0;
  min-width: 240px;
}
.dropdown-item-custom {
  display: block;
  padding: 0.6rem 1.2rem;
  color: var(--nav-link-color);
  text-decoration: none;
  font-size: var(--font-size-body);
  font-family: var(--font-family);
  transition: color var(--transition-duration) var(--transition-timing),
              background-color var(--transition-duration) var(--transition-timing);
}
.dropdown-item-custom:hover {
  color: var(--nav-hover-color);
  background: var(--bg-card);
}
/* 父级 li 是 position-static,最近的定位祖先是 nav.fixed-top:面板左右撑满整条导航栏 */
/* !important 用来盖掉 Bootstrap Popper 写进来的行内定位(旧缓存 JS 也会写,照样盖住) */
.navbar .dropdown-menu.mega-menu {
  background: var(--nav-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--nav-radius);
  margin-top: 0;
  padding: 0;
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  transform: none !important;
  width: 100%;
  min-width: 100%;
}
.mega-cell {
  display: block;
  text-decoration: none;
}
.mega-thumb {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: var(--bg-card);
}
.mega-title {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--font-size-body);
  font-family: var(--font-family);
}
.mega-spec {
  display: block;
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-family: var(--font-family);
}
.mega-cell:hover .mega-title {
  color: var(--nav-hover-color);
  text-decoration: underline;
}
.mega-foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: var(--border-width) solid var(--border-color);
  font-size: var(--font-size-body);
}
.mega-sep {
  color: var(--text-secondary);
}
/* 白底面板上的链接用导航配色（footer-link-custom 默认是黑底浅字） */
.mega-foot .footer-link-custom {
  color: var(--nav-link-color);
}
.mega-foot .footer-link-custom:hover {
  color: var(--nav-hover-color);
}
.mega-foot .footer-link-custom::after {
  background: var(--nav-hover-color);
}
/* 桌面端：hover 展开（移动端仍靠点击，与 Bootstrap collapse 共存） */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }
}
/* 二级菜单指示：小圆点替代 Bootstrap 大黑三角，回到行内并与大写字母垂直居中。
   注意 ::after 只有一个，下面的定位/过渡声明是用来中和 .nav-link-custom::after 那条下划线规则的，
   否则圆点会被钉在文字左下角、hover 时左右乱跑。 */
.navbar .nav-link.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  margin-left: 0.5em;
  position: static;
  left: auto;
  bottom: auto;
  transition: none;
  vertical-align: 0.17em;
}
@media (max-width: 991.98px) {
  .navbar .dropdown-menu.mega-menu {
    position: static;
    border: 0;
    border-top: var(--border-width) solid var(--border-color);
    min-width: 0;
  }
  .mega-thumb {
    height: 64px;
  }
}

/* Logo 自适应 */
.navbar-brand .logo-dark-bg { display: var(--logo-dark-display, inline-block); }
.navbar-brand .logo-light-bg { display: var(--logo-light-display, none); }

/* ===== Hero Fullscreen Background ===== */
.hero-fullscreen {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ===== Slider ===== */
.slider-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}
.slider-section .carousel-item {
  height: 100%;
}
.slider-section .carousel-item img {
  transition: transform 0.8s ease;
}
.slider-section .carousel:hover .carousel-item.active img {
  transform: scale(1.02);
}
.slider-section .carousel-control-prev,
.slider-section .carousel-control-next {
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  margin: 0 10px;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.slider-section .carousel-control-prev:hover,
.slider-section .carousel-control-next:hover {
  opacity: 1;
  background: rgba(0,0,0,0.75);
}
.slider-section .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 6px;
  transition: transform 0.3s ease;
  background-color: var(--secondary);
  border: none;
}
.slider-section .carousel-indicators button.active {
  transform: scale(1.3);
  background-color: var(--primary);
}

/* ===== Hero 静态 caption：毛玻璃微光卡（文字只放一份盖住轮播，背景图切换时文字不动） ===== */
.hero-caption-static {
  position: absolute;
  bottom: 15%;
  left: 8%;
  max-width: 640px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%), rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.32);
  z-index: 5;
  text-align: left;
}
.hero-caption-static .hero-eyebrow {
  color: #fff;
  letter-spacing: 0.28em;
  font-weight: 600;
  font-size: var(--font-size-small);
  margin-bottom: 0.75rem;
}
.hero-caption-static h1 {
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .hero-caption-static {
    left: 5%;
    right: 5%;
    bottom: 8%;
    max-width: none;
    padding: 20px;
  }
}

/* ===== 颜色色块 ===== */
.color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.color-swatch:hover {
  transform: scale(1.3);
}

/* ===== 产品规格表 ===== */
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table th,
.spec-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-body);
}
.spec-table th {
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  letter-spacing: 0.05em;
}
.spec-table td {
  color: var(--text-secondary);
}
/* Product Series（bulkhead 原版仅下边框，无外框，左右同底色） */
#products .spec-table { border: none !important; margin-bottom: 0; }
#products .spec-table th,
#products .spec-table td { border-left: none !important; border-right: none !important; border-top: none !important; padding: 10px 16px !important; background: var(--bg-card) !important; }
#products .spec-table tr:last-child th,
#products .spec-table tr:last-child td { border-bottom: 1px solid var(--border-color) !important; }

/* ===== 客户 Logo 墙 ===== */
.clients-section .client-logo {
  filter: grayscale(1);
  opacity: 0.7;
  width: 180px;
  max-height: 120px;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid var(--border-color);
  padding: 12px 16px;
  background: var(--bg-body);
  /* hover 立刻显彩色：颜色切换只给 0.15s，上浮动效保持原速 */
  transition: filter 0.15s ease,
              opacity 0.15s ease,
              transform var(--transition-duration) var(--transition-timing);
}
.clients-section .client-logo:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}
/* logo 横滑条：保留触屏横滑，只藏滚动条，加载时不再闪一下 */
.logo-strip {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.logo-strip::-webkit-scrollbar {
  display: none;
}
/* Strategic Partner 图片框收紧：上下 padding 只留 5px（左右不动，首页 Trusted 不受影响） */
.logo-strip .client-logo {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ===== 画廊 ===== */
.gallery-section .gallery-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-duration) var(--transition-timing);
}
/* Inspiration masonry：照原站 4 列自然高瀑布流 */
.masonry-cols { column-count: 4; column-gap: 10px; }
.masonry-cols .masonry-brick { break-inside: avoid; margin-bottom: 10px; }
.gallery-masonry .gallery-img { height: auto; }
.gallery-section .gallery-item {
  overflow: hidden;
  background: var(--bg-card);
  position: relative;
}
/* hover 红竖线：从上往下延伸（4px 宽，贴最右边，仅灵感页 masonry） */
.gallery-masonry .gallery-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  height: 0;
  background: #b91c1c;
  transition: height 0.4s ease;
  z-index: 2;
  pointer-events: none;
}
.gallery-masonry .gallery-item:hover::after {
  height: 100%;
}
.gallery-section .gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

/* ===== 首页 Customer's Project tabs + Intro1 视频封面：复用 expo 同款 hover 放大 ===== */
#projectTabContent .col-lg-3 {
  overflow: hidden;
  background: var(--bg-card);
}
#projectTabContent img {
  display: block;
  transition: transform var(--transition-duration) var(--transition-timing);
}
#projectTabContent .col-lg-3:hover img {
  transform: scale(1.05);
}
.intro-video-zoom {
  overflow: hidden;
  background: var(--bg-card);
}
.intro-video-zoom img {
  display: block;
  transition: transform var(--transition-duration) var(--transition-timing);
}
.intro-video-zoom:hover img {
  transform: scale(1.05);
}

/* ===== Company：大事记横向时间线（纯 CSS，省纵向空间，移动端横滑） ===== */
.lc-timeline-h { position: relative; display: flex; gap: 16px; padding: 26px 4px 4px 4px; overflow-x: auto; }
.lc-timeline-h::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--border-color); }
.lc-timeline-h-item { position: relative; flex: 1 0 180px; min-width: 180px; padding-top: 16px; }
.lc-timeline-h-item::before { content: ''; position: absolute; left: 0; top: -24px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--bg-card); }
.lc-timeline-year { font-size: var(--font-size-card); letter-spacing: 0.04em; }
.lc-timeline-card { background: var(--bg-body); border-radius: var(--card-radius); padding: 12px 14px; margin-top: 6px; }
/* ===== Company：Milestones 年份卡严格复刻导航（navItemFadeIn + stagger，从左往右依次飘入） ===== */
/* 与导航逐字同构：平时 opacity:1，播时 backwards 套 from 帧，播完回归自然样式，常显不断链。 */
/* 时长/stagger 比导航放慢很多（1.2s + 0.25s 间隔，共约 2.2s，ease-out 更柔）；触发由 main.js 独立观察器控制（完全可见才播）。 */
#Milestones .lc-timeline-h-item { opacity: 1; }
#Milestones.animate .lc-timeline-h-item { animation: navItemFadeIn 1.2s ease-out backwards; }
#Milestones.animate .lc-timeline-h-item:nth-child(1) { animation-delay: 0s; }
#Milestones.animate .lc-timeline-h-item:nth-child(2) { animation-delay: 0.25s; }
#Milestones.animate .lc-timeline-h-item:nth-child(3) { animation-delay: 0.5s; }
#Milestones.animate .lc-timeline-h-item:nth-child(4) { animation-delay: 0.75s; }
#Milestones.animate .lc-timeline-h-item:nth-child(5) { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  #Milestones.animate .lc-timeline-h-item { animation: none; }
}

/* ===== Company：Choose 独立居中图标（无底色，复用 bootstrap-icons） ===== */
.lc-choose-icon { display: inline-flex; font-size: 2.4rem; line-height: 1; color: var(--primary); }

/* ===== Company：二级标题/副标题 fade up（section 进视口触发，复用 fadeInUp） ===== */
.js-loaded .features-section .section-title,
.js-loaded .features-section .section-subtitle { opacity: 0; }
.features-section.animate .section-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.features-section.animate .section-subtitle { animation: fadeInUp 0.5s var(--entrance-easing) 0.15s forwards !important; }

/* ===== Company：Choose 卡片 hover（上浮+图标放大，纯 transition，无边框） ===== */
.lc-choose-card { transition: transform var(--transition-duration) var(--transition-timing); }
.lc-choose-card:hover { transform: translateY(-6px); }
.lc-choose-card .lc-choose-icon { transition: transform var(--transition-duration) var(--transition-timing); }
.lc-choose-card:hover .lc-choose-icon { transform: scale(1.18); }

/* ===== Company：Certification 固定两行（20 张一行 10 个，纯 CSS grid） ===== */
.cert-justified { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.cert-cell { background: var(--bg-card); overflow: hidden; }
.cert-cell img { width: 100%; height: auto; display: block; transition: transform var(--transition-duration) var(--transition-timing); }
.cert-cell:hover img { transform: scale(1.04); }
@media (max-width: 991px) {
  .cert-justified { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 767px) {
  .cert-justified { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Company：联系人小圆头像（只作用于 #Contact，不影响产品卡） ===== */
#Contact .card-img-wrapper { height: auto; padding-top: 20px; }
#Contact .card-img-wrapper img { display: block; width: 110px; height: 110px; border-radius: 50% !important; object-fit: cover; margin: 0 auto; }
#Contact .card-custom:hover .card-img-wrapper img { transform: none; }
/* ===== Company #Contact：白色卡片背景 + 去头像 hover 红线（只作用于本区） ===== */
#Contact .card-custom { background: var(--bg-body); }
#Contact .card-img-wrapper::before,
#Contact .card-custom:hover .card-img-wrapper::before { display: none; }

/* ===== 响应式 ===== */
@media (min-width: 992px) {
  /* 页脚后三列（Quick Links / Categories / Contact Us）大屏下移 50px，与第一列 logo 错开 */
  .footer-col-push { margin-top: 50px; }
}
@media (max-width: 991px) {
  .masonry-cols { column-count: 2; }
  .hero-fullscreen {
    height: auto !important;
    min-height: 70vh;
    padding: 80px 0;
    background-position: center center !important;
  }
  .stats-number {
    font-size: 2.5rem;
  }
}
@media (max-width: 767px) {
  :root {
    --font-size-hero: 28px;
    --font-size-h2: 24px;
    --font-size-card: 16px;
  }
  .stats-number {
    font-size: 2rem;
  }
}

/* ========================================
   组件动画触发规则
   ======================================== */

/* 渐进增强：JS 加载后隐藏元素 */
.js-loaded .hero-fullscreen .hero-text { opacity: 0; }
.hero-fullscreen.animate .hero-text { animation: fadeInUp 0.8s var(--entrance-easing) forwards !important; }

.js-loaded .stats-section .stats-title,
.js-loaded .stats-section .stat-item { opacity: 0; }
.stats-section.animate .stats-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.stats-section.animate .stat-item:nth-child(1) { animation: fadeInUp 0.5s ease 0.1s forwards !important; }
.stats-section.animate .stat-item:nth-child(2) { animation: fadeInUp 0.5s ease 0.2s forwards !important; }
.stats-section.animate .stat-item:nth-child(3) { animation: fadeInUp 0.5s ease 0.3s forwards !important; }
.stats-section.animate .stat-item:nth-child(4) { animation: fadeInUp 0.5s ease 0.4s forwards !important; }

.js-loaded .cards-grid-section .card-animated { opacity: 0; }
.cards-grid-section.animate .card-animated { animation: cardReveal 0.5s var(--entrance-easing) forwards !important; }
/* 逐卡触发：卡自己 .animate 就显现，不等整个超高 section 满足 15%（如 download 页 Product Spec） */
.cards-grid-section .card-animated.animate { animation: cardReveal 0.5s var(--entrance-easing) forwards !important; }
.cards-grid-section.animate .card-animated:nth-child(1) { animation-delay: calc(var(--entrance-delay-base)); }
.cards-grid-section.animate .card-animated:nth-child(2) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger)); }
.cards-grid-section.animate .card-animated:nth-child(3) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 2); }
.cards-grid-section.animate .card-animated:nth-child(4) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 3); }
.cards-grid-section.animate .card-animated:nth-child(5) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 4); }
.cards-grid-section.animate .card-animated:nth-child(6) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 5); }
.cards-grid-section.animate .card-animated:nth-child(7) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 6); }
.cards-grid-section.animate .card-animated:nth-child(8) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 7); }

.js-loaded .slider-section .slider-wrapper { opacity: 0; }
.slider-section.animate .slider-wrapper { animation: scaleIn 0.6s var(--entrance-easing) forwards !important; }

/* HERO crossfade：灭灯→亮灯慢渐变（如灯慢慢点亮），覆盖 Bootstrap 默认 0.6s */
#heroSlider .carousel-item { transition: opacity 2.2s ease-in-out; }

.js-loaded .tabs-section .tabs-title,
.js-loaded .tabs-section .tab-btn-animated,
.js-loaded .tabs-section .tab-content-area { opacity: 0; }
.tabs-section.animate .tabs-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.tabs-section.animate .tab-btn-animated:nth-child(1) { animation: fadeInUp 0.4s ease 0.15s forwards !important; }
.tabs-section.animate .tab-btn-animated:nth-child(2) { animation: fadeInUp 0.4s ease 0.25s forwards !important; }
.tabs-section.animate .tab-btn-animated:nth-child(3) { animation: fadeInUp 0.4s ease 0.35s forwards !important; }
.tabs-section.animate .tab-btn-animated:nth-child(4) { animation: fadeInUp 0.4s ease 0.45s forwards !important; }
.tabs-section.animate .tab-btn-animated:nth-child(5) { animation: fadeInUp 0.4s ease 0.55s forwards !important; }
.tabs-section.animate .tab-btn-animated:nth-child(6) { animation: fadeInUp 0.4s ease 0.65s forwards !important; }
.tabs-section.animate .tab-content-area { animation: slideUpFade 0.5s ease 0.3s forwards !important; }

.js-loaded .accordion-section .accordion-title,
.js-loaded .accordion-section .accordion-item-animated { opacity: 0; }
.accordion-section.animate .accordion-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.accordion-section.animate .accordion-item-animated { animation: slideInFromLeft 0.5s ease forwards !important; }
.accordion-section.animate .accordion-item-animated:nth-child(1) { animation-delay: 0.1s; }
.accordion-section.animate .accordion-item-animated:nth-child(2) { animation-delay: 0.2s; }
.accordion-section.animate .accordion-item-animated:nth-child(3) { animation-delay: 0.3s; }
.accordion-section.animate .accordion-item-animated:nth-child(4) { animation-delay: 0.4s; }
.accordion-section.animate .accordion-item-animated:nth-child(5) { animation-delay: 0.5s; }
.accordion-section.animate .accordion-item-animated:nth-child(6) { animation-delay: 0.6s; }
.accordion-section.animate .accordion-item-animated:nth-child(7) { animation-delay: 0.7s; }
.accordion-section.animate .accordion-item-animated:nth-child(8) { animation-delay: 0.8s; }

.js-loaded .contact-section .contact-title,
.js-loaded .contact-section .contact-field,
.js-loaded .contact-section .contact-submit { opacity: 0; }
.contact-section.animate .contact-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.contact-section.animate .contact-field:nth-child(1) { animation: slideInFromLeft 0.5s ease 0.2s forwards !important; }
.contact-section.animate .contact-field:nth-child(2) { animation: slideInFromLeft 0.5s ease 0.3s forwards !important; }
.contact-section.animate .contact-field:nth-child(3) { animation: slideInFromLeft 0.5s ease 0.4s forwards !important; }
.contact-section.animate .contact-submit { animation: fadeInUp 0.5s ease 0.5s forwards !important; }

.js-loaded .footer-section .footer-col { opacity: 0; }
.footer-section.animate .footer-col:nth-child(1) { animation: fadeInUp 0.5s ease 0s forwards !important; }
.footer-section.animate .footer-col:nth-child(2) { animation: fadeInUp 0.5s ease 0.1s forwards !important; }
.footer-section.animate .footer-col:nth-child(3) { animation: fadeInUp 0.5s ease 0.2s forwards !important; }
.footer-section.animate .footer-col:nth-child(4) { animation: fadeInUp 0.5s ease 0.3s forwards !important; }

.js-loaded .footer-section .social-icon-custom { opacity: 0; }
.footer-section.animate .social-icon-custom:nth-child(1) { animation: fadeInUp 0.3s ease 0.5s forwards !important; }
.footer-section.animate .social-icon-custom:nth-child(2) { animation: fadeInUp 0.3s ease 0.6s forwards !important; }
.footer-section.animate .social-icon-custom:nth-child(3) { animation: fadeInUp 0.3s ease 0.7s forwards !important; }

/* ===== Installation Guide ===== */
.js-loaded .installation-section .section-title,
.js-loaded .installation-section .section-subtitle,
.js-loaded .installation-section .installation-img-wrapper { opacity: 0; }
.installation-section.animate .section-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.installation-section.animate .section-subtitle { animation: fadeInUp 0.5s var(--entrance-easing) 0.15s forwards !important; }
.installation-section.animate .installation-img-wrapper { animation: scaleIn 0.6s var(--entrance-easing) 0.3s forwards !important; }
.installation-img-wrapper {
  overflow: hidden;
  border-radius: var(--card-radius);
  transition: box-shadow 0.4s ease;
}
.installation-img-wrapper:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.installation-img {
  display: block;
}

/* ===== Features Grid ===== */
.features-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.features-section .row.g-3 {
  flex-grow: 1;
  align-content: flex-start;
}
.features-section .feature-item {
  background: var(--bg-card);
  padding: 20px 14px 14px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing);
}
.features-section .feature-item:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.features-section .feature-item:active {
  transform: translateY(0) scale(0.98);
}
.features-section .feature-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  margin: 0 auto 8px;
  transition: background var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing);
}
.features-section .feature-item.active .feature-icon,
.features-section .feature-item:hover .feature-icon {
  background: #333;
  transform: scale(0.92);
}
.features-section .feature-icon svg {
  display: block;
  transition: transform 0.2s ease;
}
.features-section .feature-item:hover .feature-icon svg {
  transform: scale(1.2);
}
.features-section .feature-toggle {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  color: var(--text-secondary);
  opacity: 0.4;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.features-section .feature-item.active .feature-toggle,
.features-section .feature-item:hover .feature-toggle {
  transform: rotate(45deg);
  opacity: 0.8;
}
.features-section .feature-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: margin-bottom var(--transition-duration) var(--transition-timing);
}
.features-section .feature-item.active .feature-title,
.features-section .feature-item:hover .feature-title {
  margin-bottom: 6px;
}
.features-section .feature-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.35s ease, left 0.35s ease;
}
.features-section .feature-item.active::after,
.features-section .feature-item:hover::after {
  width: 50%;
  left: 25%;
}
.features-section .feature-desc {
  color: var(--text-secondary);
  font-size: 0.78rem;
  margin-bottom: 0;
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}
.features-section .feature-item.active .feature-desc,
.features-section .feature-item:hover .feature-desc {
  max-height: 120px;
  opacity: 1;
  margin-top: 6px;
}

.js-loaded .features-section .features-title,
.js-loaded .features-section .feature-item { opacity: 0; }
.features-section.animate .features-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.features-section.animate .feature-item { animation: fadeInUp 0.5s var(--entrance-easing) forwards !important; }
.features-section.animate .feature-item:nth-child(1) { animation-delay: calc(var(--entrance-delay-base)); }
.features-section.animate .feature-item:nth-child(2) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger)); }
.features-section.animate .feature-item:nth-child(3) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 2); }
.features-section.animate .feature-item:nth-child(4) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 3); }
.features-section.animate .feature-item:nth-child(5) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 4); }
.features-section.animate .feature-item:nth-child(6) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 5); }
.features-section.animate .feature-item:nth-child(7) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 6); }
.features-section.animate .feature-item:nth-child(8) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 7); }

/* ===== Clients / Gallery ===== */
.js-loaded .clients-section .clients-title,
.js-loaded .clients-section .client-item { opacity: 0; }
.clients-section.animate .clients-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.clients-section.animate .client-item { animation: fadeInUp 0.5s var(--entrance-easing) forwards !important; }
.clients-section.animate .client-item:nth-child(1) { animation-delay: calc(var(--entrance-delay-base)); }
.clients-section.animate .client-item:nth-child(2) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger)); }
.clients-section.animate .client-item:nth-child(3) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 2); }
.clients-section.animate .client-item:nth-child(4) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 3); }
.clients-section.animate .client-item:nth-child(5) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 4); }
.clients-section.animate .client-item:nth-child(6) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 5); }

.js-loaded .gallery-section .gallery-title,
.js-loaded .gallery-section .gallery-item { opacity: 0; }
.gallery-section.animate .gallery-title { animation: fadeInUp var(--entrance-duration) var(--entrance-easing) forwards !important; }
.gallery-section.animate .gallery-item { animation: cardReveal 0.5s var(--entrance-easing) forwards !important; }
.gallery-section.animate .gallery-item:nth-child(1) { animation-delay: calc(var(--entrance-delay-base)); }
.gallery-section.animate .gallery-item:nth-child(2) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger)); }
.gallery-section.animate .gallery-item:nth-child(3) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 2); }
.gallery-section.animate .gallery-item:nth-child(4) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 3); }
.gallery-section.animate .gallery-item:nth-child(5) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 4); }
.gallery-section.animate .gallery-item:nth-child(6) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 5); }
.gallery-section.animate .gallery-item:nth-child(7) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 6); }
.gallery-section.animate .gallery-item:nth-child(8) { animation-delay: calc(var(--entrance-delay-base) + var(--entrance-delay-stagger) * 7); }

/* ========================================
   @keyframes — 全局定义（反向校验：index.html 里每个 animation 名这里都有）
   ======================================== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes navItemFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  /* 结束帧必须用 none 而不是 translateY(0)：后者虽视觉相同，却会让 li 永久成为定位基准，
     导致 Mega 面板 left:0/right:0 只撑满按钮宽度而不撑满导航栏 */
  to { opacity: 1; transform: none; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes heroBgZoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* ===== FORT-A 增补：共享样式缺失段（取自 high bay 原站，路径已本地化） ===== */
.section-title-wrap { border-left: 4px solid var(--primary); padding-left: 12px; margin-bottom: 0; }
.section-desc { color: var(--text-body); line-height: 1.7; }
.spec-table .tg-col { background: var(--primary); color: #fff; }
.spec-table .tg-col strong { color: #fff; }

/* masonry / glass options / applications */
#applications .masonry-grid { column-count: 3; column-gap: 20px; }
#applications .masonry-grid > .card-animated { break-inside: avoid; margin-bottom: 20px; display: block; width: 100%; }
#applications .card-custom, #applications .card-img-wrapper, #applications .card-img-top { border-radius: 0 !important; overflow: hidden; }
@media (max-width: 991px) { #applications .masonry-grid { column-count: 2; } }
@media (max-width: 767px) { #applications .masonry-grid { column-count: 1; } }

/* specs tabs */
.specs-tab-nav { border-bottom: 2px solid var(--border-color); gap: 4px; }
.specs-tab-nav .nav-link { padding: 10px 28px; font-weight: 600; font-size: 0.95rem; color: var(--text-secondary); border: none; border-bottom: 2px solid transparent; border-radius: 0 !important; background: transparent; margin-bottom: -2px; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
.specs-tab-nav .nav-link:hover { color: var(--primary); background: rgba(0,0,0,0.04); transform: translateY(-1px); }
.specs-tab-nav .nav-link.active { background: var(--primary); color: #fff; border-bottom-color: var(--primary); }
.specs-tab-content { padding-top: 8px; }

/* DALI tabs */
#daliTab { border-bottom: 1px solid var(--border-color); margin-bottom: 0; padding: 0; flex-wrap: wrap; gap: 0; }
#daliTab .nav-link { padding: 12px 20px; font-weight: 500; color: var(--text-secondary); border: none; border-bottom: 2px solid transparent; background: transparent; white-space: nowrap; position: relative; transition: color 0.3s ease; }
#daliTab .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease, left 0.3s ease; }
#daliTab .nav-link:hover { color: var(--primary); }
#daliTab .nav-link:hover::after { width: 100%; left: 0; }
#daliTab .nav-link.active { background: transparent; color: var(--primary); border-bottom: 2px solid transparent; }
#daliTab .nav-link.active::after { width: 100%; left: 0; }
#daliTabContent .tab-pane { transition: opacity 0.28s ease, transform 0.28s ease; }
#daliTabContent .tab-pane:not(.show) { opacity: 0; transform: translateY(6px); }
#daliTabContent .tab-pane.show { opacity: 1; transform: none; }
#daliTabContent img { border-radius: 0 !important; transition: transform 0.3s ease; }
#daliTabContent img:hover { transform: scale(1.05); }
#daliTabContent .feature-desc.fade-up { opacity: 0; transform: translateY(12px); transition: opacity 0.28s ease, transform 0.28s ease; }
#daliTabContent .feature-desc.fade-up.animate { opacity: 1; transform: translateY(0); }
#daliTab .nav-item { opacity: 0; }
#daliTab.tab-enter .nav-item { animation: navItemFadeIn 0.4s ease forwards; }
#daliTab.tab-enter .nav-item:nth-child(1) { animation-delay: 0.1s; }
#daliTab.tab-enter .nav-item:nth-child(2) { animation-delay: 0.15s; }
#daliTab.tab-enter .nav-item:nth-child(3) { animation-delay: 0.2s; }
#daliTab.tab-enter .nav-item:nth-child(4) { animation-delay: 0.25s; }
#daliTab.tab-enter .nav-item:nth-child(5) { animation-delay: 0.3s; }

/* features-list */
.features-list { padding-left: 0; padding-right: 0; }
.features-list .container-wide { max-width: var(--container-max) !important; padding-left: 0; padding-right: 0; }

/* 5-col */
@media (min-width: 992px) { .col-lg-2-4 { flex: 0 0 20%; max-width: 20%; } }

/* CTA banner */
.cta-banner { background: var(--gradient-primary); }
.cta-banner .cta-title, .cta-banner .cta-subtitle, .cta-banner .cta-buttons { opacity: 1; }

/* ===== FORT-A 高度对齐修复 ===== */
#glass-advantage .row.g-5 { align-items: stretch; }
#glass-advantage .features-section { height: 100%; }
#glass-advantage .col-lg-6.d-flex { height: auto; }
#glass-advantage .flex-grow-1 { display: flex; flex-direction: column; }
#glass-advantage .spec-table { height: 100%; margin-bottom: 0; border: none; border-collapse: collapse; }
#glass-advantage .spec-table th,
#glass-advantage .spec-table td { padding: 10px 16px; font-size: var(--font-size-body); vertical-align: middle; border-bottom: 1px solid var(--border-color); }
#glass-advantage .spec-table th { font-weight: 600; text-transform: uppercase; font-size: var(--font-size-small); letter-spacing: 0.05em; color: var(--text-primary); }
#glass-advantage .spec-table td { color: var(--text-body); }
#glass-advantage .spec-table .tg-col { background: var(--primary) !important; color: #fff !important; }
#glass-advantage .spec-table .tg-col strong { color: #fff !important; }

/* DALI 小图白底修复：原站小图为不透明白底，贴合 #FAFAFA 背景；本地 --bg-card 为 #F2F2F2 更深，故白底显眼。统一改回近白底并去边框阴影 */
#dali-dimming { background: #FAFAFA !important; }
#dali-dimming .tab-pane img[style*="width: 200px"] { background: #FAFAFA; display: block; }
/* ===== Download：左图右文清单（对标大厂 Download 中心） ===== */
.dl-spec-list { display: flex; flex-direction: column; gap: 14px; }
.dl-spec-item {
  display: flex;
  gap: 20px;
  align-items: stretch;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  padding: 14px;
  transition: box-shadow 0.45s ease;
}
.dl-spec-item:hover { border-color: var(--border-color); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.dl-spec-thumb {
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 4 / 3;
  height: auto;
  background: var(--bg-card);
  overflow: hidden;
  position: relative;
}
.dl-spec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-spec-body { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 2px 0; }
.dl-spec-title { font-size: var(--font-size-card); font-weight: 600; margin: 0 0 2px; letter-spacing: 0.02em; line-height: 1.3; }
.dl-spec-title small { font-weight: 400; color: var(--text-secondary); font-size: 0.85em; letter-spacing: 0.04em; }
.dl-spec-desc { font-size: var(--font-size-body); color: var(--text-secondary); margin: 0 0 8px; line-height: 1.5; }
.dl-spec-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--font-size-small); color: var(--text-secondary); margin-bottom: 12px; }
.dl-spec-meta span { display: inline-flex; align-items: center; gap: 5px; }
.dl-spec-meta i { font-size: 13px; opacity: 0.9; }
.dl-spec-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border-color); padding: 2px 8px; }
.dl-spec-actions { margin-top: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dl-spec-actions .btn { font-size: 12px; padding: 7px 16px; }
.dl-spec-actions .link-view {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-primary); text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid var(--border-color); transition: border-color 0.3s ease, color 0.3s ease;
}
.dl-spec-actions .link-view:hover { border-bottom-color: var(--text-primary); color: var(--text-primary); }
@media (max-width: 767px) {
  .dl-spec-item { flex-direction: column; gap: 14px; }
  .dl-spec-thumb { width: 100%; flex-basis: auto; height: auto; aspect-ratio: 4 / 3; }
}

#daliTabContent img { background: transparent; }