:root{--navy:#102b5c;--navy2:#173b70;--blue:#2d63c9;--teal:#2aa58d;--mint:#9fddc9;--paper:#f5f8fc;--ink:#14243f;--muted:#687790;--line:#dfe7f0;--amber:#d9a35f;--font:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Source Han Sans SC','Noto Sans SC','WenQuanYi Micro Hei',sans-serif;--display:'Manrope','PingFang SC','Microsoft YaHei','Hiragino Sans GB','Source Han Sans SC','Noto Sans SC',sans-serif;--mono:'DM Mono',ui-monospace,SFMono-Regular,Consolas,monospace} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.75 var(--font)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer;border:0}.container{width:min(1180px,calc(100% - 64px));margin:auto}.topbar{height:34px;background:var(--blue);color:#dce9fa;font-size:12px}.topbar .container{height:100%;display:flex;align-items:center;justify-content:space-between}.topbar a{color:#fff;display:flex;align-items:center;gap:6px}.topbar svg{width:14px;height:14px}.header{height:78px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.nav{height:100%;display:flex;align-items:center;gap:36px}.brand{display:flex;align-items:center;gap:9px;white-space:nowrap}.brand-logo{width:34px;height:34px;object-fit:contain}.brand-cn{font-weight:900;font-size:16px;letter-spacing:.03em}.brand-en{font:10px var(--mono);letter-spacing:.08em;color:var(--muted);padding-top:3px}.desktop-nav{display:flex;align-items:center;gap:23px;margin-left:auto;font-size:13px;color:#475875}.desktop-nav a{padding:28px 0;position:relative;transition:.2s}.desktop-nav a:hover,.desktop-nav a.active{color:var(--blue)}.desktop-nav a.active:after{content:'';position:absolute;bottom:18px;left:0;right:0;height:2px;background:var(--teal);border-radius:2px}.nav-actions{display:flex;align-items:center;gap:14px}.nav-phone{font:11px var(--mono);color:var(--navy);white-space:nowrap}.nav-cta,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border-radius:6px;padding:11px 17px;font-size:13px;font-weight:700;transition:.2s}.nav-cta:hover,.btn-primary:hover{background:#3b74dc;transform:translateY(-1px)}.btn-secondary{display:inline-flex;align-items:center;gap:8px;border:1px solid #aebfd5;color:var(--navy);border-radius:6px;padding:10px 16px;font-size:13px;font-weight:700;background:#fff}.menu-toggle{display:none;background:none;color:var(--navy);padding:4px}.mobile-nav{display:none} .breadcrumb{font:11px var(--mono);color:#8b98aa;padding:24px 0 0}.breadcrumb a:hover{color:var(--blue)}.hero-detail{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;padding:74px 0 86px}.hero-detail:before{content:'';position:absolute;inset:0;z-index:-2;background:var(--hero-image,linear-gradient(120deg,#173b70,#102b5c));background-size:cover;background-position:center;opacity:.28}.hero-detail:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,43,92,.98) 0%,rgba(16,43,92,.88) 58%,rgba(16,43,92,.6) 100%)}.hero-detail .breadcrumb{color:#adc2dc;padding-top:0}.hero-detail h1{font:800 clamp(38px,5vw,62px)/1.17 var(--display);letter-spacing:-.055em;margin:30px 0 18px}.hero-detail h1 em{color:#b7dcff;font-style:normal}.hero-detail .hero-lead{font-size:17px;line-height:1.9;color:#d9e6f5;max-width:650px;margin:0 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-actions .btn-secondary{background:transparent;color:#fff;border-color:#aec2dd}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:680px;margin-top:46px}.hero-stats div{border-left:2px solid var(--teal);padding-left:13px}.hero-stats strong{display:block;font:700 24px var(--display);color:var(--mint)}.hero-stats span{display:block;font-size:11px;color:#c7d6e8;margin-top:2px} .section{padding:82px 0}.section-light{background:#fff}.section-kicker{font:10px var(--mono);letter-spacing:.14em;color:var(--teal);margin:0 0 13px}.section h2{font:800 clamp(30px,4vw,44px)/1.25 var(--display);letter-spacing:-.05em;margin:0 0 18px}.section h2 em{font-style:normal;color:var(--blue)}.section-lead{max-width:670px;color:var(--muted);font-size:15px;line-height:1.95;margin:0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.section-head>div{max-width:700px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:26px;box-shadow:0 10px 28px rgba(16,43,92,.06);transition:.22s}.card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(16,43,92,.12);border-color:#b9cde5}.card-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:#eaf2fb;color:var(--blue);margin-bottom:24px}.card-icon svg{width:22px}.card h3{font-size:19px;margin:0 0 9px}.card p{font-size:13px;line-height:1.85;color:var(--muted);margin:0}.card small{display:block;color:var(--teal);font-size:11px;margin-top:17px;font-weight:700}.dark-section{background:var(--navy);color:#fff}.dark-section .section-lead{color:#cbd9eb}.dark-section .card{background:#17366a;border-color:#48658f;box-shadow:none}.dark-section .card h3{color:#fff}.dark-section .card p{color:#c6d7eb}.dark-section .card-icon{background:#245088;color:#9fddc9} .tabs{display:flex;gap:8px;overflow:auto;padding-bottom:2px;margin-bottom:25px}.tab-btn{padding:10px 16px;background:#edf2f8;border:1px solid transparent;border-radius:6px;color:#5a6b84;font-size:13px;white-space:nowrap}.tab-btn.active{background:var(--blue);color:#fff}.tab-pane{display:none}.tab-pane.active{display:block;animation:fade .3s ease}.tab-content{background:#f5f8fc;border:1px solid var(--line);border-radius:12px;padding:27px}.tab-content h3{font-size:20px;margin:0 0 10px}.tab-content p{color:var(--muted);font-size:13px;line-height:1.9}.bullet-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 26px;padding:0;margin:20px 0 0;list-style:none}.bullet-list li{display:flex;gap:8px;align-items:flex-start;font-size:13px}.bullet-list svg{color:var(--teal);width:17px;flex:0 0 auto;margin-top:4px} .steps-detail{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.step-detail{position:relative;padding:20px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;min-height:194px}.step-detail:after{content:'→';position:absolute;right:-13px;top:29px;color:#9ab1cc;font-size:18px}.step-detail:last-child:after{display:none}.step-num{font:11px var(--mono);color:var(--amber)}.step-detail h3{font-size:17px;margin:19px 0 8px}.step-detail p{font-size:11px;line-height:1.8;color:var(--muted);margin:0} .accordion{border-top:1px solid var(--line)}.accordion-item{border-bottom:1px solid var(--line)}.accordion-trigger{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;padding:19px 0;color:var(--ink);font-size:15px;font-weight:700;text-align:left}.accordion-trigger svg{color:#7990aa;transition:.2s}.accordion-item.open .accordion-trigger svg{transform:rotate(180deg);color:var(--blue)}.accordion-body{display:grid;grid-template-rows:0fr;transition:.25s ease}.accordion-item.open .accordion-body{grid-template-rows:1fr}.accordion-body>div{overflow:hidden}.accordion-body p{font-size:13px;line-height:1.85;color:var(--muted);padding:0 30px 18px 0;margin:0} .cta-band{background:linear-gradient(110deg,#e8f3fb,#e8f7f2);padding:50px 0}.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-band h2{font:800 29px/1.3 var(--display);margin:0 0 7px;letter-spacing:-.04em}.cta-band p{color:var(--muted);font-size:13px;margin:0}.footer{background:var(--navy);color:#c8d5e7;padding:38px 0 20px}.footer-main{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;padding-bottom:32px;border-bottom:1px solid #48628b}.footer-brand .brand{color:#fff;margin-bottom:13px}.footer-brand .brand-en{color:#93aac6}.footer-brand p{font-size:13px;margin:0 0 6px;color:#ecf4ff}.footer-brand>span{font-size:11px;color:#96aac4}.footer-col{display:flex;flex-direction:column;gap:8px;font-size:12px}.footer-col b{color:#7dd2bd;font-size:12px;margin-bottom:4px}.footer-col a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:18px;font-size:10px;color:#91a5c0}.footer-bottom div{display:flex;gap:17px}.footer-bottom a:hover{color:#fff} /* 旧的 .reveal 基础实现已删除：入场改由文件末尾「逐段入场」的 .js 门控规则接管。 必须删掉的原因：.reveal.visible{transform:none} 权重为 (0,2,0)，且排在 .card:hover{transform:translateY(-3px)} 之后，会把卡片悬停上浮完全压掉（实测确认）。 删掉后还有一个好处：无 JS 时 .reveal 不再默认 opacity:0，内容一定可见。 */@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media(max-width:980px){.container{width:min(100% - 40px,760px)}.desktop-nav,.nav-phone{display:none}.menu-toggle{display:block}.mobile-nav{display:none;position:absolute;top:78px;left:0;right:0;padding:13px 20px 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 25px rgba(16,43,92,.11)}.mobile-nav.open{display:grid}.mobile-nav a{padding:11px 0;border-bottom:1px solid #edf1f5;font-size:13px}.mobile-nav a:last-child{border:0}.grid-3{grid-template-columns:repeat(2,1fr)}.steps-detail{grid-template-columns:repeat(3,1fr)}.step-detail:nth-child(3):after{display:none}.footer-main{grid-template-columns:1.5fr 1fr 1fr}.footer-col:last-child{display:none}} @media(max-width:560px){body{font-size:14px}.container{width:calc(100% - 32px)}.topbar{font-size:11px}.topbar a{display:none}.header{height:70px}.mobile-nav{top:70px}.brand-en{display:none}.nav-cta{padding:9px 11px;font-size:11px}.hero-detail{padding:52px 0 62px}.hero-detail h1{font-size:39px;margin-top:22px}.hero-detail .hero-lead{font-size:14px}.hero-stats{gap:10px;margin-top:36px}.hero-stats strong{font-size:19px}.hero-stats span{font-size:10px}.section{padding:61px 0}.section-head{display:block;margin-bottom:28px}.section-head .btn-secondary{margin-top:16px}.grid-3,.grid-2{grid-template-columns:1fr}.card{padding:21px}.card-icon{margin-bottom:17px}.bullet-list{grid-template-columns:1fr}.steps-detail{grid-template-columns:repeat(2,1fr)}.step-detail{min-height:170px;padding:16px 13px}.step-detail:after{display:none}.step-detail h3{font-size:16px;margin-top:14px}.step-detail p{font-size:11px}.cta-band{padding:37px 0}.cta-band-inner{display:block}.cta-band .btn-primary{margin-top:18px}.footer-main{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom div{margin-top:10px}} @media print{.header{position:static}.menu-toggle,.mobile-nav{display:none!important}.hero-detail{break-after:page}.section{break-inside:avoid}.footer{break-before:page}} /* Readable typography shared by every detail page. */ body{font-size:16px}.card h3{font-size:21px}.card p,.tab-content p,.bullet-list li,.accordion-body p{font-size:15px}.section-lead{font-size:17px}.card small,.step-detail p{font-size:13px}.step-detail h3{font-size:19px}.step-detail{min-height:174px}.dark-section .tab-content{color:var(--ink)}.dark-section .tab-content h3{color:var(--ink)}.hero-detail .section-kicker{font-size:11px}.brand-en{display:none}.nav{gap:23px}.desktop-nav{gap:19px}.nav-phone{display:none}.tab-btn:focus-visible,.accordion-trigger:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #d9a35f;outline-offset:4px} @media(max-width:560px){.card h3{font-size:20px}.card p,.tab-content p,.bullet-list li,.accordion-body p{font-size:14px}.section-lead{font-size:15px}.step-detail p{font-size:12px}.step-detail h3{font-size:17px}.hero-detail .hero-lead{font-size:15px}.hero-stats strong{font-size:18px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}} /* ============================================================================ 交互增强层（2026-09 追加，与首页 styles.css 第 1/2/11 节保持一致） --------------------------------------------------------------------------- 入场动画的归属： 本文件上方原有的两条 .reveal 规则已删除，入场完全由下面「逐段入场」一节接管。 原规则有两个问题： ① .reveal{opacity:0} 没有 .js 门控 —— 万一 JS 没跑，内容就永远不可见； ② .reveal.visible{transform:none} 权重 (0,2,0) 且排在 .card:hover 之后， 把卡片悬停上浮完全压掉（已实测确认）。 现在的规则都用 :where() 包住选择器（权重 0）， 既保证无 JS/打印时内容可见，也不与任何悬停、交错效果抢权重。 ========================================================================== */ /* ---------- 顶部滚动进度 ---------- */ .scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:40;pointer-events:none} .scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2aa58d,#2d63c9);transition:width .12s linear} /* ---------- 逐段入场 ---------- 全部用 :where() 把权重降到 0。 否则 .js .reveal:not(.is-grid).visible 的 (0,4,0) 会压掉 .card:hover{transform:translateY(-3px)} 这类 (0,2,0) 的悬停规则， 卡片入场后就不再上浮（实测确认过）。 */ :where(.js .reveal:not(.is-grid)){opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease} :where(.js .reveal:not(.is-grid).visible){opacity:1;transform:none} :where(.js .reveal.is-grid){opacity:1;transform:none} :where(.js .reveal.is-grid)>*{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease} :where(.js .reveal.is-grid)>*:nth-child(2){transition-delay:.06s} :where(.js .reveal.is-grid)>*:nth-child(3){transition-delay:.12s} :where(.js .reveal.is-grid)>*:nth-child(4){transition-delay:.18s} :where(.js .reveal.is-grid)>*:nth-child(5){transition-delay:.24s} :where(.js .reveal.is-grid)>*:nth-child(6){transition-delay:.3s} :where(.js .reveal.is-grid.visible)>*{opacity:1;transform:none} /* ---------- 吸顶导航滚动反馈 ---------- */ .header.scrolled{box-shadow:0 8px 22px rgba(16,43,92,.09)} /* ---------- 页尾「上一个 / 下一个」 ---------- */ .prevnext{background:#fff;border-top:1px solid var(--line);padding:38px 0} .prevnext-inner{display:grid;grid-template-columns:1fr 1fr;gap:16px} .prevnext-item{display:grid;gap:5px;padding:20px 22px;border:1px solid var(--line);border-radius:13px;background:var(--paper);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .prevnext-item:hover{transform:translateY(-2px);border-color:#b9cde5;box-shadow:0 16px 32px rgba(16,43,92,.1)} .prevnext-item span{font:10px var(--mono);color:var(--teal)} .prevnext-item b{font-size:19px;color:var(--navy)} .prevnext-item small{font-size:12px;color:var(--muted)} .prevnext-item.next{text-align:right} /* ---------- 回到顶部 ---------- */ .back-top-fab{position:fixed;right:22px;bottom:26px;z-index:29;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px rgba(16,43,92,.28);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,background .2s ease} .back-top-fab.show{opacity:1;transform:none;pointer-events:auto} .back-top-fab:hover{background:var(--blue)} .back-top-fab svg{width:19px} /* ---------- 锚点偏移（吸顶导航高 78px） ---------- */ [id]{scroll-margin-top:96px} .hero-detail [id],.card[id]{scroll-margin-top:110px} @media(max-width:560px){ .prevnext{padding:28px 0} .prevnext-inner{grid-template-columns:1fr} .prevnext-item{padding:17px 18px} .prevnext-item b{font-size:17px} .back-top-fab{right:16px;bottom:20px;width:40px;height:40px} } /* ---------- 打印：动画终态 + 隐藏交互控件 ---------- */ @media print{ .scroll-progress,.back-top-fab{display:none!important} .js .reveal:not(.is-grid),.js .reveal.is-grid>*{opacity:1!important;transform:none!important} .accordion-body{grid-template-rows:1fr!important} .tab-pane{display:block!important} .prevnext{display:none!important} } /* ---------- 法律说明页（隐私政策 / 使用条款） ---------- */ .legal{max-width:840px} .legal .breadcrumb{padding-top:0} .legal h1{font:800 clamp(32px,4.4vw,50px)/1.2 var(--display);letter-spacing:-.055em;margin:24px 0 12px;color:var(--navy)} .legal .section-kicker{margin:26px 0 0} .legal .legal-meta{font:12px var(--mono);color:var(--muted);margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line)} .legal-body h2{font:800 21px/1.45 var(--display);letter-spacing:-.02em;color:var(--navy);margin:40px 0 13px;padding-top:6px} .legal-body h3{font-size:16px;margin:24px 0 9px;color:var(--navy)} .legal-body p,.legal-body li{font-size:15px;line-height:2;color:#4a5a75} .legal-body p{margin:0 0 15px} .legal-body ul{padding-left:20px;margin:0 0 18px} .legal-body li{margin-bottom:8px} .legal-body a{color:var(--blue);border-bottom:1px solid #b9cde5;transition:border-color .2s ease} .legal-body a:hover{border-bottom-color:var(--blue)} .legal-body strong{color:var(--ink)} .legal-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px} .legal-toc a{font-size:12px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;color:#54627a;transition:.2s ease} .legal-toc a:hover{border-color:#9fc0e0;color:var(--blue);background:#fff} .legal-note{background:var(--paper);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:17px 19px;margin:0 0 30px} .legal-note p{margin:0;font-size:14px;line-height:1.95;color:#44546f} @media print{.legal-toc,.legal-note{break-inside:avoid}.legal-body h2{break-after:avoid}} /* ============================================================================ 模块切换器 —— platform.html「六个能力模块」 --------------------------------------------------------------------------- 原先这六张卡片只是静态展示：点不动、没有模块详情，从首页跳过来 （platform.html#device 之类）落到这里就断了。 现在卡片本身是 tab 按钮，点击后在下方展开该模块的详情面板。 ========================================================================== */ .module-switcher{margin-top:2px} .module-grid{gap:16px} /* 卡片改用