/* ==========================================================================
   360软件管家下载页 版面（down.css）v3
   方向：大气。大字号、深色功能带、模拟客户端界面、发丝线功能网格。
   与首页（浅色营销块）、软件大全（整行列表）都不同。
   ========================================================================== */

.dw-sec { padding: 76px 0; }
.dw-sec--rule { border-top: 1px solid var(--line); }
.dw-sec--tint { background: linear-gradient(180deg, rgba(23, 190, 122, .05), rgba(14, 165, 165, .02)); }

/* 统一小节头：短标题 + 一句副标（左对齐，不用右对齐旁白） */
.dw-h { max-width: 720px; margin-bottom: 46px; }
.dw-h span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .18em; color: var(--g2); }
.dw-h span::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.dw-h h2 { margin: 14px 0 0; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.24; letter-spacing: -1.2px; text-wrap: balance; }
.dw-h h2 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dw-h p { margin: 14px 0 0; font-size: var(--fs-body); line-height: 1.9; color: var(--sub); max-width: 58ch; }

/* ==========================================================================
   一、首屏
   ========================================================================== */
.dw-hero { position: relative; overflow: hidden; padding: 52px 0 64px; }
.dw-hero::before {
  content: ""; position: absolute; left: -220px; top: -200px; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34, 208, 138, .22), rgba(34, 208, 138, 0) 70%); pointer-events: none;
}
.dw-hero::after {
  content: ""; position: absolute; right: -180px; top: 40px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 130, 246, .14), rgba(59, 130, 246, 0) 70%); pointer-events: none;
}
.dw-hero .wrap { position: relative; }
.dw-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 48px; align-items: center; }
.dw-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px;
  border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; color: var(--sub);
}
.dw-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--g1); box-shadow: 0 0 0 4px rgba(34, 208, 138, .18); }
.dw-hero h1 { margin: 20px 0 0; font-size: clamp(38px, 4.8vw, 66px); font-weight: 800; line-height: 1.06; letter-spacing: -2.4px; }
.dw-hero h1 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dw-hero__lead { margin: 20px 0 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.95; color: var(--sub); }
.dw-hero__lead b { color: var(--ink); font-weight: 600; }

/* 下载区：醒目 */
.dw-dl { margin: 30px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.dw-dl__btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 13px 34px; border-radius: 14px; color: #fff;
  background: var(--grad); box-shadow: 0 16px 34px rgba(23, 190, 122, .32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dw-dl__btn:hover { transform: translateY(-2px); box-shadow: 0 22px 46px rgba(23, 190, 122, .4); }
.dw-dl__btn b { font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.dw-dl__btn small { font-size: 11px; opacity: .88; font-variant-numeric: tabular-nums; }
.dw-dl__meta { font-size: var(--fs-xs); line-height: 1.9; color: var(--mute); }
.dw-dl__meta b { display: block; color: var(--sub); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   二、模拟客户端窗口
   ========================================================================== */
.dw-app {
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--line2); box-shadow: 0 28px 70px rgba(15, 26, 43, .16);
}
.dw-app__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #F4F7FB; border-bottom: 1px solid var(--line); }
.dw-app__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D7DFE9; }
.dw-app__bar i:first-child { background: #FF6B5E; }
.dw-app__bar i:nth-child(2) { background: #FFC24A; }
.dw-app__bar i:nth-child(3) { background: #34C759; }
.dw-app__bar span { margin-left: 10px; font-size: 11px; font-weight: 600; color: var(--mute); }
.dw-app__body { display: grid; grid-template-columns: 142px minmax(0, 1fr); min-height: 320px; }
.dw-app__side { padding: 12px 10px; background: #FAFCFE; border-right: 1px solid var(--line); }
.dw-app__search { padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 10px; color: var(--mute); }
.dw-app__side ul { margin: 12px 0 0; padding: 0; list-style: none; }
.dw-app__side li { padding: 8px 11px; border-radius: 8px; font-size: 11.5px; color: var(--sub); }
.dw-app__side li.on { color: var(--g2); background: rgba(23, 190, 122, .1); font-weight: 700; }
.dw-app__main { padding: 12px 14px; }
.dw-app__tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.dw-app__tabs span { padding: 4px 10px; border-radius: 999px; font-size: 10px; color: var(--sub); background: #F4F7FB; }
.dw-app__tabs span.on { color: #fff; background: var(--grad); }
.dw-app__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.dw-app__row img { width: 20px; height: 20px; object-fit: contain; }
.dw-app__row b { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-app__row small { display: block; font-size: 9.5px; color: var(--mute); font-weight: 400; }
.dw-app__row em {
  font-style: normal; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700;
  color: var(--mint-d); background: rgba(23, 190, 122, .12);
}
.dw-app__row em.done { color: var(--mute); background: #F1F5F9; }
.dw-app__prog { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #FAFCFE; border: 1px solid var(--line); }
.dw-app__prog p { display: flex; justify-content: space-between; margin: 0 0 7px; font-size: 10px; color: var(--sub); }
.dw-app__prog p b { color: var(--g1); font-variant-numeric: tabular-nums; }
.dw-app__prog div { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.dw-app__prog div i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }

/* ==========================================================================
   三、深色功能带（全站唯一）
   ========================================================================== */
.dw-dark {
  position: relative; overflow: hidden;
  background: #0D1726; color: #fff;
  padding: 78px 0 84px;
}
.dw-dark::before {
  content: ""; position: absolute; left: 50%; top: -300px; width: 900px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(34, 208, 138, .28), rgba(34, 208, 138, 0) 72%); pointer-events: none;
}
.dw-dark .wrap { position: relative; }
.dw-dark__h { max-width: 680px; margin-bottom: 52px; }
.dw-dark__h span { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .2em; color: #4FE0A6; }
.dw-dark__h h2 { margin: 16px 0 0; font-size: clamp(27px, 3.1vw, 44px); line-height: 1.2; letter-spacing: -1.4px; color: #fff; text-wrap: balance; }
.dw-dark__h h2 b { color: #4FE0A6; }
.dw-dark__h p { margin: 16px 0 0; font-size: var(--fs-body); line-height: 1.9; color: rgba(255, 255, 255, .62); }

.dw-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.dw-feat > li { padding: 30px 34px 30px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); border-right: 1px solid rgba(255, 255, 255, .14); }
.dw-feat > li:nth-child(3n) { border-right: 0; padding-right: 0; }
.dw-feat > li:nth-child(3n+2) { padding-left: 34px; }
.dw-feat > li:nth-child(3n) { padding-left: 34px; }
.dw-feat__ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(79, 224, 166, .14); color: #4FE0A6; margin-bottom: 16px;
}
.dw-feat b { display: block; font-size: var(--fs-body); font-weight: 700; color: #fff; letter-spacing: -.2px; }
.dw-feat p { margin: 9px 0 0; font-size: var(--fs-small); line-height: 1.85; color: rgba(255, 255, 255, .58); }

/* ==========================================================================
   四、软件库演示（可切换）
   ========================================================================== */
.dw-lib { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: start; }
.dw-lib__cat { margin: 0; padding: 0; list-style: none; }
.dw-lib__cat button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 16px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font-size: var(--fs-small); font-weight: 600; color: var(--sub); text-align: left;
  transition: background .18s ease, color .18s ease;
}
.dw-lib__cat button span { font-size: var(--fs-micro); color: var(--mute); font-variant-numeric: tabular-nums; }
.dw-lib__cat button:hover { background: rgba(23, 190, 122, .06); color: var(--ink); }
.dw-lib__cat button.on { background: rgba(23, 190, 122, .1); color: var(--g2); }
.dw-lib__cat button.on span { color: var(--g2); }
.dw-lib__pane[hidden] { display: none; }
.dw-lib__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line2); }
.dw-lib__list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.dw-lib__list img { width: 30px; height: 30px; object-fit: contain; }
.dw-lib__list b { display: block; font-size: var(--fs-small); font-weight: 600; }
.dw-lib__list small { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--sub); line-height: 1.6; }
.dw-lib__list em {
  font-style: normal; padding: 5px 15px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 700;
  color: var(--mint-d); background: rgba(23, 190, 122, .12); white-space: nowrap;
}

/* ==========================================================================
   五、三大场景图文块
   ========================================================================== */
.dw-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 44px 0; border-bottom: 1px solid var(--line); }
.dw-scene:last-child { border-bottom: 0; }
.dw-scene--rev > div:first-child { order: 2; }
.dw-scene__k { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; color: var(--g2); }
.dw-scene h3 { margin: 12px 0 0; font-size: clamp(21px, 2vw, 29px); letter-spacing: -.7px; line-height: 1.3; }
.dw-scene > div > p { margin: 14px 0 0; font-size: var(--fs-small); line-height: 1.95; color: var(--sub); }
.dw-scene ul { margin: 18px 0 0; padding: 0; list-style: none; }
.dw-scene ul li { position: relative; padding-left: 20px; margin: 9px 0; font-size: var(--fs-small); line-height: 1.8; color: #3C4A60; }
.dw-scene ul li::before { content: "✓"; position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 700; color: var(--g1); }
.dw-visual {
  padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh1);
}
.dw-visual__t { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; color: var(--sub); }
.dw-visual__t span { font-weight: 600; color: var(--mute); }
.dw-vrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--sub); }
.dw-vrow:last-child { border-bottom: 0; }
.dw-vrow i { width: 8px; height: 8px; border-radius: 2px; background: var(--line2); flex: none; }
.dw-vrow img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.dw-vrow b { color: var(--ink); font-weight: 600; }
.dw-vrow em { margin-left: auto; font-style: normal; font-size: var(--fs-micro); color: var(--amber-d); }

/* ==========================================================================
   六、下载与安装
   ========================================================================== */
.dw-get { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.dw-get__box { border: 1px solid var(--line2); border-radius: 16px; background: #fff; box-shadow: var(--sh1); overflow: hidden; }
.dw-get__hd { padding: 18px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(34, 208, 138, .1), rgba(14, 165, 165, .06)); }
.dw-get__hd b { font-size: var(--fs-body); font-weight: 700; }
.dw-get__hd small { display: block; margin-top: 4px; font-size: var(--fs-micro); color: var(--sub); }
.dw-get__box dl { margin: 0; padding: 6px 22px; }
.dw-get__box dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.dw-get__box dl > div:last-child { border-bottom: 0; }
.dw-get__box dt { margin: 0; font-size: var(--fs-micro); color: var(--mute); }
.dw-get__box dd { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.dw-get__act { padding: 0 22px 18px; }
.dw-get__act .btn { width: 100%; justify-content: center; }

/* 校验器 */
.dw-verify { margin: 22px 0 0; }
.dw-verify form { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.dw-verify input {
  flex: 1 1 200px; min-width: 0; padding: 11px 14px; border: 1px solid var(--line2); border-radius: 10px; background: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-small); color: var(--ink);
}
.dw-verify input:focus { outline: 2px solid rgba(23, 190, 122, .35); outline-offset: 1px; border-color: var(--g1); }
.dw-verify button {
  padding: 11px 22px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: var(--fs-small); font-weight: 700; color: #fff; background: var(--grad);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dw-verify button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(23, 190, 122, .28); }
.dw-verify__out { margin: 13px 0 0; padding: 13px 16px; border-radius: 10px; min-height: 46px; font-size: var(--fs-small); line-height: 1.75; color: var(--sub); background: #FAFCFE; border: 1px dashed var(--line2); }
.dw-verify__out[data-state="ok"] { border-style: solid; border-color: rgba(23, 190, 122, .45); background: rgba(23, 190, 122, .06); color: #24473A; }
.dw-verify__out[data-state="bad"] { border-style: solid; border-color: rgba(200, 127, 8, .45); background: rgba(255, 241, 214, .6); color: #5A4213; }
.dw-verify__out b { color: var(--ink); }

/* 安装三步 */
.dw-steps { margin: 0; padding: 0; list-style: none; counter-reset: ds; }
.dw-steps > li { counter-increment: ds; padding: 0 0 24px 44px; position: relative; border-left: 2px solid var(--line); }
.dw-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.dw-steps > li::before {
  content: counter(ds); position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: #fff;
  background: var(--grad); box-shadow: 0 6px 14px rgba(23, 190, 122, .28);
}
.dw-steps b { display: block; font-size: var(--fs-body); font-weight: 600; }
.dw-steps p { margin: 7px 0 0; font-size: var(--fs-small); line-height: 1.85; color: var(--sub); }

/* ==========================================================================
   七、响应式
   ========================================================================== */
@media (max-width: 1180px) {
  .dw-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .dw-app { max-width: 620px; }
  .dw-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-feat > li:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, .14); padding-left: 30px; padding-right: 30px; }
  .dw-feat > li:nth-child(2n) { border-right: 0; }
  .dw-feat > li:nth-child(2n+1) { padding-left: 0; }
  .dw-lib { grid-template-columns: 1fr; gap: 24px; }
  .dw-lib__cat { display: flex; flex-wrap: wrap; gap: 6px; }
  .dw-lib__cat li { flex: 1 1 auto; }
  .dw-lib__cat button { padding: 9px 14px; border: 1px solid var(--line2); }
  .dw-scene { grid-template-columns: 1fr; gap: 28px; }
  .dw-scene--rev > div:first-child { order: 0; }
  .dw-get { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 720px) {
  .dw-sec { padding: 54px 0; }
  .dw-dark { padding: 58px 0 62px; }
  .dw-feat { grid-template-columns: 1fr; }
  .dw-feat > li { padding: 24px 0 !important; border-right: 0 !important; }
  .dw-hero h1 { letter-spacing: -1.4px; }
  .dw-dl { flex-direction: column; align-items: stretch; }
  .dw-dl__btn { width: 100%; align-items: center; }
  .dw-dl__meta { text-align: center; }
  .dw-app__body { grid-template-columns: 1fr; }
  .dw-app__side { display: none; }
  .dw-lib__list li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .dw-lib__list li em { grid-column: 2; justify-self: start; margin-top: 5px; }
  .dw-steps > li { padding-left: 36px; }
}