:root{
  --paper:#faf9f6;--ink:#26231e;--muted:#6f6a60;--line:#e8e3d9;--card:#fff;
  --red:#d5453c;--red-deep:#b93a32;--blue:#2e7cd6;--green:#3f9d5c;
  --dark:#14161a;--dark2:#1c1f26;--gold:#e8b34b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;font-size:15.5px}
img{max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-weight:700;line-height:1.35}

/* ===== header ===== */
.site-head{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:34px;width:auto}
.brand-tag{font-size:12.5px;color:var(--muted);border-left:1px solid var(--line);padding-left:10px;letter-spacing:.5px}
.site-nav{display:flex;gap:4px;margin-left:auto}
.site-nav a{padding:7px 13px;border-radius:8px;font-size:14.5px;color:#4d483f}
.site-nav a:hover{background:#f0ede5;color:var(--ink)}
.site-nav a.on{color:var(--red);font-weight:600}
.head-cta{flex-shrink:0}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:inherit;font-weight:600;border-radius:10px;transition:all .18s;font-size:15px;padding:11px 22px;line-height:1.3}
.btn svg{flex-shrink:0}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 2px 10px rgba(213,69,60,.28)}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-1px)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 2px 10px rgba(46,124,214,.25)}
.btn-blue:hover{background:#2569b8;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{border-color:#cfc9bc;background:#fdfcfa}
.btn-sm{padding:8px 16px;font-size:13.5px;border-radius:8px}
.btn-lg{padding:14px 30px;font-size:16.5px}

/* ===== hero ===== */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url("/images/hero-campaign.jpg") center/cover no-repeat;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,10,9,.92) 8%,rgba(12,10,9,.55) 52%,rgba(24,12,10,.38))}
.hero .wrap{position:relative;z-index:2;padding-top:74px;padding-bottom:78px;max-width:1160px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:2px;font-weight:600;color:var(--gold);border:1px solid rgba(232,179,75,.4);border-radius:99px;padding:5px 14px;margin-bottom:20px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero h1{font-size:40px;letter-spacing:.5px;margin-bottom:16px}
.hero h1 em{font-style:normal;color:#ff8a7a}
.hero .sub{font-size:16.5px;color:rgba(255,255,255,.82);max-width:640px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-ver{font-size:13px;color:rgba(255,255,255,.6);margin-top:18px}
.hero-ver b{color:#9fe0b0;font-weight:600}

/* ===== stat bar ===== */
.statbar{background:#fff;border-bottom:1px solid var(--line)}
.statbar .grid{display:grid;grid-template-columns:repeat(5,1fr)}
.statbar .cell{padding:18px 8px;text-align:center;border-left:1px solid var(--line)}
.statbar .cell:first-child{border-left:0}
.statbar b{display:block;font-size:15.5px;color:var(--ink)}
.statbar span{font-size:12.5px;color:var(--muted)}

/* ===== sections ===== */
section.block{padding:58px 0}
.sec-head{margin-bottom:30px}
.sec-head .no{font-size:12px;font-weight:700;letter-spacing:2.5px;color:var(--red);display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sec-head .no::after{content:"";height:1px;width:46px;background:var(--line)}
.sec-head h2{font-size:27px}
.sec-head p{color:var(--muted);margin-top:8px;max-width:720px}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.more{font-size:13.5px;color:var(--blue);white-space:nowrap}

/* feature cards */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 22px;transition:all .2s}
.feat:hover{border-color:#d9d2c2;box-shadow:0 6px 22px rgba(60,50,30,.07);transform:translateY(-2px)}
.feat .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feat .ic svg{width:20px;height:20px}
.ic.r{background:#fdeeec}.ic.b{background:#eaf2fc}.ic.g{background:#e9f5ec}.ic.o{background:#fdf3e4}.ic.p{background:#f1edfa}.ic.t{background:#e6f4f4}
.feat h3{font-size:16.5px;margin-bottom:7px}
.feat p{font-size:13.8px;color:var(--muted)}

/* dark monitor section */
.dark-sec{background:var(--dark);color:#eee}
.dark-sec .sec-head h2{color:#fff}
.dark-sec .sec-head .no{color:var(--gold)}
.dark-sec .sec-head .no::after{background:#3a3f49}
.dark-sec .sec-head p{color:#9aa0ab}
.shot{background:var(--dark2);border:1px solid #2a2e37;border-radius:14px;overflow:hidden}
.shot img{display:block;width:100%}
.shot .cap{padding:10px 18px;font-size:12.5px;color:#8b93a1;border-top:1px solid #262b34;background:#171a20}
.monitor-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.mb{background:var(--dark2);border:1px solid #2a2e37;border-radius:12px;padding:20px}
.mb b{display:flex;align-items:center;gap:9px;color:#fff;font-size:15px;margin-bottom:8px}
.mb b svg{width:17px;height:17px;flex-shrink:0}
.mb p{font-size:13.5px;color:#9aa0ab}

/* check section (app dashboard) */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.browser{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(60,50,30,.10)}
.browser .bar{height:34px;background:#f4f1ea;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px}
.browser .bar i{width:9px;height:9px;border-radius:50%;display:block}
.browser .bar i:nth-child(1){background:#f26d63}.browser .bar i:nth-child(2){background:#f2bf4f}.browser .bar i:nth-child(3){background:#5fc26d}
.browser img{display:block}
.numlist{counter-reset:n}
.numlist li{position:relative;padding:0 0 20px 52px;counter-increment:n}
.numlist li::before{content:"0" counter(n);position:absolute;left:0;top:2px;font-size:13px;font-weight:700;color:var(--red);border:1px solid #f0d9d6;background:#fdf5f4;border-radius:8px;padding:3px 8px}
.numlist b{display:block;font-size:15.5px;margin-bottom:4px}
.numlist p{font-size:13.8px;color:var(--muted)}

/* family strip */
.family{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.fam{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 10px;text-align:center;transition:all .2s}
.fam:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(60,50,30,.08)}
.fam img{width:44px;height:44px;border-radius:10px;margin-bottom:10px}
.fam b{display:block;font-size:13.5px}
.fam span{font-size:12px;color:var(--muted)}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tl .item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;position:relative}
.tl .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1px;color:#fff;background:var(--red);border-radius:6px;padding:2px 9px;margin-bottom:10px}
.tl .tag.blue{background:var(--blue)}
.tl .tag.green{background:var(--green)}
.tl .tag.gold{background:#d29a3a}
.tl b{display:block;font-size:15.5px;margin-bottom:5px}
.tl p{font-size:13.5px;color:var(--muted)}
.tl .date{position:absolute;top:20px;right:22px;font-size:12px;color:#a39d92}

/* download pan cards */
.pan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.pan::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.pan.q::before{background:linear-gradient(90deg,#3a7bff,#41c3ff)}
.pan.bd::before{background:linear-gradient(90deg,#2e64d8,#5b8cf5)}
.pan .top{display:flex;align-items:center;gap:13px}
.pan .logo{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:19px}
.pan.q .logo{background:linear-gradient(135deg,#3a7bff,#41c3ff)}
.pan.bd .logo{background:linear-gradient(135deg,#2e64d8,#5b8cf5)}
.pan h3{font-size:17px}
.pan .sub2{font-size:12.5px;color:var(--muted)}
.pan ul{display:flex;flex-direction:column;gap:7px}
.pan ul li{display:flex;gap:9px;font-size:13.8px;color:#55504a}
.pan ul li svg{width:15px;height:15px;color:var(--green);flex-shrink:0;margin-top:4px}
.pan .act{margin-top:auto;display:flex;gap:10px;align-items:center}
.notice{display:flex;gap:12px;background:#fdf6e9;border:1px solid #f0e2c4;border-radius:12px;padding:16px 18px;margin-top:18px;font-size:13.8px;color:#7a6335}
.notice svg{width:18px;height:18px;flex-shrink:0;color:#d29a3a;margin-top:2px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;position:relative;counter-increment:s}
.step::before{content:"0" counter(s);font-size:34px;font-weight:800;color:#efe9dc;position:absolute;top:12px;right:18px;line-height:1}
.step h3{font-size:15.5px;margin-bottom:8px;position:relative}
.step p{font-size:13.5px;color:var(--muted)}

/* faq */
details.fx{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:10px;overflow:hidden}
details.fx summary{cursor:pointer;padding:15px 20px;font-weight:600;font-size:14.8px;list-style:none;display:flex;align-items:center;gap:10px}
details.fx summary::-webkit-details-marker{display:none}
details.fx summary::before{content:"+";flex-shrink:0;width:22px;height:22px;border-radius:7px;background:#f4f0e8;color:var(--red);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .2s}
details.fx[open] summary::before{content:"−";background:var(--red);color:#fff}
details.fx .a{padding:2px 20px 18px 52px;font-size:14px;color:var(--muted)}

/* doc layout */
.doc{max-width:1160px;margin:0 auto;padding:44px 22px 70px;display:grid;grid-template-columns:218px 1fr;gap:44px;align-items:start}
.toc{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 6px}
.toc b{font-size:12.5px;letter-spacing:2px;color:var(--muted);padding:0 14px 10px;display:block}
.toc a{display:block;padding:7px 14px;font-size:13.8px;color:#5b564d;border-left:2px solid transparent;margin:0 6px;border-radius:0 8px 8px 0}
.toc a:hover{color:var(--red);background:#fbf7f2}
.doc-body{min-width:0}
.doc-body>h1{font-size:29px;margin-bottom:10px}
.doc-lead{color:var(--muted);font-size:14.5px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:30px}
.doc-sec{margin-bottom:44px}
.doc-sec h2{font-size:21.5px;padding-left:13px;border-left:4px solid var(--red);margin-bottom:14px}
.doc-sec h3{font-size:16.5px;margin:18px 0 8px}
.doc-sec p{margin-bottom:10px;color:#4d483f}
.doc-sec ul{margin:0 0 12px;padding:0}
.doc-sec ul li{position:relative;padding:3px 0 3px 20px;font-size:14.3px;color:#4d483f}
.doc-sec ul li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:2px;background:var(--red);opacity:.55}
.doc-sec ol{margin:0 0 12px;counter-reset:d;list-style:none}
.doc-sec ol li{position:relative;padding:4px 0 4px 30px;font-size:14.3px;color:#4d483f;counter-increment:d}
.doc-sec ol li::before{content:counter(d);position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:6px;background:#f4f0e8;color:var(--red);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.callout{background:#f4f8fb;border:1px solid #d8e6f2;border-radius:11px;padding:14px 18px;font-size:13.8px;color:#3a6485;margin:14px 0}
.callout.warn{background:#fdf6e9;border-color:#f0e2c4;color:#7a6335}
kbd{background:#f0ece3;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:12.5px;font-family:Consolas,monospace}

/* pack table */
table.pack{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14px}
table.pack th{background:#f4f1ea;text-align:left;padding:11px 16px;font-size:12.5px;letter-spacing:1px;color:var(--muted);font-weight:600}
table.pack td{padding:11px 16px;border-top:1px solid var(--line)}
table.pack tr:first-child th{border-top:0}
table.pack td:first-child{color:var(--muted);width:130px}

/* versions */
.ver{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:12px}
.ver .vh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ver .vh b{font-size:16.5px;color:var(--ink)}
.ver .vh .d{font-size:12.5px;color:#a39d92}
.ver .vh .cur{font-size:11px;color:#fff;background:var(--green);border-radius:6px;padding:2px 8px;font-weight:600}
.ver ul{margin-top:4px}
.ver ul li{position:relative;padding:2.5px 0 2.5px 18px;font-size:13.8px;color:#55504a}
.ver ul li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:#cfc9bc}
.ver ul li b{color:var(--red);font-weight:600;font-size:12.5px;margin-right:6px}

/* breadcrumb + page hero */
.crumb{font-size:12.8px;color:var(--muted);padding:16px 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--red)}
.page-hero{background:linear-gradient(180deg,#f4f1ea,var(--paper));border-bottom:1px solid var(--line);padding:40px 0 34px}
.page-hero h1{font-size:30px;margin-bottom:8px}
.page-hero p{color:var(--muted);max-width:760px}

/* footer */
.site-foot{background:#211d18;color:#b9b2a6;margin-top:40px}
.site-foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:46px 0 34px}
.site-foot h4{color:#f0ebe2;font-size:14px;margin-bottom:14px;letter-spacing:1px}
.site-foot p{font-size:13px;line-height:1.9}
.site-foot .nav2{display:flex;flex-direction:column;gap:9px}
.site-foot .nav2 a{font-size:13px;color:#b9b2a6}
.site-foot .nav2 a:hover{color:#fff}
.site-foot .fine{border-top:1px solid #38332b;padding:20px 0 26px;font-size:12.3px;color:#8a8377;line-height:2}
.site-foot img{height:30px;filter:brightness(1.15)}

/* modal */
.mask{position:fixed;inset:0;z-index:200;background:rgba(20,17,14,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s}
.mask.show{opacity:1;visibility:visible;pointer-events:auto}
.modal{background:#fff;border-radius:16px;max-width:400px;width:100%;padding:30px 28px 26px;text-align:center;position:relative;transform:translateY(14px) scale(.97);transition:transform .25s}
.mask.show .modal{transform:none}
.modal .x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;background:#f4f0e8;border-radius:9px;font-size:16px;cursor:pointer;color:#8a8377}
.modal .x:hover{background:#e9e4d8;color:var(--ink)}
.modal h3{font-size:18px;margin-bottom:4px}
.modal .ch{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.qr-halo{display:inline-block;padding:10px;border-radius:16px;background:#fff;border:1px solid var(--line);animation:haloBreath 2.8s ease-in-out infinite}
.qr-halo img{width:172px;height:172px;display:block;border-radius:8px}
@keyframes haloBreath{0%,100%{transform:scale(1);box-shadow:0 4px 16px rgba(213,69,60,.16)}50%{transform:scale(1.032);box-shadow:0 10px 30px rgba(213,69,60,.34)}}
.modal .tip{margin-top:16px;font-size:14px;font-weight:600;color:var(--ink)}
.modal .warn2{margin-top:10px;font-size:12.8px;color:#a06a2c;background:#fdf6e9;border:1px solid #f0e2c4;border-radius:9px;padding:9px 12px;line-height:1.7}
.modal .safe{margin-top:12px;font-size:12.3px;color:var(--muted)}
.modal .safe b{color:var(--green)}

/* toast */
#toast{position:fixed;left:50%;bottom:9vh;transform:translateX(-50%) translateY(12px);background:rgba(28,25,21,.92);color:#fff;font-size:14px;padding:11px 22px;border-radius:99px;z-index:300;opacity:0;pointer-events:none;transition:all .25s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* strip band */
.band{position:relative;overflow:hidden}
.band img{display:block;width:100%}

/* responsive */
@media (max-width:960px){
  .feat-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:26px}
  .family{grid-template-columns:repeat(3,1fr)}
  .tl{grid-template-columns:1fr}
  .site-foot .top{grid-template-columns:1fr 1fr}
  .hero h1{font-size:31px}
  .doc{grid-template-columns:1fr;gap:24px}
  .toc{position:static;display:flex;flex-wrap:wrap;padding:10px;gap:2px}
  .toc b{width:100%;padding:6px 8px 2px}
  .toc a{border-left:0;border-radius:8px;padding:6px 11px}
}
@media (max-width:640px){
  .site-nav{display:none}
  .statbar .grid{grid-template-columns:repeat(2,1fr)}
  .statbar .cell{border:0;border-bottom:1px solid var(--line)}
  .feat-grid{grid-template-columns:1fr}
  .pan-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .monitor-benefits{grid-template-columns:1fr}
  .family{grid-template-columns:repeat(3,1fr)}
  .hero .wrap{padding-top:52px;padding-bottom:56px}
  .hero h1{font-size:26px}
  .hero-cta .btn{width:100%}
  .site-foot .top{grid-template-columns:1fr;gap:26px}
  section.block{padding:44px 0}
  .pan{padding:20px}
}