/* poezy.cc 视觉增强层（2026-10 改版）
   天赋树版块导航 · 金环回到顶部 · 魔镜彩蛋（撒花）· 火星粒子 · 流光边框 · 鼠标光斑 · 按钮扫光 · 鎏金扫光 · 数字滚动
   - 纯"加法"：不改 guide.css / 教程页内联样式；去掉本文件和 /js/fx.js 的两行引用即可回到旧版
   - 首页 <body class="pg-home">，教程页 <body class="pg-tut">；两页通用的效果不加前缀
   - 动效全部尊重系统「减少动态效果」设置；手机端自动降级（不跑光斑、不显示版块导航和魔镜彩蛋） */

/* 流光边框用的角度变量（不支持 @property 的旧浏览器边框静止不转，不影响显示） */
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fxSpin{to{--fx-a:360deg}}
@keyframes fxRot{to{transform:rotate(360deg)}}

/* ==================== 通用：主按钮扫光 ==================== */
.hero-btn-primary,.btn-buy,.price-cta.solid,.lib-portal-btn,.pg-tut .btn-primary,.pg-tut .cta-btn-primary{
    position:relative;overflow:hidden;isolation:isolate}
.hero-btn-primary::after,.btn-buy::after,.price-cta.solid::after,.lib-portal-btn::after,
.pg-tut .btn-primary::after,.pg-tut .cta-btn-primary::after{
    content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:38%;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
    transform:translateX(-160%) skewX(-20deg);animation:fxSweep 4.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes fxSweep{0%,58%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(330%) skewX(-20deg)}}
.btn-buy::after{animation-delay:1.3s}
.price-cta.solid::after{animation-delay:.7s}
.lib-portal-btn::after{animation-delay:2s}
/* 首屏「立即购买」：呼吸光圈 */
.pg-home .hero-btn-primary{animation:fxPulse 2.6s ease-in-out infinite}
@keyframes fxPulse{
    0%,100%{box-shadow:0 6px 30px rgba(217,58,31,.4),0 0 0 0 rgba(255,106,61,.5)}
    60%{box-shadow:0 8px 38px rgba(217,58,31,.55),0 0 0 11px rgba(255,106,61,0)}}

/* ==================== 通用：鎏金标题扫光（一道高光每隔几秒从左扫到右） ==================== */
.hero h1.goldtext,.sec-title.goldtext,.fxs-title.goldtext,.more-head .mh-title,
.price-card.featured .price-amount .val,.pg-tut .page-title,.pg-tut .cta-section h2{
    background-image:linear-gradient(100deg,transparent 40%,rgba(255,251,232,.95) 50%,transparent 60%),
                     linear-gradient(180deg,#ffe9a8 0%,#f5c86a 34%,#d99a2b 62%,#a86a18 100%);
    background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:150% 0,0 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:fxGleam 7s ease-in-out infinite}
.sec-title.goldtext,.fxs-title.goldtext{animation-delay:1.2s}
.price-card.featured .price-amount .val{animation-delay:2.4s}
@keyframes fxGleam{0%,60%{background-position:150% 0,0 0}100%{background-position:-50% 0,0 0}}

/* ==================== 通用：鼠标跟随光斑（只在鼠标设备上生效，手机不跑） ==================== */
.fxp-cat,.cmp-acc,.pg-tut .nav-card,.pg-tut .faq-item,.pg-tut .restore-card,.pg-tut .dl-card{position:relative}
@media (hover:hover) and (pointer:fine){
    .fx-spot{isolation:isolate}
    /* z-index:-1 + isolation：光斑画在卡片背景之上、文字之下，不影响阅读 */
    .fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
        opacity:0;transition:opacity .35s ease;
        background:radial-gradient(440px circle at var(--fx-x,50%) var(--fx-y,50%),var(--fx-glow,rgba(255,196,100,.12)),transparent 62%)}
    .fx-spot:hover::after{opacity:1}
    .cert-card.fx-spot,.lib-card.ac4.fx-spot{--fx-glow:rgba(70,217,150,.12)}
    .tc-cyan.fx-spot,.lib-card.ac3.fx-spot{--fx-glow:rgba(76,201,229,.12)}
    .lib-card.ac1.fx-spot,.lib-hero-card.fx-spot{--fx-glow:rgba(255,106,61,.12)}
}

/* ==================== 首页：修复卡片悬停上浮 ====================
   原 :hover{transform:translateY(..)} 一直被入场动画的 .animate-in.visible{transform:translateY(0)} 覆盖，从没生效过；
   改用独立的 translate 属性，和入场动画的 transform 互不干扰 */
.trade-card.animate-in,.price-card.animate-in,.lib-card.animate-in,.more-card.animate-in{
    transition:opacity .7s ease,transform .7s ease,translate .35s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .35s ease}
.trade-card.animate-in.visible:hover,.lib-card.animate-in.visible:hover{translate:0 -5px}
.price-card.animate-in.visible:hover{translate:0 -6px}
.more-card.animate-in.visible:hover{translate:0 -3px}
/* 终身买断：恢复设计里的「微放大」（同样被入场动画覆盖了），并和其它卡一起上滑入场 */
.price-card.featured.animate-in{transform:translateY(26px) scale(1.035)}
.price-card.featured.animate-in.visible,.price-card.featured.animate-in.visible:hover{transform:scale(1.035)}
/* 同一排卡片依次入场（只延迟入场，不延迟悬停） */
.trade-grid>.animate-in:nth-child(2),.pricing-grid>.animate-in:nth-child(2),.lib-grid>.animate-in:nth-child(2),
.more-list>.animate-in:nth-child(2n){transition-delay:.09s,.09s,0s,0s,0s}
.trade-grid>.animate-in:nth-child(3),.pricing-grid>.animate-in:nth-child(3),.lib-grid>.animate-in:nth-child(3){transition-delay:.18s,.18s,0s,0s,0s}
.lib-grid>.animate-in:nth-child(4){transition-delay:.27s,.27s,0s,0s,0s}

/* ==================== 首页：终身买断流光边框 + 首屏轮播流光边框 ==================== */
.price-card.featured::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius) + 2px);padding:2px;pointer-events:none;
    background:conic-gradient(from var(--fx-a),rgba(255,233,168,0) 0deg 200deg,#ffe9a8 285deg,#ff8a4c 325deg,rgba(255,233,168,0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
    animation:fxSpin 4.5s linear infinite}
.fx-ring{position:absolute;inset:0;border-radius:13px;padding:1.5px;z-index:6;pointer-events:none;
    background:conic-gradient(from var(--fx-a),transparent 0deg 250deg,rgba(255,233,168,.95) 300deg,rgba(255,138,76,.8) 330deg,transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
    animation:fxSpin 6s linear infinite}

/* ==================== 首页：卡片顶部细线流光 ==================== */
.trade-card::before,.lib-card::before,.lib-hero-card::before,.lib-sb::before{
    background-size:200% 100%;background-repeat:repeat-x;animation:fxFlow 3.6s linear infinite}
.lib-card:nth-child(2)::before{animation-delay:-.9s}
.lib-card:nth-child(3)::before{animation-delay:-1.8s}
.lib-card:nth-child(4)::before{animation-delay:-2.7s}
@keyframes fxFlow{from{background-position:0 0}to{background-position:-200% 0}}

/* ==================== 首页：导航（悬停下划线 + 当前版块高亮） ==================== */
.pg-home .nav-menu a{position:relative}
.pg-home .nav-menu a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,#f3c65f,#ff6a3d);transition:left .3s ease,right .3s ease}
.pg-home .nav-menu a:hover::after,.pg-home .nav-menu a.fx-on::after{left:13px;right:13px}
.pg-home .nav-menu a.fx-on{color:var(--gold-hi)}

/* ==================== 火星粒子（首页放在「服务保障」，教程页放在顶部） ==================== */
.fx-embers{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* 首屏背景图极慢推近，画面有呼吸感（只在桌面端，幅度很小不抢注意力） */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
    .pg-home .hero-bg{animation:fxKen 28s ease-in-out infinite alternate;transform-origin:42% 22%}
    @keyframes fxKen{from{transform:scale(1)}to{transform:scale(1.07)}}
}

/* ==================== 首页：版块小标题（菱形饰线） ==================== */
.pg-home .sec-label{display:flex;align-items:center;justify-content:center;gap:10px}
.pg-home .sec-label::before,.pg-home .sec-label::after{content:"";flex:none;width:clamp(26px,5vw,64px);height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,106,61,.75))}
.pg-home .sec-label::after{background:linear-gradient(270deg,transparent,rgba(255,106,61,.75))}
.fx-dia{flex:none;width:6px;height:6px;transform:rotate(45deg);border:1px solid rgba(255,140,90,.9);box-shadow:0 0 8px rgba(255,106,61,.5)}
/* 版块分隔线：正中加一颗发光菱形 */
.pg-home .divider{position:relative;z-index:2;overflow:visible}
.pg-home .divider::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-4px 0 0 -4px;transform:rotate(45deg);
    background:var(--bg);border:1px solid rgba(229,181,76,.65);box-shadow:0 0 12px rgba(229,181,76,.4)}

/* ==================== 首页：右侧「天赋树」版块导航（宽屏才显示） ====================
   每个版块是一个天赋节点：走过的版块点亮，当前版块金色核心 + 一团柔光，节点之间的连线随滚动充能；
   悬停 / 切换版块时左侧弹出名称牌 */
.fx-tree{--n:32px;--g:24px;position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:900;
    display:flex;flex-direction:column;gap:var(--g)}
.fx-tree-path{position:absolute;left:50%;top:calc(var(--n) / 2);bottom:calc(var(--n) / 2);width:2px;margin-left:-1px;pointer-events:none;
    background:repeating-linear-gradient(180deg,rgba(201,154,60,.38) 0 4px,transparent 4px 9px)}
.fx-tree-path i{position:absolute;left:0;top:0;width:100%;height:var(--fx-fill,0px);border-radius:2px;
    background:linear-gradient(180deg,#8a5a14,#f3c65f 55%,#ffe9a8);
    box-shadow:0 0 8px rgba(255,190,80,.7),0 0 16px rgba(255,170,60,.3);transition:height .3s ease-out}
.fx-tree-path i::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;
    background:#fff6d8;box-shadow:0 0 8px 2px rgba(255,214,140,.85)}
.fx-node{position:relative;display:grid;place-items:center;width:var(--n);height:var(--n);text-decoration:none;
    color:rgba(214,186,130,.4);transition:color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.fx-node svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:filter .3s ease}
.fx-node .n-ring{fill:#100c08;stroke:rgba(201,154,60,.4);stroke-width:1.3;transition:stroke .3s ease,fill .3s ease}
.fx-node>i{position:relative;font-size:12px}
.fx-node.done{color:#e8c477}
.fx-node.done .n-ring{stroke:#c99a3c;fill:#1b1309}
.fx-node.on{color:#2a1703;transform:scale(1.12)}
.fx-node.on .n-ring{fill:url(#fxNodeCore);stroke:#ffe9b0;stroke-width:1.5}
.fx-node.on svg{filter:drop-shadow(0 0 6px rgba(255,200,100,.75))}
/* 当前节点背后一团呼吸的柔光（不画线圈） */
.fx-node.on::before{content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;z-index:-1;
    background:radial-gradient(circle,rgba(255,200,100,.42) 0%,rgba(255,170,60,.14) 45%,transparent 70%);
    animation:fxNodeGlow 2.6s ease-in-out infinite}
@keyframes fxNodeGlow{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.fx-node:not(.on):hover{color:#ffe2a0}
.fx-node:not(.on):hover .n-ring{stroke:#ffe2a0}
.fx-node:focus-visible{outline:none}
.fx-node:focus-visible svg{filter:drop-shadow(0 0 5px #ffe2a0)}
/* 名称牌：像游戏里的物品提示框 */
.fx-tip{position:absolute;right:calc(100% + 16px);top:50%;display:flex;align-items:baseline;gap:8px;white-space:nowrap;pointer-events:none;
    padding:7px 14px 7px 12px;border-radius:8px;background:linear-gradient(180deg,rgba(30,22,12,.97),rgba(13,10,6,.97));
    border:1px solid rgba(229,181,76,.5);box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,233,168,.1);
    opacity:0;transform:translate(8px,-50%);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.fx-tip::after{content:"";position:absolute;right:-5px;top:50%;width:8px;height:8px;margin-top:-4px;transform:rotate(45deg);
    background:#15100a;border-top:1px solid rgba(229,181,76,.5);border-right:1px solid rgba(229,181,76,.5)}
.fx-tip b{font-size:13px;font-weight:800;color:#ffe9b0}
.fx-tip small{font-size:9.5px;font-weight:700;letter-spacing:.2em;color:#a4957e}
.fx-node:hover .fx-tip,.fx-node:focus-visible .fx-tip,.fx-node.peek .fx-tip{opacity:1;transform:translate(0,-50%)}
@media (max-width:1359px),(max-height:640px){.fx-tree{display:none}}

/* ==================== 通用：回到顶部 = 金色细圆环（随阅读进度绕一圈，前端一颗光点，不显示数字） ==================== */
.back-to-top.fx-btt{width:52px;height:52px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:#f3c65f;
    background:radial-gradient(circle at 50% 40%,#2b2012 0%,#151009 60%,#0b0806 100%);
    box-shadow:0 10px 28px rgba(0,0,0,.55),inset 0 0 0 1px rgba(229,181,76,.14);-webkit-backdrop-filter:none;backdrop-filter:none}
.back-to-top.fx-btt>i{display:none}
.fx-btt-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fx-btt .bt-track{fill:none;stroke:rgba(229,181,76,.16);stroke-width:1.5}
.fx-btt .bt-arc{fill:none;stroke:url(#fxBttG);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(255,200,100,.6))}
.fx-btt .bt-head{fill:#fff4d0;filter:drop-shadow(0 0 4px rgba(255,214,140,.95));transition:opacity .3s ease}
.fx-btt-chev{position:relative;width:20px;height:20px;fill:none;stroke:#f3c65f;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
    overflow:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fx-btt-chev .c2{opacity:.32;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.back-to-top.fx-btt:hover{transform:translateY(-3px);background:radial-gradient(circle at 50% 40%,#3a2b14 0%,#1a130a 60%,#0b0806 100%);
    box-shadow:0 14px 34px rgba(0,0,0,.6),inset 0 0 0 1px rgba(229,181,76,.3),0 0 22px rgba(243,198,95,.25)}
.back-to-top.fx-btt:hover .fx-btt-chev{transform:translateY(-3px)}
.back-to-top.fx-btt:hover .fx-btt-chev .c2{opacity:.85;transform:translateY(-1px)}
.back-to-top.fx-btt.full{box-shadow:0 10px 28px rgba(0,0,0,.55),inset 0 0 0 1px rgba(229,181,76,.3),0 0 20px rgba(243,198,95,.35)}

/* ==================== 魔镜彩蛋（电脑端）：游戏里的「卡兰德的魔镜」每 2 秒跳到屏幕上另一个随机位置，
   固定在屏幕上、滚动不影响；点中后在点击处撒花 + 弹出掉宝提示 ==================== */
.fx-mirror{position:fixed;z-index:980;width:42px;height:42px;padding:0;border:0;background:none;cursor:pointer;
    opacity:0;transition:opacity .18s ease;-webkit-tap-highlight-color:transparent}
.fx-mirror.in{opacity:1}
.fx-mirror img{position:relative;z-index:1;display:block;width:42px;height:42px;pointer-events:none;-webkit-user-select:none;user-select:none;
    -webkit-user-drag:none;filter:drop-shadow(0 3px 7px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(232,162,60,.4));transition:transform .2s ease}
.fx-mirror.in img{animation:fxMirIn .4s cubic-bezier(.34,1.56,.64,1)}
.fx-mirror-glow{position:absolute;inset:-12px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(255,196,100,.42) 0%,rgba(232,162,60,.14) 45%,transparent 70%);animation:fxMirGlow 2.2s ease-in-out infinite}
@keyframes fxMirIn{0%{transform:scale(.4) rotate(-30deg);opacity:0}60%{transform:scale(1.18) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes fxMirGlow{0%,100%{opacity:.5}50%{opacity:1}}
.fx-mirror:hover img{transform:scale(1.15)}
.fx-mirror:focus-visible{outline:2px solid #ffe2a0;outline-offset:6px;border-radius:50%}
/* 撒花画布（点中时临时铺满屏幕，播完自动移除） */
.fx-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:1099;pointer-events:none}
/* 掉宝提示：不要边框底板，只留魔镜 + 祝福语，浮在点击处上方；
   文字带深色描边和一团很淡的暗晕（没有边线），压在任何背景上都看得清 */
.fx-pop{position:fixed;z-index:1100;display:flex;align-items:center;gap:12px;pointer-events:none;white-space:nowrap;
    opacity:0;transform:scale(.5) translateY(14px);transform-origin:50% 100%;
    transition:opacity .2s ease,transform .55s cubic-bezier(.2,1.6,.4,1)}
.fx-pop::before{content:"";position:absolute;inset:-20px -30px;z-index:-1;border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(8,6,4,.6) 0%,rgba(8,6,4,.32) 48%,transparent 72%)}
.fx-pop.below{transform-origin:50% 0;transform:scale(.5) translateY(-14px)}
.fx-pop.on{opacity:1;transform:none}
.fx-pop.off{opacity:0;transform:translateY(-12px);transition:opacity .35s ease,transform .35s ease}
.fx-pop-icon{position:relative;flex:none;width:46px;height:46px}
/* 背后一团很淡的暖光（不放射光芒） */
.fx-pop-icon::before{content:"";position:absolute;inset:-12px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(255,214,140,.34) 0%,rgba(255,180,80,.1) 48%,transparent 70%)}
.fx-pop-icon img{position:relative;z-index:1;width:46px;height:46px;display:block;
    filter:drop-shadow(0 0 6px rgba(255,214,140,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.6))}
/* 镜面反光：一道白光从镜子上斜着扫过，用魔镜图本身做遮罩，只亮在镜子上（遮罩图由 fx.js 内联设置） */
.fx-pop-glint{position:absolute;inset:0;z-index:2;pointer-events:none;
    -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.9) 48%,rgba(255,250,230,.35) 54%,transparent 64%);
    background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0;
    animation:fxGlint 1.9s cubic-bezier(.4,0,.2,1) .25s 2 both}
@keyframes fxGlint{0%{background-position:160% 0}62%,100%{background-position:-60% 0}}
/* 三颗小星光轮流闪 */
.fx-pop-tw{position:absolute;z-index:3;width:12px;height:12px;pointer-events:none;background:#fff6dc;
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    filter:drop-shadow(0 0 3px rgba(255,214,140,.95));opacity:0;animation:fxTwinkle 1.5s ease-in-out infinite}
.fx-pop-tw.a{right:-5px;top:-4px}
.fx-pop-tw.b{left:-7px;top:16px;width:8px;height:8px;animation-delay:.5s}
.fx-pop-tw.c{right:2px;bottom:-5px;width:9px;height:9px;animation-delay:1s}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:.2;transform:scale(.5) rotate(70deg)}}
.fx-pop-msg{font-size:16px;font-weight:800;line-height:1.5;letter-spacing:.02em;color:#fff5e0;
    text-shadow:0 0 2px rgba(0,0,0,.95),0 2px 4px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.75)}
.fx-pop-msg em{font-style:normal;color:#ffc94d;
    text-shadow:0 0 2px rgba(0,0,0,.95),0 2px 4px rgba(0,0,0,.9),0 0 14px rgba(232,162,60,.55)}

/* ==================== 首页：效果对比（拖动钮发光；展开时自动演示，由 fx.js 驱动） ==================== */
.compare-line{box-shadow:0 0 12px rgba(243,198,95,.8)}
.compare-btn{animation:fxKnob 2.4s ease-in-out infinite}
@keyframes fxKnob{0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 0 rgba(243,198,95,.55)}
    60%{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 10px rgba(243,198,95,0)}}

/* ==================== 首页：其它细节 ==================== */
.ward-points li i{transition:box-shadow .3s ease,border-color .3s ease,transform .3s ease}
.ward-points li:hover i{border-color:var(--gold);box-shadow:0 0 18px rgba(229,181,76,.35);transform:translateY(-2px)}
.footer{position:relative;border-top-color:transparent}
.footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(229,181,76,.55),transparent)}
.pg-home .mobile-nav.open{animation:fxDrawer .28s cubic-bezier(.2,.8,.2,1)}
@keyframes fxDrawer{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ==================== 首页：平板 / 手机 ==================== */
@media (max-width:1024px){
    /* 原来背景图按宽度缩成一条，手机上能看到图片底边一道硬线；改为铺满顶部区域再渐隐进底色 */
    .pg-home .hero-bg{bottom:auto;height:clamp(380px,112vw,680px);background-size:cover;background-position:30% top}
    .pg-home .hero-bg::after{background:linear-gradient(180deg,rgba(10,8,6,.45) 0%,rgba(10,8,6,.58) 48%,var(--bg) 100%)}
}
@media (max-width:600px){
    /* 点锚点跳转时，版块小标题不再被固定导航栏挡住 */
    .pg-home .section{scroll-margin-top:12px}
    .price-card.featured.animate-in{transform:translateY(26px)}
    .price-card.featured.animate-in.visible,.price-card.featured.animate-in.visible:hover{transform:none}
    .mbuy::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
        background:linear-gradient(90deg,transparent,#f3c65f,transparent)}
    .back-to-top.fx-btt{width:46px;height:46px}
    .fx-btt-chev{width:18px;height:18px}
}

/* ==================== 教程页 ==================== */
/* 头部：加大留白 + 顶部金色光晕 */
.pg-tut .page-hero{padding:4.4rem 1.5rem 2.8rem;overflow:hidden;
    background:radial-gradient(ellipse 55% 80% at 50% 0%,rgba(229,181,76,.15) 0%,transparent 70%),
               linear-gradient(180deg,rgba(229,181,76,.06) 0%,transparent 100%)}
.pg-tut .pt-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;
    font-size:12px;font-weight:800;letter-spacing:.3em;color:#ff7a4d}
.pg-tut .pt-eyebrow::before,.pg-tut .pt-eyebrow::after{content:"";width:clamp(24px,5vw,56px);height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,106,61,.75))}
.pg-tut .pt-eyebrow::after{background:linear-gradient(270deg,transparent,rgba(255,106,61,.75))}
.pg-tut .page-title{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:900;letter-spacing:.03em;line-height:1.3;
    filter:drop-shadow(0 0 24px rgba(255,190,80,.2))}
.pg-tut .page-subtitle{font-size:1.12rem}
.pg-tut .tag{display:inline-flex;align-items:center;gap:6px;font-weight:700;padding:5px 14px;
    background:rgba(229,181,76,.1);border-color:rgba(229,181,76,.35)}
.pg-tut .tag::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.72em;color:#46d996}
.pg-tut .title-divider{position:relative;width:180px;height:1px;margin-top:1.7rem;border-radius:0;
    background:linear-gradient(90deg,transparent,rgba(229,181,76,.85),transparent)}
.pg-tut .title-divider::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4.5px 0 0 -4.5px;
    transform:rotate(45deg);background:#0a0806;border:1px solid #f3c65f;box-shadow:0 0 12px rgba(243,198,95,.6)}

/* 快速跳转：emoji 换成金色图标块 */
.pg-tut .quick-nav-title{font-size:.95rem;font-weight:800;letter-spacing:.3em;color:#ff7a4d}
.pg-tut .nav-card{gap:10px;padding:18px 12px 16px;font-weight:700;
    background:linear-gradient(180deg,#1a140c,#120e09);border-color:rgba(229,181,76,.16)}
.pg-tut .nav-card:hover{border-color:rgba(229,181,76,.55);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 24px rgba(229,181,76,.12)}
.pg-tut .nav-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:1.05rem;color:#f3c65f;
    background:radial-gradient(circle at 30% 25%,rgba(255,233,168,.22),rgba(229,181,76,.06) 70%);
    border:1px solid rgba(229,181,76,.4);box-shadow:inset 0 0 12px rgba(229,181,76,.12);transition:transform .3s ease,box-shadow .3s ease}
.pg-tut .nav-card:hover .nav-icon{transform:translateY(-2px) scale(1.06);box-shadow:inset 0 0 12px rgba(229,181,76,.2),0 0 18px rgba(229,181,76,.35)}
.pg-tut .nav-num{font-family:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;font-size:1.15rem;font-weight:900;
    color:#241703;background:linear-gradient(135deg,#ffe9a8,#d99a2b);border-color:transparent}

/* 版块标题：图标块 + 发光步骤徽章 + 右侧渐隐金线 */
.pg-tut .section-title{font-size:1.7rem;font-weight:900;letter-spacing:.02em}
.pg-tut .section-title::after{content:"";flex:1;min-width:24px;height:1px;margin-left:6px;
    background:linear-gradient(90deg,rgba(229,181,76,.4),transparent)}
.pg-tut .title-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;font-size:1rem;color:#f3c65f;
    background:rgba(229,181,76,.1);border:1px solid rgba(229,181,76,.4);box-shadow:0 0 16px rgba(229,181,76,.15)}
.pg-tut .step-badge{position:relative;width:38px;height:38px;font-size:1.15rem;
    background:linear-gradient(135deg,#ffe9a8,#d99a2b);box-shadow:0 0 0 4px rgba(229,181,76,.12),0 4px 16px rgba(229,181,76,.45)}
.pg-tut .step-badge::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(243,198,95,.6);
    animation:fxRing 2.4s ease-out infinite}
@keyframes fxRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}

/* 卡片：顶部金线 + 图标块 */
.pg-tut .info-card{background:linear-gradient(180deg,#19130c,#120e09);border-color:rgba(229,181,76,.12)}
.pg-tut .info-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:.6;
    background:linear-gradient(90deg,transparent,rgba(229,181,76,.75),transparent)}
.pg-tut .card-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;font-size:1.15rem;color:#f3c65f;margin-bottom:14px;
    background:radial-gradient(circle at 30% 25%,rgba(255,233,168,.2),rgba(229,181,76,.05) 70%);border:1px solid rgba(229,181,76,.35)}
.pg-tut .apply-step,.pg-tut .restore-card,.pg-tut .faq-item,.pg-tut .dl-card,.pg-tut .path-box{border-color:rgba(229,181,76,.12)}
.pg-tut .alert-icon svg,.pg-tut .path-label svg{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.15em}
.pg-tut .path-label svg{margin-right:5px;color:#f3c65f}
.pg-tut .step-list li{border-left-color:rgba(229,181,76,.22)}
.pg-tut .tab-btn i,.pg-tut .restore-header h3 i{font-size:.95em}
.pg-tut .restore-header h3 i{color:#f3c65f}
.pg-tut .faq-item[open]{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 0 1px rgba(229,181,76,.12)}
.pg-tut .faq-item[open] .faq-answer{animation:fxFade .35s ease}
@keyframes fxFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 底部号召区：金色光晕 + 鎏金标题 + 火星粒子 */
.pg-tut .cta-section{padding:4rem 0;overflow:hidden;background:radial-gradient(ellipse 60% 90% at 50% 100%,rgba(229,181,76,.14),transparent 70%)}
.pg-tut .cta-section h2{font-size:1.8rem;font-weight:900;filter:drop-shadow(0 0 20px rgba(255,190,80,.2))}

@media (max-width:768px){
    .pg-tut .page-hero{padding:2.9rem 1rem 2rem}
    .pg-tut .page-title{font-size:1.75rem}
    /* 标题拆两行：「流放之路1/2 优化软件」+「使用教程」，不再出现「教程」两个字单独掉下去 */
    .pg-tut .pt-sep{display:none}
    .pg-tut .pt-b{display:block}
    .pg-tut .section-title{font-size:1.4rem}
    .pg-tut .cta-section{padding:2.8rem 0}
    .pg-tut .cta-section h2{font-size:1.4rem}
}
@media (max-width:480px){
    /* 快速跳转改成横排小卡：6 个入口从三屏高压到一屏内 */
    .pg-tut .nav-grid{gap:8px}
    .pg-tut .nav-card{flex-direction:row;justify-content:flex-start;text-align:left;padding:10px 12px;gap:10px;font-size:.84rem;white-space:normal}
    .pg-tut .nav-icon{flex:none;width:32px;height:32px;border-radius:9px;font-size:.9rem}
    .pg-tut .nav-num{font-size:1rem}
}

/* ==================== 减少动态效果：全部静止 ==================== */
@media (prefers-reduced-motion:reduce){
    .hero-btn-primary,.compare-btn,.fx-ring,.price-card.featured::before,
    .hero h1.goldtext,.sec-title.goldtext,.fxs-title.goldtext,.more-head .mh-title,.price-card.featured .price-amount .val,
    .pg-tut .page-title,.pg-tut .cta-section h2,.pg-tut .step-badge::after,
    .trade-card::before,.lib-card::before,.lib-hero-card::before,.lib-sb::before,.pg-home .mobile-nav.open,
    .fx-node.on::before,.fx-mirror *,.fx-pop-glint,.fx-pop-tw{animation:none !important}
    .hero-btn-primary::after,.btn-buy::after,.price-cta.solid::after,.lib-portal-btn::after,
    .pg-tut .btn-primary::after,.pg-tut .cta-btn-primary::after{display:none}
    .fx-tree-path i{transition:none}
    .fx-pop{transition:opacity .2s ease}
}