/* How it works · 3 roles (buyers red / wholesalers purple / contractors orange). Reuses hw-dots / hw-cap / hw-ctl */
.h3w{--a:#ef4444;--a2:#ff8f9c;display:grid;gap:14px;width:100%;max-width:980px;margin:18px auto 0;min-width:0}
.h3w[data-role=w]{--a:#a855f7;--a2:#d8b4fe}.h3w[data-role=c]{--a:#f97316;--a2:#fdba74}.h3w[data-role=all]{--a:#e6ebf2;--a2:#fff}
.h3-roles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.h3-roles button{font:600 14px system-ui,sans-serif;color:#c1c9d4;background:#0d121b;border:1px solid #ffffff1f;border-radius:99px;padding:9px 16px;cursor:pointer}
.h3-roles button i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--c)}
.h3-roles button.on{color:#fff;border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,#0d121b)}
.h3w .hw-dots{justify-content:center}.h3w .hw-dots button{width:30px}
.h3w .hw-dots button.on{background:linear-gradient(90deg,var(--a2),var(--a))}.h3w .hw-dots button.done{background:color-mix(in srgb,var(--a) 50%,transparent)}
.h3w .hw-n{font-size:44px;background:linear-gradient(180deg,var(--a2),var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}
.h3w .hw-cap{min-height:0}.h3w .hw-cap h3{font-size:clamp(17px,2vw,22px)}.h3w .hw-cap p{font-size:14px}
.h3w .hw-bar i{background:linear-gradient(90deg,var(--a),var(--a2))}
.h3w .hw-b{background:#0d121b;border:1px solid #ffffff22;color:#fff;border-radius:10px;width:34px;height:34px;cursor:pointer;display:inline-grid;place-items:center;padding:0}
.h3-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;border:1px solid color-mix(in srgb,var(--a) 30%,transparent);overflow:hidden;background:radial-gradient(circle at 50% 55%,#11151f,#070a10 75%);box-shadow:0 30px 70px -40px var(--a)}
.h3-in{position:absolute;inset:0;width:640px;height:360px;transform:scale(var(--s,1));transform-origin:0 0;font:14px/1.35 system-ui,-apple-system,Segoe UI,sans-serif;color:#e6ebf2}
.h3w.paused .h3-in *{animation-play-state:paused!important}
.h3-in *{animation-fill-mode:both}.h3-in.still *{animation:none!important}
.h3-map{position:absolute;inset:0;width:100%;height:100%}
.h3-st{fill:#ffffff05;stroke:#ffffff1c;stroke-width:1.2}
.h3-z{position:absolute;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--zc);background:color-mix(in srgb,var(--zc) 20%,transparent);animation:h3pop .6s cubic-bezier(.3,1.5,.5,1)}
.h3-z.r{--zc:#ef4444}.h3-z.p{--zc:#a855f7}.h3-z.o{--zc:#f97316}
.h3-pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);background:var(--zc);border:2px solid #fff;animation:h3drop .5s ease-out}
.h3-pin.r{--zc:#ef4444}.h3-pin.p{--zc:#a855f7}.h3-pin.o{--zc:#f97316}
.h3-card{position:absolute;background:#0d121bf2;border:1px solid #ffffff1f;border-radius:14px;padding:12px 14px;box-shadow:0 18px 40px -20px #000;animation:h3up .5s ease-out}
.h3-card b{display:block;font-size:14px}.h3-card small{color:#9aa4b2;font-size:12px}
.h3-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid #ffffff12;font-size:12.5px;animation:h3up .4s ease-out}
.h3-row span{color:#9aa4b2}.h3-row em{font-style:normal;font-weight:600}
.h3-btn{display:inline-block;margin-top:8px;padding:7px 12px;border-radius:9px;font-weight:700;font-size:12.5px;color:#fff;background:var(--bc,#ef4444)}
.h3-btn.g{background:#ffffff14;border:1px solid #ffffff2a}.h3-btn.p{--bc:#a855f7}.h3-btn.o{--bc:#f97316}.h3-btn.ok{--bc:#16a34a}
.h3-chip{display:inline-block;margin:3px 4px 0 0;padding:3px 8px;border-radius:99px;font-size:11.5px;background:#ffffff12;border:1px solid #ffffff22}
.h3-m{max-width:70%;padding:8px 12px;border-radius:14px;font-size:13px;margin:6px 0;animation:h3up .4s ease-out}
.h3-m.l{background:#1a2130;border-bottom-left-radius:4px}.h3-m.rr{margin-left:auto;background:var(--a);color:#fff;border-bottom-right-radius:4px}
.h3-bell{position:absolute;right:22px;top:20px;width:40px;height:40px;border-radius:50%;background:#0d121b;border:1px solid #ffffff22;display:grid;place-items:center;font-size:18px;animation:h3ring 1s ease-in-out 1.2s 2}
.h3-bell i{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:#ef4444;font:700 10px/16px system-ui;color:#fff;text-align:center;font-style:normal}
.h3-cur{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:#ffffff44;transform:translate(-50%,-50%);animation:h3cur 2.6s ease-in-out .3s;pointer-events:none}
.h3-legend{position:absolute;left:16px;top:16px;display:flex;gap:6px;flex-wrap:wrap}
.h3-legend span{padding:6px 11px;border-radius:99px;font-size:12px;font-weight:600;background:#0d121be6;border:1px solid var(--zc);animation:h3up .4s ease-out}
.h3-legend span i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--zc);margin-right:6px}
.h3-sig{font:italic 22px 'Brush Script MT',cursive;color:#d8b4fe;border-bottom:1px dashed #ffffff44;padding:2px 0;overflow:hidden;white-space:nowrap;animation:h3type 1.4s steps(18) .8s}
.d1{animation-delay:.5s!important}.d2{animation-delay:1s!important}.d3{animation-delay:1.5s!important}.d4{animation-delay:2s!important}.d5{animation-delay:2.6s!important}.d6{animation-delay:3.2s!important}
@keyframes h3pop{from{transform:translate(-50%,-50%) scale(0);opacity:0}}
@keyframes h3drop{from{transform:translate(-50%,-180%) rotate(-45deg);opacity:0}}
@keyframes h3up{from{transform:translateY(10px);opacity:0}}
@keyframes h3ring{25%{transform:rotate(14deg)}75%{transform:rotate(-14deg)}}
@keyframes h3type{from{width:0}to{width:100%}}
@keyframes h3cur{0%{left:20%;top:80%;opacity:0}20%{opacity:1}}
@media (prefers-reduced-motion:reduce){.h3-in *{animation:none!important}}