/* --- 基础重置 (Reset) --- */
html {
    scroll-behavior: smooth; /* 关键代码：让点击导航跳转时有平滑滚动的动画 */
    scroll-padding-top: 60px;
}
section, header {
    scroll-margin-top: 60px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 这一点非常重要，让布局不乱跑 */
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* 简单的通用字体 */
    background-color: #ffffff; /* 暂时给个灰底，方便看清区块 */
    color: #333;
    line-height: 1.6;
}

/* --- 通用容器 --- */
/* 这个容器的作用是限制内容不要太宽，模仿设计图中左右留白的效果 */
.container {
    /*max-width: 1200px;  最大宽度1200像素 */
    margin: 0 auto;    /* 居中显示 */
    padding: 0 30px;   /* 左右留点缝隙，手机上好看 */
}

/* --- 临时给每个区块加个边框，方便我们看清楚布局 --- */
section, header, footer, nav {
    border: none;
}


.navbar {
    height: 80px;
    background-color: #fff;
    display: flex; /* 确保使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
    
    position: sticky; 
    top: 0;
    z-index: 1000; /* 保证它浮在最上面 */
    transition: background-color 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
    /* 变成 80% 透明度的白色，这样才能透出后面的模糊 */
    background-color: rgba(255, 255, 255, 0.7); 
    
    /* 开启毛玻璃模糊效果 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* 兼容苹果 Safari */
    
    /* 加一点点阴影，把导航栏和内容区分开 */
    box-shadow: 0 4px 10px rgba(26, 26, 26, 0.05);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo 图片样式控制 */
.logo-img {
    height: 22px; /* 限制图片高度，防止图片太大撑破导航栏 */
    width: auto;  /* 宽度自动，保持比例 */
    display: block; /* 消除图片底部的微小空隙 */
}

/* 菜单链接样式 (微调) */
.menu a {
    text-decoration: none;
    color: #333; /* 字体颜色稍微深一点 */
    font-size: 15px; /* 字号根据设计图微调 */
    margin-left: 80px; /* 间距拉大一点 */
    font-weight: 500;
    transition: color 0.3s;
}

.menu a:hover {
    color: #000;
    font-weight: 600; /* 鼠标悬停加粗 */
}
.navbar .container {
    /* 1. 解除最大宽度限制 (可选) */
    /* 如果你希望导航栏能铺满整个屏幕宽度，而不是被限制在 1200px 中间，就加上这一行 */
    max-width: 100%; 

    /* 2. 单独设置左右边距 (Padding) */
    /* 这里你可以填比普通内容更大的数字 */
    padding-left: 60px;  /* 左边距加大 */
    padding-right: 60px; /* 右边距加大 */
    
    /* 提示：如果不希望解除1200px限制，只想把内容往里挤，就把上面的 max-width 删掉，只留 padding */
}

/* --- 首屏海报区 (圆角卡片版) --- */

.hero-section {
    padding-top: 0px; /* 稍微跟导航栏拉开点距离 */
    padding-bottom: 0px;
}

/* 核心：圆角大卡片 */
.hero-card {
    position: relative;         /* 作为内部元素的定位参考系 */
    width: 100%;
    height: 820px;              /* 设定一个固定高度 */
    background-color: #f3f3f3;  /* 设计图那种浅灰白色背景 */
    border-radius: 20px;        /* 【关键】大圆角 */
    overflow: hidden;           /* 内容超出圆角的部分切掉 */
}

/* --- A. 左上角文字 --- */
.top-left-info {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 10;
}
.top-left-info h3 {
    font-size: 32px;
    font-weight: 450;
    margin-bottom: -5px;
}
.top-left-info span {
    font-size: 16px;
    font-weight: 450;
    color: #999;
    text-transform: uppercase; /* 强制大写 */
}

/* --- B. 中间背景大字 (图片版) --- */
.center-bg-text {
    position: absolute;
    
    /* 1. 实现左右居中 */
    left: 50%;
    transform: translateX(-50%); /* 只在水平方向移动一半宽度，实现精准居中 */
    
    /* 2. 调整上下间距 (通过 top 值控制距离顶部的距离) */
    /* 试着修改这个数字，越大图片越靠下 */
    top: 170px;  
    
    /* 3. 调整大小 (通过宽度百分比控制) */
    /* 试着修改这个百分比，越大图片越大 */
    width: 44%;  
    
    z-index: 1;  /* 保证在最底层 */
    /* opacity: 0.5;  透明度，根据需要调整 */
    
    /* 小技巧：如果调不准，可以把下面这行注释打开，给它加个红框看看位置 */
    /* border: 1px solid red; */
}
.center-bg-text img {
    width: 100%;
    display: block;
}

/* --- C. 眼镜图片 (逻辑不变) --- */
.glasses-wrapper {
    position: absolute;
    top: 20%; /* 稍微往下偏一点，因为眼镜本身有透视 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; /* 眼镜大小，根据实际情况调 */
    z-index: 5; /* 在文字上面 */
}
.glass-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s ease-out;
}
.glass-img.active {
    opacity: 1;
    transform: scale(1);
}

/* --- D. 右上角：纵向切换点 --- */
.dots-control-vertical {
    position: absolute;
    top: 50px;
    right: 40px;
    display: flex;
    flex-direction: column; /* 【关键】改成纵向排列 */
    gap: 9px; /* 点之间的间距 */
    z-index: 20;
}
.dot {
    width: 6px;
    height: 6px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}
.dot.active {
    background-color: #000;
    transform: scale(1.0); /* 选中时稍微变大一点 */
}


/* --- E. 左下角：Slogan文字 (同字号不同色版) --- */
.bottom-left-info {
    position: absolute;
    bottom: 60px;
    left: 40px;
    z-index: 10;
    text-align: left; /* 确保文字左对齐 */
}

/* 第一行样式 */
.slogan-line-1 {
    font-size: 32px;      /* 【关键】设定统一字号 */
    font-weight: 450;     /* 设定统一粗细（700是加粗） */
    color: #999;       /* 【颜色1】纯黑 */
    line-height: 1.4;     /* 行高，防止两行字挤在一起 */
    /*margin-bottom: 5px;    两行字中间留一点点缝隙 */
}

/* 第二行样式 */
.slogan-line-2 {
    font-size: 32px;      /* 【关键】必须和上面一样大 */
    font-weight: 450;     /* 必须和上面一样粗 */
    color: #333;       /* 【颜色2】深灰色 (你可以改成蓝色 #0056b3 或其他颜色) */
    line-height: 1.4;
}

/* --- F. 右下角：购买区域 --- */
.bottom-right-info {
    position: absolute;
    bottom: 60px;
    right: 40px;
    text-align: right;
    z-index: 20;
}
.price {
    display: block;
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 15px;
    margin-right: 5px;
}
.btn-buy-black {
    background-color: #333;
    color: #fff;
    padding: 10px 25px;
    border-radius: 7px; /* 按钮稍微一点圆角 */
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s;
}
.btn-buy-black:hover {
    background-color: #333;
}

/* --- 核心卖点 (左右双图版) --- */

.features-dual {
    background-color: #ffffff; /* 整个区域纯黑背景 */
    padding: 20px 0;        /* 上下留白 */
    text-align: center;
}

/* 左右布局容器 */
.dual-wrapper {
    display: flex;          /* 开启弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    gap: 9px;              /* 左右两张图中间的缝隙 */
}

/* 卡片容器样式 */
.dual-card {
    flex: 1;                /* 【关键】让左右两个容器平分宽度 (各50%) */
    border-radius: 20px;    /* 【关键】圆角大小 */
    overflow: hidden;       /* 保证图片不会溢出圆角 */
    background-color: #ffffff; /* 给个深灰底色，万一图片没加载出来也能看 */
    aspect-ratio: 1400 / 730
}

/* 图片样式 */
.dual-card img {
    width: 100%;

    object-fit: cover;      /* 【关键】让图片填满容器且不变形 */
    display: block;
}


/* --- 技术应用场景样式 --- */

.tech-section {
    background-color: #fff; /*这部分回归白色背景*/

    padding-top: 150px;
    padding-bottom: 80px;
}

/* 标题样式 (复用性高，以后可以用) */
.section-header {
    margin-bottom: 60px;
    text-align: left; /* 设计稿看起来是左对齐，如果是居中可以改 center */
}
.title-dark {
    font-size: 32px;
    color: #000;
    margin-bottom: 10px;
}
.subtitle-dark {
    font-size: 24px;
    color: #666;
    font-weight: 400;
}

/* 4列布局容器 */
.scenario-grid {
    display: flex;           /* 依然是弹性布局 */
    gap: 12px;               /* 卡片之间的间距 */
    
    /* 【关键代码】 */
    overflow-x: auto;        /* 允许横向滚动 */
    padding-bottom: 20px;    /* 底部留点空隙给滚动条，或者防止阴影被切掉 */
    
    /* 让滚动体验像原生App一样丝滑（仅部分浏览器支持，但也建议加上） */
    scroll-snap-type: x mandatory; 
    
    /* 隐藏浏览器默认的丑滚动条 (可选) */
    /* -ms-overflow-style: none;  IE and Edge */
    /* scrollbar-width: none;  Firefox */
}

/* 隐藏 Chrome/Safari 的滚动条，保持页面干净 */
.scenario-grid::-webkit-scrollbar {
    display: none; 
}


/* 2. 单个卡片 */
.scene-card {
    /* 【关键代码】 */
    /* flex: 0 0 280px 意思是：
       0 -> 不许放大
       0 -> 不许缩小 (这一点最重要，防止它们被挤扁)
       280px -> 固定宽度 (你可以改成 300px 或 320px)
    */
    flex: 0 0 580px; 
    
    scroll-snap-align: start; /* 滚动停止时，自动对齐到卡片开头 */
}

/* 图片容器 */
.img-box {
    width: 100%;
    height: 320px; /* 固定图片高度，保证整齐 */
    border-radius: 20px; /* 图片圆角 */
    overflow: hidden; /* 切掉多余部分 */
    margin-bottom: 20px;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满不拉伸 */
    transition: transform 0.5s;
}

/* 鼠标放上去图片稍微放大一点，增加互动感 */
.scene-card:hover .img-box img {
    transform: scale(1.0);
}

/* 文字部分 */
/* 1. 卡片小标题 (深阅读、办公协作...) */
.card-item-title {
    font-size: 26px;      /* 【独立字号】默认给20px，你可以改大改小 */
    font-weight: 450;     /* 加粗程度 */
    color: #000000;       /* 纯黑色 */
    margin-top: 20px;     /* 距离上面图片的间距 */
    margin-bottom: 3px;   /* 距离下面描述文字的间距 */
    text-align: left;     /* 左对齐 */
}

/* 2. 卡片描述文字 (沉浸式阅读体验...) */
.card-item-desc {
    font-size: 18px;      /* 【独立字号】默认给14px */
    color: #999;       /* 中灰色 */
    font-weight: 400;     /* 正常粗细 */
    line-height: 1.6;     /* 行高，太大或太挤都可以调这里 */
    text-align: left;     /* 左对齐 */
}

/* --- 技术应用场景 - 文字专属独立样式 --- */

.tech-header-container {
    margin-bottom: 60px; /* 这一块距离下面4张图片的距离 */
    text-align: left;    /* 左对齐 */
}

/* 1. 主标题 (技术应用) */
.tech-main-title {
    font-size: 50px;     /* 【独立字号】想大就改大 */
    color: #999;      /* 纯黑 */
    font-weight: 450;    /* 加粗 */
    margin-bottom: -5px; /* 距离副标题的缝隙 */
    line-height: 1.2;
}

/* 2. 副标题 (端侧离线...) */
.tech-sub-title {
    font-size: 50px;     /* 【独立字号】 */
    color: #333333;      /* 深灰 */
    font-weight: 450;    /* 正常粗细，不加粗 */
    margin-bottom: 36px; /* 距离描述文字的缝隙 */
    letter-spacing: 1px; /* 字间距稍微拉开一点 */
}

/* 3. 描述文字 (基于端侧算力...) */
.tech-description {
    font-size: 18px;     /* 【独立字号】通常比较小 */
    color: #333;      /* 浅灰 */
    line-height: 1.8;    /* 行高大一点，阅读舒服 */
    max-width: 780px;    /* 限制宽度，让它不要太长 */
}

/* --- 新增：APP 双图板块样式 --- */
.app-showcase-section {
    background-color: #fff;
    padding-top: 0px;  /* 距离上一板块的间距 */
    padding-bottom: 180px; /* 距离下一板块的间距 */
}

.app-showcase-card {
    width: 100%;
    background-color: #f9f9f9; /* 加载前的底色 */
    border-radius: 20px;       /* 大圆角 */
    overflow: hidden;          /* 切角 */
    
    display: flex;
    flex-direction: row;       /* 电脑端左右排 */
    align-items: flex-start;
    padding: 0;
}

.app-split-img {
    width: 50%;        /* 严格各占一半 */
    flex: none;        /* 禁止弹性伸缩 */
    height: auto;
    
    /* ↓↓↓【关键】请修改这里的比例 ↓↓↓ */
    /* 计算方法：单张图片的 宽度 / 高度 */
    /* 举例：如果你的单张图是 800x600，就写 800/600 */
    aspect-ratio: 1395 / 958;  
    
    object-fit: cover;
    display: block;
}



/* --- 关于天视 (About Section) 独立样式 --- */

.about-section {
    background-color: #fff; /* 纯白背景 */
    padding-top: 0px;     /* 距离上一板块的距离 */
    padding-bottom: 100px;  /* 距离下一板块的距离 */
}

/* 1. 中文主标题 (关于天视) */
.about-main-title {
    font-size: 50px;      /* 保持和上面“技术底座”副标题差不多的大字号 */
    font-weight: 450;     /* 适中粗细 */
    color: #333;          /* 深黑色 */
    margin-bottom: 5px;   /* 紧贴下面的英文 */
    line-height: 1.2;
    text-align: left;
}

/* 2. 英文副标题 (TIME TO SEE...) */
.about-sub-title {
    font-size: 30px;      /* 英文稍微小一点，显得精致 */
    color: #999;          /* 浅灰色 */
    font-weight: 400;
    margin-bottom: 40px;  /* 英文和正文之间拉开距离 */
    letter-spacing: 1px;  /* 字母间距拉开，增加高级感 */
    text-transform: uppercase; /* 强制变大写 */
    text-align: left;
}

/* 3. 品牌描述文字 */
.about-description {
    font-size: 18px;      /* 正文字号 */
    color: #333;          /* 灰色，阅读不累眼 */
    line-height: 1.8;     /* 宽松的行高 */
    max-width: 780px;     /* 限制宽度，防止一行字太长读着累 */
    text-align: left;
}

/* --- 战略合作 (Partner Section) --- */

.partner-section {
    background-color: #fff;
    padding-top: 90px;
    padding-bottom: 110px; /* 距离底部的距离 */
}

/* 灰色圆角卡片容器 */
.partner-card {
    width: 100%;
    /* 这里的背景色可以保留，作为图片加载前的占位 */
    background-color: #f9f9f9;  
    border-radius: 20px;
    overflow: hidden; /* 【关键】切掉图片多余的角，保证圆角完美 */
    
    /* 开启 Flex 布局 */
    display: flex;
    flex-direction: row; /* 电脑端：左右排列 */
    align-items: flex-start; /* 强制两张图等高 */
    padding: 0; /* 【关键】去掉内边距，让图片撑满容器边缘 */
}

/* 新增：两张切图的通用样式 */
.partner-split-img {

    flex: 1;      /* 双重保险 */
    width: 0;
    height: auto;     /* 高度撑满容器 */
    aspect-ratio: 1395 / 958;
    object-fit: cover; /* 保证图片不变形 */
    display: block;    /* 消除图片底部的微小缝隙 */
}

/* 内部切图样式 */


/* --- 同行计划 (Join Program) --- */

.join-program {
    background-color: #fff;
    padding-bottom: 30px;
}

/* 1. 外部标题样式 */
.join-header {
    margin-bottom: 50px;
    text-align: left;
}
.join-sub-title {
    font-size: 50px;
    font-weight: 450;
    color: #999;
    margin-bottom: -15px;
}
.join-main-title {
    font-size: 50px;
    color: #333;
    font-weight: 450;
    margin-bottom: 40px;
}

/* --- 核心布局：左右分开 --- */
.join-dual-wrapper {
    display: flex;          /* 弹性布局 */
    justify-content: space-between;
    gap: 14px;              /* 【关键】两个容器中间的缝隙 */
    height: 500px;          /* 设定一个统一高度，让左右两边一样高 */
    margin-top: 80px;
    margin-bottom: -50px;
}

/* --- 左侧容器 (文字) --- */
.join-text-card {
    flex: 1;                /* 占 50% 宽度 */
    background-color: #f9f9f9; /* 灰色背景 */
    border-radius: 20px;    /* 圆角 */
    padding: 40px;          /* 内边距 */
    
    /* 让文字垂直居中 (可选) */
    display: flex;
    flex-direction: column;
}

/* 文字内部样式 */
.benefit-title {
    font-size: 40px;
    font-weight: 450;
    color: #333;
    margin-bottom: -3px;
    margin-top: 10px;
}
.benefit-desc {
    font-size: 18px;
    font-weight: 400;
    color: #999;
    margin-bottom: 220px;
}
.benefit-list {
    list-style: none;
}
.benefit-list li {
    font-size: 18px;
    color: #555;
    margin-bottom: 15px;
    line-height: 1;
    
}
.benefit-list strong {
    color: #333;
    margin-right: 5px;
}

/* --- 右侧容器 (图片) --- */
.join-img-card {
    flex: 1.8;                /* 占 50% 宽度 */
    border-radius: 20px;    /* 圆角 */
    overflow: hidden;       /* 切掉图片超出的角 */
    /* 注意：这里不需要背景色，因为全是图片 */
}

.join-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 【关键】图片填满容器，不变形 */
    display: block;
}

/* --- 5大支持 (Support Section) --- */

.support-section {
    background-color: #fff;
    padding-bottom: 120px; /* 距离底部页脚远一点 */
}

/* 大标题 */
.support-main-title {
    font-size: 40px;
    font-weight: 450;
    margin-bottom: -3px;
    color: #333;
    text-align: left;
}

.support-sub-title {
    font-size: 18px;
    font-weight: 400;
    color: #999;
    margin-bottom: 40px;
}

/* 网格容器 */
.support-grid {
    display: flex;
    justify-content: space-between;
    gap: 14px; /* 卡片之间的间距 */
    margin-bottom: 30px;
}

/* 单列样式 (现在变成了卡片) */
.support-item {
    flex: 1; /* 平分宽度 */
    text-align: left;
    
    /* ↓↓↓ 新增的卡片样式 ↓↓↓ */
    background-color: #f9f9f9; /* 浅灰背景 */
    border-radius: 20px;       /* 圆角 */
    padding: 40px;             /* 内边距，给内容留空间 */
    
    /* 鼠标放上去有一个小小的上浮效果，更有质感 (可选) */
    transition: transform 0.3s;
}

.support-item:hover {
    transform: translateY(-5px); /* 悬停时上浮 */
}

/* 加号图标样式 */
.plus-icon {
    font-size: 40px;
    font-weight: 450;
    margin-bottom: 5px;
    color: #333;
}

/* 小标题 */
.support-item h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 200px;
    color: #333;
}

/* 描述文字 */
.support-item p {
    font-size: 16px; /* 字号稍微改小一点点，因为放在卡片里显得精致 */
    color: #333;
    line-height: 1.8;
    margin-bottom: 10px;
}


/* --- 底部区域 (Footer) - 最终修正版 --- */

.site-footer {
    background-color: #fff;
    padding-bottom: 40px; 
}

/* A. 号召文字 */
.cta-header {
    margin-bottom: 50px;
    text-align: left;
}
.cta-title {
    font-size: 50px;
    font-weight: 450;
    color: #333;
    line-height: 1.3;
    margin-bottom: 40px;
}
.cta-desc {
    font-size: 18px;
    color: #999;
    margin-top: 20px;
    max-width: 780px; 
    line-height: 1.8; 
    margin-bottom: 40px;
}

/* B. 主体内容区 (左图 + 右信) */
.footer-main-wrapper {
    display: flex;
    gap: 14px;         /* 左右两大块的间距 */

    align-items: flex-start;
    margin-bottom: 20px; /* 距离底部灰条的距离 */
}

/* 1. 左侧图片卡片 */
.footer-left-visual {
    flex: 1;           /* 占左边一部分宽度 */
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1414 / 958;
    /* 如果切图本身有圆角，这里不设背景；如果切图是方的，这里切圆角 */
}
.footer-left-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满 */
    display: block;
}

/* 2. 右侧联系信息区 (包含3个黑盒子) */
.footer-right-contact {
    flex: 1;         /* 右边稍微宽一点 */
    display: flex;     /* 内部再分左右 */
    gap: 14px;         /* 内部间距 */
}

/* 内左列 (竖排2个) */
.contact-col-left,
.contact-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px; /* 上下盒子间距 */
}

/* --- 黑色小盒子样式 --- */
.contact-box-black {
    background-color: #f9f9f9; /* 纯黑背景 */
    border-radius: 20px;    /* 圆角 */
    padding: 30px;          /* 内边距 */
    height: 170px;
    
    display: flex;
    flex-direction: column;
    color: #f3f3f3;
    transition: transform 0.3s;
}
.contact-box-black:hover {
    transform: translateY(-3px); /* 微微上浮效果 */
}


/* 盒子内文字 */
.contact-box-black h4 {
    font-size: 16px;
    font-weight: 450;
    color: #999;
    margin-top: 10px;
    text-transform: uppercase;
}
.contact-box-black p {
    font-size: 26px;
    color: #333;
    line-height: 1.5;
}
.big-num {
    font-size: 28px !important;
    font-weight: 700;
    margin: 5px 0;
    color: #999;
}
.small-hint {
    font-size: 12px !important;
    color: #999;
}

/* C. 最底部灰色条 (Logo + 版权) */
.footer-bottom-bar {
    background-color: #f9f9f9; /* 浅灰背景 */
    border-radius: 20px;       /* 圆角 */
    padding: 40px;             /* 内边距 */
    width: 100%;               /* 宽度自然填满 container */
    margin-top: 60px;
    margin-bottom: -80px;
    
    display: flex;
    flex-direction: column;    /* 垂直排列 */
    align-items: flex-start;   /* 左对齐 */
    gap: 30px;                 /* Logo和文字的间距 */
}

.bottom-logo-img {
    height: 30px;              /* Logo高度限制 */
    width: auto;
    margin-top: 30px;
}

.bottom-copyright {
    font-size: 16px;
    color: #999;
    margin-bottom: 30px;
}












/* ========================================= */
/* 移动端适配代码 (响应式)             */
/* 仅在屏幕宽度小于 768px 时生效       */
/* ========================================= */

@media screen and (max-width: 768px) {

    /* --- 1. 全局容器调整 --- */
    .container {
        padding: 0 20px; /* 左右边距减小，给手机屏幕留空间 */
        width: 100%;
    }
    
    /* --- 2. 导航栏与汉堡菜单 --- */
    .navbar {
        height: 60px; /* 导航栏变矮一点 */
    }
    
    /* 汉堡按钮样式 */
    .hamburger {
        display: flex; /* 显示按钮 */
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        z-index: 1001;
    }
    .hamburger .bar {
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: 0.3s;
    }

    /* 菜单列表变成下拉式 */
    .menu {
        position: fixed;
        top: 60px; /* 在导航栏下方 */
        left: 0;
        width: 100%;
        background-color: #fff;
        flex-direction: column; /* 垂直排列 */
        padding: 20px 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        display: none; /* 默认隐藏 */
        opacity: 0;
        transition: opacity 0.3s;
    }
    /* 激活状态：显示菜单 */
    .menu.active {
        display: flex;
        opacity: 1;
    }
    
    /* 菜单链接样式调整 */
    .menu a {
        margin: 15px 0; /* 上下间距 */
        margin-left: 0; /* 清除左边距 */
        font-size: 18px;
        text-align: center; /* 文字居中 */
        display: block;
        width: 100%;
    }

    /* --- 3. 首屏海报 (Hero) 垂直重排 --- */
    .hero-section {
        padding-top: 20px;
    }
    .hero-card {
        height: auto; /* 解除固定高度 */
        display: flex; /* 开启弹性布局 */
        flex-direction: column; /* 垂直排列 */
        align-items: center; /* 内容居中 */
        padding-bottom: 40px;
    }

    /* 重置所有绝对定位元素 */
    .top-left-info, .center-bg-text, .glasses-wrapper,
    .dots-control-vertical, .bottom-left-info, .bottom-right-info {
        position: static; /* 恢复标准流 */
        transform: none;
        width: 100%;
        text-align: center; /* 文字居中 */
        margin: 0;
        padding: 0;
    }

    /* 调整具体元素的顺序和间距 */
    
    /* 标题区域 */
    .top-left-info {
        order: 1; /* 排在第1位 */
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .top-left-info h3 { font-size: 24px; }
    .top-left-info span { font-size: 14px; }

    /* 背景大字 (手机上可以隐藏，或者作为装饰) */
    .center-bg-text {
        display: none; /* 建议隐藏，避免干扰 */
    }

    /* 眼镜轮播区 */
    .glasses-wrapper {
        order: 2;          /* 排序位置 */
        position: relative; /* 保持相对定位 */
        
        /* 【关键修复】强制重置电脑端的定位属性 */
        top: auto !important; 
        left: auto !important;
        transform: none !important; 
        
        /* 容器占满整行，确保内部有足够空间居中 */
        width: 100%;       
        height: 220px;     /* 给图片留出高度空间 */
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .glass-img {
        /* 保持绝对定位，为了让三张图重叠在一起 */
        position: absolute;
        
        /* 【关键修复】利用 margin 自动算法实现水平完美居中 */
        left: 0;
        right: 0;
        margin: 0 auto;
        
        /* 调整图片大小，避免太大撑满屏幕 */
        width: 70%;        
        max-width: 320px;  /* 限制最大宽度 */
        top: 20px;         /* 距离容器顶部一点距离 */
        
        /* 强制重置缩放，或者你可以保留 active 状态的缩放逻辑 */
        /* 这里我们只重置基础状态，JS 会控制 active 类的缩放 */
    }

    /* 控制点 (变横向) */
    .dots-control-vertical {
        order: 3; /* 排在第3位 */
        flex-direction: row; /* 变成横向排列 */
        justify-content: center;
        gap: 15px;
        margin-bottom: 30px;
    }

    /* Slogan */
    .bottom-left-info {
        order: 4; /* 排在第4位 */
        margin-bottom: 30px;
        text-align: center; /* 确保居中 */
    }
    .slogan-line-1, .slogan-line-2 {
        font-size: 24px; /* 字号缩小 */
    }

    /* 购买按钮 */
    .bottom-right-info {
        order: 5; /* 排在第5位 */
        text-align: center;
    }

    /* --- 4. 核心卖点 (左右图变上下图) --- */
    .dual-wrapper {
        flex-direction: column; /* 垂直排列 */
        height: auto; /* 解除高度 */
    }
    .dual-card {
        height: auto;
        aspect-ratio: 140 / 73;
        margin-bottom: 10px;
    }

    /* --- 5. 技术底座 (保留横向滑动，调整大小) --- */
    .tech-section {
        padding: 60px 0; /* 减小上下留白 */
    }
    .tech-main-title { font-size: 32px; }
    .tech-sub-title { font-size: 24px; margin-bottom: 20px;}
    .tech-description { font-size: 16px; }

    .scenario-grid {
        /* 手机上卡片宽度稍微变小，方便露出下一张的一部分，提示用户可以滑 */
        gap: 15px; 
    }
    .scene-card {
        flex: 0 0 85%; /* 这里的85%是为了让用户看到右边还有一点点内容，引导滑动 */
    }
    .img-box {
        height: 220px; /* 图片变矮 */
    }

    /* --- 6. 关于天视 & 底部 --- */
    .about-main-title, .join-main-title, .cta-title {
        font-size: 32px; /* 统一缩小大标题 */
    }
    .about-sub-title, .join-sub-title {
        font-size: 20px;
    }
    .partner-card {
        flex-direction: column; /* 变为垂直排列 */
        /* 高度不需要设，因为里面的图片有比例，会把父容器撑开 */
    }
    
    .partner-split-img {
        /* 手机端逻辑： */
        width: 100%;  /* 宽度占满屏幕 */
        flex: none;   /* 解除电脑端的限制 */
        
        /* 注意：aspect-ratio 会自动继承电脑端的设置 (4/3)。
           所以在手机上，图片会变大，高度也会按比例自动变高，
           保证完全不截断，不拉伸。
        */
    }
    
    /* --- 7. 同行计划 (图片文字上下排) --- */
    .join-sub-title {
        margin-bottom: 5px; /* 关键：电脑端是-15px，这里改成10px正数，拉开缝隙 */
    }
    
    .join-main-title {
        margin-top: 0;
        margin-bottom: 30px; /* 调整大标题和下面正文段落的距离 */
        line-height: 1.4;    /* 增加行高，防止标题换行后自己挤自己 */
    }
    .join-dual-wrapper {
        flex-direction: column-reverse; /* 图片在上，文字在下 (或者正常 column) */
        height: auto;
        margin-top: 40px;
    }
    .join-img-card {
        height: 250px;
    }
    .join-text-card {
        padding: 30px;
    }
    .benefit-desc { margin-bottom: 40px; }

    /* --- 8. 5大支持 (网格变单列) --- */
    .support-grid {
        flex-direction: column;
    }
    .support-item h3 { margin-bottom: 20px; } /* 修正原代码可能的超大 margin */

    /* --- 9. 页脚 (Footer) --- */
    .footer-main-wrapper {
        flex-direction: column;
        height: auto;
    }
    .footer-left-visual {
        height: auto;
        width: 100%;
        aspect-ratio: 1414 / 958;
        margin-bottom: 20px;
    }
    .footer-right-contact {
        flex-direction: column;
    }
    .contact-col-left, .contact-col-right {
        gap: 10px;
    }
    .contact-box-black {
        height: auto; /* 高度自适应 */
        padding: 25px;
    }
    /* --- 新增板块手机适配 --- */
    .app-showcase-card {
        flex-direction: column; /* 手机端上下排 */
    }
    
    .app-split-img {
        width: 100%; /* 占满全宽 */
        
        /* 手机上图片会变大，这里不需要改 aspect-ratio，
           因为它会自动继承电脑端的比例，保证不截断、不变形 */
    }

}

/* --- 全局生效：备案号链接样式 --- */

/* 1. 强制覆盖所有状态（未访问、已访问）的颜色 */
.beian-link, 
.beian-link:visited, 
.beian-link:link {
    color: #999999 !important; /* 这里填入你原本版权文字的灰色 */
    text-decoration: none !important; /* 强制去掉下划线 */
    transition: color 0.3s ease;
}

/* 2. 鼠标移入的效果：变成深色或白色 */
.beian-link:hover {
    color: #333333 !important; /* 或者换成 #ffffff 变亮 */
    text-decoration: underline !important; /* 悬停时显示下划线，增加交互感 */
}