/* RealtyMind Homes promo band, shared by index, agents, brokerages and for-agents. Tokens from site.css. */
/* ======================================================
   Promo section used on agents, brokerages, for-agents and the homepage:
   "Your listings, in front of every RealtyMind buyer"
   ====================================================== */
.hpromo{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 85% 10%,color-mix(in srgb,var(--sea) 14%,transparent),transparent 60%),radial-gradient(800px 500px at 0% 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--bg)}
.hpromo .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.hpromo h2 .g{background:linear-gradient(90deg,var(--accent),var(--sea));-webkit-background-clip:text;background-clip:text;color:transparent}
.hpromo .pts{display:flex;flex-direction:column;gap:12px;margin:6px 0 4px;padding:0;list-style:none}
.hpromo .pts li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.hpromo .pts li i{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-style:normal}
.hpromo .pts li b{display:block}
.hpromo .pts li span{color:var(--muted);font-size:14.5px}
.hp-ill{position:relative;aspect-ratio:1.15/1;max-width:600px;width:100%;margin-inline:auto}
.hp-ill svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hp-ill .wire{fill:none;stroke:color-mix(in srgb,var(--accent) 35%,var(--line));stroke-width:2;stroke-dasharray:4 6;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.hp-ill .packet{fill:var(--accent)}
.hp-brk{position:absolute;left:0;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 12px 8px 8px;box-shadow:var(--shadow);font-size:13px;font-weight:750;white-space:nowrap;animation:float 6s ease-in-out infinite}
.hp-brk .lg{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:850}
.hp-brk small{display:block;font-size:10.5px;color:var(--faint);font-weight:650}
.hp-brk.b1{top:6%}.hp-brk.b2{top:30%;animation-delay:-1.5s}.hp-brk.b3{top:54%;animation-delay:-3s}.hp-brk.b4{top:78%;animation-delay:-4.5s}
.hp-mk{position:absolute;right:0;top:8%;width:62%;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.hp-mk .bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:800}
.hp-mk .bar .hb{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--sea));color:#fff}
.hp-mk .sb{margin-left:auto;flex:1;max-width:130px;height:22px;border-radius:99px;background:var(--sunk)}
.hp-mk .gr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.hp-li{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface);position:relative;opacity:0;transform:translateY(10px) scale(.96);animation:liin 9s ease-in-out infinite}
.hp-li img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.hp-li .t{padding:5px 7px 6px;display:flex;flex-direction:column;gap:3px}
.hp-li .t i{display:block;height:6px;border-radius:3px;background:var(--line)}
.hp-li .t i:first-child{width:55%;height:8px;background:var(--ink);opacity:.75}
.hp-li .t i:nth-child(2){width:80%}
.hp-li .t .lb{height:auto;background:none;font-style:normal;font-size:8.5px;font-weight:750;color:var(--faint);display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden}
.hp-li .t .lb s{width:6px;height:6px;border-radius:2px;flex:none;text-decoration:none}
.hp-li:nth-child(1){animation-delay:0s}.hp-li:nth-child(2){animation-delay:.6s}.hp-li:nth-child(3){animation-delay:1.2s}.hp-li:nth-child(4){animation-delay:1.8s}
@keyframes liin{0%{opacity:0;transform:translateY(10px) scale(.96)}8%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px) scale(.98)}}
.hp-li .hh2{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#E0245E;transform:scale(0);animation:hh2 9s ease infinite}
.hp-li:nth-child(1) .hh2{animation-delay:2.4s}.hp-li:nth-child(4) .hh2{animation-delay:3.4s}
.hp-li .hh2 svg{fill:currentColor;width:11px;height:11px}
@keyframes hh2{0%,20%{transform:scale(0)}26%{transform:scale(1.3)}30%,78%{transform:scale(1)}86%,100%{transform:scale(0)}}
.hp-buyers{position:absolute;right:4%;bottom:0;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:var(--shadow-lg);font-size:13px;font-weight:700;animation:float 6s ease-in-out infinite;animation-delay:-2s}
.hp-buyers .faces{display:flex}
.hp-buyers .faces span{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);margin-left:-8px;display:grid;place-items:center;color:#fff}
.hp-buyers .faces span:first-child{margin-left:0}
.hp-buyers .faces svg{width:14px;height:14px}
.hp-ping{position:absolute;right:56%;bottom:12%;display:flex;gap:8px;align-items:center;background:var(--ink);color:var(--bg);border-radius:12px;padding:8px 12px;font-size:12px;font-weight:700;box-shadow:var(--shadow-lg);animation:ping 9s ease infinite}
@keyframes ping{0%,30%{opacity:0;transform:translateY(8px)}36%,80%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(-6px)}}
@media (max-width:960px){.hpromo .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.hp-brk{font-size:11px;padding:6px 8px 6px 6px}.hp-brk .lg{width:22px;height:22px;font-size:10px}.hp-brk small{display:none}.hp-mk{width:60%}.hp-buyers{font-size:11.5px;padding:8px 10px}.hp-ping{font-size:10.5px;right:0;left:auto;top:-3%;bottom:auto}}
@media (prefers-reduced-motion:reduce){.hp-li{opacity:1;transform:none}.hp-li .hh2{transform:scale(1)}.hp-ping{opacity:1}}