/* 自定义样式 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }
  .bg-blur {
    backdrop-filter: blur(8px);
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
}

/* 额外的自定义样式 */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ====== 统一设计系统 ====== */

/* 统一 Section 标题 */
.section-title {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
}
/* 统一 Section 副标题 */
.section-subtitle {
  color: #9CA3AF;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  line-height: 1.6;
}

/* 统一卡片样式 */
.feature-card {
  background: #fff;
  padding: 1.75rem;
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.feature-card:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* 统一 CTA 按钮 */
.btn-cta {
  background: #0077FF;
  color: #fff;
  padding: 0.7rem 2rem;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}
.btn-cta:hover {
  background: rgba(0,119,255,0.9);
  transform: scale(1.04);
  box-shadow: 0 4px 15px rgba(0,119,255,0.3);
}

/* 统一输入框 */
.input-base {
  width: 100%;
  padding: 0.6rem 1rem;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  color: #111827;
  outline: none;
  transition: all 0.2s;
}
.input-base:focus {
  border-color: #0077FF;
  box-shadow: 0 0 0 3px rgba(0,119,255,0.1);
}

/* 导航栏过渡效果 */
#navbar {
  transition: all 0.3s ease;
}
.navbar-hidden {
  display: none !important;
}

/* 导航栏滚动后/非首页状态：白色背景 + 深色文字 */
.navbar-scrolled {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.navbar-scrolled .nav-text { color: #111827 !important; }
.navbar-scrolled .nav-link.nav-text:hover { color: #0077FF !important; }
.navbar-scrolled .nav-lang-btn { border-color: #D1D5DB !important; }
.navbar-scrolled .nav-lang-btn:hover { border-color: #0077FF !important; color: #0077FF !important; background: transparent !important; }

/* 导航链接样式 */
.nav-link {
  position: relative;
  padding: 0.5rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0077FF;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* 产品菜单特殊样式 */
.product-menu-link {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.product-menu-link:hover {
  background-color: rgba(0, 119, 255, 0.1);
}

/* 分类菜单样式 */
.category-item {
  position: relative;
  cursor: pointer;
  color: #374151;
}

.category-item:hover {
  background-color: rgba(0, 119, 255, 0.2);
  transform: translateX(4px);
}

.category-item.active {
  background-color: rgba(0, 119, 255, 0.3);
  color: #0077FF;
  font-weight: 600;
}

.category-item.active::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  position: absolute;
  left: 12px;
}

.category-item.active {
  padding-left: 1.75rem;
}

/* 产品卡片悬停效果 */
.product-card {
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

/* 按钮动画 */
.btn-primary {
  transition: all 0.3s ease;
}

/* 社交图标品牌色 */
.social-float-item .fa-facebook,
footer .fa-facebook { color: #1877F2; }
.social-float-item .fa-weixin,
footer .fa-weixin { color: #07C160; }
.social-float-item .fa-instagram,
footer .fa-instagram { color: #E4405F; }
.social-float-item .fa-youtube-play,
footer .fa-youtube-play { color: #FF0000; }
.social-float-item svg,
footer svg { color: #000000; }

/* 默认灰色 */
.social-float-item,
footer .flex.space-x-4 a {
  transition: all 0.3s ease;
}
.social-float-item i,
footer .flex.space-x-4 a i,
.social-float-item svg,
footer .flex.space-x-4 a svg {
  opacity: 0.5;
  transition: all 0.3s ease;
}
.social-float-item:hover i,
footer .flex.space-x-4 a:hover i,
.social-float-item:hover svg,
footer .flex.space-x-4 a:hover svg {
  opacity: 1;
}
.social-float-item.no-link {
  cursor: default;
}
.social-float-item.no-link:hover i,
.social-float-item.no-link:hover svg {
  opacity: 0.5;
}
.social-float-item.no-link:hover {
  transform: none;
}
.social-float-item:hover,
footer .flex.space-x-4 a:hover {
  transform: scale(1.15);
}

/* 浮动社交栏二维码弹出 */
.social-float-qr {
  display: none !important;
  position: absolute;
  right: 100%;
  margin-right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: auto !important;
  min-width: 120px;
}
.social-float-item.has-qr:hover .social-float-qr {
  display: block !important;
  animation: qrFadeIn 0.2s ease;
}
@keyframes qrFadeIn {
  from { opacity: 0; transform: translateY(-50%) translateX(10px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.social-float-qr .qr-arrow {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid white;
}
.social-float-qr img {
  display: block !important;
  width: 112px !important;
  height: 112px !important;
  object-fit: cover;
}

.btn-primary:hover {
  transform: scale(1.05);
}

/* Banner 文字自适应背景色（暗底白字 / 亮底黑字） */
.banner-adaptive-text {
  mix-blend-mode: difference;
  color: #fff;
}
.banner-adaptive-btn {
  mix-blend-mode: difference;
  background: #fff;
  color: #000;
}
.banner-adaptive-btn:hover {
  background: #e5e5e5;
}

/* 图片悬停缩放 */
.img-zoom {
  transition: transform 0.5s ease;
}

.img-zoom:hover {
  transform: scale(1.1);
}

/* ====== Strip Banner 响应式 ====== */
.strip-banner-slide img {
  animation: stripZoom 20s ease-in-out infinite alternate;
}

@keyframes stripZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.banner-strip-wrap {
  min-height: 220px;
}
/* 移动端：参考 Hero Banner，aspect-video + contain 显示完整宽度 */
@media (max-width: 767px) {
  .banner-strip-wrap {
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: #000;
  }
  .strip-banner-slide img,
  .strip-banner-slide video {
    object-fit: contain !important;
  }
}
@media (min-width: 768px) {
  .banner-strip-wrap {
    min-height: 300px;
  }
}
@media (min-width: 1024px) {
  .banner-strip-wrap {
    min-height: 380px;
  }
}

/* ====== Hero Banner 轮播 ====== */

/* 覆盖式滑动：新 slide 在上层覆盖旧 slide */
.banner-slide.hero-slide-active {
  z-index: 1;
}
/* 退场：在下层原地不动，动画结束后隐藏 */
.banner-slide.hero-slide-exit-left,
.banner-slide.hero-slide-exit-right {
  z-index: 1;
}
/* 进场：在上层从侧边滑入覆盖旧 slide */
.banner-slide.hero-slide-enter-left {
  z-index: 2;
  animation: slideEnterLeft 0.5s ease forwards;
}
.banner-slide.hero-slide-enter-right {
  z-index: 2;
  animation: slideEnterRight 0.5s ease forwards;
}
@keyframes slideEnterLeft {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideEnterRight {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* 左右箭头 */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
}
#heroSlideshow:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: rgba(255,255,255,0.35); }
.hero-arrow-left  { left: 16px; }
.hero-arrow-right { right: 16px; }

/* 底部圆点 */
.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.hero-dot:hover { transform: scale(1.3); border-color: #fff; }
.hero-dot.hero-dot-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.2);
}

/* 拖拽时防止图片被选中 */
.banner-slide-img { user-select: none; -webkit-user-drag: none; }

/* 移动端 Banner 16:9 自适应，画面完整显示 */
@media (max-width: 767px) {
  #home {
    background: #000;
  }
}

/* 拖拽光标 */
#heroSlideshow { cursor: grab; }
#heroSlideshow:active,
#heroSlideshow.hero-dragging { cursor: grabbing; }

/* 文字层不阻挡拖拽事件 */
#heroSlideshow .container { pointer-events: none; }
#heroSlideshow .container a { pointer-events: auto; }