/* --- 基础设置 --- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;
}

body {
    margin: 0;
    padding: 0;
    /* padding-top: 80px; */
    /* 优先显示英文字体，如果遇到中文则显示微软雅黑 */
    font-family: 'Segoe UI', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    background-color: #f4f4f4;
}

/* --- 顶部导航栏样式 --- */
.navbar {
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;

    /* 新增下面这4行关键代码 */
    position: fixed;
    /* 强制固定 */
    top: 0;
    /* 紧贴顶部 */
    left: 0;
    /* 左边对齐 */
    width: 100%;
    /* 撑满宽度 */
    z-index: 1000;
    /* 层级最高，压在所有内容上面 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* 加个阴影，更有层次感 */
}

/* 这是一个容器，用来限制内容不要太宽，保持居中 */
.container {
    width: 90%;
    max-width: 1200px;
    /* 电脑屏幕最大宽度限制 */
    margin: 0 auto;
    /* 左右自动居中 */
    display: flex;
    /* 开启弹性布局（布局神器） */
    justify-content: space-between;
    /*以此让logo和菜单分居左右两侧 */
    align-items: center;
    /* 垂直居中 */
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 去掉列表前面的小圆点 */
.nav-links {
    list-style: none;
    display: flex;
    /* 让菜单横着排 */
    gap: 20px;
    /* 菜单项之间的间距 */
    margin: 0;
    padding: 0;
}

/* 链接的样式 */
.nav-links a {
    text-decoration: none;
    /* 去掉下划线 */
    color: white;
    font-size: 1rem;
    transition: color 0.3s;
    /* 让颜色变化有动画效果 */
}

/* 鼠标放上去变色 */
.nav-links a:hover {
    color: #ffd700;
    /* 金色，和深蓝很搭 */
}

/* --- Banner区域样式 --- */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=80');
    
        background-size: cover;
        /* 保证图片铺满整个区域 */
        background-position: center;
        /* 图片居中 */
        background-repeat: no-repeat;
        /* 不要平铺重复 */
    
        height: 500px;
        /* 让高度再高一点，更气派 */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: white;
}

.cta-button {
    padding: 10px 20px;
    background-color: #008cd6;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
}
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        padding: 0 20px;
    }
    .about-text {
        padding-right: 0;
        margin-bottom: 30px;
    }
    .myHomeSwiper .swiper-button-next {
        right: 10px !important;
    }
    
    .myHomeSwiper .swiper-button-prev {
        left: 10px !important;
    }

/* --- 通用板块间距 --- */
.section-padding {
    padding: 60px 0;
}

.column-layout {
    display: flex !important;
    /* 强制开启左右排版 */
    flex-direction: row;
    /* 确保是横向的 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: space-between;
    gap: 60px;
    /* 文字和图片中间的间隔 */
}

.about-text {
    flex: 1;
    /* 占一半宽度 */
    padding-right: 20px;
}

.about-image {
    flex: 1;
    /* 占另一半宽度 */
    display: flex;
    /* 让图片容器也工整 */
    justify-content: center;
}

.about-image img {
    width: 100%;
    /* 图片宽度自适应 */
    max-width: 600px;
    /* 限制最大宽度，防止图片太大撑爆 */
    height: auto;
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* 阴影 */
}

/* --- 产品展示区域 --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    row-gap: 50px;
    column-gap: 30px;
    padding-bottom: 50px;
    width: 100%;
}

.product-card {
    padding: 0 !important;
    background: white;
    /* padding: 20px 20px 0px 20px; */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.product-card img {
    width: 100%;
    height: 220px;
    object-fit: contain !important;
    margin-bottom: 0 !important;
}

.product-card h3 {
    margin-top: 15px !important;
    padding: 0 20px;
    text-align: left;
}

.product-card p {
    padding: 0 20px 20px 20px;
    text-align: left;
    margin-top: 5px;
}

/* --- 底部样式 --- */
footer {
    background-color: #1a1a1a;
    color: #888;
    text-align: center;
    padding: 40px 0;
    margin-top: auto;
    /* 这一行是为了防止页面内容太少时footer跑上来 */
}

footer p {
    margin: 0 0 20px 0;
    /* 下面留点空隙给图标 */
    font-size: 0.9rem;
}

.social-icons {
    display: flex;
    /* 让图标横排 */
    justify-content: center;
    /* 整体居中 */
    gap: 15px;
    /* 图标之间的间距 */
}

.social-icons a {
    display: flex;
    /* 【关键】开启 Flex 布局 */
    justify-content: center;
    /* 【关键】水平居中 */
    align-items: center;
    /* 【关键】垂直居中 */

    width: 40px;
    height: 40px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1.2rem;
}

.social-icons a:hover {
    background-color: #003366;
    /* 矩锂蓝 */
    transform: translateY(-3px);
}

.swiper {
    width: 100%;
    height: 750px;
    /* 轮播图高度 */
}

.hero-slide {
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.swiper-button-next,
.swiper-button-prev {
    color: white !important;
}

.swiper-pagination-bullet-active {
    background: white !important;
}

.hero-slide .hero-content h1,
.hero-slide .hero-content p {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero-slide .cta-button {
    margin-top: 50px !important;
    /* 原来是 20px，改成 50px 让它明显往下移 */
    text-decoration: none !important;
    /* 强制去掉下划线 */
    display: inline-block;
    /* 保证移动生效 */

    /* 顺便加个悬停效果，让它更像按钮 */
    transition: all 0.3s;
}

.hero-slide .cta-button:hover {
    transform: translateY(-2px);
    /* 鼠标放上去微微上浮 */
    background-color: #002244;
    /* 颜色变深一点 */
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    padding: 0 20px;
}

.myHomeSwiper .swiper-button-next {
    right: 50px !important;
    /* 距离右边 50px */
    color: white !important;
    /* 强制白色 */
}

.myHomeSwiper .swiper-button-prev {
    left: 50px !important;
    /* 距离左边 50px */
    color: white !important;
    /* 强制白色 */
}

.myProductSwiper .swiper-button-next,
.myProductSwiper .swiper-button-prev {
    color: #003366 !important;
    /* 改回深蓝色 */
    width: 30px;
    /*稍微调小一点，精致点*/
    height: 30px;
}

.myProductSwiper .swiper-button-next {
    right: 10px !important;
}

.myProductSwiper .swiper-button-prev {
    left: 10px !important;
}

.btn-buy {
    background-color: #f0c14b;
    /* 经典的亚马逊/电商黄 */
    color: #111;
    border: 1px solid #a88734;
}

.btn-buy:hover {
    background-color: #ddb347;
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;

    /* 把所有的滤镜效果（包括颜色转换和阴影）写在同一个 filter 属性里 */
    filter: invert(43%) sepia(87%) saturate(2283%) hue-rotate(176deg) brightness(99%) contrast(101%) drop-shadow(0 0 2px rgba(0, 140, 214, 0.3));
    
    transition: all 0.3s ease;
}

/* 鼠标放上去稍微变亮一点点 */
.logo-img:hover {
    filter: invert(50%) sepia(90%) saturate(2500%) hue-rotate(176deg) brightness(110%) contrast(110%);
}
/* --- 移动端汉堡菜单适配 --- */

/* 默认在电脑端隐藏汉堡包图标 */
.menu-toggle {
    display: none;
}

@media screen and (max-width: 768px) {
    /* 1. 保持容器横向排列，Logo在左，图标在右 */
    
    .navbar .container {
        flex-direction: row !important; 
        justify-content: space-between;
        padding: 0 15px;
    }
     .detail-container {
        flex-direction: column !important;
        margin: 10px auto !important;
        width: 95% !important; /* 让容器宽度占满屏幕 */
        border-radius: 0;      /* 手机端去掉圆角更美观 */
        box-shadow: none;      /* 去掉重阴影，保持简洁 */
    }

    /* 2. 缩小轮播图区域间距 */
    .product-gallery {
        padding: 20px 10px !important;
        width: 100% !important;
    }

    .swiper {
        height: 320px !important; /* 手机端减小图片区域高度 */
     }

    /* 3. 核心：修复文字贴边和标题截断 */
    .product-info {
        padding: 20px 15px 40px 15px !important; /* 将左右 50px 缩小为 15px */
        width: 100% !important;
        box-sizing: border-box; /* 确保 padding 不会撑破容器 */
    }

    .product-title {
        font-size: 1.5rem !important; /* 缩小字号 */
        line-height: 1.3 !important;  /* 增加行高 */
        white-space: normal !important; /* 允许换行 */
        word-wrap: break-word !important; /* 强制长单词换行 */
        display: block !important;
        margin-top: 15px !important;
    }

    .product-price {
        font-size: 1.6rem !important;
        margin: 10px 0 !important;
    }

    /* 4. 修复按钮：手机端按钮改为上下排版，更容易点击 */
    .action-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .btn {
        width: 100% !important;
        padding: 15px 0 !important;
        font-size: 1rem !important;
    }

    /* 5. 修复参数列表 */
    .specs-box {
        padding: 15px !important;
    }
    
    .specs-list li {
        font-size: 0.9rem;
    }

    /* 6. 修复底部长图和视频的容器 */
    .detail-video-content, 
    div[style*="padding: 60px 0"] .container {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* 2. 显示汉堡包图标 */
    .menu-toggle {
        display: block !important;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 1001;
        margin-left: auto;
    }

    /* --- 强制产品列表为两列 --- */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 核心：强制分两列 */
        gap: 10px !important;   /* 缩小商品之间的左右间距 */
        row-gap: 20px !important; /* 保持上下行距 */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 调整卡片图片高度，防止在手机上太长 */
    .product-card img {
        height: 140px !important; 
        object-fit: contain !important; /* 确保图片不被裁剪 */
    }

    /* 调小卡片标题，防止文字重叠 */
    .product-card h3 {
        font-size: 0.9rem !important;
        margin-top: 10px !important;
        padding: 0 5px !important;
    }

    /* 调小描述文字 */
    .product-card p {
        font-size: 0.75rem !important;
        padding: 0 5px 10px 5px !important;
    }
    /* 3. 改造菜单：默认隐藏，变成悬浮在顶部的深色列表 */
    .nav-links {
        display: none; /* 默认隐藏 */
        flex-direction: column;
        position: absolute;
        top: 70px; /* 导航栏的高度 */
        left: 0;
        width: 100%;
        background-color: #2c3e50; /* 和导航栏颜色一致 */
        padding: 20px 0;
        gap: 0; /* 垂直排列不需要间距 */
        box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    }

    /* 4. 当 JS 给它加上 .active 类时，显示菜单 */
    .nav-links.active {
        display: flex !important;
    }

    /* 5. 菜单项样式优化 */
    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    /* 6. 其他移动端基础调整 (把你之前删掉的有用的补回来) */
    .column-layout {
        flex-direction: column;
    }
    .hero h1 {
        font-size: 2rem;
    }
    .about-text {
        padding-right: 0;
        margin-bottom: 30px;
    }
    .hero-slide .cta-button {
        margin-top: 20px !important;
    }
     .swiper {
        height: 380px !important; 
    }

    /* 确保内部容器同步变矮 */
    .hero-slide {
        height: 380px !important;
    }

    /* 调整手机端文字大小，避免遮挡图片 */
    .hero-slide .hero-content h1 {
        font-size: 1.6rem !important;
        margin-bottom: 5px;
    }

    .hero-slide .hero-content p {
        font-size: 0.85rem !important;
        line-height: 1.2;
    }
    
    /* 缩小按钮间距，让内容更紧凑 */
    .hero-slide .cta-button {
        margin-top: 20px !important;
        padding: 8px 15px !important;
    }
}
/* 技术支持板块按钮的悬停效果 */
.support-portal .cta-button:hover {
    background-color: #00509d !important; /* 悬停时变亮一点 */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 手机端适配：图标间距缩小 */
@media (max-width: 768px) {
    .support-icons {
        gap: 30px !important;
    }
}