/* 微密圈 weeimiquan.cn - 圈层信号环 · 四色体系: 黑#10131E/白/蓝#2F6BFF/橙#F5820D */
:root{
  --ink:#10131E;
  --paper:#F4F5FA;
  --blue:#2F6BFF;
  --orange:#F5820D;
  --mist:#ECEFF7;
  --line:#D9DFEE;
  --white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
[id]{scroll-margin-top:84px;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}

/* ---------- 入场动画 ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:none;}
}

/* ---------- 按钮 ---------- */
.wbtn{display:inline-block;padding:12px 28px;font-size:15px;font-weight:800;border:2px solid var(--ink);line-height:1.4;transition:transform .15s ease;}
.wbtn:hover{transform:translate(2px,2px);}
.wbtn-lg{padding:15px 34px;font-size:17px;}
.wbtn-blue{background:var(--blue);color:var(--white);}
.wbtn-orange{background:var(--orange);color:var(--ink);}
.wbtn-ghost{background:transparent;color:var(--ink);}

/* ---------- 顶栏 ---------- */
.wbar{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:2px solid var(--ink);}
.wbar-in{display:flex;align-items:center;gap:26px;height:70px;}
.wlogo{display:flex;align-items:center;gap:10px;}
.wlogo img{width:40px;height:40px;object-fit:contain;}
.wlogo-t{display:flex;flex-direction:column;line-height:1.25;}
.wlogo-t strong{font-size:17px;letter-spacing:1px;}
.wlogo-t small{font-size:11px;color:#5A6275;}
.wnav{display:flex;gap:22px;margin-left:auto;}
.wnav a{font-size:14px;font-weight:600;color:#3A4152;padding:6px 2px;border-bottom:3px solid transparent;}
.wnav a.on,.wnav a:hover{color:var(--blue);border-bottom-color:var(--blue);}
.wbar-r{display:flex;align-items:center;gap:14px;}
.wbar-cta{padding:9px 22px;font-size:14px;}
.burger{display:none;width:42px;height:42px;border:2px solid var(--ink);background:var(--white);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.burger span{display:block;width:20px;height:2px;background:var(--ink);}

/* ---------- 英雄区: 圈层信号环 ---------- */
.whe{padding:52px 0 64px;background:var(--paper);}
.whe-in{background:var(--white);border:2px solid var(--ink);box-shadow:14px 12px 0 var(--blue);padding:46px 48px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.wkick{font-size:12px;letter-spacing:2px;color:#5A6275;font-weight:700;margin-bottom:14px;}
.wkick i{font-style:normal;background:var(--ink);color:var(--white);padding:3px 9px;margin-right:10px;font-size:10px;letter-spacing:1px;}
.whe h1{font-size:56px;font-weight:900;letter-spacing:2px;line-height:1.15;margin-bottom:16px;}
.whe .lead{font-size:15px;line-height:1.95;color:#3A4152;margin-bottom:24px;}
.whe-acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.wtags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.wtags li{border:1px solid var(--ink);background:var(--mist);padding:5px 13px;font-size:12px;font-weight:600;}
.wnote-line{display:flex;align-items:center;gap:8px;font-size:12px;color:#5A6275;}
.wnote-line .dot{width:10px;height:10px;background:var(--orange);border:1px solid var(--ink);flex:none;}
.whe-r{min-width:0;}
.wring-wrap{position:relative;max-width:480px;margin:0 auto;padding:28px 0;}
.wring{width:100%;height:auto;display:block;}
.wphone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:236px;background:var(--white);border:8px solid var(--ink);}
.wphone-top{display:flex;align-items:center;gap:6px;background:var(--ink);color:var(--white);font-size:10px;letter-spacing:2px;padding:5px 8px;}
.wphone-top b{width:7px;height:7px;background:var(--orange);flex:none;}
.wphone img{width:100%;}
.wphone-bot{display:block;height:16px;background:var(--ink);}
.wtag{position:absolute;background:var(--white);border:2px solid var(--ink);padding:10px 14px;line-height:1.45;}
.wtag b{display:block;font-size:13px;}
.wtag span{font-size:11px;color:#5A6275;}
.wt1{top:5%;right:-3%;}
.wt2{bottom:6%;left:-4%;}

/* ---------- 数据黑条 ---------- */
.wstrip{padding:0 0 56px;background:var(--paper);}
.wstrip-in{background:var(--ink);box-shadow:8px 8px 0 var(--orange);display:grid;grid-template-columns:repeat(4,1fr);}
.wnum{padding:26px 12px;text-align:center;border-left:1px solid rgba(255,255,255,.16);}
.wnum:first-child{border-left:none;}
.wnum b{display:block;font-size:30px;font-weight:900;color:var(--orange);letter-spacing:1px;}
.wnum span{font-size:12px;color:rgba(255,255,255,.72);}

/* ---------- 区块标题 ---------- */
.wsech{margin-bottom:30px;}
.wsech h2{font-size:29px;font-weight:900;line-height:1.4;margin-bottom:8px;}
.wsech .wsub{font-size:13px;color:#5A6275;}

/* ---------- 圈子公约 ---------- */
.wfeat{background:var(--mist);padding:64px 0;}
.wcards{background:var(--white);border:2px solid var(--ink);box-shadow:10px 6px 0 var(--ink);padding:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wcard{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--blue);padding:20px 20px 18px;}
.wcard.c-orange{border-left-color:var(--orange);}
.wc-no{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--white);background:var(--blue);padding:2px 9px;margin-bottom:12px;}
.c-orange .wc-no{background:var(--orange);color:var(--ink);}
.wcard h3{font-size:16px;font-weight:800;margin-bottom:8px;line-height:1.5;}
.wcard p{font-size:13px;line-height:1.85;color:#3A4152;}

/* ---------- 圈内实拍橱窗 ---------- */
.wshot{background:var(--white);padding:64px 0;border-top:2px solid var(--ink);}
.wrail{background:var(--paper);border:2px solid var(--ink);box-shadow:-8px 10px 0 var(--orange);padding:24px;display:flex;gap:18px;overflow-x:auto;}
.wv{background:var(--white);border:1px solid var(--line);flex:0 0 auto;}
.wv .bar{display:block;height:6px;background:var(--blue);}
.v2 .bar,.v4 .bar{background:var(--orange);}
.wv img{max-width:240px;margin:0 auto;padding:10px 10px 0;}
.wv.wide img{max-width:225px;}
.wv figcaption{border-top:1px solid var(--line);font-size:12px;font-weight:600;color:#3A4152;padding:8px 12px;}
.wshot-low{margin-top:24px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;align-items:stretch;}
.wnote{background:var(--mist);border-left:6px solid var(--blue);padding:22px;}
.wnote h3{font-size:18px;font-weight:800;margin-bottom:8px;}
.wnote p{font-size:13px;line-height:1.85;color:#3A4152;margin-bottom:14px;}
.wshot-low .wv{display:flex;flex-direction:column;}
.wshot-low .wv figcaption{margin-top:auto;}

/* ---------- 入圈三步（深色阶梯） ---------- */
.wsteps{background:var(--ink);padding:64px 0;color:var(--white);}
.wsteps .wsech h2{color:var(--white);}
.wsteps .wsech .wsub,.wsteps .wkick{color:rgba(255,255,255,.65);}
.wstairs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
.wst{background:var(--white);color:var(--ink);border-top:8px solid var(--blue);padding:22px 22px 20px;}
.wst.s2{border-top-color:var(--orange);margin-top:34px;}
.wst.s3{border-top-color:var(--ink);margin-top:68px;}
.wst-no{display:inline-block;background:var(--blue);color:var(--white);font-size:12px;font-weight:800;padding:3px 11px;margin-bottom:12px;letter-spacing:1px;}
.s2 .wst-no{background:var(--orange);color:var(--ink);}
.s3 .wst-no{background:var(--ink);color:var(--white);}
.wst h3{font-size:16px;font-weight:800;margin-bottom:8px;}
.wst p{font-size:13px;line-height:1.85;color:#3A4152;}

/* ---------- 圈内问答 ---------- */
.wask{background:var(--mist);padding:64px 0;}
.wbook{background:var(--white);border:2px solid var(--ink);box-shadow:0 10px 0 var(--ink);padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start;}
.wq{border:1px solid var(--line);background:var(--paper);margin-bottom:14px;}
.wq summary{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;list-style:none;font-weight:700;font-size:14px;}
.wq summary::-webkit-details-marker{display:none;}
.wq-no{flex:none;background:var(--blue);color:var(--white);font-size:11px;font-weight:800;padding:2px 8px;letter-spacing:1px;}
.wcol:last-child .wq-no{background:var(--orange);color:var(--ink);}
.wq-t{flex:1;}
.wq-x{flex:none;position:relative;width:16px;height:16px;}
.wq-x::before,.wq-x::after{content:"";position:absolute;background:var(--ink);top:50%;left:50%;}
.wq-x::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.wq-x::after{width:2px;height:14px;transform:translate(-50%,-50%);transition:transform .2s ease;}
.wq[open] .wq-x::after{transform:translate(-50%,-50%) rotate(90deg);}
.wq[open] summary{background:var(--white);border-bottom:1px solid var(--line);}
.wq-a{padding:12px 15px 14px;}
.wq-a p{font-size:13px;line-height:1.9;color:#3A4152;}

/* ---------- 搭子回声 ---------- */
.wvo{background:var(--paper);padding:64px 0;}
.wecho{background:var(--white);border:2px solid var(--ink);box-shadow:10px -6px 0 var(--orange);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.wr{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--blue);padding:18px 18px 14px;}
.wr.alt{border-top-color:var(--orange);}
.wr-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#5A6275;letter-spacing:1px;margin-bottom:10px;}
.wr-h b{color:var(--blue);font-size:10px;letter-spacing:2px;}
.wr.alt .wr-h b{color:var(--orange);}
.wr p{font-size:13px;line-height:1.9;color:#2A3040;margin-bottom:12px;}
.wr footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;border-top:1px solid var(--line);padding-top:10px;}
.wr footer b{font-weight:700;}
.wr footer time{color:#5A6275;}

/* ---------- 底部CTA ---------- */
.wct{background:var(--mist);padding:0 0 64px;}
.wct-box{background:var(--blue);color:var(--white);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:40px 44px;display:flex;align-items:center;gap:34px;}
.wct-l{flex:1;}
.wct-sign{font-size:12px;letter-spacing:2px;margin-bottom:10px;color:rgba(255,255,255,.85);}
.wct-sign .sq{display:inline-block;width:10px;height:10px;background:var(--orange);border:1px solid var(--ink);margin-right:8px;}
.wct-box h2{font-size:26px;font-weight:900;line-height:1.4;margin-bottom:10px;}
.wct-p{font-size:14px;line-height:1.85;color:rgba(255,255,255,.88);}
.wct-box .wbtn{flex:none;border-color:var(--ink);}

/* ---------- 页脚 ---------- */
.wfoot{background:var(--ink);color:rgba(255,255,255,.78);border-top:6px solid var(--orange);padding:36px 0 26px;}
.wfoot-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--white);margin-bottom:16px;}
.wfoot-brand img{width:34px;height:34px;object-fit:contain;}
.wfoot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px;}
.wfoot-nav a{font-size:12px;color:rgba(255,255,255,.7);}
.wfoot-nav a:hover{color:var(--orange);}
.wfoot-icp{font-size:12px;color:rgba(255,255,255,.6);margin-bottom:6px;}
.wfoot-c{font-size:12px;color:rgba(255,255,255,.45);}

/* ---------- 返回顶部 ---------- */
.backtop{position:fixed;right:24px;bottom:20px;width:46px;height:46px;background:var(--orange);border:2px solid var(--ink);color:var(--ink);font-size:20px;font-weight:900;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:70;}
.backtop.show{opacity:1;visibility:visible;}
.backtop:hover{background:var(--blue);color:var(--white);}

/* ---------- 移动端 ---------- */
@media (max-width:960px){
  .wnav{position:absolute;top:70px;left:0;right:0;background:var(--white);border-bottom:2px solid var(--ink);display:none;flex-direction:column;gap:0;padding:8px 0;}
  .wnav.open{display:flex;}
  .wnav a{padding:13px 24px;border-bottom:none;border-left:4px solid transparent;}
  .wnav a.on,.wnav a:hover{border-left-color:var(--blue);background:var(--mist);}
  .burger{display:flex;}
  .wbar-cta{display:none;}
}
@media (max-width:900px){
  [id]{scroll-margin-top:72px;}
  .whe{padding:36px 0 44px;}
  .whe-in{grid-template-columns:1fr;padding:30px 22px;gap:34px;box-shadow:10px 9px 0 var(--blue);}
  .whe h1{font-size:40px;}
  .wring-wrap{max-width:340px;}
  .wphone{width:172px;border-width:6px;}
  .wtag{padding:7px 10px;}
  .wtag b{font-size:11px;}
  .wtag span{font-size:10px;}
  .wstrip-in{grid-template-columns:repeat(2,1fr);}
  .wnum:nth-child(3){border-left:none;}
  .wnum:nth-child(1),.wnum:nth-child(2){border-bottom:1px solid rgba(255,255,255,.16);}
  .wsech h2{font-size:23px;}
  .wcards{grid-template-columns:1fr;padding:18px;}
  .wrail{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .wv{scroll-snap-align:start;}
  .wshot-low{grid-template-columns:1fr 1fr;}
  .wnote{grid-column:1 / -1;}
  .wstairs{grid-template-columns:1fr;}
  .wst.s2,.wst.s3{margin-top:0;}
  .wbook{grid-template-columns:1fr;padding:18px;}
  .wecho{grid-template-columns:1fr;padding:18px;}
  .wct-box{flex-direction:column;align-items:flex-start;padding:30px 24px;}
  .backtop{bottom:142px;right:16px;}
}
@media (max-width:640px){
  .whe h1{font-size:34px;}
  .whe .lead{font-size:14px;}
  .wbtn-lg{padding:13px 26px;font-size:15px;}
  .wnum b{font-size:24px;}
  .wshot-low{grid-template-columns:1fr;}
  .wv img,.wv.wide img{max-width:200px;}
}