.pin{animation:pulse 2.6s ease-in-out infinite}
.pin:nth-of-type(2n){animation-delay:.8s}
.pin:nth-of-type(3n){animation-delay:1.5s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.72}}
.m8{padding:36px 0 88px}
.m8-card{position:relative;border-radius:32px;overflow:hidden;background:#f4f5f2;border:1px solid #ececf0;box-shadow:0 18px 50px rgba(15,23,42,.07);min-height:320px;display:flex;align-items:center}
.m8-card svg.bg{position:absolute;inset:0;width:100%;height:100%}
.m8-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fbfbfa 0%,rgba(251,251,250,.96) 26%,rgba(251,251,250,0) 56%);pointer-events:none}
.m8-text{position:relative;z-index:2;padding:44px clamp(24px,3.4vw,52px);max-width:520px}
.m8-text h2{font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-0.025em}
.m8-text p{font-size:clamp(16px,1.5vw,21px);color:#6b7280;line-height:1.5;margin:18px 0 28px;font-weight:400}
.btn-white-line{background:#fff;border:1px solid #dcdee4;color:var(--ink);font-weight:600;padding:16px 26px;border-radius:14px}
.btn-white-line:hover{border-color:#bfc3cc;box-shadow:0 8px 20px rgba(15,23,42,.08)}
.worker{position:absolute;z-index:3;right:clamp(24px,10%,150px);top:28px;background:#fff;border-radius:20px;box-shadow:0 18px 44px rgba(15,23,42,.14);padding:14px 20px 14px 14px;display:flex;gap:14px;align-items:flex-start;min-width:230px}
.worker img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}
.worker b{display:block;font-size:15px;color:var(--ink)}
.worker .rate{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:2px 0}
.worker .rate svg{color:#f5a623}
.worker .job{font-size:13px;color:var(--muted)}
.worker .free{display:inline-block;margin-top:8px;background:#e7f6ec;color:#1f7a45;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.bigpin{animation:halo 2.8s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes halo{0%{opacity:.55;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
@media (max-width:1100px){
  .worker{right:20px}
}
@media (max-width:900px){
  .m8-card{align-items:flex-start;min-height:520px}
  .m8-card::after{background:linear-gradient(180deg,#fbfbfa 0%,#fbfbfa 36%,rgba(251,251,250,0) 60%)}
  .worker{top:auto;bottom:24px;right:20px}
}
@media (max-width:640px){
  .worker{left:20px;right:20px}
  .m8-text{padding:32px 22px}
}