:root{
  --bg:#08090b; --bg2:#0f1215; --bg3:#14181d; --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --text:#ece8df; --muted:#9b968c; --dim:#6c685f; --gold:#cdae70; --gold2:#f1ddb0; --teal:#6cc0b3;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
::selection{background:rgba(205,174,112,.35)}

/* 顶部阅读进度条 */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--teal),var(--gold),var(--gold2));z-index:50}

/* 胶片颗粒 + 网格底纹 */
.grain{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

nav{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
nav.solid{background:rgba(8,9,11,.66);backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--serif);font-size:21px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.brand i{width:22px;height:22px;border:1px solid var(--gold);border-radius:50%;position:relative}
.brand i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.brand b{color:var(--gold);font-weight:600}
nav ul{display:flex;gap:34px;list-style:none;font-size:14px;color:var(--muted)}
nav ul a{position:relative;padding:4px 0;transition:color .3s}
nav ul a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav ul a:hover,nav ul a.on{color:var(--text)}
nav ul a:hover::after,nav ul a.on::after{transform:scaleX(1);transform-origin:left}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-size:15px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,color .35s;will-change:transform}
.btn-gold{background:linear-gradient(135deg,#e2c68c,#b38f4e);color:#1b150a;font-weight:600;box-shadow:0 10px 34px rgba(205,174,112,.28)}
.btn-gold::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.5s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.btn-gold:hover{box-shadow:0 14px 48px rgba(205,174,112,.42)}
.btn-ghost{border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2)}
.btn svg{width:16px;height:16px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
/* 首屏：粒子星图画布 + 逐字浮现 */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;text-align:center;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%,transparent 0,rgba(8,9,11,.55) 70%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.38em;color:var(--gold);border:1px solid rgba(205,174,112,.32);padding:7px 18px;border-radius:999px;margin-bottom:40px;background:rgba(205,174,112,.04)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.25}}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,7vw,92px);line-height:1.16;letter-spacing:.05em}
h1 .ch{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(6px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),filter 1.4s var(--ease)}
h1.go .ch{opacity:1;transform:none;filter:none}
h1 .gold{display:inline-block;background:linear-gradient(110deg,var(--gold2) 0%,var(--gold) 40%,#8a6d3a 60%,var(--gold2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:-250% 0}}
.lead{max-width:680px;margin:32px auto 48px;color:var(--muted);font-size:18px}
.cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.meta{margin-top:26px;font-size:13px;color:var(--dim);letter-spacing:.06em}
.scroll-hint{position:absolute;left:50%;bottom:34px;z-index:2;transform:translateX(-50%);width:22px;height:36px;border:1px solid var(--line2);border-radius:12px}
.scroll-hint::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;border-radius:2px;background:var(--gold);animation:wheel 1.8s infinite var(--ease)}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* 数字条 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:40px 28px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--serif);font-weight:500;font-size:44px;color:var(--gold2);line-height:1.1}
.stats span{font-size:13px;color:var(--muted)}
section{padding:130px 0;position:relative}
.sec-head{margin-bottom:64px;max-width:760px}
.sec-head .no{font-family:var(--mono);color:var(--gold);font-size:12px;letter-spacing:.3em;display:block;margin-bottom:18px}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,48px);letter-spacing:.04em;line-height:1.3}
.sec-head p{margin-top:18px;color:var(--muted);font-size:16px}

/* 模块详解：左文右图，交替排布 */
.module{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center;padding:72px 0;border-top:1px solid var(--line)}
.module:nth-child(even) .m-text{order:2}
.m-text .k{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--teal)}
.m-text h3{font-family:var(--serif);font-weight:500;font-size:32px;margin:12px 0 18px;letter-spacing:.04em}
.m-text>p{color:var(--muted);margin-bottom:24px}
.m-text ul{list-style:none;display:grid;gap:12px}
.m-text li{position:relative;padding-left:22px;font-size:15px;color:#c9c4b9}
.m-text li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--gold)}
.m-text li b{color:var(--text);font-weight:500}

/* 示意窗口（代替截图，纯 CSS） */
.mock{position:relative;border:1px solid var(--line2);border-radius:16px;background:linear-gradient(180deg,var(--bg3),var(--bg2));box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(205,174,112,.05) inset;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out}
.mock .bar{display:flex;gap:7px;padding:14px 16px;border-bottom:1px solid var(--line)}
.mock .bar i{width:10px;height:10px;border-radius:50%;background:#2a2f36}
.mock .bar i:first-child{background:#b8705f}.mock .bar i:nth-child(2){background:#c9a96a}.mock .bar i:nth-child(3){background:#5fae9f}
.mock .body{padding:24px;font-size:13px;min-height:280px}
.mock .glow{position:absolute;inset:-1px;pointer-events:none;border-radius:16px;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(205,174,112,.14),transparent 45%);opacity:0;transition:opacity .3s}
.mock:hover .glow{opacity:1}
.code{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:#b9b4a9}
.code .t{color:var(--teal)}.code .g{color:var(--gold2)}.code .d{color:var(--dim)}
.typed::after{content:"▍";color:var(--gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;margin:0 6px 8px 0;border:1px solid var(--line2);color:#cfcac0}
.pill.g{border-color:rgba(205,174,112,.45);color:var(--gold2)}.pill.t{border-color:rgba(108,192,179,.45);color:var(--teal)}
.barchart{display:grid;gap:10px;margin-top:8px}
.barchart div{display:grid;grid-template-columns:96px 1fr 34px;gap:12px;align-items:center;font-size:12px;color:var(--muted)}
.barchart s{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--gold));transform:scaleX(0);transform-origin:0;transition:transform 1.4s var(--ease)}
.on .barchart s{transform:scaleX(var(--w))}
.tree{font-size:12.5px;line-height:2;color:#c2bdb2}
.tree .lv1{padding-left:18px}.tree .lv2{padding-left:36px;color:var(--muted)}
.tree span{color:var(--gold)}
/* 横向流程：滚动时金线逐段点亮 */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.flow::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--line2)}
.flow::after{content:"";position:absolute;left:0;top:15px;height:1px;width:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transform-origin:0;transform:scaleX(var(--fp,0));transition:transform .2s linear}
.step{position:relative;padding-top:48px}
.step::before{content:attr(data-n);position:absolute;top:0;left:0;width:31px;height:31px;border-radius:50%;background:var(--bg);border:1px solid var(--gold);color:var(--gold);font-family:var(--mono);font-size:12px;display:grid;place-items:center;z-index:1}
.step h4{font-family:var(--serif);font-weight:500;font-size:19px;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted)}

/* 原则（三条承诺） */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.principles article{background:var(--bg2);padding:40px 34px;transition:background .5s}
.principles article:hover{background:var(--bg3)}
.principles .ico{width:44px;height:44px;border-radius:12px;border:1px solid rgba(205,174,112,.35);display:grid;place-items:center;color:var(--gold);margin-bottom:24px}
.principles h3{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:10px}
.principles p{font-size:14.5px;color:var(--muted)}

/* 常见问题 */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;align-items:center;font-size:17px;font-family:var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-family:var(--mono);font-size:20px;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 26px;max-width:820px;animation:fadeDown .5s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}}

/* 下载卡 */
.dl{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:56px;padding:60px;border-radius:24px;border:1px solid rgba(205,174,112,.28);overflow:hidden;
  background:radial-gradient(700px 320px at 0% 0%,rgba(205,174,112,.13),transparent 60%),radial-gradient(500px 300px at 100% 100%,rgba(108,192,179,.08),transparent 60%),var(--bg2)}
.dl::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(205,174,112,.18) 80%,transparent 90%);animation:spin 12s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(1turn)}}
.dl>*{position:relative}
.spec div{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec div span:first-child{color:var(--muted)}
.hash{font-family:var(--mono);font-size:11.5px;word-break:break-all;color:#7f7a70;margin-top:18px;cursor:pointer}
.hash:hover{color:var(--gold2)}
.note{margin-top:26px;font-size:13px;color:#8a8478;border-left:2px solid var(--gold);padding-left:14px}

footer{padding:56px 0;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* 滚动显现（只在 JS 可用时隐藏） */
.js .reveal{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.on{opacity:1;transform:none;filter:none}

@media (max-width:900px){
  .module,.principles,.dl,.stats{grid-template-columns:1fr}.module:nth-child(even) .m-text{order:0}
  .flow{grid-template-columns:1fr}.flow::before,.flow::after{display:none}
  .dl{padding:36px}nav ul{display:none}.stats div{border-right:0;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,h1 .ch{opacity:1;transform:none;filter:none}html{scroll-behavior:auto}#field{display:none}
}

/* 真实截图：固定视窗高度，长图在框内上下滚动 */
.mock .glow{pointer-events:none}
.mock .bar span{margin-left:10px;font-size:11.5px;color:var(--dim);letter-spacing:.05em}
.shot{position:relative;max-height:440px;overflow-y:auto;overscroll-behavior:contain;background:#0d0f12;
  scrollbar-width:thin;scrollbar-color:rgba(205,174,112,.45) transparent}
.shot::-webkit-scrollbar{width:8px}.shot::-webkit-scrollbar-thumb{background:rgba(205,174,112,.4);border-radius:8px}
.shot img{display:block;width:100%;height:auto}
.shot.tall::after{content:"↓ 滚动查看";position:sticky;display:block;bottom:0;margin-top:-56px;height:56px;padding-top:26px;
  text-align:center;font-size:12px;letter-spacing:.2em;color:var(--gold2);
  background:linear-gradient(transparent,rgba(13,15,18,.95));pointer-events:none;transition:opacity .4s}
.shot.tall.scrolled::after{opacity:0}

/* 金色标题：整行柔和浮现 + 遮罩从左向右扫开 */
.js h1 .gold{opacity:0;transform:translateY(.22em);filter:blur(10px);
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 60%);mask-image:linear-gradient(90deg,#000 45%,transparent 60%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:opacity 1.6s var(--ease) var(--gd,.6s),transform 1.8s var(--ease) var(--gd,.6s),filter 1.6s var(--ease) var(--gd,.6s),
    -webkit-mask-position 2.2s var(--ease) var(--gd,.6s),mask-position 2.2s var(--ease) var(--gd,.6s)}
.js h1.go .gold{opacity:1;transform:none;filter:none;-webkit-mask-position:0 0;mask-position:0 0}

/* 截图：给图更大的地盘，去掉 3D 倾斜（倾斜会让文字被栅格化而发糊） */
.module.has-shot{grid-template-columns:.8fr 1.4fr;gap:56px}
.mock.has-shot{transform:none!important;transform-style:flat}
.shot{max-height:560px;cursor:zoom-in}
.shot img{image-rendering:auto}
/* 点击放大：按原始像素 1:1 查看 */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,6,8,.92);backdrop-filter:blur(6px);display:flex;justify-content:center;
  overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);cursor:zoom-out;padding:48px 24px}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{width:auto;max-width:min(100%,1400px);height:auto;align-self:flex-start;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lightbox .close{position:fixed;top:18px;right:24px;color:var(--muted);font-size:13px;letter-spacing:.2em}
@media (max-width:860px){.module.has-shot{grid-template-columns:1fr}}

/* 首屏品牌名（SEO + 让访客一眼知道产品叫什么） */
.brandline{margin:22px 0 -14px;font-family:var(--serif);font-size:16px;letter-spacing:.22em;color:var(--gold2)}