/* Hero phone screen · "Just ask" chat (concept 4). Sized in em inside .hp-stage (10px = full size). Classes prefixed hc- to avoid clashes. */
.hc-wall { position:absolute; inset:0; background:url(https://archelaus.net/img/onejob/onejob-1152.webp) center/cover; }
.hc-wall::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,14,.72), rgba(8,10,14,.5) 45%, rgba(8,10,14,.8)); }
.hc-glass { background:rgba(14,18,26,.55); border:1px solid rgba(255,255,255,.14); color:#fff;
  -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3); }
.hc-head { position:absolute; z-index:3; top:4.8em; left:1.2em; right:1.2em; display:flex; align-items:center; gap:1em; padding:1em 1.2em; border-radius:2.2em; }
.hc-av { width:3.4em; height:3.4em; border-radius:50%; background:#0E151E; display:grid; place-items:center; }
.hc-av img { width:2.2em; height:2.2em; }
.hc-head b { display:block; font:600 1.45em/1.1 var(--sans); }
.hc-head small { display:flex; align-items:center; gap:.5em; margin-top:.35em; font:400 1.1em/1 var(--sans); color:#B9C2CF; }
.hc-head small i { width:.65em; height:.65em; border-radius:50%; background:#22B573; box-shadow:0 0 .8em #22B573; }
.hc-msgs { position:absolute; z-index:3; top:11.6em; bottom:9em; left:1.4em; right:1.4em; display:flex; flex-direction:column; justify-content:flex-end; gap:1em; }
.hc-b { display:none; max-width:84%; padding:1.1em 1.3em; border-radius:1.8em; font:400 1.3em/1.35 var(--sans); }
.hc-b.hc-show { display:block; animation:hcIn .5s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes hcIn { from { opacity:0; transform:translateY(1.2em) scale(.9); } }
.hc-me { align-self:flex-end; background:#F2B36B; color:#17110A; border-bottom-right-radius:.5em; transform-origin:100% 100%; }
.hc-it { align-self:flex-start; background:rgba(246,248,251,.96); color:#0E151E; border-bottom-left-radius:.5em; transform-origin:0 100%; }
.hc-typing { padding:1.2em 1.4em; }
.hc-typing i { display:inline-block; width:.55em; height:.55em; margin:0 .15em; border-radius:50%; background:#5B6472; animation:hcDots 1s ease-in-out infinite; }
.hc-typing i:nth-child(2) { animation-delay:.15s; } .hc-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes hcDots { 30% { transform:translateY(-.4em); opacity:.5; } }
.hc-inv { margin:.8em 0 1em; padding:0; list-style:none; display:grid; gap:.45em; }
.hc-inv li { display:flex; justify-content:space-between; padding:.55em .8em; border-radius:.8em; background:#E9EDF3; font:500 .82em/1 var(--mono); color:#2B3442; }
.hc-send { position:relative; display:block; text-align:center; padding:.75em; border-radius:1em; background:#F2B36B; font-weight:600; color:#17110A; transition:background .4s, color .4s; }
.hc-send em { font-style:normal; }
.hc-send.ok { background:#22B573; color:#fff; }
.hc-send.ok::before { content:''; position:absolute; inset:-.2em; border-radius:1.2em; border:.2em solid #22B573; animation:hcBurst .8s ease-out both; }
@keyframes hcBurst { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(1.15,1.7); } }
.hc-tap { position:absolute; left:62%; top:50%; width:2.3em; height:2.3em; margin:-1.15em 0 0 -1.15em; border-radius:50%;
  background:rgba(255,255,255,.35); border:.12em solid rgba(255,255,255,.95); box-shadow:0 0 0 .6em rgba(255,255,255,.14);
  opacity:0; transform:scale(1.6); transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.hc-tap.on { opacity:1; transform:scale(1); }
.hc-tap.press { transform:scale(.8); }
.hc-input { position:absolute; z-index:3; bottom:3.4em; left:1.4em; right:1.4em; display:flex; align-items:center; justify-content:space-between; padding:.5em .5em .5em 1.4em; border-radius:2.4em; }
.hc-input span { font:400 1.25em/1 var(--sans); color:#9AA3B1; }
.hc-input i { width:3.2em; height:3.2em; border-radius:50%; background:#F2B36B; display:grid; place-items:center; color:#17110A; font:700 1.1em/1 var(--sans); font-style:normal; }
.hc-home { position:absolute; z-index:6; bottom:.9em; left:50%; width:11em; height:.45em; margin-left:-5.5em; border-radius:1em; background:rgba(255,255,255,.85); }
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .hc-b.hc-show, html:not(.force-motion) .hc-typing i, html:not(.force-motion) .hc-send.ok::before { animation:none; }
}