.how8{padding:28px 0 44px}
.how8 .wrap{max-width:1320px}
.how-head{margin-bottom:26px}
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;align-items:stretch}
.hcard{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;background:linear-gradient(180deg,#fbfcff 0%,#f4f8ff 100%);border:1px solid #e3ebf8;border-radius:24px;padding:16px 16px 16px;box-shadow:0 14px 34px rgba(21,112,239,.07)}
.htop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hnum{width:36px;height:36px;border-radius:11px;background:#e4eeff;color:var(--blue);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.hicon{width:48px;height:48px;border-radius:15px;background:#e4eeff;color:var(--blue);display:flex;align-items:center;justify-content:center}
.hcard h3{font-size:clamp(17px,1.4vw,20px);line-height:1.2;letter-spacing:-0.02em;margin-bottom:6px}
.hcard>p{font-size:13.5px;line-height:1.45;color:var(--muted);margin-bottom:12px}
.hmock{align-self:stretch;background:#fff;border:1px solid #e8eef8;border-radius:18px;padding:10px;position:relative}
.harrow{position:absolute;right:-28px;top:50%;width:28px;height:28px;color:#8aa9e6;display:flex;align-items:center;justify-content:center;z-index:2}
.seg{display:grid;grid-template-columns:1fr 1.15fr;gap:5px;margin-bottom:7px}
.seg button{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;padding:8px 6px;font-size:12.5px;font-weight:600;background:#f1f4fa;color:#4b5563;transition:background .2s,color .2s}
.seg button.on{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(21,112,239,.28)}
.ta{display:grid;grid-template-columns:20px 1fr;gap:6px;border:1px solid #e3e9f3;border-radius:12px;padding:8px 10px;margin-bottom:6px;color:#9aa5b8;cursor:text}
.ta textarea{border:none;outline:none;resize:none;font:inherit;font-size:13px;color:var(--ink);background:transparent;min-height:34px;width:100%}
.ta textarea::placeholder{color:#8a95a8}
.ta .cnt{grid-column:1/-1;text-align:right;font-size:11px;color:#a6b0c1;line-height:1}
.frow{display:flex;align-items:center;gap:9px;border:1px solid #e3e9f3;border-radius:12px;padding:8px 10px;margin-bottom:6px;font-size:12.5px;color:var(--ink);cursor:pointer}
.frow span{flex:1}
.frow>svg:last-child{color:#7b879b}
.send{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;font-size:13.5px;padding:11px;margin-top:2px;box-shadow:0 10px 22px rgba(21,112,239,.26);transition:background .15s}
.send:hover{background:var(--blue-dark)}
.ghostb{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:12px;background:#f1f6ff;border:1px solid #dbe7fb;color:var(--blue);font-weight:600;font-size:13px;padding:9px;margin-top:6px}
.ghostb:hover{background:#e6f0ff}
.mock-map{padding:0;overflow:hidden;min-height:250px}
.mock-map .mapbg{position:absolute;inset:0;width:100%;height:100%}
.radar{position:absolute;left:50%;top:50%;width:0;height:0}
.radar i{position:absolute;border-radius:50%;border:1.5px dashed rgba(21,112,239,.45);left:0;top:0;transform:translate(-50%,-50%)}
.radar i:nth-child(1){width:64px;height:64px;background:rgba(21,112,239,.12)}
.radar i:nth-child(2){width:110px;height:110px}
.radar i:nth-child(3){width:170px;height:170px;opacity:.7}
.cdot{position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:0 0 0 10px rgba(21,112,239,.2)}
.chip{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);background:#fff;border-radius:16px;box-shadow:0 14px 30px rgba(12,34,76,.16);padding:6px 12px 6px 7px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.chip .ci{width:28px;height:28px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center}
.chip b{display:block;font-size:11.5px;color:var(--ink)}
.chip small{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.pinx{position:absolute;width:36px;height:44px;transform:translate(-50%,-100%);filter:drop-shadow(0 8px 10px rgba(12,34,76,.22))}
.pinx svg{width:100%;height:100%;display:block}
.pinx img{position:absolute;left:5px;top:4px;width:26px;height:26px;border-radius:50%;object-fit:cover}
.mock-tl{padding:12px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.tl-line{position:absolute;left:25px;top:30px;bottom:48px;width:2px;background:#d9e5f8}
.tli{display:flex;gap:10px;align-items:flex-start;position:relative}
.td{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;position:relative;z-index:1}
.td.done{background:var(--blue)}
.td.cur{background:#e4eeff;box-shadow:0 0 0 0 rgba(21,112,239,.35)}
.td.cur i{width:12px;height:12px;border-radius:50%;background:var(--blue)}
.td.ppl{background:#e9f0ff;color:var(--blue)}
.td.wait{background:#e4e8ef}
.td.wait::after{content:"";width:10px;height:10px;border-radius:50%;background:#c9d1de}
.tb{flex:1;min-width:0}
.tr{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tr b{font-size:12.5px;color:var(--ink)}
.tr time{font-size:11px;color:#9aa5b8}
.tb small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.mute b{color:#6b7280;font-weight:600}
.tav{display:flex;align-items:center;gap:0;margin-top:5px}
.tav img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 6px rgba(12,34,76,.18)}
.tav img+img{margin-left:-8px}
.tav .go{margin-left:auto;color:#7b879b}
.mock-master{padding:11px 10px;display:flex;flex-direction:column;justify-content:space-between}
.mock-form{display:flex;flex-direction:column;justify-content:space-between}
.mm-top{display:flex;gap:10px;align-items:center;margin-bottom:9px}
.mm-ava{position:relative;width:54px;height:54px;flex-shrink:0}
.mm-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mm-ava i{position:absolute;right:1px;bottom:2px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2.5px solid #fff}
.mm-top b{font-size:14px;color:var(--ink)}
.mm-rate{display:flex;align-items:center;gap:4px;margin:2px 0;font-size:12px;white-space:nowrap}
.mm-rate strong{color:var(--ink)}
.mm-rate span{color:var(--muted)}
.mm-top small{font-size:11.5px;color:var(--muted)}
.mm-chips{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.mm-chips span{display:flex;align-items:center;gap:6px;background:#f1f5fc;border-radius:9px;padding:6px 7px;font-size:11px;color:#334155;line-height:1.15}
.mm-chips svg{color:var(--blue);flex-shrink:0}
@supports not (grid-template-rows:subgrid){
  .hcard{display:flex;flex-direction:column}
  .hmock{margin-top:auto}
}
.js .how8 .hcard{opacity:0;transform:translateY(26px)}
.js .how8.in .hcard{animation:hRise .8s cubic-bezier(.2,.8,.2,1) both}
.js .how8.in .hcard:nth-child(1){animation-delay:0s}
.js .how8.in .hcard:nth-child(2){animation-delay:.25s}
.js .how8.in .hcard:nth-child(3){animation-delay:.5s}
.js .how8.in .hcard:nth-child(4){animation-delay:.75s}
@keyframes hRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .how8 .harrow{opacity:0}
.js .how8.in .harrow{animation:hArrow .6s ease-out both}
.js .how8.in .hcard:nth-child(1) .harrow{animation-delay:.9s}
.js .how8.in .hcard:nth-child(2) .harrow{animation-delay:1.15s}
.js .how8.in .hcard:nth-child(3) .harrow{animation-delay:1.4s}
@keyframes hArrow{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.js .how8 .pinx{opacity:0}
.js .how8.in .pinx{animation:hPin .6s cubic-bezier(.2,1.3,.4,1) var(--d,1s) both}
@keyframes hPin{from{opacity:0;transform:translate(-50%,-100%) translateY(-18px) scale(.8)}to{opacity:1;transform:translate(-50%,-100%)}}
.radar i{animation:hRadar 3.2s ease-in-out infinite}
.radar i:nth-child(2){animation-delay:.5s}
.radar i:nth-child(3){animation-delay:1s}
@keyframes hRadar{0%,100%{opacity:.9}50%{opacity:.35}}
.js .how8 .tli{opacity:0;transform:translateX(-12px)}
.js .how8.in .tli{animation:hTl .6s ease-out both}
.js .how8.in .t1{animation-delay:1.0s}
.js .how8.in .t2{animation-delay:1.35s}
.js .how8.in .t3{animation-delay:1.7s}
.js .how8.in .t4{animation-delay:2.05s}
@keyframes hTl{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.td.cur{animation:hCur 2.2s ease-out 2.4s infinite}
@keyframes hCur{0%{box-shadow:0 0 0 0 rgba(21,112,239,.35)}100%{box-shadow:0 0 0 12px rgba(21,112,239,0)}}
@media (max-width:1200px){
  .how-grid{gap:28px}
  .harrow{right:-27px}
  .hcard{padding:14px 12px 12px}
}
@media (max-width:1060px){
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .harrow{display:none}
}
@media (max-width:640px){
  .how8{padding:44px 0}
  .how-grid{grid-template-columns:1fr}
  .how-head{margin-bottom:22px}
  .mock-map{min-height:290px}
}
@media (prefers-reduced-motion:reduce){
  .js .how8 .hcard,.js .how8 .harrow,.js .how8 .pinx,.js .how8 .tli{opacity:1;transform:none;animation:none}
  .radar i,.td.cur{animation:none}
}
@media (min-width:981px){
  .how-head{max-width:none;margin-bottom:20px}
  .how-head h2{margin:14px 0 22px}
  .how-head p{max-width:none}
}