/* Hp-hope 自定义板块（首页受力对比/品牌宣言，详情页装置讲解/卖点/人群/对比）共用样式 */
.hp-s{--hp-ink:#0d0f14;--hp-mute:#6b7280;--hp-line:#e3e5ea;--hp-soft:#f4f5f7;--hp-night:#0a0f1c;--hp-warn:#e5484d;
  padding:var(--hp-pt,90px) 0 var(--hp-pb,90px);color:var(--hp-ink);font-family:inherit}
.hp-s *{box-sizing:border-box}
.hp-s__wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.hp-s__eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--hp-mute);margin:0}
.hp-s__h2{font-size:42px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:12px 0 14px;color:inherit}
.hp-s__lead{color:var(--hp-mute);font-size:17px;line-height:1.6;margin:0}
.hp-s__btn{display:inline-block;background:#fff;color:#000;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:16px 34px;border-radius:999px;text-decoration:none}
.hp-s__btn:hover{opacity:.88}

/* 动画：普通背包箭头下压 / 弹簧回弹 / 托举箭头上升 */
@keyframes hpPress{0%,100%{transform:translateY(-6px);opacity:.5}50%{transform:translateY(4px);opacity:1}}
@keyframes hpBoing{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.72)}70%{transform:scaleY(1.06)}}
@keyframes hpRise{0%{transform:translateY(8px);opacity:0}50%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.hp-a-press{animation:hpPress 1.4s ease-in-out infinite}
.hp-a-boing{transform-box:fill-box;transform-origin:50% 100%;animation:hpBoing 1.4s ease-in-out infinite}
.hp-a-rise{animation:hpRise 1.8s ease-out infinite}
.hp-a-rise.d2{animation-delay:.6s}.hp-a-rise.d3{animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){.hp-a-press,.hp-a-boing,.hp-a-rise,.hp-marq__in{animation:none!important}}

/* ---------- 受力对比 hp-problem ---------- */
.hp-prob{background:var(--hp-bg,#f4f5f7)}
.hp-prob__head{text-align:center;max-width:1080px;margin:0 auto 46px}
.hp-prob__title{font-size:clamp(26px,2.7vw,38px)}
.hp-prob__head .hp-s__lead{max-width:760px;margin:0 auto}
.hp-prob__grid{display:grid;grid-template-columns:1fr 70px 1fr}
.hp-pc{border-radius:20px;padding:30px 30px 26px;overflow:hidden}
.hp-pc--old{background:#fff;border:1px solid var(--hp-line)}
.hp-pc--new{background:var(--hp-night);color:#fff}
.hp-pc__lab{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--hp-mute)}
.hp-pc--new .hp-pc__lab{color:var(--hp-accent2)}
.hp-pc__eq{font-size:30px;font-weight:800;margin:6px 0 4px;letter-spacing:-.01em;line-height:1.2}
.hp-pc__eq i{font-style:normal;color:var(--hp-warn)}
.hp-pc--new .hp-pc__eq i{color:var(--hp-accent2)}
.hp-pc svg{width:100%;height:260px;margin:8px 0;display:block}
.hp-pc ul{list-style:none;font-size:14px;display:grid;gap:8px;margin:0;padding:0}
.hp-pc li{padding-left:22px;position:relative;line-height:1.5}
.hp-pc--old li:before{content:"–";position:absolute;left:4px;color:var(--hp-warn);font-weight:800}
.hp-pc--new li:before{content:"";position:absolute;left:2px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--hp-accent);box-shadow:0 0 10px var(--hp-accent)}
.hp-vs{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--hp-mute);font-size:14px}
.hp-vs span{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--hp-line);display:flex;align-items:center;justify-content:center}

/* ---------- 品牌宣言 hp-manifesto ---------- */
.hp-man{background:var(--hp-bg,#000);color:#fff;text-align:center;overflow:hidden;padding-bottom:0}
.hp-man__big{font-size:58px;line-height:1.08;font-weight:800;letter-spacing:-.03em;max-width:980px;margin:0 auto;color:#fff}
.hp-man__big s{color:rgba(255,255,255,.38);text-decoration-thickness:4px;text-decoration-color:var(--hp-accent)}
.hp-man__txt{color:rgba(255,255,255,.62);margin:24px auto 40px;max-width:560px;font-size:17px;line-height:1.6}
.hp-marq{border-top:1px solid rgba(255,255,255,.12);margin-top:70px;padding:20px 0;white-space:nowrap;overflow:hidden}
.hp-marq__in{display:inline-block;animation:hpMq 28s linear infinite;font-size:14px;letter-spacing:.32em;text-transform:uppercase}
.hp-marq__in b{color:#fff;font-weight:700;margin:0 26px}
.hp-marq__in i{color:var(--hp-accent);font-style:normal}
@keyframes hpMq{to{transform:translateX(-50%)}}

/* ---------- 装置讲解 hp-how-it-works ---------- */
.hp-hiw{background:none;color:#fff;padding:36px 0}
/* 深色只做成卡片，宽度跟下方对比区内容一致，不铺满整屏 */
.hp-hiw__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;max-width:1100px;padding:48px;border-radius:22px;background:var(--hp-bg,#0a0f1c)}
.hp-hiw__img{border-radius:22px;overflow:hidden;aspect-ratio:1;background:#111a2e}
.hp-hiw__img img{width:100%;height:100%;object-fit:cover;display:block}
.hp-hiw .hp-s__eyebrow{color:var(--hp-accent2)}
.hp-hiw .hp-s__lead{color:rgba(255,255,255,.66);margin-bottom:28px;font-size:16px}
.hp-steps{display:grid;gap:12px}
.hp-step{border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 20px;cursor:pointer;transition:.25s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:none;color:inherit;text-align:left;font:inherit;width:100%}
.hp-step__n{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--hp-accent2)}
.hp-step__t{display:block;font-size:17px;margin:0 0 2px;color:#fff;line-height:1.35}
.hp-step__d{display:block;font-size:14px;color:rgba(255,255,255,.62);max-height:0;overflow:hidden;transition:max-height .3s;margin:0;line-height:1.55}
.hp-step.is-on{background:rgba(255,255,255,.05);border-color:var(--hp-accent);box-shadow:0 0 0 1px var(--hp-accent) inset}
.hp-step.is-on .hp-step__n{background:var(--hp-accent);color:#fff}
.hp-step.is-on .hp-step__d{max-height:140px;margin-top:4px}

/* ---------- 卖点卡 hp-why ---------- */
.hp-why{background:var(--hp-bg,#fff)}
.hp-why__head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}
.hp-why__head .hp-s__lead{max-width:380px;font-size:15px}
.hp-why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hp-wc{background:var(--hp-soft);border-radius:18px;padding:26px 22px;min-height:230px;display:flex;flex-direction:column}
.hp-wc__ic{width:52px;height:52px;border-radius:14px;background:var(--hp-accent);display:flex;align-items:center;justify-content:center;margin-bottom:auto}
.hp-wc__ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-wc h3{font-size:18px;line-height:1.25;margin:26px 0 8px}
.hp-wc p{font-size:14px;color:var(--hp-mute);margin:0;line-height:1.55}

/* ---------- 适合人群 hp-who ---------- */
.hp-who{background:var(--hp-bg,#fff)}
.hp-who__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.hp-wo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;color:#fff;background:#222}
.hp-wo img{width:100%;height:100%;object-fit:cover;transition:transform .6s;display:block}
.hp-wo:hover img{transform:scale(1.05)}
.hp-wo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,0) 55%)}
.hp-wo__t{position:absolute;left:22px;right:22px;bottom:22px;z-index:1}
.hp-wo__t small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hp-wo__t h3{font-size:22px;margin:4px 0 6px;color:#fff;line-height:1.2}
.hp-wo__t p{font-size:14px;color:rgba(255,255,255,.88);margin:0;line-height:1.5}

/* ---------- 对比 hp-compare ---------- */
.hp-cmp{background:var(--hp-bg,#f4f5f7)}
.hp-cmp__head{text-align:center;margin-bottom:34px}
.hp-tg{display:inline-flex;background:#fff;border:1px solid var(--hp-line);border-radius:99px;padding:5px;margin-top:22px}
.hp-tg button{border:0;background:none;padding:10px 22px;border-radius:99px;font-weight:700;font-size:14px;cursor:pointer;color:var(--hp-mute);font-family:inherit}
.hp-tg button.is-on{background:#000;color:#fff}
.hp-cmp__vis{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:#fff;border-radius:22px;padding:34px;margin-bottom:26px}
.hp-cmp__vis svg{width:100%;height:300px;display:block}
.hp-cmp__st h3{font-size:26px;line-height:1.15;margin:0 0 10px}
.hp-cmp__st p{color:var(--hp-mute);margin:0;line-height:1.6}
.hp-cmp__k{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:10px;padding:4px 10px;border-radius:99px}
.hp-cmp[data-mode="old"] .hp-only-new,.hp-cmp[data-mode="new"] .hp-only-old{display:none}
.hp-cmp[data-mode="old"] .hp-cmp__k{background:#fde8e8;color:var(--hp-warn)}
.hp-cmp[data-mode="new"] .hp-cmp__k{background:var(--hp-tint);color:var(--hp-accent)}
.hp-tbl{background:#fff;border-radius:22px;overflow:hidden}
.hp-tr{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-top:1px solid var(--hp-line)}
.hp-tr--h{border-top:0;background:#000;color:#fff;font-weight:700;font-size:13px;letter-spacing:.06em}
.hp-tr>div{padding:16px 20px;font-size:14px;display:flex;align-items:center;gap:8px;line-height:1.4}
.hp-tr>div:nth-child(3){background:var(--hp-tint);font-weight:600}
.hp-tr--h>div:nth-child(3){background:var(--hp-accent)}
.hp-yes,.hp-no{width:20px;height:20px;border-radius:50%;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.hp-yes{background:var(--hp-accent);color:#fff}
.hp-no{background:#e9eaee;color:#888}

@media screen and (max-width:959px){
  .hp-s{padding:var(--hp-pt-m,56px) 0 var(--hp-pb-m,56px)}
  .hp-s__wrap{padding:0 18px}
  .hp-s__h2{font-size:28px}
  .hp-prob__grid{grid-template-columns:1fr}
  .hp-vs{height:56px}
  .hp-pc{padding:24px 20px}
  .hp-pc svg{height:210px}
  .hp-man{padding-bottom:0}
  .hp-man__big{font-size:34px}
  .hp-marq{margin-top:44px}
  .hp-hiw{padding:20px 0}
  .hp-hiw__grid{grid-template-columns:1fr;gap:24px;margin:0 12px;padding:24px 18px 28px}
  .hp-why__head{display:block}
  .hp-why__head .hp-s__lead{margin-top:10px}
  .hp-why__grid{grid-template-columns:1fr 1fr;gap:10px}
  .hp-wc{min-height:200px;padding:20px 16px}
  .hp-wc h3{font-size:15px}
  .hp-wc p{font-size:13px}
  .hp-who__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .hp-wo{scroll-snap-align:start}
  .hp-cmp__vis{grid-template-columns:1fr;padding:20px;gap:10px}
  .hp-cmp__vis svg{height:230px}
  .hp-tr{grid-template-columns:1fr .78fr 1.22fr}
  .hp-tr>div{padding:11px 8px;font-size:12px;gap:6px}
  .hp-yes,.hp-no{width:16px;height:16px;font-size:10px}
  .hp-tg button{padding:9px 14px;font-size:13px}
}

/* ---------- 真实背包图 + 受力叠加层（受力对比/对比开关共用） ---------- */
.hp-tile{position:relative;aspect-ratio:1;border-radius:16px;background:#fff;overflow:hidden;margin:14px 0 18px}
.hp-tile img{width:100%;height:100%;object-fit:contain;display:block}
.hp-ov{position:absolute;inset:0;pointer-events:none}
.hp-arw{position:absolute;width:13%;transform:translate(-50%,0)}
.hp-arw svg{width:100%;height:auto;display:block;overflow:visible}
.hp-arw--down{top:calc(var(--sy) - 13%)}
.hp-arw--down svg{animation:hpPress 1.4s ease-in-out infinite}
.hp-spot{position:absolute;width:20%;aspect-ratio:2.2;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(229,72,77,.6),rgba(229,72,77,0));animation:hpPulse 1.4s ease-in-out infinite}
.hp-ring{position:absolute;left:var(--mx);top:var(--my);width:13%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--hp-ring);box-shadow:0 0 18px var(--hp-ring),inset 0 0 14px var(--hp-ring)}
.hp-ring:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--hp-ring);animation:hpWave 1.8s ease-out infinite}
.hp-zoom{position:absolute;right:1.5%;top:1.5%;width:31%;aspect-ratio:1;border-radius:50%;overflow:visible;z-index:2}
.hp-zoom img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid var(--hp-ring);box-shadow:0 0 0 5px #fff,0 0 24px var(--hp-ring);display:block}
.hp-chip{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);background:var(--hp-accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:99px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.hp-tile--new>img{transform:translateX(-9%) scale(1.02)}
.hp-tile--old>img{transform:scale(.66)}
.hp-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hp-lead line{stroke:var(--hp-ring);stroke-width:2;stroke-dasharray:5 4}
.hp-arw--up{bottom:14%}
.hp-arw--up svg{animation:hpRise 1.8s ease-out infinite}
.hp-arw--up.d2 svg{animation-delay:.6s}
@keyframes hpPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes hpWave{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.hp-pc--new .hp-tile{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.hp-cmp__vis .hp-tile{margin:0;max-width:420px;width:100%;justify-self:center;background:#fff}
@media (prefers-reduced-motion:reduce){.hp-arw svg,.hp-spot,.hp-ring:after{animation:none!important}}
@media screen and (max-width:959px){.hp-chip{font-size:9px;padding:4px 8px}}

/* ---------- 故事页 hp-story-hero（大图开场 / 收尾引导共用） ---------- */
.hp-sh{position:relative;min-height:var(--hp-h,640px);display:flex;align-items:center;color:#fff;background:#0b0d12;overflow:hidden;padding:0}
.hp-sh__bg{position:absolute;inset:0}
.hp-sh__bg picture{display:block;width:100%;height:100%}
.hp-sh>.hp-s__wrap{width:100%}
.hp-sh__bg img{width:100%;height:100%;object-fit:cover;object-position:var(--hp-pos,50% 35%);display:block}
.hp-sh__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,14,.9) 0%,rgba(8,10,14,.6) 42%,rgba(8,10,14,.05) 75%)}
.hp-sh--center .hp-sh__bg:after{background:rgba(8,10,14,.62)}
.hp-sh__in{position:relative;max-width:600px}
.hp-sh--center .hp-s__wrap{text-align:center}
.hp-sh--center .hp-sh__in{margin:0 auto}
.hp-sh .hp-s__eyebrow{color:var(--hp-accent2);display:inline-flex;align-items:center;gap:10px}
.hp-sh .hp-s__eyebrow:before{content:"";width:28px;height:2px;background:var(--hp-accent2)}
.hp-sh__h{font-size:60px;line-height:1.04;font-weight:800;letter-spacing:-.03em;margin:18px 0 18px;color:#fff}
.hp-sh__h em{font-style:normal;color:var(--hp-accent2)}
.hp-sh__p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 30px}
.hp-sh__q{font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);border-left:2px solid var(--hp-accent2);padding-left:16px;margin:30px 0 0;font-style:italic}
.hp-sh--center .hp-sh__q{border:0;padding:0}

/* ---------- 故事页 三条原则 hp-principles ---------- */
.hp-pr{background:var(--hp-bg,#fff)}
.hp-pr__head{max-width:720px;margin-bottom:40px}
.hp-pr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--hp-line)}
.hp-pr__it{padding:30px 28px 10px 0}
.hp-pr__it+.hp-pr__it{padding-left:28px;border-left:1px solid var(--hp-line)}
.hp-pr__n{font-size:56px;font-weight:800;letter-spacing:-.04em;color:var(--hp-accent);line-height:1}
.hp-pr__it h3{font-size:20px;margin:16px 0 8px}
.hp-pr__it p{color:var(--hp-mute);margin:0;line-height:1.6;font-size:15px}
@media screen and (max-width:959px){
  .hp-sh{min-height:var(--hp-hm,560px);align-items:flex-end;padding-bottom:40px}
  .hp-sh__bg:after{background:linear-gradient(0deg,rgba(8,10,14,.92) 30%,rgba(8,10,14,.15) 75%)}
  .hp-sh__bg img{object-position:var(--hp-pos-m,var(--hp-pos))}
  .hp-sh__h{font-size:38px}
  .hp-sh__p{font-size:15px}
  .hp-pr__grid{grid-template-columns:1fr 1fr;gap:0}
  .hp-pr__it,.hp-pr__it+.hp-pr__it{padding:20px 12px 18px 0;border-left:0;border-bottom:1px solid var(--hp-line)}
  .hp-pr__it:nth-child(even){padding-left:14px;border-left:1px solid var(--hp-line)}
  .hp-pr__n{font-size:32px}
  .hp-pr__it h3{font-size:15px;margin:10px 0 6px}
  .hp-pr__it p{font-size:13px}
  .hp-st__img{aspect-ratio:4/3}
}

/* ---------- 故事页 图文段落 hp-story-text ---------- */
.hp-st{background:var(--hp-bg,#fff)}
.hp-st__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hp-st--text .hp-st__grid{display:block}
.hp-st--text .hp-st__tx{display:grid;grid-template-columns:1fr 1.15fr;column-gap:64px;align-items:start}
.hp-st--text .hp-st__tx .hp-s__eyebrow{grid-column:1}
.hp-st--text .hp-st__tx .hp-s__h2{grid-column:1;margin-bottom:0}
.hp-st--text .hp-st__body{grid-column:2;grid-row:1/span 3}
.hp-st--img-right .hp-st__img{order:2}
.hp-st__img{border-radius:20px;overflow:hidden;aspect-ratio:1}
.hp-st__img img{width:100%;height:100%;object-fit:cover;display:block}
.hp-st__body{font-size:17px;line-height:1.75;color:#3d4250}
.hp-st__body p{margin:0 0 14px}
.hp-st__pts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.hp-st__pts li{position:relative;padding-left:26px;font-size:15px;line-height:1.55}
.hp-st__pts li:before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--hp-accent)}
.hp-sh__in{max-width:none}
.hp-sh__h{font-size:50px;line-height:1.12}
.hp-sh__p{max-width:440px}
@media screen and (max-width:959px){
  .hp-st__grid{grid-template-columns:1fr;gap:28px}
  .hp-st--img-right .hp-st__img{order:0}
  .hp-st--text .hp-st__tx{display:block}
  .hp-st__body{font-size:15px;margin-top:14px}
  .hp-sh__h{font-size:34px}
}

/* 对比板块：三行标题（传统 / vs / Hp-hope），说明文字放大 */
.hp-cmp__title{display:flex;flex-direction:column;align-items:center;gap:6px}
.hp-cmp__vs{display:inline-flex;align-items:center;gap:14px;font-size:.5em;font-style:italic;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hp-warn,#e5484d)}
.hp-cmp__vs:before,.hp-cmp__vs:after{content:"";width:48px;height:2px;background:linear-gradient(90deg,transparent,var(--hp-warn,#e5484d))}
.hp-cmp__vs:after{transform:scaleX(-1)}
.hp-cmp__new{color:var(--hp-accent)}
.hp-cmp__st h3{font-size:34px;font-weight:800;letter-spacing:-.01em}
.hp-cmp__st p{font-size:18px;line-height:1.7;color:#3d4250}
.hp-cmp__k{font-size:12px}
@media screen and (max-width:959px){.hp-cmp__st h3{font-size:24px}.hp-cmp__st p{font-size:15px}.hp-cmp__vs:before,.hp-cmp__vs:after{width:28px}}

/* 对比区改白底后，卡片和表格用细边框区分 */
.hp-cmp .hp-cmp__vis,.hp-cmp .hp-tbl{border:1px solid var(--hp-line)}
.hp-cmp{--hp-pt-m:38px;--hp-pb-m:28px}