/* App screens drawn inside the template's iPhone frames. Designed at 393pt and scaled by --k. */
.sc { color: #fff; font-size: 15px; line-height: 1.25; }
.sc .pad { padding: 0 18px; }
.sc .row { display: flex; align-items: center; justify-content: space-between; }
.sc .muted { color: #8a8a8a; }
.sc .rb { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: rgba(255, 255, 255, .08) 0 0 0 1px inset; display: grid; place-items: center; color: #e5e5e5; }
.sc .rb svg { width: 18px; height: 18px; }
.sc .pillg { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 50px; background: #3D7BFF; color: #FFFFFF; font-size: 13px; font-weight: 600; }
.sc .gcard { border-radius: 18px; background: #181818; box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; }

.feat-ph .screen { background: radial-gradient(120% 34% at 50% 0%, rgba(61, 123, 255, .26) 0%, rgba(61, 123, 255, .06) 55%, rgba(61, 123, 255, 0) 80%), #0c0c0c; }
.hero-ph .screen { background: radial-gradient(110% 26% at 50% 0%, rgba(61, 123, 255, .16) 0%, rgba(61, 123, 255, 0) 75%), #0c0c0c; }
/* hero dashboard */
.dash-top { margin-top: 16px; }
.who { display: flex; align-items: center; gap: 12px; }
.who .av { width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: linear-gradient(140deg, #3D7BFF, #0B2A8F); }
.who .av i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #0A1433; color: #BFD7FF; }
.who .av svg { width: 20px; height: 20px; }
.who small { display: block; color: #8a8a8a; font-size: 14px; }
.who b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.3px; margin-top: 2px; }
.dash-h { margin-top: 36px; font-size: 21px; font-weight: 600; letter-spacing: -0.3px; }
.tiles { margin-top: 16px; display: flex; gap: 10px; padding-left: 18px; }
.tile { flex: none; width: 168px; padding: 12px 14px; }
.tile .tl { display: flex; justify-content: space-between; color: #9a9a9a; font-size: 13px; }
.tile .tl img { width: 22px; height: 22px; border-radius: 6px; }
.tile .tk { margin-top: 18px; color: #bdbdbd; font-size: 13px; }
.tile .tv { margin-top: 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.tile .tv small { color: #6b6b6b; font-size: 13px; font-weight: 500; }
.insight { margin: 20px 12px 0; padding: 18px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(61, 123, 255, .28) 0%, rgba(61, 123, 255, .1) 100%); box-shadow: rgba(191, 215, 255, .22) 0 1px 0 0 inset, rgba(61, 123, 255, .2) 0 0 0 1px inset; display: flex; align-items: center; gap: 12px; }
.insight .ic { width: 40px; height: 40px; border-radius: 50%; background: #3D7BFF; display: grid; place-items: center; color: #FFFFFF; flex: none; box-shadow: 0 0 18px rgba(61, 123, 255, .6); }
.insight .ic svg { width: 20px; height: 20px; }
.insight b { display: block; font-size: 15px; font-weight: 600; }
.insight small { display: block; color: #B9CEFF; font-size: 12.5px; margin-top: 3px; }
.insight .go { margin-left: auto; color: #D3E0FF; }
.qa-h { margin-top: 26px; font-size: 17px; font-weight: 600; }
.qa { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; color: #9a9a9a; font-size: 12px; }
.qa i { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: rgba(61, 123, 255, .14); color: #8CB8FF; }
.qa i svg { width: 20px; height: 20px; }
.rates-h { margin-top: 26px; font-size: 17px; font-weight: 600; }
.rates { margin: 12px 12px 0; padding: 4px 14px; }
.rates .rr { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 14px; }
.rates .rr:first-child { border-top: 0; }
.rates .rr .lg { width: 30px; height: 30px; border-radius: 9px; background: #232323; display: grid; place-items: center; }
.rates .rr .lg img { width: 16px; height: 16px; }
.rates .rr .lg.w img { filter: invert(1); }
.rates .rr span { flex: 1; }
.rates .rr small { color: #777; display: block; font-size: 12px; }
.rates .rr b { font-weight: 600; color: #8CB8FF; font-variant-numeric: tabular-nums; }
.tabbar { margin: 22px 12px 0; padding: 10px 18px; border-radius: 26px; background: #1c1c1c; display: flex; justify-content: space-between; color: #777; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar .on { color: #fff; }
/* the hero screen's lower half sinks into a progressive blur, as in the template's mockup */
.hero-ph .screen::after { content: ""; position: absolute; left: 0; right: 0; top: 36%; bottom: 0; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); -webkit-mask-image: linear-gradient(transparent 0%, #000 22%); mask-image: linear-gradient(transparent 0%, #000 22%); }

/* deposit (ruler) */
.topbar { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.topbar .seg2 { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 50px; background: rgba(255, 255, 255, .06); color: #9a9a9a; }
.topbar .seg2 svg { width: 16px; height: 16px; }
.dep h5 { margin: 28px 0 0; font-size: 27px; line-height: 1.15; font-weight: 600; letter-spacing: -0.6px; }
.dep p.s { margin-top: 10px; color: #8a8a8a; font-size: 15px; }
.lab { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; color: #9a9a9a; font-size: 15px; }
.seg { display: flex; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 13px; }
.seg span { padding: 5px 11px; border-radius: 8px; color: #8a8a8a; }
.seg span.on { background: #2a2a2a; color: #fff; }
.big-n { margin-top: 18px; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.big-n small { font-size: 14px; color: #9a9a9a; font-weight: 500; }
.ruler { position: relative; margin-top: 12px; height: 46px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 7px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 1px, transparent 1px 35px); }
.ruler i { position: absolute; left: 50%; top: -4px; width: 3px; height: 54px; margin-left: -1px; border-radius: 3px; background: #3D7BFF; box-shadow: 0 0 12px rgba(61, 123, 255, .7); }
.ruler-n { margin-top: 8px; display: flex; justify-content: space-between; color: #777; font-size: 12px; padding: 0 6px; }
.sel { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.sel b { color: #8CB8FF; font-weight: 600; font-variant-numeric: tabular-nums; }
.cta-g { margin-top: 22px; padding: 15px; border-radius: 16px; background: #3D7BFF; color: #FFFFFF; text-align: center; font-size: 16px; font-weight: 600; }

/* chat */
.chat-head { margin: 22px -18px 0; padding: 14px 12px 22px; border-radius: 26px 26px 0 0; background: linear-gradient(180deg, rgba(61, 123, 255, .45), rgba(61, 123, 255, .08) 85%, transparent); }
.chat-head .card { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); box-shadow: rgba(255, 255, 255, .1) 0 0 0 1px inset; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.chat-head .card .m { width: 26px; height: 26px; border-radius: 7px; background: #3D7BFF; display: grid; place-items: center; color: #FFFFFF; }
.chat-head .card .m svg { width: 15px; height: 15px; }
.chat-head .card small { margin-left: auto; color: #C9D8FF; font-size: 12px; }
.chat-body { margin: -6px -18px 0; padding: 14px 18px 0; border-radius: 26px 26px 0 0; background: #141414; }
.day { text-align: center; color: #8a8a8a; font-size: 13px; }
.me { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.me small { color: #777; font-size: 12px; }
.bub { max-width: 270px; padding: 12px 14px; border-radius: 16px; background: #1f1f1f; font-size: 13.5px; line-height: 1.4; color: #e5e5e5; }
.ai { margin-top: 14px; }
.ai .who2 { display: flex; align-items: center; gap: 8px; color: #8a8a8a; font-size: 12px; }
.ai .who2 i { width: 22px; height: 22px; border-radius: 50%; background: #3D7BFF; display: grid; place-items: center; color: #FFFFFF; }
.ai .who2 i svg { width: 12px; height: 12px; }
.ai .bub { margin: 8px 0 0 30px; max-width: 300px; background: #1a1a1a; box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; }
.ai .bub ul { margin: 6px 0 0; padding-left: 16px; list-style: disc; }
.ai .bub li { margin-top: 3px; }
.paid { margin: 8px 0 0 30px; color: #8CB8FF; font-size: 12px; }
.composer { margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: #1c1c1c; display: flex; align-items: center; gap: 10px; color: #777; font-size: 14px; }
.composer svg { width: 18px; height: 18px; }
.composer .snd { margin-left: auto; color: #fff; }

/* markets list */
.search { margin-top: 16px; padding: 13px 16px; border-radius: 50px; background: rgba(255, 255, 255, .06); box-shadow: rgba(255, 255, 255, .08) 0 0 0 1px inset; display: flex; align-items: center; gap: 10px; color: #8a8a8a; font-size: 14px; }
.search svg { width: 16px; height: 16px; }
.res { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; }
.res span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 12px; font-weight: 500; color: #cfcfcf; }
.mk { margin-top: 12px; padding: 14px; }
.mk .t { display: flex; align-items: center; gap: 12px; }
.mk .t .lg { width: 46px; height: 46px; border-radius: 12px; background: #f5f5f5; display: grid; place-items: center; }
.mk .t .lg img { width: 26px; height: 26px; }
.mk .t b { display: block; font-size: 15px; font-weight: 600; }
.mk .t .tg { display: inline-block; margin-top: 5px; padding: 2px 8px; border-left: 2px solid #eab308; color: #eab308; background: rgba(234, 179, 8, .1); font-size: 12px; border-radius: 0 6px 6px 0; }
.mk .t .tg.g { border-color: #3D7BFF; color: #8CB8FF; background: rgba(61, 123, 255, .1); }
.mk .t .px { margin-left: auto; text-align: right; color: #9a9a9a; font-size: 12px; }
.mk .t .px b { color: #fff; font-size: 14px; }
.mk .st { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .1); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 12px; color: #8a8a8a; }
.mk .st b { display: block; margin-top: 3px; font-size: 14px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk .st b.g { color: #8CB8FF; }
.mk .bar { margin-top: 12px; height: 6px; border-radius: 6px; background: #262626; overflow: hidden; }
.mk .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2B5FE0, #8CB8FF); }
.mk .bl { margin-top: 6px; display: flex; justify-content: space-between; font-size: 11.5px; color: #777; }

/* auto routing log (inside the $VELA card) */
.route { width: 100%; border-radius: 24px; background: #070707; box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; padding: 20px; font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: #d4d4d4; }
.route .rh { display: flex; justify-content: space-between; color: #6b6b6b; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.route .rh b { color: #BFD7FF; font-weight: 400; }
.route .rl { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.route .rl:last-child { border-bottom: 0; }
.route .rl q { quotes: none; color: #e5e5e5; font-family: var(--body); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route .rl .tier { padding: 3px 8px; border-radius: 6px; font-size: 12px; }
.route .tier.f { background: rgba(61, 123, 255, .12); color: #8CB8FF; }
.route .tier.m { background: rgba(234, 179, 8, .12); color: #facc15; }
.route .tier.t { background: rgba(248, 113, 113, .12); color: #fca5a5; }
.route .rl .c { color: #9a9a9a; min-width: 62px; text-align: right; }
.route .rf { margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); display: flex; justify-content: space-between; color: #9a9a9a; font-family: var(--body); font-size: 14px; }
.route .rf b { color: #8CB8FF; font-weight: 500; }
.route .rl.fresh { animation: rowIn .6s cubic-bezier(.22, 1, .36, 1); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }