/* nimoo (nixmoo.cn) - 26-10-15 第1站 独立骨架：斜向阶梯英雄区 / 3×2等高特色卡 / 纵向错落长卷 / 纵向时间线 / Q1-Q7单列问签 / 左侧大序号评价 / 深底居中白牌下载 */
:root{
  --ink:#12101a;
  --ink-2:#0b0912;
  --paper:#ffffff;
  --mist:#f4f0fb;
  --mist-2:#ece5f8;
  --main:#8e1fc6;
  --main-d:#6f14a0;
  --alt:#12d8c2;
  --line:#ddd4ee;
  --line-2:#c9bce4;
  --muted:#6e6582;
  --text:#241f30;
  --shadow-1:12px 12px 0 0 #e7dcf6;
  --shadow-2:0 10px 0 0 #12d8c2;
  --shadow-3:-14px 10px 0 -4px #e3d8f4;
  --shadow-4:16px -10px 0 -6px #d3f0ea;
  --shadow-5:-12px 14px 0 -5px #ded3f0;
  --shadow-6:0 18px 0 -8px #d9cdec;
  --shadow-7:14px 14px 0 -8px #cdeee9;
  --shadow-8:10px 10px 0 0 #8e1fc6;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:16px/1.85 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;border:0;border-radius:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;border:0;background:none;cursor:pointer;border-radius:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}
[id]{scroll-margin-top:84px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 26px;height:50px;font-size:15px;font-weight:700;letter-spacing:.02em;border:2px solid var(--ink);border-radius:0;transition:transform .16s ease,background .16s ease,color .16s ease}
.btn-lg{height:56px;padding:0 34px;font-size:16px}
.btn-main{background:var(--main);border-color:var(--main);color:#fff}
.btn-main:hover{background:var(--main-d);border-color:var(--main-d);transform:translate(-2px,-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;transform:translate(-2px,-2px)}

/* ---------- 顶栏 ---------- */
.bar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-2);backdrop-filter:blur(6px)}
.bar-in{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo img{width:40px;height:40px;border:1px solid var(--line-2)}
.logo-t{display:flex;flex-direction:column;line-height:1.2}
.logo-t strong{font-size:18px;letter-spacing:.02em}
.logo-t small{font-size:11px;color:var(--muted);letter-spacing:.06em}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{padding:8px 12px;font-size:14.5px;color:#4a435c;border-bottom:2px solid transparent}
.menu a:hover{color:var(--main)}
.menu a.on{color:var(--main);border-bottom-color:var(--main);font-weight:700}
.bar-r{display:flex;align-items:center;gap:12px;flex:none}
.bar-cta{height:42px;padding:0 20px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:2px solid var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink)}

/* ---------- 英雄区 ---------- */
.hero{position:relative;background:var(--mist);padding:58px 0 66px;border-bottom:1px solid var(--line-2)}
.hero::before{content:"";position:absolute;top:0;right:0;width:38%;height:4px;background:var(--main)}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.tagline{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.tagline-no{display:inline-grid;place-items:center;width:30px;height:24px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;letter-spacing:0}
.tagline-light{color:#c9bfe6}
.tagline-light .tagline-no{background:var(--alt);color:var(--ink)}
.hero-l h1{margin:16px 0 14px;font-size:76px;line-height:1;letter-spacing:-.02em;color:var(--ink);font-weight:900}
.hero-lead{font-size:16.5px;line-height:1.95;color:#4b4460;max-width:560px}
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 22px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.hero-tags li{font-size:13.5px;padding:6px 14px;border:1px solid var(--main);color:var(--main);background:rgba(142,31,198,.06)}
.hero-note{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line-2);padding-top:14px;max-width:520px}
.beat{width:9px;height:9px;background:var(--alt);flex:none}
.hero-l{box-shadow:var(--shadow-1);background:#fff;padding:34px 34px 30px;border:1px solid var(--line-2)}

/* 斜向阶梯拼贴英雄图 */
.stair{position:relative;aspect-ratio:1/1.62}
.stair-i{position:absolute;background:#fff;overflow:hidden}
.stair-i img{width:100%;height:auto}
.stair-cam{position:absolute;left:50%;top:6px;width:38px;height:5px;background:#cfc6e2;transform:translateX(-50%);z-index:2}
.st-1{width:56%;left:0;top:0;z-index:3;border:2px solid var(--main);box-shadow:10px 10px 0 0 rgba(142,31,198,.14)}
.st-2{width:42%;left:37%;top:26%;z-index:2;border:2px solid var(--ink);box-shadow:-8px 8px 0 0 rgba(18,16,26,.12)}
.st-3{width:32%;left:70%;top:52%;z-index:1;border:2px solid var(--alt);box-shadow:6px -6px 0 0 rgba(18,216,194,.2)}
.stair-badge{position:absolute;left:-8px;top:44%;z-index:5;background:var(--alt);color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.08em;padding:7px 14px;border:2px solid var(--ink)}
.stair-note{position:absolute;right:0;bottom:2%;z-index:6;background:var(--ink);color:#fff;padding:12px 18px;border-left:4px solid var(--main);display:flex;flex-direction:column;line-height:1.35}
.stair-note b{font-size:24px;font-weight:900}
.stair-note span{font-size:12px;color:#b9b0d0}

/* ---------- 数据条 ---------- */
.feat-band{background:var(--ink);padding:0}
.fb-in{display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow-2);background:var(--ink-2)}
.fb{padding:30px 18px;text-align:center;border-right:1px solid #322b45}
.fb:last-child{border-right:0}
.fb b{display:block;font-size:40px;line-height:1.1;font-weight:900;color:var(--alt);letter-spacing:-.01em}
.fb span{font-size:13.5px;color:#bdb4d4;letter-spacing:.08em}

/* ---------- 通用区块头 ---------- */
.block{padding:76px 0}
.block-a{background:var(--paper)}
.block-b{background:var(--mist)}
.block-c{background:var(--paper);border-top:4px solid var(--main);padding-top:70px}
.block-d{background:var(--mist)}
.block-e{background:var(--paper);border-top:2px solid var(--ink)}
.block-h{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:end;padding-bottom:18px;margin-bottom:38px;border-bottom:1px solid var(--line-2)}
.block-no{font-size:46px;line-height:1;font-weight:900;color:var(--main);letter-spacing:-.02em}
.block-h h2{font-size:29px;line-height:1.3;color:var(--ink);font-weight:900}
.block-p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.8;max-width:660px}
.block-en{font-size:11.5px;letter-spacing:.26em;color:var(--muted);white-space:nowrap;padding-bottom:6px}
.block-a .block-h{border-bottom:3px solid var(--main)}
.block-b .block-h{border-bottom:0;border-left:6px solid var(--alt);padding-left:18px;padding-bottom:0}
.block-c .block-h{border-bottom:0;padding-bottom:0;align-items:center}
.block-d .block-h{grid-template-columns:auto 1fr;align-items:center}
.block-d .block-h .block-en{display:none}
.block-e .block-h{border-bottom:4px double var(--ink)}

/* ---------- 特色功能 3×2 等高 ---------- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;box-shadow:var(--shadow-3);background:#fff;padding:20px}
.fc{position:relative;border:1px solid var(--line);background:var(--paper);padding:26px 22px 24px;border-top:4px solid var(--main);display:flex;flex-direction:column}
.fc:nth-child(3n+2){border-top-color:var(--ink)}
.fc:nth-child(3n){border-top-color:var(--alt)}
.fc-no{font-size:32px;line-height:1;font-weight:900;color:var(--main);letter-spacing:-.02em}
.fc:nth-child(3n+2) .fc-no{color:var(--ink)}
.fc:nth-child(3n) .fc-no{color:var(--alt)}
.fc h3{margin:14px 0 10px;font-size:19px;color:var(--ink);font-weight:800;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fc p{font-size:14.5px;line-height:1.85;color:#544d68;flex:1}
.fc-meta{margin-top:16px;font-size:12.5px;letter-spacing:.06em;color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}

/* ---------- 界面一览 纵向错落长卷 ---------- */
.roll{display:flex;flex-direction:column;gap:34px;box-shadow:var(--shadow-4);background:#fff;padding:28px}
.roll-i{margin:0;border:1px solid var(--line-2);background:var(--mist)}
.roll-i.wide{width:min(450px,88%)}
.roll-i.slim{width:min(330px,66%)}
.roll-i.side-l{margin-right:auto}
.roll-i.side-r{margin-left:auto}
.roll-i img{width:100%;height:auto}
.roll-cap{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ink);color:#fff}
.roll-i.slim .roll-cap{background:var(--main)}
.roll-idx{font-size:12px;font-weight:800;padding:2px 8px;background:var(--alt);color:var(--ink);letter-spacing:.06em}
.roll-i.slim .roll-idx{background:#fff;color:var(--main)}
.roll-t{font-size:14.5px;font-weight:700}
.roll-en{margin-left:auto;font-size:11px;letter-spacing:.2em;color:#a99fc8}
.roll-tip{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}

/* ---------- 使用指南 纵向时间线 ---------- */
.line{position:relative;padding-left:70px;box-shadow:var(--shadow-5);background:#fff;padding:30px 26px 20px 92px}
.line::before{content:"";position:absolute;left:44px;top:34px;bottom:34px;width:2px;background:var(--ink)}
.line-i{position:relative;margin-bottom:20px}
.line-i:last-child{margin-bottom:0}
.line-dot{position:absolute;left:-64px;top:0;width:46px;height:46px;display:grid;place-items:center;background:var(--main);color:#fff;font-weight:900;font-size:15px;border:2px solid var(--ink)}
.line-i:nth-child(2) .line-dot{background:var(--ink)}
.line-i:nth-child(3) .line-dot{background:var(--alt);color:var(--ink)}
.line-i:nth-child(4) .line-dot{background:#fff;color:var(--main)}
.line-card{border:1px solid var(--line);background:var(--paper);padding:18px 22px}
.line-card h3{font-size:17.5px;color:var(--ink);font-weight:800}
.line-card h3::after{content:"";display:block;width:44px;height:2px;background:var(--alt);margin:9px 0 11px}
.line-card p{font-size:14.5px;line-height:1.85;color:#544d68}

/* ---------- 常见疑问 Q1-Q7 单列问签 ---------- */
.ask{box-shadow:var(--shadow-6);background:#fff;padding:18px 18px 8px}
.q{border:1px solid var(--line);background:var(--paper);margin-bottom:12px}
.q[open]{border-color:var(--main);border-left:5px solid var(--main)}
.q summary{display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q-no{flex:none;min-width:46px;font-size:21px;font-weight:900;color:var(--main);letter-spacing:-.02em}
.q-t{flex:1;font-size:16.5px;color:var(--ink);font-weight:700}
.q-ic{flex:none;width:14px;height:14px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s ease}
.q[open] .q-ic{transform:rotate(225deg)}
.q-a{padding:0 20px 20px 82px;border-top:1px solid var(--line);margin-top:-1px}
.q-a p{padding-top:16px;font-size:14.5px;line-height:1.9;color:#4d4661}

/* ---------- 用户评价 左侧大序号 ---------- */
.notes{display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-7);background:#fff;padding:22px}
.note{display:grid;grid-template-columns:66px 1fr;gap:18px;border:1px solid var(--line);background:var(--paper);padding:20px 22px}
.note:nth-child(2n) .note-no{color:var(--ink)}
.note-no{font-size:32px;line-height:1;font-weight:900;color:var(--main);letter-spacing:-.02em;border-right:1px solid var(--line);padding-right:14px}
.note-m p{font-size:15px;line-height:1.9;color:#453e58}
.note-m footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.note-m footer b{font-size:13.5px;color:var(--main)}
.note-m footer time{font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- 下载 CTA 深底居中白牌 ---------- */
.get{background:var(--ink);padding:78px 22px}
.get-plate{max-width:660px;margin:0 auto;background:#fff;padding:46px 40px 40px;text-align:center;box-shadow:var(--shadow-8)}
.get-logo{width:84px;height:84px;margin:0 auto 20px;border:2px solid var(--ink)}
.get-plate .tagline{justify-content:center;color:var(--muted)}
.get-plate h2{margin:14px 0 14px;font-size:30px;color:var(--ink);font-weight:900}
.get-p{font-size:14.5px;line-height:1.9;color:#544d68;max-width:520px;margin:0 auto 26px}
.get-upd{margin-top:18px;font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- 页脚 ---------- */
.foot{background:var(--mist);padding:56px 0 30px;border-top:1px solid var(--line-2)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-logo img{width:36px;height:36px;border:1px solid var(--line-2)}
.foot-logo b{font-size:17px}
.foot-logo p{font-size:12px;color:var(--muted)}
.foot-note{font-size:13.5px;line-height:1.85;color:#5c5470;max-width:400px}
.foot-col h4{font-size:14px;color:var(--ink);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--main)}
.foot-col li{margin-bottom:9px}
.foot-col a{font-size:13.5px;color:#544d68}
.foot-col a:hover{color:var(--main)}
.foot-copy{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-2);text-align:center}
.foot-copy p{font-size:12.5px;color:var(--muted);letter-spacing:.04em;line-height:1.9}

/* ---------- 悬浮按钮 ---------- */
.backtop{position:fixed;right:24px;bottom:160px;z-index:99989;width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:19px;line-height:1;border:2px solid var(--ink);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.backtop.show{opacity:1;visibility:visible;transform:translateY(0)}
.backtop:hover{background:var(--main);border-color:var(--main)}

/* ---------- 入场动画 ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  .hero-l{padding:28px 24px 24px;box-shadow:8px 8px 0 0 #e7dcf6}
  .hero-l h1{font-size:56px}
  .feat{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  [id]{scroll-margin-top:72px}
  .menu{position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:2px solid var(--ink);display:none;padding:8px 0}
  .menu.open{display:flex}
  .menu a{padding:14px 20px;font-size:16px;border-bottom:1px solid var(--line)}
  .menu a.on{border-bottom-color:var(--line)}
  .burger{display:flex}
  .bar-cta{display:none}
  .hero{padding:36px 0 44px}
  .hero::before{width:56%}
  .hero-l h1{font-size:46px}
  .hero-lead{font-size:15.5px;line-height:1.9}
  .hero-acts{gap:10px}
  .btn-lg{height:50px;padding:0 22px;font-size:15px}
  .stair{position:static;aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
  .stair-i{position:static;width:auto;flex:1 1 0;max-width:170px;box-shadow:none}
  .stair-badge{position:static;display:inline-block;order:4}
  .stair-note{position:static;width:100%;order:5;flex-direction:row;align-items:center;gap:12px}
  .stair-note b{font-size:20px}
  .fb-in{grid-template-columns:repeat(2,1fr)}
  .fb{border-right:0;border-bottom:1px solid #322b45;padding:22px 12px}
  .fb:nth-child(2n){border-right:0}
  .fb b{font-size:32px}
  .block{padding:52px 0}
  .block-c{padding-top:48px}
  .block-h{grid-template-columns:auto 1fr;gap:14px;margin-bottom:26px}
  .block-en{display:none}
  .block-no{font-size:36px}
  .block-h h2{font-size:22px}
  .block-d .block-h{grid-template-columns:auto 1fr}
  .feat{grid-template-columns:1fr;padding:14px;gap:14px;box-shadow:-10px 8px 0 -4px #e3d8f4}
  .roll{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:14px;box-shadow:12px -8px 0 -6px #d3f0ea;-webkit-overflow-scrolling:touch}
  .roll-i{flex:0 0 74%;width:74% !important;max-width:none;margin:0 !important;scroll-snap-align:center}
  .roll-i img{width:100%}
  .line{padding:22px 16px 12px 66px;box-shadow:-10px 10px 0 -4px #ded3f0}
  .line::before{left:32px;top:26px;bottom:26px}
  .line-dot{left:-58px;width:40px;height:40px;font-size:14px}
  .line-card{padding:15px 16px}
  .ask{padding:12px 12px 4px;box-shadow:0 14px 0 -8px #d9cdec}
  .q summary{padding:15px 14px;gap:12px}
  .q-no{min-width:38px;font-size:18px}
  .q-t{font-size:15.5px}
  .q-a{padding:0 16px 16px 64px}
  .notes{padding:14px;box-shadow:10px 10px 0 -6px #cdeee9}
  .note{grid-template-columns:48px 1fr;gap:14px;padding:16px}
  .note-no{font-size:24px;padding-right:10px}
  .note-m p{font-size:14.5px}
  .note-m footer{flex-direction:column;align-items:flex-start;gap:4px}
  .get{padding:52px 16px}
  .get-plate{padding:32px 20px 28px;box-shadow:8px 8px 0 0 #8e1fc6}
  .get-plate h2{font-size:24px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-note{max-width:none}
  .backtop{right:16px;bottom:150px;width:42px;height:42px;font-size:17px}
}
@media (max-width:400px){
  .hero-l h1{font-size:40px}
  .stair-i{max-width:150px}
  .roll-i{flex:0 0 82%;width:82% !important}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .q-ic{transition:none}
}