:root{ --ink:#24328f; --ink-2:#2c3ba6; --ink-3:#3346b8; --blue:#2B36F0; --blue-soft:#5b6bff; --violet:#6C3CF4; --text:#eaecff; --muted:rgba(230,234,255,.70); --faint:rgba(230,234,255,.50); --line:rgba(150,165,255,.16); --line-strong:rgba(150,165,255,.32); --radius:18px; --ease:cubic-bezier(.16,1,.3,1); --font:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ink);color:var(--text);font-family:var(--font); -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer} /* 细颗粒 + 网格底纹 */ .grain{ position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.35;mix-blend-mode:overlay; background-image:radial-gradient(rgba(255,255,255,.16) .5px, transparent .5px); background-size:3px 3px; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:88px 88px;opacity:.16; mask-image:radial-gradient(circle at 50% 20%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(circle at 50% 20%,#000 30%,transparent 78%); } .progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;background:linear-gradient(90deg,var(--blue),var(--violet))} .brand-text{display:flex;flex-direction:column;line-height:1.15} .brand-text b{font-size:16px;letter-spacing:.08em} .brand-text i{font-style:normal;font-size:11px;color:var(--faint);font-family:var(--mono);letter-spacing:.16em} /* 首屏 */ .hero{position:relative;min-height:calc(100svh - 73px);display:flex;align-items:center;overflow:hidden;isolation:isolate} .hero-bg{ position:absolute;inset:0;z-index:0; /* 与能力/案例等段一致：不再自带深底与彩色光晕，只保留与各段顶部同级的一层白色受光 */ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 32%,transparent 58%); } .hero-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)} .kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;color:var(--muted);margin:0 0 1em; border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:rgba(26,32,97,0.55);backdrop-filter:blur(6px)} .kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--blue-soft);box-shadow:0 0 12px var(--blue-soft)} .hero h1{ margin:10px 0 0;font-size:clamp(38px,6.4vw,76px);line-height:1.12;letter-spacing:-.02em;font-weight:800; } .hero h1 .line{display:block} .hero h1 em{ font-style:normal;background:linear-gradient(100deg,#7f8cff 0%,#2B36F0 38%,#6C3CF4 76%,#a08bff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .lede{margin:22px 0 0;max-width:600px;font-size:clamp(15px,1.5vw,17.5px);color:var(--muted);line-height:1.9} .lede .hl{color:#c9d0ff;font-weight:600;position:relative} .lede .hl::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:linear-gradient(90deg,var(--blue),transparent)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:12px;font-size:15px;font-weight:600;transition:.35s var(--ease)} .btn svg{width:16px;height:16px} .btn-primary{background:linear-gradient(120deg,#2B36F0,#6C3CF4);box-shadow:0 10px 34px -12px rgba(60,70,255,.9)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(90,80,255,.95)} .btn-primary:hover svg{transform:translateX(3px)} .btn svg{transition:transform .35s var(--ease)} .btn-ghost{border:1px solid var(--line-strong);color:var(--muted)} .btn-ghost:hover{color:var(--text);border-color:rgba(150,165,255,.55);background:rgba(255,255,255,.03)} .scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;font-size:11.5px; letter-spacing:.2em;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:8px} .scroll-hint span{width:1px;height:34px;background:linear-gradient(var(--blue-soft),transparent);animation:drop 2.2s infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* 通用段落 */ section{position:relative;z-index:1} .section-head{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)} .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--blue-soft);margin:0 0 16px} .section-head h2,.cta h2{margin:0;font-size:clamp(26px,3.6vw,44px);line-height:1.25;letter-spacing:-.015em;font-weight:800} .section-lede{margin:16px 0 0;color:var(--muted);max-width:640px;line-height:1.85;font-size:15.5px} /* 四字链 */ .concept{padding:120px 0 110px;border-top:1px solid var(--line)} .chain{position:relative;max-width:1240px;margin:64px auto 0;padding:0 clamp(20px,4vw,56px); display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .chain-line{position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);top:64px;height:1px;background:var(--line);overflow:hidden} .chain-line span{position:absolute;inset:0;width:34%;background:linear-gradient(90deg,transparent,var(--blue-soft),transparent);animation:flow 5.5s linear infinite} @keyframes flow{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}} .chain-item{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(46,57,143,0.58),rgba(36,48,123,0.58)); padding:20px;transition:.45s var(--ease);overflow:hidden} .chain-item:hover{border-color:rgba(170,190,255,.66);transform:translateY(-9px);box-shadow:var(--float-hi),var(--float-2)} .chain-trigger{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;text-align:left} .chain-no{font-family:var(--mono);font-size:11px;color:var(--faint);grid-row:1;grid-column:3} .chain-word{grid-row:1/3;grid-column:1;font-size:44px;font-weight:800;line-height:1; background:linear-gradient(140deg,#dfe3ff,#7f8cff 55%,#6C3CF4);-webkit-background-clip:text;background-clip:text;color:transparent} .chain-sub{grid-column:2;font-size:13.5px;color:var(--muted);letter-spacing:.04em} .chain-plus{grid-row:2;grid-column:2;justify-self:start;width:9px;height:9px;border-right:1px solid var(--faint);border-bottom:1px solid var(--faint); transform:rotate(45deg);transition:.3s var(--ease);margin-top:6px} .chain-item[data-open="true"] .chain-plus{transform:rotate(225deg)} .chain-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s} .chain-item[data-open="true"] .chain-body{max-height:520px;opacity:1;margin-top:18px} .chain-body img{border-radius:12px;border:1px solid var(--line);margin-bottom:14px;aspect-ratio:16/10;object-fit:cover;width:100%} .chain-body p{margin:0;font-size:14px;color:var(--muted);line-height:1.85} /* 演示 */ .demo{padding:110px 0;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(26,32,97,0.5),transparent 60%)} .demo-panel{max-width:1240px;margin:56px auto 0;padding:0 clamp(20px,4vw,56px);display:grid;grid-template-columns:280px 1fr;gap:26px} .demo-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--faint);margin:0 0 14px} .chips{display:flex;flex-direction:column;gap:10px} .chip{text-align:left;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(46,57,143,0.55); font-size:14px;color:var(--muted);transition:.35s var(--ease);line-height:1.5} .chip:hover{border-color:rgba(140,160,255,.45);color:var(--text);transform:translateX(3px)} .chip.is-active{border-color:rgba(120,140,255,.7);color:#fff;background:linear-gradient(120deg,rgba(43,54,240,.28),rgba(108,60,244,.2)); box-shadow:0 0 0 1px rgba(120,140,255,.25) inset} .demo-stage{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(43,54,139,0.62),rgba(36,48,123,0.75)); padding:22px;min-height:340px;position:relative;overflow:hidden} .demo-stage::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 60% at 80% 0%,rgba(90,80,255,.14),transparent 70%)} .stage-bar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em} .stage-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);transition:.3s} .demo-stage[data-state="run"] .stage-dot{background:var(--blue-soft);box-shadow:0 0 12px var(--blue-soft);animation:blink 1s infinite} .demo-stage[data-state="done"] .stage-dot{background:#6ee7b7;box-shadow:0 0 12px #6ee7b7} @keyframes blink{50%{opacity:.25}} .stage-time{margin-left:auto;color:var(--faint)} .steps{list-style:none;display:flex;gap:10px;padding:0;margin:20px 0 0;flex-wrap:wrap} .steps li{flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--faint);transition:.4s var(--ease)} .steps li b{display:block;font-size:13.5px;color:var(--muted);margin-bottom:3px;font-weight:600} .steps li.is-on{border-color:rgba(120,140,255,.6);color:var(--text);background:rgba(60,70,200,.12)} .steps li.is-on b{color:#cfd5ff} .answer{margin-top:20px;min-height:96px;font-size:15px;line-height:1.9;color:#dcE1ff} .answer p{margin:0} .answer .cite{color:#9fb0ff;border-bottom:1px dashed rgba(159,176,255,.6);cursor:pointer;padding:0 1px} .answer-placeholder{color:var(--faint);font-size:14px} .sources{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;opacity:0;transform:translateY(6px);transition:.5s var(--ease)} .sources.is-on{opacity:1;transform:none} .src-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:999px;padding:7px 13px;font-size:12.5px;color:var(--muted); background:rgba(38,47,128,0.5);cursor:pointer;transition:.3s} .src-chip:hover{color:#fff;border-color:rgba(160,180,255,.7)} .src-chip i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--blue-soft)} /* 能力卡 */ .capability{padding:110px 0} .cards{max-width:1240px;margin:56px auto 0;padding:0 clamp(20px,4vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:26px;overflow:hidden; background:linear-gradient(180deg,rgba(46,57,143,0.62),rgba(23,29,94,0.6));transition:transform .3s var(--ease),border-color .3s;transform-style:preserve-3d} .card:hover{border-color:rgba(140,160,255,.45)} .card-glow{position:absolute;width:320px;height:320px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(circle,rgba(90,110,255,.22),transparent 65%);transform:translate(-50%,-50%)} .card:hover .card-glow{opacity:1} .card-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--blue-soft);margin:0 0 14px} .card h3{margin:0 0 12px;font-size:21px} .card p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.85} .card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .card li{font-size:13px;color:var(--faint);padding-left:16px;position:relative} .card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--blue-soft)} /* 数据 */ .numbers{padding:110px 0;border-top:1px solid var(--line)} .stats{max-width:1240px;margin:56px auto 0;padding:0 clamp(20px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .stat{border-top:1px solid var(--line);padding-top:18px} .stat b{display:block;font-size:clamp(34px,4.4vw,54px);line-height:1;font-weight:800;letter-spacing:-.02em; background:linear-gradient(140deg,#fff,#8d9bff 60%,#6C3CF4);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums} .stat span{display:block;margin-top:10px;font-size:13.5px;color:var(--faint);letter-spacing:.04em} .ratio{max-width:1240px;margin:56px auto 0;padding:26px clamp(20px,4vw,56px);border:1px solid var(--line);border-radius:var(--radius); background:linear-gradient(180deg,rgba(43,54,139,0.55),rgba(36,48,123,0.55))} .ratio-title{margin:0 0 20px;font-size:14.5px;color:var(--muted)} .ratio-title span{color:var(--faint);font-size:12.5px;margin-left:8px} #ratioRange{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--line-strong);border-radius:2px;outline:none} #ratioRange::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%; background:linear-gradient(140deg,#2B36F0,#6C3CF4);box-shadow:0 0 0 4px rgba(90,110,255,.16);cursor:grab} #ratioRange::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:linear-gradient(140deg,#2B36F0,#6C3CF4)} .ratio-bars{margin-top:22px;display:flex;flex-direction:column;gap:14px} .ratio-bar i{display:block;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--violet));transition:width .25s var(--ease)} .ratio-bar.keyword i{background:linear-gradient(90deg,rgba(140,150,255,.8),rgba(160,170,255,.45))} .ratio-bar em{display:block;margin-top:8px;font-style:normal;font-size:12.5px;color:var(--faint)} .ratio-bar em b{color:#cfd5ff;font-variant-numeric:tabular-nums} .ratio-note{margin:20px 0 0;font-size:12.5px;color:var(--faint)} /* CTA */ .cta{position:relative;padding:130px 0;border-top:1px solid var(--line);overflow:hidden;text-align:center} .cta-bg{position:absolute;inset:0;z-index:0;opacity:.5; background:radial-gradient(50% 60% at 50% 40%,rgba(90,70,255,.28),transparent 70%),center/cover no-repeat url(/img/home/bg-lightstreak.webp)} .cta-inner{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 clamp(20px,4vw,56px)} .cta h2{margin-bottom:30px} .cta .hero-actions{justify-content:center} .cta-note{margin-top:22px;font-size:12.5px;color:var(--faint);letter-spacing:.06em} .foot{border-top:1px solid var(--line);padding:38px 0} .foot-inner{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center} .foot-brand p{margin:6px 0 0;font-size:12.5px;color:var(--faint)} .foot-meta{margin:0;font-size:12px;color:var(--faint);letter-spacing:.04em} /* 进场 */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} @media (max-width:1080px){ .nav-links{display:none} .chain{grid-template-columns:repeat(2,1fr)} .chain-line{display:none} .demo-panel{grid-template-columns:1fr} .cards{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .chain{grid-template-columns:1fr} .hero h1{font-size:clamp(32px,9vw,44px)} .scroll-hint{display:none} .foot-inner{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} } /* 引用原文浮层 */ .src-panel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px; background:rgba(26,34,94,0.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)} .src-panel.is-on{opacity:1} .src-panel-inner{width:min(560px,100%);border:1px solid var(--line-strong);border-radius:18px;padding:28px; background:linear-gradient(180deg,rgba(36,42,120,0.98),rgba(26,32,97,0.98));box-shadow:0 40px 120px -40px rgba(30,40,140,.9); transform:translateY(10px);transition:transform .35s var(--ease)} .src-panel.is-on .src-panel-inner{transform:none} .src-panel-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--blue-soft);margin:0 0 12px} .src-panel-inner h4{margin:0 0 8px;font-size:19px} .src-panel-meta{margin:0 0 16px;font-size:12.5px;color:var(--faint)} .src-panel-body{margin:0 0 22px;font-size:14px;line-height:1.9;color:var(--muted)} .src-close{padding:9px 18px;border:1px solid var(--line-strong);border-radius:10px;font-size:13.5px;color:var(--muted);transition:.3s} .src-close:hover{color:#fff;border-color:rgba(160,180,255,.6)} /* 首屏主视觉层（image2.5 生成的星系图）+ 层级修正 */ .hero-art{ position:absolute;z-index:1;inset:-8% -10% 0 24%;pointer-events:none; -webkit-mask-image:radial-gradient(closest-side at 60% 50%,#000 42%,rgba(0,0,0,.6) 64%,transparent 86%); mask-image:radial-gradient(closest-side at 60% 50%,#000 42%,rgba(0,0,0,.6) 64%,transparent 86%); } .hero-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.90) brightness(.88) contrast(1.02)} .hero-inner{z-index:3} .scroll-hint{z-index:4} @media (max-width:900px){ .hero-art{inset:-4% -20% auto -20%;height:62%;opacity:.85} } /* 首屏文字对比遮罩：桌面不再单独压暗（底色与下面各段相同），移动端保留纵向薄压暗保证可读 */ .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:none} @media (max-width:900px){ .hero::after{background:linear-gradient(180deg,rgba(21,28,88,.16) 0%,rgba(21,28,88,.52) 40%,rgba(21,28,88,.86) 66%,rgba(21,28,88,.52) 100%)} } /* 页脚链接行 */ .foot-links{display:flex;gap:18px;font-size:13px;color:var(--faint)} .foot-links a{transition:color .3s} .foot-links a:hover{color:var(--text)} @media (max-width:900px){.foot-links{margin-top:14px}} /* ============ v2 调整：序号 / 进度轨 / 展开式动作链 / 三层结构图 / 首屏视差 ============ */ /* 章节序号 */ .s-index{display:inline-block;margin-right:10px;padding:1px 7px;border-radius:5px;font-size:10.5px; letter-spacing:.1em;color:#b9c6ff;background:rgba(90,110,255,.14);border:1px solid rgba(120,140,255,.28);vertical-align:2px} /* 首屏维持静止：不再做滚动视差 */ /* 四字链：可伸展的横排，展开项变宽，轨道随进度推进 */ .chain{display:flex;align-items:flex-start;gap:14px;padding-top:26px} .chain-line{position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);top:8px;height:2px; background:var(--line);border-radius:2px;overflow:hidden} .chain-line .rail-fill{position:absolute;left:0;top:0;height:100%;width:var(--p,0%);border-radius:2px; background:linear-gradient(90deg,#2B36F0,#6C3CF4);box-shadow:0 0 14px rgba(90,110,255,.7); transition:width .55s var(--ease)} .chain-item{flex:1 1 0;min-width:0;padding-right:46px; transition:flex-grow .55s var(--ease),border-color .4s,transform .4s var(--ease),box-shadow .4s} .chain-item[data-open="true"]{flex-grow:1.85} .chain-trigger{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto; gap:2px 12px;align-items:center;width:100%;text-align:left} .chain-trigger .chain-word{grid-column:1;grid-row:1/3} .chain-trigger .chain-sub{grid-column:2;grid-row:1;white-space:normal;line-height:1.5;font-size:13px;word-break:keep-all;overflow-wrap:normal} .chain-trigger .chain-plus{grid-column:2;grid-row:2;justify-self:start;margin-top:4px} .chain-trigger .chain-no{position:absolute;top:16px;right:16px;grid-column:auto;grid-row:auto} .chain-item .chain-word{transition:transform .45s var(--ease)} .chain-item[data-open="true"] .chain-word{transform:scale(1.1)} .chain-item[data-open="true"] .chain-sub{color:#cfd6ff} /* 展开式动作链的响应式覆盖（原规则是 grid，改为 flex 后需要重排） */ @media (max-width:1080px){ .chain{flex-wrap:wrap} .chain-item{flex:1 1 calc(50% - 14px)} .chain-item[data-open="true"]{flex-grow:0;flex-basis:100%} } @media (max-width:640px){ .chain-item{flex:1 1 100%} .hero-inner{opacity:1} } /* 四字链副标题：主词 + 说明两行，避免在「·」处折行 */ .chain-sub b{display:block;font-size:13.5px;font-weight:600;color:#cfd6ff;letter-spacing:.04em} .chain-sub i{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:2px} .hero-art{ /* 整层偏移：往右下挪一点，改这两个值即可 */ --art-x: 36px; --art-y: 36px; transform: translate(var(--art-x), var(--art-y)); } /* ============ 右侧漩涡：持续顺时针旋转（核心居中后小幅摆动） ============ */ /* 调参入口只有两条： --spin-dur 一个来回的时长。当前 20s --spin-scale 放大倍数。转圈时图片四角会扫进盘面，需 ≥1.38 才不漏边 */ .hero-art{ --spin-dur: 20s; --spin-scale: 1.42; } .hero-art .hero-spin{ transform-origin: 78% 48%; /* 亮核在图片中的位置 */ /* translateX(-15.5%) 把亮核挪到盘面中心偏右一点；绕核小幅摆动，核心原地不动 */ animation: sway var(--spin-dur) ease-in-out infinite; will-change: transform; } /* ±6° 摆动：0 → +6° → 0 → -6° → 0，首尾同值无缝 */ @keyframes sway{ 0% { transform: translateX(-15.5%) rotate(0deg) scale(var(--spin-scale)); } 25% { transform: translateX(-15.5%) rotate(6deg) scale(var(--spin-scale)); } 75% { transform: translateX(-15.5%) rotate(-6deg) scale(var(--spin-scale)); } 100% { transform: translateX(-15.5%) rotate(0deg) scale(var(--spin-scale)); } } /* ============ 浅色主题专用星系（透明底 PNG，image2.5 生成，白底直接叠放） ============ */ .hero-art .hero-spin--light{display:none} html[data-theme="light"] .hero-art .hero-spin--dark{display:none} html[data-theme="light"] .hero-art .hero-spin--light{ display:block;mix-blend-mode:normal;opacity:1;filter:none; transform-origin:78% 48%; animation:sway 20s ease-in-out infinite, light-in 1.2s cubic-bezier(.16,1,.3,1) both; } /* 浅色：左 + 下 方向性叠化遮罩（35% 过渡带），与星系自身的透明 alpha 叠加 */ html[data-theme="light"] .hero-art{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%),linear-gradient(0deg,transparent 0%,#000 35%); mask-image:linear-gradient(90deg,transparent 0%,#000 35%),linear-gradient(0deg,transparent 0%,#000 35%); -webkit-mask-composite:source-in; mask-composite:intersect; } @keyframes light-in{ from{opacity:0} to{opacity:1} } @media (prefers-reduced-motion: reduce){ .hero-art .hero-spin--light{ animation: none; opacity:1; } } @media (prefers-reduced-motion: reduce){ .hero-art .hero-spin{ animation: none; } } } /* ============ 导航 logo（反白横排）+ 首屏排版与右侧星系呼应 ============ */ .brand-logo{height:44px;width:auto;display:block} @media (max-width:640px){ .brand-logo{height:34px} } /* 标题：降一档字重、加大字号与字距，让左侧文字"轻"下来，和右侧高密度的星系形成质感对比 */ .hero h1{ font-weight:700; font-size:clamp(38px,6.1vw,72px); line-height:1.16; letter-spacing:.012em; } /* 渐变改从冷白起笔，经过品牌蓝到紫，末端不再刺眼，和星系的蓝紫过渡同调 */ .hero h1 em{ background:linear-gradient(96deg,#e6eeff 0%,#93a4ff 26%,#2B36F0 58%,#7f5cff 88%,#9d7cff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* 引入一行"呼吸感"：正文更窄、行距更大，避免文字块与星系抢密度 */ .lede{margin:15px 0 0;max-width:520px;font-size:18px;line-height:1.8;letter-spacing:.008em} /* 首屏导语在「通过 Agent / 完成…」处断行：18px 下两行 441 / 381；窄屏隐藏，交给自然换行 */ @media (max-width:500px){.hero .lede .hero-br{display:none}} .lede .hl{color:#b9c6ff} .lede .hl::after{background:linear-gradient(90deg,rgba(140,160,255,.55),transparent)} /* 顶部标签更细更疏，和星系里的细光丝同一密度级 */ .kicker{font-size:11.5px;letter-spacing:.22em;border-color:rgba(150,165,255,.22)} .hero-actions{margin-top:30px;gap:12px} /* 首屏动作区：与导语拉开一整段（参考版式的「紧-松」节奏），CTA 区块不受影响 */ .hero .hero-actions{margin-top:51px} /* ============ 新顶部导航（对齐 qknow 结构，深色适配） ============ */ .qnav{ position:sticky; top:0; z-index:60; width:100%; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); border-bottom:1px solid rgba(150,165,255,0); transition:transform .45s var(--ease), border-color .3s, background .3s; } .qnav.is-scrolled{border-bottom-color:rgba(150,165,255,.16)} .qnav.is-hidden{transform:translateY(-100%)} .qnav__surface{position:relative;background:rgba(30,39,103,0.55)} .qnav.is-scrolled .qnav__surface{background:rgba(30,39,103,0.86)} .qnav__surface::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(140,160,255,.22) 30%,rgba(140,160,255,.35) 50%,rgba(140,160,255,.22) 70%,transparent); } .qnav__inner{ position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between; height:72px;gap:32px;white-space:nowrap; max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px); } .qnav__brand{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none} .qnav__brand img{display:block;height:40px;width:auto} @media (max-width:1100px){ .qnav__brand img{height:34px} } /* 主菜单 */ .qnav__main{flex:1;display:flex;justify-content:center;min-width:0} .qnav__list{display:flex;align-items:center;list-style:none;margin:0;padding:0} .qnav__item{position:relative} .qnav__link{ display:flex;align-items:center;gap:6px;height:72px;padding:0 18px; color:rgba(234,236,255,.78);font-size:16px;text-decoration:none;position:relative; transition:color .25s ease;background:none;border:0;cursor:pointer;font-family:inherit; } .qnav__link::after{ content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;border-radius:2px; background:linear-gradient(90deg,#2B36F0,#6C3CF4); transition:width .28s var(--ease),left .28s var(--ease); } .qnav__link:hover,.qnav__link:focus-visible{color:#fff} .qnav__link:hover::after,.qnav__link:focus-visible::after{width:calc(100% - 36px);left:18px} .qnav__item.is-active > .qnav__link{color:#fff} .qnav__item.is-active > .qnav__link::after{width:calc(100% - 36px);left:18px} .qnav__chev{ width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .3s var(--ease) } .qnav__item--mega.is-open .qnav__chev{transform:rotate(225deg) translateY(-2px)} .qnav__item--mega.is-open > .qnav__link{color:#fff} .qnav__item--mega.is-open > .qnav__link::after{width:calc(100% - 36px);left:18px} /* 右侧 */ .qnav__actions{display:flex;align-items:center;gap:14px;flex-shrink:0} .qlang{position:relative} .qlang__trigger{ display:inline-flex;align-items:center;justify-content:center;gap:6px; height:32px;padding:0 10px;border:1px solid rgba(130,150,255,.42);border-radius:6px; background:transparent;color:rgba(234,236,255,.8);font-size:14px;font-family:inherit;cursor:pointer; transition:border-color .25s,color .25s } .qlang__trigger:hover,.qlang.is-open .qlang__trigger{border-color:rgba(160,180,255,.8);color:#fff} .qlang__menu{ position:absolute;top:calc(100% + 8px);right:0;min-width:132px;padding:6px; border-radius:10px;border:1px solid rgba(150,165,255,.2); background:rgba(39,49,124,0.96);box-shadow:0 18px 40px -20px rgba(0,0,0,.9); opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s } .qlang.is-open .qlang__menu{opacity:1;visibility:visible;transform:none;pointer-events:auto} .qlang__opt{display:block;padding:8px 12px;border-radius:6px;font-size:14px;color:var(--muted);text-decoration:none} .qlang__opt:hover{background:rgba(90,110,255,.16);color:#fff} .qlang__opt.is-current{color:#c9d2ff} .qnav__cta{ display:inline-flex;align-items:center;height:38px;padding:0 20px;border-radius:8px; font-size:15px;color:#fff;text-decoration:none; background:linear-gradient(128deg,#8b5cff 0%,#2B36F0 42%,#4c6bff 100%); box-shadow:0 2px 10px rgba(43,54,240,.35);transition:box-shadow .25s,transform .25s } .qnav__cta:hover{box-shadow:0 6px 18px rgba(60,70,255,.5);transform:translateY(-1px)} .qnav__toggle{ display:none;place-items:center;width:40px;height:40px;border-radius:8px; border:1px solid rgba(150,165,255,.24);background:rgba(39,49,124,0.62);cursor:pointer } .qnav__toggle{position:relative} .qnav__toggle span{position:absolute;left:50%;top:50%;width:16px;height:1.6px;margin:-.8px 0 0 -8px;border-radius:2px;background:#dfe4ff;transition:transform .3s var(--ease)} .qnav__toggle span:first-child{transform:translateY(-3.6px)} .qnav__toggle span:last-child{transform:translateY(3.6px)} .qnav.is-menu-open .qnav__toggle span:first-child{transform:rotate(45deg)} .qnav.is-menu-open .qnav__toggle span:last-child{transform:rotate(-45deg)} /* Mega 面板 */ .qmega{ position:absolute;top:100%;left:0;right:0;overflow:hidden; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px); background:rgba(36,48,123,0.97);border-top:1px solid rgba(150,165,255,.14); border-bottom:1px solid rgba(150,165,255,.14); box-shadow:0 24px 60px -30px rgba(0,0,0,.95); transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),visibility .25s; z-index:100; } .qnav.is-solutions-open #mega-solutions, .qnav.is-cases-open #mega-cases{opacity:1;visibility:visible;pointer-events:auto;transform:none} .qmega__inner{max-width:1240px;margin:0 auto;padding:28px clamp(20px,4vw,56px) 34px;display:grid;grid-template-columns:260px 1fr;gap:40px} .qmega__kicker{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--blue-soft)} .qmega__title{margin:0 0 10px;font-size:22px;letter-spacing:-.01em} .qmega__desc{margin:0;font-size:13.5px;line-height:1.85;color:var(--faint)} .qmega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .qsol{ display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px; border:1px solid transparent;text-decoration:none;color:rgba(234,236,255,.86);font-size:14.5px; transition:background .25s,border-color .25s,color .25s } .qsol:hover{background:rgba(90,110,255,.12);border-color:rgba(140,160,255,.28);color:#fff} .qsol__icon{ width:26px;height:26px;border-radius:7px;flex-shrink:0; background:linear-gradient(140deg,rgba(108,60,244,.55),rgba(43,54,240,.35)); border:1px solid rgba(150,165,255,.3);position:relative } .qsol__icon::after{ content:"";position:absolute;inset:7px;border-radius:3px; border:1.4px solid rgba(225,232,255,.75);border-left-color:transparent;border-bottom-color:transparent; transform:rotate(45deg) } .qsol__text{display:flex;align-items:center;gap:8px} .qbadge{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:1px 5px;border-radius:4px;font-weight:600} .qbadge--hot{color:#ffb4a2;background:rgba(255,110,80,.16);border:1px solid rgba(255,120,90,.4)} .qbadge--new{color:#a9d5ff;background:rgba(80,150,255,.16);border:1px solid rgba(90,150,255,.4)} /* 客户案例面板 */ .qcases{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .qcases__cat{margin:0 0 12px;font-size:12.5px;letter-spacing:.08em;color:#9aa6d8} .qcases__link{display:block;padding:5px 0;font-size:13.5px;color:var(--muted);text-decoration:none;transition:color .2s,transform .2s} .qcases__link:hover{color:#fff;transform:translateX(2px)} /* 移动端抽屉 */ .qdrawer{position:fixed;inset:72px 0 0;z-index:55;background:rgba(30,39,103,0.98);overflow:auto; backdrop-filter:blur(16px);opacity:0;transition:opacity .3s var(--ease)} .qdrawer[hidden]{display:none} .qdrawer.is-open{opacity:1} .qdrawer__inner{padding:12px clamp(20px,5vw,32px) 40px;display:flex;flex-direction:column} .qdrawer__link{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;font-size:16px; color:rgba(234,236,255,.9);text-decoration:none;border-bottom:1px solid rgba(150,165,255,.12);cursor:pointer} .qdrawer__link.is-active{color:#fff} .qdrawer__group summary{list-style:none} .qdrawer__group summary::-webkit-details-marker{display:none} .qdrawer__group[open] > summary .qnav__chev{transform:rotate(225deg)} .qdrawer__sub{display:flex;flex-direction:column;padding:4px 0 10px 12px;border-bottom:1px solid rgba(150,165,255,.12)} .qdrawer__sub a{padding:10px 0;font-size:14px;color:var(--muted);text-decoration:none} .qdrawer__sub a:hover{color:#fff} .qdrawer__foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .qdrawer__lang{padding:8px 14px;border-radius:8px;border:1px solid rgba(150,165,255,.24);font-size:13.5px;color:var(--muted);text-decoration:none} .qdrawer__lang.is-current{color:#fff;border-color:rgba(150,165,255,.5)} .qdrawer__cta{margin-left:auto;padding:10px 20px;border-radius:8px;font-size:14.5px;color:#fff;text-decoration:none; background:linear-gradient(128deg,#8b5cff,#2B36F0)} @media (max-width:1100px){ .qnav__main{display:none} .qnav__actions .qlang{display:none} .qnav__toggle{display:grid} .qnav__inner{gap:16px} .qmega{display:none} } /* ============ 白皮书页 ============ */ .wp{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px) 80px} .wp-hero{padding:72px 0 40px;border-bottom:1px solid var(--line)} .wp-eyebrow{margin:0 0 18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--blue-soft)} .wp h1{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.18;letter-spacing:-.01em;font-weight:700} .wp h1 em{font-style:normal;background:linear-gradient(96deg,#e6eeff,#93a4ff 32%,#2B36F0 64%,#8b6bff);-webkit-background-clip:text;background-clip:text;color:transparent} .wp-lede{margin:22px 0 0;max-width:640px;font-size:16px;line-height:1.95;color:var(--muted)} .wp-quote{margin:26px 0 0;padding:16px 20px;border-left:2px solid rgba(120,140,255,.6); background:rgba(90,110,255,.07);border-radius:0 10px 10px 0; font-size:15.5px;line-height:1.9;color:#cfd6ff} .wp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .wp-cite{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:5px;font-family:var(--mono); font-size:10.5px;letter-spacing:.04em;color:#a9b6ff;background:rgba(90,110,255,.12); border:1px solid rgba(120,140,255,.22);vertical-align:1px;white-space:nowrap} /* 目录 */ .wp-toc{position:sticky;top:0;z-index:20;display:flex;gap:8px;flex-wrap:wrap; padding:14px 12px;margin:0 0 8px;background:rgba(30,39,103,0.97); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .wp-toc a{padding:6px 12px;border-radius:999px;font-size:13px;color:var(--muted);text-decoration:none; border:1px solid rgba(150,165,255,.2);transition:.25s} .wp-toc a:hover{color:#fff;border-color:rgba(150,165,255,.55);background:rgba(90,110,255,.12)} /* 章节 */ .wp-sec{padding:56px 0 8px;border-bottom:1px solid var(--line)} .wp-sec h2{margin:0 0 16px;font-size:clamp(22px,2.6vw,30px);line-height:1.3;font-weight:700;letter-spacing:-.01em} .wp-no{display:inline-block;margin-right:12px;padding:1px 8px;border-radius:6px;font-family:var(--mono); font-size:11px;color:#b9c6ff;background:rgba(90,110,255,.14);border:1px solid rgba(120,140,255,.28);vertical-align:3px} .wp-lead{margin:0 0 18px;font-size:14.5px;line-height:1.9;color:var(--faint)} .wp-sub{margin:26px 0 12px;font-size:16px} .wp-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;max-width:900px} .wp-list li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.9;color:var(--muted)} .wp-list li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:2px; background:linear-gradient(140deg,#2B36F0,#6C3CF4);opacity:.85} .wp-list li b{color:#dfe4ff;font-weight:600} .wp-list--tight{gap:8px} .wp-list--gap li::before{background:rgba(255,170,120,.75)} .wp-note{margin:14px 0 0;font-size:13px;line-height:1.85;color:var(--faint)} /* 三卡 */ .wp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .wp-card{border:1px solid var(--line);border-radius:14px;padding:20px; background:linear-gradient(180deg,rgba(46,57,143,0.58),rgba(36,48,123,0.55))} .wp-card-tag{margin:0 0 12px;font-size:15px;font-weight:700;color:#dfe4ff} .wp-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .wp-card li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.8;color:var(--muted)} .wp-card li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:rgba(140,160,255,.7)} .wp-card .wp-cite{margin:14px 0 0} /* 四宫格 */ .wp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .wp-grid article{border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(39,49,124,0.5)} .wp-grid h3{margin:0 0 12px;font-size:16px;color:#dfe4ff} .wp-grid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .wp-grid li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.8;color:var(--muted)} .wp-grid li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:rgba(140,160,255,.7)} .wp-grid .wp-cite{margin:14px 0 0} /* 案例 */ .wp-case{margin:0 0 18px;padding:22px;border:1px solid var(--line);border-radius:16px; background:linear-gradient(180deg,rgba(46,57,143,0.55),rgba(36,48,123,0.46))} .wp-case h3{margin:0 0 6px;font-size:17px;color:#e6eaff} .wp-case-meta{margin:0 0 16px;font-size:12.5px;color:var(--faint)} .wp-case dl{margin:0;display:grid;grid-template-columns:88px 1fr;gap:10px 16px} .wp-case dt{font-size:13px;color:#9aa6d8;font-weight:600} .wp-case dd{margin:0;font-size:14px;line-height:1.9;color:var(--muted)} .wp-case .wp-cite{margin:16px 0 0} /* 对照表 */ .wp-compare{border:1px solid var(--line);border-radius:14px;overflow:hidden} .wp-compare-row{display:grid;grid-template-columns:180px 1fr;gap:0} .wp-compare-row span{padding:13px 16px;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)} .wp-compare-row span:first-child{color:#9aa6d8} .wp-compare-row span:last-child{color:#dfe4ff} .wp-compare-head span{background:rgba(90,110,255,.1);font-weight:600;color:#cdd5ff} .wp-compare-row:last-child span{border-bottom:0} /* 数字 */ .wp-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:0 0 24px} .wp-stats > div{border-top:1px solid var(--line);padding-top:14px} .wp-stats b{display:block;font-size:clamp(24px,2.6vw,34px);line-height:1;font-weight:800;letter-spacing:-.01em; background:linear-gradient(140deg,#fff,#8d9bff 60%,#6C3CF4);-webkit-background-clip:text;background-clip:text;color:transparent} .wp-stats span{display:block;margin-top:8px;font-size:12px;color:var(--faint)} /* 出处表 */ .wp-src{border:1px solid var(--line);border-radius:14px;overflow:hidden} .wp-src-row{display:grid;grid-template-columns:1fr 320px;gap:0} .wp-src-row span{padding:11px 16px;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)} .wp-src-row span:last-child{font-family:var(--mono);font-size:12px;color:#a9b6ff} .wp-src-head span{background:rgba(90,110,255,.1);font-weight:600;color:#cdd5ff} .wp-src-row:last-child span{border-bottom:0} /* CTA */ .wp-cta{margin-top:56px;padding:36px;border:1px solid var(--line);border-radius:18px;text-align:center; background:radial-gradient(60% 120% at 50% 0%,rgba(90,70,255,.18),rgba(36,48,123,0.55))} .wp-cta h2{margin:0 0 10px;font-size:clamp(20px,2.4vw,26px)} .wp-cta p{margin:0 auto;max-width:560px;font-size:14px;line-height:1.9;color:var(--muted)} .wp-cta .wp-actions{justify-content:center} .wp-fine{margin:22px auto 0;font-size:11.5px;color:var(--faint);line-height:1.8} @media (max-width:980px){ .wp-cards,.wp-grid{grid-template-columns:1fr} .wp-stats{grid-template-columns:repeat(3,1fr)} .wp-compare-row{grid-template-columns:1fr} .wp-case dl{grid-template-columns:1fr} .wp-src-row{grid-template-columns:1fr} .wp-quote{font-size:14.5px} } .wp-sec{scroll-margin-top:64px} /* ============ 核心能力（6 卡）/ 关于我们（品牌释义并入） ============ */ .cards--six{grid-template-columns:repeat(3,1fr)} .cards--six .card{padding:22px} .cards--six .card h3{font-size:18px;margin-bottom:8px} .cards--six .card p{font-size:13.5px;line-height:1.8;margin-bottom:12px} .cards--six .card ul{gap:6px} .cards--six .card li{font-size:12.5px;line-height:1.7} .cap-src{display:inline-block;margin-top:14px;padding:2px 8px;border-radius:5px;font-family:var(--mono); font-size:10.5px;letter-spacing:.03em;color:#a9b6ff;background:rgba(90,110,255,.1); border:1px solid rgba(120,140,255,.2)} .cap-foot{max-width:1240px;margin:26px auto 0;padding:0 clamp(20px,4vw,56px)} /* 关于我们 */ .about{padding:110px 0 96px;border-top:1px solid var(--line)} .about .chain{margin-top:52px} .about-facts{ max-width:1240px;margin:44px auto 0;padding:0 clamp(20px,4vw,56px); display:grid;grid-template-columns:repeat(3,1fr);gap:16px } .about-fact{border:1px solid var(--line);border-radius:14px;padding:20px; background:linear-gradient(180deg,rgba(46,57,143,0.5),rgba(36,48,123,0.45))} .about-fact-tag{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--blue-soft)} .about-fact p:last-child{margin:0;font-size:13.5px;line-height:1.85;color:var(--muted)} .about-src{max-width:1240px;margin:16px auto 0;padding:0 clamp(20px,4vw,56px); font-size:11.5px;color:var(--faint);letter-spacing:.03em} /* 数据带 / 配比面板出处角标（与白皮书章节页码对照） */ .stat-src{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;font-style:normal; letter-spacing:.06em;color:var(--faint)} .numbers-src{max-width:1240px;margin:18px auto 0;padding:0 clamp(20px,4vw,56px); font-size:11.5px;line-height:1.85;color:var(--faint);letter-spacing:.03em} .ratio-src{margin:12px 0 0;font-size:11.5px;color:var(--faint);letter-spacing:.03em} /* ---------- 客户案例：列表与详情（内容取自白皮书 四、客户案例 p.12–15） ---------- */ .cs{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px) 80px} .cs-hero{padding:72px 0 40px;border-bottom:1px solid var(--line)} .cs-eyebrow{margin:0 0 18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--blue-soft)} .cs h1{margin:0;font-size:clamp(30px,4.4vw,52px);line-height:1.2;letter-spacing:-.01em;font-weight:700} .cs h1 em{font-style:normal;background:linear-gradient(96deg,#e6eeff,#93a4ff 32%,#2B36F0 64%,#8b6bff); -webkit-background-clip:text;background-clip:text;color:transparent} .cs-chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none} .cs-chips li{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02); font-size:12.5px;color:var(--muted)} .cs-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 0;align-items:stretch} /* 卡片数量决定列数：3 张→一行三列，4 张→两行两列（不留孤卡），6 张→三行两列 */ .cs-kpis[data-n="2"]{grid-template-columns:repeat(2,1fr)} .cs-kpis[data-n="4"]{grid-template-columns:repeat(2,1fr)} .cs-kpi{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:16px 18px; background:linear-gradient(160deg,rgba(48,59,151,0.55),rgba(31,39,114,0.35))} .cs-kpi b{display:block;font-size:clamp(20px,2.3vw,27px);line-height:1.25;font-weight:800;letter-spacing:-.01em; font-variant-numeric:tabular-nums;text-wrap:balance} .cs-kpi u{display:block;margin-top:2px;font-size:12px;color:var(--blue-soft);text-decoration:none;letter-spacing:.02em} .cs-kpi span{display:block;margin-top:auto;padding-top:10px;font-size:12.5px;line-height:1.7;color:var(--faint)} .wp-case-link{display:inline-block;margin:12px 0 0;font-size:13px;color:#cfd5ff} .cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 0} .cs-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line); border-radius:16px;color:inherit;text-decoration:none; background:linear-gradient(160deg,rgba(48,59,151,0.62),rgba(31,39,114,0.42));transition:.35s var(--ease)} .cs-card:hover{transform:translateY(-9px);border-color:rgba(170,190,255,.66); box-shadow:0 24px 60px -34px rgba(90,110,255,.9)} .cs-card__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--blue-soft)} .cs-card h2{margin:0;font-size:19px;line-height:1.45;font-weight:700} .cs-card p{margin:0;font-size:13.5px;line-height:1.85;color:var(--muted)} .cs-card .cs-card__more{margin-top:auto;font-size:13px;color:#cfd5ff} .cs-card .cs-card__more::after{content:" →"} .cs-nav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:46px 0 0;padding-top:22px; border-top:1px solid var(--line)} .cs-nav a,.cs-nav span{font-size:13.5px;color:var(--muted)} .cs-nav a:hover{color:#fff} .cs-src{margin:26px 0 0;font-size:11.5px;line-height:1.8;color:var(--faint);letter-spacing:.03em} @media (max-width:1080px){ .cs-cards{grid-template-columns:repeat(2,1fr)} .cs-kpis,.cs-kpis[data-n="4"]{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .cs-cards,.cs-kpis,.cs-kpis[data-n="4"]{grid-template-columns:1fr} } @media (max-width:1080px){ .cards--six{grid-template-columns:repeat(2,1fr)} .about-facts{grid-template-columns:1fr} } @media (max-width:640px){ .cards--six{grid-template-columns:1fr} } /* ---------- 悬浮层次：静态双层投影 + 顶部内高光 + 悬停上浮 ---------- 只改阴影、位移与过渡；配色、圆角、尺寸、间距均未改动。 transform 与 box-shadow 不参与布局，悬停不会推动周边元素。 */ :root{ --float-hi:inset 0 1px 0 rgba(226,234,255,.34),inset 0 -2px 0 rgba(196,214,255,.72); --float-1:0 2px 5px rgba(2,4,20,.55), 0 12px 22px -8px rgba(2,5,24,.7), 0 34px 62px -24px rgba(4,9,44,.95), 0 20px 34px -8px rgba(158,184,255,.95), 0 64px 110px -34px rgba(104,134,255,.55); --float-2:0 3px 8px rgba(2,4,20,.62), 0 20px 34px -10px rgba(2,5,24,.78), 0 58px 104px -34px rgba(4,9,44,1), 0 30px 48px -8px rgba(186,206,255,1), 0 88px 150px -44px rgba(126,156,255,.75); --float-dur:200ms; --float-ease:cubic-bezier(.16,1,.3,1); } .card,.cs-card,.cs-kpi,.wp-card,.wp-case,.ratio,.chain-item,.about-fact,.demo-stage{ box-shadow:var(--float-hi),var(--float-1); transition:box-shadow var(--float-dur) var(--float-ease), transform var(--float-dur) var(--float-ease), border-color .2s ease; } .card:hover,.cs-card:hover,.cs-kpi:hover,.wp-card:hover,.wp-case:hover, .ratio:hover,.chain-item:hover,.about-fact:hover,.demo-stage:hover{ box-shadow:var(--float-hi),var(--float-2); } .card:hover,.cs-kpi:hover,.wp-card:hover,.wp-case:hover,.ratio:hover, .about-fact:hover,.demo-stage:hover{ transform:translateY(-9px); } /* 这 6 张能力卡由 JS 做倾斜跟手，transform 不能加过渡，否则会拖影 */ .card[data-tilt]{transition:box-shadow var(--float-dur) var(--float-ease),border-color .2s ease} .chain-item:focus-visible,.card:focus-within,.cs-card:focus-visible, .cs-kpi:focus-within,.wp-card:focus-within{ box-shadow:var(--float-hi),var(--float-2); outline:2px solid rgba(140,160,255,.55); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ .card,.cs-card,.cs-kpi,.wp-card,.wp-case,.ratio,.chain-item,.about-fact,.demo-stage{transition:none} .card:hover,.cs-kpi:hover,.wp-card:hover,.wp-case:hover,.ratio:hover, .about-fact:hover,.demo-stage:hover{transform:none} } /* ---------- 关于我们：产品演进时间线 + 页脚版权行 ---------- */ .about-road{max-width:1240px;margin:34px auto 0;padding:0 clamp(20px,4vw,56px)} .about-road-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 14px; font-size:12.5px;color:var(--faint);letter-spacing:.02em} .about-road-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--blue-soft)} .road-wrap{position:relative} .road-wire{position:absolute;left:0;right:0;top:42px;height:2px;border-radius:2px;pointer-events:none;z-index:0; background:linear-gradient(90deg,rgba(91,107,255,.10),rgba(122,146,255,.85) 10%,rgba(174,192,255,1) 50%,rgba(122,146,255,.85) 90%,rgba(91,107,255,.10)); box-shadow:0 0 8px rgba(126,152,255,.85),0 0 22px rgba(92,122,255,.55),0 0 56px rgba(60,90,240,.35)} .road{position:relative;z-index:1;display:flex;list-style:none;margin:0;padding:0 38px;height:132px; overflow-x:auto;overflow-y:hidden;scrollbar-width:thin; -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent); mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)} .road::-webkit-scrollbar{height:6px} .road::-webkit-scrollbar-thumb{background:rgba(122,146,255,.45);border-radius:3px} .road::-webkit-scrollbar-track{background:transparent} .road li{position:relative;flex:0 0 172px;height:132px} .road li::before{content:"";position:absolute;left:0;top:37px;width:11px;height:11px;border-radius:50%; background:#a9bcff;box-shadow:0 0 0 3px rgba(122,146,255,.18),0 0 12px rgba(150,175,255,.95),0 0 30px rgba(90,120,255,.6)} .road b{position:absolute;left:0;top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--blue-soft);font-weight:600} .road span{position:absolute;left:0;right:16px;top:58px;font-size:12px;line-height:1.6;color:var(--muted)} .foot-copy{margin:6px 0 0;font-size:12px;color:var(--faint)} @media (max-width:1080px){.road li{flex-basis:164px}} @media (max-width:640px){ .road{height:140px} .road-wrap .road-wire{top:42px} .road li{flex-basis:150px;height:140px} .road li::before{top:37px;width:10px;height:10px} .road li span{top:56px;font-size:11.5px} } /* ---------- 关于我们：联系我们卡片排版（两行「标签 + 值」，各自不断行） ---------- */ .about-contact{display:flex;flex-direction:column;gap:7px} .about-contact .cf{display:flex;align-items:baseline;gap:10px;white-space:nowrap} .about-contact .cf i{flex:0 0 auto;min-width:88px;font-style:normal;font-size:12px;letter-spacing:.02em;color:var(--faint)} .about-contact .cf b{font-weight:500;color:var(--text)} @media (max-width:420px){ .about-contact .cf{white-space:normal} .about-contact .cf i{min-width:0} } /* ---------- 背景层次：同色系分层（方案 C：色阶 + 柔斑 + 噪点） ---------- 层 1 基底：对角双色阶（暗部偏冷、亮部微偏紫），明度跨度大于 6 个点 层 2 柔斑：两大团 blur(52px) 的超大尺度光斑，替代各向同性的小点阵 层 3 噪点：内联 SVG feTurbulence，overlay 混合，消除渐变 banding、增加胶片质感 层 4 区块：各段一条明度洗色，形成前 / 中 / 后的节奏区分 */ body{background:linear-gradient(146deg,#151c58 0%,#24328f 46%,#3a3aa6 100%) fixed} body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: linear-gradient(124deg,rgba(238,243,255,.24) 0%,rgba(238,243,255,.08) 13%,transparent 38%), radial-gradient(58% 46% at 12% 0%,rgba(120,150,255,.44),transparent 66%), radial-gradient(60% 50% at 92% 100%,rgba(122,72,255,.36),transparent 68%), radial-gradient(132% 110% at 50% 52%,transparent 38%,rgba(4,7,28,.58) 100%); } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); background-size:160px 160px; mix-blend-mode:overlay; opacity:.075; } /* 区块明度分层：奇偶段交替，避免整页一块色 */ .capability,.numbers,.about{position:relative;isolation:isolate} .capability::before,.numbers::before,.about::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; } .capability::before{ background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.03) 32%,transparent 58%); } .numbers::before{ background:linear-gradient(180deg,rgba(6,11,44,.34),rgba(255,255,255,.05) 42%,transparent 70%); } .about::before{ background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.02) 34%,transparent 62%); } /* 页脚压深一档，作为页面收口 */ .foot{background:linear-gradient(180deg,rgba(8,14,52,.26),rgba(8,14,52,.42))} /* 演示区沿用原有洗色，但补一层顶部提亮与底部压深，与相邻段区分 */ .demo{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(10,18,64,.34) 32%,transparent 74%)} } /* ---------- 能力演示：细化说明与阅读要点 ---------- */ .demo-side-note{margin:16px 0 0;font-size:11.5px;line-height:1.75;color:var(--faint);letter-spacing:.02em} .sources-label{position:relative;z-index:2;margin:20px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#9fb0ff} .demo-stage .sources{margin-top:10px} .demo-why{margin:16px 0 0;padding:13px 15px;border-left:2px solid rgba(120,140,255,.55);border-radius:0 10px 10px 0; background:linear-gradient(90deg,rgba(90,110,255,.10),transparent 82%);font-size:13px;line-height:1.85;color:var(--muted)} .demo-notes{max-width:1240px;margin:28px auto 0;padding:0 clamp(20px,4vw,56px);list-style:none; display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .demo-notes li{position:relative;padding:16px 18px 16px 20px;border:1px solid var(--line);border-radius:14px; background:linear-gradient(180deg,rgba(46,57,143,.5),rgba(36,48,123,.55)); font-size:12.5px;line-height:1.85;color:var(--muted)} .demo-notes li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--blue-soft),transparent)} .demo-notes b{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#dfe4ff} @media (max-width:1080px){.demo-notes{grid-template-columns:1fr 1fr}} @media (max-width:640px){.demo-notes{grid-template-columns:1fr}} /* ---------- 太空层：星云 / 星点 / 流星（服务于层次与质感，克制优先） ---------- .cosmos 背景是深空星云图，用 screen 混合叠在底色上——只加光、不压暗； ::before 是两档细星点，8 秒极缓呼吸；两枚流星周期 18s / 27s，错开出现。 */ .cosmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; background: url(/img/home/bg-nebula.webp) 8% -6%/112% no-repeat, url(/img/home/bg-nebula.webp) 92% 108%/150% no-repeat, url(/img/home/bg-nebula.webp) center/cover no-repeat; mix-blend-mode:screen;opacity:.9; -webkit-mask-image:radial-gradient(124% 104% at 50% 46%,rgba(0,0,0,.7) 40%,#000 78%); mask-image:radial-gradient(124% 104% at 50% 46%,rgba(0,0,0,.7) 40%,#000 78%); } .cosmos::before{content:"";position:absolute;inset:-10%; background-image: radial-gradient(rgba(232,240,255,.7) 1.1px,transparent 1.6px), radial-gradient(rgba(196,212,255,.45) 1px,transparent 1.5px), radial-gradient(rgba(170,192,255,.3) .8px,transparent 1.3px); background-size:230px 230px,113px 113px,61px 61px; background-position:0 0,43px 61px,17px 29px; opacity:.58;animation:star-breathe 9s ease-in-out infinite; } @keyframes star-breathe{0%,100%{opacity:.5}50%{opacity:.72}} .cosmos i{position:absolute;top:-8%;display:block;width:220px;height:1.5px;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(224,234,255,.95)); transform:rotate(34deg);opacity:0; filter:drop-shadow(0 0 8px rgba(174,200,255,.75)) drop-shadow(0 0 22px rgba(120,150,255,.45));} .cosmos i:nth-child(1){left:-16%;animation:meteor 18s linear infinite;animation-delay:3s} .cosmos i:nth-child(2){left:24%;top:-4%;width:150px;animation:meteor 27s linear infinite;animation-delay:14s} @keyframes meteor{ 0%{transform:translate3d(0,0,0) rotate(34deg);opacity:0} 3%{opacity:.85} 9%{opacity:.85} 16%{transform:translate3d(120vw,86vh,0) rotate(34deg);opacity:0} 100%{transform:translate3d(120vw,86vh,0) rotate(34deg);opacity:0} } @media (prefers-reduced-motion:reduce){ .cosmos::before{animation:none} .cosmos i{display:none} } @media (max-width:820px){ .cosmos{background-image:url(/img/home/bg-nebula-960.webp);opacity:.62} .cosmos::before{background-size:150px 150px,80px 80px} } /* 深/浅切换按钮（导航右上，深色默认态；浅色态见文件末尾主题层） */ .qnav__theme{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:8px; border:1px solid rgba(150,165,255,.32);background:rgba(39,49,124,.35);color:rgba(234,236,255,.82); font-size:12.5px;font-family:inherit;transition:border-color .25s,color .25s,background .25s} .qnav__theme:hover{border-color:rgba(160,180,255,.7);color:#fff;background:rgba(90,110,255,.16)} .qnav__theme svg{width:14px;height:14px;flex:none} .qnav__theme .i-moon{display:none} .qnav__theme span::before{content:"浅色"} @media (max-width:640px){.qnav__theme span{display:none}.qnav__theme{width:34px;padding:0;justify-content:center}} /* ========================================================================== 深色/浅色主题层（light theme）· 只在 html[data-theme="light"] 下生效 深色为默认；本块只覆盖颜色，不改尺寸/间距/圆角/动效。 ========================================================================== */ html[data-theme="light"]{--ink:#eef3fe; --ink-2:#e6ecff; --ink-3:#dde5fc; --text:#0d1330; --muted:rgba(13,19,48,.68); --faint:rgba(13,19,48,.46); --line:rgba(16,30,70,.10); --line-strong:rgba(16,30,70,.18); --float-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 0 rgba(16,30,70,.05); --float-1:0 1px 2px rgba(16,30,70,.05),0 10px 24px -16px rgba(16,30,70,.16),0 30px 56px -30px rgba(16,30,70,.22); --float-2:0 2px 5px rgba(16,30,70,.06),0 18px 34px -18px rgba(16,30,70,.20),0 52px 96px -46px rgba(16,30,70,.30);} html[data-theme="light"] body{background:linear-gradient(146deg,#f8faff 0%,#eff3ff 46%,#e6edff 100%) fixed;color:var(--text)} html[data-theme="light"] body::before{background: linear-gradient(124deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.22) 28%,transparent 52%), radial-gradient(58% 46% at 10% 0%,rgba(120,150,255,.20),transparent 66%), radial-gradient(56% 48% at 94% 100%,rgba(122,72,255,.12),transparent 68%);} html[data-theme="light"] body::after{opacity:.032} html[data-theme="light"] .cosmos{background:none} html[data-theme="light"] .cosmos::before, html[data-theme="light"] .cosmos i{display:none} html[data-theme="light"] .hero-bg{background:radial-gradient(64% 74% at 70% 42%,rgba(43,54,240,.18),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 55%)} html[data-theme="light"] .hero-art img{mix-blend-mode:multiply;opacity:.62;filter:saturate(.70) brightness(1.03) contrast(.98)} html[data-theme="light"] .hero::after{background:none} @media (max-width:900px){ html[data-theme="light"] .hero::after{background:linear-gradient(180deg,rgba(233,241,255,0) 0%,rgba(233,241,255,.50) 42%,rgba(233,241,255,.90) 68%,rgba(233,241,255,.55) 100%)} } html[data-theme="light"] .kicker{background:rgba(255,255,255,.72);border-color:rgba(16,30,70,.12);color:var(--muted)} html[data-theme="light"] .kicker .dot{background:#2b36f0;box-shadow:0 0 10px rgba(43,54,240,.5)} html[data-theme="light"] .hero h1{color:var(--text)} html[data-theme="light"] .hero h1 em{background:linear-gradient(96deg,#1b2350 0%,#2b36f0 55%,#6c3cf4 100%);-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="light"] .lede .hl{color:#24328f} html[data-theme="light"] .lede .hl::after{background:linear-gradient(90deg,rgba(43,54,240,.5),transparent)} html[data-theme="light"] .btn-ghost{border-color:rgba(16,30,70,.20);color:rgba(13,19,48,.72)} html[data-theme="light"] .btn-ghost:hover{color:#0d1330;border-color:rgba(43,54,240,.45);background:rgba(43,54,240,.05)} html[data-theme="light"] .scroll-hint{color:var(--faint)} html[data-theme="light"] .scroll-hint span{background:linear-gradient(#2b36f0,transparent)} html[data-theme="light"] .s-index{color:#1b23c4;background:rgba(43,54,240,.08);border-color:rgba(43,54,240,.22)} html[data-theme="light"] .eyebrow{color:#2b36f0} html[data-theme="light"] .section-lede{color:var(--muted)} html[data-theme="light"] .section-head h2, html[data-theme="light"] .cta h2{color:var(--text)} html[data-theme="light"] .chain-item{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.70))} html[data-theme="light"] .chain-item:hover{border-color:rgba(43,54,240,.30)} html[data-theme="light"] .chain-word{background:linear-gradient(140deg,#1b2350,#2b36f0 55%,#6c3cf4);-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="light"] .chain-sub b, html[data-theme="light"] .chain-item[data-open="true"] .chain-sub{color:#24328f} html[data-theme="light"] .chain-plus{border-color:rgba(13,19,48,.35)} html[data-theme="light"] .chain-body p{color:var(--muted)} html[data-theme="light"] .card{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72));border-color:var(--line)} html[data-theme="light"] .card:hover{border-color:rgba(43,54,240,.28)} html[data-theme="light"] .card-glow{background:radial-gradient(circle,rgba(43,54,240,.12),transparent 65%)} html[data-theme="light"] .card-tag{color:#2b36f0} html[data-theme="light"] .card p{color:var(--muted)} html[data-theme="light"] .card li{color:var(--faint)} html[data-theme="light"] .demo{background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(43,54,240,.05) 32%,transparent 74%)} html[data-theme="light"] .chip{background:rgba(255,255,255,.78);border-color:var(--line);color:var(--muted)} html[data-theme="light"] .chip:hover{border-color:rgba(43,54,240,.35);color:#0d1330} html[data-theme="light"] .chip.is-active{color:#1b23c4;border-color:rgba(43,54,240,.40);background:linear-gradient(120deg,rgba(43,54,240,.10),rgba(108,60,244,.08));box-shadow:0 0 0 1px rgba(43,54,240,.18) inset} html[data-theme="light"] .demo-stage{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,247,255,.92))} html[data-theme="light"] .demo-stage::after{background:radial-gradient(70% 60% at 80% 0%,rgba(43,54,240,.06),transparent 70%)} html[data-theme="light"] .steps li{color:var(--faint)} html[data-theme="light"] .steps li b{color:var(--muted)} html[data-theme="light"] .steps li.is-on{color:#0d1330;background:rgba(43,54,240,.07);border-color:rgba(43,54,240,.35)} html[data-theme="light"] .steps li.is-on b{color:#1b23c4} html[data-theme="light"] .answer{color:#243050} html[data-theme="light"] .answer .cite{color:#2b36f0;border-bottom-color:rgba(43,54,240,.45)} html[data-theme="light"] .src-chip{background:rgba(255,255,255,.85);border-color:var(--line-strong);color:var(--muted)} html[data-theme="light"] .src-chip:hover{color:#0d1330;border-color:rgba(43,54,240,.45)} html[data-theme="light"] .src-chip i{color:#2b36f0} html[data-theme="light"] .src-panel{background:rgba(13,19,48,.32)} html[data-theme="light"] .src-panel-inner{background:linear-gradient(180deg,#ffffff,#f7f9ff);border-color:rgba(16,30,70,.12);box-shadow:0 40px 120px -40px rgba(16,30,70,.35)} html[data-theme="light"] .src-panel-kicker{color:#2b36f0} html[data-theme="light"] .src-panel-body{color:var(--muted)} html[data-theme="light"] .src-close{color:var(--muted);border-color:var(--line-strong)} html[data-theme="light"] .src-close:hover{color:#0d1330;border-color:rgba(43,54,240,.40)} html[data-theme="light"] .demo-notes li{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72))} html[data-theme="light"] .demo-notes b{color:#0d1330} html[data-theme="light"] .demo-why{color:var(--muted);background:linear-gradient(90deg,rgba(43,54,240,.08),transparent 82%);border-left-color:rgba(43,54,240,.45)} html[data-theme="light"] .sources-label{color:#2b36f0} html[data-theme="light"] .stat b, html[data-theme="light"] .wp-stats b{background:linear-gradient(140deg,#1b2350,#2b36f0 60%,#6c3cf4);-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="light"] .ratio{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.70))} html[data-theme="light"] .ratio-title{color:var(--muted)} html[data-theme="light"] .ratio-bar em b{color:#24328f} html[data-theme="light"] .ratio-bar.keyword i{background:linear-gradient(90deg,rgba(43,54,240,.55),rgba(108,60,244,.30))} html[data-theme="light"] .numbers, html[data-theme="light"] .about{border-color:var(--line)} html[data-theme="light"] .about-fact{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.70))} html[data-theme="light"] .about-fact-tag, html[data-theme="light"] .about-road-kicker{color:#2b36f0} html[data-theme="light"] .about-fact p:last-child{color:var(--muted)} html[data-theme="light"] .road-wire{background:linear-gradient(90deg,rgba(43,54,240,.06),rgba(43,54,240,.55) 10%,rgba(108,60,244,.75) 50%,rgba(43,54,240,.55) 90%,rgba(43,54,240,.06));box-shadow:0 0 8px rgba(43,54,240,.35),0 0 22px rgba(43,54,240,.18)} html[data-theme="light"] .road li::before{background:#2b36f0;box-shadow:0 0 0 3px rgba(43,54,240,.12),0 0 10px rgba(43,54,240,.35)} html[data-theme="light"] .road b{color:#2b36f0} html[data-theme="light"] .road span{color:var(--muted)} html[data-theme="light"] .road::-webkit-scrollbar-thumb{background:rgba(43,54,240,.35)} html[data-theme="light"] .cta-bg{opacity:.6;background:radial-gradient(50% 60% at 50% 40%,rgba(43,54,240,.12),transparent 70%)} html[data-theme="light"] .cta-note, html[data-theme="light"] .foot-meta, html[data-theme="light"] .foot-copy{color:var(--faint)} html[data-theme="light"] .foot{background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(238,243,255,.75))} html[data-theme="light"] .foot-brand p, html[data-theme="light"] .foot-links{color:var(--faint)} html[data-theme="light"] .foot-links a:hover{color:var(--text)} html[data-theme="light"] .qnav__surface{background:rgba(255,255,255,.72)} html[data-theme="light"] .qnav.is-scrolled .qnav__surface{background:rgba(255,255,255,.92)} html[data-theme="light"] .qnav.is-scrolled{border-bottom-color:rgba(16,30,70,.08)} html[data-theme="light"] .qnav__surface::after{background:linear-gradient(90deg,transparent,rgba(43,54,240,.10) 30%,rgba(43,54,240,.18) 50%,rgba(43,54,240,.10) 70%,transparent)} html[data-theme="light"] .qnav__link{color:rgba(13,19,48,.72)} html[data-theme="light"] .qnav__link:hover, html[data-theme="light"] .qnav__link:focus-visible, html[data-theme="light"] .qnav__item.is-active > .qnav__link, html[data-theme="light"] .qnav__item--mega.is-open > .qnav__link{color:#0d1330} html[data-theme="light"] .qlang__trigger{border-color:rgba(16,30,70,.16);color:rgba(13,19,48,.70)} html[data-theme="light"] .qlang__trigger:hover, html[data-theme="light"] .qlang.is-open .qlang__trigger{border-color:rgba(43,54,240,.40);color:#0d1330} html[data-theme="light"] .qlang__menu{background:#ffffff;border-color:rgba(16,30,70,.10);box-shadow:0 18px 40px -24px rgba(16,30,70,.30)} html[data-theme="light"] .qlang__opt{color:var(--muted)} html[data-theme="light"] .qlang__opt:hover{background:rgba(43,54,240,.07);color:#0d1330} html[data-theme="light"] .qlang__opt.is-current{color:#2b36f0} html[data-theme="light"] .qnav__toggle{border-color:rgba(16,30,70,.14);background:rgba(255,255,255,.75)} html[data-theme="light"] .qnav__toggle span{background:#24328f} html[data-theme="light"] .qmega{background:rgba(255,255,255,.98);border-top-color:rgba(16,30,70,.06);border-bottom-color:rgba(16,30,70,.08);box-shadow:0 24px 60px -30px rgba(16,30,70,.28)} html[data-theme="light"] .qmega__desc{color:var(--faint)} html[data-theme="light"] .qsol{color:rgba(13,19,48,.80)} html[data-theme="light"] .qsol:hover{background:rgba(43,54,240,.05);border-color:rgba(43,54,240,.16);color:#0d1330} html[data-theme="light"] .qsol__icon{background:linear-gradient(140deg,rgba(108,60,244,.12),rgba(43,54,240,.06));border-color:rgba(43,54,240,.20)} html[data-theme="light"] .qsol__icon::after{border-color:rgba(43,54,240,.75);border-left-color:transparent;border-bottom-color:transparent} html[data-theme="light"] .qbadge--hot{color:#b4441f;background:rgba(255,110,80,.10);border-color:rgba(255,120,90,.28)} html[data-theme="light"] .qbadge--new{color:#1d4ed8;background:rgba(80,150,255,.10);border-color:rgba(90,150,255,.28)} html[data-theme="light"] .qcases__cat{color:rgba(13,19,48,.50)} html[data-theme="light"] .qcases__link{color:var(--muted)} html[data-theme="light"] .qcases__link:hover{color:#0d1330} html[data-theme="light"] .qdrawer{background:rgba(248,250,255,.985)} html[data-theme="light"] .qdrawer__link{color:rgba(13,19,48,.86);border-bottom-color:rgba(16,30,70,.08)} html[data-theme="light"] .qdrawer__link.is-active{color:#2b36f0} html[data-theme="light"] .qdrawer__sub{border-bottom-color:rgba(16,30,70,.08)} html[data-theme="light"] .qdrawer__sub a{color:var(--muted)} html[data-theme="light"] .qdrawer__sub a:hover{color:#0d1330} html[data-theme="light"] .qdrawer__lang{border-color:rgba(16,30,70,.14);color:var(--muted)} html[data-theme="light"] .qdrawer__lang.is-current{color:#0d1330;border-color:rgba(43,54,240,.40)} html[data-theme="light"] .wp-hero, html[data-theme="light"] .wp-sec, html[data-theme="light"] .cs-hero, html[data-theme="light"] .cs-nav{border-color:var(--line)} html[data-theme="light"] .wp h1 em, html[data-theme="light"] .cs h1 em{background:linear-gradient(96deg,#1b2350,#2b36f0 60%,#6c3cf4);-webkit-background-clip:text;background-clip:text;color:transparent} html[data-theme="light"] .wp-eyebrow, html[data-theme="light"] .cs-eyebrow, html[data-theme="light"] .wp-card-tag, html[data-theme="light"] .cs-card__tag{color:#2b36f0} html[data-theme="light"] .wp-quote{color:#24328f;background:rgba(43,54,240,.06);border-left-color:rgba(43,54,240,.45)} html[data-theme="light"] .wp-cite{color:#1b23c4;background:rgba(43,54,240,.08);border-color:rgba(43,54,240,.18)} html[data-theme="light"] .wp-toc{background:rgba(248,250,255,.97);border-bottom-color:var(--line)} html[data-theme="light"] .wp-toc a{color:var(--muted);border-color:rgba(16,30,70,.14)} html[data-theme="light"] .wp-toc a:hover{color:#0d1330;border-color:rgba(43,54,240,.40);background:rgba(43,54,240,.06)} html[data-theme="light"] .wp-no{color:#1b23c4;background:rgba(43,54,240,.08);border-color:rgba(43,54,240,.22)} html[data-theme="light"] .wp-list li b, html[data-theme="light"] .wp-card-tag, html[data-theme="light"] .wp-grid h3, html[data-theme="light"] .wp-case h3, html[data-theme="light"] .wp-compare-row span:last-child, html[data-theme="light"] .wp-card li b{color:#0d1330} html[data-theme="light"] .wp-card{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72))} html[data-theme="light"] .wp-grid article{background:rgba(255,255,255,.82)} html[data-theme="light"] .wp-case{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.72))} html[data-theme="light"] .wp-case dt{color:rgba(13,19,48,.55)} html[data-theme="light"] .wp-case-meta, html[data-theme="light"] .wp-lead, html[data-theme="light"] .wp-note, html[data-theme="light"] .wp-fine, html[data-theme="light"] .about-src, html[data-theme="light"] .stat-src, html[data-theme="light"] .numbers-src, html[data-theme="light"] .ratio-src{color:var(--faint)} html[data-theme="light"] .wp-compare-head span, html[data-theme="light"] .wp-src-head span{background:rgba(43,54,240,.06);color:#1b23c4} html[data-theme="light"] .wp-src-row span:last-child{color:#1b23c4} html[data-theme="light"] .wp-cta{background:radial-gradient(60% 120% at 50% 0%,rgba(43,54,240,.10),rgba(255,255,255,.88))} html[data-theme="light"] .wp-cta p{color:var(--muted)} html[data-theme="light"] .cap-src{color:#1b23c4;background:rgba(43,54,240,.07);border-color:rgba(43,54,240,.18)} html[data-theme="light"] .cs-chips li{background:rgba(255,255,255,.72);border-color:var(--line);color:var(--muted)} html[data-theme="light"] .cs-kpi{background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(244,247,255,.86))} html[data-theme="light"] .cs-kpi u{color:#2b36f0} html[data-theme="light"] .cs-card{background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(245,248,255,.88))} html[data-theme="light"] .cs-card:hover{border-color:rgba(43,54,240,.30);box-shadow:0 24px 60px -34px rgba(16,30,70,.30)} html[data-theme="light"] .cs-card__more, html[data-theme="light"] .wp-case-link{color:#2b36f0} html[data-theme="light"] .cs-nav a:hover{color:#0d1330} html[data-theme="light"] .cs-card p, html[data-theme="light"] .cs-nav a, html[data-theme="light"] .cs-nav span{color:var(--muted)} html[data-theme="light"] .numbers::before{background:linear-gradient(180deg,rgba(43,54,240,.08),rgba(43,54,240,.02) 26%,transparent 52%)} html[data-theme="light"] .qnav__theme{border-color:rgba(16,30,70,.16);background:rgba(255,255,255,.6);color:rgba(13,19,48,.72)} html[data-theme="light"] .qnav__theme:hover{border-color:rgba(43,54,240,.4);color:#0d1330;background:rgba(43,54,240,.06)} html[data-theme="light"] .qnav__theme .i-sun{display:none} html[data-theme="light"] .qnav__theme .i-moon{display:block} html[data-theme="light"] .qnav__theme span::before{content:"深色"} html[data-theme="light"] .qnav__brand img{filter:invert(1)} /* ========================================================================== 浅色主题视觉升级：深蓝底 + 技术网格 + 星点/流星 + 卡片底部光池 只在 html[data-theme="light"] 下生效，深色主题不受影响。 ========================================================================== */ html[data-theme="light"] body{ background:linear-gradient(146deg,#e9f1ff 0%,#d8e5ff 46%,#c8d9ff 100%) fixed; } html[data-theme="light"] body::before{ opacity:1; background: linear-gradient(90deg,rgba(43,54,240,.055) 1px,transparent 1px) 0 0/80px 80px, linear-gradient(rgba(43,54,240,.055) 1px,transparent 1px) 0 0/80px 80px, linear-gradient(90deg,rgba(43,54,240,.03) 1px,transparent 1px) 0 0/400px 400px, linear-gradient(rgba(43,54,240,.03) 1px,transparent 1px) 0 0/400px 400px, radial-gradient(58% 46% at 10% 0%,rgba(120,150,255,.18),transparent 66%), radial-gradient(56% 48% at 94% 100%,rgba(108,60,244,.12),transparent 68%), linear-gradient(124deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 26%,transparent 50%), radial-gradient(128% 108% at 50% 46%,transparent 50%,rgba(16,30,70,.09) 100%); } html[data-theme="light"] body::after{opacity:.025} /* 浅色宇宙层：柔光 + 淡星点 + 3 枚轻动效流星 */ html[data-theme="light"] .cosmos{ background: radial-gradient(44% 38% at 76% 26%,rgba(43,54,240,.12),transparent 70%), radial-gradient(50% 44% at 16% 84%,rgba(108,60,244,.10),transparent 72%); mix-blend-mode:normal;opacity:1; -webkit-mask-image:none;mask-image:none; } html[data-theme="light"] .cosmos::before{ display:block; background-image: radial-gradient(rgba(29,52,150,.55) 1px,transparent 1.4px), radial-gradient(rgba(43,54,240,.34) 1px,transparent 1.5px), radial-gradient(rgba(47,130,255,.26) .8px,transparent 1.3px); background-size:260px 260px,127px 127px,67px 67px; background-position:0 0,43px 61px,17px 29px; opacity:.5;animation:star-breathe 9s ease-in-out infinite; } html[data-theme="light"] .cosmos i{ display:block;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(110,185,255,.80) 52%,rgba(245,252,255,1)); filter:drop-shadow(0 0 8px rgba(47,130,255,.85)) drop-shadow(0 0 26px rgba(47,130,255,.50)); } html[data-theme="light"] .cosmos i::after{ content:"";position:absolute;right:-2px;top:50%;width:6px;height:6px;border-radius:50%; background:#ffffff;box-shadow:0 0 14px 5px rgba(47,130,255,.95);transform:translateY(-50%); } html[data-theme="light"] .cosmos i:nth-child(1){left:30%;top:2%;width:260px;animation:meteor 24s linear infinite;animation-delay:2s} html[data-theme="light"] .cosmos i:nth-child(2){left:56%;top:-6%;width:190px;animation:meteor 32s linear infinite;animation-delay:12s} html[data-theme="light"] .cosmos::after{ content:"";position:absolute;left:76%;top:0;width:220px;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(120,190,255,.85)); filter:drop-shadow(0 0 8px rgba(47,130,255,.55)); transform:rotate(34deg);opacity:0; animation:meteor 40s linear infinite;animation-delay:24s; } /* 段头细线 + 序号辉光 + 导航底线 */ html[data-theme="light"] .eyebrow::after{ content:"";display:inline-block;width:64px;height:1px;margin-left:12px;vertical-align:middle; background:linear-gradient(90deg,rgba(43,54,240,.55),rgba(47,130,255,0)); } html[data-theme="light"] .s-index{box-shadow:0 0 0 1px rgba(43,54,240,.10),0 0 14px rgba(43,54,240,.16)} html[data-theme="light"] .qnav__surface::after{ background:linear-gradient(90deg,transparent,rgba(43,54,240,.18) 30%,rgba(47,130,255,.32) 50%,rgba(43,54,240,.18) 70%,transparent); } /* 卡片底部光池（内部）+ 外发光（常驻，悬停增强） */ html[data-theme="light"] .card, html[data-theme="light"] .demo-notes li, html[data-theme="light"] .about-fact, html[data-theme="light"] .ratio, html[data-theme="light"] .demo-stage, html[data-theme="light"] .wp-card, html[data-theme="light"] .wp-case, html[data-theme="light"] .wp-grid article, html[data-theme="light"] .cs-card, html[data-theme="light"] .cs-kpi, html[data-theme="light"] .chain-item{ box-shadow:0 8px 18px -8px rgba(255,255,255,.95), var(--float-hi),var(--float-1), 0 30px 48px -26px rgba(70,150,255,.80), inset 0 -1px 0 rgba(120,185,255,.60), inset 0 -26px 34px -26px rgba(80,155,255,.70); } html[data-theme="light"] .card:hover, html[data-theme="light"] .demo-notes li:hover, html[data-theme="light"] .about-fact:hover, html[data-theme="light"] .ratio:hover, html[data-theme="light"] .demo-stage:hover, html[data-theme="light"] .wp-card:hover, html[data-theme="light"] .wp-case:hover, html[data-theme="light"] .wp-grid article:hover, html[data-theme="light"] .cs-card:hover, html[data-theme="light"] .cs-kpi:hover, html[data-theme="light"] .chain-item:hover{ box-shadow:0 12px 24px -10px rgba(255,255,255,1), var(--float-hi),var(--float-2), 0 42px 64px -34px rgba(70,150,255,.95), inset 0 -1px 0 rgba(120,185,255,.75), inset 0 -26px 34px -22px rgba(80,155,255,.85); } html[data-theme="light"] .card{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.78))} html[data-theme="light"] .demo-notes li{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78))} html[data-theme="light"] .about-fact{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.76))} html[data-theme="light"] .ratio{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.80))} html[data-theme="light"] .demo-stage{background:radial-gradient(90% 44% at 50% 102%,rgba(47,130,255,.22),rgba(108,60,244,.06) 52%,transparent 76%),linear-gradient(180deg,rgba(255,255,255,.97),rgba(243,247,255,.94))} html[data-theme="light"] .wp-card{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.78))} html[data-theme="light"] .wp-case{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78))} html[data-theme="light"] .wp-grid article{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),rgba(255,255,255,.88)} html[data-theme="light"] .cs-card{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(160deg,rgba(255,255,255,.98),rgba(245,248,255,.90))} html[data-theme="light"] .cs-kpi{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(160deg,rgba(255,255,255,.97),rgba(244,247,255,.90))} html[data-theme="light"] .chain-item{background:radial-gradient(92% 46% at 50% 103%,rgba(47,130,255,.36),rgba(120,180,255,.15) 46%,rgba(108,60,244,.06) 64%,transparent 80%),linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.76))} /* 首屏流星：位于星系之上、正文之下，只在浅色主题出现 */ .hero-meteors{display:none} html[data-theme="light"] .hero-meteors{ display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden; } html[data-theme="light"] .hero-meteors i{ position:absolute;display:block;height:2px;border-radius:2px;opacity:0; background:linear-gradient(90deg,transparent,rgba(120,190,255,.55) 55%,#fff); filter:drop-shadow(0 0 7px rgba(47,130,255,.7)) drop-shadow(0 0 22px rgba(47,130,255,.4)); animation:hero-meteor 30s linear infinite; } html[data-theme="light"] .hero-meteors i::after{ content:"";position:absolute;right:-2px;top:50%;width:6px;height:6px;border-radius:50%; background:#fff;box-shadow:0 0 14px 5px rgba(47,130,255,.9);transform:translateY(-50%); } html[data-theme="light"] .hero-meteors i:nth-child(1){left:34%;top:-8%;width:300px;animation-duration:30s;animation-delay:4s} html[data-theme="light"] .hero-meteors i:nth-child(2){left:58%;top:-14%;width:200px;animation-duration:44s;animation-delay:19s} @keyframes hero-meteor{ 0%{transform:translate3d(0,0,0) rotate(34deg);opacity:0} 2%{opacity:.9} 7%{opacity:.9} 13%{transform:translate3d(64vw,46vh,0) rotate(34deg);opacity:0} 100%{transform:translate3d(64vw,46vh,0) rotate(34deg);opacity:0} } @media (prefers-reduced-motion:reduce){ html[data-theme="light"] .cosmos::before{animation:none} html[data-theme="light"] .cosmos i, html[data-theme="light"] .cosmos::after{display:none} html[data-theme="light"] .hero-meteors i{display:none} }