* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'PingFangRegular', 'Microsoft YaHei', sans-serif;
    overflow-x: hidden;
}

/* 主容器 */
#app-container {
    position: relative;
    width: 1920px;
    height: 7312px;
    background: #FFFFFF;
    overflow: hidden;
}

/* Section 包装样式 - 参考 zhulu86.com */
.page-section {
    width: 100%;
    /* 不设置 position: relative，让内部绝对定位元素相对于 #app-container 定位 */
}

/* 为每一屏定义精确的范围，匹配原始绝对定位坐标 */
.section-hero { height: 1034px; }
.section-what-is-geo { height: 300px; }
.section-features { height: 695px; }
.section-vs { height: 785px; }
.section-platform { height: 1064px; }
.section-advantages { height: 1016px; }
.section-value { height: 1222px; }
.section-window { height: 964px; }
.section-footer { height: 232px; }

.abs {
    position: absolute;
}

.pc-only {
    display: block;
}
.mobile-only {
    display: none;
}

/* 渐变文字 */
.gradient-text {
    background: linear-gradient(90deg, #5C5FE6 0%, #C079D8 40.38%), #000000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Banner背景 */
.banner-bg {
    position: absolute;
    width: 1920px;
    height: 1034px;
    left: 0px;
    top: 0px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 79.08%, #FFFFFF 100%), url('/template/default/pc/skin/images/Rectangle-32.jpg');
    background-size: cover;
    background-position: center;
}

/* Logo */
.logo {
    position: absolute;
    width: 110px;
    height: 37px;
    left: 177px;
    top: 32px;
    font-weight: 600;
    font-size: 24px;
    line-height: 37px;
    color: #206231;
}

/* 主标题 */
.main-title {
    position: absolute;
    width: 625px;
    height: 90px;
    left: calc(50% - 625px/2 + 0.5px);
    top: 112.4px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 64px;
    line-height: 90px;
    color: #000000;
    text-align: center;
}

/* 副标题 */
.subtitle {
    position: absolute;
    width: 418px;
    height: 48px;
    left: calc(50% - 418px/2);
    top: 204px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 300;
    font-size: 34px;
    line-height: 48px;
    color: #000000;
    text-align: center;
}

/* CTA按钮 */
.cta-btn {
    position: absolute;
    width: 174px;
    height: 51px;
    left: calc(50% - 174px/2);
    top: 287px;
    background: linear-gradient(90deg, #5C5FE6 0%, #C079D8 88.94%), #D9D9D9;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PingFangRegular';
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 24px rgba(92, 95, 230, 0.4);
}

/* 什么是GEO标题 */
.section-title-1 {
    position: absolute;
    width: 297px;
    height: 67px;
    left: calc(50% - 297px/2 + 5.5px);
    top: 1076px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 67px;
    color: #000000;
    text-align: center;
}

/* 什么是GEO描述 */
.section-desc-1 {
    position: absolute;
    width: 1002px;
    height: 102px;
    left: calc(50% - 1002px/2);
    top: 1165px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: #4B5462;
}

/* 卡片样式 */
.feature-card {
    position: absolute;
    width: 500px;
    height: 530px;
    background: linear-gradient(180deg, #FAFAFD 0%, #F6F6FA 100%), #F4F5F7;
    border-radius: 20px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(92, 95, 230, 0.15);
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFD 100%), #F4F5F7;
}

.feature-card:hover .card-image {
    transform: scale(1.03);
    box-shadow: 0px 15px 30px rgba(92, 95, 230, 0.2);
}

.card-1 { left: 180px; top: 1334px; }
.card-2 { left: 710px; top: 1334px; }
.card-3 { left: 1240px; top: 1334px; }

.card-title {
    position: absolute;
    width: 112px;
    height: 32px;
    left: 38px;
    top: 47px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    color: #000000;
    z-index: 10;
}

.card-desc {
    position: absolute;
    width: 420px;
    height: 102px;
    left: 38px;
    top: 99px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #4B5462;
    z-index: 10;
}

.card-image {
    position: absolute;
    width: 424px;
    height: 260px;
    left: 38px;
    top: 220px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    overflow: hidden;
    z-index: 1;
}

/* ==================== 第二张卡片元素定位 ==================== */

/* card2图片容器 */
.card2-image-container {
    position: relative;
    overflow: visible !important;
}

/* 背景虚线框 */
.card2-border-box {
    position: absolute;
    width: 354.39px;
    height: 198.5px;
    left: 34px;
    top: 24.5px;
    z-index: 1;
}

/* Vector 90.svg - 背景折线图 */
.card2-bg-line {
    position: absolute;
    width: 354.39px;
    height: 198.5px;
    left: 34px;
    top: 24.5px;
    z-index: 2;
    pointer-events: none;
}

/* Rectangle 36 - 左侧第一个柱 */
.card2-rect-36 {
    position: absolute;
    width: 23px;
    height: 84px;
    left: calc(50% - 23px/2 - 134.5px);
    top: calc(50% - 84px/2 + 53px);
    background: #F7F2F9;
    border-radius: 4px;
    z-index: 2;
}

/* Rectangle 37 - 左侧第二个柱 */
.card2-rect-37 {
    position: absolute;
    width: 23px;
    height: 84px;
    left: calc(50% - 23px/2 - 101.5px);
    top: calc(50% - 84px/2 + 53px);
    background: #F7F2F9;
    border-radius: 4px;
    z-index: 2;
}

/* Rectangle 38 - 右侧第一个柱 */
.card2-rect-38 {
    position: absolute;
    width: 23px;
    height: 140px;
    left: calc(50% - 23px/2 + 100.5px);
    top: calc(50% - 140px/2 + 25px);
    background: #F7F2F9;
    border-radius: 4px;
    z-index: 2;
}

/* Rectangle 39 - 右侧第二个柱 */
.card2-rect-39 {
    position: absolute;
    width: 23px;
    height: 200px;
    left: calc(50% - 23px/2 + 133.5px);
    top: calc(50% - 200px/2 - 5px);
    background: #F7F2F9;
    border-radius: 4px;
    z-index: 2;
}

/* Rectangle 40 - 中央白色卡片 */
.card2-rect-40 {
    box-sizing: border-box;
    position: absolute;
    width: 138px;
    height: 178px;
    left: calc(50% - 138px/2);
    top: calc(50% - 178px/2 + 6px);
    background: #FFFFFF;
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, 
                linear-gradient(90deg, #5C5FE6 0%, #C079D8 100%) border-box;
    box-shadow: 0px 15px 27px -8px rgba(92, 95, 230, 0.2);
    border-radius: 4px;
    z-index: 3;
}

/* Union - 顶部紫色图标（SVG） */
.card2-union-top {
    position: absolute;
    width: 14px;
    height: 10.86px;
    left: 158px;
    top: 57.1px;
    z-index: 4;
}

/* Rectangle 45 - 横条1 */
.card2-rect-45 {
    position: absolute;
    width: 107px;
    height: 3px;
    left: 158px;
    top: 76px;
    background: #F5ECFF;
    z-index: 4;
}

/* Rectangle 46 - 横条2 */
.card2-rect-46 {
    position: absolute;
    width: 107px;
    height: 3px;
    left: 158px;
    top: 82px;
    background: #F5ECFF;
    z-index: 4;
}

/* Rectangle 47 - 横条3 */
.card2-rect-47 {
    position: absolute;
    width: 49px;
    height: 3px;
    left: 158px;
    top: 88px;
    background: #F5ECFF;
    z-index: 4;
}

/* Vector 11 - 左侧箭头 */
.card2-vector-11 {
    position: absolute;
    width: 25.5px;
    height: 8.5px;
    left: 157px;
    top: 143px;
    border: 1px solid #E1D4E5;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    z-index: 4;
}

/* Union - 底部圆形 */
.card2-union-bottom {
    position: absolute;
    width: 63px;
    height: 63px;
    left: 180px;
    top: 138px;
    background: #F5ECFF;
    box-shadow: 0px 15px 27px #E1E2FF;
    border-radius: 50%;
    z-index: 5;
}

/* Intersect - 底部半圆渐变（SVG） */
.card2-intersect-bottom {
    position: absolute;
    width: 52.42px;
    height: 25.67px;
    left: 188.72px;
    top: 175.33px;
    z-index: 6;
}

/* Intersect - 中间紫色半圆（SVG） */
.card2-intersect-middle {
    position: absolute;
    width: 31.5px;
    height: 43.22px;
    left: 211.5px;
    top: 138px;
    z-index: 7;
}

/* Vector 10 - 右侧箭头上 */
.card2-vector-10 {
    position: absolute;
    width: 25.5px;
    height: 8.5px;
    left: 240.5px;
    top: 143px;
    border: 1px solid #E1D4E5;
    z-index: 4;
}

/* Vector 12 - 右侧箭头下 */
.card2-vector-12 {
    position: absolute;
    width: 25.5px;
    height: 8.5px;
    left: 240.5px;
    top: 192px;
    border: 1px solid #E1D4E5;
    transform: matrix(1, 0, 0, -1, 0, 0);
    z-index: 4;
}

/* Rectangle 48 - 右上角白色卡片 */
.card2-rect-48 {
    box-sizing: border-box;
    position: absolute;
    width: 69px;
    height: 48px;
    left: 253px;
    top: 81px;
    background: #FFFFFF;
    box-shadow: 0px 15px 27px -8px #E1E2FF;
    border-radius: 4px;
    z-index: 8;
}

/* 最高可省文字 */
.card2-text-save {
    position: absolute;
    width: 32px;
    height: 11px;
    left: 270px;
    top: 92px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 8px;
    line-height: 11px;
    color: #333333;
    z-index: 9;
}

/* 98%文字 */
.card2-text-percent {
    position: absolute;
    width: 36px;
    height: 22px;
    left: 270px;
    top: 101px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #333333;
    z-index: 9;
}

/* 第二张卡片初始状态 - 所有元素隐藏 */
.card-2 .card2-rect-36,
.card-2 .card2-rect-37,
.card-2 .card2-rect-38,
.card-2 .card2-rect-39,
.card-2 .card2-rect-40,
.card-2 .card2-rect-48 {
    opacity: 0;
}

/* 柱状图初始高度为0 */
.card-2 .card2-rect-36,
.card-2 .card2-rect-37,
.card-2 .card2-rect-38,
.card-2 .card2-rect-39 {
    transform: scaleY(0);
    transform-origin: bottom;
}

/* 柱状图从下往上生长 */
.card-2.animated .card2-rect-36 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

.card-2.animated .card2-rect-37 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.4s;
}

.card-2.animated .card2-rect-38 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.5s;
}

.card-2.animated .card2-rect-39 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

/* ==================== 全局溢出控制 ==================== */
html, body {
width: 100%;
position: relative;
}

.main-content-wrapper {
overflow-x: hidden;
position: relative;
width: 100%;
}

/* ==================== 头部滚动效果调整 ==================== */
.home_container.active .box .boxCenter {
left: 50% !important;
transform: translateX(-50%) !important;
}

/* 滚动时显示主Logo区域（使用logo3.svg），隐藏oldLogo */
.home_container.active .box .boxCenter p {
transform: scale(1) !important;
opacity: 1 !important;
}

.home_container.active .box .boxCenter .oldLogo {
transform: translateY(-50%) scale(0) !important;
opacity: 0 !important;
}

/* 确保滚动时显示 logo3.svg (img2)，隐藏 logo4.svg (img1) */
.home_container.active .box .boxCenter p a .img1 {
opacity: 0 !important;
}

.home_container.active .box .boxCenter p a .img2 {
opacity: 1 !important;
}

/* 滚动时隐藏 slogan 和分割线，保持 logo 居中，匹配参考站效果 */
.home_container.active .box .boxCenter .oldLogo .xian,
.home_container.active .box .boxCenter .oldLogo .slogan_ {
opacity: 0 !important;
width: 0 !important;
margin: 0 !important;
overflow: hidden;
}

/* 滚动时显示左侧导航栏 */
.home_container.active .box .boxLeft {
opacity: 1 !important;
padding-left: 0 !important;
pointer-events: auto !important;
}

/* 确保滚动时背景有模糊效果且变为白色半透明 */
.home_container.active::after {
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}

/* ==================== 第三张卡片元素定位 ==================== */
.card3-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF !important;
    position: relative;
    overflow: hidden !important;
}

/* 新增小装饰元素 */
.card3-decor-circle {
    position: absolute;
    width: 27px;
    height: 27px;
    left: 71.8px;
    top: 115px;
    background: #F5ECFF;
    border-radius: 50%;
    z-index: 6;
    opacity: 0;
}

.card3-decor-bar {
    position: absolute;
    width: 27.9px;
    height: 13.5px;
    left: 282.4px;
    top: 122px;
    background: #F5ECFF;
    border-radius: 24px;
    z-index: 6;
    opacity: 0;
}

/* 动画触发 */
.card-3.animated .card3-decor-circle,
.card-3.animated .card3-decor-bar {
    animation: fadeInScale 0.8s ease forwards;
    animation-delay: 0.8s;
}

/* 背景虚线圆装饰 - 1比1还原设计坐标 */
.card3-ellipse-1, .card3-ellipse-2, .card3-ellipse-3, .card3-ellipse-4 {
    position: absolute;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px dashed #E1D4E5;
    border-radius: 50%;
    z-index: 0;
    opacity: 0;
}

/* Ellipse 3 */
.card3-ellipse-1 {
    width: 208px;
    height: 208px;
    left: calc(50% - 208px/2 + 140px);
    top: 26px;
    box-shadow: inset 0px 0px 20px rgba(192, 121, 216, 0.2);
}

/* Ellipse 5 */
.card3-ellipse-2 {
    width: 316px;
    height: 316px;
    left: calc(50% - 316px/2 + 150px);
    top: -28px;
    box-shadow: inset 0px 0px 34px rgba(192, 121, 216, 0.2);
}

/* Ellipse 9 */
.card3-ellipse-3 {
    width: 427px;
    height: 428px;
    left: calc(50% - 427px/2 + 160px);
    top: -84px;
    box-shadow: inset 0px 0px 34px rgba(192, 121, 216, 0.2);
}

/* Ellipse 7 */
.card3-ellipse-4 {
    width: 553px;
    height: 553px;
    left: calc(50% - 553px/2 + 170px);
    top: -147px;
    box-shadow: inset 0px 0px 34px rgba(225, 178, 241, 0.2);
}

/* Group 17 - 主中间卡片 */
.card3-inner {
    position: absolute;
    width: 323px;
    height: 50px;
    left: 30px;
    top: 105px;
    z-index: 10;
    opacity: 0;
    object-fit: contain;
    filter: drop-shadow(0px 8px 20px rgba(171, 100, 247, 0.12));
}

.card3-outer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 380px;
    height: auto;
    opacity: 0;
}

/* 子卡片样式 - 1比1还原设计坐标 */
.card3-sub-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    border: 1px solid rgba(171, 100, 247, 0.08);
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 5;
    opacity: 0;
    box-shadow: 0px 8px 20px rgba(171, 100, 247, 0.08);
}

/* Group 19 - 上方最外层 */
.card3-sub-top2 {
    width: 221px;
    height: 32px;
    left: 81px;
    top: 22px;
}

/* Group 18 - 上方第二层，与Group 17间距7px */
.card3-sub-top1 {
    width: 261px;
    height: 39.6px;
    left: 61px;
    top: 58.4px; /* 105 - 39.6 - 7 = 58.4 */
}

/* Group 16 - 下方第一层，与Group 17间距7px */
.card3-sub-bottom1 {
    width: 261px;
    height: 39.6px;
    left: 61px;
    top: 162px; /* 105 + 50 + 7 = 162 */
}

/* Group 15 - 下方最外层 */
.card3-sub-bottom2 {
    width: 221px;
    height: 32px;
    left: 81px;
    top: 208.6px; /* 162 + 39.6 + 7 = 208.6 */
}

/* 第三张卡片动画 - 1比1还原加载逻辑 */
.card-3.animated .card3-inner {
    animation: card3CenterPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               card3InnerFloat 4s ease-in-out infinite 1s;
    animation-delay: 0.2s, 1s;
}

.card-3.animated .card3-outer {
    animation: card3FadeIn 1s ease forwards,
               card3OuterPulse 6s ease-in-out infinite 1.4s;
    animation-delay: 0.4s, 1.4s;
}

/* 子卡片动画 */
.card-3.animated .card3-sub-top1,
.card-3.animated .card3-sub-bottom1 {
    animation: card3SubIn 0.8s ease forwards,
               card3SubFloat 4s ease-in-out infinite 1.2s;
    animation-delay: 0.5s, 1.3s;
}

.card-3.animated .card3-sub-top2,
.card-3.animated .card3-sub-bottom2 {
    animation: card3SubInDeep 0.8s ease forwards,
               card3SubFloat 4s ease-in-out infinite 1.5s;
    animation-delay: 0.6s, 1.6s;
}

@keyframes card3SubIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 0.6; transform: translateY(0); }
}

@keyframes card3SubInDeep {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 0.3; transform: translateY(0); }
}

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

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

@keyframes card3OuterPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.03); opacity: 0.8; }
}

.card-3.animated .card3-ellipse-1 {
    animation: card3CircleIn 1.2s ease forwards;
    animation-delay: 0.6s;
}
.card-3.animated .card3-ellipse-2 {
    animation: card3CircleIn 1.2s ease forwards;
    animation-delay: 0.7s;
}
.card-3.animated .card3-ellipse-3 {
    animation: card3CircleIn 1.2s ease forwards;
    animation-delay: 0.8s;
}
.card-3.animated .card3-ellipse-4 {
    animation: card3CircleIn 1.2s ease forwards;
    animation-delay: 0.9s;
}

@keyframes card3CenterPop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes card3FadeIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
}

@keyframes card3CircleIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* ==================== 第三张卡片：单张图片版本 ==================== */
.card3-single-image {
    background-image: url('/template/default/pc/skin/images/3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9);
}

/* 加载后的动画效果 */
.card-3.animated .card3-single-image {
    animation: card3SingleImageIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               card3SingleImageFloat 6s ease-in-out infinite 1.2s;
}

/* 图片淡入缩放动画 */
@keyframes card3SingleImageIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 图片持续浮动效果 */
@keyframes card3SingleImageFloat {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.02) translateY(-8px);
    }
}

/* 添加紫色光晕效果 */
.card3-single-image::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(171, 100, 247, 0.1) 0%, rgba(192, 121, 216, 0.1) 100%);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

/* 鼠标悬浮时增强光晕 */
.card-3:hover .card3-single-image::before {
    opacity: 1;
}

/* 中央白色卡片和右上角卡片淡入 */
.card-2.animated .card2-rect-40,
.card-2.animated .card2-rect-48 {
    animation: fadeInScale 0.6s ease forwards;
    animation-delay: 0.7s;
}

/* 柱状图从下往上生长 */
.card-2.animated .card2-rect-36 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

.card-2.animated .card2-rect-37 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.4s;
}

.card-2.animated .card2-rect-38 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.5s;
}

.card-2.animated .card2-rect-39 {
    animation: growUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

/* 柱状图生长动画 */
@keyframes growUp {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 淡入缩放动画 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==================== 第一张卡片元素定位 ==================== */

/* Ellipse 6 - 最外层圆 */
.card1-ellipse-6 {
    position: absolute;
    width: 437px;
    height: 437px;
    left: calc(50% - 437px/2 - 0.5px);
    top: -39px;
    background: #FFFFFF;
    box-shadow: inset 0px 0px 15px #F5ECFF;
    border-radius: 50%;
    z-index: 1;
}

/* Ellipse 7 - 最外层虚线圆 */
.card1-ellipse-7 {
    position: absolute;
    width: 437px;
    height: 437px;
    left: calc(50% - 437px/2 - 0.5px);
    top: -39px;
    background: #FFFFFF;
    border: 1px dashed #E1D4E5;
    box-shadow: inset 0px 0px 34px rgba(225, 178, 241, 0.2);
    border-radius: 50%;
    z-index: 2;
}

/* Ellipse 8 - 第二层圆 */
.card1-ellipse-8 {
    position: absolute;
    width: 337px;
    height: 338px;
    left: calc(50% - 337px/2 - 0.5px);
    top: 11px;
    background: #FFFFFF;
    box-shadow: inset 0px 0px 15px #F5ECFF;
    border-radius: 50%;
    z-index: 3;
}

/* Ellipse 9 - 第二层虚线圆 */
.card1-ellipse-9 {
    position: absolute;
    width: 337px;
    height: 338px;
    left: calc(50% - 337px/2 - 0.5px);
    top: 11px;
    background: #FFFFFF;
    border: 1px dashed #E1D4E5;
    box-shadow: inset 0px 0px 34px rgba(192, 121, 216, 0.2);
    border-radius: 50%;
    z-index: 4;
}

/* Ellipse 4 - 第三层圆 */
.card1-ellipse-4 {
    position: absolute;
    width: 250px;
    height: 250px;
    left: calc(50% - 250px/2);
    top: 55px;
    background: #FFFFFF;
    box-shadow: inset 0px 0px 15px #F5ECFF;
    border-radius: 50%;
    z-index: 5;
}

/* Ellipse 5 - 第三层虚线圆 */
.card1-ellipse-5 {
    position: absolute;
    width: 250px;
    height: 250px;
    left: calc(50% - 250px/2);
    top: 55px;
    background: #FFFFFF;
    border: 1px dashed #E1D4E5;
    box-shadow: inset 0px 0px 34px rgba(192, 121, 216, 0.2);
    border-radius: 50%;
    z-index: 6;
}

/* Ellipse 2 - 第四层圆 */
.card1-ellipse-2 {
    position: absolute;
    width: 164px;
    height: 164px;
    left: calc(50% - 164px/2);
    top: 98px;
    background: #FFFFFF;
    box-shadow: inset 0px 0px 15px #F5ECFF;
    border-radius: 50%;
    z-index: 7;
}

/* Ellipse 3 - 第四层虚线圆 */
.card1-ellipse-3 {
    position: absolute;
    width: 164px;
    height: 164px;
    left: calc(50% - 164px/2);
    top: 98px;
    background: #FFFFFF;
    border: 1px dashed #E1D4E5;
    box-shadow: inset 0px 0px 20px rgba(192, 121, 216, 0.2);
    border-radius: 50%;
    z-index: 8;
}

/* Ellipse 1 - 中心圆 */
.card1-ellipse-1 {
    position: absolute;
    width: 89px;
    height: 90px;
    left: calc(50% - 89px/2 - 0.5px);
    top: calc(50% - 90px/2 + 47px);
    background: #FFFFFF;
    box-shadow: 0px 0px 44px rgba(192, 121, 216, 0.2);
    border-radius: 50%;
    z-index: 9;
}

/* Rectangle 33 - 左侧绿色方块 */
.card1-rect-33 {
    position: absolute;
    width: 34px;
    height: 34px;
    left: 84px;
    top: 98px;
    background: #FFFFFF;
    border: 1px solid rgba(64, 160, 105, 0.5);
    box-shadow: 0px 13px 16px -5px #E7DAF4;
    border-radius: 6px;
    z-index: 10;
}

/* Rectangle 34 - 右侧蓝色方块 */
.card1-rect-34 {
    position: absolute;
    width: 34px;
    height: 34px;
    left: 305px;
    top: 98px;
    background: #FFFFFF;
    border: 1px solid rgba(35, 99, 247, 0.5);
    box-shadow: 0px 13px 16px -5px #E7DAF4;
    border-radius: 6px;
    z-index: 10;
}

/* Rectangle 35 - 上方紫色方块 */
.card1-rect-35 {
    position: absolute;
    width: 34px;
    height: 34px;
    left: 194px;
    top: 38px;
    background: #FFFFFF;
    border: 1px solid rgba(171, 100, 247, 0.5);
    box-shadow: 0px 13px 16px -5px #E7DAF4;
    border-radius: 6px;
    z-index: 10;
}

/* Vector 1 - 左侧连接线 */
.card1-vector-1 {
    position: absolute;
    width: 48.5px;
    height: 34px;
    left: 127px;
    top: 117px;
    border: 1px solid #EEE5F7;
    z-index: 11;
}

/* Vector 4 - 左侧内部线 */
.card1-vector-4 {
    position: absolute;
    width: 31.5px;
    height: 17px;
    left: 127px;
    top: 117px;
    z-index: 12;
}

/* Vector 3 - 中心垂直线 */
.card1-vector-7 {
    position: absolute;
    width: 0px;
    height: 50px;
    left: calc(50% - 0px/2);
    top: 82px;
    border: 1px solid #EEE5F7;
    z-index: 11;
}

/* Vector 6 - 中心内部线 */
.card1-vector-9 {
    position: absolute;
    width: 0px;
    height: 27px;
    left: calc(50% - 0px/2);
    top: 86px;
    z-index: 12;
}

/* Vector 2 - 右侧连接线（CSS画的边框线，已删除） */
.card1-vector-2 {
    display: none;
}

/* Vector 5 - 右侧内部线 */
.card1-vector-5 {
    position: absolute;
    width: 31.5px;
    height: 17px;
    left: 264.5px;
    top: 117px;
    z-index: 12;
}

/* 三个人形图标 - 居中显示在方块中 */
.card1-person-top {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 203px;
    top: 47px;
    z-index: 13;
    /* 紫色 rgba(171, 100, 247) */
    filter: brightness(0) saturate(100%) invert(45%) sepia(95%) saturate(3000%) hue-rotate(250deg) brightness(95%);
}

.card1-person-right {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 315px;
    top: 108px;
    z-index: 13;
    /* 蓝色 rgba(35, 99, 247) */
    filter: brightness(0) saturate(100%) invert(35%) sepia(100%) saturate(3000%) hue-rotate(215deg) brightness(100%);
}

.card1-person-left {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 94px;
    top: 108px;
    z-index: 13;
    /* 绿色 rgba(64, 160, 105) */
    filter: brightness(0) saturate(100%) invert(55%) sepia(35%) saturate(800%) hue-rotate(95deg) brightness(95%);
}

/* 方块内的装饰图标 */
.card1-vector-3 {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 195px;
    top: 49px;
    z-index: 13;
}

.card1-vector-6 {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 316px;
    top: 109px;
    z-index: 13;
}

.card1-vector-8 {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 95px;
    top: 109px;
    z-index: 13;
}

/* Union - 底部渐变装饰 */
.card1-union {
    position: absolute;
    width: 47.76px;
    height: 37.05px;
    left: 188px;
    top: 158.45px;
    z-index: 14;
}

/* ==================== 第一张卡片动画效果 ==================== */

/* 动画关键帧 - 从中心弹出 */
@keyframes popOut {
    0% {
        opacity: 0;
        transform: translate(var(--start-x), var(--start-y)) scale(0);
    }
    60% {
        transform: translate(0, 0) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* 初始状态 - 所有元素隐藏 */
/* 中心圆和LOGO */
.card1-ellipse-1,
.card1-ellipse-2,
.card1-ellipse-3,
.card1-ellipse-4,
.card1-ellipse-5,
.card1-ellipse-6,
.card1-ellipse-7,
.card1-ellipse-8,
.card1-ellipse-9 {
    opacity: 0;
    transform: scale(0);
}

/* 三个方块和人形图标都在中心隐藏 */
.card1-rect-35,
.card1-person-top {
    opacity: 0;
    --start-x: 18px;
    --start-y: 95px;
}

.card1-rect-34,
.card1-person-right {
    opacity: 0;
    --start-x: -103px;
    --start-y: 25px;
}

.card1-rect-33,
.card1-person-left {
    opacity: 0;
    --start-x: 129px;
    --start-y: 25px;
}

/* 连接线和底部装饰 */
.card1-vector-4,
.card1-vector-5,
.card1-vector-9,
.card1-union {
    opacity: 0;
}

/* 动画触发 - 从中间往外逐步展开 */
/* 1. 中心圆先出现（0.1s） */
.card-1.animated .card1-ellipse-1 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.1s;
}

/* 2. 同心圆从内往外依次展开 */
.card-1.animated .card1-ellipse-2 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.2s;
}

.card-1.animated .card1-ellipse-3 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
}

.card-1.animated .card1-ellipse-4 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.4s;
}

.card-1.animated .card1-ellipse-5 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.5s;
}

.card-1.animated .card1-ellipse-6 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.6s;
}

.card-1.animated .card1-ellipse-7 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.7s;
}

.card-1.animated .card1-ellipse-8 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.8s;
}

.card-1.animated .card1-ellipse-9 {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.9s;
}

/* 3. 三个方块和人形图标从中心弹出 */
.card-1.animated .card1-rect-35,
.card-1.animated .card1-person-top {
    animation: popOut 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.1s;
}

.card-1.animated .card1-rect-34,
.card-1.animated .card1-person-right {
    animation: popOut 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.3s;
}

.card-1.animated .card1-rect-33,
.card-1.animated .card1-person-left {
    animation: popOut 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.5s;
}

/* 4. 连接线淡入 */
.card-1.animated .card1-vector-4,
.card-1.animated .card1-vector-5,
.card-1.animated .card1-vector-9 {
    animation: fadeIn 0.4s ease forwards;
    animation-delay: 1.7s;
}

/* 5. 底部装饰最后出现 */
.card-1.animated .card1-union {
    animation: fadeIn 0.4s ease forwards;
    animation-delay: 1.9s;
}

/* 缩放进入动画 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* GEO vs SEO */
.vs-title {
    position: absolute;
    width: 284px;
    height: 67px;
    left: calc(50% - 284px/2);
    top: 2029px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 67px;
    text-align: center;
    z-index: 1;
}

/* 对比表格区域背景图 */
.comparison-section-bg {
    box-sizing: border-box;
    position: absolute;
    width: 1920px;
    height: 1048px;
    left: calc(50% - 1920px/2);
    top: 1961px;
    background: url('/template/default/pc/skin/images/image-19.png') no-repeat center/cover;
    border: 1px solid #000000;
    z-index: 0;
    pointer-events: none;
}

/* 对比表格背景 */
.comparison-bg {
    position: absolute;
    width: 1560px;
    height: 732px;
    left: calc(50% - 1560px/2);
    top: 2142px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0px -2px 10px rgba(192, 121, 216, 0.6);
    backdrop-filter: blur(18px);
    border-radius: 20px;
    z-index: 1;
}

/* 表头 */
.table-header {
    position: absolute;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #666666;
    z-index: 3;
}

.th-1 { left: 300px; top: 2239px; }
.th-2 { left: 707px; top: 2239px; }
.th-3 { left: 1165px; top: 2239px; }

/* 行图标 */
.row-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 280px;
    z-index: 2;
}

.row-icon-1 { top: 2321px; }
.row-icon-2 { top: 2393px; }
.row-icon-3 { top: 2465px; }
.row-icon-4 { top: 2537px; }
.row-icon-5 { top: 2609px; }
.row-icon-6 { top: 2681px; }

/* 表格行标签 */
.row-labels {
    position: absolute;
    width: 80px;
    left: 315px;
    top: 2297px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 72px;
    color: #333333;
    z-index: 2;
}

/* 表格内容列 */
.col-seo {
    position: absolute;
    width: 247px;
    left: 707px;
    top: 2297px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 72px;
    color: #333333;
    z-index: 2;
}

.col-geo {
    position: absolute;
    width: 300px;
    left: 1165px;
    top: 2297px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 72px;
    color: #333333;
    z-index: 2;
}

/* 分割线 */
.table-line {
    position: absolute;
    width: 1288px;
    height: 0px;
    left: calc(50% - 1288px/2 - 16px);
    border: 1px solid #EEEEEE;
    z-index: 1;
    pointer-events: none;
}

.line-1 { top: 2369px; }
.line-2 { top: 2441px; }
.line-3 { top: 2513px; }
.line-4 { top: 2585px; }
.line-5 { top: 2657px; }
.line-6 { top: 2732px; }

/* 维度列高亮框 */
.dimension-highlight {
    box-sizing: border-box;
    position: absolute;
    width: 429px;
    height: 632px;
    left: 186px;
    top: 2206px;
    border: 2px solid #C079D8;
    border-radius: 10px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dimension-highlight.active {
    opacity: 1;
}

/* SEO列高亮框 */
.seo-highlight {
    box-sizing: border-box;
    position: absolute;
    width: 429px;
    height: 632px;
    left: 644px;
    top: 2206px;
    border: 2px solid #C079D8;
    border-radius: 10px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.seo-highlight.active {
    opacity: 1;
}

/* GEO列高亮框 - 默认显示 */
.geo-highlight {
    box-sizing: border-box;
    position: absolute;
    width: 429px;
    height: 632px;
    left: 1102px;
    top: 2206px;
    border: 2px solid #C079D8;
    border-radius: 10px;
    z-index: 3;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.geo-highlight.active {
    opacity: 1;
}

/* 平台展示区域背景图 */
.platform-section-bg {
    position: absolute;
    width: 1920px;
    height: 1048px;
    left: calc(50% - 1920px/2);
    top: 1961px;
    background: url('/template/default/pc/skin/images/image-19.png') no-repeat center/cover;
    z-index: 0;
    pointer-events: none;
}

/* 平台展示标题 */
.platform-title {
    position: absolute;
    width: 840px;
    height: 67px;
    left: calc(50% - 840px/2 - 3px);
    top: 2958px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 67px;
    color: #000000;
    text-align: center;
    z-index: 1;
}

/* 平台图片 */
.platform-image {
    position: absolute;
    width: 1059px;
    height: 511px;
    left: 396px;
    top: 3023px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.platform-image.animated {
    opacity: 1;
    transform: scale(1);
}

/* 平台小图标 */
.platform-small-icon {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.platform-small-icon.animated {
    opacity: 1;
    transform: scale(1);
}

.platform-icon-1 {
    width: 93.75px;
    height: 93.75px;
    left: 576.49px;
    top: 3330.15px;
    transition-delay: 0.8s;
}

.platform-icon-1.animated {
    transform: scale(1) rotate(16.31deg);
}

.platform-icon-5 {
    width: 68px;
    height: 68px;
    left: 518px;
    top: 3199px;
    transition-delay: 1.0s;
}

.platform-icon-5.animated {
    transform: scale(1) rotate(-11.37deg);
}

.platform-icon-4 {
    width: 54.76px;
    height: 54.76px;
    left: 752px;
    top: 3153px;
    transition-delay: 1.2s;
}

.platform-icon-4.animated {
    transform: scale(1) rotate(112.36deg);
}

.platform-icon-2 {
    width: 56.4px;
    height: 56.4px;
    left: 1149.89px;
    top: 3142.74px;
    transition-delay: 1.4s;
}

.platform-icon-2.animated {
    opacity: 0.5 !important;
    transform: scale(1) rotate(-32.01deg);
}

.platform-icon-6 {
    width: 53.94px;
    height: 53.94px;
    left: 1354.66px;
    top: 3239.17px;
    transition-delay: 1.6s;
}

.platform-icon-6.animated {
    transform: scale(1) rotate(-6.6deg);
}

.platform-icon-3 {
    width: 102.79px;
    height: 102.79px;
    left: 1176px;
    top: 3335px;
    transition-delay: 1.8s;
}

.platform-icon-3.animated {
    transform: scale(1) rotate(17.62deg);
}

/* 平台卡片容器 */
.platform-cards {
    position: absolute;
    width: 1560px;
    left: calc(50% - 1560px/2);
    top: 3600px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 平台引擎卡片 */
.platform-engine-card {
    background: linear-gradient(180deg, #F6F6FA 0%, #FAFAFD 100%);
    border-radius: 16px;
    padding: 40px 35px;
    min-height: 240px;
    border: 2px solid transparent;
    transition: all 0.4s ease;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
}

/* 使用animation替代transition，更可靠 */
.platform-engine-card.animated {
    animation: platformCardFadeIn 0.6s ease forwards;
}

/* 为三个卡片设置不同的延迟，缩短延迟时间 */
.platform-engine-card.animated:nth-child(1) {
    animation-delay: 0.2s;
}

.platform-engine-card.animated:nth-child(2) {
    animation-delay: 0.4s;
}

.platform-engine-card.animated:nth-child(3) {
    animation-delay: 0.6s;
}

/* 卡片淡入动画 */
@keyframes platformCardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.platform-engine-card:hover {
    transform: translateY(-8px);
    border-color: rgba(192, 121, 216, 0.5);
    box-shadow: 0 12px 32px rgba(92, 95, 230, 0.15);
    background: linear-gradient(180deg, #FAFAFD 0%, #FFFFFF 100%);
}

.platform-engine-icon {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #FFFFFF;
    border: 1px solid #E5E6F6;
    border-radius: 6px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.platform-engine-card:hover .platform-engine-icon {
    transform: scale(1.1) rotate(5deg);
    border-color: rgba(192, 121, 216, 0.4);
    box-shadow: 0 4px 12px rgba(92, 95, 230, 0.2);
}

.platform-engine-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.platform-engine-title {
    font-family: 'PingFangRegular';
    font-weight: 500;
    font-size: 26px;
    line-height: 32px;
    color: #000000;
    margin-bottom: 15px;
}

.platform-engine-desc {
    font-family: 'PingFangRegular';
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #666666;
}

/* 核心优势标题 */
.core-title {
    position: absolute;
    width: 421px;
    height: 67px;
    left: calc(50% - 421px/2 + 0.5px);
    top: 3953px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 67px;
    color: #000000;
    text-align: center;
}

/* 核心优势背景图 */
.core-section-bg {
    position: absolute;
    width: 1920px;
    height: 970px;
    left: 0;
    top: 3884px;
    background: url('/template/default/pc/skin/images/Rectangle14.png') no-repeat center/cover; /* 在此替换背景图 */
    transform: matrix(-1, 0, 0, 1, 0, 0);
    pointer-events: none;
    z-index: 0;
}

/* 核心优势标题和网格需要层级高于背景 */
.core-title, .core-cards-grid {
    z-index: 1;
}

/* 核心优势卡片网格 */
.core-cards-grid {
    position: absolute;
    width: 1560px;
    left: calc(50% - 1560px/2);
    top: 4084px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* 核心优势卡片基础样式 */
.core-advantage-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 45px 35px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease;
    cursor: pointer;
}

.core-advantage-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(192, 121, 216, 0.4);
    box-shadow: 0px 20px 40px rgba(92, 95, 230, 0.15);
}

.core-advantage-card:hover .core-advantage-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* 第一排卡片：占 3 列 */
.core-row-1 {
    grid-column: span 3;
}

/* 第二排卡片：占 2 列 */
.core-row-2 {
    grid-column: span 2;
}

.core-advantage-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(180deg, #CBCFFA 0%, #828DF2 100%);
    box-shadow: 0px 10px 14px -5px #CDD1FA;
    border-radius: 8px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.4s ease;
}

.core-advantage-icon img {
    width: 26px;
    height: 25.91px;
    object-fit: contain;
}

.core-advantage-title {
    font-family: 'PingFangRegular';
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    color: #000000;
    margin-bottom: 18px;
}

.core-advantage-desc {
    font-family: 'PingFangRegular';
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #666666;
}

/* 旧的核心优势卡片样式保留 */
.core-card {
    position: absolute;
    width: 500px;
    height: 255px;
    background: linear-gradient(180deg, #F6F6FA 0%, #FAFAFD 100%);
    border-radius: 12px;
}

.core-1 { left: 180px; top: 3539px; }
.core-2 { left: 710px; top: 3539px; }
.core-3 { left: 1240px; top: 3539px; }

.core-icon {
    box-sizing: border-box;
    position: absolute;
    width: 60px;
    height: 60px;
    left: 32px;
    top: 30px;
    background: #FFFFFF;
    border: 1px solid #E5E6F6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
}

.core-card-title {
    position: absolute;
    left: 32px;
    top: 135px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 32px;
    color: #000000;
}

.core-card-desc {
    position: absolute;
    left: 32px;
    top: 180px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #4B5462;
}

/* 战略价值标题 */
.value-title {
    position: absolute;
    width: 421px;
    height: 67px;
    left: calc(50% - 421px/2 + 0.5px);
    top: 4943px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 67px;
    color: #000000;
    text-align: center;
}

/* 价值卡片 */
.value-card {
    position: absolute;
    width: 375px;
    height: 600px;
    background: linear-gradient(180deg, #FAFAFD 0%, #F6F6FA 100%);
    border-radius: 16px;
    padding: 0;
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: visible;
}

.value-card-1 { left: 180px; top: 5068px; }
.value-card-2 { 
    left: 573px; 
    top: 5068px;
}
.value-card-3 { 
    left: 970px; 
    top: 5068px;
}
.value-card-4 { 
    left: 1367px; 
    top: 5068px;
}

.value-card:hover {
    transform: translateY(-10px);
    background: linear-gradient(180deg, #F6F5FD 0%, #EAECFC 100%);
    box-shadow: 0px 20px 40px rgba(92, 95, 230, 0.2);
}

.value-card:hover .value-try-btn {
    opacity: 1;
}



.value-card-title {
    position: absolute;
    left: 40px;
    top: 46px;
    width: 206px;
    height: 32px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    color: #000000;
}

.value-card-desc {
    position: absolute;
    left: 40px;
    top: 98px;
    width: 260px;
    height: 102px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #666666;
}

.value-card-image {
    width: 100%;
    height: 350px;
    background: #F6F6FA;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 战略价值卡片插图容器 */
.value-illustration-1 {
    position: absolute;
    width: 305px;
    height: 176px;
    left: 38px;
    top: 300px;
}

/* Rectangle 49 - 决策影响力前置主卡片 */
.value-rect-49 {
    position: absolute;
    width: 300px;
    height: 176px;
    left: 0px;
    top: 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 10px;
    z-index: 1;
}

.value-rect-49 img {
    display: none;
}

/* 整个插图容器持续上下浮动效果 - 所有动画完成后开始 */
.value-card-1.animated .value-illustration-1 {
    animation: floatUpDown 2.5s ease-in-out 3.8s infinite;
    transition: transform 0.5s ease;
}

/* 鼠标悬浮时的微动效果 */
.value-card-1:hover .value-illustration-1 {
    transform: translateY(-5px);
    animation: none !important;
}

/* Rectangle 50 - 渐变顶部条 */
.value-rect-50 {
    position: absolute;
    width: 300px;
    height: 40px;
    left: 0px;
    top: 0px;
    background: linear-gradient(90deg, #5C5FE6 -259.67%, #FFFFFF 105.67%);
    border-radius: 10px 10px 0px 0px;
    z-index: 2;
}

.value-rect-50 img {
    display: none;
}

/* Ellipse 15 - 紫色圆点 */
.value-ellipse-15 {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 11px;
    top: 10px;
    background: #5C5FE6;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-ellipse-15 img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

/* 网站改版方案文字 */
.value-icon-plan {
    position: absolute;
    width: 72px;
    height: 17px;
    left: 43px;
    top: 12px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #333333;
    z-index: 3;
    display: flex;
    align-items: center;
}

.value-icon-plan img {
    display: none;
}

/* Line 13 - 分割线 */
.value-line-13 {
    position: absolute;
    width: 179px;
    height: 0px;
    left: 0px;
    top: 103px;
    border: 1px solid #E3E3FB;
    z-index: 2;
}

.value-line-13 img {
    display: none;
}

/* Rectangle 51 - 方案建议容器 */
.value-rect-51 {
    box-sizing: border-box;
    position: absolute;
    width: 73px;
    height: 24px;
    left: 29px;
    top: 91px;
    background: #FFFFFF;
    border: 1px solid #E3E3FB;
    border-radius: 40px;
    z-index: 2;
}

.value-rect-51 img {
    display: none;
}

/* Ellipse 16 - 小紫点 */
.value-ellipse-16 {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 37px;
    top: 100px;
    background: #5C5FE6;
    border-radius: 50%;
    z-index: 3;
}

.value-ellipse-16 img {
    display: none;
}

/* 方案建议文字 */
.value-icon-suggestion {
    position: absolute;
    width: 36px;
    height: 13px;
    left: 51px;
    top: 96px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 13px;
    color: #333333;
    z-index: 3;
}

.value-icon-suggestion img {
    display: none;
}

/* Rectangle 52 - b选项容器 */
.value-rect-52 {
    box-sizing: border-box;
    position: absolute;
    width: 73px;
    height: 24px;
    left: 176px;
    top: 91px;
    background: #FFFFFF;
    border: 1px solid #E3E3FB;
    border-radius: 40px;
    z-index: 2;
}

.value-rect-52 img {
    display: none;
}

/* b. 文字 */
.value-letter-b {
    position: absolute;
    width: 8px;
    height: 13px;
    left: 187px;
    top: 96px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 13px;
    color: #5C5FE6;
    z-index: 3;
}

.value-letter-b img {
    display: none;
}

/* Rectangle 53 - b选项进度条 */
.value-rect-53 {
    position: absolute;
    width: 35px;
    height: 7px;
    left: 204px;
    top: 99px;
    background: #DCDDFA;
    border-radius: 10px;
    z-index: 3;
}

.value-rect-53 img {
    display: none;
}

/* Vector箭头 (指向b选项) */
.value-vector-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 11px;
    top: 67px;
    z-index: 3;
}

.value-vector-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Rectangle 54 - c选项容器 */
.value-rect-54 {
    box-sizing: border-box;
    position: absolute;
    width: 73px;
    height: 24px;
    left: 156px;
    top: 126px;
    background: #FFFFFF;
    border: 1px solid #E3E3FB;
    border-radius: 40px;
    z-index: 2;
}

.value-rect-54 img {
    display: none;
}

/* c. 文字 */
.value-letter-c {
    position: absolute;
    width: 8px;
    height: 13px;
    left: 167px;
    top: 131px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 13px;
    color: #5C5FE6;
    z-index: 3;
}

.value-letter-c img {
    display: none;
}

/* Rectangle 55 - c选项进度条 */
.value-rect-55 {
    position: absolute;
    width: 35px;
    height: 7px;
    left: 184px;
    top: 134px;
    background: #DCDDFA;
    border-radius: 10px;
    z-index: 3;
}

.value-rect-55 img {
    display: none;
}

/* Rectangle 56 - a选项容器 */
.value-rect-56 {
    box-sizing: border-box;
    position: absolute;
    width: 73px;
    height: 24px;
    left: 156px;
    top: 56px;
    background: #FFFFFF;
    border: 1px solid #E3E3FB;
    border-radius: 40px;
    z-index: 2;
}

.value-rect-56 img {
    display: none;
}

/* a. 文字 */
.value-letter-a {
    position: absolute;
    width: 8px;
    height: 13px;
    left: 167px;
    top: 61px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 13px;
    color: #5C5FE6;
    z-index: 3;
}

.value-letter-a img {
    display: none;
}

/* Rectangle 57 - a选项进度条 */
.value-rect-57 {
    position: absolute;
    width: 35px;
    height: 7px;
    left: 184px;
    top: 64px;
    background: #DCDDFA;
    border-radius: 10px;
    z-index: 3;
}

.value-rect-57 img {
    display: none;
}

/* Vector 14 - 连接线1 */
.value-vector-14 {
    position: absolute;
    width: 50px;
    height: 35.5px;
    left: 107px;
    top: 67px;
    border: 1px solid #E3E3FB;
    z-index: 1;
}

.value-vector-14 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Vector 15 - 连接线2 */
.value-vector-15 {
    position: absolute;
    width: 50px;
    height: 36px;
    left: 107px;
    top: 102.5px;
    border: 1px solid #E3E3FB;
    transform: matrix(1, 0, 0, -1, 0, 0);
    z-index: 1;
}

.value-vector-15 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 加载动画效果 ==================== */

/* 动画关键帧 - 淡入+缩放 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 动画关键帧 - 线条延伸（从左到右） */
@keyframes lineExtend {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* 初始隐藏状态 */
.value-card-1 .value-rect-51,
.value-card-1 .value-ellipse-16,
.value-card-1 .value-icon-suggestion {
    opacity: 0;
    transform: scale(0.8);
}

.value-card-1 .value-vector-14,
.value-card-1 .value-vector-15 {
    clip-path: inset(0 100% 0 0);
}

.value-card-1 .value-rect-56,
.value-card-1 .value-letter-a,
.value-card-1 .value-rect-57 {
    opacity: 0;
    transform: scale(0.8);
}

.value-card-1 .value-rect-52,
.value-card-1 .value-letter-b,
.value-card-1 .value-rect-53 {
    opacity: 0;
    transform: scale(0.8);
}

.value-card-1 .value-rect-54,
.value-card-1 .value-letter-c,
.value-card-1 .value-rect-55 {
    opacity: 0;
    transform: scale(0.8);
}

/* 进入视口时触发动画 */
.value-card-1.animated .value-rect-51,
.value-card-1.animated .value-ellipse-16,
.value-card-1.animated .value-icon-suggestion {
    animation: fadeInScale 0.5s ease forwards;
    animation-delay: 0.6s;
}

.value-card-1.animated .value-vector-14 {
    animation: lineExtend 0.6s ease forwards;
    animation-delay: 1.1s;
}

.value-card-1.animated .value-rect-56,
.value-card-1.animated .value-letter-a,
.value-card-1.animated .value-rect-57 {
    animation: fadeInScale 0.5s ease forwards;
    animation-delay: 1.7s;
}

.value-card-1.animated .value-vector-15 {
    animation: lineExtend 0.6s ease forwards;
    animation-delay: 2.2s;
}

.value-card-1.animated .value-rect-52,
.value-card-1.animated .value-letter-b,
.value-card-1.animated .value-rect-53 {
    animation: fadeInScale 0.5s ease forwards;
    animation-delay: 2.8s;
}

.value-card-1.animated .value-rect-54,
.value-card-1.animated .value-letter-c,
.value-card-1.animated .value-rect-55 {
    animation: fadeInScale 0.5s ease forwards;
    animation-delay: 3.3s;
}

/* Frame 2 - 头像/对话框 */
.value-frame-2 {
    position: absolute;
    width: 111px;
    height: 66px;
    left: 210px;
    top: 263px;
    z-index: 4;
}

.value-frame-2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Frame 2 初始隐藏状态 */
.value-card-1 .value-frame-2 {
    opacity: 0;
    transform: translateY(20px);
}

/* Frame 2 加载动画 */
.value-card-1.animated .value-frame-2 {
    animation: fadeInUp 0.5s ease forwards;
    animation-delay: 0.3s;
}

/* 从下方淡入动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== 第二张卡片：建立专家定位 ==================== */

/* Rectangle 73 - 背景图（用于所有四个卡片） */
.value-rect-73 {
    position: absolute;
    width: 375px;
    height: 600px;
    left: 0;
    top: 0;
    background: url('./img/Rectangle 73.png') no-repeat center/cover;
    border-radius: 16px;
    transform: rotate(180deg);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.value-card:hover .value-rect-73 {
    opacity: 1;
}

/* 第二张卡片插图容器 */
.value-illustration-2 {
    position: absolute;
    width: 291px;
    height: 204px;
    left: 40px;
    top: 251px;
}

/* Rectangle 60 - 第一个对话框 */
.value-rect-60 {
    position: absolute;
    width: 228px;
    height: 47px;
    left: 0px;
    top: 0px;
    background: linear-gradient(270deg, #F5F5FF -27.19%, #FFFFFF 92.11%), #FFFFFF;
    box-shadow: 0px 5px 10px rgba(213, 214, 249, 0.4);
    border-radius: 60px;
    z-index: 1;
}

/* Ellipse 21/24 - 头像1 */
.value-ellipse-21 {
    position: absolute;
    width: 33px;
    height: 33px;
    left: 7px;
    top: 7px;
    background: #C0D0FA;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
}

.value-ellipse-21 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 网站设计的四大准则文字 */
.value-text-design {
    position: absolute;
    width: 140px;
    height: 20px;
    left: 54px;
    top: 13px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(51, 51, 51, 0.8);
    z-index: 2;
    white-space: nowrap;
}

/* Rectangle 61 - 第二个对话框 */
.value-rect-61 {
    position: absolute;
    width: 203px;
    height: 47px;
    left: 105px;
    top: 61px;
    background: linear-gradient(270deg, #F5F5FF -27.19%, #FFFFFF 92.11%), #FFFFFF;
    box-shadow: 0px 5px 10px rgba(213, 214, 249, 0.4);
    border-radius: 60px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    z-index: 1;
}

/* Rectangle 62 - 进度条 */
.value-rect-62 {
    position: absolute;
    width: 112px;
    height: 10px;
    left: 133px;
    top: 79px;
    background: #DCDDFA;
    border-radius: 10px;
    z-index: 2;
}

/* Ellipse 22/26 - 头像2 */
.value-ellipse-22 {
    position: absolute;
    width: 33px;
    height: 33px;
    left: 268px;
    top: 68px;
    background: #C0D0FA;
    border-radius: 50%;
    overflow: hidden;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    z-index: 2;
}

.value-ellipse-22 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

/* Group 21 - 底部大图 */
.value-group-21 {
    position: absolute;
    width: 291px;
    height: 78px;
    left: 0px;
    top: 126px;
    z-index: 1;
}

.value-group-21 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 第二张卡片动画效果 ==================== */

/* 动画关键帧 - 从中间往上弹 */
@keyframes slideUpFromCenter {
    from {
        opacity: 0;
        transform: translateY(61px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 动画关键帧 - 从中间往下弹 */
@keyframes slideDownFromCenter {
    from {
        opacity: 0;
        transform: translateY(-65px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 动画关键帧 - 中间淡入缩放 */
@keyframes fadeInScaleCenter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 动画关键帧 - 中间淡入缩放（保持翻转） */
@keyframes fadeInScaleCenterFlipped {
    from {
        opacity: 0;
        transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.8);
    }
    to {
        opacity: 1;
        transform: matrix(-1, 0, 0, 1, 0, 0) scale(1);
    }
}

/* 第一组（上方对话框）- 初始隐藏 */
.value-card-2 .value-rect-60,
.value-card-2 .value-ellipse-21,
.value-card-2 .value-text-design {
    opacity: 0;
    transform: translateY(61px);
}

/* 第二组（中间对话框）- 初始隐藏 */
.value-card-2 .value-rect-61 {
    opacity: 0;
    transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.8);
}

.value-card-2 .value-rect-62 {
    opacity: 0;
    transform: scale(0.8);
}

.value-card-2 .value-ellipse-22 {
    opacity: 0;
    transform: matrix(-1, 0, 0, 1, 0, 0) scale(0.8);
}

/* 第三组（底部大图）- 初始隐藏 */
.value-card-2 .value-group-21 {
    opacity: 0;
    transform: translateY(-65px);
}

/* 进入视口时触发动画 - 中间先出现 */
.value-card-2.animated .value-rect-61,
.value-card-2.animated .value-ellipse-22 {
    animation: fadeInScaleCenterFlipped 0.5s ease forwards;
    animation-delay: 0.3s;
}

.value-card-2.animated .value-rect-62 {
    animation: fadeInScaleCenter 0.5s ease forwards;
    animation-delay: 0.3s;
}

/* 上方对话框往上弹 */
.value-card-2.animated .value-rect-60,
.value-card-2.animated .value-ellipse-21,
.value-card-2.animated .value-text-design {
    animation: slideUpFromCenter 0.6s ease forwards;
    animation-delay: 0.8s;
}

/* 底部大图往下弹 */
.value-card-2.animated .value-group-21 {
    animation: slideDownFromCenter 0.6s ease forwards;
    animation-delay: 0.8s;
}

/* 第二张卡片插图添加过渡效果 */
.value-illustration-2 {
    transition: transform 0.5s ease;
}

/* 鼠标悬浮时的微动效果 */
.value-card-2:hover .value-illustration-2 {
    transform: translateY(-5px);
}

/* ==================== 第三张卡片：抢占市场心智 ==================== */

/* 第三张卡片插图容器 Group 7 */
.value-illustration-3 {
    position: absolute;
    width: 375px;
    height: 481px;
    left: 0px;
    top: 0px;
}

/* Ellipse 29 - 外圈 */
.value-ellipse-29 {
    box-sizing: border-box;
    position: absolute;
    width: 256px;
    height: 256px;
    left: 60px;
    top: 224px;
    border: 1px solid #E6E6F9;
    border-radius: 50%;
    z-index: 1;
}

/* Ellipse 36 - 中圈 */
.value-ellipse-36 {
    box-sizing: border-box;
    position: absolute;
    width: 181px;
    height: 181px;
    left: 97px;
    top: 262px;
    border: 1px solid #E6E6F9;
    border-radius: 50%;
    z-index: 2;
}

/* Ellipse 28 - 内圈（中心白色圆） */
.value-ellipse-28 {
    position: absolute;
    width: 112px;
    height: 112px;
    left: 132px;
    top: 296px;
    background: #FEFEFF;
    box-shadow: 0px 0px 24px rgba(92, 95, 230, 0.4);
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-ellipse-28 img {
    width: 52px;
    height: 30px;
    object-fit: contain;
}

/* Ellipse 30 - 左上装饰圆（渐变） */
.value-ellipse-30 {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 63px;
    top: 256px;
    background: linear-gradient(90deg, #5C5FE6 0%, #C079D8 100%), #FFFFFF;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-ellipse-30 img {
    width: 14px;
    height: 17px;
    object-fit: contain;
}

/* Ellipse 32 - 右上装饰圆 */
.value-ellipse-32 {
    position: absolute;
    width: 23px;
    height: 23px;
    left: 251px;
    top: 237px;
    background: #D5D6F9;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 50%;
    z-index: 4;
    overflow: hidden;
}

.value-ellipse-32 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ellipse 33 - 小紫点1 */
.value-ellipse-33 {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 185px;
    top: 221px;
    background: #C079D8;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 50%;
    z-index: 4;
}

/* Ellipse 34 - 小紫点2 */
.value-ellipse-34 {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 81px;
    top: 424px;
    background: #C079D8;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 50%;
    z-index: 4;
}

/* Ellipse 35 - 小紫点3 */
.value-ellipse-35 {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 312px;
    top: 337px;
    background: #C079D8;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 50%;
    z-index: 4;
}

/* Ellipse 31 - 右下蓝色圆 */
.value-ellipse-31 {
    position: absolute;
    width: 57px;
    height: 57px;
    left: 238px;
    top: 424px;
    background: #939CE9;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-ellipse-31 img {
    width: 23px;
    height: 20.85px;
    object-fit: contain;
}

/* ==================== 第三张卡片动画效果 ==================== */

/* 动画关键帧 - 圆圈扩展 */
@keyframes circleExpand {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 动画关键帧 - 从中心弹出 */
@keyframes popFromCenter {
    from {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* 中心圆圈组 - 初始隐藏 */
.value-card-3 .value-ellipse-28 {
    opacity: 0;
    transform: scale(0);
}

.value-card-3 .value-ellipse-36 {
    opacity: 0;
    transform: scale(0);
}

.value-card-3 .value-ellipse-29 {
    opacity: 0;
    transform: scale(0);
}

/* 周围装饰元素 - 初始隐藏在中心 */
.value-card-3 .value-ellipse-30 {
    opacity: 0;
    --tx: 125px;
    --ty: 96px;
    transform: translate(125px, 96px) scale(0);
}

.value-card-3 .value-ellipse-32 {
    opacity: 0;
    --tx: -63px;
    --ty: 115px;
    transform: translate(-63px, 115px) scale(0);
}

.value-card-3 .value-ellipse-33 {
    opacity: 0;
    --tx: 3px;
    --ty: 131px;
    transform: translate(3px, 131px) scale(0);
}

.value-card-3 .value-ellipse-34 {
    opacity: 0;
    --tx: 107px;
    --ty: -72px;
    transform: translate(107px, -72px) scale(0);
}

.value-card-3 .value-ellipse-35 {
    opacity: 0;
    --tx: -124px;
    --ty: 15px;
    transform: translate(-124px, 15px) scale(0);
}

.value-card-3 .value-ellipse-31 {
    opacity: 0;
    --tx: -50px;
    --ty: -72px;
    transform: translate(-50px, -72px) scale(0);
}

/* 进入视口时触发动画 */
/* 中心圆 - 最先出现 */
.value-card-3.animated .value-ellipse-28 {
    animation: circleExpand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
}

/* 中圈 */
.value-card-3.animated .value-ellipse-36 {
    animation: circleExpand 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.5s;
}

/* 外圈 */
.value-card-3.animated .value-ellipse-29 {
    animation: circleExpand 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.7s;
}

/* 周围装饰元素从中心弹出 */
.value-card-3.animated .value-ellipse-30 {
    animation: popFromCenter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.2s;
}

.value-card-3.animated .value-ellipse-32 {
    animation: popFromCenter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.3s;
}

.value-card-3.animated .value-ellipse-33 {
    animation: popFromCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.4s;
}

.value-card-3.animated .value-ellipse-34 {
    animation: popFromCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.5s;
}

.value-card-3.animated .value-ellipse-35 {
    animation: popFromCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.6s;
}

.value-card-3.animated .value-ellipse-31 {
    animation: popFromCenter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 1.7s;
}

/* 三个小紫点围绕中心旋转 */
@keyframes orbitRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 小紫点1 - 上方 (left: 185px, top: 221px) */
/* 中心在 (188px, 352px)，相对距离 (3px, 131px) */
.value-card-3.animated .value-ellipse-33 {
    animation: popFromCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards,
               orbitRotate 25s linear 2.5s infinite;
    transform-origin: 3px 131px;
}

/* 小紫点2 - 左下 (left: 81px, top: 424px) */
/* 中心在 (188px, 352px)，相对距离 (107px, -72px) */
.value-card-3.animated .value-ellipse-34 {
    animation: popFromCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards,
               orbitRotate 25s linear 2.5s infinite;
    transform-origin: 107px -72px;
}

/* 小紫点3 - 右侧 (left: 312px, top: 337px) */
/* 中心在 (188px, 352px)，相对距离 (-124px, 15px) */
.value-card-3.animated .value-ellipse-35 {
    animation: popFromCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s forwards,
               orbitRotate 25s linear 2.5s infinite;
    transform-origin: -124px 15px;
}

/* 第三张卡片插图添加过渡效果 */
.value-illustration-3 {
    transition: transform 0.5s ease;
}

/* 鼠标悬浮时的微动效果 */
.value-card-3:hover .value-illustration-3 {
    transform: translateY(-5px);
}

/* ==================== 第四张卡片：降低获客成本 ==================== */

/* 第四张卡片插图容器 Group 8 */
.value-card-image-illustration-4 {
    position: absolute;
    width: 305px;
    height: 176px;
    left: 33px;
    top: 300px;
    z-index: 2;
}

/* Rectangle 63 - 主白色卡片 */
.value-rect-63 {
    position: absolute;
    width: 300px;
    height: 176px;
    left: 0px;
    top: 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 24px #EFF0FC;
    border-radius: 10px;
    z-index: 1;
}

/* Rectangle 64 - 渐变顶部条 */
.value-rect-64 {
    position: absolute;
    width: 300px;
    height: 40px;
    left: 0px;
    top: 0px;
    background: linear-gradient(90deg, #5C5FE6 -259.67%, #FFFFFF 105.67%);
    border-radius: 10px 10px 0px 0px;
    z-index: 2;
}

/* 内容收录文字 */
.value-text-content {
    position: absolute;
    width: 48px;
    height: 17px;
    left: 39px;
    top: 12px;
    font-family: 'PingFangRegular', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #333333;
    z-index: 3;
}

/* Vector 图标 */
.value-vector-icon {
    position: absolute;
    width: 6px;
    height: 8px;
    left: 19px;
    top: 14px;
    z-index: 3;
}

/* 大数字 8,585,620 */
.value-number-big {
    position: absolute;
    width: 124px;
    height: 34px;
    left: 19px;
    top: 58px;
    font-family: 'MiSans', 'PingFangRegular', sans-serif;
    font-style: normal;
    font-weight: 380;
    font-size: 26px;
    line-height: 34px;
    color: #333333;
    z-index: 3;
}

/* Frame 3 - 柱状图背景框 */
.value-frame-3 {
    position: absolute;
    width: 111px;
    height: 66px;
    left: 170px;
    top: -37px;
    z-index: 4;
}

/* Vector 20 - 渐变填充 */
.value-vector-20 {
    position: absolute;
    width: 106.5px;
    height: 71.5px;
    left: 167.5px;
    top: 75.5px;
    z-index: 1;
}

/* Vector 19 - 折线 */
.value-vector-19 {
    position: absolute;
    width: 108px;
    height: 71px;
    left: 166px;
    top: 75px;
    z-index: 2;
}

/* Ellipse 27 - 数据点 */
.value-ellipse-27 {
    box-sizing: border-box;
    position: absolute;
    width: 11px;
    height: 11px;
    left: 232px;
    top: 90px;
    background: #FFFFFF;
    border: 2px solid #5C5FE6;
    box-shadow: 0px 5px 10px rgba(213, 214, 249, 0.4);
    border-radius: 50%;
    z-index: 3;
}

/* Line 14 - 虚线 */
.value-line-14 {
    position: absolute;
    width: 93px;
    height: 0px;
    left: 237px;
    top: 60px;
    border-top: 1px dashed #E3E3FB;
    transform: rotate(90deg);
    transform-origin: left top;
    z-index: 1;
}

/* 推广成本文字 */
.value-text-cost {
    position: absolute;
    width: 48px;
    height: 17px;
    left: 20px;
    top: 115px;
    font-family: 'PingFangRegular', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #999999;
    z-index: 3;
}

/* 90% */
.value-percent-90 {
    position: absolute;
    width: 38px;
    height: 24px;
    left: 31px;
    top: 134px;
    font-family: 'MiSans', 'PingFangRegular', sans-serif;
    font-style: normal;
    font-weight: 380;
    font-size: 18px;
    line-height: 24px;
    color: #4BA396;
    z-index: 3;
}

/* Polygon 1 - 绿色箭头 */
.value-polygon-1 {
    position: absolute;
    width: 9px;
    height: 6px;
    left: 19px;
    top: 143px;
    transform: matrix(1, 0, 0, -1, 0, 0);
    z-index: 3;
}

/* 条文字 */
.value-text-tiao {
    position: absolute;
    width: 12px;
    height: 16px;
    left: 157px;
    top: 72px;
    font-family: 'PingFangRegular', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #333333;
    z-index: 3;
}

/* Vector 18 - 图标框 */
.value-vector-18 {
    position: absolute;
    width: 6px;
    height: 11px;
    left: 148px;
    top: 74px;
    z-index: 3;
}

/* ==================== 第四张卡片动画效果 ==================== */

/* 动画关键帧 - 线条从左到右绘制 */
@keyframes drawLine {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* 动画关键帧 - 从下往上填充 */
@keyframes fillUp {
    from {
        clip-path: inset(100% 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* 动画关键帧 - 柱状图持续上下浮动 */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* 动画关键帧 - 鼠标悬浮微动效果（平滑上移） */
@keyframes hoverFloat {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-5px);
    }
}

/* 动画关键帧 - 数据点沿线移动 */
@keyframes moveDot {
    0% {
        opacity: 0;
        transform: translate(-66px, 50px) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-66px, 50px) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* 动画关键帧 - 数字跳动 */
@keyframes numberPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 卡片主体 - 初始隐藏 */
.value-card-4 .value-rect-63,
.value-card-4 .value-rect-64 {
    opacity: 0;
    transform: translateY(20px);
}

.value-card-4 .value-text-content,
.value-card-4 .value-vector-icon {
    opacity: 0;
}

.value-card-4 .value-number-big {
    opacity: 0;
    transform: scale(0.5);
}

.value-card-4 .value-frame-3 {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
}

.value-card-4 .value-vector-20 {
    clip-path: inset(100% 0 0 0);
}

.value-card-4 .value-vector-19 {
    clip-path: inset(0 100% 0 0);
}

.value-card-4 .value-ellipse-27 {
    opacity: 0;
    transform: translate(-66px, 50px) scale(0.5);
}

.value-card-4 .value-line-14,
.value-card-4 .value-text-cost,
.value-card-4 .value-percent-90,
.value-card-4 .value-polygon-1,
.value-card-4 .value-text-tiao,
.value-card-4 .value-vector-18 {
    opacity: 0;
}

/* 进入视口时触发动画 */
/* 卡片主体淡入 */
.value-card-4.animated .value-rect-63,
.value-card-4.animated .value-rect-64 {
    animation: fadeInUp 0.5s ease forwards;
    animation-delay: 0.3s;
}

/* 标题文字出现 */
.value-card-4.animated .value-text-content,
.value-card-4.animated .value-vector-icon {
    animation: fadeInScale 0.4s ease forwards;
    animation-delay: 0.6s;
}

/* 大数字跳动出现 */
.value-card-4.animated .value-number-big {
    animation: numberPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.9s;
}

/* 柱状图背景从下往上 */
.value-card-4.animated .value-frame-3 {
    animation: fillUp 0.6s ease forwards;
    animation-delay: 1.2s;
    opacity: 1;
}

/* 折线从左到右绘制 */
.value-card-4.animated .value-vector-19 {
    animation: drawLine 1s ease forwards;
    animation-delay: 1.8s;
}

/* 渐变填充从下往上 */
.value-card-4.animated .value-vector-20 {
    animation: fillUp 0.8s ease forwards;
    animation-delay: 1.8s;
}

/* 数据点沿线移动 */
.value-card-4.animated .value-ellipse-27 {
    animation: moveDot 1s ease-in-out forwards;
    animation-delay: 1.8s;
}

/* 虚线出现 */
.value-card-4.animated .value-line-14 {
    animation: fadeInScale 0.4s ease forwards;
    animation-delay: 2.5s;
}

/* 推广成本信息依次出现 */
.value-card-4.animated .value-text-cost {
    animation: fadeInScale 0.4s ease forwards;
    animation-delay: 2.8s;
}

.value-card-4.animated .value-percent-90 {
    animation: numberPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 3.1s;
}

.value-card-4.animated .value-polygon-1 {
    animation: fadeInScale 0.4s ease forwards;
    animation-delay: 3.4s;
}

.value-card-4.animated .value-text-tiao,
.value-card-4.animated .value-vector-18 {
    animation: fadeInScale 0.4s ease forwards;
    animation-delay: 2.5s;
}

/* 整个插图容器持续上下浮动效果 - 所有动画完成后开始 */
.value-card-4.animated .value-card-image-illustration-4 {
    animation: floatUpDown 2.3s ease-in-out 3.8s infinite;
    transition: transform 0.5s ease;
}

/* 鼠标悬浮时的微动效果 */
.value-card-4:hover .value-card-image-illustration-4 {
    transform: translateY(-5px);
    animation: none !important;
}

/* 立即体验文字 */
.value-try-btn {
    position: absolute;
    width: 100px;
    height: 25px;
    left: 40px;
    bottom: 44px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    text-align: left;
    opacity: 0;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    z-index: 5;
}

.value-try-btn span {
    background: linear-gradient(90deg, #5C5FE6 0%, #C079D8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.value-try-btn:hover {
    opacity: 1 !important;
    transform: scale(1.05);
}

.value-try-btn:hover .value-arrow-icon {
    transform: translateX(3px);
}

/* 立即体验箭头图标 */
.value-arrow-icon {
    width: 12px;
    height: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.value-arrow-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 窗口期标题 */
.window-title {
    position: absolute;
    width: 720px;
    height: 67px;
    left: calc(50% - 720px/2);
    top: 5770px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 67px;
    color: #000000;
    text-align: center;
}

/* 窗口期左侧卡片列表 */
.window-cards-list {
    position: absolute;
    width: 724px;
    left: 180px;
    top: 5906px;
}

/* 窗口期卡片项 */
.window-card-item {
    box-sizing: border-box;
    position: relative;
    width: 724px;
    height: 200px;
    padding: 40px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #E5E6F6;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.window-card-item:hover,
.window-card-item.active {
    background: #FFFFFF;
    border-color: rgba(192, 121, 216, 0.5);
    box-shadow: 0 8px 24px rgba(92, 95, 230, 0.15);
    transform: translateX(5px);
}

.window-card-badge {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 44px;
    height: 28px;
    background: linear-gradient(135deg, #5C5FE6 0%, #C079D8 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PingFangRegular';
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.window-card-item:hover .window-card-badge,
.window-card-item.active .window-card-badge {
    opacity: 1;
}

.window-card-title {
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 40px;
    color: #000000;
    margin-bottom: 15px;
}

.window-card-desc {
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #666666;
}

/* 窗口期右侧大图 */
.window-image-display {
    position: absolute;
    width: 740px;
    height: 860px;
    left: 1000px;
    top: 5906px;
    background: #E0E9FD;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.window-image-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.window-image-item.active {
    opacity: 1;
    z-index: 1;
}

/* 底部CTA */
.footer-cta {
    position: absolute;
    width: 1920px;
    height: 510px;
    left: calc(50% - 1920px/2);
    top: 6802px;
    background: url('/template/default/pc/skin/images/Rectangle31.png') no-repeat center/cover;
}

.footer-title {
    position: absolute;
    width: 397px;
    height: 67px;
    left: calc(50% - 397px/2 + 0.5px);
    top: 6989px;
    font-family: 'PingFangRegular';
    font-style: normal;
    font-weight: 500;
    font-size: 48px;
    line-height: 67px;
    color: #000000;
    text-align: center;
    z-index: 1;
}

.footer-btn {
    position: absolute;
    width: 174px;
    height: 51px;
    left: calc(50% - 174px/2);
    top: 7075px;
    background: linear-gradient(90deg, #5C5FE6 0%, #C079D8 88.94%), #D9D9D9;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PingFangRegular';
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
}

.footer-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 24px rgba(92, 95, 230, 0.4);
}

/* 图片占位符 */
.img-placeholder {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

/* ==================== 加载动画样式 ==================== */

/* 页面加载进度条 */
.loading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #5C5FE6 0%, #C079D8 100%);
    z-index: 9999;
    transition: width 0.3s ease;
}

/* 页面加载遮罩 */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #5C5FE6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-text {
    font-family: 'PingFangRegular';
    font-size: 14px;
    color: #666;
}

/* 滚动动画基础类 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* 从左侧滑入 */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-slide-left.animated {
    opacity: 1;
    transform: translateX(0);
}

/* 从右侧滑入 */
.animate-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-slide-right.animated {
    opacity: 1;
    transform: translateX(0);
}

/* 缩放淡入 */
.animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-scale.animated {
    opacity: 1;
    transform: scale(1);
}

/* 延迟动画 */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* 标题文字分割动画 */
.split-text {
    display: inline-block;
    overflow: hidden;
}

.split-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: charFadeIn 0.6s ease forwards;
}

@keyframes charFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 页面初始加载时隐藏内容 */
body.loading #app-container {
    opacity: 0;
}

body.loaded #app-container {
    opacity: 1;
    animation: fadeInPage 0.6s ease;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==================== 响应式设计 ==================== */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) {
    .pc-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }

    #app-container {
        width: 100vw;
        height: auto;
        min-height: 100vh;
    }

    .page-section {
        height: auto !important;
    }

    /* 禁用自动缩放 */
    body {
        overflow-x: auto;
    }

    /* 大标题和文字调整 */
    .main-title {
        font-size: 48px;
        width: 90%;
        left: 5%;
    }

    .subtitle {
        font-size: 28px;
        width: 90%;
        left: 5%;
    }

    .section-title-1 {
        font-size: 40px;
        width: 90%;
        left: 5%;
    }

    .section-desc-1 {
        width: 90%;
        left: 5%;
        font-size: 16px;
    }

    /* 卡片布局改为栅栏 */
    .feature-card {
        position: relative;
        width: calc(100% - 40px);
        margin: 20px auto;
        height: auto;
        left: auto !important;
        top: auto !important;
    }

    .card-1, .card-2, .card-3 {
        left: auto !important;
        top: auto !important;
        margin-bottom: 20px;
    }

    .card-image {
        height: 200px;
    }

    /* 手机端对比视图样式 */
    .mobile-vs-container {
        width: calc(100% - 40px);
        margin: 20px auto;
    }

    .mobile-vs-card {
        background: #FFFFFF;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(92, 95, 230, 0.08);
        border: 1px solid rgba(192, 121, 216, 0.1);
    }

    .mobile-vs-label {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #F0F0F0;
    }

    .mobile-vs-row {
        display: flex;
        align-items: flex-start;
        padding: 6px 0;
    }

    .m-vs-type {
        width: 50px;
        font-size: 12px;
        color: #999;
        font-weight: 500;
        padding-top: 2px;
    }

    .m-vs-val {
        flex: 1;
        font-size: 14px;
        color: #444;
        line-height: 1.5;
    }

    .mobile-vs-row.highlight {
        background: linear-gradient(90deg, rgba(92, 95, 230, 0.05) 0%, rgba(192, 121, 216, 0.05) 100%);
        border-radius: 4px;
        margin-top: 4px;
        padding: 8px;
    }

    .mobile-vs-row.highlight .m-vs-type {
        color: #5C5FE6;
        font-weight: 600;
    }

    .mobile-vs-row.highlight .m-vs-val {
        color: #222;
        font-weight: 500;
    }

    /* vs标题 */
    .vs-title {
        width: 90%;
        left: 5%;
        font-size: 40px;
    }

    /* 表格调整 */
    .comparison-bg {
        width: 90%;
        left: 5%;
        height: auto;
    }

    .table-header {
        font-size: 16px;
    }

    .row-labels, .col-seo, .col-geo {
        font-size: 14px;
        line-height: 60px;
    }

    /* 平台标题 */
    .platform-title {
        width: 90%;
        left: 5%;
        font-size: 40px;
    }

    /* 平台卡片网格改为两列或单列 */
    .platform-cards {
        width: 90%;
        left: 5%;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    /* 核心优势 */
    .core-title {
        width: 90%;
        left: 5%;
        font-size: 40px;
    }

    .core-cards-grid {
        width: 90%;
        left: 5%;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .core-row-1, .core-row-2 {
        grid-column: span 1 !important;
    }

    /* 战略价值标题 */
    .value-title {
        width: 90%;
        left: 5%;
        font-size: 40px;
    }

    /* 价值卡片布局 */
    .value-card {
        position: relative;
        width: calc(100% - 40px);
        height: auto;
        left: auto !important;
        top: auto !important;
        margin: 20px auto;
    }

    .value-card-1, .value-card-2, .value-card-3, .value-card-4 {
        left: auto !important;
        top: auto !important;
    }

    .value-card-title {
        position: relative;
        left: 0 !important;
        top: 0 !important;
    }

    .value-card-desc {
        position: relative;
        left: 0 !important;
        top: 0 !important;
    }

    /* 窗口期 */
    .window-title {
        width: 90%;
        left: 5%;
        font-size: 40px;
    }

    .window-cards-list {
        width: 90%;
        left: 5%;
        position: relative;
    }

    .window-image-display {
        position: relative;
        width: 90%;
        left: 5%;
        top: auto !important;
        margin-top: 20px;
        height: 300px;
    }

    /* 底部标题 */
    .footer-title {
        font-size: 40px;
        width: 90%;
        left: 5%;
    }
}

/* 手机设备 (max-width: 767px) */
@media (max-width: 767px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .page-section {
        height: auto !important;
        margin-bottom: 40px; /* 给每一屏增加间距 */
    }

    body {
        font-family: 'PingFangRegular', 'Microsoft YaHei', sans-serif;
        overflow-x: hidden;
    }

    #app-container {
        width: 100vw !important;
        height: auto !important;
        background: #FFFFFF;
        position: relative;
    }

    /* Banner和logo */
    .banner-bg {
        width: 100vw !important;
        height: auto !important;
        position: relative;
        padding: 20px 0;
    }

    .logo {
        position: relative !important;
        width: auto;
        left: 20px !important;
        top: 0 !important;
    }

    /* 主标题 */
    .main-title {
        position: relative !important;
        width: calc(100% - 40px) !important;
        height: auto !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        line-height: 1.3;
        text-align: center;
    }

    /* 副标题 */
    .subtitle {
        position: relative !important;
        width: calc(100% - 40px) !important;
        height: auto !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 20px !important;
        line-height: 1.3;
        text-align: center;
        margin-top: 15px;
    }

    /* CTA按钮 */
    .cta-btn {
        position: relative !important;
        width: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        top: 0 !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* 什么是GEO */
    .section-title-1 {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        text-align: center;
        margin-top: 30px;
    }

    .section-desc-1 {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 14px !important;
        line-height: 1.6;
        text-align: center;
        margin-top: 15px;
    }

    /* 特性卡片 */
    .feature-card {
        position: relative !important;
        width: calc(100% - 40px) !important;
        height: auto !important;
        margin: 20px auto !important;
        padding: 20px !important;
        left: auto !important;
        top: auto !important;
        display: block;
    }

    .card-1, .card-2, .card-3 {
        left: auto !important;
        top: auto !important;
    }

    .card-title {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        font-size: 24px !important;
        margin-bottom: 15px;
    }

    .card-desc {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .card-image {
        position: relative !important;
        width: 100% !important;
        height: 200px !important;
        left: 0 !important;
        top: 0 !important;
        margin-top: 15px;
    }

    /* VS对比 */
    .comparison-section-bg {
        display: none !important;
    }

    .vs-title {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    /* 手机端对比视图样式 */
    .mobile-vs-container {
        width: calc(100% - 40px);
        margin: 0 auto 20px auto;
        position: relative;
        z-index: 5;
    }

    .mobile-vs-card {
        background: #FFFFFF;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(92, 95, 230, 0.08);
        border: 1px solid rgba(192, 121, 216, 0.1);
    }

    .mobile-vs-label {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #F5F5F5;
    }

    .mobile-vs-row {
        display: flex;
        align-items: flex-start;
        padding: 8px 0;
    }

    .m-vs-type {
        width: 50px;
        font-size: 13px;
        color: #888;
        font-weight: 600;
        padding-top: 1px;
    }

    .m-vs-val {
        flex: 1;
        font-size: 14px;
        color: #444;
        line-height: 1.5;
    }

    .mobile-vs-row.highlight {
        background: linear-gradient(90deg, rgba(92, 95, 230, 0.08) 0%, rgba(192, 121, 216, 0.08) 100%);
        border-radius: 6px;
        margin-top: 6px;
        padding: 10px;
    }

    .mobile-vs-row.highlight .m-vs-type {
        color: #5C5FE6;
    }

    .mobile-vs-row.highlight .m-vs-val {
        color: #222;
        font-weight: 500;
    }

    /* 平台展示 */
    .platform-section-bg {
        width: 100vw !important;
        height: auto !important;
        position: relative;
    }

    .platform-title {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        text-align: center;
        margin-top: 30px;
    }

    .platform-image {
        position: relative !important;
        width: calc(100% - 40px) !important;
        height: 200px !important;
        left: 20px !important;
        top: 0 !important;
        margin-top: 20px;
    }

    .platform-small-icon {
        display: none;
    }

    .platform-cards {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    .platform-engine-card {
        padding: 20px !important;
        min-height: auto !important;
    }

    .platform-engine-title {
        font-size: 20px !important;
    }

    .platform-engine-desc {
        font-size: 14px !important;
    }

    /* 核心优势 */
    .core-section-bg {
        width: 100vw !important;
        height: auto !important;
        position: relative;
    }

    .core-title {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        text-align: center;
        margin-top: 30px;
    }

    .core-cards-grid {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    .core-advantage-card {
        padding: 20px !important;
        min-height: auto !important;
    }

    .core-row-1, .core-row-2 {
        grid-column: span 1 !important;
    }

    .core-advantage-title {
        font-size: 20px !important;
    }

    .core-advantage-desc {
        font-size: 14px !important;
    }

    /* 战略价值 */
    .value-title {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        text-align: center;
        margin-top: 30px;
    }

    .value-card {
        position: relative !important;
        width: calc(100% - 40px) !important;
        height: auto !important;
        left: 20px !important;
        top: 0 !important;
        margin: 20px 0 !important;
        padding: 20px;
        min-height: auto;
    }

    .value-card-title {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        font-size: 24px !important;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .value-card-desc {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    /* 战略价值插图优化 */
    .value-illustration-1, .value-illustration-2, .value-illustration-3, .value-card-image-illustration-4 {
        position: relative !important;
        width: 100% !important;
        height: 240px !important;
        left: 0 !important;
        top: 0 !important;
        display: block !important;
        margin: 20px 0 !important;
        background: rgba(248, 249, 255, 0.6);
        border-radius: 12px;
        overflow: hidden !important;
    }

    /* 调整插图内部元素的缩放和位置，使其在手机端可见 */
    .value-illustration-1 > div, .value-illustration-1 > img {
        transform: scale(0.8) translateY(-290px) !important;
        transform-origin: top center !important;
    }

    .value-illustration-2 > div, .value-illustration-2 > img {
        transform: scale(0.8) translateY(-240px) !important;
        transform-origin: top center !important;
    }

    .value-illustration-3 > div, .value-illustration-3 > img {
        transform: scale(0.6) translateY(-210px) !important;
        transform-origin: top center !important;
    }

    .value-card-image-illustration-4 > div, .value-card-image-illustration-4 > img {
        transform: scale(0.7) translateY(-20px) !important;
        transform-origin: top center !important;
    }

    .value-rect-73 {
        width: 100% !important;
        height: 100% !important;
    }

    .value-try-btn {
        position: relative !important;
        width: 100px !important;
        left: 0 !important;
        bottom: auto !important;
        margin-top: 15px;
    }

    /* 窗口期 */
    .window-title {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        text-align: center;
        margin-top: 30px;
    }

    .window-cards-list {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        margin-top: 20px;
    }

    .window-card-item {
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
    }

    .window-card-title {
        font-size: 20px !important;
    }

    .window-card-desc {
        font-size: 14px !important;
    }

    .window-image-display {
        position: relative !important;
        width: calc(100% - 40px) !important;
        left: 20px !important;
        top: 0 !important;
        height: 250px !important;
        margin-top: 20px;
    }

    /* 底部CTA */
    .footer-cta {
        width: 100vw !important;
        height: auto !important;
        position: relative;
        padding: 40px 0;
        left: 0 !important;
        top: 0 !important;
    }

    .footer-title {
        position: relative !important;
        width: calc(100% - 40px) !important;
        height: auto !important;
        left: 20px !important;
        top: 0 !important;
        font-size: 32px !important;
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-btn {
        position: relative !important;
        width: auto !important;
        height: 44px !important;
        left: 50% !important;
        transform: translateX(-50%);
        top: 0 !important;
        font-size: 16px;
    }
}
/* 不在小屏幕上显示查看 效果 类的按钮 */
@media (max-width: 767px) {
    .value-try-btn {
        opacity: 1 !important;
        position: relative;
        width: auto;
        height: 30px;
        left: 0 !important;
        bottom: auto !important;
        margin-top: 15px;
        font-size: 14px;
    }

    .value-card:hover .value-try-btn {
        opacity: 1;
    }
}

/* 性能优化 - 减少动画 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
    #app-container {
        background: #1a1a1a;
        color: #f0f0f0;
    }

    .feature-card, .platform-engine-card, .core-advantage-card, .value-card {
        background: rgba(255, 255, 255, 0.05) !important;
    }
}

/* 高分辨率屏幕 (3x以上) */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    .platform-image, .value-illustration-1, .value-illustration-2, .value-illustration-3 {
        image-rendering: -webkit-optimize-contrast;
    }
}