/* Public website */
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);line-height:1.8}
a{color:var(--accent)}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;padding:12px max(20px,calc((100% - 1120px)/2));background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;color:var(--ink)}
.nav nav{display:flex;gap:4px;flex:1}
.nav nav a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:10px;font-weight:600;font-size:14.5px}
.nav nav a:hover,.nav nav a.on{color:var(--ink);background:var(--surface-2)}
.nav-cta{display:flex;gap:10px;align-items:center}.nav-cta .lang{color:var(--muted);font-size:13px;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:9px 18px;font:inherit;font-weight:700;font-size:14.5px;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.big{padding:13px 26px;font-size:16px;border-radius:14px}
.eyebrow{display:inline-block;background:rgb(255 255 255 / .12);border-radius:999px;padding:3px 14px;font-size:13px;font-weight:700;color:#F3D27A}
.sec{max-width:1120px;margin:0 auto;padding:70px 20px}
.sec.alt{max-width:none;background:var(--surface-2)}.sec.alt>*{max-width:1080px;margin-inline:auto}
.sec h2{font-size:28px;text-align:center;margin:0 0 30px}
.lead{text-align:center;color:var(--muted);margin:-18px 0 26px}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:13px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.card h3{margin:12px 0 6px;font-size:17px}.card p{margin:0;color:var(--muted);font-size:14.5px}
.fi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.steps>div{background:var(--surface);border-radius:18px;padding:22px;border:1px solid var(--line)}
.steps b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:18px}
.steps h3{margin:12px 0 4px}.steps p{margin:0;color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;max-width:820px;margin:0 auto}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
.plan.best{border:2px solid var(--accent)}
.plan .rib{position:absolute;top:16px;inset-inline-end:16px;background:#F3D27A;color:#0A3B47;font-size:12px;font-weight:800;padding:2px 12px;border-radius:999px}
.plan h3{margin:0;font-size:19px}.plan .price{font-size:28px;font-weight:800;color:var(--accent)}.plan .price small{font-size:14px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;margin:8px 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;flex:1}.plan li.off{color:var(--muted)}
.order{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.order label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--muted)}
.order input,.order select{font:inherit;font-size:15px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);color:var(--ink)}
.invoice{border:1px dashed var(--accent);border-radius:14px;padding:14px 16px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));display:flex;flex-direction:column;gap:4px}
.invoice div{display:flex;justify-content:space-between;gap:10px}.invoice .tot{font-weight:800;font-size:17px;border-top:1px solid var(--line);padding-top:6px;margin-top:4px}.invoice small{color:var(--muted)}
.ok{background:var(--ok-soft);color:var(--ok);padding:12px 14px;border-radius:12px;font-weight:700}
.faq{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--surface-2);border-radius:14px;padding:14px 18px}.faq summary{cursor:pointer;font-weight:700}.faq p{margin:8px 0 0;color:var(--muted)}
.doc{max-width:820px}.doc h1{font-size:30px}.doc h2{text-align:start;font-size:19px;margin:26px 0 8px}
.contact{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border-radius:16px;padding:10px 18px;margin:10px 0 18px}
.crow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.crow:last-child{border-bottom:0}.crow span{color:var(--muted)}
.foot{background:#0A2E37;color:#C9DADC;margin-top:30px}
.fwrap{max-width:1120px;margin:0 auto;padding:46px 20px 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:30px}
.fcol{display:flex;flex-direction:column;gap:6px;font-size:14px}.fcol b{color:#fff;margin-bottom:4px}.fcol a{color:#C9DADC;text-decoration:none}.fcol a:hover{color:#fff}
.foot .pan-logo{color:#fff;--pan-rim:#37BBAA}
.copy{text-align:center;font-size:12.5px;opacity:.6;padding:14px;margin:0;border-top:1px solid rgb(255 255 255 / .08)}
@media (max-width:820px){.nav nav{display:none}.fwrap{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.nav-cta .btn{padding:7px 12px;font-size:13px}.fwrap{grid-template-columns:1fr}.sec{padding:50px 16px}}

/* ================= Home: motion site ================= */
@font-face{font-family:"Vazirmatn";src:url(/static/fonts/Vazirmatn-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
:root{--st-a:#F4FBFA;--st-b:#DCF1EE;--st-ink:#0A2E37;--st-mid:#4E7479;--st-line:#C3E2DE;--st-glass:rgb(255 255 255 / .62);--teal:#0E7C86;--teal-2:#14B8A6;--gold:#D9A43A;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--st-a:#05181D;--st-b:#0A2B32;--st-ink:#E6F6F4;--st-mid:#8DB2B4;--st-line:#1D4A50;--st-glass:rgb(8 38 44 / .62);--teal:#2DD4BF;--teal-2:#5EEAD4;--gold:#F3D27A}}
body.home{background:var(--st-a)}
body.home .nav{position:fixed;inset:0 0 auto 0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .3s,border-color .3s,backdrop-filter .3s}
body.home .nav.solid{background:color-mix(in srgb,var(--st-a) 80%,transparent);border-bottom-color:var(--st-line);backdrop-filter:blur(14px) saturate(1.4)}
body.home .nav nav a{color:var(--st-mid)}body.home .nav .brand{color:var(--st-ink)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--teal) 10%,transparent);border:1px solid color-mix(in srgb,var(--teal) 25%,transparent);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:700;color:var(--teal)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal-2) 25%,transparent);animation:beat 1.6s infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.5)}30%{transform:scale(1)}45%{transform:scale(1.35)}}
.home .btn.primary{background:linear-gradient(135deg,var(--teal),#0A5C66);border:0;color:#fff;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--teal) 70%,transparent)}
.home .btn.ghost{color:var(--st-ink);border-color:var(--st-line);background:var(--st-glass);backdrop-filter:blur(8px)}

/* --- 3D stage (static by default; .live = pinned and scroll-driven) --- */
.stage{position:relative;background:radial-gradient(120% 80% at 50% 35%,var(--st-a),var(--st-b));color:var(--st-ink)}
.stage .stick{position:relative;padding:120px 20px 60px}
.stage canvas,.stage .leads,.stage .hud,.stage .outro,.stage .hint{display:none}
.stage .intro{max-width:860px;margin:0 auto;text-align:center}
.stage h1{font-size:clamp(34px,5.4vw,70px);line-height:1.25;font-weight:800;margin:16px 0 14px;letter-spacing:-.01em;background:linear-gradient(180deg,var(--st-ink) 30%,color-mix(in srgb,var(--st-ink) 55%,var(--teal)));-webkit-background-clip:text;background-clip:text;color:transparent}
.stage .intro p{font-size:clamp(15px,1.5vw,18px);color:var(--st-mid);max-width:620px;margin:0 auto}
.stage .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.stage .still{display:grid;place-items:center;margin:40px 0 20px;--pan-rim:#0A3B47;color:var(--st-ink)}
.stage .tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;max-width:1080px;margin:0 auto}
.tag{background:var(--st-glass);border:1px solid var(--st-line);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(10px)}
.tag small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--teal);direction:ltr;text-align:end}
.tag b{font-size:18px;color:var(--st-ink)}.tag span{font-size:13.5px;color:var(--st-mid);line-height:1.6}
.stage.live{height:540vh}
.stage.live .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.stage.live canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.stage.live .leads{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.leads path{fill:none;stroke:var(--teal);stroke-width:1.3;opacity:.8}
.leads circle{fill:var(--teal)}.leads circle.ring{fill:none;stroke:var(--teal);stroke-width:1.2;opacity:.35}
.leads g.on circle.ring{animation:ping 1.6s infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.2);opacity:0}}
.stage.live .still{display:none}
.stage.live .intro{position:absolute;inset:clamp(90px,13vh,150px) 0 auto;margin:0 auto;padding:0 20px;z-index:2;will-change:opacity,transform}
.stage.live .tags{display:block;margin:0;max-width:none}
.stage.live .tag{position:absolute;top:50%;width:min(270px,24vw);transform:translateY(-50%);opacity:0;transition:border-color .3s,box-shadow .3s;z-index:2}
.stage.live .tag.r{right:min(6vw,90px)}.stage.live .tag.l{left:min(6vw,90px)}
.stage.live .tag.on{border-color:color-mix(in srgb,var(--teal) 55%,transparent);box-shadow:0 18px 50px -20px color-mix(in srgb,var(--teal) 60%,transparent)}
.stage.live .hud{display:block;position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--st-mid);direction:ltr}
.hud .hl{position:absolute;top:84px;left:4vw}.hud .hl em{color:var(--gold);font-style:normal}
.hud .hr{position:absolute;bottom:40px;right:4vw;opacity:var(--k,0);transition:opacity .3s}.hud .n{color:var(--teal);font-size:22px;font-family:var(--font);font-weight:800;letter-spacing:0}
.hud .bar{position:absolute;bottom:26px;left:4vw;right:4vw;height:2px;background:var(--st-line);border-radius:2px;overflow:hidden}
.hud .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-2),var(--gold));transform-origin:left;transform:scaleX(0)}
[dir=rtl] .hud .bar i{transform-origin:right}
[dir=ltr] .tag small{text-align:left}
.stage.live .outro{display:block;position:absolute;inset:auto 0 clamp(60px,11vh,120px);text-align:center;padding:0 20px;opacity:0;z-index:2}
.outro h2{font-size:clamp(26px,3.6vw,48px);font-weight:800;margin:0 0 6px;color:var(--st-ink)}.outro p{margin:0;color:var(--st-mid)}
.stage.live .hint{display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;bottom:46px;inset-inline-start:4vw;font-size:12px;color:var(--st-mid)}
.hint span{width:22px;height:34px;border:2px solid var(--st-mid);border-radius:12px;position:relative;opacity:.7}
.hint span::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--st-mid);animation:wheel 1.6s infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}80%{transform:translateY(10px);opacity:0}100%{opacity:0}}
@media (max-width:760px){
  .stage.live{height:480vh}
  .stage.live .intro{inset:96px 0 auto}
  .stage.live .intro p{display:none}
  .stage.live .tag{left:16px!important;right:16px!important;top:auto;bottom:70px;width:auto;transform:none;text-align:center;align-items:center}
  .tag small{text-align:center}
  .hud .hl{top:72px}.hud .hr{display:none}.stage.live .hint{inset-inline-start:0;left:0;right:0}
}

/* --- manifesto: words light up --- */
.manifesto{background:var(--st-a);color:var(--st-ink);padding:clamp(80px,16vh,180px) 20px}
.mwrap{max-width:1040px;margin:0 auto}
.words{font-size:clamp(24px,3.5vw,46px);font-weight:800;line-height:1.65;margin:0}
.words em{font-style:normal;background:linear-gradient(90deg,var(--teal),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.manifesto.live .w{color:color-mix(in srgb,var(--st-ink) 16%,transparent);transition:color .35s}
.manifesto.live .w.on{color:var(--st-ink)}
.manifesto.live em .w,.manifesto.live em .w.on{color:inherit}
.ecgline{display:block;width:100%;height:90px;margin-top:40px;overflow:visible}
.ecgline path{fill:none;stroke:var(--teal-2);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--teal-2) 60%,transparent))}

/* --- phone story --- */
.story{background:linear-gradient(180deg,var(--st-a),var(--st-b));color:var(--st-ink)}
.sstick{padding:60px 20px}
.swrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.steps2{display:flex;flex-direction:column;gap:26px}
.st small{font-family:var(--mono);color:var(--teal);letter-spacing:.2em;font-size:12px}
.st h3{font-size:clamp(20px,2.4vw,30px);margin:4px 0;font-weight:800}.st p{margin:0;color:var(--st-mid);font-size:16px}
.story.live{height:320vh}
.story.live .sstick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding:70px 20px 20px;box-sizing:border-box}
.story.live .st{opacity:.28;transform:translateX(0);transition:opacity .5s,transform .5s}
.story.live .st.on{opacity:1}
.phone{width:min(320px,78vw);aspect-ratio:9/18.5;border-radius:46px;background:#0A2E37;padding:10px;box-shadow:0 40px 90px -30px rgb(10 46 55 / .55),inset 0 0 0 2px #1d4a52;transform:rotate(calc(3deg - var(--p,0)*6deg)) translateY(calc(var(--p,0)*-20px))}
.scr{position:relative;height:100%;border-radius:37px;overflow:hidden;background:#F2F8F7;display:flex;flex-direction:column;color:#0A2E37}
.ph-top{display:flex;align-items:center;gap:10px;padding:34px 14px 10px;background:#fff;border-bottom:1px solid #E1EEEC}
.ph-top b{display:block;font-size:14px}.ph-top small{color:#14B8A6;font-size:11.5px}
.av{width:34px;height:34px;border-radius:50%;background:#E8F6F4;display:grid;place-items:center}
.chat{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 12px;overflow:hidden;justify-content:flex-end}
.bub{max-width:82%;padding:9px 13px;border-radius:18px;font-size:13.5px;line-height:1.6}
.bub.p{align-self:flex-start;background:#0E7C86;color:#fff;border-start-start-radius:6px}
.bub.a{align-self:flex-end;background:#fff;box-shadow:0 2px 8px rgb(0 0 0 / .06);border-start-end-radius:6px}
.typing{display:flex;gap:4px;padding:12px 14px}.typing i{width:6px;height:6px;border-radius:50%;background:#8DB2B4;animation:dots 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-4px);opacity:.5}}
.slots{align-self:flex-end;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:90%}
.slots span{background:#fff;border:1.5px solid #14B8A6;color:#0E7C86;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700}
.slots span:first-child{background:#14B8A6;color:#fff}
.sms{position:absolute;top:10px;left:8px;right:8px;background:rgb(20 32 36 / .92);color:#fff;border-radius:18px;padding:10px 14px;font-size:12.5px;line-height:1.6;backdrop-filter:blur(10px);box-shadow:0 12px 30px rgb(0 0 0 / .25)}
.sms b{display:block;font-size:11px;opacity:.7}
.okpill{align-self:center;background:#E6F7EE;color:#15803D;border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:700}
.story.live [data-at]:not(.on){display:none}
.story.live [data-at].on{animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both}
.story.live .sms.on{animation:drop .6s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes drop{from{opacity:0;transform:translateY(-120%)}}
@media (max-width:820px){.swrap{grid-template-columns:1fr;gap:20px;justify-items:center}.steps2{gap:0;min-height:120px;text-align:center}.story.live .st{display:none}.story.live .st.on{display:block}.phone{width:min(270px,64vw)}.story.live .sstick{padding-top:64px}}

/* --- numbers --- */
.numbers{max-width:1080px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.nums b{display:block;font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1.2;background:linear-gradient(135deg,var(--teal),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.nums span{color:var(--muted);font-weight:600}
@media (max-width:640px){.nums{grid-template-columns:1fr 1fr;gap:24px}}

/* --- video grows to full width as it enters --- */
.vidsec{padding:10px 20px 40px}
.vframe{position:relative;max-width:1180px;margin:0 auto;border-radius:calc(44px - 22px*var(--k,1));overflow:hidden;transform:scale(calc(.82 + .18*var(--k,1)));box-shadow:0 40px 100px -30px rgb(10 59 71 / .5);background:#0A3B47}
.vframe video{display:block;width:100%;aspect-ratio:16/9}
.unmute{position:absolute;bottom:20px;inset-inline-start:20px;border:0;border-radius:999px;background:rgb(255 255 255 / .9);color:#0A3B47;font:inherit;font-weight:700;padding:8px 18px;cursor:pointer}

/* --- bento --- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bento .b{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;box-shadow:var(--shadow)}
.bento .b::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--teal-2) 14%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.bento .b:hover::before{opacity:1}
.bento .w2{grid-column:span 2}
.bento h3{margin:12px 0 6px;font-size:18px}.bento p{margin:0;color:var(--muted);font-size:14.5px}
.mini{margin-top:16px;font-size:13px}
.chatmini{display:flex;flex-direction:column;gap:6px}.chatmini span{max-width:75%;padding:7px 12px;border-radius:14px}
.chatmini .q{align-self:flex-start;background:var(--accent);color:var(--accent-ink)}.chatmini .r{align-self:flex-end;background:var(--surface-2)}
.smsmini{background:#14232A;color:#fff;border-radius:14px;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.smsmini span{display:flex;gap:6px}.smsmini i{font-style:normal;background:rgb(255 255 255 / .14);border-radius:8px;padding:2px 8px}.smsmini i:first-child{background:#14B8A6}
.risk{display:flex;gap:6px;flex-wrap:wrap}.risk span{border-radius:999px;padding:3px 10px;font-weight:700}
.risk .hi{background:#FDE7DD;color:#C2410C}.risk .md{background:#FEF3C7;color:#A16207}.risk .lo{background:#DCFCE7;color:#15803D}
.tv{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;background:linear-gradient(135deg,#0B2B33,#123E48);color:#fff;border-radius:16px;padding:12px}
.tvq{display:flex;flex-direction:column;gap:6px}.tvq span{background:rgb(255 255 255 / .07);border-radius:9px;padding:5px 10px;display:flex;justify-content:space-between}
.tvq .now{background:#B4233B}.tvq i{font-style:normal;font-size:11px;opacity:.85}
.tvc{display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgb(255 255 255 / .06);border-radius:10px}.tvc b{font-size:26px}.tvc small{color:#F3D27A}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.bento .w2{grid-column:auto}}

/* --- reveal on scroll (only when JS is on) --- */
.js [data-reveal]{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;filter:none;transition:none}}

/* ================= Animated illustrations (src/site-icons.js) ================= */
.ai{width:120px;height:120px;overflow:visible;stroke:var(--teal);stroke-width:3.2;--g:#F3D27A;--gd:#C8962E}
.ai *{transform-box:fill-box;transform-origin:center}
.ai .sh{fill:color-mix(in srgb,var(--teal) 14%,transparent);stroke:none;animation:aish 2.4s ease-in-out infinite}
@keyframes aish{50%{transform:scaleX(.8);opacity:.6}}
.ai .sp path{stroke:var(--gd);stroke-width:2.6;animation:twinkle 1.8s ease-in-out infinite}
.ai .sp path:nth-child(2){animation-delay:.6s}.ai .sp path:nth-child(3){animation-delay:1.2s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
/* wallet + coins */
.ai-wallet .body rect{fill:color-mix(in srgb,var(--teal) 16%,var(--surface))}
.ai-wallet .clasp{fill:var(--surface)}.ai-wallet .dot{fill:var(--teal);stroke:none}
.ai-wallet .coin circle{fill:var(--g);stroke:var(--gd)}.ai-wallet .coin path{stroke:var(--gd);stroke-width:2.4}
.ai-wallet .coin{animation:coinfall 3s cubic-bezier(.5,0,.7,.4) infinite;opacity:0}
.ai-wallet .c2{animation-delay:.5s}.ai-wallet .c3{animation-delay:1s}
@keyframes coinfall{0%{transform:translateY(-34px) rotate(-20deg);opacity:0}15%{opacity:1}55%{transform:translateY(26px) rotate(10deg);opacity:1}62%,100%{transform:translateY(30px);opacity:0}}
.ai-wallet .body{animation:wbump 1s .55s ease-in-out infinite}
@keyframes wbump{0%,100%{transform:none}50%{transform:translateY(2px) scaleY(.98)}}
/* spinning coin */
.ai-coin .spin{animation:cspin 2.6s ease-in-out infinite}
@keyframes cspin{0%,100%{transform:scaleX(1)}25%{transform:scaleX(.08)}50%{transform:scaleX(-1)}75%{transform:scaleX(.08)}}
.ai-coin .rim{fill:var(--g);stroke:var(--gd)}.ai-coin .in{stroke:var(--gd);stroke-width:2;stroke-dasharray:4 5}.ai-coin .mk{stroke:var(--gd);stroke-width:3.4}
.ai-coin .sh{animation:cshadow 2.6s ease-in-out infinite}@keyframes cshadow{25%,75%{transform:scaleX(.3)}}
/* gem */
.ai-gem .g{fill:color-mix(in srgb,var(--teal-2) 28%,var(--surface))}.ai-gem .f{stroke-width:2;opacity:.6}
.ai-gem .shine{stroke:#fff;stroke-width:4;animation:gshine 2.6s ease-in-out infinite}
@keyframes gshine{0%,60%,100%{opacity:0}75%{opacity:1}}
.ai-gem .float{animation:gfloat 3.2s ease-in-out infinite}@keyframes gfloat{50%{transform:translateY(-6px) rotate(-3deg)}}
/* gift */
.ai-gift rect{fill:color-mix(in srgb,var(--gold) 26%,var(--surface))}.ai-gift .bow{fill:color-mix(in srgb,var(--teal) 25%,var(--surface))}
.ai-gift .lid{animation:lid 2.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes lid{0%,55%,100%{transform:none}65%{transform:translateY(-12px) rotate(-6deg)}75%{transform:translateY(-4px) rotate(3deg)}85%{transform:none}}
/* résumé card */
.ai-resume .card rect{fill:var(--surface)}.ai-resume .av{stroke:var(--teal-2)}
.ai-resume .ln{stroke-width:4;stroke:color-mix(in srgb,var(--teal) 55%,transparent);stroke-dasharray:50;stroke-dashoffset:50;animation:write 4.5s ease-in-out infinite}
.ai-resume .l2{animation-delay:.3s}.ai-resume .l3{animation-delay:.6s}.ai-resume .l4{animation-delay:.9s}
@keyframes write{0%{stroke-dashoffset:50}25%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.ai-resume .stamp circle{fill:#16A34A;stroke:#16A34A}.ai-resume .stamp path{stroke:#fff;stroke-width:3.6}
.ai-resume .stamp{animation:stamp 4.5s ease-in-out infinite}
@keyframes stamp{0%,35%{transform:scale(0) rotate(-30deg);opacity:0}45%{transform:scale(1.25) rotate(8deg);opacity:1}52%,88%{transform:scale(1) rotate(0);opacity:1}100%{opacity:0}}
.ai-resume .card{animation:gfloat 4.5s ease-in-out infinite}
/* phone */
.ai-phone .hs{fill:color-mix(in srgb,var(--teal) 18%,var(--surface))}
.ai-phone .ring{animation:ringring 2s ease-in-out infinite}
@keyframes ringring{0%,40%,100%{transform:rotate(0)}5%{transform:rotate(-14deg)}10%{transform:rotate(12deg)}15%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}25%{transform:rotate(-6deg)}30%{transform:rotate(4deg)}}
.ai-phone .w{stroke:var(--gd);animation:wave 2s ease-out infinite;opacity:0}.ai-phone .w2{animation-delay:.2s}
@keyframes wave{0%{opacity:0}10%,30%{opacity:1}45%,100%{opacity:0}}
/* mail */
.ai-mail .back{fill:color-mix(in srgb,var(--teal) 14%,var(--surface))}.ai-mail .letter rect{fill:var(--surface)}.ai-mail .letter path{stroke-width:2.4;opacity:.6}
.ai-mail .letter{animation:letter 3s ease-in-out infinite}@keyframes letter{0%,100%{transform:translateY(26px)}40%,70%{transform:translateY(0)}}
/* pin */
.ai-pin .drop path{fill:color-mix(in srgb,#E5484D 22%,var(--surface));stroke:#E5484D}.ai-pin .hole{fill:var(--surface);stroke:#E5484D}
.ai-pin .drop{animation:pindrop 2.4s cubic-bezier(.3,.7,.4,1) infinite;transform-origin:50% 100%}
@keyframes pindrop{0%{transform:translateY(-20px)}30%{transform:translateY(0) scaleY(.88)}40%{transform:translateY(-6px) scaleY(1.03)}50%,100%{transform:none}}
/* clock */
.ai-clock .face{fill:var(--surface)}.ai-clock .c{fill:var(--teal);stroke:none}
.ai-clock .mn{stroke:var(--gd);transform-origin:60px 58px;transform-box:view-box;animation:spin 4s linear infinite}
.ai-clock .hr{stroke-width:4;transform-origin:60px 58px;transform-box:view-box;animation:spin 48s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* shield */
.ai-shield .sd{fill:color-mix(in srgb,var(--teal) 14%,var(--surface))}.ai-shield .lk rect{fill:var(--surface)}.ai-shield .lk circle{fill:var(--teal);stroke:none}
.ai-shield .shk{animation:shk 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes shk{0%,30%{transform:translateY(-6px)}45%,100%{transform:none}}
.ai-shield .scan{stroke:var(--teal-2);stroke-width:2.4;animation:scan 3s ease-in-out infinite;opacity:.8}
@keyframes scan{0%{transform:translateY(0);opacity:0}10%{opacity:.8}50%{transform:translateY(56px);opacity:.8}60%,100%{transform:translateY(56px);opacity:0}}
/* document */
.ai-doc .pg{fill:var(--surface)}.ai-doc .ln{stroke-width:4;stroke:color-mix(in srgb,var(--teal) 50%,transparent);stroke-dasharray:46;stroke-dashoffset:46;animation:write 4.5s ease-in-out infinite}
.ai-doc .l2{animation-delay:.35s}.ai-doc .l3{animation-delay:.7s}.ai-doc .l4{animation-delay:1.05s}
.ai-doc .pen path{fill:var(--g);stroke:var(--gd)}.ai-doc .pen{animation:pen 1.1s ease-in-out infinite}@keyframes pen{50%{transform:translate(-4px,-3px) rotate(-6deg)}}
/* heart */
.ai-heart .ht{fill:color-mix(in srgb,#E5484D 18%,var(--surface));stroke:#E5484D;animation:beat2 1.3s ease-in-out infinite}
.ai-heart .pl{stroke:#E5484D;stroke-width:3;stroke-dasharray:90;stroke-dashoffset:90;animation:trace2 2.6s linear infinite}
@keyframes beat2{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(1)}45%{transform:scale(1.06)}}
@keyframes trace2{to{stroke-dashoffset:-90}}

/* ================= page heroes & richer static pages ================= */
.phero{display:flex;align-items:center;justify-content:space-between;gap:24px;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--teal-2) 16%,transparent),transparent 60%),var(--surface-2);border:1px solid var(--line);border-radius:28px;padding:28px 32px;margin-bottom:26px;position:relative;overflow:hidden;animation:rise .6s var(--ease) both}
.phero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;inset-inline-end:-60px;top:-90px;border:1px dashed color-mix(in srgb,var(--teal) 30%,transparent);animation:spin 60s linear infinite}
.phero h1{margin:0 0 6px}.phero p{margin:0;color:var(--muted)}
.phero .ai{width:130px;height:130px;flex:none;position:relative;z-index:1}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.vals > div{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;text-align:center;transition:transform .25s var(--ease),box-shadow .25s}
.vals > div:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.vals .ai{width:76px;height:76px}.vals b{display:block;margin-top:6px}.vals span{color:var(--muted);font-size:14px}
@media (max-width:700px){.vals{grid-template-columns:1fr}.phero{padding:22px}.phero .ai{width:90px;height:90px}}
.contact .crow{align-items:center}.crow .ci{display:flex;align-items:center;gap:10px}.crow .ai{width:42px;height:42px;stroke-width:4.5}
.crow a{font-weight:700;color:var(--teal);text-decoration:none}
.crow:hover .ai-phone .ring{animation-duration:.8s}

/* pricing */
.phead{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:8px}.phead .ai{width:96px;height:96px}
.plan .ai{width:72px;height:72px;margin:-6px 0 2px}
.plan{transition:transform .3s var(--ease),box-shadow .3s}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--teal) 55%,transparent)}
.plan.best{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--ang,0deg),var(--teal-2),var(--gold),var(--teal),var(--teal-2)) border-box;animation:angle 6s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes angle{to{--ang:360deg}}
.plan .price{display:inline-flex;align-items:baseline;gap:4px}
.yearly{display:flex;align-items:center;justify-content:center;gap:14px;max-width:820px;margin:18px auto 0;background:color-mix(in srgb,var(--gold) 14%,var(--surface));border:1px dashed color-mix(in srgb,var(--gold) 60%,transparent);border-radius:18px;padding:10px 18px;font-weight:700}
.yearly .ai{width:64px;height:64px}

/* small delights */
.nav nav a{position:relative}
.nav nav a::after{content:"";position:absolute;inset-inline:12px;bottom:2px;height:2px;border-radius:2px;background:var(--teal-2);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav nav a:hover::after,.nav nav a.on::after{transform:scaleX(1)}
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn.primary:hover::after{transform:translateX(120%)}
.faq details{transition:background .2s}.faq details[open]{background:color-mix(in srgb,var(--teal) 8%,var(--surface-2))}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--teal);transition:transform .3s var(--ease)}.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] p{animation:rise .35s var(--ease) both}
.order input:focus,.order select:focus,.order textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 18%,transparent)}
.foot .pan-logo{transition:transform .4s var(--ease)}.foot .fcol:first-child:hover .pan-logo{transform:rotate(-8deg) scale(1.05)}

/* ---------- v1.16: ROI calculator ---------- */
.btn.sm{padding:6px 12px;font-size:13.5px;border-radius:10px}
.roiw{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
.roif{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.roif label{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-weight:600;font-size:14px;color:var(--muted)}
.roif output{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.roif input[type=range]{grid-column:1/-1;accent-color:var(--accent);width:100%}
.roir{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;border-radius:24px;padding:26px;color:#fff;background:radial-gradient(120% 120% at 100% 0%,#1fb5a6 0%,transparent 55%),linear-gradient(160deg,#0b5f73,#0a2e37)}
.roir::after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgb(255 255 255 / .08),transparent 30%);animation:roispin 9s linear infinite;pointer-events:none}
@keyframes roispin{to{transform:rotate(1turn)}}
.roir small{display:block;opacity:.75;font-size:13px}.roir .big b{font-size:clamp(26px,4vw,38px);font-weight:900;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.roir .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.roir .row2>div{background:rgb(255 255 255 / .08);border-radius:14px;padding:10px 14px}.roir .row2 b{font-size:22px}
.roir .mult{display:flex;align-items:baseline;gap:10px}.roir .mult span{font-size:44px;font-weight:900;color:#F3D27A}
.roir .muted{color:rgb(255 255 255 / .7)}.roir .btn{align-self:flex-start;position:relative;z-index:1;background:#F3D27A;border-color:#F3D27A;color:#0a2e37}
.refnote{margin:0;background:color-mix(in srgb,#F3D27A 30%,var(--surface));border:1px dashed #d4a72c;border-radius:14px;padding:10px 14px;font-weight:600}
@media (max-width:820px){.roiw{grid-template-columns:1fr}}

/* ---------- open-slots directory ---------- */
.doc.wide{max-width:1120px}
.dstats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--muted);margin:-6px 0 16px}.dstats b{color:var(--ink)}
.dstats .live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.dstats .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e88;animation:livep 1.8s infinite}
@keyframes livep{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dfilter{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:18px}
.dfilter label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.dfilter label.check{flex-direction:row;align-items:center;padding-bottom:10px}
.dfilter select{font:inherit;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--surface);color:var(--ink);min-width:160px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.dcard{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);animation:rise .55s var(--ease) var(--d,0s) both;transition:transform .2s var(--ease),box-shadow .2s}
.dcard:hover{transform:translateY(-3px)}
.dcard.feat{border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--a,0deg),#F3D27A,var(--accent),#F3D27A) border-box;animation:rise .55s var(--ease) var(--d,0s) both,featspin 6s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes featspin{to{--a:360deg}}
.dtop{display:flex;justify-content:space-between;gap:10px}.dtop h3{margin:0;font-size:17px}.dtop h3 a{color:var(--ink);text-decoration:none}.dtop small{color:var(--muted)}
.badge{align-self:flex-start;white-space:nowrap;background:#F3D27A;color:#5b4300;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}
.rate{font-size:14px;font-weight:700}.rate span{color:#e0a400;letter-spacing:1px}.rate small{color:var(--muted);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.chips .lbl{width:100%;font-size:12.5px;color:var(--muted)}
.chip{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25;min-width:64px;padding:7px 10px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink);text-decoration:none;font-weight:800;font-variant-numeric:tabular-nums;transition:transform .15s var(--ease),background .15s}
.chip small{font-size:11px;font-weight:600;color:var(--muted)}.chip:hover{transform:translateY(-2px);background:var(--accent);color:var(--accent-ink)}.chip:hover small{color:inherit}
.dfoot{display:flex;gap:8px;margin-top:auto}
.dcta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:26px;padding:18px 22px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line)}
.dcta div{display:flex;flex-direction:column}.dcta span{color:var(--muted)}
.empty{text-align:center;padding:40px;color:var(--muted)}

/* ---------- public clinic page ---------- */
.chero{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:26px;border-radius:28px;margin-bottom:20px;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),var(--surface-2);border:1px solid var(--line);animation:rise .6s var(--ease) both}
.chero h1{margin:0;font-size:28px}.chero p{margin:0;color:var(--muted)}.chero .tag{color:var(--ink);font-weight:600}
.cmk{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);flex:none}
.cact{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:10px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.cgrid .panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);animation:rise .6s var(--ease) both}
.cgrid .panel:nth-child(2){animation-delay:.06s}.cgrid .panel:nth-child(3){animation-delay:.12s}.cgrid .panel:nth-child(4){animation-delay:.18s}.cgrid .panel:nth-child(5){animation-delay:.24s}
.cgrid h2{margin:0 0 10px;font-size:18px}.cgrid h3{font-size:15px;margin:14px 0 6px}.cgrid .more{display:inline-block;margin-top:12px;font-weight:700;text-decoration:none}
.hours{display:flex;flex-direction:column}.hrow{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:10px}.hrow small{color:var(--muted);font-weight:500}
.hrow.now{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.svcs{list-style:none;margin:0;padding:0}.svcs li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}.svcs li:last-child{border:0}.svcs small{color:var(--muted)}
.qrp{display:flex;gap:16px;align-items:center}.qrp .code{width:120px;height:120px;flex:none;background:#fff;border-radius:14px;padding:8px}.qrp .code svg{width:100%;height:100%;display:block}
.okbox{max-width:760px;margin:0 auto;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px}.okbox code{display:inline-block;background:var(--surface-2);padding:6px 12px;border-radius:10px}
.err{color:#b42318;font-weight:600;margin:0}
@media (max-width:600px){.cact{margin:0;width:100%}.qrp{flex-direction:column;text-align:center}}

/* v1.18 bento minis */
.chatmini .slotsr{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.chatmini .slotsr i{font-style:normal;background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:1px 8px;font-weight:700;animation:pop .5s var(--ease) both}
.chatmini .slotsr i:nth-child(2){animation-delay:.1s}.chatmini .slotsr i:nth-child(3){animation-delay:.2s}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.langs{display:flex;gap:6px;flex-wrap:wrap}.langs span{border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-weight:700;background:var(--surface-2)}
.langs span:nth-child(3){font-family:inherit}
.tagsmini{display:flex;gap:6px;flex-wrap:wrap}.tagsmini span{border-radius:999px;padding:3px 10px;font-weight:700}
.tagsmini .u{background:#FDE2E4;color:#B4233B}.tagsmini .q{background:#E0F2FE;color:#0369A1}.tagsmini .d{background:#DCFCE7;color:#15803D}
.scoremini{display:flex;align-items:center;gap:12px}.scoremini b{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--ink);background:radial-gradient(closest-side,var(--surface) 76%,transparent 78% 100%),conic-gradient(#1E9E6A 0 82%,var(--surface-2) 82%)}
.scoremini span{display:flex;flex-direction:column;color:var(--muted)}.scoremini i{font-style:normal;color:#1E9E6A;font-weight:700}

/* --- scroll feedback: page progress, pinned-section rail, "keep scrolling" cue --- */
.pgbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.pgbar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-2),var(--gold));transform:scaleX(var(--k,0));transform-origin:left;box-shadow:0 0 10px color-mix(in srgb,var(--teal-2) 70%,transparent);border-radius:0 3px 3px 0}
[dir=rtl] .pgbar i{transform-origin:right;border-radius:3px 0 0 3px}
.srail{position:fixed;top:50%;inset-inline-end:10px;width:4px;height:min(34vh,260px);transform:translateY(-50%);border-radius:4px;background:color-mix(in srgb,var(--st-ink) 12%,transparent);opacity:0;transition:opacity .35s;z-index:40;pointer-events:none}
.srail.show{opacity:1}
.srail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--teal-2),var(--gold));transform:scaleY(var(--k,0));transform-origin:top}
.srail b{position:absolute;left:50%;top:calc(var(--k,0) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--st-a);border:3px solid var(--teal-2);box-shadow:0 0 0 0 color-mix(in srgb,var(--teal-2) 55%,transparent);animation:railpulse 1.6s infinite}
@keyframes railpulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.scue{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--st-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--teal-2) 40%,transparent);color:var(--st-ink);font-size:13px;font-weight:700;box-shadow:0 12px 30px -14px color-mix(in srgb,var(--teal) 70%,transparent);transform:translate(-50%,14px);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;white-space:nowrap}
.scue.show{opacity:1;transform:translate(-50%,0)}
.scue .chev{display:grid;gap:0;height:22px;align-content:center}
.scue .chev i{display:block;width:9px;height:9px;border-right:2.5px solid var(--teal-2);border-bottom:2.5px solid var(--teal-2);transform:rotate(45deg);margin:-3px auto 0;animation:chev 1.3s infinite}
.scue .chev i:nth-child(2){animation-delay:.18s}
@keyframes chev{0%{opacity:0;transform:translateY(-4px) rotate(45deg)}50%{opacity:1}100%{opacity:0;transform:translateY(5px) rotate(45deg)}}
@media (max-width:760px){.stage.live .hud .bar{display:none}.srail{inset-inline-end:6px;width:3px}}
@media (prefers-reduced-motion:reduce){.scue .chev i,.srail b{animation:none}}