:root {
            --bg: #0b1020;
            --bg-2: #111733;
            --text: #eef2ff;
            --text-dim: rgba(238, 242, 255, 0.68);
            --text-faint: rgba(238, 242, 255, 0.45);
            --glass: rgba(255, 255, 255, 0.06);
            --glass-strong: rgba(255, 255, 255, 0.10);
            --stroke: rgba(255, 255, 255, 0.14);
            --stroke-strong: rgba(255, 255, 255, 0.24);
            --accent: #60a5fa;
            --accent-2: #22d3ee;
            --accent-3: #a78bfa;
            --on-accent: #04121f;
            --nav-bg: rgba(11, 16, 32, 0.55);
            --nav-mobile-bg: rgba(11, 16, 32, 0.92);
            --footer-bg: rgba(0, 0, 0, 0.25);
            --glow-top: #16204a;
            --blob-opacity: 0.55;
            --radius: 20px;
            --radius-lg: 28px;
        }
        [data-theme="light"] {
            --bg: #eef2f9;
            --bg-2: #e4eaf6;
            --text: #0f172a;
            --text-dim: rgba(15, 23, 42, 0.72);
            --text-faint: rgba(15, 23, 42, 0.5);
            --glass: rgba(255, 255, 255, 0.55);
            --glass-strong: rgba(255, 255, 255, 0.78);
            --stroke: rgba(15, 23, 42, 0.12);
            --stroke-strong: rgba(15, 23, 42, 0.22);
            --accent: #2563eb;
            --accent-2: #0891b2;
            --accent-3: #7c3aed;
            --on-accent: #ffffff;
            --nav-bg: rgba(238, 242, 249, 0.7);
            --nav-mobile-bg: rgba(238, 242, 249, 0.96);
            --footer-bg: rgba(255, 255, 255, 0.4);
            --glow-top: #dbe6ff;
            --blob-opacity: 0.35;
        }

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

        html {
            scroll-behavior: smooth;
            /* 和 body 一起兜底：避免任何元素溢出视口时，移动端还能左右拖动整页 */
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
        }

        body {
            font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.7;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            -webkit-font-smoothing: antialiased;
            position: relative;
            /* 纵向弹性布局：内容不足一屏时页脚也贴底 */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 末段撑开剩余空间，把页脚顶到页面底部 */
        section:last-of-type {
            flex: 1 0 auto;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        /* ===== 液态玻璃背景光斑 ===== */
        .bg-glow {
            position: fixed;
            inset: 0;
            z-index: -2;
            background: radial-gradient(ellipse 80% 60% at 50% -10%, var(--glow-top) 0%, var(--bg) 60%);
            overflow: hidden;
        }
        .blob {
            position: absolute;
            top: 50%;
            left: 50%;
            width: var(--size);
            height: var(--size);
            margin-top: calc(var(--size) / -2);
            margin-left: calc(var(--size) / -2);
            border-radius: 50%;
            /* 模糊半径也跟着视口缩：光斑小、模糊也小，光才不会糊满整个小屏 */
            filter: blur(clamp(44px, 6.2vw, 90px));
            opacity: var(--blob-opacity);
            will-change: transform;
            animation: roam-a 44s ease-in-out infinite;
        }
        /* 四颗光斑各走一条环游全屏的轨迹，相位错开；尺寸用 clamp 随视口缩放——
           手机上保持屏幕宽度的三到五成，背景才留得住暗色，宽屏则维持原来的大小 */
        .blob-1 { --size: clamp(190px, 30vw, 420px); background: #2563eb; animation-duration: 44s; }
        .blob-2 { --size: clamp(160px, 26vw, 360px); background: #06b6d4; animation-name: roam-b; animation-duration: 52s; animation-delay: -10s; }
        .blob-3 { --size: clamp(200px, 33vw, 460px); background: #7c3aed; animation-name: roam-c; animation-duration: 48s; animation-delay: -20s; }
        .blob-4 { --size: clamp(120px, 19vw, 260px); background: #db2777; opacity: 0.35; animation-name: roam-d; animation-duration: 58s; animation-delay: -30s; }

        /* 环游轨迹：以屏幕中心为原点，用 vw/vh 位移跑遍整屏，首尾一致无跳变 */
        @keyframes roam-a {
            0%, 100% { transform: translate(-32vw, -34vh) scale(1); }
            25%      { transform: translate(30vw, -24vh) scale(1.12); }
            50%      { transform: translate(26vw, 30vh) scale(0.92); }
            75%      { transform: translate(-28vw, 26vh) scale(1.06); }
        }
        @keyframes roam-b {
            0%, 100% { transform: translate(-38vw, 22vh) scale(1); }
            25%      { transform: translate(-26vw, -30vh) scale(1.1); }
            50%      { transform: translate(24vw, -34vh) scale(0.94); }
            75%      { transform: translate(36vw, 18vh) scale(1.08); }
        }
        @keyframes roam-c {
            0%, 100% { transform: translate(20vw, -36vh) scale(1); }
            25%      { transform: translate(34vw, 10vh) scale(1.14); }
            55%      { transform: translate(-10vw, 34vh) scale(0.9); }
            80%      { transform: translate(-36vw, -6vh) scale(1.06); }
        }
        @keyframes roam-d {
            0%, 100% { transform: translate(-30vw, 34vh) scale(1); }
            30%      { transform: translate(22vw, 30vh) scale(1.12); }
            60%      { transform: translate(30vw, -26vh) scale(0.94); }
            85%      { transform: translate(-24vw, -32vh) scale(1.08); }
        }

        /* ===== 通用容器 ===== */
        .container {
            width: min(1180px, 92%);
            margin: 0 auto;
        }

        /* ===== 导航栏（悬浮胶囊） ===== */
        .navbar {
            position: fixed;
            top: 16px;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        .nav-inner {
            display: flex;
            align-items: center;
            height: 66px;
            padding: 0 8px 0 18px;
            position: relative;
            border-radius: 999px;
            background: var(--nav-bg);
            backdrop-filter: blur(22px) saturate(180%);
            -webkit-backdrop-filter: blur(22px) saturate(180%);
            border: 1px solid var(--stroke);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 34px rgba(0, 0, 0, 0.32);
            transition: box-shadow 0.3s ease, background 0.3s ease;
        }
        .navbar.scrolled .nav-inner {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 46px rgba(0, 0, 0, 0.42);
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            font-size: 1.12rem;
            letter-spacing: 0.02em;
            flex: none;
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(96, 165, 250, 0.35), rgba(34, 211, 238, 0.35));
            border: 1px solid var(--stroke-strong);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(37, 99, 235, 0.35);
            color: #fff;
            font-size: 1.15rem;
        }
        .brand small {
            display: block;
            font-weight: 400;
            font-size: 0.62rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--text-faint);
        }
        .brand-logo {
            height: 42px;
            width: auto;
            display: block;
            object-fit: contain;
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
            margin-left: auto;
            margin-right: 14px;
            flex: none;
        }
        .nav-links a {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 999px;
            color: var(--text-dim);
            font-size: 0.95rem;
            white-space: nowrap;
            transition: all 0.2s ease;
        }
        .nav-links a:hover {
            color: var(--text);
            background: var(--glass-strong);
        }
        .nav-cta {
            margin-left: 8px;
            padding: 9px 20px !important;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: var(--on-accent) !important;
            font-weight: 600;
            box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
        }
        .nav-links a.nav-cta:hover {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: var(--on-accent) !important;
            filter: brightness(1.12);
            transform: translateY(-2px);
        }
        .nav-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border-radius: 999px;
            background: var(--glass-strong);
            border: 1px solid var(--stroke);
            color: var(--text);
            font-size: 1.2rem;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }
        .nav-search-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border-radius: 999px;
            background: var(--glass-strong);
            border: 1px solid var(--stroke);
            color: var(--text);
            font-size: 1.05rem;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: none;
        }
        .theme-toggle {
            width: 42px;
            height: 42px;
            border-radius: 999px;
            background: var(--glass-strong);
            border: 1px solid var(--stroke);
            color: var(--text);
            font-size: 1.05rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s ease;
        }
        .theme-toggle:hover {
            border-color: var(--stroke-strong);
            transform: rotate(25deg);
        }
        /* 三个圆形图标按钮统一走液态玻璃：半透明底 + 背景模糊 + 顶部内高光。
           只给纯色底的话，浅色主题的 --glass-strong（78% 白）会糊成一块死白，没有玻璃感 */
        .nav-search-toggle,
        .theme-toggle,
        .nav-toggle {
            background: var(--glass);
            border: 1px solid var(--stroke);
            backdrop-filter: blur(14px) saturate(180%);
            -webkit-backdrop-filter: blur(14px) saturate(180%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.22);
            transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        }
        .nav-search-toggle:hover,
        .nav-toggle:hover {
            border-color: var(--stroke-strong);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px rgba(0, 0, 0, 0.3);
        }
        [data-theme="light"] .nav-search-toggle,
        [data-theme="light"] .theme-toggle,
        [data-theme="light"] .nav-toggle {
            background: rgba(255, 255, 255, 0.42);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.1);
        }
        [data-theme="light"] .nav-search-toggle:hover,
        [data-theme="light"] .theme-toggle:hover,
        [data-theme="light"] .nav-toggle:hover {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 22px rgba(15, 23, 42, 0.16);
        }
        .nav-search {
            flex: 1 1 auto;
            max-width: 420px;
            min-width: 200px;
            margin: 0 20px;
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .search-engine {
            flex: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 14px;
            border-radius: 999px;
            background: var(--glass-strong);
            border: 1px solid var(--stroke);
            color: var(--text);
            font-size: 0.9rem;
            cursor: pointer;
            white-space: nowrap;
            transition: border-color 0.2s ease;
        }
        .search-engine:hover { border-color: var(--stroke-strong); }
        .search-engine i { font-size: 0.72rem; color: var(--text-faint); }
        .search-form {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            background: var(--glass-strong);
            border: 1px solid var(--stroke);
            border-radius: 999px;
            overflow: hidden;
            transition: border-color 0.2s ease;
        }
        .search-form:focus-within { border-color: var(--stroke-strong); }
        .search-form input {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            padding: 9px 16px;
            color: var(--text);
            font-size: 0.92rem;
        }
        .search-form input::placeholder { color: var(--text-faint); }
        .search-form button {
            flex: none;
            width: 40px;
            height: 40px;
            border: none;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: var(--on-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.95rem;
        }
        .engine-list {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 180px;
            margin: 0;
            padding: 8px;
            list-style: none;
            background: var(--nav-mobile-bg);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border: 1px solid var(--stroke);
            border-radius: 16px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
            z-index: 200;
            display: none;
            flex-direction: column;
            gap: 2px;
        }
        .engine-list.open { display: flex; }
        .engine-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border: none;
            background: transparent;
            color: var(--text-dim);
            font-size: 0.9rem;
            border-radius: 10px;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .engine-item:hover { background: var(--glass-strong); color: var(--text); }
        .engine-item i { width: 18px; text-align: center; color: var(--accent-2); }
        .engine-item svg.engine-icon, .engine-item img.engine-icon { width: 18px; height: 18px; flex: none; }
        .engine-item img.engine-icon { object-fit: contain; }
        .suggest-list {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            margin: 0;
            padding: 8px;
            list-style: none;
            background: var(--nav-mobile-bg);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border: 1px solid var(--stroke);
            border-radius: 16px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
            z-index: 200;
            display: none;
        }
        .suggest-list.open { display: block; }
        .suggest-list li {
            padding: 9px 12px;
            border-radius: 10px;
            color: var(--text-dim);
            font-size: 0.9rem;
            cursor: pointer;
            /* 搜索建议里可能有很长的英文串，允许强行换行，避免把下拉框顶出屏幕 */
            overflow-wrap: anywhere;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .suggest-list li:hover { background: var(--glass-strong); color: var(--text); }

        /* ===== Hero ===== */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 140px 0 80px;
            position: relative;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            align-items: center;
            gap: 56px;
        }
        /* 网格子项默认 min-width: auto，内部有放不下的长内容时会把整列顶宽、连累整页横向溢出，
           这里允许两栏收缩到格子宽度以内，让内部元素自己换行 */
        .hero-grid > * {
            min-width: 0;
        }
        .hero-copy {
            max-width: 640px;
        }
        /* 文案页底部的向下箭头，仅小屏显示（页面原有的 .hero-scroll 不受影响） */
        .hero-hint {
            display: none;
        }
        /* 轮播图 */
        .hero-carousel {
            padding: 16px;
            /* 作为向下箭头的跳转目标，滚动后给悬浮导航留出空间 */
            scroll-margin-top: 100px;
            border-radius: var(--radius-lg);
            background: var(--glass);
            border: 1px solid var(--stroke);
            backdrop-filter: blur(18px) saturate(160%);
            -webkit-backdrop-filter: blur(18px) saturate(160%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 26px 60px rgba(0, 0, 0, 0.35);
            /* 手势滑动时卡片会跟着手指平移，超出卡片的部分裁掉，不会溢到卡片外面 */
            overflow: hidden;
            /* 整张卡片都可以滑：横向手势交给脚本，纵向仍归浏览器滚动页面 */
            touch-action: pan-y;
            cursor: grab;
        }
        .hero-carousel.is-swiping {
            cursor: grabbing;
        }
        /* 拖动跟手期间不能有过渡，否则会粘手 */
        .hero-carousel.is-swiping .carousel-stage {
            transition: none;
        }
        .carousel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 2px 4px 14px;
        }
        .carousel-head-title {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .carousel-head-title i {
            color: var(--accent-2);
        }
        .btn-buy {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: none;
            padding: 9px 18px;
            border-radius: 999px;
            color: var(--on-accent);
            font-size: 0.9rem;
            font-weight: 600;
            white-space: nowrap;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .btn-buy:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45);
        }
        .carousel-stage {
            position: relative;
            aspect-ratio: 2 / 1;
            border-radius: var(--radius);
            overflow: visible;
            /* 松手后卡片平滑归位 */
            transition: transform 0.25s ease;
        }
        .carousel-slide {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 14px;
            opacity: 0;
            transition: opacity 0.7s ease;
        }
        .carousel-slide.is-active {
            opacity: 1;
        }
        .carousel-slide img {
            display: block;
            flex: 0 0 auto;
            height: 100%;
            width: auto;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: calc(var(--radius) - 6px);
            /* 手势滑动时不要让图片被拖成半透明的拖拽残影，也不要在滑动中选中文字 */
            -webkit-user-drag: none;
            user-select: none;
        }
        .slide-info {
            flex: 1 1 auto;
            min-width: 0;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--stroke-strong) transparent;
        }
        .slide-info h3 {
            font-size: 1.05rem;
            font-weight: 700;
        }
        .slide-info p {
            color: var(--text-dim);
            font-size: 0.86rem;
            line-height: 1.68;
        }
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 14px 0 2px;
        }
        .carousel-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border: none;
            border-radius: 999px;
            background: var(--stroke-strong);
            cursor: pointer;
            transition: width 0.3s ease, background 0.3s ease;
        }
        .carousel-dot.is-active {
            width: 24px;
            background: var(--accent-2);
        }
        @keyframes carouselFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 18px;
            border-radius: 999px;
            background: var(--glass);
            border: 1px solid var(--stroke);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
            font-size: 0.85rem;
            color: var(--text-dim);
            letter-spacing: 0.06em;
            margin-bottom: 28px;
        }
        .hero-tag .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-2);
            box-shadow: 0 0 12px var(--accent-2);
        }
        .hero h1 {
            font-size: clamp(2.6rem, 6vw, 4.6rem);
            font-weight: 800;
            line-height: 1.12;
            letter-spacing: -0.02em;
            margin-bottom: 20px;
        }
        .hero h1 .grad {
            background: linear-gradient(120deg, var(--accent), var(--accent-2) 35%, var(--accent-3) 65%, var(--accent));
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradFlow 4s linear infinite;
        }
        @keyframes gradFlow {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }
        .hero-sub {
            font-size: clamp(1.05rem, 2.4vw, 1.35rem);
            color: var(--text-dim);
            max-width: 640px;
            margin-bottom: 40px;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 30px;
            border-radius: 999px;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.25s ease;
            cursor: pointer;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: var(--on-accent);
            box-shadow: 0 12px 32px rgba(37, 99, 235, 0.45);
        }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 44px rgba(37, 99, 235, 0.55);
        }
        .btn-ghost {
            background: var(--glass);
            border: 1px solid var(--stroke-strong);
            color: var(--text);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }
        .btn-ghost:hover {
            background: var(--glass-strong);
            transform: translateY(-3px);
        }
        /* 首屏向下箭头：大屏 .hero-scroll 与小屏 .hero-hint 共用同一套样式（淡色箭头 + 上下浮动） */
        .hero-scroll,
        .hero-hint {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: var(--text-faint);
            font-size: 1.4rem;
            animation: bounce 2s infinite;
        }
        .hero-scroll {
            display: block;
            bottom: 30px;
        }
        @keyframes bounce {
            0%, 100% { transform: translate(-50%, 0); }
            50% { transform: translate(-50%, 10px); }
        }

        /* ===== 区块通用 ===== */
        section {
            padding: 96px 0;
            scroll-margin-top: 100px;
        }
        .section-head {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 56px;
        }
        .section-head .kicker {
            display: inline-block;
            font-size: 0.8rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent-2);
            margin-bottom: 14px;
            font-weight: 600;
        }
        .section-head h2 {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            font-weight: 800;
            letter-spacing: -0.01em;
            margin-bottom: 16px;
        }
        .section-head p {
            color: var(--text-dim);
            font-size: 1.05rem;
        }

        /* ===== 玻璃卡片 ===== */
        .glass {
            background: var(--glass);
            border: 1px solid var(--stroke);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border-radius: var(--radius);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 40px rgba(0, 0, 0, 0.3);
        }

        /* ===== 关于我们 ===== */
        .about-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 48px;
            align-items: center;
        }
        .about-text h2 {
            font-size: clamp(1.8rem, 4vw, 2.4rem);
            font-weight: 800;
            margin-bottom: 20px;
        }
        .about-text p {
            color: var(--text-dim);
            margin-bottom: 16px;
        }
        .values {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .value-item {
            padding: 22px;
        }
        .value-item .ic {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(34, 211, 238, 0.3));
            border: 1px solid var(--stroke);
            color: #fff;
            font-size: 1.2rem;
            margin-bottom: 14px;
        }
        .value-item h3 {
            font-size: 1.05rem;
            margin-bottom: 6px;
        }
        .value-item p {
            color: var(--text-faint);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        /* ===== 核心业务 ===== */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .service-card {
            padding: 30px 26px;
            transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        }
        .service-card:hover {
            transform: translateY(-6px);
            border-color: var(--stroke-strong);
            background: var(--glass-strong);
        }
        .service-card .ic {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
            background: linear-gradient(135deg, rgba(96, 165, 250, 0.32), rgba(34, 211, 238, 0.32));
            border: 1px solid var(--stroke-strong);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
            color: #fff;
        }
        .service-card h3 {
            font-size: 1.15rem;
            margin-bottom: 8px;
        }
        .service-card p {
            color: var(--text-faint);
            font-size: 0.92rem;
            line-height: 1.7;
        }

        /* ===== 功能专区 ===== */
        .products-grid {
            display: grid;
            /* 列轨道用 minmax(0, 1fr)：默认的 1fr 等价 minmax(auto, 1fr)，轨道最小宽度会被
               卡片内容的 min-content 顶大；卡片里的简介是 nowrap，长文案会把轨道撑得比屏幕还宽 */
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }
        /* 热门常用功能小标题 */
        .products-subtitle {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text);
        }
        .products-subtitle::before {
            content: "";
            flex: none;
            width: 4px;
            height: 18px;
            border-radius: 999px;
            background: linear-gradient(180deg, var(--accent), var(--accent-2));
        }
        .product-card {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 24px;
            transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        }
        .product-card:hover {
            transform: translateY(-5px);
            border-color: var(--stroke-strong);
            background: var(--glass-strong);
        }
        .product-card .ic {
            flex: none;
            width: 54px;
            height: 54px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            background: var(--glass-strong);
            border: 1px solid var(--stroke);
            color: var(--text);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }
        .product-card .meta { flex: 1; min-width: 0; }
        .product-card h3 {
            font-size: 1.05rem;
            margin-bottom: 3px;
        }
        .product-card p {
            color: var(--text-faint);
            font-size: 0.85rem;
            /* 写不下就换行，不做单行截断 */
            white-space: normal;
            overflow-wrap: break-word;
        }
        .product-card .arrow {
            flex: none;
            color: var(--text-faint);
            transition: transform 0.25s ease, color 0.25s ease;
        }
        .product-card:hover .arrow {
            transform: translateX(4px);
            color: var(--accent-2);
        }
        /* ===== 工具站入口卡：单独占满整行，用渐变描边 + 彩光底 + 圆形箭头按钮，与下方常用功能卡明显区分 ===== */
        .product-portal {
            grid-column: 1 / -1;
            position: relative;
            /* 裁掉内部扫光跑出卡片的部分 */
            overflow: hidden;
            padding: 26px 28px;
            /* 静态细描边打底，跑马灯光带叠在它上面 */
            border: 1px solid var(--stroke);
            background:
                linear-gradient(120deg, rgba(96, 165, 250, 0.20), rgba(34, 211, 238, 0.10) 48%, rgba(167, 139, 250, 0.18)),
                var(--glass-strong);
            box-shadow: 0 16px 44px rgba(37, 99, 235, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        }
        /* 1px 流光描边：伪元素铺满后用 mask 挖空内部，只留边框那一圈。
           光带用比卡片更宽的线性渐变 + 背景位移驱动，沿边框循环流动；
           不用 conic 角度动画是因为卡片又宽又扁，角度在这个比例上分布极不均，光带绕不满一圈 */
        .product-portal::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                transparent 38%,
                var(--accent) 50%,
                var(--accent-2) 58%,
                var(--accent-3) 66%,
                transparent 78%,
                transparent 100%);
            background-size: 200% 100%;
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            opacity: 0.9;
            pointer-events: none;
            transition: opacity 0.25s ease;
            animation: portalRing 3.5s linear infinite;
        }
        @keyframes portalRing {
            from { background-position: 0% 0; }
            to   { background-position: 200% 0; }
        }
        /* 卡片内部的跑马灯扫光：一道柔光斜着从左侧划过，循环往复 */
        .product-portal::after {
            content: "";
            position: absolute;
            top: -20%;
            bottom: -20%;
            left: 0;
            width: 42%;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
            transform: translateX(-130%) skewX(-14deg);
            animation: portalSweep 4.5s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes portalSweep {
            0%   { transform: translateX(-130%) skewX(-14deg); }
            55%  { transform: translateX(330%) skewX(-14deg); }
            100% { transform: translateX(330%) skewX(-14deg); }
        }
        /* 内容压在扫光之上，避免被白光糊住 */
        .product-portal > * {
            position: relative;
            z-index: 1;
        }
        .product-portal:hover {
            transform: translateY(-5px);
            border-color: var(--stroke-strong);
            background:
                linear-gradient(120deg, rgba(96, 165, 250, 0.26), rgba(34, 211, 238, 0.14) 48%, rgba(167, 139, 250, 0.24)),
                var(--glass-strong);
            box-shadow: 0 22px 56px rgba(37, 99, 235, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }
        .product-portal:hover::before {
            opacity: 1;
        }
        .product-portal .ic {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            border-color: transparent;
            color: var(--on-accent);
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
        }
        .product-portal h3 {
            font-size: 1.25rem;
        }
        .product-portal p {
            color: var(--text-dim);
            font-size: 0.92rem;
            /* 字号比普通卡片大，窄屏允许换行，避免被省略号截断 */
            white-space: normal;
        }
        /* 右侧细箭头换成实心圆形按钮，与普通卡片拉开差别 */
        .product-portal .arrow {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            font-size: 0.85rem;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: var(--on-accent);
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
        }
        .product-portal:hover .arrow {
            transform: translateX(4px) scale(1.06);
            color: var(--on-accent);
        }

        /* ===== CTA / 联系我们 ===== */
        .contact-panel {
            padding: 60px 48px;
            text-align: center;
            border-radius: var(--radius-lg);
            background: linear-gradient(140deg, rgba(37, 99, 235, 0.22), rgba(124, 58, 237, 0.22));
            border: 1px solid var(--stroke-strong);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.4);
        }
        .contact-panel h2 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 800;
            margin-bottom: 14px;
        }
        .contact-panel > p {
            color: var(--text-dim);
            max-width: 560px;
            margin: 0 auto 36px;
        }
        .contact-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
        }
        .contact-chip {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            border-radius: 999px;
            background: var(--glass);
            border: 1px solid var(--stroke);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
            font-size: 0.95rem;
            transition: all 0.25s ease;
        }
        .contact-chip:hover {
            background: var(--glass-strong);
            border-color: var(--stroke-strong);
            transform: translateY(-3px);
        }
        .contact-chip i {
            color: var(--accent-2);
        }

        /* ===== 页脚 ===== */
        footer {
            padding: 50px 0 36px;
            border-top: 1px solid var(--stroke);
            background: var(--footer-bg);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .footer-grid {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }
        .footer-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
        }
        .footer-brand .brand-mark { width: 34px; height: 34px; font-size: 0.95rem; }
        .footer-links {
            display: flex;
            gap: 22px;
            flex-wrap: wrap;
        }
        .footer-links a {
            color: var(--text-faint);
            font-size: 0.9rem;
            transition: color 0.2s;
        }
        .footer-links a:hover { color: var(--text); }
        .footer-bottom {
            border-top: 1px solid var(--stroke);
            padding-top: 24px;
            text-align: center;
            color: var(--text-faint);
            font-size: 0.82rem;
            line-height: 1.9;
        }
        .footer-bottom a { color: var(--text-dim); }
        .footer-bottom a:hover { color: var(--text); }

        /* ===== 滚动显现动画 ===== */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.visible {
            opacity: 1;
            transform: none;
        }

        /* ===== 响应式 ===== */
        @media (max-width: 1280px) {
            /* 品牌 Logo 是横版长图（约 6:1），42px 高时宽达 252px，中宽屏先把导航收紧 */
            .brand-logo { height: 34px; }
            .nav-search { margin: 0 12px; min-width: 150px; }
            .nav-links { gap: 2px; margin-right: 10px; }
            .nav-links a { padding: 8px 11px; font-size: 0.9rem; }
            .nav-cta { padding: 8px 16px !important; }
            /* 这一档仍然保持两栏：平板横屏、55 寸电视常见的 1280×720 视口都落在这里，
               只是把比例往轮播卡片这边让一点（文案 0.9 + 卡片 1.1），卡片才不至于显小 */
            .hero-grid { grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
        }
        /* 再窄一档：搜索框收进放大镜按钮，点开后不再往导航条里塞一行，
           而是挂在导航条下方，作为一块独立的玻璃悬浮面板出现 */
        @media (max-width: 1040px) {
            .nav-search {
                display: none;
                position: absolute;
                top: calc(100% + 12px);
                left: 0;
                right: 0;
                max-width: none;
                min-width: 0;
                margin: 0;
                padding: 10px;
                border-radius: 22px;
                background: var(--nav-mobile-bg);
                border: 1px solid var(--stroke);
                backdrop-filter: blur(22px) saturate(180%);
                -webkit-backdrop-filter: blur(22px) saturate(180%);
                box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            }
            .nav-search.open {
                display: flex;
                animation: navSearchIn 0.24s ease;
            }
            .nav-search-toggle { display: flex; }
        }
        /* 悬浮搜索面板的入场动画 */
        @keyframes navSearchIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: none; }
        }
        @media (max-width: 960px) {
            .services-grid { grid-template-columns: repeat(2, 1fr); }
            .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .about-grid { grid-template-columns: 1fr; }
        }
        /* 两栏再挤下去，文案列和卡片列都会窄得难受：900px 以下才改单列，
           文案在上、轮播卡片在下（卡片限宽 640px 居中） */
        @media (max-width: 900px) {
            .hero-grid { grid-template-columns: 1fr; gap: 40px; }
            .hero-copy { max-width: 100%; }
            .hero-carousel { max-width: min(640px, 100%); margin: 0 auto; }
        }
        /* 更窄：横向链接也放不下，收进汉堡菜单 */
        @media (max-width: 860px) {
            .nav-links {
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 4px;
                padding: 16px;
                background: var(--nav-mobile-bg);
                backdrop-filter: blur(22px);
                -webkit-backdrop-filter: blur(22px);
                border: 1px solid var(--stroke);
                border-radius: 22px;
                box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
                display: flex;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-14px);
                pointer-events: none;
                transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
            }
            .nav-links.open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
            }
            .nav-links a {
                text-align: center;
                opacity: 0;
                transform: translateY(10px);
                transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
            }
            .nav-links.open a {
                opacity: 1;
                transform: translateY(0);
            }
            .nav-links.open li:nth-child(1) a { transition-delay: 0.04s; }
            .nav-links.open li:nth-child(2) a { transition-delay: 0.08s; }
            .nav-links.open li:nth-child(3) a { transition-delay: 0.12s; }
            .nav-links.open li:nth-child(4) a { transition-delay: 0.16s; }
            .nav-links.open li:nth-child(5) a { transition-delay: 0.20s; }
            .nav-links.open li:nth-child(6) a { transition-delay: 0.24s; }
            .nav-cta { margin-left: 0; }
            .nav-toggle { display: flex; }
            .nav-actions { margin-left: auto; }
        }
        @media (max-width: 640px) {
            /* 光斑尺寸已经被 clamp 压小了，再整体降一档透明度，底色才留得住黑（浅色主题同步降） */
            :root { --blob-opacity: 0.42; }
            :root[data-theme="light"] { --blob-opacity: 0.26; }
            section { padding: 68px 0; }
            .services-grid { grid-template-columns: 1fr; }
            .products-grid { grid-template-columns: minmax(0, 1fr); }
            .values { grid-template-columns: 1fr; }
            .contact-panel { padding: 44px 22px; }
            .hero { padding: 120px 0 70px; }
            /* 小屏：文案区独占一屏（扣掉顶部内边距 120px），轮播图顺延到下一屏 */
            .hero-copy {
                position: relative;
                min-height: calc(100vh - 120px);
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            /* 品牌标签原本是不换行的 inline-flex，整行约 390px，手机上一行放不下会撑破页面宽度，
               这里改成可换行的行内块并收小字号 */
            .hero-tag {
                align-self: flex-start;
                display: inline-block;
                max-width: 100%;
                padding: 8px 14px;
                font-size: 0.76rem;
                letter-spacing: 0.03em;
                line-height: 1.6;
                text-align: center;
            }
            .hero-tag .dot {
                display: inline-block;
                vertical-align: middle;
                margin-right: 6px;
            }
            /* 导航栏：横版 Logo（204px）加三个 42px 圆按钮加内边距共约 376px，窄屏放不下会顶出屏幕 */
            .brand-logo { height: 28px; }
            .nav-actions { gap: 8px; }
            .nav-search-toggle,
            .theme-toggle,
            .nav-toggle {
                width: 38px;
                height: 38px;
            }
            /* 小屏文案页已自带提示箭头，隐藏 hero 底部原有的那个，避免出现两个 */
            .hero-scroll {
                display: none;
            }
            /* 首屏底部居中的向下箭头，提示继续下滑（样式同大屏 .hero-scroll） */
            .hero-hint {
                display: block;
                bottom: 18px;
            }
            /* 小屏改为上下排列，图片占满整行，卡片不再被压小 */
            .carousel-head { padding: 2px 4px 12px; }
            .carousel-head-title { font-size: 0.92rem; }
            .btn-buy { padding: 8px 14px; font-size: 0.82rem; }
            .carousel-stage { aspect-ratio: auto; }
            .carousel-slide {
                position: static;
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                padding: 10px;
                opacity: 1;
            }
            .carousel-slide.is-active {
                display: flex;
                animation: carouselFade 0.5s ease;
            }
            .carousel-slide img {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
            }
            .slide-info h3 { font-size: 0.95rem; }
            .slide-info p { font-size: 0.85rem; line-height: 1.7; }
            /* 上下排列时卡片高度随文字变化，这里固定文字区高度，切换时卡片高度一致 */
            .slide-info {
                height: 14.5rem;
                max-height: none;
                justify-content: flex-start;
                overflow-y: auto;
            }
        }

        /* 更小的手机（≤380px）：导航条是整页里唯一不能换行的一段（Logo + 三个圆按钮），
           横版 Logo 比例 6:1，28px 高时宽 168px，加按钮和内边距约 324px，360px 屏幕上只剩几像素余量，
           这里再收一档，保证 320~380px 的机器也不会被导航顶出横向滚动 */
        @media (max-width: 380px) {
            .nav-inner { padding: 0 6px 0 12px; }
            .brand-logo { height: 22px; }
            .nav-actions { gap: 6px; }
            .nav-search-toggle,
            .theme-toggle,
            .nav-toggle {
                width: 34px;
                height: 34px;
                font-size: 0.95rem;
            }
            /* 极窄屏轮播卡片只剩 200px 出头，卡片头部（标题 + 前往购买）是不换行的一段，再收一档 */
            .carousel-head { gap: 8px; }
            .carousel-head-title { font-size: 0.84rem; }
            .btn-buy { padding: 7px 11px; font-size: 0.76rem; }
        }

        /* ===== 微信公众号二维码弹窗 ===== */
        /* 卡片按钮化后的默认样式重置（与旁边的 a.contact-chip 视觉一致） */
        button.contact-chip {
            font-family: inherit;
            color: inherit;
            cursor: pointer;
        }
        .qr-modal {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(4, 8, 20, 0.72);
            backdrop-filter: blur(10px) saturate(140%);
            -webkit-backdrop-filter: blur(10px) saturate(140%);
            animation: qrFade 0.22s ease;
        }
        /* 用 hidden 属性显隐，所以必须让 hidden 优先于上面的 display: flex */
        .qr-modal[hidden] { display: none; }
        @keyframes qrFade { from { opacity: 0; } to { opacity: 1; } }
        .qr-modal-panel {
            position: relative;
            width: min(92vw, 340px);
            padding: 26px 24px 20px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--stroke);
            background: var(--glass-strong);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 60px rgba(0, 0, 0, 0.45);
            text-align: center;
            animation: qrPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        }
        @keyframes qrPop {
            from { opacity: 0; transform: translateY(16px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .qr-modal-panel h3 { font-size: 1.15rem; margin-bottom: 6px; }
        .qr-modal-panel > p { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 18px; }
        /* 白底衬垫：二维码需要浅色静区才能扫得准 */
        .qr-modal-plate {
            display: grid;
            place-items: center;
            padding: 12px;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
        }
        .qr-modal-plate img {
            display: block;
            width: 100%;
            max-width: 240px;
            height: auto;
            border-radius: 8px;
        }
        .qr-modal-tip { display: block; margin-top: 14px; color: var(--text-faint); font-size: 0.78rem; }
        .qr-modal-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            border: 1px solid var(--stroke);
            background: var(--glass);
            color: var(--text-dim);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .qr-modal-close:hover {
            color: var(--text);
            background: var(--glass-strong);
            border-color: var(--stroke-strong);
        }
        /* 弹窗打开期间锁住页面滚动 */
        body.qr-open { overflow: hidden; }