/* 定义全局变量 */
 /* :root {
   --vivo-blue: #1976d2;
   --vivo-cyan: #00e5ff;
   --vivo-purple: #7b1fa2;
   --vivo-dark: #121212;
   --vivo-card-bg: #1e1e1e;
   --neon-glow: 0 0 10px rgba(0, 229, 255, 0.7),
     0 0 20px rgba(0, 229, 255, 0.5),
     0 0 30px rgba(0, 229, 255, 0.3);
 } */

 /* body {
   color: #fff;
   overflow-x: hidden;
 } */

 /* 导航栏制作 */
.navbar {
  background-color: white !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 固定品牌logo在最左边 */
.navbar-brand.fixed-left {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1050;
}

/* 为了避免导航内容与固定logo重叠，给container添加左侧padding */
@media (min-width: 992px) {
  .navbar .container {
    padding-left: 10px;
  }
}

/* 调整汉堡菜单按钮的配色 */
.navbar-toggler {
  border-color: #333 !important;
  background-color: #f8f9fa !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}



 .nav-link {
   position: relative;
   --tw-text-opacity: 1;
   color: rgb(26 26 26 / var(--tw-text-opacity, 1));
   margin: 0 12px;
 }

 .nav-link:hover {
   color: red;
 }

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

 .navbar-brand,
 .navbar-brand:hover {
   font-size: 28px;
   font-weight: 700;
   background: linear-gradient(45deg, var(--vivo-cyan), var(--vivo-blue));
   /* 文字裁剪 */
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow: var(--neon-glow);
 }

 /* Logo响应式样式 */
 .navbar-brand img {
   max-width: 100%;
   height: auto;
   max-height: 1.75rem;
   transition: height 0.3s ease;
 }

 /* 确保在不同屏幕尺寸下的一致性 */
 @media (min-width: 640px) {
   .sm\:h-7 {
     height: 1.75rem;
   }
 }

 @media (min-width: 768px) {
   .md\:h-9 {
     height: 2.25rem;
   }
 }

 /* 轮播图模块 */
 .banner {
   width: 100%;
   height: 50vw;
   /* background-color: pink; */
   mask-image: linear-gradient(rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
   -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
 }

 .banner .carousel-item img {
   width: 100%;
   height: 50vw;
 }

 .carousel-caption {
   bottom: 15rem;
 }

 .carousel-indicators {
   margin-bottom: 14rem;
 }



/* 让下拉面板紧贴导航，避免中间出现“空隙”导致 hover 丢失 */
.nav-item {
  position: relative;
}

/* 硬件产品下拉面板：固定在导航栏下方，横向铺满整个视口为白色背景 */
.hot-product {
  position: fixed;
  left: 0;
  top: 60px; /* 略微向上贴合导航，消除中间细小缝隙 */
  width: 100vw;
  display: none;
  z-index: 1000;
  background-color: #ffffff;
  padding: 16px 0 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 保留 hover 作为兜底（主要显隐逻辑已用 JS 控制） */
.nav-item:hover .hot-product,
.hot-product:hover {
  display: block;
}

 .hot-product .info {
   color: rgba(255, 255, 255, 0.7);
 }

 /* 卡片模块 */
 .card {
   overflow: hidden;
   background-color: white;
   border-radius: 15px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   max-height: 20rem;
   /* transition: all 0.3s; */
 }

 /* .card:hover {
   transform: translateY(-10px);
   border-color: rgba(0, 229, 255, 0.3);
 } */

 .card .card-img {
   padding: 10px;
   background-color: #F5F9FF;
 }

 .card .card-img img {
   /* animation: move 5s ease-in-out infinite; */
    max-height: 10.5rem;
    transition: transform 1s ease;
 }

 .card .card-img img:hover {
    transform: scale(1.2);
}

 @keyframes move {
   0% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-15px);
   }

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

 .card-title {
   font-size: 1.4rem;
   color: black;
   font-weight: 700;
   text-align: center;
 }

 .card-text {
   font-size: 0.9rem;
   color: black;
   text-align: center;
 }

 .price {
   font-size: 1.5rem;
   color: var(--vivo-cyan);
   font-weight: 600;
 }

 .card-body .btn {
   width: 100%;
   border: 2px solid var(--vivo-cyan);
   border-radius: 30px;
   background: none;
   padding: 10px 0;
   color: var(--vivo-cyan);
   font-weight: 600;
 }

 .card-body .btn:hover {
   box-shadow: var(--neon-glow);
 }

 /* 未来科技模块 */
 .future-tech {
   position: relative;
   background: url(../img/bg1.avif) no-repeat;
   background-position: center;
   background-size: cover;
   /* 背景图片固定定位 */
   background-attachment: fixed;
 }

 .future-tech::before {
   position: absolute;
   left: 0;
   top: 0;
   content: '';
   width: 100%;
   height: 100%;
   background: rgba(18, 18, 18, 0.9);
 }

 .future-icon {
   font-size: 3rem;
   color: var(--vivo-cyan);
   text-shadow: var(--neon-glow);
   margin-bottom: 20px;
 }

 .future-title {
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 15px;
   color: #fff;
 }

 .future-desc {
   color: rgba(255, 255, 255, 0.7);
 }

 /* footer底部模块制作 */
 .footer {
   background-color: #0a0a0a;
   padding-top: 80px;
 }

 .footer dt {
   position: relative;
   font-size: 1.2rem;
   font-weight: 600;
   padding-bottom: 10px;
   margin-bottom: 15px;
 }

 .footer dt::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 40px;
   height: 2px;
   background: linear-gradient(90deg, var(--vivo-cyan), var(--vivo-blue));
 }

 .footer dd>a {
   /* 块级盒子才能做变化效果 */
   display: block;
   color: rgba(255, 255, 255, 0.7);
   font-size: 1rem;
   text-decoration: none;
   transition: all 0.3s;
   margin-bottom: 15px;
 }

 .footer dd>a:hover {
   color: var(--vivo-cyan);
   transform: translateX(5px);
 }

 .footer .icons {
   display: flex;
 }

 .footer .icons a {
   width: 40px;
   height: 40px;
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   margin-right: 10px;
   text-align: center;
   line-height: 40px;
   text-decoration: none;
   transition: all 0.3s;
 }

 .footer .icons a:hover {
   box-shadow: var(--neon-glow);
   color: #fff;
   background: linear-gradient(45deg, var(--vivo-blue), var(--vivo-cyan));
   transform: translateY(-3px);
 }

 .footer .news {
   color: rgba(255, 255, 255, 0.7);
 }

 .form-control::placeholder {
   color: rgba(255, 255, 255, 0.7);
 }

 .btn-outline-secondary {
   background: linear-gradient(45deg, var(--vivo-blue), var(--vivo-cyan));
   border: 0;
   color: #fff;
   font-weight: 600;
   border-radius: 30px;
   padding: 12px 30px;
   transition: all 0.3s;
 }

 .btn-outline-secondary:hover {
   box-shadow: var(--neon-glow);
   transform: translateY(-3px);
 }

 .copyright {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.7);
 }

 /* 媒体查询 */
 @media (max-width: 768px) {
   .navbar {
     padding: 5px 0;
   }

   .carousel-caption,
   .carousel-indicators {
     display: none;
   }
 }

 @media (max-width: 992px) {
   .carousel-caption {
     bottom: 8rem;
   }

   .carousel-indicators {
     margin-bottom: 8rem;
   }

   .banner {
     margin-top: 80px;
   }
 }



   @media (min-width: 640px) {
       .sm\:h-7 {
           height: 1.75rem;
       }
   }