/* DLM 公开页面共用样式:配色(夜间 / 白天)、顶栏、按钮、浮动提示、进场、章节、页脚。
   产品主页与工作原理页共用这一份,切换页面时观感一致。页面专属样式写在各页里。 */
:root{
  --bg:#08090b;--bg2:#0d0f12;--card:#111318;--fg:#f3f4f6;--fg2:#c4c9d1;--mute:#9097a1;--dim:#5d636c;--strong:#fff;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);--soft:rgba(255,255,255,.05);
  --brand:#182850;--acc:#5a78c8;--acc2:#a9bbe8;--btn:#2a438a;--btn-h:#34519f;--ok:#34d399;--bad:#f87171;--warn:#fbbf24;
  --pri-bg:#2a438a;--pri-fg:#fff;--pri-hover:#34519f;
  --stage1:#0e1116;--stage2:#08090b;--glow:rgba(90,120,200,.22);
  --plate:rgba(255,255,255,.025);--plate-s:rgba(255,255,255,.16);--side:rgba(255,255,255,.035);
  --lbl:#6b717a;--sl:#4d535b;--grid:rgba(169,187,232,.5);--node:#111318;
  --tip-bg:rgba(20,22,27,.86);--tip-fg:#e8ebf0;--g1:#7d97da;--g2:#c3d0f0;
  --sans:"RD Latin","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
  --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
  --mono:"RD Mono","SF Mono",Menlo,Consolas,monospace;
}
[data-theme="light"]{
  --bg:#f6f6f3;--bg2:#ffffff;--card:#ffffff;--fg:#0c0d10;--fg2:#3b4049;--mute:#666c75;--dim:#9a9fa7;--strong:#000;
  --line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.16);--soft:rgba(0,0,0,.035);
  --acc:#182850;--acc2:#2a438a;--btn:#182850;--btn-h:#24407f;
  --pri-bg:#182850;--pri-fg:#fff;--pri-hover:#24407f;
  --stage1:#ffffff;--stage2:#f1f1ed;--glow:rgba(24,40,80,.10);
  --plate:rgba(0,0,0,.02);--plate-s:rgba(0,0,0,.18);--side:rgba(0,0,0,.05);
  --lbl:#8b9098;--sl:#a2a7ae;--grid:rgba(24,40,80,.35);--node:#fff;
  --tip-bg:rgba(255,255,255,.9);--tip-fg:#1a1d22;--g1:#182850;--g2:#3d5fae;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
html[data-theme="light"]{background:linear-gradient(180deg,#ffffff 0%,#f3f3ef 60%,#efefea 100%) fixed}
[data-theme="light"] body{background:transparent}

body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s,color .5s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
@keyframes fade{to{opacity:1}}
@keyframes breathe{50%{opacity:.6;transform:translateX(-50%) scale(1.08)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}80%,100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}
@keyframes line-up{to{transform:none}}
@keyframes sweep{to{transform:scaleX(1)}}

/* 顶栏(结构来自 site-nav.css,这里只换配色) */
.snav{background:color-mix(in srgb,var(--bg) 72%,transparent)!important;border-bottom-color:var(--line)!important;color:var(--fg)!important}
.snav-links{color:var(--mute)!important}
.snav-links a:hover,.snav-links a[aria-current="page"]{color:var(--fg)!important}
.snav-enter{margin-left:12px!important;background:var(--btn)!important;transition:background .2s}
.snav-enter:hover{background:var(--btn-h)!important}
.snav-links a[aria-current="page"]::after{background:var(--acc2)!important}
.snav-w{max-width:1360px!important}
.tg{margin-left:auto;position:relative;width:62px;height:32px;border-radius:999px;border:1px solid var(--line2);background:var(--soft);cursor:pointer;flex:none;padding:0}
.tg i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--fg);transition:transform .45s cubic-bezier(.5,1.6,.4,1),background .4s;display:grid;place-items:center}
.tg svg{width:14px;height:14px;stroke:var(--bg);fill:none;stroke-width:2;stroke-linecap:round}
.tg .sun{display:none}
[data-theme="light"] .tg i{transform:translateX(30px)}
[data-theme="light"] .tg .sun{display:block}[data-theme="light"] .tg .moon{display:none}
.tg b{position:absolute;top:50%;transform:translateY(-50%);font:500 10px var(--mono);color:var(--dim);letter-spacing:.04em}
.tg b.l{right:8px}.tg b.r{left:9px;opacity:0}
[data-theme="light"] .tg b.l{opacity:0}[data-theme="light"] .tg b.r{opacity:1}

/* 通用 */
.w{max-width:1200px;margin:0 auto;padding:0 32px}
.idx{font:500 13px/1 var(--mono);color:var(--acc2);letter-spacing:.06em}
.mute{color:var(--mute)}
.note{font-size:12px;color:var(--dim)}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:500;cursor:pointer;border:0;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.btn.pri{background:var(--pri-bg);color:var(--pri-fg)}
.btn.pri:hover{background:var(--pri-hover)}
.btn.ghost{border:1px solid var(--line2);background:transparent;color:var(--fg)}
.btn.ghost:hover{border-color:var(--fg)}
.btn .ar{font-family:var(--mono);transition:transform .25s}
.btn:hover .ar{transform:translateX(3px)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
dfn{font-style:normal;border-bottom:1px dashed color-mix(in srgb,var(--acc2) 60%,transparent);cursor:help;transition:color .2s,border-color .2s}
dfn:hover{color:var(--strong);border-bottom-color:var(--acc2)}
.spot{position:relative;overflow:hidden;--mx:50%;--my:50%}
.spot::after{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--acc) 13%,transparent),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.spot:hover::after{opacity:1}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border:1px solid var(--line2);border-radius:999px;font:500 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--mute)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.eyebrow i.live{background:var(--ok);animation:ping 2s infinite}
.seg{display:inline-flex;flex-wrap:wrap;padding:3px;border-radius:999px;border:1px solid var(--line2);background:var(--soft)}
.seg button{height:32px;padding:0 15px;border-radius:999px;border:0;background:transparent;font-size:13.5px;color:var(--mute);cursor:pointer;transition:background .25s,color .25s}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--fg);color:var(--bg)}

/* 标语:大字、逐行升起、重点词渐变加下划线 */
.slogan{margin:30px 0 0;font-size:clamp(40px,6.4vw,92px);line-height:1.14;font-weight:600;letter-spacing:-.005em}
.slogan .ln{display:block;overflow:hidden;padding:.06em 0 .1em}
.slogan .ln>span{display:inline-block;transform:translateY(110%);animation:line-up 1.1s cubic-bezier(.2,.75,.15,1) forwards}
.slogan .ln:nth-child(2)>span{animation-delay:.14s}
.slogan em{position:relative;display:inline-block;font-style:normal;background:linear-gradient(100deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent;cursor:help;transition:filter .3s}
.slogan em::after{content:"";position:absolute;left:.04em;right:.04em;bottom:.02em;height:.06em;border-radius:.05em;background:linear-gradient(90deg,var(--g1),var(--g2));transform:scaleX(0);transform-origin:left;animation:sweep .9s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(1s + var(--d,0) * .18s)}
.slogan em.hot{filter:drop-shadow(0 0 .22em color-mix(in srgb,var(--g1) 60%,transparent))}
.dlm{display:flex;align-items:center;justify-content:center;gap:16px;margin:24px 0 0;font-size:clamp(20px,2.3vw,30px);font-weight:500;color:var(--fg2);letter-spacing:.06em;opacity:0;animation:fade 1s .7s forwards}
.dlm::before,.dlm::after{content:"";width:clamp(28px,5vw,64px);height:1px;background:linear-gradient(90deg,transparent,var(--line2))}
.dlm::after{transform:scaleX(-1)}
.dlm b{font-weight:600;color:var(--strong);margin-left:.15em}
.glowtop{position:relative;overflow:hidden}
.glowtop::before{content:"";position:absolute;left:50%;top:-260px;width:1100px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent 70%);pointer-events:none;animation:breathe 8s ease-in-out infinite}

/* 浮动提示 */
.tip{position:fixed;left:0;top:0;z-index:200;max-width:300px;padding:12px 14px;border-radius:12px;background:var(--tip-bg);color:var(--tip-fg);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);font-size:13.5px;line-height:1.65;pointer-events:none;opacity:0;transition:opacity .18s,scale .18s;scale:.96}
.tip.on{opacity:1;scale:1}
.tip b{display:block;font-size:14px;margin-bottom:3px;color:var(--strong)}
.tip b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--acc);margin:0 8px 2px 0}

/* 章节 */
.sec{padding:150px 0 0}
.sec .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.sec h2{margin:14px 0 0;font-size:clamp(32px,4vw,54px);line-height:1.2;font-weight:600}
.sec .hd p{margin:0;max-width:440px;color:var(--mute);font-size:15.5px}
.sec h3{margin:64px 0 18px;font-size:22px;font-weight:600}

/* 结尾与页脚 */
.end{position:relative;margin-top:130px;padding:120px 0 110px;text-align:center;border-top:1px solid var(--line);overflow:hidden}
.end::before{content:"";position:absolute;left:50%;bottom:-320px;width:1100px;height:640px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent 70%);animation:breathe 8s ease-in-out infinite}
.end h2{position:relative;margin:0;font-size:clamp(34px,5vw,68px)}
.end .dlm{opacity:1;animation:none}
.end .cta{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.endsl .ln>span{animation:none;transform:none}.endsl em::after{animation:none;transform:scaleX(1)}
.foot{border-top:1px solid var(--line);padding:28px 0;font-size:13px;color:var(--dim)}
.foot .w{max-width:1360px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.foot .w span:first-child{margin-right:auto}
.foot a:hover{color:var(--fg)}
.foot .legal{margin-top:10px;font-size:12px;gap:8px 22px}
.foot .legal span:first-child{margin-right:0}

@media (max-width:640px){
  .w{padding:0 20px}
  .slogan{font-size:8.6vw}
  .end h2{font-size:8.2vw}
  .dlm{gap:10px}
  .sec{padding-top:110px}
  .foot .w span:first-child{width:100%}
  .tg b{display:none}.tg{width:54px}[data-theme="light"] .tg i{transform:translateX(22px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
}
