/* =========================================================
   FLAR3 live mockups — the phone and the Circle dashboard are small working apps (simulated).
   ========================================================= */

/* ---------- glass surfaces (shared with the Android app's look) ---------- */
.card,.pillar,.product,.frame,.mcol,.engine,.alt,.ws,.type,.feature,.step-card,.faq details,.cta,.stats,.demo-stage,.dash,.quote{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -40px rgba(0,0,0,.8)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.pillar,.product,.frame,.mcol,.feature,.step-card,.cta,.stats,.demo-stage,.dash,.quote{backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
}
.card.hl,.feature.hl{border-color:var(--accent-line);background:linear-gradient(160deg,rgba(255,91,53,.16),rgba(255,255,255,.03))}

/* ---------- phone shell ---------- */
.lphone{--pw:min(19.5rem,82vw);position:relative;width:var(--pw);aspect-ratio:9/19;border-radius:2.7rem;background:linear-gradient(160deg,#141418,#0a0a0d);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 7px #050506,0 0 0 8px rgba(255,255,255,.1),0 0 80px -10px rgba(255,91,53,.25);
  padding:2.1rem .95rem 4.1rem;display:flex;flex-direction:column;overflow:hidden;font-size:.7rem;user-select:none;-webkit-user-select:none;isolation:isolate}
.lphone::before{content:"";position:absolute;inset:0;background:radial-gradient(20rem 14rem at 50% -10%,rgba(255,91,53,.16),transparent 70%);pointer-events:none;z-index:-1}
.lphone::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 30%);pointer-events:none}
.lp-island{position:absolute;top:.6rem;left:50%;width:5.6rem;height:1.35rem;margin-left:-2.8rem;border-radius:99px;background:#000;z-index:3}
.lphone .ph-status{position:absolute;top:.75rem;left:1.5rem;right:1.4rem;font-size:.62rem}
.lp-sig{display:inline-flex;align-items:flex-end;gap:1.5px}
.lp-sig i{display:inline-block;width:2.5px;background:var(--soft);border-radius:1px}
.lp-sig i:nth-child(1){height:3px}.lp-sig i:nth-child(2){height:5px}.lp-sig i:nth-child(3){height:7px}.lp-sig i:nth-child(4){height:9px;opacity:.4}
.lp-screens{position:relative;flex:1}
.lp-screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:.55rem;opacity:0;visibility:hidden;transform:translateX(16px) scale(.98);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s .5s}
.lp-screen.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s}
.lp-screen.back{transform:translateX(-16px) scale(.98)}
.lphone button{font:inherit;color:inherit;text-align:inherit}
.lp-flare{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)}
.lp-flare .i{width:1rem;height:1rem;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(1)}}
.lphone .ph-hello b{font-size:1rem}
.lphone .lbl{font-size:.58rem}
.lphone .ph-loc{font-size:.6rem}
.lphone .ph-loc i{animation:livedot 1.4s ease-in-out infinite}
@keyframes livedot{50%{box-shadow:0 0 0 6px rgba(79,211,156,0)}}
.lphone .ph-card{width:100%;display:block;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);cursor:pointer;transition:border-color .25s,background .25s}
.lphone .ph-card .row{display:flex}
.lphone button.ph-card:hover{border-color:var(--violet-line);background:var(--violet-soft)}
.lphone .ph-bar i{animation:none;transition:width .6s linear}
.lphone .ph-quick button{border:1px solid var(--line);border-radius:10px;padding:.45rem .2rem;text-align:center;font-size:.58rem;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:.2rem;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.lphone .ph-quick button:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.lphone .ph-quick button:active{transform:scale(.95)}
.lphone .ph-quick b{font-family:var(--display);font-size:.85rem;color:var(--accent)}

/* SOS hold */
.lp-hold{position:relative;width:58%;aspect-ratio:1;border-radius:50%;cursor:pointer;touch-action:none;-webkit-touch-callout:none;display:grid;place-items:center}
.lp-ring{position:absolute;inset:-9%;width:118%;height:118%;transform:rotate(-90deg);overflow:visible}
.lp-ring circle{fill:none;stroke-width:3}
.lp-ring .t{stroke:rgba(255,91,53,.18)}
.lp-ring .f{stroke:#fff;stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
.lp-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff7a57,var(--accent) 55%,#d23d1c);display:grid;place-content:center;text-align:center;animation:sosPulse 2.2s ease-in-out infinite;transition:transform .2s}
.lp-hold.pressing .lp-core{transform:scale(.93);animation-duration:.6s}
.lp-core b{font-family:var(--display);font-size:1.6rem;letter-spacing:.06em;color:#fff;line-height:1}
.lp-core span{font-size:.5rem;color:rgba(255,255,255,.85);letter-spacing:.06em;text-transform:uppercase}

/* countdown */
.lp-alert{align-items:center;justify-content:center;text-align:center;gap:.9rem}
.lp-alert::before{content:"";position:absolute;inset:-3rem -1.2rem -5rem;background:radial-gradient(circle at 50% 45%,rgba(255,91,53,.35),transparent 60%);animation:alarm 1s ease-in-out infinite;z-index:-1}
@keyframes alarm{50%{opacity:.4}}
.lp-count{position:relative;width:8.5rem;height:8.5rem;display:grid;place-items:center}
.lp-count svg{position:absolute;inset:0;transform:rotate(-90deg)}
.lp-count circle{fill:none;stroke:rgba(255,255,255,.1);stroke-width:4}
.lp-count circle.f{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:0}
.lp-count b{font-family:var(--display);font-size:3.6rem;font-weight:600;line-height:1;letter-spacing:-.04em}
.lp-count b.tick{animation:tick .5s var(--ease)}
@keyframes tick{from{transform:scale(1.4);opacity:.2}}
.lp-small{color:var(--muted);font-size:.66rem}
.lp-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.62rem;border-radius:12px;font-weight:600;font-size:.7rem;cursor:pointer;border:1px solid var(--line2);transition:transform .15s,background .2s,border-color .2s}
.lp-btn:active{transform:scale(.97)}
.lp-btn.ghost{background:rgba(255,255,255,.05)}
.lp-btn.ghost:hover{border-color:rgba(255,255,255,.3)}
.lp-btn.red{background:var(--accent);border-color:var(--accent);color:#170905}
.lp-btn.green{background:var(--green-soft);border-color:var(--green-line);color:var(--green);margin-top:auto}
.lp-btn .i{width:.95rem;height:.95rem}

/* sent */
.lp-banner{display:flex;align-items:center;gap:.45rem;padding:.5rem .65rem;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);font-weight:600;font-size:.64rem}
.lp-banner i{width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);animation:alarm .8s infinite}
.lp-loc{display:flex;align-items:center;gap:.4rem;font-size:.62rem;color:var(--soft);border:1px dashed var(--line2);border-radius:10px;padding:.45rem .6rem}
.lp-loc .i{width:.85rem;height:.85rem;color:var(--green)}
.lp-rows{display:flex;flex-direction:column;gap:.35rem}
.lp-row{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;padding:.42rem .55rem;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease),border-color .3s}
.lp-row.show{opacity:1;transform:none}
.lp-row small{display:block;font-size:.52rem;color:var(--dim)}
.lp-row em{font-style:normal;font-size:.56rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lp-row[data-s="sent"] em{color:var(--violet)}
.lp-row[data-s="delivered"]{border-color:var(--green-line)}.lp-row[data-s="delivered"] em{color:var(--green)}
.lp-row[data-s="failed"]{border-color:var(--accent-line)}.lp-row[data-s="failed"] em{color:var(--accent)}
.lp-screen[data-screen="sent"] .lp-btn.red{margin-top:auto}

/* journey */
.lp-jhead{display:flex;justify-content:space-between;align-items:center}
.lp-jhead b{font-family:var(--display);font-size:.95rem;font-weight:500}
.lp-map{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.lp-map svg{display:block;width:100%;height:auto}
.lp-route{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.lp-me-pulse{animation:mepulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mepulse{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.lp-jstats{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.lp-jstats div{border:1px solid var(--line);border-radius:10px;padding:.4rem;text-align:center;background:rgba(255,255,255,.03)}
.lp-jstats b{display:block;font-family:var(--display);font-size:1rem;font-weight:600}
.lp-jstats span{font-size:.52rem;color:var(--muted)}

/* help */
.lp-chips{display:flex;gap:.3rem;flex-wrap:wrap}
.lp-chips button{padding:.28rem .55rem;border-radius:99px;border:1px solid var(--line2);font-size:.58rem;color:var(--soft);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.lp-chips button.on{background:var(--accent);border-color:var(--accent);color:#170905;font-weight:600}
.lp-dir{display:flex;flex-direction:column;gap:.35rem}
.lp-d{display:grid;grid-template-columns:2.6rem 1fr;gap:.55rem;align-items:center;padding:.48rem .55rem;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;transition:transform .35s var(--ease),opacity .3s,border-color .2s,background .2s}
.lp-d:hover{border-color:var(--sand-line);background:var(--sand-soft)}
.lp-d.off{display:none}
.lp-d b{font-family:var(--display);font-size:.95rem;color:var(--sand);font-weight:600}
.lp-d b small{font-size:.55rem;color:var(--muted);margin-left:1px}
.lp-d span small{display:block;font-size:.54rem;color:var(--dim)}
.lp-d.pop{animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}

/* tab bar, toast, ghost finger */
.lp-tabs{position:absolute;left:.7rem;right:.7rem;bottom:.7rem;display:grid;grid-template-columns:repeat(3,1fr);padding:.3rem;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lp-tabs button{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem 0;border-radius:13px;font-size:.55rem;color:var(--muted);cursor:pointer;transition:color .25s,background .25s}
.lp-tabs button .i{width:1rem;height:1rem}
.lp-tabs button.on{color:var(--text);background:rgba(255,255,255,.09)}
.lp-tabs button.on .i{color:var(--accent)}
.lp-toast{position:absolute;left:1rem;right:1rem;top:2.4rem;z-index:5;padding:.6rem .7rem;border-radius:14px;background:rgba(30,30,36,.92);border:1px solid var(--line2);font-size:.64rem;box-shadow:0 14px 30px -10px rgba(0,0,0,.8);transform:translateY(-140%);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.lp-toast.show{transform:none;opacity:1}
.lp-finger{position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;border-radius:50%;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.7);box-shadow:0 0 0 6px rgba(255,255,255,.08);pointer-events:none;z-index:6;opacity:0;transition:transform .7s var(--ease),opacity .3s}
.lp-finger.on{opacity:1}
.lp-finger.tap{animation:ftap .35s ease}
@keyframes ftap{50%{scale:.75}}
.lp-flash{position:absolute;inset:0;background:var(--accent);opacity:0;pointer-events:none;z-index:4}
.lp-flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.5}100%{opacity:0}}
.lp-caption{display:flex;align-items:center;gap:.5rem;justify-content:center;font-size:.8rem;color:var(--muted);margin-top:1.1rem;text-align:center}
.lp-caption i{width:.45rem;height:.45rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(79,211,156,.15);animation:livedot 1.4s infinite}

/* ---------- Circle dashboard (working tabs) ---------- */
.dash{animation:none;font-size:.8rem}
.dash-tabs{gap:.25rem}
.dash-tabs button{font-size:.76rem;color:var(--muted);padding:.35rem .7rem;border-radius:99px;cursor:pointer;transition:color .2s,background .2s}
.dash-tabs button[aria-selected="true"]{color:#1a1206;background:var(--sand);font-weight:600}
.dash-view{display:none;padding:.8rem;gap:.7rem}
.dash-view.on{display:grid;animation:dashIn .5s var(--ease)}
@keyframes dashIn{from{opacity:0;transform:translateY(10px)}}
.dash-view[data-v="home"]{grid-template-columns:1.35fr 1fr}
.dash-view .dpanel{background:rgba(255,255,255,.035)}
.map .pin{cursor:pointer}
.map .pin text{opacity:0;transition:opacity .25s}
.map .pin:hover text,.map .pin.on text{opacity:1}
.map .walker{filter:drop-shadow(0 0 6px #d8c3a2)}
.mod{display:grid;grid-template-columns:1.8rem 1fr auto;gap:.6rem;align-items:center;padding:.55rem .65rem;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s}
.mod:hover{border-color:var(--sand-line)}
.mod.on{border-color:var(--sand-line);background:var(--sand-soft)}
.mod .mn{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--sand-line);color:var(--sand);font-size:.7rem;font-weight:600}
.mod.done .mn{background:var(--sand);color:#1a1206}
.mod .course-bar{margin-top:.3rem}
.mod .course-bar i{transition:width 1.2s var(--ease)}
.mod em{font-style:normal;font-size:.68rem;color:var(--muted)}
.dsearch{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line2);border-radius:10px;padding:.45rem .65rem;color:var(--muted)}
.dsearch input{flex:1;background:none;border:0;color:var(--text);font:inherit;outline:none;min-width:0}
.dchips{display:flex;gap:.35rem;flex-wrap:wrap}
.dchips button{font-size:.72rem;padding:.3rem .65rem;border-radius:99px;border:1px solid var(--line2);color:var(--soft);cursor:pointer}
.dchips button.on{background:var(--sand);border-color:var(--sand);color:#1a1206;font-weight:600}
.dlist .dir-row{animation:dashIn .35s var(--ease)}
.dlist .dir-row[hidden]{display:none}
.devent{display:grid;grid-template-columns:3rem 1fr auto;gap:.7rem;align-items:center;padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px}
.devent .dd{text-align:center;border-radius:8px;background:var(--sand-soft);border:1px solid var(--sand-line);padding:.3rem 0;line-height:1.1}
.devent .dd b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--sand)}
.devent .dd small{font-size:.6rem;color:var(--muted);text-transform:uppercase}
.devent h5{font-family:var(--display);font-weight:500;font-size:.9rem}
.devent p{font-size:.7rem;color:var(--muted)}
.rsvp{font-size:.72rem;padding:.4rem .75rem;border-radius:99px;border:1px solid var(--sand-line);color:var(--sand);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.rsvp:active{transform:scale(.95)}
.rsvp.on{background:var(--sand);color:#1a1206;font-weight:600}
@media (max-width:860px){.dash-view[data-v="home"]{grid-template-columns:1fr}.dash-tabs button{padding:.3rem .5rem;font-size:.7rem}}

@media (prefers-reduced-motion:reduce){
  .lp-screen{transition:none}
  .lp-route,.lp-me-pulse,.lp-alert::before,.lp-core{animation:none}
}
.hero-phone{flex-direction:column;align-items:center}
.lphone .ph-bar{display:block}
.lphone .ph-card .row{justify-content:space-between;align-items:center;gap:.4rem}