/* Zanjireh — product UI inside devices (always "app dark") + hero stage widgets. */
.dev { --wn: 290; --w: calc(var(--wn) * 1px); position: relative; width: var(--w); aspect-ratio: 9 / 19.4; border-radius: calc(var(--w) * .16); padding: calc(var(--w) * .035);
  background: linear-gradient(145deg, #3A464C, #12191D 18%, #0A0F12 50%, #1B252A 82%, #46545B);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 0 1.5px rgba(255, 255, 255, .08), inset 0 0 8px rgba(0, 0, 0, .9); }
:root[data-theme="light"] .dev { box-shadow: 0 60px 120px -40px rgba(16, 60, 64, .45), 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.dev::before { content: ""; position: absolute; top: calc(var(--w) * .062); left: 50%; width: 30%; height: calc(var(--w) * .085); transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 5; }
.dev::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 30%, transparent 70%, rgba(255, 255, 255, .05)); }
.dev__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--w) * .127); overflow: hidden; }

/* ---------- app UI (fixed dark app theme) ---------- */
.ui { --u: calc(var(--wn, 290) / 290); background: radial-gradient(120% 60% at 50% 0%, #0F2025, #070D10 60%); color: #EAF4F2; font-size: calc(11px * var(--u)); line-height: 1.6; display: flex; flex-direction: column; text-align: right; }
.ui b { font-weight: 800; }
.ui small { color: #8DA2A1; font-size: calc(9.5px * var(--u)); }
.ui-status { display: flex; justify-content: space-between; align-items: center; padding: calc(14px * var(--u)) calc(22px * var(--u)) calc(4px * var(--u)); font-weight: 700; font-size: calc(10.5px * var(--u)); direction: ltr; }
.ui-status__r { display: flex; gap: 4px; align-items: center; }
.ui-status__r i { width: calc(13px * var(--u)); height: calc(8px * var(--u)); border-radius: 2px; background: linear-gradient(90deg, #EAF4F2 0 70%, #4C5B5E 70%); }
.ui-status__r i:first-child { background: linear-gradient(0deg, #EAF4F2 0 100%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.ui-status__r b { width: calc(20px * var(--u)); height: calc(10px * var(--u)); border-radius: 3px; border: 1.5px solid #EAF4F2; position: relative; }
.ui-status__r b::after { content: ""; position: absolute; inset: 1.5px; right: 30%; background: #14E0A1; border-radius: 1px; }
.ui-head { display: flex; align-items: center; justify-content: space-between; padding: calc(10px * var(--u)) calc(18px * var(--u)); }
.ui-head > div { display: grid; line-height: 1.3; } .ui-head b { font-size: calc(19px * var(--u)); font-weight: 900; }
.ui-avatar { width: calc(38px * var(--u)); height: calc(38px * var(--u)); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: calc(14px * var(--u)); color: #02110F; background: linear-gradient(135deg, #7CE8FF, #14E0A1); box-shadow: 0 0 0 2px #070D10, 0 0 0 3.5px rgba(42, 214, 217, .6); }
.ui-today { display: grid; gap: calc(7px * var(--u)); padding: 0 calc(12px * var(--u)); }
.ui-card { display: grid; grid-template-columns: auto 1fr auto; gap: calc(9px * var(--u)); align-items: center; padding: calc(10px * var(--u)); border-radius: calc(16px * var(--u)); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.ui-card > div { display: grid; line-height: 1.45; min-width: 0; }
.ui-card > div b { font-size: calc(10.5px * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-card em { font-style: normal; font-size: calc(9px * var(--u)); color: #8DA2A1; align-self: start; }
.ui-card--hot { background: linear-gradient(120deg, rgba(255, 194, 122, .2), rgba(255, 194, 122, .05)); border-color: rgba(255, 194, 122, .35); }
.ui-card--hot em { color: #FFC27A; font-weight: 800; }
.ui-ic { width: calc(32px * var(--u)); height: calc(32px * var(--u)); border-radius: calc(10px * var(--u)); display: grid; place-items: center; flex: none; }
.ui-ic svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-ic--amber { background: rgba(255, 194, 122, .18); color: #FFC27A; } .ui-ic--blue { background: rgba(143, 180, 255, .18); color: #8FB4FF; }
.ui-ic--green { background: rgba(20, 224, 161, .16); color: #14E0A1; } .ui-ic--pink { background: rgba(255, 154, 168, .18); color: #FF9AA8; }
.ui-ic--ice { background: rgba(124, 232, 255, .16); color: #7CE8FF; }
.ui-sect { padding: calc(14px * var(--u)) calc(18px * var(--u)) calc(6px * var(--u)); font-weight: 800; font-size: calc(11px * var(--u)); color: #A7BAB8; }
.ui-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(9px * var(--u)); padding: 0 calc(14px * var(--u)); }
.ui-apps span { aspect-ratio: 1; border-radius: calc(14px * var(--u)); display: grid; place-items: center; font-weight: 900; font-size: calc(12px * var(--u)); color: #02110F; background: linear-gradient(140deg, color-mix(in srgb, var(--a) 60%, #fff), var(--a)); box-shadow: 0 6px 16px -6px var(--a); }
.ui-tab { margin-top: auto; display: flex; justify-content: space-around; padding: calc(12px * var(--u)) 0 calc(18px * var(--u)); background: rgba(255, 255, 255, .03); border-top: 1px solid rgba(255, 255, 255, .06); }
.ui-tab i { width: calc(20px * var(--u)); height: calc(20px * var(--u)); border-radius: calc(7px * var(--u)); background: rgba(255, 255, 255, .12); }
.ui-tab i.on { background: linear-gradient(135deg, #14E0A1, #7CE8FF); box-shadow: 0 0 12px rgba(42, 214, 217, .6); }

/* screen-level building blocks (day screens) */
.ui-bar { display: flex; align-items: center; gap: calc(10px * var(--u)); padding: calc(8px * var(--u)) calc(16px * var(--u)) calc(10px * var(--u)); }
.ui-bar b { font-size: calc(15px * var(--u)); font-weight: 900; }
.ui-bar .ui-ic { margin-inline-start: auto; }
.ui-notif { margin: 0 calc(10px * var(--u)) calc(10px * var(--u)); padding: calc(10px * var(--u)) calc(12px * var(--u)); border-radius: calc(16px * var(--u)); background: rgba(30, 40, 44, .92); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: grid; grid-template-columns: auto 1fr; gap: calc(9px * var(--u)); align-items: center; animation: drop .7s var(--ease) both .2s; }
.ui-notif > div { display: grid; line-height: 1.5; }
@keyframes drop { from { opacity: 0; transform: translateY(-30px) scale(.96); } }
.ui-hero { margin: 0 calc(12px * var(--u)); padding: calc(14px * var(--u)); border-radius: calc(18px * var(--u)); background: linear-gradient(135deg, color-mix(in srgb, var(--pa) 30%, #0B1418), #0B1418); border: 1px solid color-mix(in srgb, var(--pa) 40%, transparent); }
.ui-hero small { display: block; }
.ui-big { font-size: calc(22px * var(--u)); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.3; }
.ui-big em { font-style: normal; font-size: calc(10px * var(--u)); color: #8DA2A1; margin-inline-start: 4px; }
.ui-list { display: grid; gap: calc(6px * var(--u)); padding: calc(10px * var(--u)) calc(12px * var(--u)); }
.ui-row { display: grid; grid-template-columns: auto 1fr auto; gap: calc(9px * var(--u)); align-items: center; padding: calc(9px * var(--u)) calc(10px * var(--u)); border-radius: calc(13px * var(--u)); background: rgba(255, 255, 255, .04); }
.ui-row > div { display: grid; line-height: 1.45; }
.ui-row > span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; font-size: calc(10.5px * var(--u)); }
.ui-dot { width: calc(8px * var(--u)); height: calc(8px * var(--u)); border-radius: 50%; background: var(--c, #14E0A1); box-shadow: 0 0 8px var(--c, #14E0A1); }
.ui-btns { display: flex; gap: calc(8px * var(--u)); padding: calc(10px * var(--u)) calc(12px * var(--u)); }
.ui-btn { flex: 1; height: calc(34px * var(--u)); border-radius: calc(12px * var(--u)); display: grid; place-items: center; font-weight: 800; font-size: calc(10.5px * var(--u)); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.ui-btn--p { background: linear-gradient(120deg, color-mix(in srgb, var(--pa) 75%, #fff), var(--pa)); color: #02110F; border: 0; box-shadow: 0 8px 20px -8px var(--pa); }
.ui-chip { display: inline-block; font-size: calc(8.5px * var(--u)); font-weight: 800; padding: 1px calc(7px * var(--u)); border-radius: 999px; background: color-mix(in srgb, var(--pa) 20%, transparent); color: var(--pa); }
.ui-inv { margin: 0 calc(12px * var(--u)); padding: calc(14px * var(--u)); border-radius: calc(16px * var(--u)); background: #F7F5EF; color: #18202A; }
.ui-inv small { color: #6B7280; }
.ui-inv__h { display: flex; justify-content: space-between; align-items: center; padding-bottom: calc(8px * var(--u)); border-bottom: 1px dashed rgba(0, 0, 0, .2); margin-bottom: calc(8px * var(--u)); }
.ui-inv__h b { font-size: calc(12px * var(--u)); }
.ui-inv__l { display: flex; justify-content: space-between; padding: calc(3px * var(--u)) 0; font-size: calc(10px * var(--u)); }
.ui-inv__l span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }
.ui-inv__t { display: flex; justify-content: space-between; margin-top: calc(6px * var(--u)); padding-top: calc(8px * var(--u)); border-top: 1px solid rgba(0, 0, 0, .12); font-weight: 900; font-size: calc(12px * var(--u)); }
.ui-stamp { display: inline-block; margin-top: calc(8px * var(--u)); padding: 1px calc(8px * var(--u)); border: 1.5px solid #0B8F6E; color: #0B8F6E; border-radius: 6px; font-weight: 900; font-size: calc(9px * var(--u)); transform: rotate(-6deg); }
.ui-chat { display: flex; flex-direction: column; gap: calc(7px * var(--u)); padding: calc(8px * var(--u)) calc(12px * var(--u)); }
.ui-b { max-width: 88%; padding: calc(8px * var(--u)) calc(11px * var(--u)); border-radius: calc(14px * var(--u)); line-height: 1.7; font-size: calc(10px * var(--u)); }
.ui-b--me { align-self: flex-start; background: linear-gradient(120deg, color-mix(in srgb, var(--pa) 70%, #fff), var(--pa)); color: #0B1430; font-weight: 700; border-end-start-radius: 4px; }
.ui-b--ai { align-self: flex-end; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-end-end-radius: 4px; }
.ui-b--ai ol { list-style: persian; margin: calc(4px * var(--u)) 0 0; padding-inline-start: calc(14px * var(--u)); }
.ui-b--ai .ui-chip { margin-top: calc(6px * var(--u)); }
.ui-menu { display: grid; gap: calc(6px * var(--u)); padding: calc(6px * var(--u)) calc(12px * var(--u)); }
.ui-menu__i { display: grid; grid-template-columns: calc(38px * var(--u)) 1fr auto; gap: calc(9px * var(--u)); align-items: center; padding: calc(7px * var(--u)); border-radius: calc(13px * var(--u)); background: rgba(255, 255, 255, .04); }
.ui-menu__i i { aspect-ratio: 1; border-radius: calc(10px * var(--u)); background: var(--img); }
.ui-menu__i > div { display: grid; line-height: 1.4; }
.ui-price { font-weight: 900; font-variant-numeric: tabular-nums; font-size: calc(10.5px * var(--u)); display: grid; justify-items: end; line-height: 1.3; }
.ui-price s { color: #6E8483; font-weight: 500; font-size: calc(8.5px * var(--u)); }
.ui-price b { color: var(--pa); }
.ui-qrbox { display: flex; align-items: center; gap: calc(10px * var(--u)); margin: calc(6px * var(--u)) calc(12px * var(--u)); padding: calc(10px * var(--u)); border-radius: calc(14px * var(--u)); background: rgba(255, 255, 255, .05); }
.ui-qrbox svg { width: calc(54px * var(--u)); height: calc(54px * var(--u)); background: #fff; border-radius: 8px; padding: 4px; }
.ui-qrbox > div { display: grid; line-height: 1.5; }
.ui-table { margin: calc(4px * var(--u)) calc(12px * var(--u)); aspect-ratio: 1.15; border-radius: calc(26px * var(--u)); background: radial-gradient(110% 90% at 50% 45%, #179272, #0B4A3B 60%, #062A22); border: calc(5px * var(--u)) solid #5B3A1E; position: relative; box-shadow: inset 0 0 30px rgba(0, 0, 0, .5); }
.ui-seat { position: absolute; display: grid; justify-items: center; gap: 2px; font-size: calc(8.5px * var(--u)); font-weight: 700; }
.ui-seat i { width: calc(34px * var(--u)); height: calc(34px * var(--u)); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; color: #fff; border: 2px solid #F4C26B; background: var(--c); }
.ui-seat em { font-style: normal; font-size: calc(8px * var(--u)); color: #14E0A1; }
.ui-seat.t { top: 6%; left: 50%; transform: translateX(-50%); } .ui-seat.l { left: 5%; top: 40%; } .ui-seat.r { right: 5%; top: 40%; } .ui-seat.b { bottom: 6%; left: 50%; transform: translateX(-50%); }
.ui-table__mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 900; color: rgba(255, 255, 255, .85); font-size: calc(11px * var(--u)); text-align: center; line-height: 1.4; }
.ui-table__mid small { display: block; color: rgba(255, 255, 255, .6); }
.ui-fade { animation: uifade .6s var(--ease) both; }
@keyframes uifade { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- hero stage ---------- */
.stage3d > * { position: absolute; transform-style: preserve-3d; }
.dev--hero { --wn: 300; left: 50%; top: 50%; margin: calc(var(--w) * -1.078) 0 0 calc(var(--w) * -.5); transform: translateZ(var(--z)); }
.fw { width: 196px; padding: 13px 15px; border-radius: 20px; color: var(--text); background: var(--glass); border: 1px solid var(--border-2);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow-1), inset 0 1px 0 var(--glass-hi);
  display: grid; gap: 2px; font-size: .8rem; line-height: 1.5; transform: translateZ(var(--z)); animation: float 7s var(--ease-io) infinite alternate; }
.fw small { color: var(--text-3); font-size: .7rem; }
.fw b { font-weight: 900; }
.fw--loan b { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.3; }
.fw--loan span { color: var(--text-3); font-size: .7rem; }
.fw__spark { width: 100%; height: 34px; margin-top: 6px; }
.fw__spark path { fill: none; stroke: var(--z-cyan); stroke-width: 2.4; stroke-linecap: round; }
.fw--legal, .fw--qr, .fw--cv { grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 226px; }
.fw--legal > div, .fw--qr > div, .fw--cv > div { display: grid; line-height: 1.45; }
.fw .ui-ic { --u: 1.15; }
.fw--chess { width: 150px; justify-items: center; text-align: center; gap: 8px; }
.mini-board { width: 112px; height: 112px; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); display: grid; grid-template-columns: repeat(6, 1fr); background: #E9DDC4; }
.mini-board span { display: grid; place-items: center; font-size: 15px; line-height: 1; color: #1B1B1B; }
.mini-board span.d { background: #8A6A48; } .mini-board span.w { color: #FFF8EC; text-shadow: 0 1px 1px rgba(0, 0, 0, .7); }
.mini-board span.hl { box-shadow: inset 0 0 0 3px rgba(20, 224, 161, .9); }
.qr { width: 56px; height: 56px; background: #fff; border-radius: 10px; padding: 5px; flex: none; }
.ring { width: 52px; height: 52px; transform: rotate(-90deg); flex: none; }
.ring circle { fill: none; stroke: var(--tint-3); stroke-width: 4; }
.ring .ring__v { stroke: var(--z-emerald); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transition: stroke-dashoffset 2s var(--ease) .8s; }
.is-ready .ring .ring__v { stroke-dashoffset: 7.5; }
@keyframes float { from { translate: 0 0; } to { translate: 0 -12px; } }
.fw--loan { top: 8%; left: -4%; animation-delay: -1s; }
.fw--chess { top: 4%; right: 0; animation-delay: -3s; }
.fw--cv { top: 44%; left: -8%; animation-delay: -5s; }
.fw--legal { bottom: 6%; left: -2%; animation-delay: -2s; }
.fw--qr { bottom: 16%; right: -6%; animation-delay: -4s; }
.js .stage3d > * { opacity: 0; }
.js.is-ready .stage3d > * { opacity: 1; transition: opacity 1s var(--ease); }
.js.is-ready .stage3d > .fw { transition-delay: .5s; }
.js.is-ready .stage3d > .fw:nth-child(3) { transition-delay: .65s; } .js.is-ready .stage3d > .fw:nth-child(4) { transition-delay: .8s; }
.js.is-ready .stage3d > .fw:nth-child(5) { transition-delay: .95s; } .js.is-ready .stage3d > .fw:nth-child(6) { transition-delay: 1.1s; }
@media (max-width: 999px) {
  .dev--hero { --wn: 250; }
  .fw { width: 178px; padding: 11px 13px; font-size: .72rem; border-radius: 16px; }
  .fw--legal, .fw--qr, .fw--cv { width: 200px; gap: 9px; }
  .fw--loan b { font-size: 1.1rem; }
  .fw--loan { top: 6%; left: 3%; } .fw--chess { top: 3%; right: 3%; width: 128px; } .mini-board { width: 92px; height: 92px; }
  .fw--legal { bottom: 12%; left: 2%; } .fw--qr { display: none; } .fw--cv { top: auto; bottom: 1%; right: 3%; }
  .qr, .ring { width: 44px; height: 44px; }
}
@media (max-width: 420px) { .dev--hero { --wn: 228; } .fw--chess { display: none; } .fw--cv { bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .fw { animation: none; } }

/* day phone */
.dev--day { --wn: 320; }
.step__screen .dev { --wn: 260; }
@media (max-width: 380px) { .step__screen .dev { --wn: 230; } }

.day__phone { isolation: isolate; }
.day__phone::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 40%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pa, #2AD6D9) 30%, transparent), transparent 62%); filter: blur(10px); transition: background .8s var(--ease); }