/* 首页偏上  大型轮播图 */
.lbtttBox {
    width: 100%;
    height: 100%;
    /*background-color: #f4f6fa;*/
}

.tab-Box {
    width: 100%;
    /*height: 600px;*/
    /*border: 1px solid #000;*/
    /*padding-top: 44px;*/
}

/* 基础样式 */
.tab-container {
    width: 100%;
    margin: 0px auto;
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
}

/* Tab 按钮栏 */
.tab-buttons {
    display: flex;
    background-color: #f1f1f1;
    width: 700px;
    margin: 0px auto;
    /* border-bottom: 1px solid #ddd; */
}

.tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    cursor: pointer;
    background-color: #fff;
    transition: 0.3s;
    font-weight: bold;
}

.tab-btn:hover {
    background-color: #e0e0e0;
}

/* 激活状态的样式 */
.tab-btn.active {
    background-color: #fff;
    color: #007BFF;
    border-bottom: 2px solid #2D2D2D;
}

/* 内容区域 */
.tab-content {
    /*padding: 20px;*/
    /*height: 100px;*/
    /*height: 800px;*/
    display: none;
    /* 默认隐藏 */
    margin-top: 20px;
    width: 100%;
    height: 620px;
    /*border: 1px solid #000;*/

}

.tab-content.active {
    display: block;
    /* 激活时显示 */
    animation: fadeInUp 0.8s ease-out forwards;
}


/*隧道代理*/
.quantum-container {
    /*width: 1200px;*/
    width: 100%;
    /*height: 600px;*/
    background: #FFFFFF;
    border-radius: 32px;
    display: flex;
    overflow: hidden;
    position: relative;
    /*box-shadow: 0 40px 120px rgba(0, 0, 0, 0.06);*/
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* --- 💎 CSS 霓虹跑马灯边框 --- */
/*.quantum-container::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    inset: -1px;*/
/*    border-radius: 33px;*/
/*    background: conic-gradient(from 180deg at 50% 50%, #0071e3 0%, #00f2ff 30%, transparent 60%, #00f2ff 80%, #0071e3 100%);*/
/*    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);*/
/*    -webkit-mask-composite: xor;*/
/*    mask-composite: exclude;*/
/*    padding: 1.5px;*/
/*    animation: marqueeRotate 1s linear infinite;*/
/*    z-index: 20;*/
/*    pointer-events: none;*/
/*}*/

@keyframes marqueeRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- 💎 左侧：高对比度 3D 隧道监控区 --- */
.quantum-container .visual-side {
    flex: 1.2;
    background: #ecedf2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-right: 1px solid rgba(0, 0, 0, 0.03);
    perspective: 1200px;
    overflow: hidden;
    height: 600px;
}

.quantum-container .tunnel-scene {
    position: relative;
    width: 400px;
    height: 400px;
    transform-style: preserve-3d;
    transform: rotateX(15deg);
}

/* 隧道光环：加深颜色 + 霓虹发光 */
.quantum-container .tunnel-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(0, 113, 227, 0.5);
    border-radius: 50%;
    animation: tunnelStream 3.5s linear infinite;
    opacity: 0;
    box-shadow: inset 0 0 15px rgba(0, 113, 227, 0.2), 0 0 10px rgba(0, 113, 227, 0.1);
}

@keyframes tunnelStream {
    0% {
        transform: translateZ(-800px) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        border-color: #0071e3;
    }
    100% {
        transform: translateZ(300px) scale(1.5);
        opacity: 0;
        border-color: #00f2ff;
    }
}

/* --- 💎 6个全息中文监控标签 --- */
.quantum-container .hologram-tag {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1.5px solid var(--brand-blue);
    padding: 8px 12px;
    border-radius: 10px;
    width: 115px;
    box-shadow: 0 10px 25px rgba(0, 113, 227, 0.1);
    animation: float 4s ease-in-out infinite;
    z-index: 15;
}

.quantum-container .hologram-tag .label {
    font-size: 11px;
    color: var(--text-sub);
    font-weight: 700;
    margin-bottom: 2px;
}

.quantum-container .hologram-tag .val {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

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

/* 标签位置布局 */
.quantum-container .tag-1 {
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}

/* 资源池 */
.quantum-container .tag-2 {
    top: 12%;
    right: 8%;
    animation-delay: 0.5s;
}

/* 支持协议 */
.quantum-container .tag-3 {
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    animation-delay: 1s;
}

/* 平均延迟 */
.quantum-container .tag-4 {
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    animation-delay: 1.5s;
}

/* 并发限制 */
.quantum-container .tag-5 {
    bottom: 12%;
    left: 8%;
    animation-delay: 2s;
}

/* 任务成功率 */
.quantum-container .tag-6 {
    bottom: 12%;
    right: 8%;
    animation-delay: 2.5s;
}

/* 轮换方式 */

/* 穿梭粒子 */
.quantum-container .data-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00f2ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00f2ff;
    animation: particleStream 1.8s linear infinite;
}

@keyframes particleStream {
    0% {
        transform: translateZ(-600px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateZ(200px);
        opacity: 0;
    }
}

/* --- 💎 右侧：文案区 --- */
.quantum-container .content-side {
    flex: 0.8;
    padding: 60px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    height: 600px;
}

.quantum-container .tag {
    color: #0071e3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.quantum-container h2 {
    font-size: 46px;
    font-weight: 800;
    margin: 0 0 20px;
    color: #1d1d1f;
    letter-spacing: -2px;
    line-height: 1.1;
}

.quantum-container h2 span {
    background: linear-gradient(90deg, #0071e3, #00f2ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.quantum-container .feature-item {
    margin-bottom: 24px;
    display: flex;
    gap: 15px;
}

.quantum-container .f-icon {
    width: 22px;
    height: 22px;
    background: #0071e3;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.quantum-container .f-text h4 {
    font-size: 17px;
    margin: 0 0 5px;
    color: #1d1d1f;
    font-weight: 700;
}

.quantum-container .f-text p {
    font-size: 14px;
    margin: 0;
    color: #86868b;
    line-height: 1.6;
}

.quantum-container .btn-launch {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 35px;
    background: #1d1d1f;
    color: #fff;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.quantum-container .btn-launch:hover {
    background: #0071e3;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 113, 227, 0.2);
}

/*隧道代理*/

/* 首页偏上  大型轮播图 */

/*企业代理*/
.quantum-containerQY {
    /*width: 1200px;*/
    /*height: 600px;*/
    width: 100%;
    background: #fff;
    border-radius: 32px;
    display: flex;
    overflow: hidden;
    position: relative;
    /*box-shadow: 0 40px 120px rgba(0, 0, 0, 0.06);*/
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- 💎 霓虹跑马灯边框 --- */
/*.quantum-containerQY::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    inset: -1px;*/
/*    border-radius: 33px;*/
/*    background: conic-gradient(from 180deg at 50% 50%, #0071e3 0%, #00f2ff 30%, transparent 60%, #00f2ff 80%, #0071e3 100%);*/
/*    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);*/
/*    -webkit-mask-composite: xor;*/
/*    mask-composite: exclude;*/
/*    padding: 1.5px;*/
/*    animation: marqueeRotate 6s linear infinite;*/
/*    z-index: 20;*/
/*    pointer-events: none;*/
/*}*/

/* --- 💎 左侧：丰富的小部件视觉区 --- */
.quantum-containerQY .visual-grid {
    flex: 1.2;
    background: #f8f9fb;
    position: relative;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    height: 600px;
}

.quantum-containerQY .widget {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid #fff;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.quantum-containerQY .widget:hover {
    transform: translateY(-5px);
}

/* 部件1：专属线路监控 */
.quantum-containerQY .w-full {
    grid-column: span 2;
}

.quantum-containerQY .monitor-line {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    margin: 10px 0;
    overflow: hidden;
}

.quantum-containerQY .monitor-bar {
    height: 100%;
    background: linear-gradient(90deg, #0071e3, #00f2ff);
    width: 85%;
    animation: grow 2s ease-out;
}

/* 部件2：地区分布预览 */
.quantum-containerQY .region-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quantum-containerQY .region-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #86868b;
}

.quantum-containerQY .region-item b {
    color: #0071e3;
}

/* 部件3：安全性图表 */
.quantum-containerQY .security-circle {
    width: 70px;
    height: 70px;
    border: 4px solid #00f2ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #0071e3;
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}

/* 背景装饰 */
.quantum-containerQY .bg-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.05) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* --- 💎 右侧：文案区 --- */
.quantum-containerQY .content-side {
    flex: 0.8;
    padding: 60px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    height: 600px;
}

.quantum-containerQY .tag {
    color: #0071e3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.quantum-containerQY h2 {
    font-size: 46px;
    font-weight: 800;
    margin: 0 0 15px;
    color: #1d1d1f;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.quantum-containerQY h2 span {
    background: linear-gradient(90deg, #0071e3, #5e5eef);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.quantum-containerQY .desc {
    font-size: 16px;
    color: #86868b;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* 特权列表 */
.quantum-containerQY .perks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.quantum-containerQY .perk-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.quantum-containerQY .perk-icon {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    font-size: 20px;
}

.quantum-containerQY .perk-info h4 {
    font-size: 15px;
    margin: 0;
    color: #1d1d1f;
}

.quantum-containerQY .perk-info p {
    font-size: 12px;
    margin: 2px 0 0;
    color: #86868b;
}

.quantum-containerQY .btn-group {
    /*display: flex;*/
    /*gap: 15px;*/
    text-align: center;
}

.quantum-containerQY .btn-primary {
    background: #0071e3;
    color: #fff;
    padding: 16px 32px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

.quantum-containerQY .btn-secondary {
    background: #f5f5f7;
    color: #1d1d1f;
    padding: 16px 32px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

.quantum-containerQY .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 113, 227, 0.2);
}

@keyframes grow {
    from {
        width: 0;
    }
    to {
        width: 85%;
    }
}


/*；轮播图下面  共有的数据*/
/* --- 💎 核心黑科技：定义 CSS 变量动画用于跑马灯 --- */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* 全屏流式背景 */
.full-screen-wrapper {
    /*width: 100vw;*/
    /*min-height: 100vh;*/
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 80px 0;
    box-sizing: border-box;
    background: radial-gradient(circle at 85% 15%, rgba(191, 90, 242, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 10% 85%, rgba(90, 200, 250, 0.06) 0%, transparent 40%);
}

/* 无限网格背景 */
.infinite-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
}

/* 核心布局 */
.content-main {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 80px;
    z-index: 10;
    padding: 0 40px;
    box-sizing: border-box;
}

/* --- 💎 左侧：非对称错位组件区 --- */
.asymmetric-data-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- 💎 重构后的胶囊组件样式 ---
   利用伪元素实现跑马灯，主体需要 overflow: hidden 和 z-index
*/
.mini-island {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 24px;
    padding: 25px 30px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    /* 基础状态下隐藏跑马灯层 */
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* 统一设置一个极淡的边框作为基底 */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* --- 💎 跑马灯核心：::before 伪元素作为流光层 --- */
.mini-island::before {
    content: '';
    position: absolute;
    /* 铺满整个组件并溢出，确保旋转时覆盖四个角 */
    inset: -5px;
    z-index: -2;
    /* 关键：使用 conic-gradient 制造流光，并通过 CSS 变量 --angle 控制旋转 */
    background: conic-gradient(
            from var(--angle),
            transparent 70%,
            #bf5af2 85%,
            var(--brand-cyan) 95%,
            transparent 100%
    );
    /* 默认透明度为 0 */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* --- 💎 主体内容层：::after 伪元素作为白色蒙层 --- */
.mini-island::after {
    content: '';
    position: absolute;
    /* 留出 1.5px 的边框距离 */
    inset: 1.5px;
    background: #fff;
    border-radius: 23px; /* 略小于主体的圆角 */
    z-index: -1;
    transition: background 0.4s ease;
}

/* --- 💎 Hover 状态：激活跑马灯动画 --- */
.mini-island:hover {
    transform: translateY(-8px) scale(1.01);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(191, 90, 242, 0.1);
}

/* 悬停时，::before 变为可见，并启动旋转动画 */
.mini-island:hover::before {
    opacity: 1;
    animation: rotateBorder 1.5s linear infinite;
}

/* 悬停时，内部蒙层变纯白 */
.mini-island:hover::after {
    background: #ffffff;
}

/* 定义 CSS 变量旋转动画 */
@keyframes rotateBorder {
    to {
        --angle: 360deg;
    }
}

/* 数据文字排版 */
.m-val {
    font-size: 38px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.Unit {
    font-size: 18px;
    color: #bf5af2;
    margin-left: 3px;
    font-weight: 700;
}

.m-label {
    font-size: 12px;
    color: #86868b;
    margin-top: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 非对称偏移控制 */
.row-group {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pos-1 {
    width: 340px;
}

/* 核心节点 */
/* 给核心节点一个特殊的、默认可见的左侧高亮条 */
.pos-1::after {
    border-left: 4px solid #bf5af2;
    border-radius: 2px 23px 23px 2px;
}

.pos-2 {
    width: 190px;
    margin-left: 40px;
}

/* 成功率 */
.pos-3 {
    width: 170px;
}

/* 延迟 */
.pos-4 {
    width: 220px;
    margin-left: 20px;
}

/* 并发 */
.pos-5 {
    width: 160px;
}

/* 纯净度 */

/* --- 💎 右侧：回归经典叙事区 --- */
.narrative-side {
    flex: 1.2;
}

.badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(191, 90, 242, 0.1);
    color: #bf5af2;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.narrative-side h2 {
    font-size: 56px;
    font-weight: 800;
    color: #1d1d1f;
    margin: 0 0 40px;
    line-height: 1.05;
    letter-spacing: -3px;
}

.narrative-side h2 span {
    background: linear-gradient(135deg, #bf5af2, #5ac8fa);
    -webkit-background-clip: text;
    color: transparent;
}

.trust-point {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
}

.icon-circle {
    width: 56px;
    height: 56px;
    background: #f5f5f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: 0.3s;
}

.trust-text h4 {
    font-size: 20px;
    margin: 0 0 10px;
    color: #1d1d1f;
    font-weight: 700;
}

.trust-text p {
    font-size: 16px;
    color: #86868b;
    line-height: 1.6;
    margin: 0;
}

.cta-area {
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-black {
    background: #1d1d1f;
    color: #fff;
    padding: 22px 50px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.btn-black:hover {
    background: #bf5af2;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(191, 90, 242, 0.3);
}

.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #34c759;
    font-weight: 600;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #34c759;
    border-radius: 50%;
    animation: blinkStatus 2s infinite;
}

@keyframes blinkStatus {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}


/*isp  部分样式*/
.ispContent {
    display: flex;
    justify-content: space-between;
    /*border: 1px solid #000;*/
    /*height: 100%;*/
    cursor: pointer;
}

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


.ispContent-top {
    display: flex;
    flex-direction: column;
    /*border: 1px solid #000;*/
}

.isp-top-left {
    height: 410px;
    width: 746px;
    background-image: url(../images/home/we1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-left: 40px;
    border-radius: 10px;
    margin-right: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

.ipv4-top-left {
    height: 410px;
    width: 746px;
    background-image: url(../images/home/we24.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-left: 40px;
    border-radius: 10px;
    margin-right: 14px;
    transition: all 0.3s ease;
    z-index: 1;
}

.hoverCommon {
    position: relative; /* 确保流光挂在组件上 */
    overflow: hidden;
    z-index: 1; /* 开启层级上下文 */
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate-angle {
    to {
        --angle: 360deg;
    }
}

.hoverCommon::before {
    content: '';
    position: absolute;
    inset: -50%; /* 扩大范围，防止旋转时露出黑角 */
    z-index: -2;
    background: conic-gradient(
            from var(--angle),
            transparent 70%,
            #bf5af2 85%,
            #5ac8fa 95%,
            transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hoverCommon:hover::before {
    opacity: 1;
    animation: rotate-angle 2s linear infinite; /* 激活旋转 */
}

/* 确保中间白色区域盖住流光中心，只留出边框 */
.isp-top-left::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we1.png);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

.ipv4-top-left::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we24.jpg);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

.ispTop-item {
    width: 114px;
    height: 38px;
    line-height: 38px;
    background: #FFFFFF;
    border-radius: 6px 8px 8px 8px;
    border: 1px solid #E1E1E2;
    text-align: center;
    margin-right: 10px;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
}

.ispContent-ljgm {
    width: 198px;
    height: 48px;
    line-height: 48px;
    background: #FF6A00;
    border-radius: 10px;
    font-weight: 400;
    font-size: 26px;
    color: #FFFFFF;
    text-align: center;
    margin-right: 12px;
    cursor: pointer;
}

.ispContent-right {
    /*width: 438px;*/
    width: 100%;
    height: 550px;
    background: #fafafa;
    border-radius: 10px;
    padding: 22px 20px 12px 12px;
    transition: all 0.3s ease;
}

.ispRight-item {
    height: 122px;
    width: 400px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 14px 0 20px 10px;
    margin-bottom: 10px;
    /*transition: background-size 0.5s ease;*/
    cursor: pointer;
    border-radius: 10px;
    position: relative; /* 确保流光挂在组件上 */
    overflow: hidden;
    z-index: 1; /* 开启层级上下文 */
    transition: all 0.3s ease;
}

/*.ispRight-item:hover {*/
/*    background-size: 125%;*/
/*}*/
.ispRight-item:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(191, 90, 242, 0.1);
}


.itemCommon-img {
    background-image: url(../images/home/we3.png);
}

.itemCommon-img2 {
    background-image: url(../images/home/we4.png);
}

.itemCommon-img3 {
    background-image: url(../images/home/we5.png);
}

.itemCommon-img4 {
    background-image: url(../images/home/we21.jpg);
}

.itemCommon-img5 {
    background-image: url(../images/home/we22.jpg);
}

.itemCommon-img6 {
    background-image: url(../images/home/we23.jpg);
}

/* 确保中间白色区域盖住流光中心，只留出边框 */
.itemCommon-img::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we3.png);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

/* 确保中间白色区域盖住流光中心，只留出边框 */
.itemCommon-img2::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we4.png);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

/* 确保中间白色区域盖住流光中心，只留出边框 */
.itemCommon-img3::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we5.png);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

/* 确保中间白色区域盖住流光中心，只留出边框 */
.itemCommon-img4::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we21.jpg);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

/* 确保中间白色区域盖住流光中心，只留出边框 */
.itemCommon-img5::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we22.jpg);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

/* 确保中间白色区域盖住流光中心，只留出边框 */
.itemCommon-img6::after {
    content: '';
    position: absolute;
    inset: 2px; /* 这里的数值就是你边框的粗细 */
    /*background: #fff; !* 或者你的卡片背景色 *!*/
    background-image: url(../images/home/we23.jpg);
    border-radius: inherit; /* 自动继承父级圆角 */
    z-index: -1;
}

/* 动态住宅代理容器 */
.dynamic-proxy-container {
    display: flex;
    /*gap: 20px;*/
    /*padding: 20px;*/
    background: #FAFAFB; /* 给父容器一个背景色，防止透明瞬间露底 */
    /*border-top-right-radius: 20px;*/
    /*border-bottom-right-radius: 50px;*/
    border: 1px solid #999999;
    border-radius: 20px
}

.editor-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
}

.feature-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    /*background: #f8f8fa;*/
    border-radius: 10px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.feature-icon.globe {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
}

.feature-icon.shield {
    background: linear-gradient(135deg, #00cec9, #81ecec);
    color: #fff;
}

.feature-icon.rocket {
    background: linear-gradient(135deg, #fd79a8, #fab1a0);
    color: #fff;
}

.feature-icon.api {
    background: linear-gradient(135deg, #fdcb6e, #ffeaa7);
    color: #333;
}

.feature-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.feature-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}


/* 右侧轮播图 */
.carousel-containerPP {
    width: 470px;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.carousel-wrapperPP {
    width: 100%;
    height: 550px; /* 务必给一个固定高度，不要用 auto */
    position: relative;
    overflow: hidden;
}

.carousel-wrapperPP .carousel-slidePP {
    position: absolute;
    top: 34px;
    left: 50px;
    /*width: 100%;*/
    /*height: 100%;*/
    width: 366px;
    height: 500px;
    background-color: #fff;
    border-radius: 10px;

    /* 核心修改：让隐藏的幻灯片先变成透明，但不消失 */
    opacity: 0;
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}

.carousel-wrapperPP .carousel-slidePP.active {
    opacity: 1;
    z-index: 10; /* 激活态层级提高 */
    pointer-events: auto;
    /* 保持 position: absolute 不要动 */
}


.carousel-wrapperPP .package-card {
    width: 100%;
    height: 100%;
    background: #FAFAFB;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.carousel-wrapperPP .package-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.carousel-wrapperPP .package-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 24px;
}

.carousel-wrapperPP .currency {
    font-size: 24px;
    color: #007bff;
    font-weight: 600;
}

.carousel-wrapperPP .price {
    font-size: 56px;
    font-weight: 800;
    color: #007bff;
    line-height: 1;
}

.carousel-wrapperPP .unit {
    font-size: 16px;
    color: #666;
    margin-left: 4px;
}

.carousel-wrapperPP .package-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px dashed #eee;
    border-bottom: 1px dashed #eee;
}

.carousel-wrapperPP .detail-row {
    display: flex;
    justify-content: space-between;
}

.carousel-wrapperPP .detail-label {
    font-size: 14px;
    color: #888;
}

.carousel-wrapperPP .detail-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.carousel-wrapperPP .package-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 16px;
}

.carousel-wrapperPP .total-label {
    font-size: 14px;
    color: #666;
}

.carousel-wrapperPP .total-value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.carousel-wrapperPP .package-btn {
    width: 100%;
    padding: 14px;
    background: #1d1d1f;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel-wrapperPP .package-btn:hover {
    background: #333;
}


/**/
.carousel-indicatorsPP {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    position: relative; /* 必须为相对定位 */
    padding: 0 4px;
}

/* 底层所有灰点：大小固定不变 */
.carousel-indicatorsPP .indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd; /* 统一灰色 */
    cursor: pointer;
    transition: background-color 0.3s;
}

/* 隐藏原本 active 类的宽度变化，只留颜色作为回退 */
.carousel-indicatorsPP .indicator.active {
    background: transparent; /* 激活时灰点变透明，让位给蓝条 */
}

/* 独立的蓝色滑块 */
.indicator-active-bar {
    position: absolute;
    left: 4px; /* 初始对齐第一个点 */
    top: 0;
    width: 24px; /* 它是长条 */
    height: 8px;
    background: #007bff;
    border-radius: 4px;
    /* 关键：这里的 transition 只管 transform (位移) */
    transition: transform 0.4s ease-in-out;
    pointer-events: none; /* 不遮挡点击 */
}

/* 禁用动画类 */
.no-transition .indicator-active-bar {
    transition: none !important;
}


.code-side {
    flex: 1.25;
    background: #fff;
    padding: 30px 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上中下分布 */
    /*border-right: 1px solid rgba(0, 0, 0, 0.03);*/
    position: relative;
    height: 600px;
    /*border: 1px solid #999999;*/
    /*border-right: none;*/
    /*border-bottom-left-radius: 20px;*/
    border-radius: 20px;
}

/* [顶部填补]：API 态势面板 */
.api-status-panel {
    /*background: rgba(255, 255, 255, 0.6);*/
    background-color: #F1F1F1;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 18px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
}

.status-light {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #34c759;
}

.light-dot {
    width: 8px;
    height: 8px;
    background: #34c759;
    border-radius: 50%;
    box-shadow: 0 0 10px #34c759;
    animation: blink 2s infinite;
}

.lang-icons {
    font-size: 10px;
    color: #86868b;
    font-family: monospace;
    display: flex;
    gap: 8px;
}

.lang-icons span {
    background: #FFFFFF;
    padding: 2px 5px;
    border-radius: 4px;
}

/* [中部]：IDE 代码编辑器 */
.editor-window {
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /*margin-bottom: 20px;*/
    height: 380px;
}

.editor-header {
    background: #2d2d2d;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.dot-r {
    background: #ff5f56;
}

.dot-y {
    background: #ffbd2e;
}

.dot-g {
    background: #27c93f;
}

.file-name {
    color: #86868b;
    font-size: 11px;
    margin-left: 10px;
    font-family: monospace;
}

.code-content {
    padding: 20px 25px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #d4d4d4;
}

.keyword {
    color: #569cd6;
}

.string {
    color: #ce9178;
}

.comment {
    color: #6a9955;
}

.type {
    color: #4ec9b0;
}

.val {
    color: #b5cea8;
}


/*下面的转圈圈*/
/*下面的转圈圈*/
/*下面的转圈圈*/
:root {
    --bg: #ffffff;
    --brand-main: #1d1d1f;
    --brand-safe: #28cd41; /* 针对白色背景加深的合规绿 */
    --brand-accent: #af52de; /* 针对白色背景加深的量子紫 */
    --text-sub: #86868b;
    --glass: rgba(255, 255, 255, 0.7);
    --angle: 0deg;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.section-wrapper {
    /*width: 100vw;*/
    /*min-height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 80% 50%, rgba(175, 82, 222, 0.05) 0%, transparent 40%);
}

.container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 0 60px;
    z-index: 10;
}

/* --- 💎 左侧文案：深邃且清晰 --- */
.text-box {
    flex: 1;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(40, 205, 65, 0.1);
    color: #28cd41;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.text-box h2 {
    font-size: 60px;
    font-weight: 800;
    margin: 0 0 20px;
    line-height: 1.1;
    letter-spacing: -2px;
}

.text-box h2 span {
    color: #28cd41;
}

.text-box .sub-title {
    font-size: 24px;
    color: #1d1d1f;
    margin-bottom: 20px;
    font-weight: 700;
}

.text-box .desc {
    font-size: 18px;
    color: #86868b;
    line-height: 1.6;
    margin-bottom: 45px;
}

.feat-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 18px;
    padding: 20px 25px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.feat-card:hover {
    transform: translateX(15px);
    box-shadow: 0 20px 40px rgba(175, 82, 222, 0.1);
    border-color: #af52de;
}

.feat-card span {
    font-weight: 600;
    font-size: 16px;
}

/* --- 💎 右侧特效：加深线条与量子核心 --- */
.visual-box {
    flex: 1.2;
    position: relative;
    perspective: 1200px;
    display: flex;
    justify-content: center;
}

.quantum-scene {
    width: 500px;
    height: 500px;
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 加深后的轨道线条 */
.orbit {
    position: absolute;
    border-radius: 50%;
    /* 关键改进：增加厚度和透明度，并添加内发光 */
    border: 1.5px solid rgba(142, 36, 170, 0.35);
    box-shadow: 0 0 10px rgba(142, 36, 170, 0.1);
    transform: rotateX(75deg);
}

/* 增加轨道差异 */
.orb-1 {
    width: 440px;
    height: 440px;
    animation: rotate 25s linear infinite;
}

.orb-2 {
    width: 340px;
    height: 340px;
    border-color: rgba(0, 200, 83, 0.3);
    animation: rotate 18s linear reverse infinite;
}

.orb-3 {
    width: 240px;
    height: 240px;
    animation: rotate 12s linear infinite;
    border-style: dashed;
}

@keyframes rotate {
    from {
        transform: rotateX(75deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(75deg) rotateZ(360deg);
    }
}

/* 轨道上的能量亮点 (流光效果) */
.energy-spot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #00c853;
    border-radius: 50%;
    box-shadow: 0 0 15px #00c853;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

/* 核心量子晶体 */
.prism-core {
    width: 140px;
    height: 140px;
    background: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 45px rgba(142, 36, 170, 0.25);
    border: 1px solid rgba(142, 36, 170, 0.1);
    animation: coreFloat 5s ease-in-out infinite;
}

@keyframes coreFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.05);
    }
}

/* 悬浮数据标签 */
.data-label {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #8e24aa;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
}

.label-top {
    top: 10%;
    right: 0;
    border-left-color: #00c853;
}

.label-bottom {
    bottom: 15%;
    left: -20px;
}


/* 科技感小灯 */
.status-lightP {
    width: 8px;
    height: 8px;
    background: #0071e3;
    border-radius: 50%;
    box-shadow: 0 0 8px #0071e3;
    animation: blink 2s infinite;
    margin-left: 18px;
    margin-top: 16px;
}