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

body,
html {
    width: 100%;
    height: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
    /* 首屏暂不允许滚动 */
    background-color: #0d1117;
    transition: background-color 1s ease;
}

/* 白天模式的背景底色 */
body.day-mode {
    background-color: #f0f4f8;
}

/* 返回状态：隐藏欢迎语 */
body.is-returning .hero-content {
    display: none;
}

/* 初始加载时禁用过渡动画，防止闪烁 */
.preload, .preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 核心背景图 */
.hero-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 铺满屏幕，保持比例 */
    z-index: 1;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 白天和黑夜图片的透明度切换 */
.night-image {
    opacity: 1;
    z-index: 2;
    /* 放在上层，通过透明度变化来切换 */
}

.day-image {
    opacity: 1;
    z-index: 1;
    /* 放在下层作为底图 */
}

body.day-mode .night-image {
    opacity: 0;
    /* 切到白天时，黑夜图变透明，露出底部的白天图 */
}

/* -----------------------------
   台灯热区
   ----------------------------- */
.lamp-hotspot {
    position: absolute;
    /* 大致定位到你图片的台灯位置，可能需要根据你实际屏幕微调 */
    top: 68%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 8vw;
    height: 12vh;
    min-width: 60px;
    min-height: 80px;
    z-index: 10;
    cursor: pointer;
    /* 取消下面这行的注释可以看到热区的确切位置，方便你微调 */
    /* border: 2px dashed rgba(255, 255, 255, 0.8); */
}

/* 呼吸灯提示，引导用户点击 */
.hotspot-indicator {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.4);
    animation: pulse 2s infinite ease-in-out;
}

body.day-mode .hotspot-indicator {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8);
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }
}

/* -----------------------------
   文字内容
   ----------------------------- */
.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    color: #ffffff;
    pointer-events: none;
}

.title {
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    transition: color 1.5s ease, text-shadow 1.5s ease;
}

.subtitle {
    font-size: clamp(1rem, 2vw, 1.8rem);
    font-weight: 300;
    letter-spacing: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: color 1.5s ease, text-shadow 1.5s ease;
}

/* 白天模式的文字变暗 */
body.day-mode .title,
body.day-mode .subtitle {
    color: #1a1a2e;
    text-shadow: 0 4px 15px rgba(255, 255, 255, 0.9);
}

/* -----------------------------
   各种设备的热区 (大显示器、笔记本、iPad)
   ----------------------------- */
.device-hotspot {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    /* 取消下面注释可显示调试框，方便你在浏览器里微调热区的位置和大小 */
    /* border: 2px dashed rgba(255, 0, 0, 0.8); */
}

/* 大显示器位置估算 */
.monitor-hotspot {
    top: 72%;
    left: 35%;
    width: 20vw;
    height: 25vh;
    transform: translate(-50%, -50%);
}

/* 笔记本电脑位置估算 */
.laptop-hotspot {
    top: 85%;
    left: 65%;
    width: 15vw;
    height: 18vh;
    transform: translate(-50%, -50%);
}

/* iPad 位置估算 */
.ipad-hotspot {
    top: 90%;
    left: 82%; /* 修改 left 为 82%，与 main.js 里的 85% 放大中心更匹配 */
    width: 10vw;
    height: 12vh;
    transform: translate(-50%, -50%);
    z-index: 15;
}

/* 地球仪位置 */
.globe-hotspot {
    top: 15%;
    left: 71%;
    width: 8vw;
    height: 15vh;
    transform: translate(-50%, -50%);
}

/* 模型位置 */
.knot-hotspot {
    top: 35%;
    left: 36%;
    width: 6vw;
    height: 10vh;
    transform: translate(-50%, -50%);
}

/* 人物背部位置 */
.person-hotspot {
    top: 83%;
    left: 50%;
    width: 6vw;
    height: 10vh;
    transform: translate(-50%, -50%);
}

/* 设备上的呼吸灯提示 (默认隐藏，鼠标滑过时显示) */
.device-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: pulse 2s infinite ease-in-out;
}

/* 鼠标悬停在热区上时，显示呼吸灯 */
.device-hotspot:hover .device-indicator {
    opacity: 1;
}

/* 白天模式下的呼吸灯改为明亮的纯白色 */
body.day-mode .device-indicator {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8);
}

/* -----------------------------
   各种设备的热区 (大显示器、笔记本、iPad)
   ----------------------------- */
.project-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* 配合背景底部的渐变，改用纯白底色 */
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    display: none;
}

.project-page.active {
    display: block;
    pointer-events: auto;
}

/* -----------------------------
   流体渐变背景 (纯CSS)
   ----------------------------- */
.fluid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140vh;
    /* 覆盖首屏并延伸一点到下方 */
    z-index: -1;
    overflow: hidden;
    background-color: #ffffff;
    /* 基础底色 */
}

.color-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    /* 核心魔法：极大半径模糊形成流体融合 */
    opacity: 0.8;
    /* 基础时间缩短为 12s，加快运动频率 */
    animation: floatBlob 12s infinite alternate ease-in-out;
    transform-origin: center;
}

/* 把你提供的绝美神仙色全部应用上 (缩短时间，加快交融) */
.blob1 {
    background-color: #C4ABFE;
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    animation-delay: 0s;
}

/* 将原来的右上角粉色挪到了左下角 */
.blob2 {
    background-color: #FCD6E8;
    top: 60%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    animation-delay: -2s;
    animation-duration: 15s;
}

.blob3 {
    background-color: #82B2FA;
    top: 40%;
    left: 10%;
    width: 55vw;
    height: 55vw;
    animation-delay: -4s;
    animation-duration: 14s;
}

.blob4 {
    background-color: #EDB9FF;
    top: 30%;
    right: 10%;
    width: 45vw;
    height: 45vw;
    animation-delay: -6s;
    animation-duration: 18s;
}

/* 将左下角的蓝色 blob5 挪到了右上角，并且调大了覆盖面积，解决右上角白底太大的问题 */
.blob5 {
    background-color: #98C6F8;
    top: -15%;
    right: -15%;
    width: 75vw;
    height: 75vw;
    animation-delay: -8s;
    animation-duration: 11s;
}

.blob6 {
    background-color: #EEC5FF;
    top: 50%;
    right: 20%;
    width: 50vw;
    height: 50vw;
    animation-delay: -1s;
    animation-duration: 16s;
}

.blob7 {
    background-color: #C6D3F6;
    top: 20%;
    left: 30%;
    width: 40vw;
    height: 40vw;
    animation-delay: -3s;
    animation-duration: 13s;
}

/* 荡漾水波浮动动画：加大位移幅度，让水波荡漾更加明显 */
@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(15vw, -10vh) scale(1.2) rotate(8deg);
    }

    66% {
        transform: translate(-12vw, 15vh) scale(0.8) rotate(-8deg);
    }

    100% {
        transform: translate(10vw, 8vh) scale(1.1) rotate(4deg);
    }
}

/* 底部过渡到纯白遮罩 */
.bg-fade-to-white {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    /* 从流体层底部往上 40vh 距离开始渐变 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    z-index: 1;
    /* 盖在彩色斑块上 */
}

.back-btn {
    position: fixed;
    top: 30px;
    left: 40px;
    font-size: 1.1rem;
    color: #1a1a2e;
    cursor: pointer;
    z-index: 101;
    font-weight: 600;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.back-btn:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.project-content {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

/* 项目标题和描述 */
.project-title {
    color: #1a1a2e;
    margin-top: 12vh;
    font-size: 3rem;
    font-weight: 700;
    opacity: 0;
    /* 初始透明，JS控制入场 */
    transform: translateY(30px);
}

.project-desc {
    color: #666;
    margin-top: 15px;
    font-size: 1.2rem;
    opacity: 0;
    transform: translateY(20px);
    margin-bottom: 50px;
}

/* Dashboard 底板容器 */
.dashboard-wrapper {
    position: relative;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    /* 初始透明 */
    transform: translateY(50px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background-color: #fff;
}

.dashboard-bg {
    width: 100%;
    display: block;
    border-radius: 16px;
}

/* -----------------------------
   生成式数据定位和样式
   ----------------------------- */
.dynamic-number {
    position: absolute;
    /* 使用无衬线体并加粗，接近设计稿的无衬线黑体效果 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 500;
    color: #1a1a2e;
    z-index: 20;
    line-height: 1;
    /* 如果你要对齐位置，可以把下一行注释取消，显示红色定位框 */
    /* border: 1px dashed red; */
}

/* 重新定位数值：根据你发的截图调整，使其对准原图背景里的数字 */
.total-balance {
    top: 15%;
    left: 21%;
    font-size: 2.2rem;
}

.stat-1 {
    top: 37%;
    left: 25.5%;
    font-size: 1.4rem;
}

.stat-2 {
    top: 37%;
    left: 45%;
    font-size: 1.4rem;
}

.stat-3 {
    top: 37%;
    left: 65%;
    font-size: 1.4rem;
}

.stat-4 {
    top: 37%;
    left: 84.5%;
    font-size: 1.4rem;
}

/* 折线图动画层 */
.chart-svg {
    position: absolute;
    --clip-right: 100%;
    /* 定义 CSS 变量控制裁剪，100%代表完全不显示 */
    clip-path: inset(0 var(--clip-right) 0 0);
    z-index: 10;
    /* 取消下面注释来微调折线图的位置和大小 */
    /* border: 1px dashed blue; */
}

/* 根据截图，两根折线其实是叠在一起的大图 */
.chart-1,
.chart-2 {
    top: 67%;
    /* 大图的垂直位置 */
    left: 26.5%;
    /* 大图的水平起始位置 */
    width: 68.5%;
    /* 覆盖整个下方区域的宽度 */
}

/* 图表数据提示框 (Tooltip) */
.chart-tooltip {
    position: absolute;
    top: 66%;
    /* 估算在橘色圆圈旁边，你可以微调 */
    left: 40%;
    width: 14%;
    /* 估算宽度 */
    opacity: 0;
    /* 初始隐藏 */
    z-index: 30;
    transform: translateY(10px);
}

/* -----------------------------
   向下滚动的特性拆解模块
   ----------------------------- */
.feature-breakdown {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    margin: 150px auto 100px;
    padding: 0 50px;
    position: relative;
}

.laptop-container {
    flex: 1.2;
    position: relative;
    perspective: 1000px;
    /* 开启 3D 视角，为了视差翻转效果 */
}

.laptop-base {
    width: 110%;
    /* 笔记本大图 */
    transform: translateX(-5%);
    /* 稍微往左偏一点 */
    display: block;
}

.laptop-popout {
    position: absolute;
    top: -5%;
    left: 5%;
    width: 95%;
    /* 这个图应该是浮出来的 UI 界面 */
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.15));
    z-index: 5;
}

.features-text {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 700px;
    /* 估算与左侧电脑差不多高 */
    padding-left: 60px;
    position: relative;
}

.feature-item {
    position: relative;
    margin-bottom: 28px;
    /* 修复文字在滚动动画中的闪动问题（开启硬件加速并稳定抗锯齿） */
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden; /* 终极防闪动属性 */
}

.feature-item h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
}

.feature-item p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    max-width: 500px;
}

/* 虚线连接 (纯 CSS 绘制) */
.dotted-line {
    position: absolute;
    border-top: 2px dashed #b0b0b0;
    z-index: 0;
    opacity: 0.5;
    /* 起点在文字左侧，指向左边的电脑 */
    transform-origin: right center;
    /* 动画从右往左生长 */
}

/* 可以根据最终呈现微调虚线的长度和高度 */
.line-1 {
    top: 100px;
    right: 100%;
    width: 180px;
    margin-right: 25px;
}

.line-2 {
    top: 25px;
    right: 100%;
    width: 250px;
    margin-right: 25px;
}

.line-3 {
    top: 10px;
    right: 100%;
    width: 200px;
    margin-right: 25px;
}

/* -----------------------------
   滚动模块 2：文字在左，卡片在右
   ----------------------------- */
.feature-breakdown-2 {
    margin-top: 50px;
    margin-bottom: 200px; /* 页面底部留白 */
}

.text-left {
    padding-left: 0;
    padding-right: 60px;
    height: auto;
    gap: 80px; /* 让两段文字拉开一点距离，以便错落连线 */
    position: relative;
    z-index: 20; /* 强制提升整个文字容器的层级，突破层叠上下文限制 */
}

/* 第一段文字往上挪一点 */
.feature-4 {
    margin-top: -50px;
}

/* 第二段文字压缩宽度，防止被右侧图片挡住 */
.feature-5 p {
    max-width: 380px;
}

.cards-container {
    flex: 1.2;
    position: relative;
    height: 700px;
    perspective: 1500px;
}

.card-bg {
    position: absolute;
    width: 95%;
    right: -15%; /* 靠右 */
    top: -20px; /* 偏上 */
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
    z-index: 1;
}

.card-fg {
    position: absolute;
    width: 95%;
    left: 0%; /* 把前方的图片往右挪（从 -20% 改为 0%），防止遮挡文字 */
    top: 150px; /* 偏下 */
    filter: drop-shadow(-20px 30px 50px rgba(0,0,0,0.25));
    z-index: 2;
}

/* 反向虚线：起点在文字右侧，往右连向图片 */
.text-left .dotted-line {
    right: auto;
    /* 取消统一的 left: 100%，改为每根线根据标题文字宽度独立计算起点 */
    transform-origin: left center; /* 动画从左往右生长 */
    margin-right: 0;
    margin-left: 20px; /* 统一控制虚线距离标题右侧的间隙 */
    z-index: 10; /* 将虚线层级调到最高，防止被右侧图片遮挡 */
}

/* 指向抽屉图 (背景图) 的虚线 */
.line-4 {
    top: 20px; /* 对齐标题高度的中心 */
    left: 140px; /* 根据“详情抽屉布局”文字宽度设定的起点 */
    width: 480px; /* 加长，跨过空白区域指向后方的抽屉图 */
}

/* 指向列表图 (前景图) 的虚线 */
.line-5 {
    top: 20px; /* 对齐标题高度的中心 */
    left: 320px; /* 根据“清晰结构化布局，信息一目了然”文字宽度设定的起点 */
    width: 280px; /* 加长，稍微重叠在前方列表图表面一点点 */
}

/* 响应式调整 */
@media (max-width: 1100px) {
    .feature-breakdown {
        flex-direction: column;
    }

    .laptop-container, .cards-container {
        margin-bottom: 60px;
        height: auto;
    }

    .features-text, .text-left {
        padding-left: 0;
        padding-right: 0;
        height: auto;
    }

    .dotted-line {
        display: none;
    }
}