/* 由 ks100\product-intro.html 内联 <style> 整体外置（步骤⑩方案A，2026-08-06）
   规则原样迁移，零改写，视觉零回归。 */

        /* 页面统一背景色（移动端）：浅色/深色各一色，卡片保持原样 */
        :root {
            --pi-page-bg-light: #E3F2FD;
            --pi-page-bg-dark:  #203040;
            /* 整页共享光晕：hero / 功能区块 / 详情区统一套用，使上下看成一个整体。
               原蓝调光晕（var(--hero-glow-*)）改为中性白光晕，适配中性灰底 #121212 / 浅蓝底 #E3F2FD。 */
            --pi-page-glow-light:
                radial-gradient(circle at 20% 10%, rgba(255,255,255,0.55), transparent 55%),
                radial-gradient(circle at 85% 90%, rgba(255,255,255,0.38), transparent 55%);
            --pi-page-glow-dark:
                radial-gradient(circle at 20% 10%, rgba(255,255,255,0.07), transparent 55%),
                radial-gradient(circle at 85% 90%, rgba(255,255,255,0.05), transparent 55%);
            /* 详情区光晕：整页光晕的左右镜像（左↔右交换），使下方区块与其他区块左右对称 */
            --pi-detail-glow-light:
                radial-gradient(circle at 80% 10%, rgba(255,255,255,0.55), transparent 55%),
                radial-gradient(circle at 15% 90%, rgba(255,255,255,0.38), transparent 55%);
            --pi-detail-glow-dark:
                radial-gradient(circle at 80% 10%, rgba(255,255,255,0.07), transparent 55%),
                radial-gradient(circle at 15% 90%, rgba(255,255,255,0.05), transparent 55%);
        }

        html, body { margin: 0; padding: 0; }
        /* 桌面端 header 使用 common.css 中的统一样式 */
        header { height: var(--header-height, 64px); }
        .ks100-nav { padding: 0; margin: 0; }
        .ks100-nav ul { padding: 0; margin: 0; }
        main { padding: 0; margin: 0; }

        /* 桌面端导航菜单统一样式 - 参考 computer-guide.html */
        .ks100-nav a {
            line-height: 56px !important;
        }
        .ks100-nav ul li a {
            line-height: 56px !important;
            font-size: 15px;
            color: #333;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .ks100-nav ul li a:hover {
            color: #1976D2;
        }
        .ks100-nav ul li a.current-page {
            color: #333;
            position: relative;
            border-bottom: none !important;
        }
        .ks100-nav ul li a.current-page:hover {
            color: #1976D2;
            border-bottom: none !important;
        }
        .ks100-nav ul li a.current-page:hover::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #007AFF;
        }
        
        @media (max-width: 768px) {
            body {
                margin: 0 !important;
                padding: 0 !important;
            }

            html {
                margin: 0 !important;
                padding: 0 !important;
            }

            header {
                margin: 0 !important;
                padding: 0 !important;
                height: auto !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                z-index: var(--z-content) !important;
                /* 与 quick-start 同款：页眉菜单下方细线阴影 + 半透明毛玻璃背景 */
                box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
                background: rgba(255,255,255,0.85) !important;
                backdrop-filter: saturate(180%) blur(20px);
                -webkit-backdrop-filter: saturate(180%) blur(20px);
            }

            /* 隐藏右侧固定图片展示区，避免遮挡手机端内容 */
            #default-toggle-btn,
            #image-container {
                display: none !important;
            }
        }
        
        .danmaku-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: var(--z-content-overlay);
        }
        
        .danmaku-item {
            position: absolute;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            right: 0;
            transform: translateX(100%);   /* 起始即位于屏幕右侧外，避免闪现 */
            animation: danmaku-slide linear forwards;
            animation-duration: 8s;        /* 兜底时长，实际由 JS 按容器宽度计算 */
        }
        
        @keyframes danmaku-slide {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(calc(-1 * var(--travel, 100vw)));
            }
        }
        
        /* 按钮悬停效果 */
        .index-show button:not(.get-started-btn) {
            transition: all 0.3s ease;
        }
        
        .index-show button:not(.get-started-btn):hover {
            background-color: black !important;
            color: white !important;
        }
        
        .index-show button:not(.get-started-btn):hover svg path {
            stroke: white !important;
        }
        
        /* 功能按钮容器 */
        .feature-btn-container {
            box-sizing: border-box;
            /* width 与 margin 已移除：桌面端由父级 grid 容器（见 product-intro.html
               五按钮 wrapper）的 grid-template-columns: repeat(5, minmax(0, 1fr)) 与 gap:14px
               自动均分与间距；移除原 width:270px / margin:10px 后，5 张卡片在任何桌面
               viewport 下始终保持同一行、随窗口宽度等比缩窄，不再 4+1 换行。 */
            background-color: #F0F5FA;
            border-radius: 10px;
            padding: 18px 22px;        /* 水平 padding 由 30px 调为 22px，让窄屏下文字行宽更充足 */
            min-width: 0;              /* grid item 默认 min-width = min-content；显式置 0 让 1fr 真生效 */
            box-shadow: none;
            border: 0.1px double #000000;
            transition: all 0.3s ease;
        }
        
        .product-use-container {
            height: 1000px;
        }
        
        .feature-btn-wrapper {
            transition: all 0.3s ease;
            transform-origin: bottom center;
            cursor: pointer;
        }
        
        .feature-btn-wrapper:hover {
            background-color: #0F172A !important;
            transform: scale(1.1);
        }
        
        .feature-btn-wrapper:hover h3 {
            color: white !important;
        }
        
        .feature-btn-wrapper:hover p {
            color: white !important;
        }
        
        .feature-btn-wrapper:hover .feature-btn-container {
            background-color: #0F172A !important;
        }
        
        .feature-btn-wrapper:hover svg path {
            stroke: white !important;
        }
        
        .feature-btn-wrapper:hover button {
            background-color: #3498DB !important;
        }
        
        .feature-btn-wrapper:hover .gray-line {
            background-color: #999 !important;
        }
        
        .feature-btn-wrapper:hover .outer-hexagon {
            background-color: #999 !important;
        }
        
        .feature-btn-wrapper:hover .inner-hexagon {
            background-color: #3498DB !important;
        }

        /* 悬停/长按时的轻微抖动微反馈
           用独立 translate/rotate 属性，不覆盖 :hover 自身的 transform: scale() */
        @keyframes pi-card-shake {
            0%   { translate: 0 0;       rotate: 0deg; }
            15%  { translate: -1.6px 0;  rotate: -0.5deg; }
            30%  { translate: 1.6px 0;   rotate: 0.5deg; }
            45%  { translate: -1px 0;    rotate: -0.3deg; }
            60%  { translate: 1px 0;     rotate: 0.3deg; }
            100% { translate: 0 0;       rotate: 0deg; }
        }

        /* Get Started按钮悬停效果 */
        .btn-primary:hover {
            background-color: #3367D6 !important;
            transform: scale(1.1);
        }

        /* ===== 移动端 product-intro 落地页 ===== */
        @media (max-width: 768px) {
            .pi-hero {
                position: relative;
                width: 100%;
                min-height: 92vh;
                padding: 32px 22px 40px;
                /* 与功能区块/详情区共用同一光晕，整页背景看成一个整体 */
                background: var(--pi-page-glow-light), var(--pi-page-bg-light);
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                overflow: hidden;
            }
            .pi-hero-eyebrow {
                display: inline-flex;
                align-items: center;
                font-size: 11px;
                letter-spacing: 3px;
                color: #1976D2;
                background: rgba(25,118,210,0.08);
                padding: 6px 14px;
                border-radius: 999px;
                margin-bottom: 18px;
            }
            .pi-hero-title {
                font-size: 30px;
                line-height: 1.05;
                font-weight: 800;
                color: #454F5E;
                margin: 0 0 10px;
                letter-spacing: -1px;
            }
            .pi-hero-title .accent {
                color: #1976D2;
            }
            .pi-hero-subtitle {
                font-size: 15px;
                line-height: 1.6;
                color: #455A64;
                margin: 0 0 24px;
                max-width: 320px;
            }
            .pi-hero-media {
                position: relative;
                width: 100%;
                max-width: 340px;
                margin: 4px auto 20px;
            }
            .pi-phone-frame {
                width: 100%;
                height: auto;
                display: block;
                position: relative;
                z-index: var(--z-content-high);
                filter: drop-shadow(0 28px 50px rgba(26,35,126,0.24));
            }
            .pi-phone-screen {
                position: absolute;
                /* 屏幕区域精确对齐 phone.svg 的透明屏孔：left/right 5.0%、top 3.58%、bottom 4.53%，
                       圆角 8.83%（≈ 屏孔 rx78 / 屏宽883），使 App 截图显示尺寸与屏孔完全一致 */
                top: 3.58%;
                left: 5.0%;
                right: 5.0%;
                bottom: 4.53%;
                border-radius: 8.83%;
                overflow: hidden;
                background: #fff;
                z-index: var(--z-content);
                box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.08);
            }
            .pi-phone-screen img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                /* 移动端与桌面端共用同一张 APP 预览图 */
                content: url(../../images/index-show/apkshow.webp);
            }
            .pi-hero-cta {
                display: flex;
                flex-direction: column;
                gap: 10px;
                width: 100%;
                max-width: 320px;
                margin: 8px auto 0;
            }
            .pi-btn-primary {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                background: linear-gradient(135deg, #4285F4 0%, #1976D2 100%);
                color: #fff;
                border: none;
                padding: 14px 22px;
                font-size: 15px;
                font-weight: 600;
                border-radius: 999px;
                cursor: pointer;
                box-shadow: 0 10px 22px rgba(25,118,210,0.28);
                transition: transform 0.25s ease, box-shadow 0.25s ease;
            }
            .pi-btn-primary:active {
                transform: scale(0.97);
                box-shadow: 0 6px 14px rgba(25,118,210,0.22);
            }
            .pi-btn-ghost {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                background: #fff;
                color: #1976D2;
                border: 1.5px solid #CFE3FF;
                padding: 12px 22px;
                font-size: 14px;
                font-weight: 600;
                border-radius: 999px;
                cursor: pointer;
                transition: background 0.2s ease;
            }
            .pi-btn-ghost:active {
                background: #EBF3FF;
            }
            .pi-hero-scroll {
                margin-top: 18px;
                font-size: 11px;
                letter-spacing: 3px;
                color: #8FA3B8;
                position: relative;
            }
            .pi-hero-scroll::after {
                content: "";
                display: block;
                width: 1px;
                height: 26px;
                background: linear-gradient(180deg, #8FA3B8, transparent);
                margin: 10px auto 0;
                animation: pi-bob 2.2s ease-in-out infinite;
            }
            @keyframes pi-bob {
                0%, 100% { transform: translateY(0); opacity: 1; }
                50% { transform: translateY(6px); opacity: 0.4; }
            }

            /* 功能区块 */
            .pi-feature-section {
                padding: 64px 22px 24px;
                background: var(--pi-page-glow-light), var(--pi-page-bg-light);
            }
            .pi-feature-section.alt {
                background: var(--pi-page-glow-light), var(--pi-page-bg-light);
            }
            .pi-feature-head {
                text-align: center;
                margin-bottom: 28px;
            }
            .pi-feature-tag {
                display: inline-block;
                font-size: 11px;
                letter-spacing: 3px;
                color: #1976D2;
                background: rgba(25,118,210,0.08);
                padding: 5px 12px;
                border-radius: 999px;
                margin-bottom: 14px;
            }
            .pi-feature-title {
                font-size: 26px;
                font-weight: 800;
                color: #454F5E;
                margin: 0 0 10px;
                letter-spacing: -0.5px;
            }
            .pi-feature-subtitle {
                font-size: 14px;
                color: #546E7A;
                margin: 0;
                line-height: 1.6;
            }
            .pi-feature-card {
                background: #fff;
                border: 1px solid #E4ECF5;
                border-radius: 18px;
                padding: 20px 18px 22px;
                margin-bottom: 14px;
                box-shadow: 0 4px 14px rgba(26,35,126,0.04);
                transform-origin: center center;
                transition: transform 0.28s cubic-bezier(.2,.7,.3,1.2), box-shadow 0.28s ease;
                will-change: transform;
            }
            .pi-feature-card:hover {
                transform: scale(1.05);
                box-shadow: 0 8px 24px rgba(26,35,126,0.12);
                animation: pi-card-shake 0.45s ease;
            }
            .pi-feature-card:active {
                transform: scale(1.07);
                box-shadow: 0 10px 28px rgba(26,35,126,0.18);
                animation: pi-card-shake 0.45s ease;
            }
            .pi-feature-icon-wrap {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 10px;
            }
            .pi-feature-icon {
                width: 42px;
                height: 42px;
                border-radius: 12px;
                background: linear-gradient(135deg, #E8F1FE 0%, #CFE3FF 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .pi-feature-icon img {
                width: 22px;
                height: 22px;
                object-fit: contain;
            }
            .pi-feature-name {
                font-size: 18px;
                font-weight: 700;
                color: #454F5E;
                margin: 0;
            }
            .pi-feature-desc {
                font-size: 13.5px;
                color: #546E7A;
                line-height: 1.7;
                margin: 4px 0 0;
            }

            /* 详情功能大图区 */
            .pi-detail {
                padding: 48px 0 10px;
                /* 详情区光晕左右镜像，与上方区块形成对称 */
                background: var(--pi-detail-glow-light), var(--pi-page-bg-light);
            }
            .pi-detail-block {
                padding: 0 22px 44px;
            }
            .pi-detail-num {
                font-size: 12px;
                color: #1976D2;
                font-weight: 700;
                letter-spacing: 2px;
                margin-bottom: 8px;
            }
            .pi-detail-title {
                font-size: 24px;
                font-weight: 800;
                color: #454F5E;
                margin: 0 0 12px;
                letter-spacing: -0.5px;
            }
            .pi-detail-text {
                font-size: 14px;
                color: #455A64;
                line-height: 1.75;
                margin: 0 0 20px;
            }
            .pi-detail-media {
                position: relative;
                width: 100%;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 18px 44px rgba(26,35,126,0.14);
                background: #EBF3FF;
                aspect-ratio: 4 / 3;
            }
            .pi-detail-media img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            .pi-detail-media::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, transparent 55%, rgba(11,18,32,0.15));
                pointer-events: none;
            }
            .pi-pill-list {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin: 14px 0 0;
                padding: 0;
                list-style: none;
            }
            .pi-pill-list li {
                font-size: 12px;
                color: #1976D2;
                background: #EBF3FF;
                padding: 6px 12px;
                border-radius: 999px;
                font-weight: 600;
            }

            /* 最终 CTA */
            .pi-final {
                padding: 48px 22px 56px;
                background: linear-gradient(160deg, #454F5E 0%, #1A237E 100%);
                text-align: center;
                color: #fff;
            }
            .pi-final h2 {
                font-size: 26px;
                font-weight: 800;
                margin: 0 0 10px;
                letter-spacing: -0.5px;
                line-height: 1.25;
            }
            .pi-final p {
                font-size: 14px;
                color: rgba(255,255,255,0.78);
                margin: 0 auto 22px;
                line-height: 1.7;
                max-width: 320px;
            }
            .pi-final .pi-btn-primary {
                background: #fff;
                color: #1976D2;
                box-shadow: 0 10px 22px rgba(0,0,0,0.25);
            }
            .pi-final .pi-btn-ghost {
                background: transparent;
                color: #fff;
                border-color: rgba(255,255,255,0.3);
            }
            .pi-final .pi-btn-ghost:active {
                background: rgba(255,255,255,0.08);
            }

            /* 滚动入场动画 */
            .pi-reveal {
                opacity: 0;
                transform: translateY(22px);
                transition: opacity 0.7s ease, transform 0.7s ease;
            }
            .pi-reveal.is-visible {
                opacity: 1;
                transform: translateY(0);
            }
            .pi-reveal.delay-1 { transition-delay: 0.12s; }
            .pi-reveal.delay-2 { transition-delay: 0.24s; }
            .pi-reveal.delay-3 { transition-delay: 0.36s; }
        }

        .download-toast-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: var(--z-popup);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .download-toast-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .download-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: rgba(18, 18, 26, 0.98);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 20px;
            padding: 40px 60px;
            z-index: var(--z-popup-overlay);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 25px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(99, 102, 241, 0.2);
            text-align: center;
            width: calc(100% - 48px);
            max-width: 340px;
            padding: 36px 28px 32px;
            border-radius: 24px;
        }

        .download-toast.show {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        .download-toast-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, #10b981, #34d399);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .download-toast-icon svg {
            width: 32px;
            height: 32px;
            color: white;
        }

        .download-toast h3 {
            font-size: 20px;
            font-weight: 700;
            color: #f1f5f9;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .download-toast p {
            font-size: 14px;
            color: rgba(241, 245, 249, 0.75);
            line-height: 1.6;
        }

        .download-toast-close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .download-toast-close-btn:active {
            background: rgba(255, 255, 255, 0.15);
        }

        .download-toast-close-btn svg {
            width: 18px;
            height: 18px;
            color: #94a3b8;
        }

        .toast-guidance {
            margin-top: 16px;
            padding: 12px 16px;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 12px;
            text-align: left;
        }

        .toast-guidance p {
            font-size: 13px;
            color: rgba(241, 245, 249, 0.85);
            line-height: 1.6;
            margin: 0;
        }

        .toast-guidance .highlight {
            color: #818cf8;
            font-weight: 600;
        }

        .toast-action-hint {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 12px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .toast-action-hint .toast-countdown {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            background: rgba(99, 102, 241, 0.2);
            border-radius: 100px;
            font-size: 12px;
            font-weight: 700;
            color: #818cf8;
            transition: transform 0.3s ease;
        }

        .toast-action-hint .toast-countdown.pulse {
            animation: countdown-pulse 0.5s ease;
        }

        @keyframes countdown-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }

        /* 客户端下载按钮 */
        .client-download-wrap {
            position: relative;
            margin-left: auto;
            line-height: 56px;
            list-style: none;
        }
        .client-download-btn {
            display: inline-block;
            text-decoration: none;
            padding: 6px 14px;
            background: transparent;
            color: #333;
            font-size: 13px;
            font-weight: 500;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s ease;
            font-family: inherit;
        }
        .client-download-btn:hover {
            background: transparent;
            color: #1976D2;
            transform: translateY(-1px);
        }
        .client-download-popup {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 164px;
            padding: 12px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: all 0.25s ease;
            z-index: var(--z-toast);
            pointer-events: none;
            line-height: normal;
        }
        .client-download-popup::before {
            content: "";
            position: absolute;
            top: -6px;
            right: 20px;
            width: 12px;
            height: 12px;
            background: #fff;
            transform: rotate(45deg);
            border-radius: 2px;
        }
        .client-download-wrap:hover .client-download-popup,
        .client-download-popup:hover {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }
        .client-download-popup img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 4px;
        }
        .client-download-popup .popup-title {
            font-size: 14px;
            color: #333;
            text-align: center;
            margin-top: 8px;
            margin-bottom: 4px;
            font-weight: 500;
        }
        .client-download-popup .popup-desc {
            font-size: 12px;
            color: #999;
            text-align: center;
            margin: 0;
        }

        .client-download-wrap {
            display: none;
        }

        @media (min-width: 769px) {
            .client-download-wrap {
                display: flex;
                align-items: center;
            }
        }

    

        /* 统一页眉菜单层级：确保在弹出菜单遮罩之上（不被半透明遮罩压暗） */
        @media (max-width: 768px) {
            header {
                position: relative !important;
                z-index: var(--z-nav-header) !important;
            }
        }

        /* 深色模式 token 已统一迁至 css/ks100/theme-toggle.css（KS100 暗色 SSOT），
           本文件顶部已 @import 引入；下方深色块一律 var(--token) 引用，不再写死。 */
        @media (prefers-color-scheme: dark) and (max-width: 768px) {
            /* 本页专属中性灰深色体系（仅 product-intro.html）：覆盖 theme-toggle.css 真源 token，
               套用 index 同款中性灰配色（#121212 大背景 / #1E1E1E 卡片 / 纯白+灰白文字 / 极淡白边框，品牌保留蓝）。
               变量加 !important 以确保本页作用域内优先于 theme-toggle 真源，不受链接顺序影响。 */
            :root {
                --pi-page-bg-dark: #121212 !important;        /* 页面大背景（hero/功能/详情区共用），原 #203040 蓝调底作废 */
                --surface-page: #121212 !important;           /* 影响 .pi-phone-screen 等引用处 */
                --surface-card: #1E1E1E !important;           /* 卡片底，原 #1E2229 蓝调深灰 → 中性灰 */
                --surface-elevated: #262626 !important;
                --surface-card-active: #2A2A2A !important;
                --text-primary: #FFFFFF !important;           /* 主文纯白 */
                --text-secondary: #E5E7EB !important;         /* 次文灰白 */
                --text-faint: #9CA3AF !important;             /* 辅助灰 */
                --line-default: rgba(255, 255, 255, 0.1) !important;  /* 极淡白分割线 */
                /* 品牌蓝淡底/辉光保留（与 index 一致，品牌色不换绿） */
                --brand-primary-bg: rgba(25, 118, 210, 0.15) !important;
                --brand-alpha-08: rgba(25, 118, 210, 0.12) !important;
                --brand-alpha-12: rgba(25, 118, 210, 0.15) !important;
                --brand-alpha-24: rgba(25, 118, 210, 0.24) !important;
                --brand-alpha-30: rgba(25, 118, 210, 0.30) !important;
                --brand-alpha-42: rgba(25, 118, 210, 0.42) !important;
            }
            /* 顶部栏暗色背景改为中性灰 #121212（与页面背景统一），覆盖 popup-menu.css 真源 var(--surface-page)；
               仅作用于 product-intro.html（本文件），其它 ks100 页顶栏仍保持 #121418 */
            .header-menu-2 { background-color: #121212 !important; }

            /* 深色模式：页眉背景与页面统一为中性灰半透明 + 毛玻璃，避免浅色移动端白底规则透出 */
            header {
                background: rgba(18,18,18,0.85) !important;
                backdrop-filter: saturate(180%) blur(20px);
                -webkit-backdrop-filter: saturate(180%) blur(20px);
            }

            /* Hero */
            .pi-hero {
                /* 与功能区块/详情区共用同一光晕，整页背景看成一个整体 */
                background: var(--pi-page-glow-dark), var(--pi-page-bg-dark);
            }
            .pi-hero-eyebrow { color: var(--brand-primary); background: var(--brand-alpha-08); }
            .pi-hero-title { color: var(--text-primary); }
            .pi-hero-title .accent { color: var(--brand-primary); }
            .pi-hero-subtitle { color: var(--text-secondary); }
            .pi-phone-screen {
                background: var(--surface-page);
                box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06),
                            inset 0 1px 1px rgba(255,255,255,0.08),
                            inset 0 -1px 2px rgba(0,0,0,0.4);
            }
            .pi-btn-primary {
                background: linear-gradient(135deg, var(--brand-primary-soft) 0%, var(--brand-primary) 100%);
                color: #fff;
                box-shadow: 0 10px 22px var(--brand-alpha-30);
            }
            .pi-btn-primary:active { box-shadow: 0 6px 14px var(--brand-alpha-24); }
            .pi-btn-ghost { background: var(--surface-card); color: var(--brand-primary); border-color: var(--surface-elevated); }
            .pi-btn-ghost:active { background: var(--surface-card-active); }
            .pi-hero-scroll { color: var(--text-faint); }
            .pi-hero-scroll::after { background: linear-gradient(180deg, var(--text-faint), transparent); }

            /* 功能区块：深色下与页面背景统一 */
            .pi-feature-section { background: var(--pi-page-glow-dark), var(--pi-page-bg-dark); }
            .pi-feature-section.alt { background: var(--pi-page-glow-dark), var(--pi-page-bg-dark); }
            .pi-feature-tag { color: var(--brand-primary); background: var(--brand-alpha-08); }
            .pi-feature-title { color: var(--text-primary); }
            .pi-feature-subtitle { color: var(--text-secondary); }
            .pi-feature-card { background: var(--surface-card); border-color: var(--line-default); box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 8px var(--card-glow); }
            .pi-feature-card:hover {
                border-color: var(--brand-primary);
                box-shadow: 0 8px 26px var(--brand-alpha-30), 0 0 12px var(--card-glow-hover);
            }
            .pi-feature-card:active {
                border-color: var(--brand-primary-soft);
                box-shadow: 0 10px 30px var(--brand-alpha-42), 0 0 16px var(--card-glow-active);
            }
            .pi-feature-icon { background: linear-gradient(135deg, var(--brand-primary-bg) 0%, var(--surface-elevated) 100%); }
            .pi-feature-icon img { filter: invert(1) brightness(1.15); }
            .pi-feature-name { color: var(--text-primary); }
            .pi-feature-desc { color: var(--text-secondary); }

            /* 详情功能大图区 */
            .pi-detail { background: var(--pi-detail-glow-dark), var(--pi-page-bg-dark); }
            .pi-detail-num { color: var(--brand-primary); }
            .pi-detail-title { color: var(--text-primary); }
            .pi-detail-text { color: var(--text-secondary); }
            .pi-detail-media { background: var(--brand-primary-bg); box-shadow: 0 18px 44px rgba(0,0,0,0.45); }
            .pi-pill-list li { color: var(--brand-primary); background: var(--brand-primary-bg); }

            /* 最终 CTA（本身即深色，仅微调渐变与按钮对比） */
            .pi-final { background: linear-gradient(160deg, var(--final-gradient-from) 0%, #1A237E 100%); }
            .pi-final .pi-btn-primary { background: #fff; color: var(--brand-primary); }
            .pi-final .pi-btn-ghost { color: var(--text-primary); border-color: rgba(255,255,255,0.18); }
        }

        /* ============================================================
           桌面端深色模式：按需求「桌面端深色模式不重新着色，颜色与浅色一致」。
           原「桌面 + 移动 全宽深色模式」块（无 max-width 限制）会让 .index-show hero
           标题/副标题在桌面端深色模式下变白，现已整体移除，使桌面端完全沿用浅色配色。
           （移动端深色映射仍保留在上方 @media (prefers-color-scheme: dark) and (max-width: 768px) 块内。）
           ============================================================ */

        /* ===== 桌面端：淡蓝底层（与 quick-start 同款 light-blue） ===== */
        @media (min-width: 769px) {
            /* 根/canvas 淡蓝渐变：覆盖 reset.css 的 html,body 白底。
               html 背景绘制在根层（最底层），body 置透明，
               作为桌面端唯一淡蓝底层真源。
               仅桌面端生效，移动端保持白底。 */
            html { background: var(--bg-page-gradient); }
            body { background: transparent; }
        }

        /* ============================================================
           桌面端：水平滚动步骤叙事区
           参考 Trae 页面效果：滚动条向下滚动，卡片从右向左水平运动，
           并带有淡入淡出（隐入/隐出）效果。
           ============================================================ */
        .pi-steps-section {
            display: none;
        }

        @media (min-width: 769px) {
            /*
             * reset.css 在 body 上设置 overflow-x: hidden，这会强制 body 成为滚动容器，
             * 导致本页 .pi-steps-sticky 的 position: sticky 失效。此处仅对本页桌面端
             * 覆盖为 overflow-x: clip：同样能裁剪水平溢出，但不会建立滚动容器，
             * sticky 可正常工作。
             */
            body { overflow-x: clip; }

            .pi-steps-section {
                display: block;
                position: relative;
                /* 5 张卡片 × 约 1 屏滚动量，留出首尾缓冲 */
                height: 500vh;
                /* 背景统一由 html 渲染（var(--bg-page-gradient)），本容器透明，
                   避免同一渐变在 500vh 与 100vh 盒子上分别绘制造成色差 */
                background: transparent;
                /* 与上方五卡入口区 .index-show 共用同一上限(1600px)+居中+50px 内边距，
                   使轮播容器左右边缘与上方卡片区严格对齐（修复大视口下越宽越错开） */
                padding: 0 50px;
                margin: 0 auto;
                max-width: 1600px;
            }

            /* 桌面端隐藏 hero 与功能卡区之间的 120px 空白间距 */
            #index-spacing {
                display: none !important;
            }

            .pi-steps-sticky {
                position: sticky;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                /* 留白由 section 的 padding: 0 50px 统一负责，避免 sticky 再缩窗口导致与上方错位 */
                padding: 0;
                box-sizing: border-box;
                overflow: hidden;
                /* 背景透明，继承 html 的全局渐变，消除 sticky(100vh) 与 section(500vh) 渐变缩放色差 */
                background: transparent;
            }

            .pi-steps-window {
                flex: 1 1 auto;
                height: 72vh;
                min-height: 520px;
                max-height: 760px;
                overflow: hidden;
                position: relative;
                z-index: 1;
                border-radius: var(--radius-xl);
                perspective: 1600px;
            }

            .pi-steps-track {
                display: flex;
                height: 100%;
                will-change: transform;
            }

            .pi-step-card {
                flex: 0 0 auto;
                /* 卡片填满固定的 window（= section 内容宽），水平滚动时整屏切换，
                   左右边缘与上方五卡区严格对齐（取代原 85vw 不固定宽度） */
                width: 100%;
                min-width: 0;
                max-width: none;
                height: 100%;
                padding: 0 10px;
                box-sizing: border-box;
                opacity: 0.18;
                /* scroll-driven 动画由 JS 每帧直接驱动，避免 CSS transition 造成滞后感 */
            }

            .pi-step-card-inner {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: var(--radius-xl);
                overflow: hidden;
                /* 背景透明：水墨背景图 object-fit:cover 全覆盖，避免 #FAFBFD 底色从图片边缘/透明处露出形成白边 */
                background: transparent;
                box-shadow: 0 24px 70px rgba(11, 18, 32, 0.14);
                display: flex;
                flex-direction: column;
                transform-origin: center center;
                transform-style: preserve-3d;
                will-change: transform, filter, opacity;
                /* 切换的灵动感由 JS 每帧驱动，这里仅给极短的兜底过渡避免闪烁 */
                transition: transform 0.08s linear;
            }

            /* 卡片：整张背景图 + 内置前景演示图 + 底部渐隐文案（文案在图片内部） */
            .pi-step-media {
                position: relative;
                width: 100%;
                height: 100%;
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
            }

            .pi-step-bg {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: var(--z-base);
            }

            /* 前景演示图：浮于背景之上，置于右上区域，不遮挡底部文案 */
            .pi-step-figure {
                position: absolute;
                top: 9%;
                right: calc(7% + 160px);   /* 在已左移 140px 基础上再统一左移 20px，所有前景图一致左移 */
                width: 23%;
                max-width: 252px;
                height: auto;
                max-height: 35%;
                object-fit: contain;
                z-index: var(--z-content-high);
                filter: drop-shadow(0 18px 46px rgba(0, 0, 0, 0.28));
            }

            /* 底部渐隐遮罩：仅压暗图片下半部，让 artwork 上半部清晰可见 */
            .pi-step-scrim {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 52%;
                z-index: var(--z-content);
                background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 100%);
                pointer-events: none;
            }

            /* 卡片底部文案：位于图片内部 */
            .pi-step-caption {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: var(--z-content-overlay);
                padding: 30px 34px 32px;
                box-sizing: border-box;
            }

            .pi-step-name {
                font-size: 40px;
                font-weight: 700;
                color: #FFFFFF;
                margin: 0 0 12px;
                text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
            }

            .pi-step-desc {
                margin: 0;
                max-width: 78%;
                font-size: 25px;
                line-height: 1.7;
                color: rgba(255, 255, 255, 0.92);
                text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
            }
        }

        @media (min-width: 769px) and (max-width: 1100px) {
            .pi-steps-sticky {
                /* 留白统一由 section padding: 0 50px 负责，与上方五卡区对齐 */
                padding: 0;
            }

            .pi-step-card {
                width: 100%;
                min-width: 0;
            }

            .pi-step-figure {
                width: 25%;
                max-width: 192px;
                max-height: 31%;
            }

            .pi-step-caption {
                padding: 22px 24px 24px;
            }

            .pi-step-name {
                font-size: 34px;
                margin: 0 0 9px;
            }

            .pi-step-desc {
                max-width: 100%;
                font-size: 23.5px;
            }
        }