/* ===================================================================

   斯普乐供应链 (SPL) - 现代科技组件系统 (Modern Enterprise Components)

   消除生硬AI感 · 丰富层次微渐变 · 极致细节排版

=================================================================== */



/* ----------------------------------------------------

   1. 顶部 Header (高透悬浮 + 滚动白底吸顶)

---------------------------------------------------- */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 82px;

  z-index: 1000;

  background: rgba(255, 255, 255, 0.94);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  transition: all 0.35s ease;

}



.site-header.transparent-header {

  background: transparent;

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}



.site-header.transparent-header .site-brand-sungrow .brand-cn,

.site-header.transparent-header .site-logo .logo-main,

.site-header.transparent-header .nav-link {

  color: #FFFFFF;

}



.site-header.transparent-header.scrolled {

  background: rgba(255, 255, 255, 0.96);

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

}



.site-header.transparent-header.scrolled .site-brand-sungrow .brand-cn {

  color: #606060;

  text-shadow: none;

}



.site-header.transparent-header.scrolled .site-logo .logo-main,

.site-header.transparent-header.scrolled .nav-link {

  color: var(--sungrow-dark);

}



.header-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

}



/* ----------------------------------------------------

   阳光电源同款工业字标 Brand Logo (双层纯字标 Wordmark)

   去AI廉价感 · 完美去除小方块 · 国际大厂严谨工业美学

---------------------------------------------------- */

.site-brand-sungrow {

  display: inline-flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  text-decoration: none !important;

  user-select: none !important;

  transition: transform 0.25s ease, opacity 0.25s ease !important;

}



.site-brand-sungrow:hover {

  opacity: 0.92;

  transform: translateY(-1px);

}



.site-brand-sungrow .brand-cn {

  display: block !important;

  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", sans-serif !important;

  font-size: 10.5px !important;

  font-weight: 500 !important;

  letter-spacing: 0.29em !important;

  text-indent: 0.29em !important;

  color: #606060 !important;

  line-height: 1.1 !important;

  margin-bottom: 4px !important;

  white-space: nowrap !important;

  transition: color 0.3s ease !important;

}



.site-brand-sungrow .brand-en {

  display: block !important;

  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

  font-size: 28px !important;

  font-weight: 900 !important;

  color: var(--sungrow-orange, #FF7900) !important;

  line-height: 0.95 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

  white-space: nowrap !important;

  transition: all 0.3s ease !important;

}



/* 首页透明 Header 未滚动状态下的中文配色 */

.site-header.transparent-header:not(.scrolled) .site-brand-sungrow .brand-cn {

  color: rgba(255, 255, 255, 0.94) !important;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;

}



/* 首页透明 Header 滚动后变白底，中文配色恢复为深雅灰 */

.site-header.transparent-header.scrolled .site-brand-sungrow .brand-cn {

  color: #606060 !important;

  text-shadow: none !important;

}



/* 底部深色 Footer 中的 Logo 中文配色 */

.sungrow-footer .site-brand-sungrow .brand-cn {

  color: #C9CDD4 !important;

}



.sungrow-footer .site-brand-sungrow:hover .brand-en {

  filter: drop-shadow(0 2px 10px rgba(255, 121, 0, 0.45));

}



/* 兼容性保留旧版 class，防止偶发引用报错 */

.site-logo {

  display: flex;

  align-items: center;

  gap: 12px;

}



/* 导航链接 (8大板块完美适配单行居中) */

.nav-menu,

.site-nav {

  display: flex;

  align-items: center;

  gap: 26px;

}



@media (max-width: 1240px) and (min-width: 1025px) {

  .nav-menu,

  .site-nav {

    gap: 16px !important;

  }

  .nav-link {

    font-size: 13.5px !important;

  }

}



.nav-link {

  font-size: 14.5px;

  font-weight: 500;

  color: var(--sungrow-dark);

  padding: 10px 0;

  position: relative;

  transition: color 0.25s ease;

  white-space: nowrap;

}



.nav-link:hover,

.nav-link.active {

  color: var(--sungrow-orange) !important;

}



.nav-link::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 2.5px;

  background: var(--grad-orange-primary);

  border-radius: 2px;

  transition: width 0.25s ease;

}



.nav-link:hover::after,

.nav-link.active::after {

  width: 100%;

}



/* 下拉菜单与富信息卡片面板 (Mega Dropdown System) */

.mobile-dropdown-btn {

  display: none;

}

.mobile-dropdown-row {

  display: contents;

}



.nav-item-dropdown {

  position: relative;

  display: inline-flex;

  align-items: center;

}



.nav-item-dropdown > .nav-link {

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



.nav-item-dropdown .nav-arrow {

  font-size: 14px;

  line-height: 1;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;

  opacity: 0.8;

}



.nav-item-dropdown:hover .nav-arrow {

  transform: rotate(180deg);

  color: var(--sungrow-orange) !important;

  opacity: 1;

}



/* 悬停安全桥接区，防止从nav-link滑向面板时抖动断开 */

.mega-dropdown::before {

  content: '';

  position: absolute;

  top: -16px;

  left: 0;

  width: 100%;

  height: 20px;

}



.mega-dropdown {

  position: absolute;

  top: calc(100% + 14px);

  left: 50%;

  transform: translateX(-50%) translateY(12px);

  width: 390px;

  background: rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(24px);

  -webkit-backdrop-filter: blur(24px);

  border: 1px solid rgba(226, 232, 240, 0.95);

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.18), 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),

              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),

              visibility 0.28s;

  z-index: 1050;

}



.nav-item-dropdown:hover .mega-dropdown {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateX(-50%) translateY(0);

}



/* 富菜单顶部说明条 */

.dropdown-header-tag {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 2px 8px 12px 8px;

  border-bottom: 1px solid #F1F5F9;

  margin-bottom: 8px;

}



.dropdown-header-tag .tag-en {

  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.1em;

  color: var(--sungrow-orange);

  text-transform: uppercase;

}



.dropdown-header-tag .tag-cn {

  font-size: 11.5px;

  font-weight: 500;

  color: #94A3B8;

}



/* 富菜单卡片列表 */

.dropdown-list {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.dropdown-item-card {

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 9px 12px;

  border-radius: 10px;

  text-decoration: none;

  background: transparent;

  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

}



.dropdown-item-card:hover {

  background: linear-gradient(135deg, rgba(255, 121, 0, 0.08) 0%, rgba(255, 121, 0, 0.02) 100%);

  transform: translateX(4px);

}



.dropdown-item-card .card-icon {

  width: 36px;

  height: 36px;

  border-radius: 9px;

  background: #F8FAFC;

  border: 1px solid #E2E8F0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  color: #475569;

  transition: all 0.25s ease;

  flex-shrink: 0;

}



.dropdown-item-card:hover .card-icon {

  background: var(--sungrow-orange);

  color: #FFFFFF;

  border-color: var(--sungrow-orange);

  box-shadow: 0 4px 12px rgba(255, 121, 0, 0.32);

  transform: scale(1.06);

}



.dropdown-item-card .card-text {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.dropdown-item-card .card-title {

  font-size: 14px;

  font-weight: 600;

  color: #0F172A;

  line-height: 1.35;

  transition: color 0.2s ease;

  letter-spacing: -0.01em;

}



.dropdown-item-card:hover .card-title {

  color: var(--sungrow-orange);

}



.dropdown-item-card .card-desc {

  font-size: 11.5px;

  color: #64748B;

  line-height: 1.4;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  font-weight: 400;

  transition: color 0.2s ease;

}



.dropdown-item-card:hover .card-desc {

  color: #334155;

}



.dropdown-item-card .card-arrow {

  font-size: 15px;

  color: #CBD5E1;

  transition: all 0.22s ease;

  flex-shrink: 0;

  transform: translateX(0);

}



.dropdown-item-card:hover .card-arrow {

  color: var(--sungrow-orange);

  transform: translateX(3px);

}



/* 底部功能条 (Footer Bar) */

.dropdown-footer-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 10px;

  padding: 11px 12px 2px 12px;

  border-top: 1px solid #F1F5F9;

  font-size: 12px;

}



.dropdown-footer-bar .footer-tip {

  color: #64748B;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-weight: 500;

  font-size: 11.5px;

}



.dropdown-footer-bar .footer-tip i {

  color: var(--sungrow-orange);

  font-size: 14px;

}



.dropdown-footer-bar .footer-action {

  color: var(--sungrow-orange);

  font-weight: 600;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 3px;

  font-size: 12px;

  transition: gap 0.2s ease, opacity 0.2s ease;

}



.dropdown-footer-bar .footer-action:hover {

  opacity: 0.88;

  gap: 6px;

}



/* 兼容原有 .dropdown-link 极简项的质感提升 */

.dropdown-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 14px;

  font-size: 13.5px;

  font-weight: 500;

  color: #1E293B;

  border-radius: 8px;

  transition: all 0.2s ease;

}



.dropdown-link:hover {

  background: rgba(255, 121, 0, 0.08);

  color: var(--sungrow-orange);

  transform: translateX(4px);

}



.header-right {

  display: flex;

  align-items: center;

  gap: 20px;

}



.mobile-menu-btn {

  display: none;

  background: transparent;

  border: none;

  cursor: pointer;

  color: inherit;

  padding: 6px;

}



/* 移动端全屏模糊遮罩层 */

.mobile-menu-backdrop {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(10, 15, 25, 0.65);

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);

  z-index: 998;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.35s ease, visibility 0.35s ease;

  pointer-events: none;

}



.mobile-menu-backdrop.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



@media (max-width: 1024px) {

  .site-header {

    height: 72px;

  }

  .header-container {

    padding-left: 20px;

    padding-right: 20px;

  }

  .site-brand-sungrow .brand-cn {

    font-size: 9.5px !important;

  }

  .site-brand-sungrow .brand-en {

    font-size: 22px !important;

  }

  .header-right {

    gap: 12px;

  }

  .header-right .btn-sungrow {

    padding: 8px 16px !important;

    font-size: 13px !important;

  }

  

  .mobile-menu-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 8px;

    color: var(--sungrow-dark);

    font-size: 24px;

    background: transparent;

    transition: all 0.25s ease;

    z-index: 1001;

  }



  .site-header.transparent-header:not(.scrolled) .mobile-menu-btn {

    color: #FFFFFF;

  }

  .site-header.transparent-header.scrolled .mobile-menu-btn {

    color: var(--sungrow-dark);

  }



  /* 移动端优雅侧滑抽屉 */

  .nav-menu,

  .site-nav {

    position: fixed;

    top: 0;

    right: -100%;

    width: 310px;

    max-width: 85vw;

    height: 100vh;

    height: 100dvh;

    background: #FFFFFF;

    flex-direction: column;

    align-items: stretch;

    padding: 85px 22px 36px 22px;

    gap: 6px;

    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.16);

    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 999;

    overflow-y: auto;

    border-left: 1px solid rgba(0, 0, 0, 0.08);

  }



  .nav-menu.active,

  .nav-menu.open,

  .site-nav.active,

  .site-nav.open {

    right: 0;

  }



  .nav-menu .nav-link,

  .site-nav .nav-link {

    font-size: 15.5px;

    font-weight: 600;

    color: var(--sungrow-dark) !important;

    padding: 12px 14px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-shadow: none !important;

    transition: background 0.2s ease, color 0.2s ease;

  }



  .nav-menu .nav-link:hover,

  .nav-menu .nav-link.active,

  .site-nav .nav-link:hover,

  .site-nav .nav-link.active {

    background: rgba(255, 121, 0, 0.08);

    color: var(--sungrow-orange) !important;

  }



  .nav-menu .nav-link::after,

  .site-nav .nav-link::after {

    display: none !important;

  }



  /* 移动端二级子菜单手风琴排版系统 */

  .nav-item-dropdown,

  .nav-item-has-dropdown {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    align-items: stretch !important;

    margin-bottom: 4px !important;

  }



  .mobile-dropdown-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    position: relative !important;

  }



  .mobile-dropdown-row .nav-link {

    flex: 1 !important;

    margin-right: 4px !important;

  }



  .mobile-dropdown-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 38px !important;

    height: 38px !important;

    border-radius: 8px !important;

    border: 1px solid rgba(226, 232, 240, 0.9) !important;

    background: #F8FAFC !important;

    color: #64748B !important;

    font-size: 20px !important;

    cursor: pointer !important;

    flex-shrink: 0 !important;

    padding: 0 !important;

    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),

                background 0.22s ease,

                color 0.22s ease,

                border-color 0.22s ease !important;

    user-select: none !important;

    -webkit-tap-highlight-color: transparent !important;

  }



  .mobile-dropdown-btn:active {

    background: #FFF7ED !important;

    transform: scale(0.95) !important;

  }



  .nav-item-dropdown.dropdown-open .mobile-dropdown-btn,

  .nav-item-has-dropdown.dropdown-open .mobile-dropdown-btn {

    background: rgba(255, 121, 0, 0.12) !important;

    color: var(--sungrow-orange) !important;

    border-color: rgba(255, 121, 0, 0.35) !important;

    transform: rotate(180deg) !important;

  }



  /* 彻底消除旧版的 ::after 伪元素与原箭头重叠 */

  .nav-item-dropdown > .nav-link::after,

  .nav-item-has-dropdown > .nav-link::after,

  .mobile-dropdown-row > .nav-link::after {

    display: none !important;

    content: none !important;

  }

  .nav-item-dropdown .nav-arrow {

    display: none !important;

  }



  /* 展开的二级内容面板 (流式垂直卡片) */

  .mega-dropdown {

    position: static !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    box-shadow: none !important;

    border: 1px solid rgba(226, 232, 240, 0.85) !important;

    background: #F8FAFC !important;

    border-radius: 12px !important;

    padding: 8px !important;

    margin: 6px 0 8px 0 !important;

    display: none !important;

    flex-direction: column !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

  }



  .nav-item-dropdown.dropdown-open > .mega-dropdown,

  .nav-item-has-dropdown.dropdown-open > .mega-dropdown {

    display: flex !important;

    animation: mobileDropdownSlide 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;

  }



  @keyframes mobileDropdownSlide {

    from {

      opacity: 0;

      transform: translateY(-8px);

    }

    to {

      opacity: 1;

      transform: translateY(0);

    }

  }



  .dropdown-list {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    gap: 6px !important;

    box-sizing: border-box !important;

  }



  .dropdown-item-card {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    width: 100% !important;

    padding: 9px 11px !important;

    background: #FFFFFF !important;

    border: 1px solid #EEF2F6 !important;

    border-radius: 8px !important;

    gap: 10px !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    transition: all 0.2s ease !important;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;

  }



  .dropdown-item-card:hover,

  .dropdown-item-card:active {

    background: #FFFBF5 !important;

    border-color: rgba(255, 121, 0, 0.35) !important;

    transform: none !important;

  }



  .dropdown-item-card .card-icon {

    width: 32px !important;

    height: 32px !important;

    border-radius: 7px !important;

    background: #FFF7ED !important;

    color: var(--sungrow-orange) !important;

    border: 1px solid rgba(255, 121, 0, 0.18) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 16px !important;

    flex-shrink: 0 !important;

  }



  .dropdown-item-card .card-text {

    flex: 1 !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 2px !important;

    overflow: hidden !important;

  }



  .dropdown-item-card .card-title {

    font-size: 13.5px !important;

    font-weight: 600 !important;

    color: #1E293B !important;

    line-height: 1.35 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }



  .dropdown-item-card .card-desc {

    display: block !important;

    font-size: 11px !important;

    color: #64748B !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }



  .dropdown-item-card .card-arrow {

    display: flex !important;

    font-size: 14px !important;

    color: #94A3B8 !important;

    flex-shrink: 0 !important;

    margin-left: auto !important;

  }



  .dropdown-header-tag {

    display: none !important;

  }



  .dropdown-footer-bar {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-top: 6px !important;

    padding-top: 6px !important;

    border-top: 1px dashed #E2E8F0 !important;

  }



  .dropdown-footer-bar .footer-tip {

    display: none !important;

  }



  .dropdown-footer-bar .footer-action {

    width: 100% !important;

    text-align: center !important;

    justify-content: center !important;

    padding: 7px 10px !important;

    background: rgba(255, 121, 0, 0.08) !important;

    color: var(--sungrow-orange) !important;

    border-radius: 6px !important;

    font-size: 12.5px !important;

    font-weight: 600 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    text-decoration: none !important;

  }

}



@media (max-width: 480px) {

  .header-right .btn-sungrow {

    display: none; /* 超窄屏隐藏Header内按钮，避免与汉堡按钮拥挤 */

  }

}



/* ----------------------------------------------------

   2. 全屏 Hero Banner (大图画幅 + 优雅排版)

---------------------------------------------------- */

.sungrow-hero-slider {

  position: relative;

  width: 100%;

  height: 92vh;

  min-height: 680px;

  background: #0A0A0A;

  overflow: hidden;

  contain: paint;

  isolation: isolate;

  transform: translateZ(0);

  backface-visibility: hidden;

}



.sungrow-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s ease;

  display: flex;

  align-items: center;

  transform: translateZ(0);

  backface-visibility: hidden;

  pointer-events: none;

}



.sungrow-slide.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



.sungrow-slide-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  transform: scale(1.04) translateZ(0);

  transition: transform 6s cubic-bezier(0.1, 0.9, 0.2, 1);

  will-change: transform;

  backface-visibility: hidden;

}



.sungrow-slide.active .sungrow-slide-bg {

  transform: scale(1) translateZ(0);

}



/* 全站 Banner 统一页面视角全屏规范 (100vw x 100vh 电影级无声视频容器) */

.sungrow-hero-slider,

.cinema-hero-banner {

  position: relative;

  width: 100%;

  height: 100vh;

  height: 100dvh;

  min-height: 680px;

  background: #080C14;

  overflow: hidden;

  display: flex;

  align-items: center;

  contain: paint;

  isolation: isolate;

  transform: translateZ(0);

  backface-visibility: hidden;

  box-sizing: border-box;

}



/* 原生无声背景视频层 (硬件加速无损全景覆盖) */

.cinema-video-wrap {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  overflow: hidden;

  pointer-events: none;

}



.cinema-video-wrap::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: radial-gradient(circle at 75% 35%, rgba(0, 180, 255, 0.08) 0%, rgba(10, 15, 26, 0.25) 50%, rgba(6, 10, 18, 0.7) 100%);

  pointer-events: none;

}



.tech-live-dot {

  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #00d2be;

  box-shadow: 0 0 10px #00d2be, 0 0 20px rgba(0, 210, 190, 0.6);

  animation: pulseTechDot 2s infinite ease-in-out;

  margin-right: 6px;

  vertical-align: middle;

}



@keyframes pulseTechDot {

  0%, 100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 6px #00d2be; }

  50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 14px #00d2be, 0 0 24px rgba(0, 210, 190, 0.8); }

}



.cinema-video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1.01) translateZ(0);

  filter: brightness(0.96) contrast(1.02);

}



/* 带有视频层时隐藏同级静态背景图，确保实拍视频完全无阻挡呈现 */

.sungrow-slide:has(.cinema-video-wrap) .sungrow-slide-bg,

.sungrow-slide:has(.cinema-video-wrap) .cinema-poster-bg {

  display: none !important;

}



/* 电影级慢速航拍推镜运镜海报 (无MP4视频时的视频级动态质感) */

.cinema-poster-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  z-index: 1;

  transform: scale(1.08) translateZ(0);

  animation: kenBurnsCinema 16s infinite alternate ease-in-out;

  will-change: transform;

}



@keyframes kenBurnsCinema {

  0% {

    transform: scale(1.0) translate3d(0, 0, 0);

  }

  50% {

    transform: scale(1.08) translate3d(-1%, -1.5%, 0);

  }

  100% {

    transform: scale(1.05) translate3d(1%, 1%, 0);

  }

}



/* 电影级双层光学渐变遮罩 (彻底杜绝文字与背景冲突，大厂高级质感) */

.cinema-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  background: radial-gradient(circle at 75% 45%, rgba(10, 15, 26, 0.25) 0%, rgba(8, 12, 20, 0.75) 75%, rgba(8, 12, 20, 0.95) 100%),

              linear-gradient(90deg, rgba(8, 12, 20, 0.88) 0%, rgba(8, 12, 20, 0.60) 45%, rgba(8, 12, 20, 0.25) 100%);

  pointer-events: none;

}



/* 全景内容排版区 */

.cinema-content {

  position: relative;

  z-index: 10;

  max-width: 860px;

  color: #FFFFFF;

  padding-top: 48px;

}



.cinema-title {

  font-size: 54px;

  font-weight: 800;

  color: #FFFFFF !important;

  line-height: 1.16;

  letter-spacing: -1px;

  margin-bottom: 22px;

  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.65);

}



.cinema-desc {

  font-size: 17.5px;

  color: rgba(255, 255, 255, 0.92) !important;

  line-height: 1.75;

  margin-bottom: 36px;

  max-width: 720px;

  font-weight: 300;

  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);

}



/* 底部全景平滑向下滚动指示器 (Scroll to Explore) */

.cinema-scroll-down {

  position: absolute;

  bottom: 36px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 20;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  cursor: pointer;

  color: rgba(255, 255, 255, 0.65);

  text-decoration: none;

  transition: all 0.35s ease;

}



.cinema-scroll-down:hover {

  color: var(--sungrow-orange);

  transform: translateX(-50%) translateY(3px);

}



.scroll-text {

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 2.5px;

  color: inherit;

  font-family: var(--font-family);

}



.scroll-mouse {

  width: 22px;

  height: 34px;

  border: 2px solid currentColor;

  border-radius: 12px;

  position: relative;

  display: flex;

  justify-content: center;

}



.scroll-wheel {

  width: 3px;

  height: 6px;

  background: currentColor;

  border-radius: 2px;

  margin-top: 6px;

  animation: scrollWheelPulse 2s infinite ease-in-out;

}



@keyframes scrollWheelPulse {

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

  50% { transform: translateY(10px); opacity: 0.2; }

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

}



.sungrow-slide-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 3;

  background: linear-gradient(90deg, rgba(10, 14, 22, 0.78) 0%, rgba(10, 14, 22, 0.45) 50%, rgba(10, 14, 22, 0.20) 100%);

  pointer-events: none;

}



.sungrow-slide-content {

  position: relative;

  z-index: 10;

  color: #FFFFFF;

  max-width: 800px;

  padding-top: 40px;

}



.sungrow-slide-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 13.5px;

  font-weight: 700;

  color: var(--sungrow-orange);

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 22px;

  padding: 6px 14px;

  background: rgba(255, 112, 0, 0.12);

  border: 1px solid rgba(255, 112, 0, 0.3);

  border-radius: var(--radius-pill);

}



.sungrow-slide-title {

  color: #FFFFFF !important;

  font-size: 58px;

  font-weight: 800;

  line-height: 1.15;

  margin-bottom: 24px;

  letter-spacing: -1.2px;

  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);

}



.sungrow-gradient-text {

  color: #FFFFFF;

  background: none;

  -webkit-background-clip: unset;

  -webkit-text-fill-color: initial;

  display: inline;

  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);

}



.sungrow-slide-desc {

  font-size: 18px;

  color: rgba(255, 255, 255, 0.90) !important;

  line-height: 1.7;

  margin-bottom: 38px;

  font-weight: 300;

  max-width: 700px;

}



@media (max-width: 1024px) {

  .sungrow-slide-title {

    font-size: 42px !important;

  }

}



@media (max-width: 768px) {

  .sungrow-hero-slider,

  .cinema-hero-banner {

    min-height: 580px;

  }

  .sungrow-slide-content {

    padding-top: 20px;

  }

  .sungrow-slide-tag {

    font-size: 11px;

    padding: 4px 10px;

    margin-bottom: 14px;

    letter-spacing: 1px;

  }

  .sungrow-slide-title {

    font-size: 28px !important;

    line-height: 1.25 !important;

    letter-spacing: -0.5px !important;

    margin-bottom: 16px !important;

  }

  .sungrow-slide-desc {

    font-size: 14px !important;

    line-height: 1.6 !important;

    margin-bottom: 24px !important;

  }

  .sungrow-slide-content > div[style*="display: flex"],

  .sungrow-slide-content .slide-btns {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 10px !important;

    margin-bottom: 24px !important;

  }

  .sungrow-slide-content .btn-sungrow {

    width: 100% !important;

    max-width: 260px !important;

    justify-content: center !important;

    text-align: center !important;

    padding: 11px 18px !important;

    font-size: 13.5px !important;

  }

  .sungrow-slider-nav {

    bottom: 24px !important;

  }

  .slider-pill {

    width: 28px !important;

    height: 4px !important;

  }

  .slider-pill.active {

    width: 52px !important;

  }

  /* 移动端手机触控操作，隐藏冗余的桌面端鼠标滚轮指示器，防止与按钮重叠 */

  .cinema-scroll-down {

    display: none !important;

  }

}



@media (max-width: 480px) {

  .sungrow-slide-title {

    font-size: 24px !important;

  }

  .sungrow-slide-desc {

    font-size: 13px !important;

  }

}



.sungrow-slider-nav {

  position: absolute;

  bottom: 48px;

  left: 0;

  width: 100%;

  z-index: 20;

}



.sungrow-slider-dots {

  display: flex;

  align-items: center;

  gap: 12px;

}



.slider-pill {

  position: relative;

  width: 44px;

  height: 5px;

  background: rgba(255, 255, 255, 0.22);

  border-radius: 3px;

  cursor: pointer;

  overflow: hidden;

  backdrop-filter: blur(4px);

  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;

}



.slider-pill:hover {

  background: rgba(255, 255, 255, 0.38);

}



.slider-pill::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 0%;

  height: 100%;

  background: linear-gradient(90deg, #ff8a00 0%, #ff5500 100%);

  border-radius: 3px;

  box-shadow: 0 0 8px rgba(255, 102, 0, 0.8), 0 0 2px rgba(255, 255, 255, 0.6);

}



.slider-pill.active {

  width: 80px;

  background: rgba(255, 255, 255, 0.28);

}



.slider-pill.active::after {

  animation: heroPillProgress 6.5s linear forwards;

}



.slider-pill.paused::after {

  animation-play-state: paused !important;

}



@keyframes heroPillProgress {

  0% {

    width: 0%;

  }

  100% {

    width: 100%;

  }

}







/* ----------------------------------------------------

   3. 阳光电源巨幕画卷 (part2 伸缩折叠 & 高级多列滚动视口)

---------------------------------------------------- */

.sungrow-gallery-part2 {
  display: flex;
  width: 100%;
  height: 640px;
  background: #000000;
  overflow: hidden;
  position: relative;
}

.gallery-box {
  flex: 1;
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 0;
}

.gallery-box:last-child {
  border-right: none;
}

.gallery-box:hover,
.gallery-box.is-playing,
.gallery-box.is-active {
  flex: 2.8;
}



.gallery-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  z-index: 1;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;

  will-change: transform, opacity;

}



/* 动态背景视频层 (静音循环，平滑交叉淡入淡出) */

.gallery-video-wrap {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: 2;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.65s;

  will-change: opacity;

}



.gallery-video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1.04);

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.gallery-box:hover .gallery-bg,

.gallery-box.is-playing .gallery-bg,

.gallery-box.is-active .gallery-bg {

  transform: scale(1.08);

}



.gallery-box:hover .gallery-video-wrap,

.gallery-box.is-playing .gallery-video-wrap,

.gallery-box.is-active .gallery-video-wrap {

  opacity: 1;

  visibility: visible;

}



.gallery-box:hover .gallery-video,

.gallery-box.is-playing .gallery-video,

.gallery-box.is-active .gallery-video {

  transform: scale(1.08);

}



.gallery-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 3;

  pointer-events: none;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.88) 100%);

  transition: background 0.4s ease;

}



.gallery-box:hover .gallery-overlay,

.gallery-box.is-playing .gallery-overlay,

.gallery-box.is-active .gallery-overlay {

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.38) 50%, rgba(0, 0, 0, 0.90) 100%);

}



.gallery-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 36px 24px;
  color: #FFFFFF;
  z-index: 5;
  box-sizing: border-box;
}

.gallery-char {
  font-size: 30px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.gallery-char span {
  font-size: 17px;
  font-weight: 400;
  color: #CBD5E1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.gallery-sublist {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 18px;

}



.gallery-subitem {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.16);

  font-size: 15px;

  color: #E2E8F0;

  transition: color 0.2s ease, transform 0.2s ease;

}



.gallery-subitem:hover {

  color: var(--sungrow-orange);

  transform: translateX(4px);

}



@media (max-width: 992px) {
  .sungrow-gallery-part2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
  }
  .gallery-box {
    width: 100% !important;
    height: 320px !important;
    flex: none !important;
    border-right: none;
    border-bottom: none;
  }
  .gallery-box:hover,
  .gallery-box.is-playing,
  .gallery-box.is-active {
    flex: none !important;
  }
  .gallery-content {
    padding: 24px 20px;
  }
  .gallery-char {
    font-size: 26px;
    margin-bottom: 8px;
  }
  .gallery-char span {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .sungrow-gallery-part2 {
    grid-template-columns: 1fr;
  }
  .gallery-box {
    height: 260px !important;
  }
  .gallery-char {
    gap: 8px;
    font-size: 22px;
  }
  .gallery-char span {
    font-size: 14px;
  }
  .gallery-sublist {
    margin-top: 10px;
    gap: 6px;
  }
  .gallery-subitem {
    padding: 6px 0;
    font-size: 13.5px;
  }
}



@media (max-width: 480px) {

  .gallery-box {

    height: 200px;

  }

  .gallery-char {

    font-size: 20px;

  }

}



/* ----------------------------------------------------

   4. 拒绝“生硬AI感”的信息模块 (专为解决用户指出的问题设计)

---------------------------------------------------- */

/* 现代双轨卡片信息槽 (消除粗暴灰框和粗横线) */

.solution-feature-box {

  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: var(--radius-sm);

  padding: 20px;

  margin: 18px 0;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);

  display: flex;

  flex-direction: column;

  gap: 12px;

  transition: var(--transition-smooth);

}



.solution-feature-box:hover {

  border-color: rgba(255, 112, 0, 0.25);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);

}



.feature-pill-label {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  width: fit-content;

  padding: 4px 10px;

  border-radius: 4px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.5px;

}



.pill-challenge {

  background: rgba(239, 68, 68, 0.08);

  color: #DC2626;

  border: 1px solid rgba(239, 68, 68, 0.2);

}



.pill-solution {

  background: rgba(255, 112, 0, 0.08);

  color: var(--sungrow-orange);

  border: 1px solid rgba(255, 112, 0, 0.2);

}



.feature-text-content {

  font-size: 14px;

  color: var(--text-body);

  line-height: 1.6;

}



/* ----------------------------------------------------

   5. 大图卡片系统 (带有微深度与高质感阴影)

---------------------------------------------------- */

.sungrow-card {

  cursor: pointer;

  background: #FFFFFF;

  border-radius: var(--radius-md);

  overflow: hidden;

  border: 1px solid var(--border-subtle);

  box-shadow: var(--shadow-card);

  transition: box-shadow 0.35s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

}



.sungrow-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-card-hover);

  border-color: var(--border-hover);

}



.sungrow-card-img-wrap {

  width: 100%;

  height: 250px;

  overflow: hidden;

  position: relative;

  background: #111827;

}



.sungrow-card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.sungrow-card:hover .sungrow-card-img {

  transform: scale(1.08);

}



.sungrow-card-tag {

  position: absolute;

  top: 16px;

  left: 16px;

  background: rgba(18, 22, 30, 0.75);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  color: #FFFFFF;

  font-size: 12px;

  font-weight: 600;

  padding: 5px 14px;

  border-radius: var(--radius-pill);

  border: 1px solid rgba(255, 255, 255, 0.15);

}



.sungrow-card-body {

  padding: 30px 26px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.sungrow-card-title {

  font-size: 20px;

  font-weight: 700;

  color: var(--sungrow-dark);

  margin-bottom: 12px;

  line-height: 1.35;

  transition: color 0.25s ease;

}



.sungrow-card:hover .sungrow-card-title {

  color: var(--sungrow-orange);

}



.sungrow-card-desc {

  font-size: 14.5px;

  color: var(--text-body);

  line-height: 1.65;

  margin-bottom: 22px;

  flex-grow: 1;

}



.sungrow-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 18px;

  border-top: 1px solid rgba(0, 0, 0, 0.06);

  font-size: 13.5px;

  font-weight: 600;

  color: var(--sungrow-orange);

}



/* ----------------------------------------------------

   6. 现代数据统计栏 (Clean Stats Bar)

---------------------------------------------------- */

.sungrow-stats-bar {

  background: #F8FAFC;

  padding: 80px 0 88px 0 !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  position: relative;

  z-index: 2;

}



.stat-col {

  background: #FFFFFF !important;

  padding: 38px 30px 42px 30px !important;

  border-radius: 16px !important;

  border: 1px solid rgba(226, 232, 240, 0.8) !important;

  box-shadow: 0 8px 25px -4px rgba(15, 23, 42, 0.06) !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-start !important;

  box-sizing: border-box !important;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;

}



.stat-col:hover {

  transform: translateY(-6px) !important;

  box-shadow: 0 18px 40px rgba(255, 121, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.03) !important;

  border-color: rgba(255, 121, 0, 0.35) !important;

}



.stat-number {

  font-family: var(--font-mono-numbers);

  font-size: 52px;

  font-weight: 800;

  color: var(--sungrow-dark);

  line-height: 1;

  margin-bottom: 16px;

  letter-spacing: -2px;

}



.stat-number span {

  background: var(--grad-orange-primary);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-size: 38px;

  font-weight: 700;

}



.stat-title {

  font-size: 16px;

  color: var(--text-title);

  font-weight: 700;

  letter-spacing: -0.2px;

  line-height: 1.4;

  margin-bottom: 6px;

}



.stat-desc {

  font-size: 13.5px;

  color: var(--text-muted);

  margin-top: 8px;

  line-height: 1.6;

  margin-bottom: 0;

}



@media (max-width: 1024px) {

  .sungrow-stats-bar {

    padding: 60px 0 68px 0 !important;

  }

  .stat-col {

    padding: 28px 24px 32px 24px !important;

  }

  .stat-number {

    font-size: 44px;

  }

  .stat-number span {

    font-size: 32px;

  }

}



@media (max-width: 640px) {

  .sungrow-stats-bar {

    padding: 36px 0 42px 0 !important;

  }

  .stat-col {

    padding: 22px 18px 24px 18px !important;

    border-radius: 12px !important;

  }

  .stat-number {

    font-size: 36px !important;

    margin-bottom: 8px !important;

  }

  .stat-number span {

    font-size: 26px !important;

  }

  .stat-title {

    font-size: 15px !important;

  }

  .stat-desc {

    font-size: 13px !important;

    margin-top: 4px !important;

  }

}



/* ----------------------------------------------------

   7. 阳光电源深炭灰国际感 Footer

---------------------------------------------------- */

.sungrow-footer {

  background: var(--sungrow-charcoal);

  color: #9CA3AF;

  padding-top: 88px;

  padding-bottom: 36px;

  font-size: 14px;

}



.footer-main-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1.5fr;

  gap: 52px;

  margin-bottom: 64px;

}



.footer-main-grid > div {

  min-width: 0;

}



@media (max-width: 1024px) {

  .footer-main-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 36px;

    margin-bottom: 40px;

  }

}



@media (max-width: 640px) {

  .footer-main-grid {

    grid-template-columns: 1fr;

    gap: 32px;

    margin-bottom: 32px;

  }

  .sungrow-footer {

    padding-top: 50px;

    padding-bottom: 24px;

  }

}



.footer-brand .logo-main {

  color: #FFFFFF;

  margin-bottom: 16px;

}



.footer-brand p {

  color: #9CA3AF;

  line-height: 1.75;

  max-width: 340px;

}



.footer-col-title {

  font-size: 16px;

  font-weight: 700;

  color: #FFFFFF;

  margin-bottom: 22px;

}



.footer-link-list {

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.footer-link-list a {

  color: #9CA3AF;

  transition: all 0.2s ease;

  display: block;

  max-width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.footer-link-list a:hover {

  color: var(--sungrow-orange);

  transform: translateX(4px);

}



.footer-contact-row {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 16px;

  color: #E2E8F0;

}



.footer-bottom-bar {

  padding-top: 32px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 13px;

  color: #6B7280;

  flex-wrap: wrap;

  gap: 16px;

}



.footer-legal-links {

  display: flex;

  align-items: center;

  gap: 24px;

}



.footer-legal-links a {

  color: #94A3B8;

  text-decoration: none;

  font-size: 13px;

  transition: color 0.25s ease;

  position: relative;

}



.footer-legal-links a:hover {

  color: var(--sungrow-orange);

}



.footer-legal-links a:not(:last-child)::after {

  content: '';

  position: absolute;

  right: -12px;

  top: 50%;

  transform: translateY(-50%);

  width: 1px;

  height: 11px;

  background: rgba(255, 255, 255, 0.15);

}



@media (max-width: 768px) {

  .footer-bottom-bar {

    flex-direction: column-reverse;

    align-items: flex-start;

    gap: 14px;

    padding-top: 24px;

  }

  .footer-legal-links {

    gap: 18px;

    flex-wrap: wrap;

  }

  .footer-legal-links a:not(:last-child)::after {

    right: -9px;

  }

}



/* ----------------------------------------------------

   12. 现代科技企业表单系统 (Modern Enterprise Form System)

   大气·通透·微发光交互·精准输入控制

---------------------------------------------------- */

.form-group {

  margin-bottom: 20px;

  position: relative;

}



.form-label {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 14px;

  font-weight: 600;

  color: var(--sungrow-dark);

  margin-bottom: 8px;

  letter-spacing: 0.2px;

}



.form-label .req {

  color: var(--sungrow-orange);

  margin-left: 4px;

  font-weight: 700;

}



.form-label .hint {

  font-size: 12.5px;

  font-weight: 400;

  color: var(--text-muted);

}



.form-input-control {

  width: 100%;

  height: 50px;

  padding: 0 18px;

  font-family: inherit;

  font-size: 14.5px;

  color: var(--sungrow-dark);

  background: #F8FAFC;

  border: 1.5px solid #E2E8F0;

  border-radius: 10px;

  outline: none;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  box-sizing: border-box;

}



.form-input-control::placeholder {

  color: #94A3B8;

  font-size: 14px;

}



.form-input-control:hover {

  background: #FFFFFF;

  border-color: #CBD5E1;

}



.form-input-control:focus {

  background: #FFFFFF;

  border-color: var(--sungrow-orange);

  box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.12);

}



textarea.form-input-control {

  height: auto;

  min-height: 110px;

  padding: 14px 18px;

  line-height: 1.6;

  resize: vertical;

}



select.form-input-control {

  appearance: none;

  -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 16px center;

  padding-right: 42px;

  cursor: pointer;

}



/* ===================================================================

   8. 现代工业企业级列表系统 (Enterprise List & Catalog System)

=================================================================== */



/* 8.0 全站统一分类筛选通栏吸附导轨体系 (Unified Sticky Filter Rail) */

.spl-sticky-filter-rail,

.products-sticky-filter-rail,

.solutions-sticky-filter-rail,

.faq-sticky-filter-rail,

.news-sticky-filter-rail,

.cases-sticky-filter-rail {

  position: sticky;

  top: 82px;

  z-index: 800;

  width: 100%;

  background: transparent;

  border-bottom: 1px solid transparent;

  box-shadow: none;

  padding: 24px 0 14px 0;

  transition: background 0.3s ease, padding 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.spl-sticky-filter-rail.is-stuck,

.spl-sticky-filter-rail.is-fixed-stuck,

.products-sticky-filter-rail.is-stuck,

.products-sticky-filter-rail.is-fixed-stuck,

.solutions-sticky-filter-rail.is-stuck,

.solutions-sticky-filter-rail.is-fixed-stuck,

.faq-sticky-filter-rail.is-stuck,

.faq-sticky-filter-rail.is-fixed-stuck,

.news-sticky-filter-rail.is-stuck,

.news-sticky-filter-rail.is-fixed-stuck,

.cases-sticky-filter-rail.is-stuck,

.cases-sticky-filter-rail.is-fixed-stuck {

  position: fixed !important;

  top: 82px !important;

  left: 0 !important;

  width: 100% !important;

  z-index: 850 !important;

  background: rgba(248, 250, 252, 0.96) !important;

  backdrop-filter: blur(16px) !important;

  -webkit-backdrop-filter: blur(16px) !important;

  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;

  padding: 12px 0 !important;

}



.spl-sticky-filter-rail .spl-filter-bar,

.products-sticky-filter-rail .spl-filter-bar,

.solutions-sticky-filter-rail .spl-filter-bar,

.faq-sticky-filter-rail .spl-filter-bar,

.news-sticky-filter-rail .spl-filter-bar,

.cases-sticky-filter-rail .spl-filter-bar {

  margin-bottom: 0;

  padding-bottom: 0;

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



@media (max-width: 1024px) {

  .spl-sticky-filter-rail,

  .products-sticky-filter-rail,

  .solutions-sticky-filter-rail,

  .faq-sticky-filter-rail,

.news-sticky-filter-rail,

.cases-sticky-filter-rail {

    top: 72px;

    padding: 16px 0 10px 0;

  }

  .spl-sticky-filter-rail.is-stuck,

  .spl-sticky-filter-rail.is-fixed-stuck,

  .products-sticky-filter-rail.is-stuck,

  .products-sticky-filter-rail.is-fixed-stuck,

  .solutions-sticky-filter-rail.is-stuck,

  .solutions-sticky-filter-rail.is-fixed-stuck,

  .faq-sticky-filter-rail.is-stuck,

  .faq-sticky-filter-rail.is-fixed-stuck,

.news-sticky-filter-rail.is-stuck,

.news-sticky-filter-rail.is-fixed-stuck,

.cases-sticky-filter-rail.is-stuck,

.cases-sticky-filter-rail.is-fixed-stuck {

    top: 72px !important;

    padding: 10px 0 !important;

  }

  .spl-sticky-filter-rail .spl-filter-bar,

  .products-sticky-filter-rail .spl-filter-bar,

  .solutions-sticky-filter-rail .spl-filter-bar,

  .faq-sticky-filter-rail .spl-filter-bar,

.news-sticky-filter-rail .spl-filter-bar,

.cases-sticky-filter-rail .spl-filter-bar {

    flex-wrap: nowrap;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding-bottom: 6px;

  }

  .spl-sticky-filter-rail .spl-filter-bar::-webkit-scrollbar,

  .products-sticky-filter-rail .spl-filter-bar::-webkit-scrollbar,

  .solutions-sticky-filter-rail .spl-filter-bar::-webkit-scrollbar,

  .faq-sticky-filter-rail .spl-filter-bar::-webkit-scrollbar,

  .news-sticky-filter-rail .spl-filter-bar::-webkit-scrollbar,

  .cases-sticky-filter-rail .spl-filter-bar::-webkit-scrollbar {

    display: none;

  }

}



/* 8.1 胶囊分类筛选器 (Sungrow Pill Filters) */

.sungrow-filter-bar,

.spl-filter-bar {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-bottom: 32px;

  padding-bottom: 8px;

}



.filter-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 22px;

  font-size: 14.5px;

  font-weight: 600;

  color: var(--text-title);

  background: #FFFFFF;

  border: 1.5px solid var(--border-light);

  border-radius: var(--radius-pill);

  cursor: pointer;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  user-select: none;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

}



.filter-pill:hover {

  border-color: var(--sungrow-orange);

  color: var(--sungrow-orange);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(255, 121, 0, 0.12);

}



.filter-pill.active {

  background: var(--grad-orange-primary);

  color: #FFFFFF;

  border-color: transparent;

  box-shadow: 0 8px 24px rgba(255, 112, 0, 0.32);

  transform: translateY(-2px);

}



.filter-pill .pill-count {

  font-size: 12px;

  padding: 1px 7px;

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.06);

  color: inherit;

  font-weight: 700;

}



.filter-pill.active .pill-count {

  background: rgba(255, 255, 255, 0.25);

  color: #FFFFFF;

}



/* 8.2 筛选结果状态行 (Result Status Bar) */

.spl-list-status-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

  padding: 0 4px;

}



.spl-result-counter {

  font-size: 14px;

  color: var(--text-muted);

  display: flex;

  align-items: center;

  gap: 6px;

}



.spl-result-counter strong {

  color: var(--sungrow-orange);

  font-weight: 700;

}



/* 8.3 列表卡片参数与徽章增强 (Card Spec Badges) */

.spl-spec-badge-group {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 12px 0;

}



.spl-spec-badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-size: 12px;

  font-weight: 600;

  padding: 3px 10px;

  border-radius: 4px;

  background: #F1F5F9;

  color: #475569;

  border: 1px solid #E2E8F0;

}



.spl-spec-badge.orange {

  background: rgba(255, 121, 0, 0.08);

  color: var(--sungrow-orange);

  border-color: rgba(255, 121, 0, 0.25);

}



.spl-spec-badge.dark {

  background: rgba(18, 22, 30, 0.06);

  color: var(--sungrow-dark);

  border-color: rgba(18, 22, 30, 0.15);

}



/* 8.41 全站统一卡片式高级分页栏 (Card-Style Enterprise Pagination Bar) */

.spl-pagination-bar,

.news-pagination-bar,

.solutions-pagination-bar {

  margin-top: 40px;

  background: #FFFFFF;

  border: 1px solid rgba(226, 232, 240, 0.9);

  border-radius: 14px;

  padding: 16px 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);

}



.spl-pagination-bar .pagination-info,

.news-pagination-bar .pagination-info,

.solutions-pagination-bar .pagination-info {

  font-size: 13.5px;

  color: #64748B;

}



.spl-pagination-bar .pagination-controls,

.news-pagination-bar .pagination-controls,

.solutions-pagination-bar .pagination-controls {

  display: flex;

  align-items: center;

  gap: 8px;

}



/* 8.4 企业级标准分页组件 (Enterprise Pagination) */

.spl-pagination {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 48px;

  padding-top: 24px;

}



.spl-page-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 40px;

  height: 40px;

  padding: 0 14px;

  font-size: 14px;

  font-weight: 600;

  color: var(--text-title);

  background: #FFFFFF;

  border: 1px solid var(--border-light);

  border-radius: 10px;

  cursor: pointer;

  transition: all 0.25s ease;

  user-select: none;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);

  white-space: nowrap !important;

  flex-shrink: 0 !important;

}



.spl-page-prev,

.spl-page-next {

  min-width: 86px !important;

  white-space: nowrap !important;

  flex-shrink: 0 !important;

  gap: 4px;

}



.spl-page-btn:hover:not(:disabled) {

  border-color: var(--sungrow-orange);

  color: var(--sungrow-orange);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);

}



.spl-page-btn.active {

  background: var(--grad-orange-primary);

  color: #FFFFFF;

  border-color: transparent;

  box-shadow: 0 6px 18px rgba(255, 112, 0, 0.35);

  transform: translateY(-2px);

}



.spl-page-btn:disabled {

  opacity: 0.45;

  cursor: not-allowed;

  transform: none;

}



.spl-page-info {

  font-size: 13.5px;

  color: var(--text-muted);

  margin-left: 14px;

}



/* 8.5 优雅空状态 (Empty State) */

.spl-empty-state {

  display: none;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 72px 24px;

  background: #FFFFFF;

  border-radius: 16px;

  border: 1px dashed var(--border-light);

  text-align: center;

  grid-column: 1 / -1;

}



.spl-empty-state.show {

  display: flex;

}



.spl-empty-icon {

  font-size: 54px;

  color: #CBD5E1;

  margin-bottom: 16px;

}



.spl-empty-title {

  font-size: 18px;

  font-weight: 700;

  color: var(--sungrow-dark);

  margin-bottom: 8px;

}



.spl-empty-desc {

  font-size: 14px;

  color: var(--text-muted);

  max-width: 420px;

  margin-bottom: 24px;

  line-height: 1.6;

}

/* 8.5.1 通用高质感企业级空状态组件 (Universal Enterprise Empty State) */
.spl-common-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: all 0.3s ease;
  width: 100%;
  margin: 16px 0 32px 0;
  box-sizing: border-box;
}

.spl-empty-illustration-wrap {
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.spl-empty-illustration {
  width: 280px;
  height: 175px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.04));
  transition: transform 0.4s ease;
}

.spl-common-empty:hover .spl-empty-illustration {
  transform: translateY(-4px) scale(1.02);
}

.spl-common-empty .spl-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: #64748B;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.02em;
  width: 100%;
}

.spl-common-empty .spl-empty-desc {
  display: none;
}

.spl-common-empty .spl-empty-action {
  display: inline-flex;
  align-items: center;
  margin: 16px auto 0 auto;
}



/* 8.6 列表底部企业级极简高质感浅色咨询展台 (Consult Banner - 阳光电源大厂规范) */

.spl-consult-banner {

  background: #F8FAFC;

  border: 1px solid #E2E8F0;

  border-radius: 20px;

  padding: 44px 52px;

  margin-top: 60px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 36px;

  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

}



.spl-consult-banner:hover {

  background: #FFFFFF;

  border-color: #CBD5E1;

  box-shadow: 0 14px 34px -4px rgba(15, 23, 42, 0.07);

  transform: translateY(-2px);

}



.spl-consult-banner-left {

  flex: 1;

}



.spl-consult-banner-label {

  font-size: 12.5px;

  font-weight: 700;

  color: var(--sungrow-orange, #FF7900);

  letter-spacing: 1.5px;

  margin-bottom: 8px;

  display: flex;

  align-items: center;

  gap: 6px;

}



.spl-consult-banner-title {

  font-size: 22px;

  font-weight: 700;

  color: #0F172A;

  margin: 0 0 10px 0;

  line-height: 1.4;

  letter-spacing: -0.3px;

}



.spl-consult-banner-desc {

  font-size: 15px;

  color: #64748B;

  line-height: 1.65;

  margin: 0;

  max-width: 760px;

}



.spl-consult-banner-action {

  flex-shrink: 0;

  display: flex;

  align-items: center;

  gap: 14px;

}



.spl-consult-btn {

  padding: 13px 30px !important;

  font-size: 14.5px !important;

  font-weight: 600 !important;

  border-radius: 26px !important;

  box-shadow: 0 4px 14px rgba(255, 121, 0, 0.22) !important;

  transition: all 0.25s ease !important;

  white-space: nowrap;

}



.spl-consult-btn:hover {

  box-shadow: 0 8px 22px rgba(255, 121, 0, 0.35) !important;

  transform: translateY(-2px) !important;

}



.spl-consult-phone-btn {

  padding: 12px 22px;

  border: 1px solid #CBD5E1;

  border-radius: 26px;

  background: #FFFFFF;

  color: #334155;

  font-size: 14px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: all 0.25s ease;

  white-space: nowrap;

  text-decoration: none;

}



.spl-consult-phone-btn:hover {

  border-color: var(--sungrow-orange, #FF7900);

  color: var(--sungrow-orange, #FF7900);

  background: #FFF7ED;

}



@media (max-width: 992px) {

  .spl-consult-banner {

    flex-direction: column;

    align-items: flex-start;

    padding: 32px 26px;

    gap: 24px;

  }

  .spl-consult-banner-action {

    width: 100%;

    flex-direction: column;

    gap: 12px;

  }

  .spl-consult-btn,

  .spl-consult-phone-btn {

    width: 100%;

    text-align: center;

    justify-content: center;

  }

}



/* 8.7 解决方案页面顶部快捷锚点导轨 (Solutions Quick Nav) */

.solutions-quick-nav {

  position: sticky;

  top: 80px;

  z-index: 90;

  background: rgba(255, 255, 255, 0.94);

  backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  padding: 14px 0;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);

}



.quick-nav-track {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

  overflow-x: auto;

  scrollbar-width: none;

}



.quick-nav-track::-webkit-scrollbar {

  display: none;

}



.quick-nav-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 18px;

  font-size: 14px;

  font-weight: 600;

  color: var(--text-title);

  border-radius: 8px;

  transition: all 0.25s ease;

  white-space: nowrap;

}



.quick-nav-link:hover,

.quick-nav-link.active {

  color: var(--sungrow-orange);

  background: rgba(255, 121, 0, 0.08);

}



/* ----------------------------------------------------

   8.8 全站列表与快捷导轨移动端深度适配 (Mobile List & Rail Enhancements)

---------------------------------------------------- */

@media (max-width: 768px) {

  .sungrow-filter-bar,

  .spl-filter-bar {

    display: flex !important;

    justify-content: flex-start !important;

    overflow-x: auto !important;

    flex-wrap: nowrap !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;

    padding-bottom: 10px !important;

    margin-bottom: 20px !important;

    padding-left: 2px !important;

    padding-right: 2px !important;

  }

  .sungrow-filter-bar::-webkit-scrollbar,

  .spl-filter-bar::-webkit-scrollbar {

    display: none !important;

  }

  .filter-tab,

  .filter-pill {

    flex-shrink: 0 !important;

    white-space: nowrap !important;

    padding: 8px 16px !important;

    font-size: 13.5px !important;

  }

  .solutions-quick-nav {

    top: 72px !important;

    padding: 10px 0 !important;

  }

  .quick-nav-track {

    justify-content: flex-start !important;

    padding-left: 16px !important;

    padding-right: 16px !important;

    -webkit-overflow-scrolling: touch !important;

  }

  .quick-nav-link {

    padding: 7px 14px !important;

    font-size: 13px !important;

    flex-shrink: 0 !important;

  }

  .spl-list-status-bar {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 8px !important;

    margin-bottom: 18px !important;

  }

  /* 8.4 移动端分页组件完美重塑 (防止按钮内文字折行及信息挤压) */

  .spl-pagination {

    margin-top: 36px !important;

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    padding-top: 16px !important;

  }

  .spl-page-btn {

    min-width: 36px !important;

    height: 36px !important;

    padding: 0 12px !important;

    font-size: 13px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

  }

  .spl-page-prev,

  .spl-page-next {

    padding: 0 14px !important;

  }

  .spl-page-info {

    width: 100% !important;

    text-align: center !important;

    margin: 8px 0 0 0 !important;

    font-size: 13px !important;

    color: var(--text-muted) !important;

    display: block !important;

  }



  /* 使命愿景横幅移动端适配 */

  .part-mission-banner {

    height: auto !important;

    min-height: 420px !important;

    padding: 70px 0 !important;

  }

  .mission-title {

    font-size: 26px !important;

    line-height: 1.3 !important;

  }

  .mission-content > div[style*="display: flex"] {

    flex-wrap: wrap !important;

    gap: 12px !important;

  }

  .mission-content .btn-sungrow {

    padding: 10px 20px !important;

    font-size: 14px !important;

  }

}



/* ----------------------------------------------------

   9. SEO 语义化面包屑导航与渐进增强超链接支持

---------------------------------------------------- */

.spl-breadcrumb-bar {

  background: #F8FAFC;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  padding: 14px 0;

  font-size: 13.5px;

  position: relative;

  z-index: 10;

}



.spl-breadcrumb-list {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  list-style: none;

  margin: 0;

  padding: 0;

}



.spl-breadcrumb-item {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--text-muted);

}



.spl-breadcrumb-item a {

  color: var(--text-muted);

  text-decoration: none;

  transition: color 0.2s ease;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



.spl-breadcrumb-item a:hover {

  color: var(--sungrow-orange);

}



.spl-breadcrumb-item .sep {

  color: #CBD5E1;

  font-size: 12px;

  user-select: none;

}



.spl-breadcrumb-item.active {

  color: var(--text-primary);

  font-weight: 600;

}



/* 渐进增强 a 标签与按钮完全一致的视觉与交互体验 */

a.filter-pill,

a.spl-page-btn {

  text-decoration: none !important;

  color: inherit;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  user-select: none;

  -webkit-user-drag: none;

}



a.filter-pill:hover {

  color: var(--sungrow-orange);

}



a.spl-page-btn.is-disabled {

  opacity: 0.45;

  pointer-events: none;

  cursor: not-allowed;

}



/* ----------------------------------------------------

   10. 全球合规资质与持续流动光轨跑道系统 (Compliance & Marquee)

---------------------------------------------------- */

/* 10.1 永续平滑无缝滚动跑道 (Infinite Seamless Marquee) */

.spl-marquee-wrap {

  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 24px 0;

  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);

  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);

}



.spl-marquee-track {

  display: flex;

  gap: 24px;

  width: max-content;

  animation: splMarqueeScroll 38s linear infinite;

  will-change: transform;

}



.spl-marquee-wrap:hover .spl-marquee-track {

  animation-play-state: paused;

}



@keyframes splMarqueeScroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



.spl-marquee-item {

  display: flex;

  align-items: center;

  gap: 16px;

  background: #FFFFFF;

  border: 1px solid var(--border-light, #E2E8F0);

  border-radius: 12px;

  padding: 14px 22px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  white-space: nowrap;

  flex-shrink: 0;

  text-decoration: none;

  color: inherit;

  cursor: pointer;

}



.spl-marquee-item:hover {

  transform: translateY(-4px);

  border-color: var(--sungrow-orange, #FF6A00);

  box-shadow: 0 10px 24px rgba(255, 106, 0, 0.12);

}



.spl-marquee-icon {

  width: 44px;

  height: 44px;

  border-radius: 10px;

  background: rgba(255, 106, 0, 0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--sungrow-orange, #FF6A00);

  font-size: 24px;

  flex-shrink: 0;

}



.spl-marquee-title {

  font-size: 15px;

  font-weight: 700;

  color: var(--text-title, #0F172A);

  line-height: 1.3;

}



.spl-marquee-code {

  font-size: 12.5px;

  color: var(--text-muted, #64748B);

  font-family: 'Inter', monospace;

  margin-top: 2px;

}



/* 10.2 常态呼吸光边与高科技合规卡片 (Border Beam & Glow Cards) */

.spl-glow-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

  margin-bottom: 40px;

}



.spl-glow-card {

  position: relative;

  background: #FFFFFF;

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: 16px;

  padding: 32px 28px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);

  transition: all 0.35s ease;

  overflow: hidden;

}



.spl-glow-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: linear-gradient(90deg, #FF6A00, #FFA033, #FF6A00);

  background-size: 200% 100%;

  animation: splGlowBeam 4s linear infinite;

}



@keyframes splGlowBeam {

  0% { background-position: 0% 0; }

  100% { background-position: 200% 0; }

}



.spl-glow-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 20px 40px rgba(255, 106, 0, 0.12);

  border-color: rgba(255, 106, 0, 0.3);

}



.spl-glow-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1px;

  color: var(--sungrow-orange, #FF6A00);

  background: rgba(255, 106, 0, 0.08);

  padding: 5px 12px;

  border-radius: 20px;

  margin-bottom: 18px;

}



.spl-glow-title {

  font-size: 20px;

  font-weight: 700;

  color: var(--text-title, #0F172A);

  margin-bottom: 12px;

  line-height: 1.35;

}



.spl-glow-desc {

  font-size: 14px;

  color: var(--text-body, #475569);

  line-height: 1.65;

  margin-bottom: 20px;

}



.spl-glow-meta {

  padding-top: 16px;

  border-top: 1px solid #F1F5F9;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 13px;

  color: var(--text-muted, #64748B);

}



/* 10.3 3D 浮雕防伪全息高保真立式证书 (Authentic Vertical Framed Certificate) */

.spl-cert-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 28px;

  margin-top: 36px;

}



.spl-cert-card {

  background: #FFFFFF;

  border: 1px solid #E2E8F0;

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  display: flex;

  flex-direction: column;

  cursor: pointer;

}



.spl-cert-card:hover {

  transform: translateY(-8px);

  border-color: var(--sungrow-orange, #FF6A00);

  box-shadow: 0 24px 50px rgba(255, 106, 0, 0.16);

}



/* 核心高保真立式证书纸质容器 (A4 比例) */

.spl-cert-paper {

  position: relative;

  background: #FCFDFE;

  border: 2px solid #CBD5E1;

  border-radius: 8px;

  padding: 24px 18px 20px 18px;

  min-height: 380px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.02);

}



/* 烫金与防伪双线饰框 */

.spl-cert-paper::before {

  content: '';

  position: absolute;

  inset: 6px;

  border: 1px dashed rgba(217, 119, 6, 0.45);

  border-radius: 4px;

  pointer-events: none;

}



/* 证书顶部机构与中英抬头 */

.spl-cert-head {

  text-align: center;

  position: relative;

  z-index: 2;

  border-bottom: 1px solid rgba(226, 232, 240, 0.8);

  padding-bottom: 14px;

}



.spl-cert-org-icon {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #FFF7ED;

  border: 1px solid #FFEDD5;

  color: var(--sungrow-orange, #FF6A00);

  font-size: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 8px auto;

}



.spl-cert-head-en {

  font-size: 9px;

  letter-spacing: 1.5px;

  color: #94A3B8;

  font-weight: 700;

  text-transform: uppercase;

}



.spl-cert-head-cn {

  font-size: 13.5px;

  font-weight: 800;

  color: #1E293B;

  margin-top: 2px;

  letter-spacing: 0.5px;

}



/* 证书正文公文区 */

.spl-cert-content {

  position: relative;

  z-index: 2;

  padding: 14px 4px;

  text-align: center;

}



.spl-cert-title-main {

  font-size: 15.5px;

  font-weight: 800;

  color: var(--text-title, #0F172A);

  line-height: 1.35;

  margin-bottom: 8px;

}



.spl-cert-auth-name {

  font-size: 11.5px;

  color: var(--sungrow-orange, #FF6A00);

  font-weight: 600;

  margin-bottom: 8px;

}



.spl-cert-clause {

  font-size: 11.5px;

  color: #64748B;

  line-height: 1.5;

  text-align: justify;

  text-align-last: center;

}



/* 证书底部署名与官方印章 */

.spl-cert-foot {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  padding-top: 10px;

  border-top: 1px solid rgba(226, 232, 240, 0.8);

}



.spl-cert-foot-code {

  font-size: 10.5px;

  font-family: 'Inter', monospace;

  color: #64748B;

  font-weight: 600;

  text-align: left;

}



/* 官方鲜红公章 / 金色防伪印 (Official Red / Gold Seal) */

.spl-cert-seal {

  width: 58px;

  height: 58px;

  border: 2px solid #DC2626;

  border-radius: 50%;

  color: #DC2626;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: 8px;

  font-weight: 800;

  line-height: 1.1;

  text-align: center;

  transform: rotate(-12deg);

  background: rgba(254, 242, 242, 0.45);

  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);

  user-select: none;

  flex-shrink: 0;

}



.spl-cert-seal i {

  font-size: 12px;

  margin-bottom: 1px;

}



.spl-cert-seal.gold {

  border-color: #D97706;

  color: #D97706;

  background: rgba(254, 243, 199, 0.45);

}



/* 持续全息扫光动效 (Continuous Holographic Sheen) */

.spl-cert-sheen {

  position: absolute;

  top: 0;

  left: -150%;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    120deg,

    rgba(255, 255, 255, 0) 30%,

    rgba(255, 255, 255, 0.6) 50%,

    rgba(255, 255, 255, 0) 70%

  );

  animation: splCertSheenLoop 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;

  pointer-events: none;

  z-index: 5;

}



@keyframes splCertSheenLoop {

  0% { left: -150%; }

  35% { left: 150%; }

  100% { left: 150%; }

}



.spl-cert-hover-hint {

  margin-top: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 12.5px;

  color: var(--text-muted, #64748B);

}



.spl-cert-hover-hint .btn-zoom {

  color: var(--sungrow-orange, #FF6A00);

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}





/* 10.4 证书核验全屏灯箱 Modal (Lightbox Modal) */

.spl-modal-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(10, 15, 29, 0.82);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

}



.spl-modal-backdrop.show {

  opacity: 1;

  visibility: visible;

}



.spl-modal-box {

  background: #FFFFFF;

  border-radius: 18px;

  max-width: 840px;

  width: 100%;

  max-height: 90vh;

  overflow-y: auto;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);

  transform: scale(0.94);

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

}



.spl-modal-backdrop.show .spl-modal-box {

  transform: scale(1);

}



.spl-modal-close {

  position: absolute;

  top: 18px;

  right: 18px;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: #F1F5F9;

  border: none;

  font-size: 20px;

  color: #475569;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease;

  z-index: 10;

}



.spl-modal-close:hover {

  background: var(--sungrow-orange, #FF6A00);

  color: #FFFFFF;

}



@media (max-width: 1024px) {

  .spl-glow-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .spl-cert-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 640px) {

  .spl-glow-grid {

    grid-template-columns: 1fr;

  }

  .spl-cert-grid {

    grid-template-columns: 1fr;

  }

}



/* ----------------------------------------------------

   11. 阳光电源同款白底圆角资质卡片与轮播动画系统 (Sungrow Qualifications Carousel)

   白底圆角大厂极简卡片 · 精美机构矢量徽标 · 下方深灰文字 · 纯平滑无缝走马灯/轮播切换

---------------------------------------------------- */

.sungrow-qual-container {

  position: relative;

  width: 100%;

}



/* 轮播跑道外层遮罩 (两端柔和羽化遮罩) */

.sungrow-qual-carousel-mask {

  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 10px 0 20px 0;

  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);

  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);

}



.sungrow-qual-track {

  display: flex;

  gap: 24px;

  width: max-content;

  will-change: transform;

}



.sungrow-qual-track.css-marquee {

  animation: sungrowQualScroll 32s linear infinite;

}



.sungrow-qual-carousel-mask:hover .sungrow-qual-track.css-marquee {

  animation-play-state: paused;

}



@keyframes sungrowQualScroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



/* 单个资质卡片单元 (上图下文) */

.sungrow-qual-unit {

  width: 250px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  cursor: pointer;

  text-decoration: none;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.sungrow-qual-unit:hover {

  transform: translateY(-5px);

}



/* 上方白底微边框圆角卡片 (如截图所示) */

.sungrow-qual-box {

  height: 125px;

  background: #FFFFFF;

  border: 1px solid #ECEFF2;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 16px 24px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  overflow: hidden;

}



.sungrow-qual-unit:hover .sungrow-qual-box {

  border-color: rgba(255, 121, 0, 0.4);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

}



/* 内部矢量 Logo 尺寸控制 */

.sungrow-qual-box svg,

.sungrow-qual-box img {

  max-width: 100%;

  max-height: 58px;

  object-fit: contain;

  transition: transform 0.3s ease;

}



.sungrow-qual-unit:hover .sungrow-qual-box svg,

.sungrow-qual-unit:hover .sungrow-qual-box img {

  transform: scale(1.05);

}



/* 下方精致说明文字 (如截图所示) */

.sungrow-qual-caption {

  margin-top: 12px;

  font-size: 13.5px;

  font-weight: 500;

  color: #334155;

  line-height: 1.45;

  text-align: left;

  transition: color 0.25s ease;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.sungrow-qual-unit:hover .sungrow-qual-caption {

  color: var(--sungrow-orange, #FF7900);

}



/* 阳光电源同款两端控制按钮 (Prev / Next) */

.sungrow-qual-nav-controls {

  display: flex;

  align-items: center;

  gap: 12px;

}



.sungrow-qual-ctrl-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1px solid #E2E8F0;

  color: #334155;

  font-size: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.25s ease;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

}



.sungrow-qual-ctrl-btn:hover {

  background: var(--sungrow-orange, #FF7900);

  border-color: var(--sungrow-orange, #FF7900);

  color: #FFFFFF;

  transform: scale(1.06);

  box-shadow: 0 6px 16px rgba(255, 121, 0, 0.25);

}




/* ===================================================================
   权威资质双向无缝无限跑道 (双层对向滚动 + 悬停暂停)
   =================================================================== */
.qual-dual-marquee {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 28px;
  position: relative;
}

.qual-dual-marquee .sungrow-qual-carousel-mask {
  width: 100%;
  overflow: hidden;
  padding: 6px 0 10px 0;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.qual-dual-marquee .sungrow-qual-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

/* 上排从右向左无限滚动 */
.qual-dual-marquee .marquee-track-left {
  animation: qualMarqueeScrollLeft 32s linear infinite;
}

/* 下排从左向右无限滚动 */
.qual-dual-marquee .marquee-track-right {
  animation: qualMarqueeScrollRight 32s linear infinite;
}

/* 核心需求：鼠标移动到这一块区域即刻暂停滚动 */
.qual-dual-marquee:hover .sungrow-qual-track,
.qual-dual-marquee .sungrow-qual-track:hover {
  animation-play-state: paused !important;
}

@keyframes qualMarqueeScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes qualMarqueeScrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* 跑道内单个资质卡片单元统一宽度与视觉 */
.qual-dual-marquee .sungrow-qual-unit {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-sizing: border-box;
}

.qual-dual-marquee .sungrow-qual-box {
  width: 100%;
  height: 110px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.qual-dual-marquee .sungrow-qual-box svg,
.qual-dual-marquee .sungrow-qual-box img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  transition: transform 0.28s ease;
}

/* 鼠标单独悬浮在卡片上的微动效 (上浮与橙色高亮) */
.qual-dual-marquee .sungrow-qual-unit:hover .sungrow-qual-box {
  transform: translateY(-4px);
  border-color: rgba(255, 121, 0, 0.45);
  box-shadow: 0 10px 24px rgba(255, 121, 0, 0.12);
}

.qual-dual-marquee .sungrow-qual-unit:hover .sungrow-qual-box svg,
.qual-dual-marquee .sungrow-qual-unit:hover .sungrow-qual-box img {
  transform: scale(1.05);
}

.qual-dual-marquee .sungrow-qual-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-title, #1E293B);
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* 移动端响应式尺寸与滚动速度调整 */
@media (max-width: 768px) {
  .qual-dual-marquee {
    gap: 16px;
    margin-top: 20px;
  }
  .qual-dual-marquee .sungrow-qual-track {
    gap: 16px;
  }
  .qual-dual-marquee .sungrow-qual-unit {
    width: 200px;
  }
  .qual-dual-marquee .sungrow-qual-box {
    height: 86px;
    padding: 10px 12px;
  }
  .qual-dual-marquee .sungrow-qual-box svg,
  .qual-dual-marquee .sungrow-qual-box img {
    max-height: 42px;
  }
  .qual-dual-marquee .sungrow-qual-caption {
    font-size: 11.5px;
    margin-top: 6px;
  }
  .qual-dual-marquee .marquee-track-left {
    animation-duration: 24s;
  }
  .qual-dual-marquee .marquee-track-right {
    animation-duration: 24s;
  }
}

/* 网格排布总览形态 (用于资质专页中的全量展示) - 彻底修复移动端右侧溢出显示不全 */

.sungrow-qual-grid {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 20px;

  margin-top: 32px;

  width: 100%;

  box-sizing: border-box;

}



/* 网格内的单元卡片严格采用流式 100% 宽度，坚决禁止固定像素宽度 */

.sungrow-qual-grid .sungrow-qual-unit {

  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

  flex-shrink: 1 !important;

  box-sizing: border-box !important;

}



.sungrow-qual-grid .sungrow-qual-box {

  width: 100% !important;

  box-sizing: border-box !important;

}



@media (max-width: 1200px) {

  .sungrow-qual-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;

  }

}



@media (max-width: 900px) {

  .sungrow-qual-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;

  }

}



@media (max-width: 640px) {

  .sungrow-qual-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 20px;

  }

  /* 仅对轮播轨道内的卡片保持水平固定宽度 */

  .sungrow-qual-track .sungrow-qual-unit {

    width: 180px;

  }

  .sungrow-qual-grid .sungrow-qual-box {

    height: 92px;

    padding: 10px 12px;

    border-radius: 10px;

  }

  .sungrow-qual-grid .sungrow-qual-box svg,

  .sungrow-qual-grid .sungrow-qual-box img {

    max-height: 46px;

    max-width: 100%;

  }

  .sungrow-qual-grid .sungrow-qual-caption {

    font-size: 12px;

    margin-top: 8px;

    line-height: 1.4;

  }

}



@media (max-width: 360px) {

  .sungrow-qual-grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }

}



/* ===================================================================

   返回顶部组件 (Back to Top with Circular Scroll Progress Ring)

   高端工业美学 · 环形进度圈 · 磨砂毛玻璃 · 丝滑微动效

=================================================================== */

.site-back-to-top {

  position: fixed;

  right: 28px;

  bottom: 32px;

  width: 48px;

  height: 48px;

  z-index: 990;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.94);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(226, 232, 240, 0.9);

  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(18px) scale(0.92);

  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),

              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),

              visibility 0.35s,

              background 0.25s ease,

              box-shadow 0.25s ease;

  user-select: none;

}



.site-back-to-top.is-visible {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0) scale(1);

}



.site-back-to-top:hover {

  transform: translateY(-4px) scale(1.04);

  background: #FFFFFF;

  box-shadow: 0 14px 32px -4px rgba(255, 121, 0, 0.28), 0 4px 12px rgba(15, 23, 42, 0.08);

  border-color: rgba(255, 121, 0, 0.35);

}



.site-back-to-top:active {

  transform: translateY(-1px) scale(0.98);

}



/* 环形进度条 SVG */

.site-back-to-top .progress-ring {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transform: rotate(-90deg);

  pointer-events: none;

}



.site-back-to-top .progress-ring-bg {

  stroke: rgba(226, 232, 240, 0.6);

  stroke-width: 2.5;

  fill: transparent;

}



.site-back-to-top .progress-ring-circle {

  stroke: var(--sungrow-orange, #FF7900);

  stroke-width: 2.5;

  stroke-linecap: round;

  fill: transparent;

  stroke-dasharray: 138.2;

  stroke-dashoffset: 138.2;

  transition: stroke-dashoffset 0.15s ease-out;

}



/* 向上箭头图标 */

.site-back-to-top .icon-wrap {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #334155;

  font-size: 20px;

  line-height: 1;

  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.site-back-to-top:hover .icon-wrap {

  color: var(--sungrow-orange, #FF7900);

  transform: translateY(-2px);

}



/* 悬停微提示 Tooltip */

.site-back-to-top .tooltip-label {

  position: absolute;

  right: calc(100% + 12px);

  top: 50%;

  transform: translateY(-50%) translateX(6px);

  background: #0F172A;

  color: #FFFFFF;

  font-size: 11.5px;

  font-weight: 500;

  padding: 5px 10px;

  border-radius: 6px;

  white-space: nowrap;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);

}



.site-back-to-top .tooltip-label::after {

  content: '';

  position: absolute;

  top: 50%;

  left: 100%;

  transform: translateY(-50%);

  border-width: 4px;

  border-style: solid;

  border-color: transparent transparent transparent #0F172A;

}



.site-back-to-top:hover .tooltip-label {

  opacity: 1;

  visibility: visible;

  transform: translateY(-50%) translateX(0);

}



@media (max-width: 768px) {

  .site-back-to-top {

    right: 18px;

    bottom: 24px;

    width: 42px;

    height: 42px;

  }

  .site-back-to-top .tooltip-label {

    display: none;

  }

}

/* ===================================================================
   极简杂志流线风 · 斯普乐动态 (Editorial Milestone Stream)
   企业官方履迹纪实 + 逐项平滑移入动效 + 消除AI感 + 左右和谐交互
   =================================================================== */
.mag-news-section {
  background: #FFFFFF;
  padding: 85px 0 95px 0;
  border-top: 1px solid #EDF2F7;
  position: relative;
}

.mag-news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.mag-sub-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--sungrow-orange, #FF7900);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mag-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sungrow-orange, #FF7900);
}

.mag-main-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-title, #0F172A);
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.mag-sub-desc {
  font-size: 15px;
  color: var(--text-muted, #64748B);
  margin-top: 8px;
  max-width: 640px;
  line-height: 1.6;
}

/* 极简工程印章与线条装饰 (纯视觉修饰 · 摒弃伪数据与假档案) */
.mag-header-ornament {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ornament-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ornament-text {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.ornament-en {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--sungrow-orange, #FF7900);
  letter-spacing: 1.5px;
  line-height: 1.25;
}

.ornament-sub {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

/* 轮播视口与滑轨 */
.mag-carousel-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  border-top: 1px solid #E2E8F0;
}

.mag-carousel-track {
  display: flex;
  width: 200%;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.mag-carousel-slide {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* 列表单项 · 移入/移除全平滑渐变过度 */
.mag-row-item {
  border-bottom: 1px solid #E2E8F0;
  position: relative;
  background: #FFFFFF;
  border-left: 3px solid transparent;
  transition: background 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              border-left-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: background, border-left-color;
}

/* 逐项平滑依次移入动画 (Staggered Entrance) */
@keyframes magItemStaggerIn {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.mag-carousel-slide.is-entering .mag-row-item:nth-child(1) {
  animation: magItemStaggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
}
.mag-carousel-slide.is-entering .mag-row-item:nth-child(2) {
  animation: magItemStaggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
.mag-carousel-slide.is-entering .mag-row-item:nth-child(3) {
  animation: magItemStaggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
.mag-carousel-slide.is-entering .mag-row-item:nth-child(4) {
  animation: magItemStaggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
}

/* 统一无突兀感的移入/高亮效果 (横向轻柔渐变 + 橙色边缘律动) */
.mag-row-item:hover,
.mag-row-item.auto-hover {
  background: linear-gradient(90deg, rgba(255, 121, 0, 0.045) 0%, #F8FAFC 90px, #FFFFFF 100%);
  border-left-color: var(--sungrow-orange, #FF7900);
}

.mag-row-link {
  display: grid;
  grid-template-columns: 95px 1fr 190px;
  gap: 32px;
  align-items: center;
  padding: 26px 20px;
  text-decoration: none;
  transition: all 0.35s ease;
}

/* 1. 大号排版日期 (深沉典雅，平滑变色) */
.mag-col-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.mag-date-day {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: #1E293B;
  line-height: 1;
  letter-spacing: -1px;
  transition: color 0.35s ease;
}

.mag-row-item:hover .mag-date-day,
.mag-row-item.auto-hover .mag-date-day {
  color: #0F172A;
}

.mag-date-year {
  font-family: 'Inter', monospace, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: 1.5px;
  margin-top: 5px;
}

/* 2. 内容主体 (标题平滑过渡，标签统一规范) */
.mag-col-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mag-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 8px;
}

.mag-kicker-cat {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  transition: all 0.35s ease;
}

.mag-row-item:hover .mag-kicker-cat,
.mag-row-item.auto-hover .mag-kicker-cat {
  background: rgba(255, 121, 0, 0.1);
  color: var(--sungrow-orange, #FF7900);
}

.mag-kicker-dot {
  color: #CBD5E1;
  font-size: 10px;
}

.mag-kicker-loc {
  color: #64748B;
  font-size: 12px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mag-kicker-loc i {
  color: #94A3B8;
  font-size: 13px;
  transition: color 0.35s ease;
}

.mag-row-item:hover .mag-kicker-loc i,
.mag-row-item.auto-hover .mag-kicker-loc i {
  color: var(--sungrow-orange, #FF7900);
}

.mag-row-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-title, #0F172A);
  line-height: 1.4;
  margin-bottom: 8px;
  transition: color 0.35s ease;
}

.mag-row-item:hover .mag-row-title,
.mag-row-item.auto-hover .mag-row-title {
  color: var(--sungrow-orange, #FF7900);
}

.mag-row-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 详情链接 · 严格去除粗体，纤细克制 */
.mag-row-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
  margin-top: 10px;
  letter-spacing: 0.2px;
  transition: color 0.35s ease;
}

.mag-row-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  font-size: 11px;
  transition: all 0.35s ease;
}

.mag-row-item:hover .mag-row-more,
.mag-row-item.auto-hover .mag-row-more {
  color: var(--sungrow-orange, #FF7900);
}

.mag-row-item:hover .mag-row-more-icon,
.mag-row-item.auto-hover .mag-row-more-icon {
  background: var(--sungrow-orange, #FF7900);
  color: #FFFFFF;
  transform: translateX(4px);
}

/* 3. 缩略图 · 明显放大浮起动效 (用户要求更加明显) */
.mag-col-media {
  flex-shrink: 0;
}

.mag-img-glow-wrap {
  width: 190px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.mag-img-glow-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.45s ease;
}

.mag-row-item:hover .mag-img-glow-wrap,
.mag-row-item.auto-hover .mag-img-glow-wrap {
  border-color: rgba(255, 121, 0, 0.35);
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.14), 0 4px 8px -2px rgba(15, 23, 42, 0.08);
  transform: translateY(-3px);
}

.mag-row-item:hover .mag-img-glow-wrap img,
.mag-row-item.auto-hover .mag-img-glow-wrap img {
  transform: scale(1.08);
  filter: contrast(1.04) brightness(1.02);
}

/* 移动端与平板响应式 */
@media (max-width: 1024px) {
  .mag-row-link {
    grid-template-columns: 85px 1fr 160px;
    gap: 20px;
    padding: 20px 14px;
  }
  .mag-date-day {
    font-size: 26px;
  }
  .mag-row-title {
    font-size: 17px;
  }
  .mag-img-glow-wrap {
    width: 160px;
    height: 100px;
  }
}

@media (max-width: 768px) {
  .mag-news-section {
    padding: 50px 0 60px 0;
  }
  .mag-main-title {
    font-size: 24px;
  }
  .mag-milestone-stat {
    align-items: flex-start;
    text-align: left;
    margin-top: 8px;
  }
  .mag-row-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 12px;
  }
  .mag-col-date {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .mag-date-day {
    font-size: 22px;
  }
  .mag-date-year {
    font-size: 13px;
  }
  .mag-col-media {
    width: 100%;
  }
  .mag-img-glow-wrap {
    width: 100%;
    height: 170px;
  }
}

/* 全站表单统一校验高亮与错误提示 */
.field-input.has-error,
.form-input-control.has-error {
  border-color: #EF4444 !important;
  background-color: #FEF2F2 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.field-error-msg {
  font-size: 12px;
  color: #EF4444;
  margin-top: 5px;
  display: none;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  font-weight: 500;
}