/* Orb · 独立介绍页样式（2026-10-17 新建；配色沿用首页「暗夜鎏金」，分类色与 Orb 软件侧栏一致；以画面为主、文字从简） */
@font-face{font-family:"Optimus Princeps";src:url("/webfonts/OptimusPrincepsSemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ==================== 基础与设计变量 ==================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0a0806; --panel:#15100a; --panel-2:#1b140c;
    --line:#352b19; --line-soft:rgba(255,255,255,.08);
    --gold:#eebd55; --gold-hi:#ffedb0; --gold-dk:#a87c26;
    --ember:#ff5a36; --ember-dk:#c93a1d;
    --green:#46d996; --violet:#b79cf2;
    --txt:#f5edde; --txt-2:#dbcfb7; --muted:#a4957e;
    --top-h:66px;   /* 和首页顶栏一样高（site-header.css） */
    --ease:cubic-bezier(.22,.61,.36,1);
    --goldgrad:linear-gradient(180deg,#fff3c8 0%,#f6cf72 38%,#d9952a 72%,#9c6216 100%);
    --goldbtn:linear-gradient(135deg,#ffe08a 0%,#eebd55 45%,#d48f22 100%);
    font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 14px);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);line-height:1.7;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;
    background:radial-gradient(ellipse 70% 45% at 50% -10%,rgba(238,189,85,.07),transparent 65%),
               radial-gradient(ellipse 45% 35% at 90% 85%,rgba(255,90,54,.05),transparent 60%)}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
button{font:inherit;color:inherit}
kbd{font:800 .92em/1 "Microsoft YaHei",sans-serif;display:inline-block;padding:.32em .5em .28em;border-radius:7px;color:#241703;
    background:var(--goldbtn);box-shadow:0 3px 0 #8a5a16,0 6px 16px rgba(212,143,34,.35)}
::selection{background:rgba(238,189,85,.3)}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-dk),var(--ember-dk));border-radius:4px}

/* ==================== 按钮 ==================== */
.ob-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:14px 26px;border-radius:12px;border:none;cursor:pointer;white-space:nowrap;
    font-size:16px;font-weight:900;letter-spacing:.02em;color:#2a1a04;background:var(--goldbtn);
    box-shadow:0 10px 30px rgba(212,143,34,.35),inset 0 1px 0 rgba(255,255,255,.5);
    transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s,color .25s}
.ob-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
    animation:obSweep 4.8s ease-in-out infinite}
.ob-btn:hover{transform:translateY(-2px);color:#2a1a04;box-shadow:0 16px 40px rgba(212,143,34,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.ob-btn-ghost{background:rgba(255,255,255,.04);color:var(--txt);border:1px solid rgba(238,189,85,.38);box-shadow:none}
.ob-btn-ghost::after{display:none}
.ob-btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(238,189,85,.08);box-shadow:none}
.ob-btn-sm{padding:9px 16px;font-size:14px;border-radius:10px;gap:7px}
.ob-btn-lg{padding:15px 30px;font-size:17px}
@keyframes obSweep{0%,62%{left:-60%}100%{left:130%}}

/* ==================== 首屏 ==================== */
.ob-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding:calc(var(--top-h) + clamp(24px,4vh,48px)) clamp(16px,4vw,40px) clamp(24px,4vh,40px)}
/* 首屏底色：纯渐变（2026-10-18 起不用游戏画面做背景） */
.ob-hero::before{content:"";position:absolute;inset:0;z-index:-3;opacity:.9;
    background:radial-gradient(ellipse 60% 55% at 26% 42%,rgba(96,70,28,.38),transparent 70%),
        radial-gradient(ellipse 45% 50% at 82% 64%,rgba(40,66,98,.22),transparent 70%),
        radial-gradient(ellipse 35% 30% at 10% 92%,rgba(120,24,24,.18),transparent 70%),
        radial-gradient(ellipse 35% 30% at 92% 94%,rgba(30,60,140,.16),transparent 70%)}
.ob-hero::after{content:"";position:absolute;inset:0;z-index:-2;
    background:radial-gradient(ellipse 55% 55% at 72% 46%,rgba(238,189,85,.12),transparent 70%),
               linear-gradient(90deg,rgba(10,8,6,.9) 0%,rgba(10,8,6,.35) 55%,rgba(10,8,6,.55) 100%),
               linear-gradient(180deg,rgba(10,8,6,.6) 0%,transparent 35%,transparent 70%,var(--bg) 100%)}
.ob-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ob-hero-bg::before,.ob-orb-glow,.ob-orb-ring{position:absolute;left:72%;top:44%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.ob-hero-bg::before{content:"";width:min(60vw,800px);border:1px solid rgba(238,189,85,.12)}
.ob-orb-glow{width:min(72vw,940px);background:radial-gradient(circle,rgba(255,170,60,.16) 0%,rgba(255,90,54,.07) 38%,transparent 66%)}
.ob-orb-ring{width:min(60vw,800px);
    background:conic-gradient(from 0deg,transparent 0 6%,rgba(255,224,138,.85) 16%,transparent 28%,transparent 52%,rgba(255,90,54,.7) 63%,transparent 75%);
    -webkit-mask:radial-gradient(circle,transparent 69.2%,#000 69.6%,#000 70.6%,transparent 71%);
    mask:radial-gradient(circle,transparent 69.2%,#000 69.6%,#000 70.6%,transparent 71%);
    animation:obSpin 26s linear infinite}
.ob-orb-ring.r2{width:min(78vw,1040px);opacity:.55;animation-duration:46s;animation-direction:reverse}
@keyframes obSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.ob-sparks i{position:absolute;bottom:-12px;left:var(--x,50%);width:3px;height:3px;border-radius:50%;opacity:0;
    background:#ffd27a;box-shadow:0 0 8px 2px rgba(255,180,80,.7);animation:obRise var(--d,10s) linear var(--dl,0s) infinite}
@keyframes obRise{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:.85}100%{transform:translate(var(--dx,24px),-100vh) scale(1);opacity:0}}
.ob-sparks i:nth-child(1){--x:6%;--d:11s;--dl:-1s;--dx:30px}
.ob-sparks i:nth-child(2){--x:14%;--d:14s;--dl:-6s;--dx:-20px}
.ob-sparks i:nth-child(3){--x:22%;--d:9s;--dl:-3s;--dx:18px}
.ob-sparks i:nth-child(4){--x:31%;--d:13s;--dl:-9s;--dx:-26px}
.ob-sparks i:nth-child(5){--x:38%;--d:10s;--dl:-5s;--dx:22px}
.ob-sparks i:nth-child(6){--x:46%;--d:15s;--dl:-11s;--dx:-14px}
.ob-sparks i:nth-child(7){--x:53%;--d:12s;--dl:-2s;--dx:28px}
.ob-sparks i:nth-child(8){--x:59%;--d:9.5s;--dl:-7s;--dx:-30px}
.ob-sparks i:nth-child(9){--x:64%;--d:13.5s;--dl:-4s;--dx:16px}
.ob-sparks i:nth-child(10){--x:69%;--d:11.5s;--dl:-10s;--dx:-18px}
.ob-sparks i:nth-child(11){--x:74%;--d:10.5s;--dl:-1.5s;--dx:26px}
.ob-sparks i:nth-child(12){--x:79%;--d:14.5s;--dl:-8s;--dx:-24px}
.ob-sparks i:nth-child(13){--x:84%;--d:9s;--dl:-6.5s;--dx:20px}
.ob-sparks i:nth-child(14){--x:88%;--d:12.5s;--dl:-3.5s;--dx:-16px}
.ob-sparks i:nth-child(15){--x:92%;--d:11s;--dl:-9.5s;--dx:14px}
.ob-sparks i:nth-child(16){--x:96%;--d:13s;--dl:-5.5s;--dx:-22px}
.ob-sparks i:nth-child(17){--x:2%;--d:12s;--dl:-7.5s;--dx:24px}
.ob-sparks i:nth-child(18){--x:50%;--d:16s;--dl:-12s;--dx:-28px}

.ob-hero-in{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(24px,4vw,64px);align-items:center}
.ob-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;margin-bottom:18px;border-radius:99px;
    font-size:13px;font-weight:700;color:var(--gold-hi);background:rgba(238,189,85,.08);border:1px solid rgba(238,189,85,.3)}
.ob-eyebrow img{width:20px;height:20px}
.ob-h1{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.ob-word{font-family:"Optimus Princeps",Georgia,serif;font-weight:600;font-size:clamp(84px,11vw,164px);line-height:.92;letter-spacing:.06em;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%) no-repeat,var(--goldgrad);
    background-size:260% 100%,100% 100%;background-position:120% 0,0 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 8px 34px rgba(255,170,60,.28));animation:obShine 6.5s ease-in-out 1.2s infinite}
@keyframes obShine{0%,55%{background-position:120% 0,0 0}100%{background-position:-60% 0,0 0}}
.ob-h1-sub{font-size:clamp(28px,3.2vw,44px);font-weight:900;letter-spacing:.16em;color:var(--txt);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.ob-keys{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:28px}
.ob-keys span{display:inline-flex;align-items:center;gap:9px;font-size:18px;font-weight:800;color:var(--txt-2)}
.ob-keys b{font-family:"Optimus Princeps",Georgia,serif;font-weight:600;font-size:34px;line-height:1;
    background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-keys .fa-check,.ob-keys .fa-bolt{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#06130b;background:var(--green)}
.ob-keys .fa-bolt{color:#241703;background:var(--goldgrad)}
.ob-cta{display:flex;flex-wrap:wrap;gap:12px}

.ob-hero-shot{position:relative;margin:0;perspective:1600px}
.ob-frame{position:relative;padding:6px;border-radius:16px;transform-style:preserve-3d;
    background:linear-gradient(140deg,rgba(255,224,138,.7),rgba(238,189,85,.14) 32%,rgba(255,90,54,.38) 70%,rgba(255,224,138,.55));
    box-shadow:0 44px 90px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.6),0 0 90px rgba(238,189,85,.16);
    transform:rotateY(-12deg) rotateX(5deg);transition:transform .9s var(--ease)}
.ob-reel{position:relative;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:#0b0907}
.ob-reel canvas,.ob-combo-cv canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.ob-call{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:10px;pointer-events:none;
    font-size:12.5px;font-weight:900;color:#2a1a04;white-space:nowrap;background:var(--goldbtn);
    box-shadow:0 12px 28px rgba(0,0,0,.55);transform:translateZ(46px);animation:obFloat 4.6s ease-in-out infinite}
.ob-call i{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px rgba(255,90,54,.28);flex:none}
.ob-call.c1{left:22%;top:3%}
.ob-call.c2{left:-5%;top:47%;animation-delay:-1.5s}
.ob-call.c3{right:2%;bottom:-5%;animation-delay:-3s}   /* 放在画框右下角外面，不压首屏画面右边的图例 */
@keyframes obFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.ob-hero-shot figcaption{margin-top:14px;text-align:center;font-size:12px;letter-spacing:.12em;color:var(--muted)}

/* 8 大分类条 */
.ob-catbar{width:100%;max-width:1240px;margin:clamp(26px,5vh,52px) auto 0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
/* 只留图标 + 名字 + 数量，不要外框（2026-10-18 第 8 轮用户要求） */
.ob-cat{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px;border-radius:14px;transition:transform .3s var(--ease)}
.ob-ci{width:58px;height:58px;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 10px color-mix(in srgb,var(--cc) 35%,transparent));
    transition:transform .35s var(--ease)}
.ob-cat:hover .ob-ci{transform:translateY(-2px) scale(1.08) rotate(-4deg)}
.ob-cat b{font-size:13.5px;font-weight:800;color:var(--txt);white-space:nowrap}
.ob-cat em{font-style:normal;font-family:"Optimus Princeps",Georgia,serif;font-weight:600;font-size:20px;line-height:1;color:var(--cc)}
.ob-cat:hover{transform:translateY(-4px)}
.ob-cat:hover b{color:var(--cc)}

/* ==================== 版块通用 ==================== */
.ob-sec{position:relative;padding:clamp(60px,9vh,100px) clamp(16px,4vw,40px)}
.ob-sec-alt{background:linear-gradient(180deg,transparent,rgba(238,189,85,.035) 25%,rgba(238,189,85,.035) 75%,transparent)}
.ob-wrap{max-width:1100px;margin:0 auto}
.ob-wrap-wide{max-width:1280px}
.ob-wrap-narrow{max-width:820px}
.ob-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:clamp(22px,4vh,36px)}
.ob-h2{font-size:clamp(26px,3.2vw,42px);font-weight:900;line-height:1.3;letter-spacing:.02em;color:var(--txt);text-wrap:balance}
.ob-h2 span{background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-dot{font-style:normal}
.ob-tags{display:flex;flex-wrap:wrap;gap:6px}
.ob-tags-c{justify-content:center}
.ob-tags span{padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--gold-hi);
    background:rgba(238,189,85,.1);border:1px solid rgba(238,189,85,.28)}
.ob-hint{font-size:13px;color:var(--muted)}
.ob-hint i{color:var(--gold);margin-right:4px}

/* ==================== 插件管理：软件窗口的网页版 ==================== */
.ob-manager{max-width:1180px;margin:0 auto}
.ob-manager .ow{box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5),0 0 80px rgba(238,189,85,.1)}

/* ==================== 三个大版块：一个画面同时开一整类插件 ==================== */
.ob-combo{width:100%;max-width:min(1180px,calc((100vh - 395px) * 1.6));min-width:min(100%,760px);margin:0 auto}   /* 一屏装得下：顶栏 + 标题 + 画面 + 三行插件名 */
.ob-combo-cv{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0b0907;
    border:1px solid rgba(238,189,85,.38);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(238,189,85,.08)}
.ob-combo-list{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:12px}
.ob-combo-list button{padding:3px 10px;border-radius:99px;cursor:pointer;font-size:12px;font-weight:700;line-height:1.6;color:var(--txt-2);white-space:nowrap;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);transition:color .2s,background .2s,border-color .2s,transform .2s}
.ob-combo-list button::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--cc);vertical-align:1px}
.ob-combo-list button:hover{border-color:var(--cc);color:var(--txt)}
.ob-combo-list button.on{color:#1a1206;background:linear-gradient(135deg,#ffe08a,#eebd55);border-color:transparent;transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(238,189,85,.35)}
.ob-combo-list button.on::before{background:#1a1206}

/* ==================== 60 个插件：演示卡 ==================== */
.ob-filter{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.ob-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ob-pills button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;cursor:pointer;white-space:nowrap;
    font-size:13.5px;font-weight:700;color:var(--txt-2);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
    transition:color .25s,background .25s,border-color .25s}
.ob-pills .ob-ci-s{width:22px;height:22px;margin:-3px 0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ob-pills button em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--muted)}
.ob-pills button:hover{border-color:var(--cc,var(--gold));color:var(--txt)}
.ob-pills button.on{color:#1a1206;background:var(--cc,var(--gold));border-color:transparent}
.ob-pills button.on em{color:#1a1206}
.ob-search{display:flex;align-items:center;gap:10px;width:100%;max-width:400px;height:44px;margin:0 auto;padding:0 16px;border-radius:12px;
    background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);transition:border-color .25s,box-shadow .25s}
.ob-search i{font-size:14px;color:var(--muted)}
.ob-search input{flex:1;min-width:0;border:none;outline:none;background:none;color:var(--txt);font-size:15px}
.ob-search input::placeholder{color:#7d705d}
.ob-search:focus-within{border-color:rgba(238,189,85,.6);box-shadow:0 0 0 3px rgba(238,189,85,.12)}
.ob-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ob-pc{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;cursor:pointer;outline:none;
    background:linear-gradient(180deg,var(--panel-2),#100c08);border:1px solid rgba(255,255,255,.08);
    transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.ob-pc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:var(--cc)}
.ob-pc:hover,.ob-pc:focus-visible{transform:translateY(-4px);border-color:var(--cc);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.ob-pc.hide{display:none}
.ob-pc-anim{position:relative;aspect-ratio:16/10;background:#0b0806;overflow:hidden}
.ob-pc-anim canvas,.ob-pm-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.ob-pc-zoom{position:absolute;right:8px;bottom:8px;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    font-size:12px;color:#fff;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s;pointer-events:none}
.ob-pc:hover .ob-pc-zoom{opacity:1}
.ob-pc-t{display:flex;flex-direction:column;gap:2px;padding:12px 16px 14px}
.ob-pc-t b{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:17px;font-weight:900;color:var(--txt);line-height:1.3}
.ob-pc-t span{font-size:13.5px;color:var(--cc);font-weight:700;line-height:1.5}
.ob-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:420px;margin:16px auto 0;padding:13px 18px;
    border-radius:12px;cursor:pointer;font-size:15px;font-weight:800;color:var(--gold-hi);
    background:rgba(238,189,85,.08);border:1px solid rgba(238,189,85,.4);transition:background .25s,border-color .25s}
.ob-more:hover{background:rgba(238,189,85,.14);border-color:var(--gold)}
.ob-more[hidden]{display:none}
.ob-more i{font-size:12px}
.ob-empty{padding:30px 0;text-align:center;font-size:14px;color:var(--muted)}
.ob-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;text-align:center;font-size:13.5px;color:var(--txt-2)}
.ob-note i{color:var(--gold)}

/* ==================== 三步上手 ==================== */
.ob-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:st}
.ob-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px 22px;text-align:center;
    border-radius:18px;background:var(--panel);border:1px solid var(--line);counter-increment:st}
.ob-steps li::before{content:counter(st);position:absolute;left:14px;top:12px;font-family:"Optimus Princeps",Georgia,serif;font-weight:600;
    font-size:30px;line-height:1;color:rgba(238,189,85,.25)}
.ob-steps li:not(:last-child)::after{content:"\f054";position:absolute;right:-15px;top:50%;z-index:1;width:28px;height:28px;margin-top:-14px;border-radius:50%;
    display:grid;place-items:center;font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px;color:#2a1a04;background:var(--goldbtn)}
.ob-step-ic{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;font-size:30px;color:var(--gold-hi);margin-bottom:6px;
    background:radial-gradient(circle at 30% 25%,rgba(255,224,138,.25),rgba(238,189,85,.06) 70%);border:1px solid rgba(238,189,85,.4)}
.ob-step-key kbd{font-size:20px}
.ob-steps b{font-size:19px;font-weight:900}
.ob-steps small{font-size:13px;color:var(--muted)}

.ob-steps-faq{margin-bottom:clamp(18px,3vh,32px)}

/* ==================== 常见问题 ==================== */
.ob-faq{display:flex;flex-direction:column;gap:10px}
.ob-faq details{border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:border-color .3s,background .3s}
.ob-faq details[open]{border-color:rgba(238,189,85,.42);background:rgba(238,189,85,.05)}
.ob-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;list-style:none;cursor:pointer;
    font-size:15.5px;font-weight:800;color:var(--txt)}
.ob-faq summary::-webkit-details-marker{display:none}
.ob-faq summary::after{content:"\f078";flex:none;font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px;color:var(--gold);transition:transform .3s}
.ob-faq details[open] summary::after{transform:rotate(180deg)}
.ob-faq p{padding:0 18px 15px;font-size:14px;line-height:1.85;color:var(--txt-2)}
.ob-faq p b{color:var(--gold-hi)}
.ob-faq p a{text-decoration:underline;text-underline-offset:3px}

/* ==================== 购买 ==================== */
.ob-plans{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:stretch}
.ob-plans.one{grid-template-columns:minmax(0,640px);justify-content:center}
.ob-plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px clamp(18px,3vw,34px) 26px;text-align:center;
    border-radius:22px;background:var(--panel);border:1px solid var(--line)}
.ob-plan-life{border:2px solid rgba(243,198,95,.8);
    background:radial-gradient(ellipse at 0% 0%,rgba(255,90,54,.16),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(238,189,85,.16),transparent 55%),var(--panel);
    box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(238,189,85,.12)}
.ob-plan-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:99px;white-space:nowrap;
    font-size:13px;font-weight:900;color:#fff;background:linear-gradient(135deg,#ff6a3d,#d93a1f);box-shadow:0 8px 20px rgba(217,58,31,.4)}
.ob-plan-tag.m{color:#241703;background:var(--goldbtn);box-shadow:0 8px 20px rgba(212,143,34,.35)}
.ob-plan-price{font-size:18px;font-weight:800;color:var(--txt-2)}
.ob-plan-price b{font-family:"Optimus Princeps",Georgia,serif;font-weight:600;font-size:64px;line-height:1;vertical-align:-4px;
    background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-plan-price small{font-size:14px;color:var(--muted);font-weight:700}
.ob-plan-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.ob-plan-three div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;border-radius:14px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ob-plan-three div.hl{border-color:rgba(238,189,85,.6);background:rgba(238,189,85,.08)}
.ob-plan-three i{font-size:24px;color:var(--gold);height:34px;display:grid;place-items:center}
.ob-plan-three img{width:34px;height:34px}
.ob-plan-three b{font-size:15px;font-weight:900}
.ob-plan-three small{font-size:12px;color:var(--muted)}
.ob-plan-one{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ob-plan-one img{width:64px;height:64px;filter:drop-shadow(0 4px 16px rgba(238,189,85,.4))}
.ob-plan-one span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.4}
.ob-plan-one b{font-size:18px;font-weight:900}
.ob-plan-one small{font-size:13px;color:var(--muted)}
.ob-plan-sub{font-size:13.5px;color:var(--txt-2)}
.ob-plan .ob-btn{margin-top:auto;min-width:220px}
/* ==================== 页脚 / 手机购买栏 / 大图 / 插件演示弹窗 ==================== */
.ob-footer{padding:30px 20px calc(30px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--line)}
.ob-footer p{font-size:13px;color:var(--muted)}
.ob-footer .waf{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:8px;font-size:13px;color:#666}
.ob-footer .waf a{display:inline-flex;align-items:center}
.ob-footer .waf img{height:25px;width:auto}
.ob-mbar{display:none}
.ob-pm-x{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:18px;color:#fff;
    background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25)}
.ob-pm{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px);
    background:rgba(4,3,2,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ob-pm[hidden]{display:none}
.ob-pm-box{position:relative;width:clamp(320px,calc((100vh - 270px) * 1.6),1100px);max-width:100%;max-height:100%;overflow:auto;border-radius:20px;background:var(--panel);
    border:1px solid var(--cc,var(--line));box-shadow:0 30px 90px rgba(0,0,0,.8)}
.ob-pm-box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--cc,var(--gold))}
.ob-pm-stage{position:relative;aspect-ratio:16/10;background:#0b0806}
.ob-pm-info{display:flex;flex-direction:column;gap:8px;padding:18px clamp(16px,3vw,28px) 20px}
.ob-pm-meta{display:flex;gap:8px;align-items:center}
.ob-pm-cat{padding:2px 10px;border-radius:99px;font-size:12px;font-weight:800;color:#1a1206;background:var(--cc,var(--gold))}
.ob-pm-info h3{font-size:24px;font-weight:900}
.ob-pm-info p{font-size:15px;line-height:1.8;color:var(--txt-2)}
.ob-pm-nav{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.ob-pm-nav button{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:800;
    color:var(--txt-2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:border-color .25s,color .25s}
.ob-pm-nav button:hover{border-color:var(--gold);color:var(--gold-hi)}

/* ==================== 整屏节奏（和首页一样）：宽屏上滚动停下时自动对齐到最近的版块开头 ==================== */
@media (min-width:1025px){
    html{scroll-snap-type:y mandatory;scroll-padding-top:0}
    .ob-hero,.ob-sec{scroll-snap-align:start}
    .ob-sec{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
        padding-top:calc(var(--top-h) + clamp(18px,3.5vh,40px));padding-bottom:clamp(24px,4vh,48px)}
    .ob-sec>.ob-wrap{width:100%}
    .ob-steps-faq li{padding:18px 16px 16px}
    .ob-steps-faq .ob-step-ic{width:60px;height:60px;font-size:26px}
    .ob-footer{scroll-snap-align:end}
}

/* ==================== 入场动画 ==================== */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.ob-steps .rv:nth-child(2){transition-delay:.1s}
.ob-steps .rv:nth-child(3){transition-delay:.2s}

/* ==================== 响应式 ==================== */
@media (max-width:1100px){
    .ob-hero{min-height:0}
    .ob-hero-in{grid-template-columns:1fr;gap:36px}
    .ob-hero-shot{max-width:820px;width:100%;margin:0 auto}
    .ob-frame{transform:rotateX(6deg)}
    .ob-call.c2{left:2%}

    .ob-hero-bg::before,.ob-orb-glow,.ob-orb-ring{left:50%;top:62%}
    .ob-catbar{grid-template-columns:repeat(4,minmax(0,1fr))}
    .ob-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ob-plans{grid-template-columns:1fr;max-width:640px;margin:0 auto}
}
@media (max-width:760px){
    .ob-hero{padding:calc(var(--top-h) + 24px) 16px 24px}
    .ob-eyebrow{font-size:12px;margin-bottom:12px}
    .ob-word{font-size:clamp(76px,24vw,104px)}
    .ob-h1{margin-bottom:18px}
    .ob-h1-sub{font-size:26px;letter-spacing:.12em}
    .ob-keys{gap:8px 16px;margin-bottom:20px}
    .ob-keys span{font-size:15px;gap:7px}
    .ob-keys b{font-size:28px}
    .ob-keys .fa-check,.ob-keys .fa-bolt{width:22px;height:22px;font-size:11px}
    .ob-cta .ob-btn{flex:1 1 100%}
    .ob-frame{transform:none;padding:4px;border-radius:12px}
    .ob-reel{border-radius:9px}
    .ob-call{display:none}
    .ob-hero-bg::before,.ob-orb-ring{width:130vw}
    .ob-orb-ring.r2{width:170vw}
    .ob-orb-glow{width:150vw}
    .ob-catbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:22px}
    .ob-cat{padding:4px 2px;gap:4px}
    .ob-ci{width:40px;height:40px}
    .ob-cat b{font-size:11.5px}
    .ob-cat em{font-size:16px}
    .ob-sec{padding:52px 16px}
    .ob-head{margin-bottom:18px;gap:10px}
    .ob-h2{font-size:24px}
    .ob-dot{display:none}
    .ob-h2 span{display:block}
    .ob-plans{gap:30px}
    .ob-hint{font-size:12px}
    :root{--top-h:60px}
    .ob-combo{min-width:0}
    .ob-combo-cv{border-radius:12px}
    .ob-combo-list{gap:5px;margin-top:10px}
    .ob-combo-list button{padding:4px 9px;font-size:12px}
    .ob-pills{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
    .ob-pills::-webkit-scrollbar{display:none}
    .ob-pills button{flex:none;padding:7px 12px;font-size:13px}
    .ob-pgrid{grid-template-columns:1fr;gap:12px}
    .ob-pc-t{padding:10px 14px 12px}
    .ob-pc-t b{font-size:16px}
    .ob-pc-zoom{opacity:1}
    .ob-steps{grid-template-columns:1fr;gap:14px}
    .ob-steps li{display:grid;grid-template-columns:56px 1fr;column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:14px 16px}
    .ob-steps li::before{display:none}
    .ob-steps li:not(:last-child)::after{right:auto;left:44px;top:auto;bottom:-21px;margin:0;content:"\f078"}
    .ob-step-ic{grid-column:1;grid-row:1 / span 2;width:56px;height:56px;font-size:24px;border-radius:16px;margin:0}
    .ob-steps b{grid-column:2;font-size:17px;align-self:end}
    .ob-steps small{grid-column:2;align-self:start}
    .ob-step-key kbd{font-size:15px}
    .ob-faq summary{font-size:14.5px;padding:14px 16px}
    .ob-faq p{font-size:13.5px;padding:0 16px 14px}
    .ob-plan{padding:26px 14px 20px}
    .ob-plan-price b{font-size:52px}
    .ob-plan-three{gap:7px}
    .ob-plan-three div{padding:11px 4px}
    .ob-plan-three b{font-size:13.5px}
    .ob-plan .ob-btn{width:100%;min-width:0}
    .ob-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
    .ob-mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;
        padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(12,9,6,.95);border-top:1px solid var(--line);
        backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(110%);transition:transform .35s var(--ease)}
    .ob-mbar.show{transform:none}
    .ob-mbar-t{display:flex;flex-direction:column;line-height:1.3}
    .ob-mbar-t b{font-size:18px;font-weight:900;color:var(--gold-hi)}
    .ob-mbar-t span{font-size:11.5px;color:var(--muted)}
    .ob-pm{padding:0;align-items:flex-end}
    .ob-pm-box{width:100%;border-radius:18px 18px 0 0;max-height:94vh}
    .ob-pm-info h3{font-size:20px}
    .ob-pm-info p{font-size:14px}
    .ob-pm-x{top:8px;right:8px;width:38px;height:38px;font-size:15px}
}
@media (max-width:420px){
    .ob-cat b{font-size:10.5px;letter-spacing:-.02em}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js .rv{opacity:1;transform:none;transition:none}
    .ob-orb-ring,.ob-sparks i,.ob-call,.ob-word,.ob-btn::after{animation:none}
    .ob-sparks{display:none}
}