/* ========================================
   光电光学行业配色方案
   主色：科技蓝 #0066CC (光学精准)
   辅色：深空蓝 #003D82 (专业沉稳)
   强调色：光子青 #00A3E0 (创新活力)
   中性：深灰 #2C3E50, 中灰 #7F8C8D, 浅灰 #ECF0F1
   背景：纯白 #FFFFFF, 极浅灰 #F8F9FA
======================================== */

/* 重置默认样式，移除顶部白色间隙 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
  max-width: 100%;
}

:root {
  --primary-blue: #0066CC;
  --primary-dark: #003D82;
  --accent-cyan: #00A3E0;
  --text-dark: #2C3E50;
  --text-gray: #7F8C8D;
  --border-gray: #E0E4E8;
  --bg-light: #F8F9FA;
  --bg-white: #FFFFFF;
  --shadow-sm: 0 2px 8px rgba(0, 102, 204, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 102, 204, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 102, 204, 0.16);
  --nav-height: 64px;
}

@media (min-width: 768px) {
  :root {
    --nav-height: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --nav-height: 92px;
  }
}

/* 轮播图区域样式 */
.hero-section {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.hero-banner {
  width: 100%;
  height: 500px; /* 基础高度 */
  background: #000000; /* 黑色背景（兜底） */
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

/* 响应式高度调整 */
@media (min-width: 1024px) {
  .hero-banner {
    height: 600px;
  }
}

@media (min-width: 1440px) {
  .hero-banner {
    height: 700px;
  }
}

@media (min-width: 1920px) {
  .hero-banner {
    height: 800px;
  }
}

/* 轮播图容器全屏适配 */
.bannerSwiper,
.bannerSwiper .swiper-wrapper,
.bannerSwiper .swiper-slide {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bannerSwiper .swiper-slide {
  position: relative;
  background: #000000; /* 黑色背景（兜底） */
  overflow: hidden;
}

.bannerSwiper .swiper-slide img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 铺满整个区域，可能裁剪 */
  object-position: center !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

/* 轮播图文字叠加层 */
.banner-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 改为顶部对齐 */
  align-items: flex-start;
  padding: 8% 6% 6% 12%; /* 向右上角移动：上右下左，增加上边距让内容向下移动 */
  z-index: 2; /* 提高层级 */
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%);
}

/* 文字内容容器 */
.banner-text-content {
  max-width: 65%;
  text-align: left;
  animation: fadeInUp 1s ease-out;
  position: relative;
  z-index: 2;
  margin-left: 20px; /* 向右移动20px（从50px减少30px） */
  margin-top: 80px; /* 向下移动80px（从50px增加30px） */
}

@media (max-width: 1024px) {
  .banner-text-content {
    max-width: 70%;
  }
}

@media (max-width: 768px) {
  .banner-text-content {
    max-width: 90%;
  }
}

/* 主标题 */
.banner-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.03em;
  position: relative;
  display: inline-block;
}

/* 主标题装饰线 */
.banner-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 80px;
  height: 6px;
  background: linear-gradient(90deg, #00A3E0, #0066CC);
  border-radius: 2px;
}

/* 副标题 */
.banner-subtitle {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 400;
  color: #f0f0f0;
  margin: 0 0 1rem 0;
  line-height: 1.5;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  max-width: 90%;
}

/* banner描述 */
.banner-description {
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: #e0e0e0;
  margin: 0.5rem 0 1.5rem 0;
  line-height: 1.6;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 85%;
  font-weight: 300;
}

/* 产品列表 */
.banner-products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
  max-width: 90%;
}

.banner-product-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 0, 0, 0.8) !important; /* 临时红色背景用于测试 */
  padding: 0.75rem 1.25rem;
  border-radius: 0;
  backdrop-filter: blur(10px);
  border: 5px solid yellow !important; /* 临时黄色边框用于测试 */
  transition: all 0.3s ease;
  min-width: 180px;
}

.banner-product-item:hover {
  background: rgba(0, 102, 204, 0.25);
  border-color: rgba(0, 102, 204, 0.8);
  transform: translateY(-2px);
}

.product-label {
  color: #00A3E0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.product-name {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
}

/* 特色功能列表 */
.banner-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.5rem 0;
  max-width: 90%;
}

.banner-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  border: none;
  transition: all 0.3s ease;
}

.banner-feature-item:hover {
  transform: translateY(-2px);
}

.feature-icon {
  color: #00A3E0;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 163, 224, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.feature-text {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 行动按钮 */
.banner-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.8rem;
  background: linear-gradient(135deg, #0066CC 0%, #00A3E0 100%);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
  transition: all 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
  border: none;
  margin-top: 0.5rem;
}

.banner-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
  background: linear-gradient(135deg, #0077E0 0%, #00B3FF 100%);
}

.banner-cta-button:active {
  transform: translateY(-1px);
}

/* 按钮图标 */
.banner-cta-button svg {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.banner-cta-button:hover svg {
  transform: translateX(3px);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* 为banner元素添加逐个出现的动画效果 */
.banner-title {
  animation: slideInLeft 0.8s ease-out;
}

.banner-subtitle {
  animation: slideInLeft 0.8s ease-out 0.2s both;
}

.banner-description {
  animation: slideInLeft 0.8s ease-out 0.4s both;
}

.banner-products {
  animation: slideInRight 0.8s ease-out 0.6s both;
}

.banner-features {
  animation: slideInRight 0.8s ease-out 0.8s both;
}

.banner-cta-button {
  animation: slideInLeft 0.8s ease-out 1s both;
}

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

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 动画效果 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 移动端优化：保持图片原始比例，完整显示 */
@media (max-width: 768px) {
  .hero-banner {
    height: auto !important; /* 移动端自适应高度 */
    min-height: 750px !important; /* 进一步增加最小高度 */
  }
  
  .bannerSwiper,
  .bannerSwiper .swiper-wrapper {
    height: auto !important; /* 移动端自适应高度 */
    min-height: 750px !important;
  }
  
  .bannerSwiper .swiper-slide {
    position: relative;
    background: #000000; /* 黑色背景（兜底） */
    overflow: visible !important; /* 移动端允许内容溢出显示，防止文字被裁切 */
    height: auto !important;
    min-height: 750px !important;
    display: flex;
    flex-direction: column;
  }
  
  .bannerSwiper .swiper-slide img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 500px !important;
    object-fit: cover !important; /* 铺满整个区域 */
    object-position: center center !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
  }
  
  /* 移动端文字样式调整 */
  .banner-text-overlay {
    padding: 5% 4% 4% 4%; /* 减少内边距 */
    align-items: flex-start; /* 改为顶部对齐 */
    justify-content: flex-start; /* 顶部对齐 */
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.2) 100%);
    overflow-y: visible; /* 允许内容完整显示 */
    height: 100%; /* 填满整个slide */
  }
  
  /* 移动端禁用动画效果以提高性能 */
  .banner-title,
  .banner-subtitle,
  .banner-description,
  .banner-products,
  .banner-features,
  .banner-cta-button {
    animation: none !important;
  }
  
  .banner-text-content {
    max-width: 95%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem; /* 减小间距 */
    transform: translate(40px, -60px); /* 向右移动40px，向上移动60px */
  }
  
  .banner-title {
    font-size: clamp(1.4rem, 4.5vw, 1.8rem);
    margin: 0 0 0.3rem 0;
    line-height: 1.2;
  }
  
  .banner-title::after {
    display: none; /* 移动端隐藏装饰线 */
  }
  
  .banner-subtitle {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    margin: 0.3rem 0;
    max-width: 100%;
    line-height: 1.3;
  }
  
  .banner-description {
    font-size: clamp(0.7rem, 2.2vw, 0.85rem);
    margin: 0.3rem 0;
    max-width: 100%;
    line-height: 1.35;
    /* 移动端不限制行数，完整显示 */
    display: block;
    overflow: visible;
  }
  
  /* 移动端显示产品列表，但紧凑排列 */
  .banner-products {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem; /* 减小间距 */
    max-width: 100%;
    margin: 0.5rem 0; /* 减小上下边距 */
  }
  
  .banner-product-item {
    display: flex !important;
    width: auto;
    max-width: 90%;
    padding: 0.3rem 0.6rem; /* 减小内边距 */
    background: rgba(0, 102, 204, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(0, 102, 204, 0.3);
  }
  
  .product-label {
    font-size: 0.65rem; /* 缩小字体 */
    padding: 0.1rem 0.3rem;
    white-space: nowrap;
  }
  
  .product-name {
    font-size: 0.7rem; /* 缩小字体 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
  
  /* 移动端简化特性列表 */
  .banner-features {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem; /* 减小间距 */
    max-width: 100%;
    margin: 0.5rem 0; /* 减小上下边距 */
  }
  
  .banner-feature-item {
    width: auto;
    max-width: 100%;
    justify-content: center;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem; /* 减小内边距 */
  }
  
  .feature-icon {
    width: 14px; /* 缩小图标 */
    height: 14px;
    min-width: 14px;
  }
  
  .feature-text {
    font-size: 0.7rem; /* 缩小字体 */
    white-space: nowrap;
  }
  
  .banner-cta-button {
    font-size: 0.85rem; /* 缩小字体 */
    padding: 0.5rem 1.2rem; /* 减小内边距 */
    margin-top: 0.4rem; /* 减小上边距 */
  }
  
  /* 移动端导航栏 - 白色背景，不透明 */
  #navbar {
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }
}

/* 平板端 */
@media (min-width: 769px) and (max-width: 1024px) {
  .bannerSwiper .swiper-slide {
    position: relative;
    background: #000000;
    overflow: hidden;
  }
  
  .bannerSwiper .swiper-slide img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* 分页指示器样式 - 位于轮播图底部中央 */
.banner-pagination {
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  margin: 0 !important;
  width: auto !important;
}

.banner-pagination .swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  border-radius: 0 !important; /* 方形，无圆角 */
  background: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 !important;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.banner-pagination .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  transform: scale(1.2);
}

.banner-pagination .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.95) !important;
  transform: scale(1.3);
  border-color: rgba(255, 255, 255, 0.8);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .banner-pagination {
    bottom: 1.5rem !important;
    gap: 0.5rem;
  }
  
  .banner-pagination .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* 移动端导航栏 - 白色背景 */
  #navbar {
    background: #ffffff !important;
  }
  
  /* 移动端导航栏文字颜色 - 深色 */
  #navbar span,
  #navbar #menuBtn {
    color: #2C3E50 !important;
  }
  
  /* 移动端LOGO - 原色 */
  #navbar img {
    filter: none !important;
  }
}

/* 自定义样式：Logo 动画、导航滚动背景、移动端菜单开合、Swiper 分页优化 */

/* Logo 入场动画 */
@keyframes logoFadeInUp {
  0% { opacity: 0; transform: translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-logo {
  animation: logoFadeInUp 1.4s ease-out 0.2s forwards;
}

/* 导航栏样式 - fixed定位，始终固定在顶部 */
#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0;
  width: 100%;
  background: transparent !important; /* 完全透明背景 */
  box-shadow: none !important; /* 默认无阴影 */
  z-index: 100 !important; /* 提高z-index确保在轮播图上方 */
  transition: all 0.3s ease;
}

/* 导航栏滚动后的样式 - 白色背景 */
#navbar.scrolled {
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 导航栏默认状态时的文字颜色 - PC端默认黑色 */
@media (min-width: 769px) {
  /* PC端透明状态下的LOGO保持原色 */
  #navbar:not(.scrolled) img {
    filter: none !important;
  }
}

/* 首页特殊样式：导航栏透明时使用白色文字（通过JS添加homepage类） */
@media (min-width: 769px) {
  body.homepage #navbar:not(.scrolled) span.ml-2,
  body.homepage #navbar:not(.scrolled) a:not(#productsMega a),
  body.homepage #navbar:not(.scrolled) button:not(#menuBtn):not(#productsMega button),
  body.homepage #navbar:not(.scrolled) #menuBtn {
    color: #ffffff !important;
  }
}

/* 三级菜单（productsMega）内的文字保持黑色 */
@media (min-width: 769px) {
  #navbar:not(.scrolled) #productsMega,
  #navbar:not(.scrolled) #productsMega *,
  #navbar:not(.scrolled) #productsMega a,
  #navbar:not(.scrolled) #productsMega button,
  #navbar:not(.scrolled) #productsMega span,
  #navbar:not(.scrolled) #productsMega div,
  #navbar:not(.scrolled) #productsMega .level1-item,
  #navbar:not(.scrolled) #productsMega .level2-item,
  #navbar:not(.scrolled) #productsMega .mega-left a,
  #navbar:not(.scrolled) #productsMega .mega-mid a,
  #navbar:not(.scrolled) #productsMega .mega-right a {
    color: #2C3E50 !important;
  }
  
  /* 三级菜单悬停状态保持蓝底白字 */
  #navbar:not(.scrolled) #productsMega .level1-item:hover,
  #navbar:not(.scrolled) #productsMega .level2-item:hover,
  #navbar:not(.scrolled) #productsMega .level1-item.active,
  #navbar:not(.scrolled) #productsMega .level2-item.active {
    /* background: #1d4ed8 !important; */
    color: #ffffff !important;
  }
  
  #navbar:not(.scrolled) #productsMega .level1-item:hover *,
  #navbar:not(.scrolled) #productsMega .level2-item:hover *,
  #navbar:not(.scrolled) #productsMega .level1-item.active *,
  #navbar:not(.scrolled) #productsMega .level2-item.active * {
    color: #ffffff !important;
  }

  /* 三级菜单（右侧）悬停状态 - 最高优先级 */
  #navbar:not(.scrolled) #productsMega .mega-right a:hover,
  #navbar:not(.scrolled) #productsMega .mega-right ul li a:hover,
  #navbar:not(.scrolled) #productsMega .mega-right li:hover a,
  #navbar #productsMega .mega-right a:hover,
  #navbar #productsMega .mega-right ul li a:hover,
  #navbar #productsMega .mega-right li:hover a {
    /* background: #1d4ed8 !important; */
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
    color: #ffffff !important;
  }

  /* 三级菜单悬停时的所有子元素也变白 - 最高优先级 */
  #navbar:not(.scrolled) #productsMega .mega-right a:hover *,
  #navbar:not(.scrolled) #productsMega .mega-right ul li a:hover *,
  #navbar:not(.scrolled) #productsMega .mega-right li:hover a *,
  #navbar #productsMega .mega-right a:hover *,
  #navbar #productsMega .mega-right ul li a:hover *,
  #navbar #productsMega .mega-right li:hover a * {
    color: #ffffff !important;
  }
}

@media (max-width: 768px) {
  #navbar:not(.scrolled) span.ml-2,
  #navbar:not(.scrolled) a,
  #navbar:not(.scrolled) button:not(#menuBtn),
  #navbar:not(.scrolled) #menuBtn {
    color: #2C3E50 !important;
  }
  
  /* 移动端LOGO保持原色 */
  #navbar:not(.scrolled) img {
    filter: none !important;
  }
}

/* 导航栏滚动后的文字颜色 - 深色 */
#navbar.scrolled span.ml-2 {
  color: #2C3E50 !important;
}

#navbar.scrolled a,
#navbar.scrolled button:not(#menuBtn) {
  color: #2C3E50 !important;
}

/* PC端：移除body的padding-top，因为导航栏是透明背景 */
@media (min-width: 769px) {
  body {
    padding-top: 0;
  }
}

/* 移动端：添加导航栏高度的padding-top，因为导航栏不透明 */
@media (max-width: 768px) {
  body {
    padding-top: 70px; /* 导航栏高度 */
  }
}

/* 首页轮播图添加顶部间距，与其他页面保持一致 */
.hero-section {
  margin-top: 0;
  padding-top: 100px; /* PC端导航栏高度间距 */
}

/* 移动端轮播图顶部间距 */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 0; /* 移动端通过body padding处理 */
  }
}

/* 页面顶部间隔占位（替代删除的Banner） */
.page-top-spacer {
  height: 96px; /* PC端导航栏高度间距 */
}

/* 移动端页面顶部间隔 */
@media (max-width: 768px) {
  .page-top-spacer {
    height: 0; /* 移动端通过body padding处理 */
  }
}

/* 导航栏公司名称悬停时保持当前颜色 */
#navbar span.ml-2:hover {
  opacity: 0.9;
}

/* 产品中心按钮展开时保持蓝色背景（与下方规则保持一致） */
#productsMegaWrap.open #productsBtn,
#productsMegaWrap.open > #productsBtn,
div#productsMegaWrap.open #productsBtn,
div#productsMegaWrap.open > #productsBtn,
.open > #productsBtn,
#productsMegaWrap.open a#productsBtn,
div#productsMegaWrap.open a#productsBtn {
  color: #ffffff !important;
  background: #1d4ed8 !important;
}

/* 导航栏链接和按钮 - 悬停时蓝色背景和白色文字 */
#navbar > div a:not(#productsMega a):not(#mobileMenu a):hover,
#navbar > div button:not(.level1-item):not(.level2-item):not(#mobileMenu button):hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease-in-out !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* 移除所有导航栏active样式的默认规则 */
#navbar a.active,
#navbar button.active {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0.5rem 1rem !important;
  background-image: none !important;
}

/* 首页特殊处理：未滚动时首页链接不显示active样式 */
body.homepage #navbar:not(.scrolled) a[href="index.html"].active,
body.homepage #navbar:not(.scrolled) a[href="/"].active,
body.homepage #navbar:not(.scrolled) a[href="./index.html"].active {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 首页滚动后显示active样式 */
body.homepage #navbar.scrolled a[href="index.html"].active,
body.homepage #navbar.scrolled a[href="/"].active,
body.homepage #navbar.scrolled a[href="./index.html"].active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* 非首页的导航链接active样式（始终显示） */
body:not(.homepage) #navbar a.active,
body:not(.homepage) #navbar button.active:not(#menuBtn) {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* 首页滚动后其他链接的active样式 */
body.homepage #navbar.scrolled a.active:not([href="index.html"]):not([href="/"]):not([href="./index.html"]),
body.homepage #navbar.scrolled button.active:not(#menuBtn) {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* LOGO图片 - 保持原始样式 */
#navbar img {
  filter: none !important;
}

/* LOGO点击区域悬停效果 */
#logoClickArea {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#logoClickArea:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

#logoClickArea:active {
  transform: scale(0.98);
}

/* 产品卡片图片区域悬停效果 */
.product-image-area {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 240px; /* 固定高度，确保所有卡片图片区域一致 */
  min-height: 240px;
  max-height: 240px;
  flex-shrink: 0; /* 防止被压缩 */
}

.product-image-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 8px;
}

.product-image-area:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

.product-image-area:active {
  transform: translateY(0);
}

/* ========================================
   产品中心页面 - 侧边栏分类菜单样式
======================================== */
#category-sidebar {
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

#category-sidebar::-webkit-scrollbar {
  width: 4px;
}

#category-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

#category-sidebar::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 2px;
}

#category-sidebar::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

/* 分类项样式 */
/* .category-item a {
  border-right: 3px solid transparent;
} */

/* .category-item a.active,
.category-item a:hover {
  border-right-color: #0066CC;
} */
/* 二级分类展开动画 */
#category-sidebar [id^="subcategory-"] {
  transition: all 0.2s ease-out;
}

/* 箭头旋转 */
#category-sidebar .rotate-180 {
  transform: rotate(180deg);
}

/* 移动端侧边栏样式 */
@media (max-width: 1023px) {
  #category-sidebar {
    max-height: 300px;
  }
  
  .category-item a {
    border-right: none;
    border-left: 3px solid transparent;
  }
  
  .category-item a.active,
  .category-item a:hover {
    border-right-color: transparent;
    border-left-color: #0066CC;
  }
}

/* 产品中心面包屑样式 */
#breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

#breadcrumb a,
#breadcrumb span {
  white-space: nowrap;
}

/* ========================================
   新版产品卡片样式 - 参考设计图
======================================== */
.product-card-new {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), -4px 0 12px rgba(0, 163, 224, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8f4fc;
  position: relative;
}

.product-card-new::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #00A3E0 0%, #0066CC 100%);
  border-radius: 12px 0 0 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card-new:hover {
  box-shadow: 0 8px 32px rgba(0, 102, 204, 0.15), -4px 0 16px rgba(0, 163, 224, 0.12);
  transform: translateY(-6px);
}

.product-card-new:hover::before {
  opacity: 1;
}

/* 产品卡片图片区域 */
.product-card-image {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #f8fafc 0%, #eef5fb 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px 12px 0 0;
}

/* 无图片占位符 */
.no-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #94a3b8;
}

.no-image-placeholder svg {
  width: 48px;
  height: 48px;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform 0.4s ease;
}

.product-card-new:hover .product-card-image img {
  transform: scale(1.05);
}

/* 产品卡片内容区域 */
.product-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 产品卡片标题 */
.product-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px 0;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-title:hover {
  color: #0066CC;
}

/* 产品卡片描述 */
.product-card-desc {
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.6;
  margin: 0 0 16px 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 产品卡片链接 */
.product-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #00A3E0;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
}

.product-card-link:hover {
  color: #0066CC;
}

.product-card-link .arrow {
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.product-card-link:hover .arrow {
  transform: translateX(4px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .product-card-content {
    padding: 16px;
  }
  
  .product-card-title {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
  
  .product-card-desc {
    font-size: 0.8rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 12px;
  }
  
  .product-card-link {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .product-card-content {
    padding: 12px;
  }
  
  .product-card-title {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
  
  .product-card-desc {
    font-size: 0.75rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 10px;
  }
}

/* 移动端菜单按钮颜色 - 黑色以匹配其他导航元素 */
#navbar #menuBtn {
  color: #2C3E50 !important;
}

/* 导航栏滚动后保持一致的样式 */
#navbar.scrolled img {
  filter: none !important;
}

#navbar.scrolled #menuBtn {
  color: #2C3E50 !important;
}

/* 产品中心按钮特殊处理 */
#productsMegaWrap.open #productsBtn {
  color: #ffffff !important;
  background: #1d4ed8 !important;
}

/* 产品分类侧边栏 - 统一样式 */

/* 全部产品链接 */
.sidebar-link {
  display: flex;
  align-items: center;
  color: #374151;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-link:hover {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.8) 0%, rgba(0, 163, 224, 0.8) 100%);
  color: #ffffff;
}

.sidebar-link.active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
  color: #ffffff;
  font-weight: 500;
}

/* 一级分类行 - 整行布局 */
.category-row {
  display: flex;
  align-items: stretch;
  transition: background 0.2s ease;
}

.category-row .category-name {
  flex: 1;
  display: flex;
  align-items: center;
  color: #374151;
  transition: color 0.2s ease;
}

.category-row .category-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* 整行悬浮效果 */
.category-row:hover {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.8) 0%, rgba(0, 163, 224, 0.8) 100%);
}

.category-row:hover .category-name,
.category-row:hover .category-toggle {
  color: #ffffff;
}

/* 整行选中效果 */
.category-row.active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
}

.category-row.active .category-name {
  color: #ffffff;
  font-weight: 500;
}

.category-row.active .category-toggle {
  color: #ffffff;
}

/* 二级分类面板 */
.subcategory-panel {
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
}

.subcategory-panel .sidebar-link {
  background: transparent;
  color: #4b5563;
}

.subcategory-panel .sidebar-link:hover {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.8) 0%, rgba(0, 163, 224, 0.8) 100%);
  color: #ffffff;
}

.subcategory-panel .sidebar-link.active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
  color: #ffffff;
  font-weight: 500;
}

/* 兼容旧的 .category-item 样式 */
.category-item a {
  transition: background 0.2s ease, color 0.2s ease;
}

/* 全部产品链接保持flex布局 */
.category-item > a.sidebar-link {
  display: flex;
  align-items: center;
}

.category-item > a:hover {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.8) 0%, rgba(0, 163, 224, 0.8) 100%) !important;
  color: #ffffff !important;
}

.category-item > a.active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
}

/* 所有使用渐变背景的导航元素 */
.bg-gradient-to-r.from-\[\#0066CC\].to-\[\#00A3E0\],
.hover\:bg-gradient-to-r.hover\:from-\[\#0066CC\].hover\:to-\[\#00A3E0\]:hover {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
}

/* 产品中心按钮和导航链接悬停效果 - 统一在文件末尾定义 */

/* ========== 全局规则：蓝色背景必须白色文字 ========== */
/* 覆盖所有Tailwind和自定义样式 */

/* 任何蓝色背景的元素，文字必须为白色 */
[style*="background: #1d4ed8"],
[style*="background:#1d4ed8"],
[style*="background-color: #1d4ed8"],
[style*="background-color:#1d4ed8"],
.bg-blue-700,
.bg-blue-600,
[class*="bg-blue"] {
  color: #ffffff !important;
}

/* 导航栏内所有蓝色背景元素 */
#navbar [style*="background"],
#navbar .bg-blue-700,
#navbar .bg-blue-600 {
  color: #ffffff !important;
}

/* 产品中心菜单内所有蓝色背景元素 */
#productsMega [style*="background: #1d4ed8"],
#productsMega [style*="background:#1d4ed8"],
#productsMega .bg-blue-700,
#productsMega .level1-item[style*="background"],
#productsMega .level2-item[style*="background"] {
  color: #ffffff !important;
}

/* 强制所有子元素也为白色 */
[style*="background: #1d4ed8"] *,
[style*="background:#1d4ed8"] *,
.bg-blue-700 *,
.bg-blue-600 * {
  color: #ffffff !important;
}

/* 导航链接统一样式 */
#navbar a,
#navbar button {
  transition: all 0.2s ease;
  position: relative;
}

/* 产品中心Megamenu优化 */
#productsMega {
  border-color: var(--border-gray);
  box-shadow: var(--shadow-lg);
  /* color已移除，由各级菜单自己的样式控制 */
  background: #ffffff !important; /* 强制白色背景 */
}

/* 三级菜单样式 */
#navbar #productsMega {
  background: #ffffff !important;
  /* color已移除，由各级菜单自己的样式控制 */
}

/* #productsMega * 继承规则已移除，由 navbar.css 统一管理 */

/* productsMega 文字颜色已移至 navbar.css 统一管理 */

/* 一级和二级菜单样式已移至 navbar.css 统一管理 */

/* 三级菜单样式已移至 navbar.css 统一管理 */

/* 分组标题颜色 */
#productsMega .text-gray-500,
#productsMega .mega-right .text-gray-500 {
  color: #6B7280 !important; /* gray-500 */
}

/* 一级和二级菜单激活和悬停状态已移至 navbar.css 统一管理 */

/* #productsMega a 样式已移至 navbar.css 统一管理 */

/* 移动端菜单展开样式（初始在 HTML 中使用 opacity-0 invisible） */
#mobileMenu.open {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 移动端菜单文字颜色 */
#navbar #mobileMenu {
  background: #ffffff !important;
  color: #2C3E50;
}

/* 移动端"产品中心"按钮展开时的选中效果 - 蓝底白字 */
#mobileProductsToggle.active,
#navbar #mobileProductsToggle.active {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* 移动端"产品中心"按钮展开时子元素也要白色 */
#mobileProductsToggle.active *,
#navbar #mobileProductsToggle.active * {
  color: #ffffff !important;
}

/* 移动端菜单一级和二级分类激活状态 - 蓝底白字（最高优先级） */
#navbar #mobileMenu .mobile-category-toggle.active,
#navbar #mobileMenu .mobile-sub-toggle.active {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* 移动端菜单激活状态的子元素也要白色（最高优先级） */
#navbar #mobileMenu .mobile-category-toggle.active *,
#navbar #mobileMenu .mobile-sub-toggle.active * {
  color: #ffffff !important;
}

/* 移动端菜单悬停状态 */
/* 移动端菜单悬停状态（排除"产品中心"、语言切换按钮和三级菜单按钮，避免与蓝底白字规则冲突） */
#navbar #mobileMenu a:hover:not(#mobileLangToggle):not(#mobileProductsToggle):not(.mobile-category-toggle):not(.mobile-sub-toggle),
#navbar #mobileMenu button:hover:not(#mobileLangToggle):not(#mobileProductsToggle):not(.mobile-category-toggle):not(.mobile-sub-toggle) {
  color: #0066CC;
}

/* Swiper 分页样式微调 - 光电主题 */
.swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 0; /* 直角 */
  background: rgba(255, 255, 255, 0.8);
}

.swiper .swiper-pagination-bullet-active {
  background: var(--primary-blue);
}

/* 让中文在容器内两端对齐并占满宽度（包含最后一行） */
.cn-justify-fill {
  text-align: justify;
  text-justify: inter-ideograph;
}
.cn-justify-fill::after {
  content: '';
  display: inline-block;
  width: 100%;
}

/* 英文排版自适应：在换行时自动缩小字号以保持在一行内 */
.lang-en .adaptive-text {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 英文标题自适应 */
.lang-en h2,
.lang-en h3,
.lang-en h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 英文按钮文本自适应 */
.lang-en .btn-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

/* 英文导航项自适应 */
.lang-en nav a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 英文产品卡片标题自适应 */
.lang-en .swiper-slide h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 英文模式下导航栏公司名称自适应 */
.lang-en #navbar .ml-2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 移动端英文公司名称字号调整 */
@media (max-width: 640px) {
  .lang-en #navbar .ml-2 {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.2;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .lang-en #navbar .ml-2 {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.3;
  }
}

/* 响应式英文字号调整 */
@media (max-width: 768px) {
  .lang-en .adaptive-text {
    font-size: 0.9em;
  }
  
  .lang-en h2 {
    font-size: 1.8rem !important;
  }
  
  .lang-en h3 {
    font-size: 1.1rem !important;
  }
  
  .lang-en .btn-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .lang-en .adaptive-text {
    font-size: 0.85em;
  }
  
  .lang-en h2 {
    font-size: 1.6rem !important;
  }
  
  .lang-en h3 {
    font-size: 1rem !important;
  }
  
  .lang-en .btn-text {
    font-size: 0.85rem;
  }
}


/* 企业关键成果区域p标签统一宽度 */
section.container.mx-auto.px-4.py-12.bg-gray-50 .grid.grid-cols-3 div p {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 移动端允许文字换行以保持可读性 */
@media (max-width: 767px) {
  section.container.mx-auto.px-4.py-12.bg-gray-50 .grid.grid-cols-3 div p {
    white-space: normal;
    word-break: break-word;
  }
}


/* 光电风格发光文字效果 */
.text-glow-blue {
  text-shadow: 0 0 6px rgba(37, 99, 235, 0.7), 0 0 14px rgba(59, 130, 246, 0.55);
}
.text-glow-cyan {
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.7), 0 0 14px rgba(6, 182, 212, 0.55);
}

/* 文案胶囊底色微磨砂，提升对比度 */
.bg-black\/30 {
  backdrop-filter: blur(2px) saturate(120%);
}

/* LOGO组合动画：从分散到聚合（关键帧） */
@keyframes logoAssemble {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* LOGO动画类 */
.animate-logo {
    opacity: 0;
}
.animate-logo-show {
    animation: logoAssemble 2.4s ease-out forwards;
}

/* LOGO容器：切片入场与连接点脉冲 */
.logo-container { 
  position: relative; 
  --dot-left: 53%; 
  --dot-top: 61%;
  /* 保持LOGO原始宽高比 1280:1020 = 1.255:1 */
  aspect-ratio: 1.255;
}

/* 确保LOGO图片填充整个容器 */
.logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 使用伪元素复制 LOGO 图像并做左右切片入场动画，营造"由部件组合"的感觉 */
.logo-container.assemble::before,
.logo-container.assemble::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../image/logo/logo.webp');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(0.2px);
}
/* 左侧切片 */
.logo-container.assemble::before {
  clip-path: polygon(0% 0%, 52% 0%, 52% 100%, 0% 100%);
  transform: translateX(-12%) scale(0.98) rotate(-2deg);
  opacity: 0;
  animation: logoSliceInLeft 1400ms cubic-bezier(.2,.7,.2,1) 120ms forwards;
}
/* 右侧切片 */
.logo-container.assemble::after {
  clip-path: polygon(48% 0%, 100% 0%, 100% 100%, 48% 100%);
  transform: translateX(12%) scale(0.98) rotate(2deg);
  opacity: 0;
  animation: logoSliceInRight 1400ms cubic-bezier(.2,.7,.2,1) 120ms forwards;
}

@keyframes logoSliceInLeft {
  0% { opacity: 0; transform: translateX(-18%) scale(0.95) rotate(-4deg); }
  60% { opacity: .9; transform: translateX(-4%) scale(1.02) rotate(-1deg); }
  100% { opacity: 0; transform: translateX(0) scale(1) rotate(0); }
}
@keyframes logoSliceInRight {
  0% { opacity: 0; transform: translateX(18%) scale(0.95) rotate(4deg); }
  60% { opacity: .9; transform: translateX(4%) scale(1.02) rotate(1deg); }
  100% { opacity: 0; transform: translateX(0) scale(1) rotate(0); }
}

/* M 中间连接点：脉冲发光与轻微漂移，位置可按需要微调 */
.logo-dot {
  position: absolute;
  left: var(--dot-left);
  top: var(--dot-top);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FDB813;
  box-shadow: 0 0 15px rgba(253,184,19,1), 0 0 30px rgba(255,140,0,0.9), 0 0 45px rgba(255,107,0,0.7);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.logo-dot.show { 
  opacity: 1; 
  animation: logoDotPulse 1.5s ease-in-out infinite;
}

/* 激光束容器 */
.laser-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.laser-beams.active {
  opacity: 1;
}

/* 左侧激光束 - 从M的左侧斜线出发，黄色，汇聚到M中心 */
.laser-left {
  position: absolute;
  left: 29%;
  top: 25%;
  width: 0;
  height: 6px;
  background: linear-gradient(80deg, 
    rgba(253, 184, 19, 1) 0%,
    rgba(253, 184, 19, 1) 100%
  );
  box-shadow: 
    0 0 8px rgba(253, 184, 19, 0.9),
    0 0 16px rgba(255, 140, 0, 0.7),
    0 0 24px rgba(255, 140, 0, 0.5),
    0 0 32px rgba(255, 140, 0, 0.3);
  transform-origin: left center;
  border-radius: 2px;
  transform: rotate(48deg);
  opacity: 0;
}

.laser-beams.active .laser-left {
  opacity: 1;
  animation: laserGrowLeft 1.5s linear forwards;
}

/* 右侧激光束 - 从M的右侧斜线出发，黄色，汇聚到M中心 */
.laser-right {
  position: absolute;
  right: 21%;
  top: 26%;
  width: 0;
  height: 6px;
  background: linear-gradient(270deg, 
    rgba(253, 184, 19, 1) 0%,
    rgba(253, 184, 19, 1) 100%
  );
  box-shadow: 
    0 0 8px rgba(253, 184, 19, 0.9),
    0 0 16px rgba(255, 140, 0, 0.7),
    0 0 24px rgba(255, 140, 0, 0.5),
    0 0 32px rgba(255, 140, 0, 0.3);
  transform-origin: right center;
  transform: rotate(315deg);
  border-radius: 2px;
  opacity: 0;
}

.laser-beams.active .laser-right {
  opacity: 1;
  animation: laserGrowRightReverse 1.5s linear forwards;
}

/* 激光生长动画 - 左侧 - 从起点射向终点 */
@keyframes laserGrowLeft {
  0% {
    width: 0;
    opacity: 1;
  }
  20% {
    width: 7.2%;
    opacity: 1;
  }
  40% {
    width: 14.4%;
    opacity: 1;
  }
  60% {
    width: 21.6%;
    opacity: 1;
  }
  80% {
    width: 28.8%;
    opacity: 1;
  }
  100% {
    width: 36%;
    opacity: 1;
  }
}

/* 激光生长动画 - 右侧 - 从起点射向终点 */
@keyframes laserGrowRight {
  0% {
    width: 0;
    opacity: 0;
  }
  10% {
    width: 0;
    opacity: 1;
  }
  20% {
    width: 5%;
    opacity: 1;
  }
  40% {
    width: 10%;
    opacity: 1;
  }
  60% {
    width: 15%;
    opacity: 1;
  }
  80% {
    width: 20%;
    opacity: 1;
  }
  100% {
    width: 25%;
    opacity: 1;
  }
}

/* 激光生长动画 - 右侧反向 - 从右边射向左边 */
@keyframes laserGrowRightReverse {
  0% {
    width: 0;
    opacity: 1;
  }
  20% {
    width: 7.2%;
    opacity: 1;
  }
  40% {
    width: 14.4%;
    opacity: 1;
  }
  60% {
    width: 21.6%;
    opacity: 1;
  }
  80% {
    width: 28.8%;
    opacity: 1;
  }
  100% {
    width: 36%;
    opacity: 1;
  }
}

/* 汇聚时的闪光效果 */
.logo-dot.converge {
  animation: dotConverge 0.8s ease-out forwards !important;
}

@keyframes dotConverge {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    box-shadow: 0 0 0 rgba(253,184,19,0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2);
    box-shadow: 
      0 0 30px rgba(253,184,19,1),
      0 0 60px rgba(255,140,0,1),
      0 0 90px rgba(255,107,0,0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 15px rgba(253,184,19,1),
      0 0 30px rgba(255,140,0,0.9),
      0 0 45px rgba(255,107,0,0.7);
  }
}

@keyframes logoDotShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes logoDotPulse {
  0% { transform: translate(-50%, -50%) scale(0.9); box-shadow: 0 0 12px rgba(253,184,19,1), 0 0 24px rgba(255,140,0,0.85), 0 0 36px rgba(255,107,0,0.6); }
  50% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 20px rgba(253,184,19,1), 0 0 40px rgba(255,140,0,0.95), 0 0 60px rgba(255,107,0,0.8); }
  100% { transform: translate(-50%, -50%) scale(0.9); box-shadow: 0 0 12px rgba(253,184,19,1), 0 0 24px rgba(255,140,0,0.85), 0 0 36px rgba(255,107,0,0.6); }
}

/* 太阳放射光线（仅在 .rays-active 时出现） */
.logo-dot::before {
  content: '';
  position: absolute;
  left: 52%;
  top: 49%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg,
    rgba(253,184,19,0.8) 0deg 6deg,
    transparent 6deg 30deg,
    rgba(255,140,0,0.7) 30deg 36deg,
    transparent 36deg 60deg,
    rgba(253,184,19,0.65) 60deg 66deg,
    transparent 66deg 90deg,
    rgba(255,140,0,0.6) 90deg 96deg,
    transparent 96deg 120deg,
    rgba(253,184,19,0.55) 120deg 126deg,
    transparent 126deg 150deg,
    rgba(255,140,0,0.5) 150deg 156deg,
    transparent 156deg 180deg,
    rgba(253,184,19,0.45) 180deg 186deg,
    transparent 186deg 210deg,
    rgba(255,140,0,0.4) 210deg 216deg,
    transparent 216deg 240deg,
    rgba(253,184,19,0.35) 240deg 246deg,
    transparent 246deg 270deg,
    rgba(255,140,0,0.35) 270deg 276deg,
    transparent 276deg 300deg,
    rgba(253,184,19,0.3) 300deg 306deg,
    transparent 306deg 330deg,
    rgba(255,140,0,0.3) 330deg 336deg,
    transparent 336deg 360deg
  );
  filter: blur(0.6px) drop-shadow(0 0 10px rgba(255,140,0,0.6));
  opacity: 0;
  pointer-events: none;
}
.logo-dot.rays-active::before {
  animation: raysSpin 14s linear 0s 1 forwards, raysShow 600ms ease-out forwards;
}
@keyframes raysSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes raysShow { from { opacity: 0; } to { opacity: 1; } }

/* 导航栏中的光线尺寸稍小 */
nav .logo-dot::before { width: 72px; height: 72px; }

/* 开场层中的 M 连接点：位置与尺寸单独设置（针对更大的 LOGO） */
/* 使用固定位置，不再通过JavaScript动态计算 */
#splash .logo-container { 
  --dot-left: 53%; 
  --dot-top: 61%;
}
#splash .logo-dot {
  width: 14px;
  height: 14px;
}
@media (min-width: 768px) {
  #splash .logo-container { 
    --dot-left: 53%; 
    --dot-top: 61%;
  }
  #splash .logo-dot {
    width: 18px;
    height: 18px;
  }
}

/* 全屏开场层：淡出进入主页 */
#splash {
  opacity: 1;
  transition: opacity 800ms ease-out, visibility 0s linear 800ms;
}
#splash.hidden {
  opacity: 0;
  visibility: hidden;
}

/* =============== 导航 Megamenu 样式 =============== */
#productsMegaWrap { position: relative; }
#productsMega {
  /* 白色面板与阴影、边框已在 HTML 中设置，这里补充动画与定位细节 */
  transform-origin: top left;
  width: 100vw !important;  /* 全屏宽度 */
  left: 0 !important;       /* 从左侧开始 */
  transform: none !important; /* 不需要居中 */
  border-radius: 0; /* 直角 */
}
#productsMega::before { display: none; }

/* 控制可见性（JS 会切换 class） */
.visible { visibility: visible !important; }

/* 左列一级条目：箭头样式（背景和颜色由navbar.html内联样式控制） */
#productsMega .level1-item::after,
#productsMegaWrap .level1-item::after {
  content: "\2192"; /* → */
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: currentColor; opacity: .7;
  z-index: 2;
}
#productsMega .level1-item:hover::after,
#productsMega .level1-item.active::after,
#productsMegaWrap .level1-item:hover::after,
#productsMegaWrap .level1-item.active::after { color: #ffffff; opacity: 1; z-index: 2; }

/* 中列与右列：箭头样式（背景和颜色由navbar.html内联样式控制） */
#productsMega .level2-item,
#productsMegaWrap .level2-item {
  position: relative;
  z-index: 1;
}

#productsMega .level2-item.has-l3,
#productsMegaWrap .level2-item.has-l3 { position: relative; padding-right: 22px; z-index: 1; } /* 有三级菜单的二级项箭头 */
#productsMega .level2-item.has-l3::after,
#productsMegaWrap .level2-item.has-l3::after {
  content: "\2192"; /* → */
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: #9ca3af; /* gray-400 */
  z-index: 2;
}
#productsMega .level2-item.has-l3:hover::after,
#productsMega .level2-item.has-l3.active::after,
#productsMegaWrap .level2-item.has-l3:hover::after,
#productsMegaWrap .level2-item.has-l3.active::after { color: #ffffff !important; z-index: 2; }

/* 右侧型号列表：限制高度并允许滚动 */
/* 面板不整体滚动，仅列可滚动 */
#productsMega { overflow: visible; }
#productsMega .mega-left,
#productsMega .mega-mid,
#productsMega .mega-right {
  max-height: 40vh; /* 40%视口高度 */
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}
#productsMega .mega-left::-webkit-scrollbar,
#productsMega .mega-mid::-webkit-scrollbar,
#productsMega .mega-right::-webkit-scrollbar { width: 0; height: 0; }

/* 隐藏滚动条但保留滚动能力 */
#productsMega .mega-left,
#productsMega .mega-mid,
#productsMega .mega-right {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#productsMega .mega-left::-webkit-scrollbar,
#productsMega .mega-mid::-webkit-scrollbar,
#productsMega .mega-right::-webkit-scrollbar { width: 0; height: 0; }

/* 三级菜单样式已移至 navbar.css 统一管理 */

/* 展开时在"产品中心"正下方显示黑色小三角 */
#productsMegaWrap.open #productsBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 0px);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #2C3E50; /* 深灰色 */
}
/* 滚动条优化（webkit） */
#productsMega .mega-right::-webkit-scrollbar { width: 8px; }
#productsMega .mega-right::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 0; }
#productsMega .mega-right::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* 专利证书图片框样式 - 光电行业风格 */
.patent-card-new {
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.patent-card-inner {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-light);
  border: 2px solid var(--border-gray);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.patent-card-new:hover .patent-card-inner {
  transform: translateY(-6px);
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-lg);
}

.patent-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.patent-card-new:hover .patent-card-inner img {
  transform: scale(1.15);
}

/* 悬浮遮罩层 - 透明黑色遮罩 */
.patent-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.patent-card-new:hover .patent-overlay {
  opacity: 1;
}

/* 专利标签 */
.patent-label {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  transition: color 0.3s ease;
}

.patent-card-new:hover .patent-label {
  color: var(--primary-blue);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .patent-card-inner {
    border-width: 1px;
  }
  
  .patent-label {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}

/* ========================================
   光电行业通用组件样式
======================================== */

/* 按钮样式 - 主按钮 */
.btn-primary {
  background: var(--primary-blue);
  color: white;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.15);
}

/* 按钮样式 - 次按钮 */
.btn-secondary {
  background: white;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* 产品导航按钮样式 */
.product-nav {
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  color: rgba(0, 102, 204, 0.8) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 产品导航按钮悬停效果 */
.product-nav:hover {
  transform: scale(1.1);
  color: rgba(0, 163, 224, 1) !important;
}

.product-nav:active {
  transform: scale(1.05);
}

/* 禁用状态样式 */
.product-nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 确保产品区域的grid布局正确 */
.product-row {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* 左按钮：占第1列 */
.product-row .col-span-1:first-child {
  grid-column: 1 / 2 !important;
}

/* 中间轮播：占第2-9列 */
.product-row .col-span-8 {
  grid-column: 2 / 10 !important;
}

/* 右按钮：占第10列 */
.product-row .col-span-1:last-child {
  grid-column: 10 / 11 !important;
}

/* 左按钮容器 */
.product-row > div:first-child {
  justify-self: center !important;
}

/* 右按钮容器 */
.product-row > div:last-child {
  justify-self: center !important;
}

/* 产品轮播容器 - 确保悬停效果不被裁剪 */
.productSwiper {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -10px;
  margin-bottom: -10px;
  overflow: hidden !important;
}

/* 产品轮播的每个slide - 确保高度一致 */
.productSwiper .swiper-slide {
  height: auto; /* 让slide高度自适应内容 */
  display: flex; /* 使用flex布局 */
}

/* 确保产品卡片在slide中占满高度 */
.productSwiper .swiper-slide .product-card-unified {
  width: 100%;
  height: 100%;
}

/* 新版产品卡片在swiper中的样式 */
.productSwiper .swiper-slide .product-card-new {
  width: 100%;
  height: 100%;
}

/* 产品行容器 - 确保按钮不被遮挡 */
.product-row {
  position: relative;
  z-index: 1;
}

/* 产品导航按钮容器 - 提高层级 */
.product-row > div:first-child,
.product-row > div:last-child {
  position: relative;
  z-index: 20;
}

/* 产品卡片统一样式 */
.product-card-unified {
  background: white;
  border: 2px solid var(--border-gray);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 450px; /* 确保最小高度一致 */
}

/* 产品卡片内容区域 - 使用flex布局确保按钮在底部 */
.product-card-unified > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.5rem; /* 统一内边距 */
}

/* 产品卡片标题 - 固定高度 */
.product-card-unified h3 {
  min-height: 2.5rem; /* 确保标题区域有最小高度 */
  margin-bottom: 0.5rem;
}

/* 产品卡片描述区域 - 限制高度并允许滚动 */
.product-card-unified p {
  flex: 1;
  min-height: 3rem; /* 确保描述区域有最小高度 */
  max-height: 4rem; /* 限制最大高度，超出显示省略号 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 1rem;
}

/* 产品卡片按钮区域 - 固定在底部 */
.product-card-unified a {
  margin-top: auto;
  align-self: flex-start; /* 按钮左对齐 */
}

.product-card-unified:hover {
  border: 2px solid var(--primary-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  z-index: 15;
}

/* 产品卡片图片容器 - 无圆角样式已在全局设置 */

/* 标题装饰线 */
.title-decorator {
  width: 60px;
  height: 3px;
  background: var(--primary-blue);
  margin: 0 auto;
}

/* 标题装饰线左对齐 */
.title-decorator-left {
  width: 60px;
  height: 3px;
  background: var(--primary-blue);
}

/* 文字链接统一色 */
a.link-primary {
  color: var(--primary-blue);
  transition: color 0.2s ease;
}

a.link-primary:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

/* 图标光效 - 用于光学元件展示 */
.optic-glow {
  filter: drop-shadow(0 0 8px rgba(0, 163, 224, 0.3));
}

.optic-glow:hover {
  filter: drop-shadow(0 0 16px rgba(0, 163, 224, 0.6));
  transition: filter 0.3s ease;
}

/* ========================================
   扁平化设计全局样式
======================================== */

/* 统一圆角（无圆角，直角风格） */
* {
  border-radius: 0 !important;
}

/* 统一边框颜色 */
.border,
[class*="border-"] {
  border-color: var(--border-gray) !important;
}

/* 统一阴影 */
.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow,
.shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.shadow-lg,
.shadow-xl {
  box-shadow: var(--shadow-lg) !important;
}

/* 移除所有默认圆角 */
input,
button,
select,
textarea,
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl {
  border-radius: 0 !important;
}

/* ========================================
   响应式优化
======================================== */

/* 移动端间距优化 */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* 排除面包屑导航section、首页轮播图区域，它们有自己的padding-top设置 */
  section:not(#navbar-container + section.bg-white):not(body > section.bg-white:first-of-type):not(.hero-section) {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  h1 {
    font-size: 1.35rem !important;
  }
  
  h2 {
    font-size: 1.2rem !important;
  }
  
  h3 {
    font-size: 1.05rem !important;
  }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 720px;
  }
}

/* 大屏优化 */
@media (min-width: 1441px) {
  .container {
    max-width: 1280px;
  }
}

/* ========================================
   光电行业特色视觉元素
======================================== */

/* 光学渐变背景 */
.optic-gradient-bg {
  background: rgba(0, 102, 204, 0.03);
}

/* 面包屑导航样式 */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.875rem; /* 14px */
}

@media (min-width: 768px) {
  .breadcrumb-nav {
    font-size: 1rem; /* 16px */
  }
}

.breadcrumb-nav a {
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.breadcrumb-nav a:hover {
  color: #0066CC;
}

.breadcrumb-nav svg {
  flex-shrink: 0;
}

.breadcrumb-nav .home-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
}

.breadcrumb-nav .separator {
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem;
  color: #9CA3AF; /* gray-400 */
  flex-shrink: 0;
}

.breadcrumb-nav .current {
  color: #0066CC;
  font-weight: 500;
}

/* 光束动画效果（用于装饰） */
@keyframes lightBeam {
  0%, 100% {
    opacity: 0.3;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.6;
    transform: translateX(100%);
  }
}

.light-beam {
  position: relative;
  overflow: hidden;
}

.light-beam::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 163, 224, 0.1);
  animation: lightBeam 3s ease-in-out infinite;
}

/* 精准分割线 */
.precision-divider {
  height: 2px;
  background: var(--primary-blue);
}

/* 文字高亮效果 - 光学风格 */
.text-highlight {
  position: relative;
  display: inline-block;
}

.text-highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.text-highlight:hover::after {
  transform: scaleX(1);
}

/* 卡片悬停光效 */
.card-glow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-glow:hover {
  box-shadow: 
    0 0 0 1px var(--primary-blue),
    0 8px 24px rgba(0, 102, 204, 0.15),
    0 0 40px rgba(0, 163, 224, 0.1);
}

/* ========================================
   企业视频播放器样式
======================================== */

/* 视频容器样式 */
.enterprise-video {
  position: relative;
  cursor: pointer;
}

/* 隐藏默认控制条（未播放时） */
.enterprise-video::-webkit-media-controls {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.enterprise-video:hover::-webkit-media-controls,
.enterprise-video::-webkit-media-controls-panel {
  opacity: 0;
}

/* 播放状态时显示控制条 */
.enterprise-video:not([paused])::-webkit-media-controls {
  opacity: 1;
}

/* 隐藏进度条和其他控制元素（静态时） */
.enterprise-video::-webkit-media-controls-timeline,
.enterprise-video::-webkit-media-controls-current-time-display,
.enterprise-video::-webkit-media-controls-time-remaining-display {
  display: none;
}

/* 视频播放按钮覆盖层 */
.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.video-play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 视频封面图层 */
#videoPosterOverlay {
  z-index: 5;
  transition: opacity 0.3s ease;
}

#videoPosterOverlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 圆形播放按钮背景 */
.play-button-circle {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  left: 2px; /* 微调使三角形视觉居中 */
}

.video-play-overlay:hover .play-button-circle {
  background: rgba(0, 102, 204, 0.8);
  transform: scale(1.1);
}

/* 播放三角形 */
.play-button-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
  margin-left: 4px; /* 微调三角形位置 */
  transition: all 0.3s ease;
}

.video-play-overlay:hover .play-button-triangle {
  border-color: transparent transparent transparent white;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .play-button-circle {
    width: 60px;
    height: 60px;
  }
  
  .play-button-triangle {
    border-width: 10px 0 10px 16px;
    margin-left: 3px;
  }
}

/* 产品表格样式补充 */
table th, table td {
    border-color: #e5e7eb;
}
table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

/* 移动端菜单过渡优化 */
#mobileMenu {
    transition-property: opacity, visibility;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* 轮播图文字层样式：背景透明，不加暗色底 */
.swiper-slide .absolute {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 轮播图图片优化 - 适应容器高度 */
.bannerSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .swiper-slide .absolute {
        padding: 10px 20px;
    }
    .swiper-slide h2 {
        font-size: 2xl !important;
    }
    .swiper-slide p {
        font-size: 1rem !important;
    }
}

/* ========== 产品详情页样式 ========== */

/* 产品图片容器 */
.main-image {
    transition: all 0.3s ease;
}

.main-image img {
    transition: transform 0.3s ease;
}

.main-image img:hover {
    transform: scale(1.05);
}

/* 缩略图样式 */
.thumbnail-item {
    transition: all 0.3s ease;
}

.thumbnail-item:hover {
    border-color: #0066CC !important;
    transform: scale(1.05);
}

/* 产品参数表格 */
.product-info table {
    border: 1px solid #E5E7EB;
}

.product-info table tr:hover {
    background: #F9FAFB;
}

/* 下载按钮样式 */
.download-item {
    transition: all 0.3s ease;
}

.download-item:hover {
    transform: translateX(4px);
}

.download-item button {
    box-shadow: 0 2px 8px rgba(0,102,204,0.2);
    transition: all 0.3s ease;
}

.download-item button:hover {
    box-shadow: 0 4px 12px rgba(0,102,204,0.4);
    transform: translateY(-2px);
}

/* 图片预览模态框 */
#imageModal {
    z-index: 9999;
    backdrop-filter: blur(5px);
}

#imageModal img {
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}

/* 相关产品卡片 */
.related-product-card {
    transition: all 0.3s ease;
}

.related-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 专利证书全屏预览模态框 */
.patent-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

.patent-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.patent-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: zoomIn 0.3s ease;
}

.patent-modal-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.patent-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000;
}

.patent-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

.patent-overlay {
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .patent-modal-content {
        max-width: 95%;
        max-height: 95%;
    }
    
    .patent-modal-close {
        top: 10px;
        right: 10px;
        padding: 6px;
    }
    
    .patent-modal-close svg {
        width: 24px;
        height: 24px;
    }
}

/* ===== 产品列表页样式 ===== */
.product-list-card {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.product-list-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.15);
}

/* ===== 产品中心页样式 ===== */
.product-category-card {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.product-category-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-blue);
    box-shadow: 0 15px 35px rgba(0, 102, 204, 0.2);
}

/* ========================================
   终极覆盖规则 - 必须放在CSS文件最后
   确保蓝色背景的文字始终为白色
======================================== */

/* 覆盖Tailwind的所有颜色类 */
.hover\:text-blue-600:hover,
.hover\:text-blue-500:hover,
.text-blue-600,
.text-blue-500 {
  color: inherit !important;
}

/* 导航栏：hover状态 - 蓝色背景 = 白色文字 */
#navbar [style*="background: #1d4ed8"],
#navbar [style*="background:#1d4ed8"] {
  /* 渐变背景效果 */
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  /* 文字颜色 */
  color: #ffffff !important;
  /* 平滑过渡动画 */
  transition: all 0.3s ease-in-out !important;
  /* 增强的阴影效果 */
  box-shadow: var(--shadow-md) !important;
  /* 轻微上浮效果 */
  transform: translateY(-2px) !important;
}

/* productsMega 菜单样式已移至 navbar.css 统一管理 */

/* 移动端菜单：蓝色背景 = 白色文字 */
#mobileMenu .mobile-category-toggle.active,
#mobileMenu .mobile-category-toggle.active *,
#mobileMenu .mobile-sub-toggle.active,
#mobileMenu .mobile-sub-toggle.active * {
  color: #ffffff !important;
}

/* 全局规则：任何蓝色背景都必须白色文字 */
[style*="background: rgb(29, 78, 216)"],
[style*="background: #1d4ed8"],
[style*="background:#1d4ed8"],
[style*="background-color: #1d4ed8"],
[style*="background-color:#1d4ed8"],
[class*="bg-blue-7"],
[class*="bg-blue-6"] {
  color: #ffffff !important;
}

/* 强制所有子元素继承白色 */
[style*="background: #1d4ed8"] *,
[style*="background:#1d4ed8"] *,
[class*="bg-blue-7"] *,
[class*="bg-blue-6"] * {
  color: #ffffff !important;
}

/* ========================================
   最终覆盖规则 - 必须放在最后
   产品中心按钮展开时必须白色
======================================== */

/* 产品中心按钮展开时 - 最高优先级 */
#productsMegaWrap.open #productsBtn,
#productsMegaWrap.open > a#productsBtn,
div.relative.open #productsBtn,
div.relative.open > a#productsBtn,
[id="productsMegaWrap"].open #productsBtn,
[id="productsMegaWrap"].open > a#productsBtn {
  color: #ffffff !important;
  background: #1d4ed8 !important;
}

/* 产品中心按钮悬停时 - 最高优先级 */
#productsBtn:hover,
a#productsBtn:hover,
[id="productsBtn"]:hover,
#navbar #productsBtn:hover,
#navbar a#productsBtn:hover,
#navbar [id="productsBtn"]:hover {
  color: #2C3E50 !important;
  background: transparent !important;
}

/* 产品中心按钮在megamenu激活时保持蓝色背景 - 最高优先级 */
#productsBtn.mega-active,
a#productsBtn.mega-active,
[id="productsBtn"].mega-active,
#navbar #productsBtn.mega-active,
#navbar a#productsBtn.mega-active,
#navbar [id="productsBtn"].mega-active,
nav#navbar #productsBtn.mega-active,
nav#navbar a#productsBtn.mega-active,
div#productsMegaWrap #productsBtn.mega-active,
div#productsMegaWrap a#productsBtn.mega-active,
#navbar a[id="productsBtn"].mega-active,
nav#navbar a[id="productsBtn"].mega-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  /* #1d4ed8 !important; */
  padding: 0.5rem 1rem !important;
}

/* 确保mega-active状态下的所有子元素也是白色 */
#productsBtn.mega-active *,
a#productsBtn.mega-active *,
#navbar #productsBtn.mega-active *,
#navbar a#productsBtn.mega-active *,
nav#navbar a#productsBtn.mega-active * {
  color: #ffffff !important;
}

/* ==================== 三级菜单样式修复 ==================== */
/* 将三级菜单样式统一为与一二级菜单相同的大小和样式 */

/* 产品中心Megamenu - 三级菜单链接基础样式 */
#productsMega .mega-right a,
#productsMega .level3-panel a,
#productsMega .mega-right ul li a,
#productsMega .level3-panel ul li a {
  display: block !important;
  width: 100% !important;
  color: #2C3E50 !important; /* 与一二级菜单相同的深色 */
  font-size: 1rem !important; /* 16px - 与一二级菜单相同 */
  font-weight: 400 !important; /* 正常字重 */
  padding: 0.5rem 0.75rem !important; /* py-2 px-3 - 与一二级菜单相同 */
  margin: 0 !important;
  line-height: 1.5 !important; /* 与一二级菜单相同的行高 */
  box-sizing: border-box !important;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

/* 三级菜单链接hover状态 - 增强版（所有状态下都生效） */
#productsMega .mega-right a:hover,
#productsMega .level3-panel a:hover,
#productsMega .mega-right ul li a:hover,
#productsMega .level3-panel ul li a:hover,
#productsMega .mega-right li:hover a,
#productsMega .level3-panel li:hover a,
#navbar.scrolled #productsMega .mega-right a:hover,
#navbar.scrolled #productsMega .level3-panel a:hover,
#navbar.scrolled #productsMega .mega-right ul li a:hover,
#navbar.scrolled #productsMega .level3-panel ul li a:hover,
#navbar.scrolled #productsMega .mega-right li:hover a,
#navbar.scrolled #productsMega .level3-panel li:hover a {
  /* background: #1d4ed8 !important; 深蓝背景 */
  color: #ffffff !important; /* 白色文字 */
}

/* 三级菜单悬停时的所有子元素也变白（所有状态下都生效） */
#productsMega .mega-right a:hover *,
#productsMega .level3-panel a:hover *,
#productsMega .mega-right ul li a:hover *,
#productsMega .level3-panel ul li a:hover *,
#productsMega .mega-right li:hover a *,
#productsMega .level3-panel li:hover a *,
#navbar.scrolled #productsMega .mega-right a:hover *,
#navbar.scrolled #productsMega .level3-panel a:hover *,
#navbar.scrolled #productsMega .mega-right ul li a:hover *,
#navbar.scrolled #productsMega .level3-panel ul li a:hover *,
#navbar.scrolled #productsMega .mega-right li:hover a *,
#navbar.scrolled #productsMega .level3-panel li:hover a * {
  color: #ffffff !important;
}

/* 三级菜单列表容器 */
#productsMega .level3-panel ul,
#productsMega .mega-right ul {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 三级菜单列表项 */
#productsMega .level3-panel ul li,
#productsMega .mega-right ul li {
  width: 100% !important;
  margin: 0.25rem 0 !important; /* space-y-1 - 与一二级菜单相同的间距 */
  padding: 0 !important;
  list-style: none !important;
}

#productsMega .level3-panel ul li:first-child,
#productsMega .mega-right ul li:first-child {
  margin-top: 0 !important;
}

/* 三级菜单span元素（暂无型号等） */
#productsMega .level3-panel ul li span,
#productsMega .mega-right ul li span {
  display: block !important;
  width: 100% !important;
  font-size: 1rem !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: #9CA3AF !important;
  font-style: italic !important;
}

/* 波长分组标题 */
#productsMega .level3-panel .wavelength-label,
#productsMega .mega-right .wavelength-label {
  font-size: 0.75rem !important;
  color: #2C3E50 !important;
  padding: 0.5rem 0.75rem !important;
  display: block !important;
  width: 100% !important;
  font-weight: 500 !important;
  margin: 0.5rem 0 0.25rem 0 !important;
}

/* 确保三级菜单容器不会限制宽度 */
#productsMega .mega-right,
#productsMega .level3-panel {
  width: 100% !important;
}

/* 隐藏所有菜单项的边框 */
#productsMega .level1-item,
#productsMega .level2-item,
#productsMega .mega-right a,
#productsMega .level3-panel a,
#productsMega .mega-left,
#productsMega .mega-mid,
#productsMega .mega-right {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* 隐藏菜单列之间的分隔线 */
#productsMega .mega-left,
#productsMega .mega-mid {
  border-right: none !important;
}

/* 确保没有任何边框样式 */
#productsMega * {
  border: none !important;
}

/* ==================== 产品分类链接悬停效果 ==================== */
/* 产品分类页面的子分类链接悬停效果：字体变大变白 */
.product-category-link {
  position: relative;
  overflow: hidden;
  color: #2C3E50;
}

.product-category-link:hover {
  background: #3B82F6;
  color: #FFFFFF;
  font-size: 1rem; /* 从0.875rem(14px)变为1rem(16px) */
  font-weight: 600;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 关于我们文本面板：超出可滚动且隐藏滚动条 */
.about-text-panel {
  flex: 1;
  min-height: 0; /* 允许flex子元素缩小 */
  max-height: 400px; /* 最大高度400px，超过后触发滚动 */
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-right: 0.5rem; /* 为滚动条留出空间 */
}
.about-text-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 确保关于我们区域使用flex布局 */
.md\:col-span-4.flex.flex-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ========================================
   一级和二级菜单样式覆盖 - 最高优先级
   确保悬停和激活时文字为白色
======================================== */

/* 一级菜单：悬停和激活状态 - 最高优先级 */
body #productsMega .level1-item:hover,
body #productsMegaWrap .level1-item:hover,
body #productsMega .level1-item.active,
body #productsMegaWrap .level1-item.active,
body #productsMega .level1-item:hover *,
body #productsMegaWrap .level1-item:hover *,
body #productsMega .level1-item.active *,
body #productsMegaWrap .level1-item.active *,
div#productsMega .level1-item:hover,
div#productsMegaWrap .level1-item:hover,
div#productsMega .level1-item.active,
div#productsMegaWrap .level1-item.active,
div#productsMega .level1-item:hover *,
div#productsMegaWrap .level1-item:hover *,
div#productsMega .level1-item.active *,
div#productsMegaWrap .level1-item.active * {
  color: #ffffff !important;
}

/* 二级菜单：悬停和激活状态 - 最高优先级 */
body #productsMega .level2-item:hover,
body #productsMegaWrap .level2-item:hover,
body #productsMega .level2-item.active,
body #productsMegaWrap .level2-item.active,
body #productsMega .level2-item:hover *,
body #productsMegaWrap .level2-item:hover *,
body #productsMega .level2-item.active *,
body #productsMegaWrap .level2-item.active *,
div#productsMega .level2-item:hover,
div#productsMegaWrap .level2-item:hover,
div#productsMega .level2-item.active,
div#productsMegaWrap .level2-item.active,
div#productsMega .level2-item:hover *,
div#productsMegaWrap .level2-item:hover *,
div#productsMega .level2-item.active *,
div#productsMegaWrap .level2-item.active * {
  color: #ffffff !important;
}

/* ========================================
   面包屑导航响应式间距
   确保面包屑导航位于固定导航栏下方，不重叠
   导航栏是fixed定位，内部div有py-4（上下各1rem=16px）
   实际导航栏总高度需要根据内容+padding计算
   完全覆盖Tailwind类和内联样式
======================================== */
/* 移动端：首页轮播图区域保持正常间距 */
@media (max-width: 767px) {
  /* 首页轮播图区域：保持正常的顶部间距 */
  body #navbar-container + .hero-section,
  body #navbar-container + section.hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important; /* 通过body的padding-top提供间距 */
  }
  
  /* 其他页面面包屑导航：移动端只需要15px额外间隔（body已有70px padding） */
  body #navbar-container + section.bg-white,
  body > section.bg-white:first-of-type,
  section.bg-white[style*="padding"],
  section.bg-white[style*="height"] {
    padding-top: 15px !important; /* 减少间隔，避免与body padding重复 */
    padding-bottom: 1rem !important;
    min-height: 60px !important;
    height: auto !important;
    margin-top: 0 !important;
  }
  
  /* 页面顶部间隔占位在移动端的额外处理（如果需要） */
  .page-top-spacer + section {
    margin-top: 0 !important;
  }

  /* 覆盖container和h-full类 */
  body #navbar-container + section.bg-white > div.container,
  body > section.bg-white:first-of-type > div.container,
  body #navbar-container + section.bg-white > div.h-full,
  body > section.bg-white:first-of-type > div.h-full {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 覆盖nav的h-full类 */
  body #navbar-container + section.bg-white nav,
  body > section.bg-white:first-of-type nav {
    height: auto !important;
    min-height: auto !important;
  }
}

/* 平板端：面包屑导航顶部间距 */
@media (min-width: 768px) and (max-width: 1023px) {
  body #navbar-container + section.bg-white,
  body > section.bg-white:first-of-type,
  section.bg-white[style*="padding"],
  section.bg-white[style*="height"] {
    padding-top: 100px !important; /* 适中的间距 */
    padding-bottom: 1rem !important;
    min-height: 60px !important;
    height: auto !important;
    margin-top: 0 !important;
  }
}

/* PC端：面包屑导航顶部间距 */
@media (min-width: 1024px) {
  body #navbar-container + section.bg-white,
  body > section.bg-white:first-of-type,
  section.bg-white[style*="padding"],
  section.bg-white[style*="height"] {
    padding-top: 100px !important; /* 与其他页面保持一致 */
    padding-bottom: 1rem !important;
    min-height: 60px !important;
    height: auto !important;
    margin-top: 0 !important;
  }
}

/* ==================== 一二级菜单样式强制覆盖 ==================== */
/* 确保一二级菜单在hover和active状态下文字变白 */
#navbar #productsMega button.level1-item:hover,
#navbar #productsMega button.level1-item.active,
#navbar #productsMegaWrap button.level1-item:hover,
#navbar #productsMegaWrap button.level1-item.active,
#navbar #productsMega button.level2-item:hover,
#navbar #productsMega button.level2-item.active,
#navbar #productsMegaWrap button.level2-item:hover,
#navbar #productsMegaWrap button.level2-item.active {
  /* 渐变背景效果 */
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%) !important;
  /* 文字颜色 */
  color: #ffffff !important;
  /* 平滑过渡动画 */
  transition: all 0.3s ease-in-out !important;
  /* 增强的阴影效果 */
  box-shadow: var(--shadow-md) !important;
  /* 轻微上浮效果 */
  transform: translateY(-2px) !important;
}

/* 面包屑导航样式 */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.875rem; /* 14px */
}

@media (min-width: 768px) {
  .breadcrumb-nav {
    font-size: 1rem; /* 16px */
  }
}

.breadcrumb-nav a {
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.breadcrumb-nav a:hover {
  color: #0066CC;
}

.breadcrumb-nav svg {
  flex-shrink: 0;
}

.breadcrumb-nav .home-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
}

.breadcrumb-nav .separator {
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem;
  color: #9CA3AF; /* gray-400 */
  flex-shrink: 0;
}

.breadcrumb-nav .current {
  color: #0066CC;
  font-weight: 500;
}

/* 确保子元素也是白色 */
#navbar #productsMega button.level1-item:hover *,
#navbar #productsMega button.level1-item.active *,
#navbar #productsMegaWrap button.level1-item:hover *,
#navbar #productsMegaWrap button.level1-item.active *,
#navbar #productsMega button.level2-item:hover *,
#navbar #productsMega button.level2-item.active *,
#navbar #productsMegaWrap button.level2-item:hover *,
#navbar #productsMegaWrap button.level2-item.active * {
  color: #ffffff !important;
}

/* ==================== 页面顶部间隔处理 ==================== */
/* 页面顶部间隔占位已通过.page-top-spacer类处理 */

/* ==================== 专利页面样式 ==================== */
/* 专利筛选按钮 */
.patent-filter-btn {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #d1d5db;
}

.patent-filter-btn:not(.active) {
  background: #ffffff !important;
  color: #374151 !important;
  border-color: #d1d5db;
}

.patent-filter-btn:not(.active):hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border-color: #9ca3af;
}

.patent-filter-btn.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 专利卡片 */
.patent-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.patent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* 专利模态框 */
.patent-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.patent-modal.active {
  opacity: 1;
  visibility: visible;
}

.patent-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.patent-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: background 0.3s ease;
}

.patent-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.patent-modal img {
  width: 100%;
  height: auto;
  display: block;
}

.patent-modal-info {
  padding: 20px;
  background: white;
}

.patent-modal-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2C3E50;
  margin: 0;
}

/* 专利统计卡片 */
.patent-card .aspect-square {
  aspect-ratio: 3/4;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .patent-modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .patent-modal-info {
    padding: 16px;
  }
  
  .patent-modal-info h3 {
    font-size: 1.25rem;
  }
}

/* ==================== 移动端导航栏悬停效果 ==================== */
/* 移动端"产品中心"按钮悬停效果 - 蓝底白字 */
#navbar #mobileProductsToggle:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

#navbar #mobileProductsToggle:hover * {
  color: #ffffff !important;
}

/* 移动端语言切换按钮悬停效果 - 蓝底白字（最高优先级） */
#navbar #mobileMenu #mobileLangToggle:hover,
#navbar #mobileMenu button#mobileLangToggle:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

#navbar #mobileMenu #mobileLangToggle:hover *,
#navbar #mobileMenu button#mobileLangToggle:hover * {
  color: #ffffff !important;
}

/* 移动端：产品中心与语言按钮占满整行 */
#navbar #mobileMenu #mobileProductsToggle,
#navbar #mobileMenu #mobileLangToggle {
  display: flex !important;
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* 移动端：产品中心与语言按钮 hover/focus/active 蓝底白字（最高优先级） */
#navbar #mobileMenu #mobileProductsToggle:hover,
#navbar #mobileMenu #mobileProductsToggle:focus,
#navbar #mobileMenu #mobileProductsToggle:active,
#navbar #mobileMenu #mobileLangToggle:hover,
#navbar #mobileMenu #mobileLangToggle:focus,
#navbar #mobileMenu #mobileLangToggle:active,
#navbar #mobileMenu button#mobileLangToggle:hover,
#navbar #mobileMenu button#mobileLangToggle:focus,
#navbar #mobileMenu button#mobileLangToggle:active {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}
#navbar #mobileMenu #mobileProductsToggle:hover *,
#navbar #mobileMenu #mobileProductsToggle:focus *,
#navbar #mobileMenu #mobileProductsToggle:active *,
#navbar #mobileMenu #mobileLangToggle:hover *,
#navbar #mobileMenu #mobileLangToggle:focus *,
#navbar #mobileMenu #mobileLangToggle:active *,
#navbar #mobileMenu button#mobileLangToggle:hover *,
#navbar #mobileMenu button#mobileLangToggle:focus *,
#navbar #mobileMenu button#mobileLangToggle:active * {
  color: #ffffff !important;
}

/* ==================== 移动端三级菜单悬停效果 ==================== */
/* 移动端一级分类（镜架、光学、光机）悬停效果 - 蓝底白字 */
#navbar #mobileMenu .mobile-category-toggle:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

#navbar #mobileMenu .mobile-category-toggle:hover * {
  color: #ffffff !important;
}

/* 移动端二级分类（铜镜架、铝镜架等）悬停效果 - 蓝底白字 */
#navbar #mobileMenu .mobile-sub-toggle:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

#navbar #mobileMenu .mobile-sub-toggle:hover * {
  color: #ffffff !important;
}

/* 移动端三级型号链接悬停效果 - 蓝底白字 */
#navbar #mobileMenu .mobile-models a:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}


/* ========================================
   发展历程时间轴 - 支持6列布局
======================================== */

/* 动态生成的grid列数类 - Tailwind JIT可能不识别 */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* 发展历程PC端容器样式 */
#milestones-pc {
  width: 100%;
}

/* 发展历程卡片在6列布局下的优化 */
#milestones-pc.grid-cols-6 > div {
  min-width: 0; /* 防止内容溢出 */
}

/* 响应式：中等屏幕下6列变4列 */
@media (max-width: 1200px) {
  #milestones-pc.grid-cols-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* 响应式：小屏幕下变3列 */
@media (max-width: 900px) {
  #milestones-pc.grid-cols-6,
  #milestones-pc.grid-cols-5,
  #milestones-pc.grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 响应式：更小屏幕下变2列 */
@media (max-width: 640px) {
  #milestones-pc.grid-cols-6,
  #milestones-pc.grid-cols-5,
  #milestones-pc.grid-cols-4,
  #milestones-pc.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* 发展历程横向滚动样式 */
#milestones-pc.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #0066CC #e5e7eb;
}

#milestones-pc.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
}

#milestones-pc.scrollbar-thin::-webkit-scrollbar-track {
  background: #e5e7eb;
}

#milestones-pc.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #0066CC;
}

#milestones-pc.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #003D82;
}