:root {
--ink: #05051a;
--ink-2: #0b0b26;
--ink-3: #14143a;
--indigo: #1a0080;
--indigo-deep: #0b0042;
--blue: #097bf5;
--blue-2: #3d95ff;
--sky: #67badb;
--cyan: #a4e0eb;
--slate: #313a54;
--mist: #e9eff0;
--green: #12b76a;
--amber: #f59e0b;
--red: #f04438;
--paper: #ffffff;
--cloud: #f5f5f7;
--text: #0a0c1b;
--text-2: #4a5068;
--text-3: #858aa0;
--line: rgba(10, 12, 40, 0.08);
--on-dark: #ffffff;
--on-dark-2: rgba(235, 238, 255, 0.68);
--on-dark-3: rgba(235, 238, 255, 0.42);
--line-dark: rgba(255, 255, 255, 0.1);
--grad: linear-gradient(100deg, #67badb 0%, #a4e0eb 45%, #ffffff 100%);
--grad-brand: linear-gradient(135deg, #1a0080 0%, #2b2bd9 45%, #097bf5 100%);
--r-xl: 32px;
--r-lg: 24px;
--r-md: 16px;
--wrap: 1200px;
--gutter: clamp(20px, 5vw, 40px);
--nav-h: 60px;
--f-display: "Poppins", "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-text: "Poppins", "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sb { height: 3.4em; display: flex; justify-content: space-between; align-items: center; padding-inline: 1.316em 1.097em; color: #313a54; font-weight: 500; font-size: 1em; }
[dir="rtl"] .sb { padding-inline: 1.097em 1.316em; }
.sb__time { font-size: .713em; }
.sb__icons { display: flex; align-items: center; gap: .219em; }
.sb__icons svg { width: .878em; height: .878em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sb__icons .sb__bat { width: .987em; height: .987em; }
.app { position: absolute; inset: 3.4em 0 0; padding: .4em 1.3em 0; display: flex; flex-direction: column; }
.app > * { flex-shrink: 0; }
.flow__head { display: grid; grid-template-columns: 2em 1fr 2em; align-items: center; height: 2.6em; text-align: center; }
.flow__head b { font-size: .92em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow__head .i { font-size: 1.3em; color: var(--text-2); }
[dir="rtl"] .flow__head .i { transform: scaleX(-1); }
.flow__head > :last-child { justify-self: end; }
.merchant__logo { width: 3em; height: 3em; border-radius: .9em; display: grid; place-items: center; background: #111426; color: #fff; font-weight: 600; font-size: .85em; flex: none; }
.sum { margin-block-start: .9em; background: #fff; border-radius: 1.3em; padding: .4em 1em; box-shadow: 0 .2em .9em rgba(10, 12, 40, .05); }
.sum > div { display: flex; justify-content: space-between; padding-block: .62em; font-size: .8em; }
.sum > div + div { border-top: 1px solid rgba(10, 12, 40, .06); }
.sum dt { color: var(--text-2); }
.sum dd { font-weight: 600; }
.sum__total dt, .sum__total dd { color: var(--text); font-weight: 600; font-size: 1.1em; }
.hp__screen, .dphone__screen, .scn { text-rendering: geometricPrecision; }
.ic { width: 2.4em; height: 2.4em; fill: currentColor; flex: none; }
[dir="rtl"] .ic.flip { transform: scaleX(-1); }
.ui {
--navy: #313a54; --text2: #465278; --hint: #5a6790; --brand: #097bf5; --brand-d: #0865cc;
--canvas: #f2f4f7; --line: #e9eff0; --border: #d5dde3; --ok: #157a63; --ok-bg: #e3f6f1; --warn-bg: #fcf5dc; --brand-bg: #e8f2fe;
position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
background: var(--canvas); color: var(--navy);
font-size: calc(1em * 22.6 / 41.2); line-height: 1.45; font-synthesis: none; font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
.ui > * { flex-shrink: 0; }
.ui::after { content: ""; position: absolute; z-index: 3; bottom: 1em; left: 50%; width: 10.8em; height: .4em; margin-left: -5.4em; border-radius: 1em; background: var(--navy); }
.ui i { font-style: normal; }
.ui em { font-style: normal; }
.ui small { font-size: 1.3em; line-height: 1.54; color: var(--text2); }
.ui b { font-weight: 600; }
.ui__body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 2.4em; padding: .8em 1.6em 1.6em; overflow: hidden; }
.ui--home > .ui__body { padding-block-start: 6.2em; }
.ui__body--scan { gap: 1.6em; }
.ui__body--list { gap: 1.6em; padding-block-end: 10.4em; }
.uhead { display: flex; align-items: center; gap: .4em; height: 6.4em; margin-block-start: 5em; padding-inline: .4em; }
.uhead > b { flex: 1 1 0; min-width: 0; font-size: 1.8em; line-height: 1.44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uhead__back { display: grid; place-items: center; width: 4.8em; height: 4.8em; flex: none; }
.uhead--top { padding-inline: 1.6em .4em; }
.wal { position: relative; flex: none; padding: 2em; border-radius: 1.6em; color: #fff; background: linear-gradient(191.83deg, #097bf5 7.6%, #34b9d1 107.6%); box-shadow: 0 1.2em 2.8em -.8em rgba(9, 123, 245, .22); }
.wal--biz { background: linear-gradient(196.6deg, #7064f5 5.19%, #230763 71.7%); box-shadow: 0 1.2em 2.8em -.8em rgba(62, 8, 153, .25); }
.wal__id { display: flex; align-items: center; gap: 1.2em; min-height: 4.4em; margin-block-end: 2.4em; padding-inline-end: 5.6em; }
.wal__av { display: grid; place-items: center; width: 2.933em; height: 2.933em; flex: none; border-radius: .867em; background: rgba(255, 255, 255, .18); font-size: 1.5em; font-weight: 600; }
.wal__who { display: flex; flex-direction: column; min-width: 0; }
.wal__who b { font-size: 1.6em; line-height: 1.375; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wal__who small { font-size: 1.2em; line-height: 1.33; color: #fff; opacity: .82; white-space: nowrap; }
.wal__bell { position: absolute; inset-block-start: 2em; inset-inline-end: 2em; display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 1.3em; background: rgba(255, 255, 255, .16); }
.wal__bell .ic { width: 2.2em; height: 2.2em; }
.wal__bell::after { content: ""; position: absolute; inset-block-start: .9em; inset-inline-end: .7em; width: .9em; height: .9em; border-radius: 50%; background: #e73843; box-shadow: 0 0 0 .15em #fff; }
.wal__label { font-size: 1.4em; line-height: 1.43; opacity: .85; }
.wal__row { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-block-start: .4em; min-height: 4.4em; }
.wal__amt { font-size: 3.6em; line-height: 1.22; font-weight: 600; white-space: nowrap; }
.wal__amt i { font-size: .556em; }
.wal__hide { display: inline-flex; align-items: center; gap: .6em; height: 4em; padding-inline: 1.2em 1.4em; border-radius: 1.2em; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.wal__hide .ic { width: 1.8em; height: 1.8em; }
.wal__hide b { font-size: 1.3em; font-weight: 500; line-height: 1.38; }
.wal__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em; margin-block-start: 2.4em; }
.wal__stats > div { display: flex; flex-direction: column; gap: .2em; min-width: 0; padding: 1em 1.2em; border-radius: 1.6em; background: rgba(255, 255, 255, .12); }
.wal__stats small { display: flex; align-items: center; gap: .545em; font-size: 1.1em; line-height: 1.4545; color: #fff; white-space: nowrap; }
.wal__stats small .ic { width: 1.27em; height: 1.27em; }
.wal__stats b { font-size: 1.5em; line-height: 1.47; white-space: nowrap; }
.wal__btns { display: flex; gap: 1.2em; margin-block-start: 2.4em; }
.wal--biz .wal__btns { margin-block-start: 1.2em; }
.wal__bell--n::after { display: none; }
.wal__bell--n > i { position: absolute; inset-block-start: -.364em; inset-inline-end: -.364em; display: grid; place-items: center; min-width: 1.636em; height: 1.636em; padding-inline: .318em; border-radius: .545em; border: .136em solid #fff; background: #d92d38; font-size: 1.1em; line-height: 1.27; font-weight: 600; }
.ubtn { display: flex; align-items: center; justify-content: center; gap: .8em; flex: 1 1 0; min-width: 0; height: 5.2em; padding-inline: 1.2em; border-radius: 1.6em; }
.ubtn .ic { width: 2em; height: 2em; }
.ubtn b { font-size: 1.5em; line-height: 1.6; white-space: nowrap; }
.ubtn--white { background: #fff; color: var(--navy); }
.ubtn--glass { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); color: #fff; }
.ubtn--pri, .ubtn--text, .ubtn--out { flex: none; width: 100%; }
.ubtn--pri { background: var(--brand); color: #fff; }
.ubtn--text { color: var(--navy); }
.ubtn--out { background: #fff; box-shadow: inset 0 0 0 1px var(--border); color: var(--navy); }
.ubtn--pri b, .ubtn--text b, .ubtn--out b { font-size: 1.7em; line-height: 1.41; }
.ufoot { display: flex; flex-direction: column; gap: .8em; padding: .8em 1.6em 4em; }
.ucard { background: #fff; border-radius: 1.6em; }
.usec { display: flex; flex-direction: column; gap: .8em; min-height: 0; }
.usec__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6em; min-height: 2.2em; }
.usec__head b, .usec__head span { font-size: 1.5em; line-height: 1.47; font-weight: 600; white-space: nowrap; }
.usec__head span { color: var(--brand-d); }
.ui--biz .usec__head span { color: var(--navy); }
.ui--home.ui--biz .usec { gap: 0; }
.ui--home.ui--biz .usec__head { min-height: 4.4em; }
.ui--home.ui--biz .usec__head span { font-size: 1.3em; line-height: 1.54; }
.usec--cards { gap: 0; }
.usec--cards > * + * { margin-block-start: 1.2em; }
.usec--cards > .usec__head + * { margin-block-start: .8em; }
.usec__day { font-size: 1.2em; line-height: 1.5; font-weight: 500; color: var(--text2); }
.ulist { padding-block: .4em; }
.utx { display: flex; align-items: center; gap: 1.2em; padding: 1.2em 1.6em; }
.utx > .ic { color: var(--navy); }
.utx__t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.utx__t b { font-size: 1.5em; line-height: 1.47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utx__t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utx__end { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; flex: none; }
.utx__end > b { font-size: 1.5em; line-height: 1.47; white-space: nowrap; }
.utx__end > b.is-in { color: var(--ok); }
.ulist--titled { display: flex; flex-direction: column; gap: .4em; padding-block: 1.6em .4em; }
.ulist--titled .ulist__title { font-size: 1.5em; line-height: 1.47; padding-inline: 1.067em; }
.uchip { display: inline-flex; align-items: center; gap: .31em; padding: .31em .92em .31em .62em; border-radius: .62em; font-size: 1.3em; line-height: 1.54; font-weight: 500; white-space: nowrap; }
.uchip .ic { width: 1.23em; height: 1.23em; }
.uchip--ok { background: var(--ok-bg); color: var(--ok); }
.uchip--info { background: #e3f5f8; color: var(--navy); }
.uchip--rep { background: var(--line); color: var(--text2); }
.uchip--s { gap: .36em; height: 1.82em; padding: 0 .73em; border-radius: .55em; background: var(--line); color: var(--text2); font-size: 1.1em; line-height: 1.45; font-weight: 600; }
.uchip--s .ic { width: 1.09em; height: 1.09em; }
.ubal { display: flex; align-items: center; gap: 1.2em; padding: 1.6em; }
.ubal__t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .4em; }
.ubal__t b { font-size: 2.4em; line-height: 1.25; white-space: nowrap; }
.ubiz { display: flex; align-items: center; gap: 1.2em; padding: 1.6em; }
.ubiz__t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.ubiz__t b { font-size: 1.5em; line-height: 1.47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ubiz > em { font-size: 1.5em; line-height: 1.47; font-weight: 600; white-space: nowrap; }
.uav { display: grid; place-items: center; width: 2.667em; height: 2.667em; flex: none; border-radius: .8em; background: var(--brand-bg); color: var(--brand-d); font-size: 1.5em; line-height: 1.47; font-weight: 600; }
.ubiz--person .ubiz__t { gap: 0; }
.ubiz--rep { flex-direction: column; align-items: stretch; gap: 1.2em; }
.ubiz__row { display: flex; align-items: center; gap: 1.2em; }
.ubiz__rep { display: flex; align-items: center; gap: .8em; }
.ubiz__rep small { white-space: nowrap; }
.usum { display: flex; flex-direction: column; gap: 1.2em; padding: 1.6em; }
.uitem { display: flex; align-items: flex-start; gap: 1.2em; }
.uitem > span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.uitem b { font-size: 1.5em; line-height: 1.47; font-weight: 500; }
.uitem > em { font-size: 1.3em; line-height: 1.54; font-weight: 600; white-space: nowrap; }
.uline { display: block; height: 1px; flex: none; background: var(--line); }
.urows { display: flex; flex-direction: column; margin: 0; }
.urow { display: flex; align-items: center; gap: 1.2em; min-height: 4em; padding-block: .6em; }
.urow dt { flex: 1 1 0; min-width: 0; font-size: 1.3em; line-height: 1.54; color: var(--text2); }
.urow dd { font-size: 1.3em; line-height: 1.54; font-weight: 600; white-space: nowrap; }
.urow dd .ic { display: inline-block; width: 1.23em; height: 1.23em; margin-inline-start: .46em; vertical-align: -.2em; }
.urow--total { min-height: 4.2em; }
.urow--total dt { font-size: 1.5em; line-height: 1.47; font-weight: 600; color: var(--navy); }
.urow--total dd { font-size: 1.5em; line-height: 1.47; }
.ugroups { padding: 1em 1.6em; }
.ugroups .uline { margin-block: .6em; }
.ugroups--titled { padding: 1.6em 1.6em .8em; }
.ugroups__title { display: block; margin-block-end: .4em; font-size: 1.5em; line-height: 1.47; }
.urow dt { text-align: start; }
.uhero { display: flex; flex-direction: column; align-items: center; padding-block-end: .8em; text-align: center; }
.uhero--link { gap: .8em; padding-block: 1.6em 0; }
.uhero--link .uhero__ctx { margin: 0; }
.uhero--link .uhero__amt i { font-size: .684em; }
.uhero__ic { color: var(--ok); margin-block-end: 1.2em; }
.uhero__ic .ic { display: block; width: 4.8em; height: 4.8em; }
.uhero__amt { font-size: 3.8em; line-height: 1.21; font-weight: 600; white-space: nowrap; }
.uhero__amt i { font-size: .632em; }
.uhero__ctx { margin-block: .267em .8em; font-size: 1.5em; line-height: 1.47; color: var(--text2); }
.uhero__ctx:first-child { margin-block: 0 .267em; }
.ufile { display: flex; gap: .8em; }
.ufile .ubtn { flex: 1 1 0; width: auto; padding-inline: .8em; }
.ufile .ubtn--icon { flex: none; width: 5.2em; padding: 0; }
.utl { padding: 1.6em; }
.utl li { position: relative; display: flex; flex-direction: column; gap: .4em; padding-inline-start: 3.2em; padding-block-end: 1.6em; }
.utl li:last-child { padding-block-end: 0; }
.utl li::before { content: ""; position: absolute; z-index: 1; inset-inline-start: 0; inset-block-start: .1em; width: 2em; height: 2em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .2em var(--border); }
.utl li::after { content: ""; position: absolute; inset-inline-start: .9em; inset-block: 2.1em -.2em; width: .2em; background: var(--border); }
.utl li:last-child::after { display: none; }
.utl b { font-size: 1.5em; line-height: 1.47; font-weight: 500; color: var(--text2); }
.utl .is-done b, .utl .is-now b { font-weight: 600; color: var(--navy); }
.utl .is-done::before { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E") center / 1.6em no-repeat; box-shadow: none; }
.utl .is-done::after { background: var(--navy); }
.utl .is-now::before { background: radial-gradient(circle, var(--brand) 0 .4em, #fff .42em); box-shadow: inset 0 0 0 .2em var(--brand); }
.uscan { position: relative; height: 38em; flex: none; overflow: hidden; border-radius: 1.6em; background: #000; }
.uscan__stand { position: absolute; left: 50%; top: -15.8em; width: 60em; max-width: none; height: auto; transform: translateX(-54%); }
[dir="rtl"] .uscan__stand { transform: translateX(-46%); }
.uscan__corners { position: absolute; left: calc(50% - 13.6em); top: 5.4em; width: 27.2em; height: 27.2em; animation: scan-lock 2.6s ease-in-out infinite alternate; }
@keyframes scan-lock { from { transform: scale(1.035); } to { transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { .uscan__corners { animation: none; } }
.uhint { text-align: center; font-size: 1.5em; line-height: 1.47; color: var(--text2); }
.uscan__stand { transform-origin: 0 45.5%; }
.hp__view.is-on .uscan__stand { will-change: scale, rotate, translate; }
.uscan__corners path { transition: stroke .22s; }
.uscan.is-locked .uscan__corners { animation: scan-snap .36s cubic-bezier(.3, 1.7, .5, 1); }
.uscan.is-locked .uscan__corners path { stroke: var(--green); }
@keyframes scan-snap { from { transform: scale(1.05); } }
.uscan__foot { display: grid; }
.uscan__foot > * { grid-area: 1 / 1; align-self: start; }
.uscan__found { opacity: 0; }
.uscan__found .ubiz__t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .ufoot .ubtn--pri { position: relative; overflow: hidden; }
.hp .ufoot .ubtn--pri b, .ubtn__a { position: relative; }
.ubtn__touch { position: absolute; inset: -40% -4%; opacity: 0; pointer-events: none; background: radial-gradient(circle 3.4em at 50% 50%, rgba(255, 255, 255, .26) 0 96%, rgba(255, 255, 255, 0) 100%), rgba(0, 22, 90, .22); }
.ubtn__a { display: flex; align-items: center; gap: .8em; }
.ubtn__b { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.ufield__box { transition: box-shadow .22s; }
.ufield__box.is-typing { box-shadow: inset 0 0 0 .15em var(--brand); }
.ufield__box > b.is-empty { color: var(--hint); opacity: .55; }
.ufield__box.is-typing > b::after { content: ""; display: inline-block; width: .07em; height: 1em; margin-inline-start: .06em; vertical-align: -.12em; background: var(--brand); animation: ucaret 1.05s steps(1) infinite; }
@keyframes ucaret { 50% { opacity: 0; } }
.ufield { display: flex; flex-direction: column; gap: .8em; }
.ufield > label { font-size: 1.5em; line-height: 1.47; font-weight: 500; }
.ufield__box { display: flex; align-items: center; justify-content: space-between; gap: 1.2em; min-height: 6.4em; padding-inline: 1.6em; border-radius: 1.6em; background: #fff; box-shadow: inset 0 0 0 1px rgba(49, 58, 84, .2); }
.ufield__box > b { font-size: 2.4em; line-height: 1.25; }
.ufield__box > span { font-size: 1.5em; line-height: 1.47; font-weight: 600; color: var(--text2); }
.ufield__box--area { display: block; min-height: 8em; padding: .8em 1.067em; border-radius: 1.067em; font-size: 1.5em; line-height: 1.47; }
.useg { display: flex; gap: .4em; height: 4.4em; flex: none; padding: .4em; border-radius: 1.3em; background: var(--line); }
.useg span { flex: 1 1 0; min-width: 0; display: grid; place-items: center; border-radius: .846em; font-size: 1.3em; font-weight: 600; color: var(--text2); white-space: nowrap; }
.useg .is-on { background: #fff; color: var(--navy); }
.usearch { display: flex; gap: .8em; flex: none; }
.usearch__box { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .8em; height: 4.8em; padding-inline: 1.6em 1.2em; border-radius: 1.6em; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.usearch__box .ic { width: 2em; height: 2em; }
.usearch__box span { font-size: 1.5em; line-height: 1.47; color: var(--hint); }
.usearch__filter { display: grid; place-items: center; width: 4.8em; height: 4.8em; flex: none; border-radius: 1.6em; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.ushare { display: flex; flex-direction: column; gap: 1.2em; padding: 1.6em; }
.ushare > b { font-size: 1.5em; line-height: 1.47; }
.ushare__url { display: flex; align-items: center; gap: .8em; height: 5.2em; padding-inline: 1.4em .4em; border-radius: 1.6em; background: #f7fafb; box-shadow: inset 0 0 0 1px var(--border); }
.ushare__url span { flex: 1 1 0; min-width: 0; font-size: 1.4em; line-height: 1.43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ushare__url i { display: grid; place-items: center; width: 4.4em; height: 4.4em; flex: none; }
.ushare__url .ic { width: 2em; height: 2em; }
.ushare__to { display: flex; justify-content: space-between; }
.ushare__to li { display: flex; flex-direction: column; align-items: center; gap: .6em; width: 8em; }
.ushare__to i { display: grid; place-items: center; width: 5.6em; height: 5.6em; border-radius: 1.6em; background: var(--line); }
.ushare__to .ic { width: 2.2em; height: 2.2em; }
.ushare__to b { font-size: 1.2em; line-height: 1.33; font-weight: 500; color: var(--text2); white-space: nowrap; }
.ushare__to .is-wa i { background: #128c7e; color: #fff; }
.ushare__to .is-wa .ic { width: 2.4em; height: 2.4em; }
.unav { position: absolute; z-index: 2; inset-inline: 0; bottom: 2.4em; display: flex; align-items: center; height: 8em; padding: .8em 2.8em; }
.ui--biz .unav { padding-inline: 2.6em; }
.unav::before { content: ""; position: absolute; inset-inline: 0; bottom: -2.4em; height: 12.8em; background: linear-gradient(to bottom, rgba(242, 244, 247, 0), #f2f4f7 35%); }
.unav::after { content: ""; position: absolute; inset-inline: 2.2em; top: .8em; height: 6.4em; border-radius: 1.6em; background: #fff; box-shadow: 0 .8em 2.4em rgba(49, 58, 84, .14); }
.unav > span { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; height: 100%; }
.unav i { display: grid; place-items: center; width: 5.2em; height: 3em; border-radius: .9em; }
.unav .ic { opacity: .6; }
.unav b { font-size: 1.2em; line-height: 1.33; font-weight: 500; color: var(--hint); white-space: nowrap; }
.ui--biz .unav i { width: 4.8em; }
.ui--biz .unav b { font-size: 1.1em; line-height: 1.4545; }
.unav .is-on i { background: var(--line); }
.unav .is-on .ic { opacity: 1; }
.unav .is-on b { font-weight: 600; color: var(--navy); }
:root[lang="ar"] .ui { line-height: 1.55; }
:root[lang="ar"] .wal__who b, :root[lang="ar"] .utx__t b { font-weight: 500; }
:root[lang="ar"] .ubtn b { font-size: 1.4em; }
:root[lang="ar"] .utx__t small { font-size: 1.2em; }
:root[lang="ar"] .unav b { font-size: 1.1em; }
:root[lang="ar"] .ubtn--pri b, :root[lang="ar"] .ubtn--out b { font-size: 1.5em; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("/assets/fonts/alexandria-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--black: #000; --ink: #0a0a0a; --graphite: #10162f;
--white: #fff; --cloud: #eff3fa;
--mute: #5d6684; --mute-dark: #a5aecb;
--line: rgba(0, 0, 0, .08); --line-dark: rgba(255, 255, 255, .16);
--blue: #097bf5; --blue-dark: #4a9dfa;  --blue-text: #0768d1;
--biz: #7064f5; --biz-core: #230763; --biz-text: #513fbb; --biz-tint: #f2f1fe; --biz-mute: #d6d2fb;
--biz-light: #9289f7;
--biz-cloud: #f4f3fd;
--biz-grad: linear-gradient(196.6deg, #6152e6 0%, #3b1b9a 48%, #230763 100%);
--indigo: #0a2a8e; --kraft: #c89f6e; --sand: #efe6d8; --green: #12b76a;
--font: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--wrap: 1200px;
--gutter: clamp(20px, 4.5vw, 40px);
--nav-h: 52px;
--section: clamp(96px, 11vw, 160px);
--ease: cubic-bezier(.16, 1, .3, 1);
}
:root[lang="ar"] { --font: "Alexandria", "Satoshi", system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--white); color: var(--graphite); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[dir="rtl"] .flip { transform: scaleX(-1); }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: calc(900px + var(--gutter) * 2); }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
[data-theme="indigo"] :focus-visible, [data-theme="dark"] :focus-visible { outline-color: #fff; }
.display { font-size: clamp(44px, 6.6vw, 96px); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.display--md { font-size: clamp(36px, 5.2vw, 76px); letter-spacing: -0.015em; line-height: 1.05; }
.caption { font-size: clamp(40px, 5.4vw, 80px); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.lead { margin-block-start: 24px; max-width: 32em; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.4; color: var(--mute); font-weight: 500; text-wrap: pretty; }
.lead--dark { color: var(--mute-dark); }
.kicker { font-size: 19px; font-weight: 700; color: #c7d3f5; margin-block-end: 14px; letter-spacing: -0.01em; }
:root[lang="ar"] .display, :root[lang="ar"] .caption { letter-spacing: 0; line-height: 1.42; font-weight: 600; }
:root[lang="ar"] .lead { line-height: 1.6; }
:root[lang="ar"] :is(.btn, .kicker, .faq__list summary, .badge__txt b, .card b, .page--faq .prose summary) { letter-spacing: 0; }
.head { margin-block-end: clamp(48px, 6vw, 80px); }
.head--center { text-align: center; }
.head--center .lead { margin-inline: auto; }
.head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding-inline: 24px; border-radius: 999px; border: 0; font-weight: 600; font-size: 17px; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background-color .25s, transform .4s var(--ease); }
.btn:active { transform: scale(.97); }
.btn--black { background: var(--black); color: #fff; }
.btn--black:hover { background: #1f2747; }
.btn--white { background: #fff; color: var(--black); }
.btn--white:hover { background: #e8e8ed; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: #2589f7; }
.btn--xs { height: 30px; padding-inline: 14px; font-size: 13.5px; font-weight: 600; }
.link { display: inline-flex; align-items: center; gap: 2px; color: var(--blue-text); font-size: 17px; font-weight: 500; }
.link .i { font-size: 15px; stroke-width: 2.4; transition: translate .3s var(--ease); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:hover .i { translate: 2px 0; }
[dir="rtl"] .link:hover .i { translate: -2px 0; }
.link--dark { color: var(--blue-dark); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding-inline: 16px 20px; border-radius: 12px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px #a6a6a6; transition: transform .3s var(--ease); }
.badge:hover { transform: translateY(-1px); }
.badge__logo { width: 24px; height: 24px; }
.badge__logo--play { width: 21px; height: 21px; }
.badge__txt { display: flex; flex-direction: column; line-height: 1.05; text-align: start; }
.badge__txt small { font-size: 10.5px; letter-spacing: .02em; }
.badge__txt b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); color: var(--graphite); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: background-color .4s, color .4s, box-shadow .4s; }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav[data-theme="dark"] { color: #f5f5f7; background: rgba(0, 0, 0, .82); box-shadow: none; }
.nav[data-theme="indigo"] { color: #fff; background: rgba(6, 24, 116, .92); box-shadow: none; }
.nav[data-theme="indigo"]:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav[data-theme="indigo"] .btn--blue { background: #fff; color: var(--blue-text); }
.nav__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__brand { display: flex; align-items: center; gap: 9px; }
.nav__mark { width: 22px; color: #fff; }
.nav__mark-m { display: none; }
.nav:is([data-theme="dark"], [data-theme="indigo"]) .nav__mark-c { display: none; }
.nav:is([data-theme="dark"], [data-theme="indigo"]) .nav__mark-m { display: block; }
.nav__word { width: 82px; }
.nav__mark svg, .nav__word svg { width: 100%; height: auto; display: block; }
.nav__links { display: flex; gap: 28px; margin-inline: auto; font-size: 13.5px; font-weight: 500; }
.nav__links a { opacity: .8; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__end { display: flex; align-items: center; gap: 18px; }
.langs { display: flex; gap: 2px; font-size: 13px; font-weight: 500; }
.langs a { padding: 4px 7px; border-radius: 6px; opacity: .55; transition: opacity .2s; }
.langs--foot a { opacity: .8; }
.langs a:hover, .langs a[aria-current="true"] { opacity: 1; }
.langs a[aria-current="true"] { font-weight: 700; }
.langs a[lang="ar"] { font-family: "Alexandria", sans-serif; }
.nav__menu { display: none; position: relative; width: 36px; height: 36px; margin-inline-end: -6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav__menu i { position: absolute; left: 10px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.nav__menu i:first-child { top: 14px; } .nav__menu i:last-child { top: 20px; }
.nav__menu[aria-expanded="true"] i:first-child { top: 17px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-child { top: 17px; transform: rotate(-45deg); }
.mnav { position: fixed; inset: var(--nav-h) 0 0; z-index: 49; overflow-y: auto; display: flex; flex-direction: column; padding: 20px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); background: var(--white); color: var(--graphite); }
.mnav[hidden] { display: none; }
.mnav a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--line); font-size: 28px; font-weight: 600; letter-spacing: -0.015em; animation: mnav-in .5s var(--ease) both; }
.mnav a:nth-child(2) { animation-delay: .03s; } .mnav a:nth-child(3) { animation-delay: .06s; } .mnav a:nth-child(4) { animation-delay: .09s; } .mnav a:nth-child(5) { animation-delay: .12s; } .mnav a:nth-child(6) { animation-delay: .15s; }
.mnav a.mnav__biz { align-items: center; }
.mnav__biz small { padding: 5px 10px; border-radius: 999px; background: var(--graphite); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
:root[lang="ar"] .mnav a { letter-spacing: 0; }
@keyframes mnav-in { from { opacity: 0; transform: translateY(-8px); } }
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .nav[data-nav] { color: var(--graphite); background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--line); }
.menu-open .nav .btn--blue { background: var(--blue); color: #fff; }
.menu-open .nav .nav__mark-c { display: block; } .menu-open .nav .nav__mark-m { display: none; }
@media (max-width: 900px) { .nav__links, .nav__end > .langs { display: none; } .nav__end { margin-inline-start: auto; gap: 10px; } .nav__menu { display: block; } }
.mnav .mnav__langs { display: flex; gap: 6px; margin-block-start: auto; padding-block-start: 28px; font-size: 17px; }
.mnav .mnav__langs a { display: inline-flex; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 17px; font-weight: 500; letter-spacing: 0; opacity: 1; animation: none; }
.mnav .mnav__langs a[aria-current="true"] { border-color: currentColor; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mnav a { animation: none; } }
@media (max-width: 340px) { .nav__word { display: none; } }
.story { --story-bg: #0a2a8e; position: relative; height: 360vh; background: var(--story-bg); color: #fff; }
.story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.indigo-bg { --flip: 1; position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #0a2a8e 0 8%, #1a60d0 45%, #1e6fe8 66% 92%, #0a1a4c 92%); }
[dir="rtl"] .indigo-bg { --flip: -1; }
.indigo-bg::before {
content: ""; position: absolute; inset: 0 -14vw;
background: url("/assets/render/baked/hero-arcade.webp") center bottom / cover no-repeat;
background-image: image-set(url("/assets/render/baked/hero-arcade.avif") type("image/avif"), url("/assets/render/baked/hero-arcade.webp") type("image/webp"));
transform: translateX(calc((var(--gx, 0px) + var(--gd, 0px)) * .4)) scale(var(--gz, 1)) scaleX(var(--flip)); will-change: transform;
}
@media (max-width: 500px) {
.indigo-bg { --head: 424px; background: linear-gradient(180deg, #0a2a8e 0 10%, #1e6fe8 52%); }
:root[lang="en"] .indigo-bg { --head: 399px; }
:root[lang="ar"] .indigo-bg { --head: 388px; }
.indigo-bg::before {
inset: 0; background-size: 100% auto; background-position: center calc(var(--head) - 135vw);
background-image: url("/assets/render/baked/hero-arcade-phone.webp");
background-image: image-set(url("/assets/render/baked/hero-arcade-phone.avif") type("image/avif"), url("/assets/render/baked/hero-arcade-phone.webp") type("image/webp"));
}
}
@media (max-width: 375px) { :root[lang="ar"] .indigo-bg { --head: 412px; } }
@media (min-width: 501px) and (max-height: 420px) { .indigo-bg::before { background-position: center calc(100% + 40px); } }
@media (min-aspect-ratio: 4/5) and (min-width: 761px) {
.indigo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10, 42, 142, .84) 0 42%, rgba(10, 42, 142, 0) 62%); opacity: 0; transition: opacity .9s var(--ease); }
[dir="rtl"] .indigo-bg::after { background: linear-gradient(to left, rgba(10, 42, 142, .84) 0 42%, rgba(10, 42, 142, 0) 62%); }
.story__stage:has(.steps__item.is-on) .indigo-bg::after { opacity: 1; }
}
.story__fade { position: absolute; inset: 0; z-index: 0; background: #000; opacity: 0; pointer-events: none; }
.story .hp::before { content: ""; position: absolute; z-index: 0; inset: 3% 6%; border-radius: 13% / 6.4%; box-shadow: 9cqw 3cqw 13cqw rgba(3, 14, 88, .5); }
[dir="rtl"] .story .hp::before { box-shadow: -9cqw 3cqw 13cqw rgba(3, 14, 88, .5); }
.story .hp::after { content: ""; position: absolute; z-index: 0; left: 2%; right: 2%; top: calc(100% - 4.5cqw); height: 10cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 10, 48, .6), rgba(2, 10, 48, .26) 55%, rgba(2, 10, 48, 0)); transform: translateX(5%); pointer-events: none; }
[dir="rtl"] .story .hp::after { transform: translateX(-5%); }
.story__hero { position: absolute; inset: 0 0 auto; z-index: 3; padding-block-start: calc(var(--nav-h) + clamp(40px, 10vh, 112px)); text-align: center; }
.story__title { margin-inline: auto; max-width: 12em; font-size: clamp(44px, 6.4vw, 96px); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.story__sub { margin: 24px auto 0; max-width: 29em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; color: #fff; font-weight: 500; text-wrap: pretty; }
.story__cta { margin-block-start: 32px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.link--light { color: #fff; }
:root[lang="ar"] .story__title { letter-spacing: 0; line-height: 1.42; }
@media (min-width: 761px) and (max-height: 820px) {
.story__hero { padding-block-start: calc(var(--nav-h) + 3.5vh); }
.story__title { font-size: clamp(44px, 10vh, 76px); }
.story__sub { margin-block-start: 16px; max-width: 42em; font-size: 18px; }
.story__cta { margin-block-start: 20px; }
}
.story__steps { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 24px) 40px; pointer-events: none; }
.steps { position: relative; max-width: min(500px, 40vw); padding-inline-start: 30px; pointer-events: auto; }
.steps::before, .steps::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, .3); }
.steps::after { background: #fff; transform: scaleY(var(--f, 0)); transform-origin: 50% 0; }
.steps__item + .steps__item { margin-block-start: clamp(16px, 2.6vh, 30px); }
.steps__item a { display: block; }
.steps__item h2 { font-size: clamp(28px, 2.9vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; color: rgba(255, 255, 255, .66); transition: color .5s var(--ease); text-wrap: balance; }
.steps__item a:hover h2 { color: rgba(255, 255, 255, .7); }
.steps__item.is-on h2 { color: #fff; }
.steps__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ease), opacity .5s var(--ease); }
.steps__more > p { min-height: 0; overflow: hidden; }
.steps__item.is-on .steps__more { grid-template-rows: 1fr; opacity: 1; }
.steps__more p { padding-block-start: 12px; max-width: 24em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: rgba(255, 255, 255, .9); font-weight: 500; text-wrap: pretty; }
.steps__bars { display: none; }
:root[lang="ar"] .steps__item h2 { letter-spacing: 0; line-height: 1.4; }
.story__device {
position: absolute; z-index: 1; container-type: size; pointer-events: none;
inset-block: calc(var(--nav-h) + 36px) 36px;
inset-inline: 50% max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.story__anchor { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; }
.hp {
--hs: 1.3;
--ph: min(100cqh, 880px, calc(100cqw / var(--ar, .5)));
position: absolute; left: 50%; top: 50%; width: calc(var(--ph) * var(--ar, .5) * var(--hs));
margin-left: calc(var(--ph) * var(--ar, .5) * var(--hs) * -.5); margin-top: calc(var(--ph) * var(--hs) * -.5);
container-type: inline-size; will-change: transform;
}
.hp__frame { position: relative; z-index: 2; width: 100%; height: auto; max-width: none; user-select: none; }
.hp__screen {
position: absolute; z-index: 1; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
border-radius: var(--rx) / var(--ry); overflow: hidden; background: #f2f4f7; color: #313a54;
font-family: "Poppins", "Alexandria", system-ui, sans-serif; font-size: calc(var(--sf) * 100cqw); line-height: 1.3; letter-spacing: 0;
}
.hp__screen > .sb { position: absolute; inset: 0 0 auto; z-index: 20; }
.hp__view { position: absolute; inset: 0; overflow: hidden; background: #f2f4f7; visibility: hidden; }
.hp__view.is-on { visibility: visible; }
.hp__view.is-top { box-shadow: -1em 0 3em rgba(10, 12, 40, .16); }
[dir="rtl"] .hp__view.is-top { box-shadow: 1em 0 3em rgba(10, 12, 40, .16); }
.hp__dim { position: absolute; inset: 0; z-index: 10; background: rgba(6, 8, 28, .18); opacity: 0; pointer-events: none; }
@keyframes hp-pop { from { transform: scale(.5); opacity: 0; } 40% { opacity: 1; } }
@keyframes hp-burst { from { transform: rotate(calc(var(--n) * 45deg)) translateY(-2em) scale(.3); opacity: 0; } 50% { opacity: 1; } }
@keyframes hp-rise { from { transform: translateY(.8em); opacity: 0; } }
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
.story__stage { display: grid; grid-template-rows: calc(var(--nav-h) + clamp(18px, 3.4svh, 36px)) auto minmax(0, 1fr); }
.story__hero { padding-block-start: calc(var(--nav-h) + clamp(28px, 6svh, 64px)); }
.story__title { font-size: clamp(40px, 11vw, 64px); line-height: 1.02; }
.story__sub { margin-block-start: 16px; font-size: 17px; max-width: 24em; }
.story__cta { margin-block-start: 24px; }
.story__steps { position: relative; grid-row: 2; inset: auto; display: block; padding: 0 var(--gutter); }
.steps { display: grid; max-width: none; padding: 0; }
.steps::before, .steps::after { display: none; }
.steps__item { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .18s linear, transform 0s linear .18s; pointer-events: none; }
.steps__item.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s var(--ease) .16s, transform .8s var(--ease) .16s; }
.steps__item + .steps__item { margin: 0; }
.steps__item h2 { font-size: clamp(28px, 7.6vw, 40px); color: #fff; }
.steps__more { grid-template-rows: 1fr; opacity: 1; }
.steps__more p { padding-block-start: 8px; font-size: 17px; }
.steps__bars { display: flex; gap: 6px; margin-block-start: 16px; }
.steps__bars li { width: 28px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.steps__bars li::after { content: ""; display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: #fff; }
.story__device { position: relative; grid-row: 3; inset: auto; margin-block: 20px clamp(16px, 3svh, 32px); }
.hp { --hs: 1.08; }
}
.story__title, .story__sub, .story__cta { animation: hero-in 1.2s var(--ease) both; }
.story__sub { animation-delay: .12s; } .story__cta { animation-delay: .2s; }
.story__device > .hp { animation: phone-in 1.7s var(--ease) .1s both; }
.boot-t :is(.story__title, .story__sub, .story__cta), .boot-p .story__device > .hp { animation-play-state: paused; }
.story__steps :is(.steps, .steps__bars) { transition: opacity .6s var(--ease); }
.boot-p .story__steps :is(.steps, .steps__bars) { opacity: 0; }
@keyframes hero-in { from { opacity: 0; translate: 0 24px; } }
@keyframes phone-in { from { opacity: 0; translate: 0 22vh; } }
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
.story__title { font-size: clamp(32px, 8vh, 52px); }
.story__sub { font-size: 16px; margin-block-start: 12px; }
.story__cta { margin-block-start: 16px; }
}
html:not(.js) .story { height: auto; }
html:not(.js) .story__stage { position: relative; height: auto; min-height: 100svh; }
html:not(.js) .story__steps { display: none; }
.js .story__steps { visibility: hidden; opacity: 0; }
.stage { position: relative; width: 100%; }
.stage__frame { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.stage__device { position: absolute; inset: 0; }
.stage__layer { position: absolute; max-width: none; height: auto; user-select: none; pointer-events: none; }
.statement { background: var(--black); color: #f5f5f7; padding-block: var(--section); text-align: center; }
.statement { padding-block: clamp(110px, 12vw, 180px); }
.statement__title { max-width: 14ch; margin-inline: auto; }
.statement .lead { margin-inline: auto; margin-block-start: 32px; max-width: 28em; font-size: clamp(21px, 2vw, 28px); line-height: 1.35; color: #f5f5f7; }
.js .statement [data-words] .word { color: #3a3a3c; transition: color .2s linear; }
.js .statement [data-words] .word.is-lit { color: #f5f5f7; }
.try { background: var(--white); padding-block: var(--section); }
.more { background: var(--white); padding-block: var(--section); overflow: hidden; }
.paddles { display: flex; gap: 12px; flex: none; }
.paddle { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #e8e8ed; color: var(--graphite); display: grid; place-items: center; cursor: pointer; font-size: 20px; transition: background-color .2s, opacity .2s; }
.paddle:hover { background: #dcdce1; }
.paddle:disabled { opacity: .35; cursor: default; }
.paddle .i { stroke-width: 2.4; }
.rail { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.rail::-webkit-scrollbar { display: none; }
.rail__track { display: flex; gap: 20px; width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-block-end: 8px; }
.fcard { position: relative; overflow: hidden; background: #000; color: #f5f5f7; flex: none; width: clamp(300px, 31vw, 400px); height: clamp(540px, 46vw, 640px); border-radius: 28px; padding: clamp(28px, 2.6vw, 40px); display: flex; flex-direction: column; scroll-snap-align: start; }
.fcard__copy h3 { font-size: clamp(26px, 2.2vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.fcard__copy p { margin-block-start: 10px; font-size: 17px; line-height: 1.45; color: var(--mute-dark); font-weight: 500; max-width: 20em; }
:root[lang="ar"] .fcard__copy h3 { letter-spacing: 0; line-height: 1.35; }
.fcard__art { position: relative; flex: 1; margin-block-start: 24px; display: grid; place-items: center; }
@media (max-width: 640px) { .fcard { width: 82vw; height: 560px; border-radius: 20px; } .head--row { flex-direction: column; align-items: flex-start; } .paddles { display: none; } }
[dir="rtl"] .ticket { rotate: -5deg; }
:root:not([lang="ar"]) .langs a[lang="ar"] { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.stand-img { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.phc { --show: .56; position: relative; width: min(100%, 300px); aspect-ratio: var(--ar) / var(--show); margin-inline: auto; overflow: hidden; pointer-events: none; user-select: none; }
.ph { position: absolute; inset: 0 0 auto; container-type: inline-size; translate: 0 calc(var(--from, 0) * -100%); }
.ph .hp__view { visibility: visible; }
.tile__art--shot { margin-block-end: calc(clamp(28px, 3vw, 44px) * -1); }
.tile__art--shot .phc { --show: .6; width: min(88%, 320px); }
.sec { background: var(--black); color: #f5f5f7; padding-block: var(--section); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 32px; min-height: 340px; padding: clamp(28px, 3vw, 44px); border-radius: 32px; background: #111; }
.tile--funds { grid-column: 1 / span 2; }
.tile--ledger { grid-column: 3; grid-row: 1 / span 2; }
.tile__copy h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; color: #f5f5f7; text-wrap: pretty; }
.tile__copy p { margin-block-start: 10px; max-width: 26em; font-size: 17px; line-height: 1.45; color: var(--mute-dark); font-weight: 500; text-wrap: pretty; }
.tile__art { margin-block-start: auto; }
.tile--ledger .tile__art { margin-block: auto; }
.tile--dispute .tile__art--shot { margin-inline: calc(clamp(28px, 3vw, 44px) * -1); }
.tile--dispute .tile__art--shot .phc { --from: .36; --show: .36; width: min(97%, 380px); -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
:root[lang="ar"] .tile__copy h3 { letter-spacing: 0; line-height: 1.35; }
.dsp { display: none; }
.dsp__label { font-size: 15px; font-weight: 500; color: var(--mute-dark); }
.dsp__amt { margin-block-start: 6px; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #f5f5f7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsp__tag { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 176, 64, .16); color: #ffc46b; font-size: 14px; font-weight: 650; }
.dsp__tag .ic { width: 16px; height: 16px; }
.dsp__tl { position: relative; margin-block-start: 22px; padding-block-start: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
.dsp__tl::before { content: ""; position: absolute; inset-inline-start: 5px; top: 34px; bottom: 34px; width: 2px; background: rgba(255, 255, 255, .14); }
.dsp__tl li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-block: 12px; padding-inline-start: 34px; }
.dsp__tl li::before { content: ""; position: absolute; inset-inline-start: 0; top: 18px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); background: #111; }
.dsp__tl li.is-done::before { background: #f5f5f7; box-shadow: none; }
.dsp__tl li.is-now::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(9, 123, 245, .25); }
.dsp__tl b { font-size: 17px; font-weight: 600; color: #f5f5f7; }
.dsp__tl small { font-size: 15px; font-weight: 500; color: var(--mute-dark); }
.dsp__tl li:last-child b { color: var(--mute-dark); }
.split__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 20px; }
.split__key { display: grid; grid-template-columns: 10px auto; justify-content: start; align-items: center; gap: 10px 8px; font-size: 15px; font-weight: 500; color: var(--mute-dark); }
.split__key--held { justify-content: end; color: #a9d0ff; }
.split__key b { grid-column: 1 / -1; font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #f5f5f7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.split__key--held b { justify-self: end; color: #8cc4ff; }
.split__key i { width: 10px; height: 10px; border-radius: 50%; background: #f5f5f7; }
.split__key--held i { background: var(--blue); }
.split__key .i { font-size: 15px; stroke-width: 2.4; }
.split__bar { display: flex; gap: 4px; height: 14px; margin-block-start: 24px; }
.split__avail { flex: 48250; border-radius: 7px; background: #f5f5f7; }
.split__held { flex: 22750; border-radius: 7px; background: var(--blue); }
.split__total { display: flex; justify-content: space-between; gap: 16px; margin-block-start: 22px; padding: 16px 2px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 17px; font-weight: 500; color: var(--mute-dark); }
.split__total b { color: #f5f5f7; font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger__ref { display: block; margin-block-end: 10px; font-size: 14px; font-weight: 500; color: var(--mute-dark); font-variant-numeric: tabular-nums; }
.ledger ol { position: relative; }
.ledger ol::before { content: ""; position: absolute; inset-inline-start: 5px; top: 28px; bottom: 28px; width: 2px; background: rgba(255, 255, 255, .14); }
.ledger li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 16px; padding-inline-start: 34px; border-top: 1px solid rgba(255, 255, 255, .08); }
.ledger li:first-child { border-top: 0; }
.ledger li::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 12px; height: 12px; margin-block-start: -6px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); background: #111; }
.ledger li.is-done::before { background: #f5f5f7; box-shadow: none; }
.ledger li.is-now::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(9, 123, 245, .25); }
.ledger b { font-size: 17px; font-weight: 600; color: #f5f5f7; }
.ledger li:not(.is-done):not(.is-now) b { color: var(--mute-dark); }
.ledger time { flex: none; font-size: 15px; font-weight: 500; color: var(--mute-dark); font-variant-numeric: tabular-nums; }
.js .ledger li { opacity: 0; transform: translateY(12px); }
.js .ledger.is-in li { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.js .ledger.is-in li:nth-child(2) { transition-delay: .14s; } .js .ledger.is-in li:nth-child(3) { transition-delay: .28s; } .js .ledger.is-in li:nth-child(4) { transition-delay: .42s; }
.tile--nets .bz-pay { margin-block: auto; }
.tile--nets .bz-pay__row { gap: 12px; padding: 14px 16px; border-radius: 18px; }
.tile--nets .bz-pay__row--off { margin-inline: 10px; background: #202023; color: var(--mute-dark); font-size: 15px; font-weight: 500; }
.tile--nets .bz-pay__ic { width: 40px; height: 40px; border-radius: 12px; padding: 8px 7px 8px 6px; }
.tile--nets .bz-pay__txt b { font-size: 15px; }
.tile--nets .bz-pay__txt small { font-size: 13px; }
.tile--nets .bz-pay__row--boonka { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.tile--nets .bz-pay__row--boonka .bz-pay__ic { grid-row: 1 / span 2; }
.tile--nets .bz-pay__amt { grid-column: 2; margin-block-start: 2px; font-size: 22px; font-weight: 700; white-space: nowrap; }
@media (min-width: 700px) {
.tile--nets .bz-pay { gap: 0; }
.tile--nets .bz-pay__row { gap: 14px; padding: 18px 20px; border-radius: 22px; }
.tile--nets .bz-pay__row--off { margin-inline: 14px; padding-block: 18px; font-size: 16px; }
.tile--nets .bz-pay__swap { height: 40px; }
.tile--nets .bz-pay__ic { width: 48px; height: 48px; border-radius: 14px; padding: 10px 9px 10px 8px; }
.tile--nets .bz-pay__txt b { font-size: 17px; }
.tile--nets .bz-pay__txt small { font-size: 14px; }
.tile--nets .bz-pay__row--boonka { column-gap: 14px; row-gap: 4px; }
.tile--nets .bz-pay__amt { margin-block-start: 6px; font-size: 28px; letter-spacing: -0.01em; }
}
@media (max-width: 1099px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile--funds { grid-column: 1 / span 2; }
.tile--ledger { grid-column: 1; grid-row: 2 / span 2; }
}
@media (max-width: 699px) {
.bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tile, .tile--funds, .tile--ledger { grid-column: auto; grid-row: auto; min-height: 0; border-radius: 24px; }
.pot { min-height: 0; gap: 8px; }
.tile--dispute .tile__art--shot { display: none; }
.dsp { display: block; margin-block-start: auto; }
}
@media (prefers-reduced-motion: reduce) { .js .ledger li { opacity: 1; transform: none; } }
.biz { background: var(--biz-grad); color: #fff; padding-block: var(--section) clamp(56px, 6vw, 88px); }
.biz__ask { margin-block-start: clamp(36px, 4vw, 56px); padding-block-start: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 17px; color: var(--biz-mute); }
.biz__ask .link { margin-inline-start: 6px; white-space: nowrap; }
.biz__calctitle { max-width: 15em; margin-block-end: clamp(36px, 4vw, 56px); color: #fff; }
.biz__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px 72px; align-items: end; margin-block-end: clamp(56px, 7vw, 96px); }
.biz__head .lead { margin-block-start: 0; color: var(--biz-mute); }
.biz .kicker { color: #c9c4fb; }
.ticks { margin-block-start: 28px; }
.ticks li { padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 17px; font-weight: 500; }
.ticks li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.biz__price { margin-block-start: 28px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.biz__cta { margin-block-start: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.biz .link--dark { color: #fff; }
@media (max-width: 900px) { .biz__head { grid-template-columns: 1fr; } }
.faq { background: var(--white); padding-block: var(--section); }
.faq .display { text-align: center; }
.faq__list { margin-block-start: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 26px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.01em; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__pm { position: relative; flex: none; width: 18px; height: 18px; }
.faq__pm::before, .faq__pm::after { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 18px; height: 2px; border-radius: 1px; background: var(--graphite); transition: transform .35s var(--ease); }
.faq__pm::after { transform: rotate(90deg); }
details[open] .faq__pm::after { transform: rotate(0); }
.faq__list details p { padding-block-end: 28px; margin-block-start: -6px; max-width: 42em; font-size: 17px; line-height: 1.6; color: var(--mute); font-weight: 500; }
.faq__more { margin-block-start: 40px; text-align: center; color: var(--mute); font-weight: 500; }
.get { position: relative; isolation: isolate; overflow: hidden; background: #0a2a8e; color: #fff; padding-block-start: var(--section); text-align: center; }
.get__in { display: flex; flex-direction: column; align-items: center; }
.get .display { color: #fff; }
.get__lead { margin-inline: auto; color: #fff; }
.get__row { margin-block-start: 40px; display: flex; align-items: center; justify-content: center; gap: 28px; text-align: start; }
.get__qr { flex: none; width: 124px; height: 124px; padding: 12px; border-radius: 22px; background: #fff; color: #000; }
.get__qr svg { width: 100%; height: 100%; }
.get__hint { margin-block-start: 12px; font-size: 14px; color: #fff; font-weight: 500; }
.get .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.get__art { position: relative; height: clamp(300px, 36vw, 470px); margin-block-start: clamp(48px, 6vw, 80px); overflow: hidden; }
.get__art .stage { width: min(440px, 72vw); margin-inline: auto; }
@media (max-width: 860px) {
.get__row { flex-direction: column; text-align: center; }
.get__row .badges { justify-content: center; }
.get__qr, .get__hint { display: none; }
.get__art { height: clamp(260px, 70vw, 380px); }
}
.foot { background: var(--white); border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; padding-block: 0 28px; }
.foot .wrap > * { border-top: 1px solid #d2d2d7; }
.foot .wrap > :first-child { border-top: 0; }
.foot__top { display: flex; justify-content: space-between; align-items: center; padding-block: 28px; }
.foot__brand { width: 96px; color: var(--graphite); }
.foot__brand svg { width: 100%; height: auto; }
.foot__social { display: flex; gap: 6px; }
.foot__social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--graphite); font-size: 17px; transition: background-color .2s; }
.foot__social a:hover { background: #e8e8ed; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 28px; }
.foot__cols h2 { font-size: 13px; font-weight: 700; color: var(--graphite); margin-block-end: 8px; }
.foot__cols a { display: block; padding-block: 4px; overflow-wrap: anywhere; transition: color .2s; }
.foot__cols a:hover { color: var(--graphite); text-decoration: underline; }
.foot__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block-start: 18px; }
@media (max-width: 760px) { .foot__cols { grid-template-columns: repeat(2, 1fr); } }
.page { background: var(--white); padding-block: calc(var(--nav-h) + clamp(56px, 8vw, 120px)) var(--section); }
.page__head { max-width: 900px; margin-block-end: clamp(40px, 5vw, 72px); }
.page__head .lead { margin-block-start: 20px; }
.page__meta { margin-block-start: 18px; font-size: 15px; font-weight: 500; color: var(--mute); }
.page__body { display: grid; gap: clamp(40px, 6vw, 96px); }
.page--contact .page__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 900px) { .page--contact .page__body { grid-template-columns: minmax(0, 1fr); } }
.page--contact .prose ul:not(.cards) { display: flex; flex-wrap: wrap; gap: 8px; }
.page--contact .prose ul:not(.cards) > li { margin: 0; padding: 0; }
.page--contact .prose ul:not(.cards) > li::before { content: none; }
.page--contact .prose ul:not(.cards) a { display: inline-flex; padding: 10px 18px; border-radius: 999px; background: var(--cloud); color: var(--graphite); font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.page--contact .prose ul:not(.cards) a:hover { background: #e8e8ed; }
.prose { max-width: 720px; font-size: 17px; line-height: 1.65; color: var(--graphite); }
.prose > * + * { margin-block-start: 16px; }
.prose > :first-child { margin-block-start: 0; }
.prose h2 { margin-block-start: 56px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h3 { margin-block-start: 36px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h2 + *, .prose h3 + * { margin-block-start: 12px; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose ul { list-style: none; padding-inline-start: 0; }
.prose ul:not(.cards) > li { position: relative; padding-inline-start: 22px; }
.prose ul:not(.cards) > li::before { content: ""; position: absolute; inset-inline-start: 3px; top: calc(.5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.prose ol { list-style: decimal; }
.prose li + li { margin-block-start: 8px; }
.prose li::marker { color: var(--mute); }
.prose a { color: var(--blue-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); overflow-wrap: anywhere; transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 700; }
:root[lang="ar"] .prose { line-height: 1.85; }
:root[lang="ar"] .prose h2, :root[lang="ar"] .prose h3 { letter-spacing: 0; line-height: 1.4; }
.page__back { margin-block-end: 20px; font-size: 15px; }
.page__back .i { font-size: 14px; }
.prose .cards { padding: 0; list-style: none; display: grid; gap: 12px; }
.prose .cards li + li { margin: 0; }
.prose a.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 24px 28px; border-radius: 24px; background: var(--cloud); color: var(--graphite); text-decoration: none; transition: background-color .2s; }
.prose a.card:hover { background: #ebebf0; }
.card b { grid-column: 1; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.card span { grid-column: 1; font-size: 16px; line-height: 1.45; color: var(--mute); font-weight: 500; }
.card .i { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; color: var(--mute); stroke-width: 2.2; }
.toc { margin-block-end: 48px; padding: 24px 28px; border-radius: 24px; background: var(--cloud); }
.toc p { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
:root[lang="ar"] .toc p { letter-spacing: 0; }
.prose .toc ol { margin-block-start: 12px; padding-inline-start: 1.4em; columns: 2 260px; column-gap: 40px; font-size: 15px; line-height: 1.45; }
.prose .toc li { break-inside: avoid; margin: 0 0 8px; }
.prose .toc a { color: var(--graphite); text-decoration: none; }
.prose .toc a:hover { color: var(--blue); text-decoration: underline; }
.prose code { padding: .1em .35em; border-radius: 6px; background: var(--cloud); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; overflow-wrap: anywhere; }
.prose pre.code { overflow-x: auto; padding: 20px 22px; border-radius: 18px; background: var(--ink); color: #f5f5f7; font-size: 14px; line-height: 1.6; text-align: left; }
.prose pre.code code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.prose .table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.prose th, .prose td { padding: 12px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th { background: var(--cloud); font-weight: 700; }
.page--faq .prose { max-width: 820px; }
.page--faq .prose details { margin-block-start: 0; border-bottom: 1px solid var(--line); }
.page--faq .prose :not(details) + details { margin-block-start: 20px; border-top: 1px solid var(--line); }
.page--faq .prose summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 22px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.page--faq .prose summary::-webkit-details-marker { display: none; }
.help__a { padding-block-end: 24px; color: var(--mute); font-weight: 500; }
.help__a > * + * { margin-block-start: 12px; }
.cform { position: relative; display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: 32px; background: var(--cloud); }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cform__field { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--graphite); }
.cform__field em { font-style: normal; font-weight: 500; color: var(--mute); }
.cform input, .cform textarea { width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: #fff; font: inherit; font-size: 17px; font-weight: 500; color: var(--graphite); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s; }
.cform textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.cform input:focus, .cform textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--blue); }
.cform [aria-invalid="true"] { box-shadow: 0 0 0 2px #d92d20; }
.cform__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cform__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cform__status { font-size: 15px; font-weight: 500; color: var(--mute); }
.cform__status.is-ok { color: #0b8a50; }
.cform__status.is-err { color: #d92d20; }
@media (max-width: 560px) { .cform__row { grid-template-columns: minmax(0, 1fr); } .cform { border-radius: 24px; } }
.cform select { width: 100%; padding: 14px 44px 14px 16px; border: 0; border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; font: inherit; font-size: 17px; font-weight: 500; color: var(--graphite); box-shadow: 0 0 0 1px var(--line); appearance: none; -webkit-appearance: none; }
[dir="rtl"] .cform select { padding: 14px 16px 14px 44px; background-position: left 14px center; }
.cform select:focus { outline: none; box-shadow: 0 0 0 2px var(--blue); }
.modal { border: 0; padding: 40px 36px 32px; width: min(400px, calc(100vw - 32px)); border-radius: 28px; background: #fff; color: var(--graphite); text-align: center; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .5); }
.modal::backdrop { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: pop .45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.modal p { margin-block-start: 8px; color: var(--mute); font-weight: 500; }
.modal__qr { width: 200px; height: 200px; margin: 28px auto; padding: 14px; border-radius: 22px; color: #000; box-shadow: 0 0 0 1px var(--line); }
.modal__qr svg { width: 100%; height: 100%; }
.modal .badges { justify-content: center; }
.modal__x { position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #e8e8ed; display: grid; place-items: center; cursor: pointer; font-size: 17px; color: var(--graphite); }
.js [data-rise] { opacity: 0; transform: translateY(28px); }
.split-line { display: block; }
.split-line-mask { padding-block: .24em; margin-block: 0 -.48em; }
.split-line-mask:first-child { margin-block-start: -.24em; }
.split-line-mask:last-child { margin-block-end: -.24em; }
@media (prefers-reduced-motion: reduce) {
.js [data-rise] { opacity: 1; transform: none; }
.steps__item, .steps__item h2, .steps__more { transition: none; }
.story__title, .story__sub, .story__cta, .story__device > .hp { animation: none; }
.boot-p .story__device > .hp { visibility: hidden; }
}
.fcard__art, .tile__art, .tile--nets .bz-pay, .bz-card__art, .bz-notes { pointer-events: none; -webkit-user-select: none; user-select: none; }
.anyw { background: var(--white); padding-block: var(--section); }
.anyw .kicker { color: var(--blue-text); }
.anyw__grid { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.anyw__card { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #000; }
.anyw__art { order: 2; display: flex; justify-content: center; align-items: flex-end; flex: none; height: clamp(300px, 28vw, 420px); margin-block-start: auto; padding-block-start: clamp(18px, 2vw, 28px); overflow: hidden; }
.anyw__phone { --show: .655; flex: none; width: min(66%, 270px); margin: 0; }
.anyw__copy { order: 1; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 36px) 0; }
.anyw__copy h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.anyw__copy p { margin-block-start: 8px; max-width: 30em; color: rgba(255, 255, 255, .7); font-size: 17px; line-height: 1.45; text-wrap: pretty; }
:root[lang="ar"] .anyw__copy h3 { letter-spacing: 0; line-height: 1.35; }
@media (max-width: 999px) { .anyw__phone { width: min(60%, 196px); } }
@media (min-width: 1000px) {
.anyw__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anyw__card--course, .anyw__card--tickets { grid-column: span 2; }
}
.anyw__sell { margin-block-start: 28px; color: var(--mute); font-size: 17px; }
.anyw__sell .link { margin-inline-start: 4px; white-space: nowrap; }
.anyw__ask { margin-block-start: 8px; }
.anyw__ask .link { padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.anyw--dark { background: var(--black); color: #f5f5f7; }
.anyw--dark .kicker { color: var(--blue-dark); }
.anyw--dark .anyw__card, .anyw--dark .anyw__art { background: #111113; }
.anyw--dark .anyw__art--render > :is(picture, img) { mix-blend-mode: lighten; }
.anyw--dark .anyw__sell { color: var(--mute-dark); }
.anyw--bz { background: var(--white); }
@media (max-width: 760px) {
.anyw__grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.anyw__grid::-webkit-scrollbar { display: none; }
.anyw__card { flex: 0 0 84%; scroll-snap-align: start; }
.anyw__art { height: 360px; }
.anyw__phone { width: min(62%, 228px); }
.anyw__sell .link { display: flex; width: fit-content; margin: 6px 0 0; }
.anyw__ask { margin-block-start: 20px; }
}
.more__pos { margin-block-start: 28px; color: var(--mute); font-size: 17px; }
.more__pos .link { margin-inline-start: 4px; white-space: nowrap; }
.facts { margin-block: clamp(56px, 7vw, 96px) 0; text-align: center; }
.facts__item { padding-block-start: 0; }
.facts dt { font-size: clamp(88px, 13vw, 190px); font-weight: 600; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(180deg, #fff 30%, #7dbbff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts dd { margin: 14px auto 0; max-width: 24em; color: var(--mute-dark); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; text-wrap: balance; }
:root[lang="ar"] .facts dt { letter-spacing: 0; line-height: 1.3; padding-block-end: .34em; margin-block-end: -.14em; }
@media (max-width: 760px) {
}
.biz__notes { margin-block-start: 36px; max-width: 470px; }
.biz .bz-note { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.biz .bz-note__txt small, .biz .bz-note time { color: var(--biz-mute); }
@media (max-width: 900px) { .biz__notes { margin-block-start: 28px; } }
.dots { display: flex; justify-content: center; gap: 8px; margin-block-start: 20px; }
.dots[hidden] { display: none; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .28; transition: opacity .25s, transform .25s; }
.dots i.is-on { opacity: 1; transform: scale(1.15); }
main > [data-theme="light"] + [data-theme="light"] { padding-block-start: 0; }
.story__title { text-wrap: balance; }
@media (min-width: 1100px) and (max-width: 1600px) { .story__steps .steps { margin-inline-start: clamp(0px, 8vw - 60px, 90px); } }
.biz .bz-note:nth-child(n) { opacity: 1; transform: none; }
.biz .bz-note:nth-child(2) { opacity: .82; }
@media (max-width: 760px) { .split__key--held { justify-content: start; } .split__key--held b { justify-self: start; } }
@media (min-width: 1000px) { .tile--ledger .ledger li { padding-block: 21px; } .tile--ledger .ledger li b { font-size: 17px; } }
@media (min-width: 1000px) {
.more .rail__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
.more .fcard { width: auto; }
.more .paddles { display: none; }
}
@media (pointer: coarse) { .link { padding-block: 10px; } }
@media (max-width: 760px) { .tile--ledger .ledger li:nth-child(n+4):not(.is-now) { display: none; } }
@media (max-width: 480px) { .story__title { font-size: min(9vw, 40px); } }
.bkbtn { container-type: inline-size; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 551.63 / 99.08; padding: 0; border: 0; border-radius: 1.33% / 7.4%; color: #fff; white-space: nowrap;
background: linear-gradient(0deg, #097bf5 0%, #124eda 2%, #1a2cc5 4%, #1f13b6 6%, #2205ae 8%, #2400ab 9%, #2200a5 12%, #1e0094 16%, #1a0080 19%); font-family: "Poppins", "Alexandria", system-ui, sans-serif; font-weight: 600; cursor: pointer; }
.bkbtn__t { font-size: 5.9cqw; line-height: 1; margin-inline-end: 2cqw; }
:root[lang="ar"] .bkbtn__t { font-family: "Alexandria", "Poppins", sans-serif; font-size: 5.6cqw; }
.bkbtn__w, .bkbtn__m { flex: none; display: block; height: 8.52cqw; width: auto; aspect-ratio: 154 / 47; }
.bkbtn__m { aspect-ratio: 57 / 47; margin-inline-start: 3.4cqw; }
.demo {
--d-ease: cubic-bezier(.2, .8, .2, 1);
--d-ink: var(--graphite, #1d1d1f);
--d-mute: var(--mute, #6e6e73);
--d-blue: #097bf5;
display: grid;
grid-template-columns: auto minmax(0, 36rem);
justify-content: center;
align-items: center;
column-gap: clamp(56px, 9vw, 136px);
--air: 28px;
--pw: clamp(260px, calc((100svh - var(--nav-h) - 2 * var(--air)) * var(--ar, .5)), 360px);
}
.demo__device { position: relative; isolation: isolate; }
.dphone {
--r: calc(var(--pw) * .168);
position: relative;
width: var(--pw);
height: calc(var(--pw) * 2.06);
font-size: calc(var(--pw) / 24);
border-radius: var(--r);
background:
linear-gradient(160deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 9%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, .22) 100%),
linear-gradient(90deg, #2c2d31 0%, #4a4b50 1.2%, #26272a 3%, #1d1e21 50%, #26272a 97%, #4a4b50 98.8%, #2c2d31 100%);
box-shadow:
inset 0 0 0 .05em rgba(255, 255, 255, .2),
0 0 0 .035em #0c0c0e,
0 3.4em 5em -2.2em rgba(0, 0, 0, .42),
0 1.4em 2.2em -1.2em rgba(0, 0, 0, .28);
}
.dphone__key {
position: absolute; z-index: -1; width: .26em; border-radius: .14em;
background: linear-gradient(90deg, #121315, #4f5055 45%, #1c1d20);
}
.dphone__key--action { left: -.17em; top: 16.5%; height: 4%; }
.dphone__key--up { left: -.17em; top: 24.5%; height: 7.4%; }
.dphone__key--down { left: -.17em; top: 34%; height: 7.4%; }
.dphone__key--power { right: -.17em; top: 27%; height: 11.5%; background: linear-gradient(90deg, #1c1d20, #4f5055 55%, #121315); }
.dphone__glass {
position: absolute; inset: .2em;
border-radius: calc(var(--r) - .2em);
background: #000;
padding: .42em;
}
.dphone__screen {
position: relative; height: 100%;
border-radius: calc(var(--r) - .62em);
overflow: hidden; isolation: isolate;
background: #000; color: var(--text, #0a0c1b);
font-family: "Poppins", "Alexandria", system-ui, -apple-system, sans-serif;
font-size: 1em; line-height: 1.35; letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
text-align: start;
user-select: none; -webkit-user-select: none;
}
.dphone:has(> .hp__frame) {
height: calc(var(--pw) / var(--ar)); border-radius: 0; background: none; box-shadow: none;
}
.dphone:has(> .hp__frame)::after {
content: ""; position: absolute; z-index: -1; inset: 2% 3%; border-radius: 15% / 7.4%;
box-shadow: 0 3.4em 5em -2.2em rgba(0, 0, 0, .42), 0 1.4em 2.2em -1.2em rgba(0, 0, 0, .26);
}
.dphone:has(> .hp__frame) .dphone__key { display: none; }
.dphone:has(> .hp__frame) .dphone__glass {
inset: auto; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
padding: 0; border-radius: var(--rx) / var(--ry); background: #f2f4f7; overflow: hidden;
}
.dphone:has(> .hp__frame) .dphone__screen { border-radius: 0; font-size: calc(var(--pw) * var(--sf)); }
.dphone > .hp__frame { position: absolute; z-index: 70; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; }
.demo__fit { display: none; }
.dphone__screen > .sb { position: absolute; inset: 0 0 auto; z-index: 50; color: #313a54; transition: color .3s; pointer-events: none; }
.dphone__screen.is-paged > .sb { color: #fff; }
:where(.dphone) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; text-rendering: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.dphone) button:disabled { cursor: default; }
.dphone :focus-visible { outline: .15em solid var(--d-blue); outline-offset: .15em; }
.dphone [hidden] { display: none !important; }
.dm-stack { position: absolute; inset: 0; overflow: hidden; background: #f2f4f7; transform-origin: 50% 0; }
.dm-view { position: absolute; inset: 0; overflow: hidden; background: #f2f4f7; visibility: hidden; }
.dm-view.is-on { visibility: visible; }
.dm-view.is-moving { box-shadow: -.6em 0 2em rgba(10, 12, 40, .12); }
[dir="rtl"] .dm-view.is-moving { box-shadow: .6em 0 2em rgba(10, 12, 40, .12); }
.dm-view__dim { position: absolute; inset: 0; z-index: 30; background: rgba(6, 8, 28, .14); opacity: 0; pointer-events: none; }
.dm-scrim { position: absolute; inset: 0; z-index: 15; background: #000; opacity: 0; visibility: hidden; }
.dm-sheet {
position: absolute; inset: 4.6em 0 0; z-index: 20;
display: flex; flex-direction: column;
background: #f2f4f7;
border-radius: 1.5em 1.5em 0 0;
overflow: hidden;
visibility: hidden;
}
.dm-sheet.is-on { visibility: visible; }
.dm-sheet__grab { flex: none; width: 2.4em; height: .3em; margin: .5em auto .15em; border-radius: 1em; background: #c9cdd7; }
.ui--sheet { position: relative; inset: auto; flex: 1 1 0; min-height: 0; background: none; }
.uhead--sheet { margin-block-start: 0; height: 5.2em; padding-inline: 1.6em .8em; }
.uhead--sheet .dm-icbtn { margin: 0; font-size: 1.82em; }
.ui__body--done { padding-block-start: 2.4em; }
.dm-icbtn { display: grid; place-items: center; width: 2.2em; height: 2.2em; margin-inline-start: -.45em; border-radius: 50%; color: var(--text-2, #4a5068); transition: background-color .2s; }
.dm-icbtn:hover { background: rgba(10, 12, 40, .05); }
.dphone .flow__head .dm-icbtn .i { font-size: 1.3em; }
.uhead--sheet .dm-icbtn .i { font-size: 1.1em; stroke-width: 2.2; }
.web {
--shop-ink: #111426;
position: absolute; inset: 0; display: flex; flex-direction: column;
padding: 3.9em 1.1em 0; overflow: hidden;
background: #fff; color: var(--shop-ink);
}
.web > * { flex-shrink: 0; }
.web--co { background: #f4f5f9; }
.web__url {
display: flex; align-items: center; justify-content: center; gap: .45em;
height: 2.5em; margin-block: .15em .55em; border-radius: .9em;
background: rgba(10, 12, 40, .06); color: var(--text-2, #4a5068);
font-size: .72em; font-weight: 550; letter-spacing: .01em;
}
.web__url .i { font-size: 1.05em; stroke-width: 2.4; color: var(--text-3, #858aa0); }
.web__bar { display: flex; align-items: center; justify-content: space-between; height: 3.2em; }
.web__brand { display: inline-flex; align-items: center; gap: .65em; }
.web__brand b { font-size: .98em; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.web__brand .merchant__logo { width: 2.9em; height: 2.9em; font-size: .6em; border-radius: .8em; }
.web__cart { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(10, 12, 40, .05); }
.web__cart .i { font-size: 1.15em; }
.web .flow__head { margin-block-start: .1em; }
.web .flow__head b { font-size: .95em; }
.pimg { display: block; }
.shop-card {
display: flex; flex-direction: column; margin-block-start: .9em; overflow: hidden;
border-radius: 1.5em; background: #fff;
box-shadow: 0 .35em 1.6em rgba(10, 12, 40, .1), 0 0 0 1px rgba(10, 12, 40, .06);
}
.web--shop { display: flex; flex-direction: column; min-height: 100%; }
.web--shop .shop-card { flex: 1; display: flex; flex-direction: column; }
.shop-card__img { flex: 1; display: grid; place-items: center; overflow: hidden; min-height: 0; background: #000; }
.shop-card__body { flex: none; }
.shop-card__img .pimg { width: 100%; height: 100%; object-fit: cover; }
.shop-card__body { padding: 1em 1.1em 1.1em; }
.shop-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; }
.shop-card__name { font-size: 1.08em; font-weight: 750; letter-spacing: -0.015em; }
.shop-card__price { font-size: 1.05em; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-card__sub { margin-block-start: .2em; font-size: .72em; color: var(--text-3, #858aa0); font-weight: 500; }
.shop-btn {
--pulse: 17, 20, 38;
display: flex; align-items: center; justify-content: center; width: 100%; height: 3.3em; margin-block-start: .95em;
border-radius: 1.05em; background: var(--shop-ink); color: #fff;
font-size: .92em; font-weight: 650; letter-spacing: .01em;
transition: transform .2s var(--d-ease), background-color .2s;
}
.shop-btn:hover { background: #23283f; }
.shop-btn:active { transform: scale(.97); }
.dphone .shop-btn:focus-visible { outline-offset: .2em; }
.co-item {
display: flex; align-items: center; gap: .85em; margin-block-start: .55em; padding: .7em .85em;
border-radius: 1.3em; background: #fff; box-shadow: 0 .2em .9em rgba(10, 12, 40, .05);
}
.co-item__img {
display: grid; place-items: center; flex: none; width: 3.9em; height: 3.9em; overflow: hidden;
border-radius: .95em; overflow: hidden; background: #000;
}
.co-item__img img { width: 100%; height: 100%; object-fit: cover; }
.co-item__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.co-item__txt b { font-size: .9em; font-weight: 700; }
.co-item__txt small { font-size: .72em; color: var(--text-3, #858aa0); }
.co-sum { margin-block-start: .7em; }
.co-label { margin: auto .15em .5em; padding-block-start: 1em; font-size: .74em; font-weight: 650; color: var(--text-3, #858aa0); }
.co-pays { display: flex; flex-direction: column; gap: .6em; margin-block-end: 2.5em; }
.co-pay {
position: relative; display: flex; align-items: center; gap: .8em; width: 100%; min-height: 4.3em;
padding: .75em 1em; border-radius: 1.3em; background: #fff;
box-shadow: 0 .2em .9em rgba(10, 12, 40, .05), inset 0 0 0 1px rgba(10, 12, 40, .07);
transition: transform .2s var(--d-ease), box-shadow .25s;
}
.co-pay:active { transform: scale(.985); }
.co-pay__ic { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: .8em; background: #eef0f6; color: var(--slate, #313a54); }
.co-pay__ic .i { font-size: 1.1em; }
.co-pay__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; text-align: start; }
.co-pay__txt b { font-size: .88em; font-weight: 650; }
.co-pay__txt small { font-size: .7em; color: var(--text-3, #858aa0); }
.co-pay__radio { margin-inline-start: auto; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; box-shadow: inset 0 0 0 .12em #cfd5e3; }
.co-bk { --pulse: 9, 123, 245; margin-block-start: .1em; transition: transform .2s var(--d-ease); }
.co-bk:active { transform: scale(.985); }
.uhero__ic { position: relative; display: block; }
.uhero__ic i { position: absolute; inset: .3em; border-radius: 50%; box-shadow: inset 0 0 0 .2em rgba(21, 122, 99, .35); opacity: 0; }
.uhero__ic.is-burst .ic { animation: dm-land .35s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.uhero__ic.is-burst i { animation: dm-ring .6s cubic-bezier(.2, .7, .2, 1) .5s both; }
.uhero__ic.is-burst i + i { animation-delay: .6s; }
@keyframes dm-land { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes dm-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.is-waiting [data-reveal], .is-waiting [data-okmark] { opacity: 0; }
[data-reveal].is-reveal { animation: dm-rise .45s var(--d-ease) .62s both; }
[data-reveal="card"].is-reveal { animation-delay: .74s; }
@keyframes dm-rise { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }
.dphone .dm-cta {
--pulse: 9, 123, 245;
position: relative; overflow: hidden; isolation: isolate;
transition: background-color .35s, box-shadow .35s, transform .2s var(--d-ease);
}
.dphone .dm-cta:active { transform: scale(.98); }
.dphone .dm-cta:disabled { background: #c3c8d6; box-shadow: none; transform: none; }
.dm-cta__fill { position: absolute; inset: 0; z-index: -1; background: rgba(0, 22, 90, .22); transform: scaleX(0); transform-origin: 0 50%; transition: opacity .3s; }
[dir="rtl"] .dm-cta__fill { transform-origin: 100% 50%; }
.dm-cta__label, .dm-cta__busy, .dm-cta__ok { display: inline-flex; align-items: center; justify-content: center; gap: .45em; transition: opacity .25s, transform .4s var(--d-ease); }
.dm-cta__busy, .dm-cta__ok { position: absolute; inset: 0; opacity: 0; transform: translateY(.7em); }
.dm-cta__ok .ic { width: 2em; height: 2em; }
.dm-cta__busy { gap: 0; padding-inline-start: 1em; }
.dm-cta__busy::after { content: ""; display: inline-block; width: 1em; text-align: start; animation: dm-ellipsis 1.1s steps(1) infinite; }
.dm-cta.is-busy .dm-cta__label { opacity: 0; transform: translateY(-.7em); }
.dm-cta.is-busy .dm-cta__busy { opacity: 1; transform: none; }
.dphone .dm-cta.is-done { background: #157a63; }
.dm-cta.is-done .dm-cta__label { opacity: 0; transform: translateY(-.7em); }
.dm-cta.is-done .dm-cta__busy { opacity: 0; transform: translateY(-.7em); }
.dm-cta.is-done .dm-cta__ok { opacity: 1; transform: none; }
.dm-cta.is-done .dm-cta__fill { opacity: 0; }
@keyframes dm-ellipsis { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@keyframes dm-press { 0%, 12%, 30%, 100% { transform: none; } 19% { transform: scale(.955); } }
@keyframes dm-halo { 0%, 15% { box-shadow: 0 0 0 0 rgba(var(--pulse), .55); } 60%, 100% { box-shadow: 0 0 0 1.05em rgba(var(--pulse), 0); } }
.dphone .dm-hint { --pulse: 9, 123, 245; animation: dm-press 2.4s .9s infinite, dm-halo 2.4s .9s infinite; }
.dphone .dm-hint:is(:active, .is-busy, .is-done, :disabled) { animation: none; }
@media (hover: hover) { .dphone .dm-hint:hover { animation: none; } }
.dphone [data-act="finish"].dm-hint { animation: dm-halo 3s 1.6s infinite; }
.dm-tip {
--x: calc(-100% + .75em); --y: -56%;
position: absolute; z-index: 44; left: 50%; top: 50%; padding: .3em .8em; border: .13em solid #fff; border-radius: 99em; background: #097bf5; color: #fff;
font-size: .86em; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden;
transform: translate(var(--x), var(--y)); filter: drop-shadow(0 .3em .6em rgba(4, 12, 40, .35)); transition: opacity .25s, visibility .25s;
}
[dir="rtl"] .dm-tip { --x: -.75em; }
.dm-tip.is-on { opacity: 1; visibility: visible; animation: dm-bob 1.1s ease-in-out infinite alternate; }
@keyframes dm-bob { to { transform: translate(var(--x), calc(var(--y) - .32em)); } }
.dm-start { position: absolute; inset: 0; z-index: 46; display: none; place-items: center; background: rgba(6, 10, 30, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .35s, visibility .35s; }
.demo.is-live .dm-start { display: grid; }
.dm-start.is-gone { opacity: 0; visibility: hidden; }
.dm-start__btn { display: inline-flex; align-items: center; gap: .55em; height: 3.4em; padding-inline: 1.5em 1.8em; border-radius: 99em; background: #fff; color: #111426; font-size: 1.32em; font-weight: 700; cursor: pointer; animation: dm-start-ring 2.2s ease-out infinite; transition: transform .2s var(--d-ease); }
.dm-start__btn:hover { transform: scale(1.04); }
.dm-start__btn:active { transform: scale(.96); }
.dm-start__btn svg { width: 1.2em; height: 1.2em; fill: #097bf5; }
@keyframes dm-start-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 1.1em rgba(255, 255, 255, 0); } }
.dm-toast {
position: absolute; z-index: 45; bottom: 19.8em; inset-inline: 0; width: max-content; max-width: 90%; margin-inline: auto;
padding: .62em 1.1em; border-radius: 2em;
background: rgba(10, 12, 27, .92); color: #fff;
font-size: .74em; font-weight: 550; text-align: center;
opacity: 0; visibility: hidden; pointer-events: none;
}
.demo__panel { min-width: 0; }
.demo__progress { display: flex; align-items: center; gap: 14px; }
.demo__segs { display: flex; gap: 6px; transition: opacity .4s; }
.demo__segs i { position: relative; width: 30px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, .1); }
.demo__segs i::after { content: ""; position: absolute; inset: 0; background: var(--d-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--d-ease); }
[dir="rtl"] .demo__segs i::after { transform-origin: 100% 50%; }
.demo__segs i.is-on::after { transform: none; }
.demo__name { font-size: 15px; font-weight: 500; color: var(--d-mute); }
.demo__copy {
--t: clamp(26px, 2.5vw, 34px); --tl: 1.12;
--h: clamp(17px, 1.45vw, 21px); --hl: 1.45;
margin-block-start: 26px;
min-height: calc(var(--t) * var(--tl) * 2 + 18px + var(--h) * var(--hl) * 2);
}
.demo__title {
font-size: var(--t); font-weight: 600; line-height: var(--tl); letter-spacing: -0.02em;
color: var(--d-ink); text-wrap: balance;
}
.demo__s { display: inline-block; }
.demo__hint {
max-width: 24em; margin-block-start: 18px;
font-size: var(--h); line-height: var(--hl); font-weight: 500;
color: var(--d-mute); text-wrap: pretty;
}
:lang(ar) .demo__copy { --t: clamp(24px, 2.3vw, 31px); --tl: 1.4; --hl: 1.65; }
:lang(ar) .demo__title { letter-spacing: 0; }
.demo .demo__restart {
margin-block-start: 34px; padding: 0; border: 0; background: none; cursor: pointer;
gap: 8px; border-radius: 6px;
opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.demo.is-dirty .demo__restart { opacity: 1; visibility: visible; }
.demo__restart .i { font-size: 17px; stroke-width: 2.2; }
.demo__restart:hover .i { transform: rotate(-40deg); transition: transform .4s var(--d-ease); }
.demo__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 901px) {
.demo { position: relative; }
.demo__fit { --settle-reach: .25; display: block; position: absolute; inset: 0 auto auto 0; width: 1px; height: 0; scroll-margin-top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--pw) / var(--ar, .5)) / 2); }
.demo__panel { position: relative; }
.demo .demo__restart { position: absolute; inset-block-start: 100%; inset-inline-start: 0; }
}
@media (max-width: 900px) {
.demo {
--row: 24px; --gaps: 34px;
--t-lines: 2; --dt: clamp(18px, 4.9vw, 21px); --dtl: 1.2; --dh: 14px; --dhl: 1.4;
--copy: calc(var(--dt) * var(--dtl) * var(--t-lines) + 3px + var(--dh) * var(--dhl) * 2);
--fit: max(500px, calc(100svh - var(--nav-h) - var(--row) - var(--copy) - var(--gaps)));
grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--row) auto auto; row-gap: 0; justify-items: center;
}
:lang(en) .demo { --t-lines: 1; }
:lang(ar) .demo { --t-lines: 1; --dtl: 1.34; --dhl: 1.6; }
.demo__panel { display: contents; }
.demo__fit { display: block; grid-area: 1 / 1; align-self: start; height: 0; scroll-margin-top: calc(var(--nav-h) + 8px); }
.demo__progress { grid-area: 1 / 1; justify-self: start; gap: 10px; }
.demo__segs i { width: 24px; }
.demo__name { font-size: 13px; }
.demo .demo__restart { grid-area: 1 / 1; justify-self: end; align-self: center; position: relative; margin: 0; font-size: 13px; line-height: 1; }
.demo .demo__restart::after { content: ""; position: absolute; inset: -12px -8px; }
.demo__restart .i { font-size: 14px; }
.demo__device { grid-row: 2; margin-block-start: 8px; }
.dphone { --pw: min(100vw - 2 * var(--gutter), 380px, var(--fit) * var(--ar)); }
.demo__copy, :lang(ar) .demo__copy { --t: var(--dt); --tl: var(--dtl); --h: var(--dh); --hl: var(--dhl); grid-row: 3; margin-block-start: 10px; min-height: var(--copy); text-align: center; }
.demo__hint { max-width: none; margin-block-start: 3px; }
.dphone .shop-btn { height: 4.1em; margin-block-start: .8em; }
.dphone .ufoot .ubtn--pri { height: 6.8em; }
.dphone .ufoot .ubtn--pri b { font-size: 1.8em; }
:root[lang="ar"] .dphone .ufoot .ubtn--pri b { font-size: 1.6em; }
}
@media (max-width: 350px) { :lang(en) .demo, :lang(ar) .demo { --t-lines: 2; } }
@media (max-width: 900px) and (max-height: 800px) {
.demo { --copy: calc(var(--dt) * var(--dtl) * var(--t-lines)); }
.demo__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.demo *, .demo *::before, .demo *::after { animation: none !important; transition: none !important; }
.dphone .dm-hint { box-shadow: 0 0 0 .24em rgba(var(--pulse), .4); }
.dm-start__btn { box-shadow: 0 0 0 .3em rgba(255, 255, 255, .35); }
}
.cc {
--cc-ease: cubic-bezier(.2, .8, .2, 1);
--cc-mute: #d6d2fb;
--cc-mute-2: #b3acec;
--cc-line: rgba(255, 255, 255, .14);
--cc-track: rgba(255, 255, 255, .24);
--cc-card: #33177f;
--cc-card: color-mix(in srgb, #fff 7%, #2a0d76);
--cc-pad: 20px;
--cc-top: var(--nav-h, 52px);
color: #fff;
scroll-margin-top: calc(var(--nav-h, 52px) + 12px);
}
.cc { position: relative; isolation: isolate; }
.cc__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cc__card {
position: relative;
border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px;
background: var(--cc-card);
}
.cc__sentinel { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; pointer-events: none; }
.cc-hero {
position: sticky; top: var(--cc-top); z-index: 3;
container-type: inline-size;
padding: 16px var(--cc-pad) 14px;
border-radius: 27px 27px 0 0; border-bottom: 1px solid var(--cc-line);
background: var(--cc-card);
transition: border-radius .2s, box-shadow .2s;
}
.cc-hero.is-stuck { border-radius: 0; box-shadow: 0 10px 24px -8px rgba(6, 0, 48, .55); }
.cc-hero__label { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--cc-mute); }
.cc-hero__num {
display: flex; align-items: baseline; gap: .14em;
margin-block-start: 4px;
font-size: clamp(34px, 15cqi, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cc-hero__digits { direction: ltr; unicode-bidi: isolate; }
.cc-hero__unit { font-size: .36em; font-weight: 600; letter-spacing: 0; color: var(--cc-mute); }
.cc-hero__unit:empty { display: none; }
.cc-hero__sub { margin-block-start: 6px; font-size: 12.5px; line-height: 1.35; color: var(--cc-mute-2); }
.cc__inputs { padding: 12px var(--cc-pad) 10px; }
.cc__intro { font-size: 13px; line-height: 1.4; color: var(--cc-mute-2); text-wrap: pretty; }
.cc-field { padding-block: 10px 0; scroll-margin-block: calc(var(--cc-top) + var(--cc-hero-h, 130px) + 12px) 96px; }
.cc-field__row {
display: grid; grid-template-columns: minmax(0, 1fr) var(--cc-vw, auto);
align-items: center; column-gap: 12px; min-height: 36px;
}
.cc-field__label { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: #fff; }
.cc-field__hint { margin-block-start: 1px; font-size: 12.5px; line-height: 1.35; color: var(--cc-mute-2); }
.cc-field__value {
position: relative; isolation: isolate;
display: inline-flex; align-items: baseline; justify-self: end; align-self: center; gap: 5px;
height: 44px; margin-block: -4px; padding: 0 12px;
font-size: 18px; font-weight: 700; line-height: 44px; letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
cursor: text;
}
.cc-field__value::before {
content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: 12px;
background: rgba(255, 255, 255, .1);
transition: background-color .2s, box-shadow .2s;
}
.cc-field__value:focus-within::before { background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 2px #fff; }
.cc-field__value--pct { direction: ltr; }
.cc .cc-field__input {
width: 3ch; min-width: 1ch; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
background: none; color: #fff; font: inherit; line-height: inherit; letter-spacing: inherit;
text-align: end; outline: none; caret-color: #fff;
direction: ltr; unicode-bidi: isolate;
}
.cc-field__mirror { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; inset-inline-start: 0; top: 0; }
.cc-unit { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--cc-mute); }
.cc-unit:empty { display: none; }
.cc .cc-range {
--p: 50%;
display: block; width: 100%; height: 44px; margin: -3px 0 0; padding: 0;
-webkit-appearance: none; appearance: none;
background: transparent; cursor: pointer; touch-action: pan-y;
outline: none; -webkit-tap-highlight-color: transparent;
}
.cc-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--p), var(--cc-track) var(--p)); }
[dir="rtl"] .cc-range::-webkit-slider-runnable-track { background: linear-gradient(to left, #fff var(--p), var(--cc-track) var(--p)); }
.cc-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
box-sizing: border-box; width: 44px; height: 44px; margin-top: -20px;
border: 8px solid transparent; border-radius: 50%;
background: #fff; background-clip: padding-box;
filter: drop-shadow(0 2px 5px rgba(6, 0, 48, .4));
transition: transform .2s var(--cc-ease);
}
.cc-range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.cc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.cc-range:focus-visible::-webkit-slider-thumb { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(255, 255, 255, .8)) drop-shadow(0 2px 5px rgba(6, 0, 48, .4)); }
@media (pointer: coarse) {
.cc .cc-range { pointer-events: none; }
.cc-range::-webkit-slider-thumb { pointer-events: auto; }
.cc-range::-moz-range-thumb { pointer-events: auto; }
}
.cc-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--cc-track); }
.cc-range::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.cc-range::-moz-range-thumb {
box-sizing: border-box; width: 44px; height: 44px;
border: 8px solid transparent; border-radius: 50%;
background: #fff; background-clip: padding-box;
filter: drop-shadow(0 2px 5px rgba(6, 0, 48, .4));
}
.cc-range:focus-visible::-moz-range-thumb { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }
.cc-month { display: none; }
.cc-detail { border-top: 1px solid var(--cc-line); }
.cc-detail__btn {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; min-height: 52px; margin: 0; padding: 0 var(--cc-pad);
border: 0; border-radius: 0 0 27px 27px; background: none; color: #fff;
font: inherit; font-size: 15px; font-weight: 600; text-align: start; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.cc-detail__btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.cc-detail__chev {
flex: none; width: 8px; height: 8px; margin-inline-end: 4px;
border: solid var(--cc-mute); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg);
transition: transform .3s var(--cc-ease);
}
.cc-detail__btn[aria-expanded="true"] .cc-detail__chev { transform: translateY(2px) rotate(-135deg); }
.cc-detail__body {
display: grid; grid-template-rows: 0fr; visibility: hidden;
transition: grid-template-rows .35s var(--cc-ease), visibility 0s .35s;
scroll-margin-block-end: 24px;
}
.cc-detail__btn[aria-expanded="true"] + .cc-detail__body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.cc:not(.is-ready) .cc-detail__body { grid-template-rows: 1fr; visibility: visible; }
.cc-detail__in { min-height: 0; overflow: hidden; padding-inline: var(--cc-pad); }
.cc-rows { padding-block-end: 8px; }
.cc-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 11px; border-top: 1px solid var(--cc-line); }
.cc-rows dt { font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--cc-mute); }
.cc-rows dd { flex: none; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-money { display: flex; align-items: baseline; gap: .22em; }
.cc-money__num { direction: ltr; unicode-bidi: isolate; }
.cc-money__unit { font-size: .66em; font-weight: 600; letter-spacing: 0; color: var(--cc-mute); }
.cc-money__unit:empty { display: none; }
.cc__after { display: flex; flex-direction: column; align-items: stretch; padding-inline: 4px; }
.cc__note { order: -1; margin-block-end: 14px; padding-inline: 4px; font-size: 12.5px; line-height: 1.45; color: var(--cc-mute-2); text-wrap: pretty; }
.cc__boonka { font-size: 17px; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.cc .cc__btn { margin-block-start: 18px; width: 100%; }
:lang(ar) .cc-field__label, :lang(ar) .cc__boonka, :lang(ar) .cc-rows dt { line-height: 1.6; }
:lang(ar) .cc-hero__label, :lang(ar) .cc-hero__sub, :lang(ar) .cc-field__hint { line-height: 1.55; letter-spacing: 0; }
:lang(ar) .cc-hero__num, :lang(ar) .cc-field__value { letter-spacing: 0; }
@media (max-width: 359px) {
.cc { --cc-pad: 16px; }
.cc-field__label { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 900px) {
.cc { --cc-pad: 28px; }
.cc__grid { gap: 28px; }
.cc-hero { padding-block: 22px 18px; }
.cc__boonka { font-size: 20px; }
.cc .cc__btn { width: auto; align-self: flex-start; }
}
@media (min-width: 901px) {
.cc { border-top: 1px solid var(--cc-line); padding-block-start: clamp(40px, 5vw, 64px); }
.cc__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
grid-template-rows: auto auto 1fr;
grid-template-areas: "inputs hero" "inputs detail" "inputs after";
gap: 0 clamp(48px, 8vw, 128px);
align-items: start;
}
.cc__card { display: contents; }
.cc__sentinel { display: none; }
.cc-hero, .cc-hero.is-stuck { grid-area: hero; position: static; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transition: none; }
.cc-hero__label { font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.cc-hero__num { margin-block-start: 12px; font-size: clamp(46px, 14.5cqi, 116px); line-height: 1; }
.cc-hero__sub { margin-block-start: 14px; font-size: 15px; }
.cc__inputs { grid-area: inputs; padding: 0; }
.cc__intro { margin-block-end: 6px; font-size: 14px; }
.cc-field { padding-block: 26px 22px; border-top: 1px solid var(--cc-line); scroll-margin-block: 96px; }
.cc-field:first-of-type { border-top: 0; padding-block-start: 14px; }
.cc-field__row { column-gap: 20px; min-height: 0; }
.cc-field__label { font-size: 17px; line-height: 1.35; }
.cc-field__hint { max-width: 25em; margin-block-start: 4px; font-size: 14px; line-height: 1.45; }
.cc-field__value { height: auto; margin-block: 0; padding: 7px 14px 8px; font-size: 26px; line-height: 1.15; gap: 6px; }
.cc-field__value::before { inset: 0; border-radius: 14px; }
.cc-field__value:hover::before { background: rgba(255, 255, 255, .14); }
.cc-field__value:focus-within::before { background: rgba(255, 255, 255, .18); }
.cc .cc-field__input { height: auto; }
.cc-unit { font-size: 16px; }
.cc .cc-range { margin-block-start: 10px; }
.cc-detail { grid-area: detail; border: 0; margin-block-start: clamp(36px, 4vw, 52px); }
.cc-detail__btn { display: none; }
.cc-month { display: block; padding-block-end: 12px; border-bottom: 1px solid var(--cc-line); font-size: 15px; font-weight: 600; color: var(--cc-mute-2); }
.cc-detail__body { grid-template-rows: 1fr; visibility: visible; transition: none; }
.cc-detail__in { padding-inline: 0; overflow: visible; }
.cc-rows { padding: 0; }
.cc-rows > div { gap: 24px; padding-block: 16px; border-top: 0; border-bottom: 1px solid var(--cc-line); }
.cc-rows dt { max-width: 19em; font-size: 16px; line-height: 1.4; }
.cc-rows dd { font-size: clamp(22px, 2.1vw, 28px); }
.cc-money__unit { font-size: .6em; }
.cc__after { grid-area: after; padding-inline: 0; align-items: flex-start; }
.cc__note { order: 0; margin: 18px 0 0; padding: 0; font-size: 14px; max-width: 34em; }
.cc__boonka { max-width: 25em; margin-block-start: clamp(32px, 3.6vw, 44px); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.38; }
.cc .cc__btn { width: auto; margin-block-start: 26px; }
:lang(ar) .cc__boonka { line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
.cc *, .cc *::before, .cc *::after { transition: none !important; }
}
.biz-page { --blue: var(--biz); --blue-text: var(--biz-text); --blue-dark: var(--biz-light); --cloud: var(--biz-cloud); }
.biz-page .btn--blue { background: var(--biz); }
.biz-page .btn--blue:hover { background: var(--biz-text); }
.biz-page .nav[data-theme="indigo"] .btn--blue { background: #fff; color: var(--biz-text); }
.biz-page .kicker { color: #c9c4fb; }
.biz-page :is(.anyw, .bz-why, .bz-price, .bz-steps) .kicker { color: var(--biz-text); }
.bz-kicker { margin-block-end: 18px; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; color: var(--mute-dark); }
.bz-kicker--via, .via-client .bz-hero .bz-kicker:not(.bz-kicker--via) { display: none; }
.via-client .bz-hero .bz-kicker--via { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; padding-inline-start: 12px; border-radius: 999px; background: rgba(112, 100, 245, .18); color: #fff; line-height: 1.35; }
.bz-kicker--via::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9289f7; box-shadow: 0 0 0 4px rgba(112, 100, 245, .28); }
@media (prefers-reduced-motion: no-preference) { .bz-kicker--via::before { animation: via-pulse 2.4s ease-in-out infinite; } }
@keyframes via-pulse { 50% { box-shadow: 0 0 0 7px rgba(112, 100, 245, 0); } }
@media (max-width: 600px) {
.via-client .bz-hero .bz-kicker--via { align-items: flex-start; padding: 0; background: none; color: #fff; }
.bz-kicker--via::before { margin-block-start: .5em; }
}
.bz-hero {
--copyw: clamp(400px, 36vw, 520px); --wrapx: max(var(--gutter), calc((100% - var(--wrap)) / 2));
position: relative; display: grid; align-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--black); color: #f5f5f7;
padding-block: calc(var(--nav-h) + 20px) 28px;
}
.bz-hero__in { position: relative; z-index: 2; }
.bz-hero__copy { max-width: var(--copyw); }
.bz-hero h1 { max-width: 12em; font-size: clamp(44px, min(5.4vw, 10.6vh), 84px); color: #fff; }
.bz-hero .lead { max-width: 30em; font-size: clamp(18px, min(1.5vw, 2.9vh), 22px); }
.bz-hero__cta { margin-block-start: clamp(24px, 4vh, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.bz-scene {
--sx: 9.8506%; --sy: 10.6728%; --sw: 40.2154%; --sh: 69.6532%; --sf: .017794; --rx: 13.8548%; --ry: 6.3994%; --ar: .8;
--h: min(100vh, 1100px, calc(54vw / var(--ar))); --w: calc(var(--h) * var(--ar));
position: absolute; z-index: 1; inset-block-end: calc((100% - var(--h)) / 2);
inset-inline-start: max(calc(var(--wrapx) + var(--copyw) + clamp(24px, 3.4vw, 72px) - var(--w) * .0802), calc(100% - var(--wrapx) - var(--w) * .9378));
width: var(--w); height: var(--h); container-type: inline-size; pointer-events: none; user-select: none;
}
@supports (height: 1svh) { .bz-scene { --h: min(100svh, 1100px, calc(54vw / var(--ar))); } }
[dir="rtl"] .bz-scene { --sx: 49.934%; }
.bz-scene__img { position: relative; z-index: 2; display: block; width: 100%; height: auto; max-width: none; }
.bz-scene .wal__amt { font-variant-numeric: tabular-nums; }
[data-bz-balance], [data-bz-today] { display: inline-block; }
.bz-scene .hp__screen::after { content: ""; position: absolute; inset: 0; z-index: 30; background: linear-gradient(112deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 32%); }
.bz-push { position: absolute; z-index: 25; inset-block-start: 3em; inset-inline: .7em; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .75em; padding: .66em .86em; border-radius: 1.4em; background: rgba(255, 255, 255, .94); color: #111426; box-shadow: 0 .9em 2.2em -.6em rgba(9, 12, 40, .5), 0 0 0 .05em rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bz-push__app { display: grid; place-items: center; width: 2.7em; height: 2.7em; padding: .6em .56em .6em .5em; border-radius: .78em; background: #f2f4f7; }
.bz-push__app svg { width: 100%; height: 100%; }
.bz-push__txt { min-width: 0; line-height: 1.28; }
.bz-push__txt b { display: block; font-size: 1em; font-weight: 700; font-variant-numeric: tabular-nums; }
.bz-push__txt small { display: block; margin-block-start: .12em; font-size: .76em; font-weight: 500; color: #4a5068; }
.bz-push time { align-self: start; font-size: .72em; font-weight: 500; color: #6b7086; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
:root.js .bz-scene { opacity: 0; transition: opacity .9s var(--ease); }
:root.js .bz-scene.is-lit { opacity: 1; }
:root.js .bz-push { opacity: 0; transform: translateY(-115%) scale(.97); }
:root.js .bz-scene.is-in .bz-push { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.2, 1.1, .3, 1), opacity .3s ease; }
.bz-scene.is-in .unew > .utx { animation: bz-new-tint 2s ease-out .35s both; }
}
@media (max-width: 900px) {
.bz-hero { display: block; padding-block: calc(var(--nav-h) + clamp(24px, 4svh, 40px)) 0; --copyw: none; }
.bz-hero h1 { font-size: clamp(44px, 11.6vw, 72px); }
.bz-hero .lead { font-size: clamp(18px, 2.6vw, 21px); }
.bz-hero__cta { margin-block-start: 28px; }
.bz-scene {
--w: min(calc((100vw - 2 * var(--gutter)) / .8576), 660px); --h: calc(var(--w) / var(--ar));
position: relative; inset: auto; margin-block: calc(var(--h) * -.03) calc(var(--h) * -.085); margin-inline: calc((100% - var(--w) * .8576) / 2 - var(--w) * .0802) auto;
}
}
@media (max-width: 600px) {
.bz-hero { padding-block-start: calc(var(--nav-h) + clamp(16px, 2.6svh, 28px)); }
.bz-hero .bz-kicker { margin-block-end: 12px; }
.bz-hero h1 { font-size: clamp(34px, 10.2vw, 44px); }
.bz-hero .lead { margin-block-start: 16px; font-size: 17px; }
.bz-hero__cta { margin-block-start: 22px; column-gap: 24px; }
}
.bz-notes { display: grid; gap: 12px; }
.bz-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bz-note:nth-child(2) { opacity: .72; transform: scale(.965); }
.bz-note:nth-child(3) { opacity: .45; transform: scale(.93); }
.bz-note__app { width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: #fff; }
.bz-note__app svg { display: block; width: 100%; height: 100%; }
.bz-note__txt b { display: block; font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.bz-note__txt small { display: block; margin-block-start: 2px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--mute-dark); }
.bz-note time { align-self: start; font-size: 13px; color: var(--mute-dark); white-space: nowrap; }
.bz-why { background: var(--white); padding-block: var(--section); }
.bz-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bz-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 32px; background: var(--biz-cloud); color: var(--graphite); }
.bz-card__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) 32px; }
.bz-card h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: pretty; }
.bz-card__copy p { max-width: 26em; font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--mute); }
:root[lang="ar"] .bz-card h3 { letter-spacing: 0; line-height: 1.35; }
.bz-card__art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; margin: auto 0 0; padding: 28px 28px 0; overflow: hidden; }
.bz-card--pay .bz-card__art { justify-content: center; padding-block-end: 28px; }
.bz-tkt { position: relative; isolation: isolate; width: 100%; max-width: 440px; margin-inline: auto; padding: 20px 22px 28px; border-radius: 20px 20px 0 0; background: #fff; color: var(--graphite); box-shadow: 0 0 0 1px rgba(35, 7, 99, .05), 0 -14px 40px -16px rgba(35, 7, 99, .2); }
.bz-tkt::before { content: ""; position: absolute; inset: -11px 22px auto; height: 24px; z-index: -1; border-radius: 16px 16px 0 0; background: #fff; opacity: .6; box-shadow: 0 0 0 1px rgba(35, 7, 99, .06); }
.bz-tkt__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block-end: 18px; border-bottom: 1px solid #ececf0; }
.bz-tkt__img { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; background: #000; }
.bz-tkt__img img { width: 100%; height: 100%; object-fit: cover; }
.bz-tkt__id b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
.bz-tkt__id small { display: block; margin-block-start: 1px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--mute); }
.bz-tkt__amt { align-self: start; font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bz-track { margin-block-start: 20px; }
.bz-track li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding-block-end: 20px; }
.bz-track li:last-child { padding-block-end: 0; }
.bz-track li::before { content: ""; position: absolute; inset-block: 34px 6px; inset-inline-start: 13px; width: 2px; border-radius: 2px; background: #e3e3e8; }
.bz-track li.is-done::before { background: var(--biz); }
.bz-track li:last-child::before { display: none; }
.bz-track i { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f0f0f3; color: #8e8e93; }
.bz-track i .i { width: 14px; height: 14px; stroke-width: 2.4; }
.bz-track .is-done i .i { stroke-width: 3.4; }
.bz-track .is-done i { background: var(--biz); color: #fff; }
.bz-track .is-now i { background: var(--biz-tint); color: var(--biz-text); }
.bz-track b { align-self: end; font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.bz-track small { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--mute); }
.bz-track li:last-child b, .bz-track li:last-child small { opacity: .55; }
.bz-pay { display: grid; justify-items: stretch; width: 100%; max-width: 440px; margin-inline: auto; }
.bz-pay__row { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px; }
.bz-pay__row--cod { margin-inline: 14px; background: #202023; color: var(--mute-dark); }
.bz-pay__row--cod .bz-pay__txt b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bz-pay__row--cod .bz-pay__amt { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bz-pay__row--boonka { background: #fff; color: var(--graphite); box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .9); }
.bz-pay__ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 10px 9px 10px 8px; border-radius: 14px; background: #2c2c30; color: var(--mute-dark); }
.bz-pay__ic .i { width: 22px; height: 22px; }
.bz-pay__row--boonka .bz-pay__ic { background: var(--cloud); }
.bz-pay__ic svg { width: 100%; height: 100%; }
.bz-pay__row--cod .bz-pay__ic { padding: 0; }
.bz-pay__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.bz-pay__txt b { font-size: 17px; font-weight: 700; }
.bz-pay__txt small { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 500; color: var(--mute-dark); }
.bz-pay__row--boonka .bz-pay__txt small { color: #0b8a50; font-weight: 600; }
.bz-pay__row--boonka .bz-pay__txt small .i { width: 14px; height: 14px; stroke-width: 3; }
.bz-pay__amt { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bz-pay__row--boonka .bz-pay__amt { font-size: 20px; color: #0b8a50; }
.bz-pay__swap { justify-self: center; width: 2px; height: 30px; border-radius: 2px; background: linear-gradient(rgba(255, 255, 255, .1), var(--biz)); }
.bz-card .bz-pay__row--cod { background: rgba(35, 7, 99, .05); color: var(--mute); }
.bz-card .bz-pay__row--cod .bz-pay__ic { background: rgba(35, 7, 99, .06); color: var(--mute); }
.bz-card .bz-pay__row--cod .bz-pay__txt small { color: var(--mute); }
.bz-card .bz-pay__row--boonka { box-shadow: 0 0 0 1px rgba(35, 7, 99, .05), 0 24px 44px -22px rgba(35, 7, 99, .32); }
.bz-card .bz-pay__swap { background: linear-gradient(rgba(112, 100, 245, .12), var(--biz)); }
.bz-card--wide { grid-column: 1 / -1; }
.bz-card--wide .bz-card__copy { padding: clamp(32px, 3.6vw, 52px) clamp(28px, 3.6vw, 52px) clamp(28px, 3vw, 40px); }
.bz-card--wide h3 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.02em; }
.bz-card--wide .bz-card__copy p { max-width: 38em; margin-block-start: 6px; font-size: clamp(17px, 1.4vw, 20px); }
.bz-card__cta { margin-block-start: 18px; }
.bz-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); padding: 0 clamp(12px, 1.4vw, 20px) clamp(12px, 1.4vw, 20px); pointer-events: none; user-select: none; }
.bz-way { display: flex; flex-direction: column; min-width: 0; overflow: hidden; isolation: isolate; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(35, 7, 99, .05); }
.bz-tag { display: block; padding: 18px 22px 0; font-size: 12.5px; line-height: 1.2; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--biz-text); }
:root[lang="ar"] .bz-tag { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.bz-way__art { position: relative; flex: none; aspect-ratio: 1 / 1.1; margin-block-start: 16px; overflow: hidden; }
.bz-way .phc { --show: 1; position: absolute; inset-block-start: 0; inset-inline: 0; width: 74%; margin-inline: auto; }
.mco { padding-block-start: .4em; color: #111426; }
.mco__url { display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.3em; border-radius: .8em; background: rgba(10, 12, 40, .06); color: #4a5068; font-size: .74em; font-weight: 550; }
.mco__url .i { font-size: .95em; color: #6b7086; }
.mco__head { margin-block: 1em .8em; text-align: center; font-size: .92em; font-weight: 700; }
.mco__item { display: flex; align-items: center; gap: .75em; padding: .7em .8em; border-radius: 1.1em; background: #fff; box-shadow: 0 .15em .7em rgba(10, 12, 40, .05); }
.mco__img { display: grid; place-items: center; flex: none; width: 2.8em; height: 2.8em; border-radius: .8em; overflow: hidden; background: #000; }
.mco__img img { width: 100%; height: 100%; object-fit: cover; }
.mco__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.mco__txt b { font-size: .86em; font-weight: 700; }
.mco__txt small { font-size: .74em; font-weight: 500; color: #6b7086; }
.mco__item em { align-self: flex-start; font-style: normal; font-size: .82em; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mco__label { margin: 1.1em .3em .55em; font-size: .74em; font-weight: 650; color: #6b7086; }
.mco__opt { display: flex; align-items: center; gap: .75em; padding: .65em .9em; border-radius: 1.1em; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 12, 40, .07); }
.mco__ic { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: .7em; background: #eef0f6; color: #313a54; }
.mco__radio { flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; box-shadow: inset 0 0 0 .13em #cfd5e3; }
.mco__bk { margin-block-start: .55em; }
.mco__mark { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; padding: .62em .56em .62em .5em; border-radius: .8em; background: rgba(255, 255, 255, .17); }
.mco__mark svg { width: 100%; height: 100%; }
.bzc { padding-inline: 0; background: #eef1f6; color: #111426; }
.bzc__head { display: flex; align-items: center; gap: .55em; padding: .35em 1em .75em; border-block-end: 1px solid rgba(10, 12, 40, .07); font-size: 1em; }
.bzc__head b { font-size: .92em; font-weight: 650; }
.bzc__head .i { width: 1.2em; height: 1.2em; color: #097bf5; stroke-width: 2.4; }
.bzc__av { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #dfe4ee; color: #4a5068; font-size: .8em; font-weight: 700; }
.bzc__msg { display: grid; gap: .55em; align-self: flex-end; width: 88%; margin: 1.1em 1em 0; padding: .7em; border-radius: 1.3em 1.3em .4em 1.3em; background: #fff; box-shadow: 0 .3em 1em rgba(10, 12, 40, .07); }
[dir="rtl"] .bzc__msg { border-radius: 1.3em 1.3em 1.3em .4em; }
.bzc__txt { padding-inline: .25em; font-size: .9em; font-weight: 500; line-height: 1.35; }
.bzc__card { display: flex; align-items: center; gap: .6em; padding: .55em; border-radius: .95em; background: #f2f4f7; }
.bzc__card .mco__mark { width: 2.4em; height: 2.4em; background: #fff; }
.bzc__card em { align-self: flex-start; font-style: normal; font-size: .78em; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bzc__url { padding-inline: .25em; font-size: .86em; font-weight: 600; color: #0a6fdb; text-align: left; overflow-wrap: anywhere; }
.bzc__time { justify-self: end; display: flex; align-items: center; gap: .3em; padding-inline: .25em; font-size: .72em; font-weight: 500; color: #6b7086; }
.bzc__time svg { width: 1.35em; height: .8em; fill: none; stroke: #097bf5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uacc .ui__body { gap: 0; }
.uidc { display: flex; flex-direction: column; gap: 1.6em; padding: 1.6em; }
.uidc__who { display: flex; align-items: center; gap: 1.4em; min-width: 0; }
.uidc__av { display: grid; place-items: center; width: 5.6em; height: 5.6em; flex: none; border-radius: 1.6em; background: #f2f1fe; color: #7064f5; }
.uidc__av b { font-size: 1.8em; line-height: 1.333; }
.uidc__t { display: flex; flex-direction: column; align-items: flex-start; gap: .2em; min-width: 0; }
.uidc__t b { font-size: 1.7em; line-height: 1.412; white-space: nowrap; }
.uidc__t small { display: flex; align-items: center; gap: .5em; font-size: 1.2em; line-height: 1.333; white-space: nowrap; }
.uidc__t small + small { color: var(--hint); }
.uidc__t small .ic { width: 1.167em; height: 1.167em; }
.uidc__btns { display: flex; gap: 1.2em; }
.ubtn--tonal { flex: none; height: 4em; padding-inline: 1.6em; border-radius: 1.2em; background: #f2f1fe; color: #513fbb; }
.ubtn--tonal .ic, .uqr__btns .ic { width: 1.8em; height: 1.8em; }
.ubtn--tonal b, .uqr__btns b { font-size: 1.5em; line-height: 1.467; }
.uacc__scrim { position: absolute; inset: 0; z-index: 2; background: rgba(49, 58, 84, .4); }
.uacc__sheet { position: absolute; z-index: 2; inset-block-start: 26.7em; inset-inline: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1.6em; padding: 2.8em 1.6em 4em; border-radius: 1.6em 1.6em 0 0; background: #fff; }
.uacc__sheet::before { content: ""; position: absolute; inset-block-start: .8em; left: 50%; width: 3.2em; height: .4em; margin-left: -1.6em; border-radius: 1em; background: #d5dde3; }
.uacc__title { font-size: 1.8em; line-height: 1.444; }
.uqr { display: flex; flex-direction: column; align-items: center; gap: 1.6em; padding: 2.4em; border-radius: 1.6em; color: #fff; background: linear-gradient(200.87deg, #7064f5 5.19%, #230763 71.7%, #230763 88.34%); box-shadow: 0 1.2em 1.4em rgba(62, 8, 153, .25); }
.uqr__who { align-self: stretch; display: flex; align-items: center; gap: 1.2em; min-width: 0; }
.uqr__av { display: grid; place-items: center; width: 4em; height: 4em; flex: none; border-radius: 1.2em; background: rgba(255, 255, 255, .18); }
.uqr__av b, .uqr__t b { font-size: 1.5em; line-height: 1.467; }
.uqr__t { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; white-space: nowrap; }
.uqr .uqr__t small { color: #fff; }
.uqr__code { display: block; width: 21.6em; height: 21.6em; padding: 1.6em; border-radius: 1.6em; background: #fff; box-shadow: inset 0 0 0 .1em #e9eff0; color: #313a54; }
.uqr__code svg { display: block; width: 100%; height: 100%; }
.uqr .uqr__cap { color: #fff; opacity: .9; }
.uqr__btns { align-self: stretch; display: flex; gap: .8em; }
.uqr__btns .ubtn { height: 4em; border-radius: 1.2em; }
.uacc__note { font-size: 1.3em; line-height: 1.54; color: var(--text2); text-align: center; }
.uacc__sheet .ubtn--text { margin-block-start: -.4em; }
@media (max-width: 860px) {
.bz-ways { grid-template-columns: minmax(0, 1fr); }
.bz-way__art { aspect-ratio: auto; height: calc(min(66vw, 280px) / .498 * .74); }
.bz-way .phc { width: min(66vw, 280px); }
}
@media (max-width: 960px) {
.bz-cards { grid-template-columns: minmax(0, 1fr); }
.bz-card { min-height: 0; }
}
@media (max-width: 480px), (min-width: 961px) and (max-width: 1180px) {
.bz-tkt__head { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
.bz-tkt__img { grid-row: 1 / span 2; }
.bz-tkt__amt { grid-column: 2; align-self: auto; }
}
@media (max-width: 480px) {
.bz-card__art { padding: 22px 16px 0; }
.bz-tkt { padding: 18px 18px 24px; }
.bz-pay__row { gap: 10px; padding: 14px; }
.bz-pay__row--cod { margin-inline: 8px; }
.bz-pay__row--cod .bz-pay__ic, .bz-pay__row--cod .bz-pay__txt small { display: none; }
.bz-pay__ic { width: 40px; height: 40px; border-radius: 12px; }
.bz-pay__txt b { font-size: 16px; }
.bz-pay__row--boonka .bz-pay__amt { font-size: 18px; }
.bz-card--pay .bz-card__art { min-height: 0; padding-block: 36px; }
}
.bz-dash { background: var(--black); color: #f5f5f7; padding-block: var(--section); overflow: hidden; }
.bz-dash__head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: end; gap: 24px clamp(32px, 6vw, 96px); margin-block-end: clamp(48px, 6vw, 88px); }
.bz-dash .kicker { color: var(--mute-dark); }
.bz-dash h2 { color: #fff; max-width: 13em; }
.bz-dash .lead { margin: 0; max-width: 24em; padding-block-end: .35em; }
.bz-dash__stage { position: relative; }
@media (max-width: 900px) { .bz-dash__head { grid-template-columns: minmax(0, 1fr); } }
.bz-phones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; max-width: 1060px; margin-inline: auto; }
.bz-phones .phc { --show: 1; width: 100%; max-width: none; }
.bz-phones > :nth-child(1) { translate: 7% 0; }
.bz-phones > :nth-child(2) { position: relative; z-index: 1; }
.bz-phones > :nth-child(3) { translate: -7% 0; }
[dir="rtl"] .bz-phones > :nth-child(1) { translate: -7% 0; }
[dir="rtl"] .bz-phones > :nth-child(3) { translate: 7% 0; }
@media (max-width: 760px) {
.bz-phones { display: flex; gap: 14px; max-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: max(var(--gutter), calc((100vw - 280px) / 2)); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; pointer-events: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bz-phones::-webkit-scrollbar { display: none; }
.bz-phones .phc { flex: none; width: min(280px, 76vw); scroll-snap-align: center; }
.bz-phones > :nth-child(n) { translate: none; }
.bz-phones > :nth-child(2) { order: -1; }
}
.unew { display: grid; grid-template-rows: 1fr; }
.unew > .utx { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
.bz-phones.is-armed .unew { grid-template-rows: 0fr; }
.bz-phones.is-armed .unew > .utx { padding-block: 0; opacity: 0; }
.bz-phones.is-in .unew { grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease); }
.bz-phones.is-in .unew > .utx { padding-block: 1.2em; opacity: 1; background: #e8f2fe00; animation: bz-new-tint 1.8s ease-out .3s both; transition: padding-block .55s var(--ease), opacity .4s ease .15s; }
}
@keyframes bz-new-tint { 0% { background: #e8f2fe; } 100% { background: transparent; } }
.bz-price { background: var(--white); padding-block: var(--section); }
.bz-price__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.bz-plan { padding: clamp(32px, 4vw, 56px); border-radius: 32px; background: var(--cloud); }
.bz-plan__big { font-size: clamp(104px, 14vw, 200px); font-weight: 700; line-height: .9; letter-spacing: -0.04em; color: var(--graphite); }
.bz-plan__per { margin-block-start: 14px; font-size: clamp(21px, 2vw, 28px); font-weight: 600; letter-spacing: -0.01em; }
.bz-plan__list { margin-block-start: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.bz-plan__list li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; }
.bz-plan__list .i { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--biz); color: #fff; stroke-width: 3; }
.bz-custom { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(32px, 4vw, 56px); border-radius: 32px; background: var(--black); color: #f5f5f7; }
.bz-custom h3 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; }
.bz-custom p { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--mute-dark); }
.bz-custom .btn { margin-block-start: 12px; }
.bz-price__note { margin-block-start: 20px; text-align: center; font-size: 15px; font-weight: 500; color: var(--mute); }
:root[lang="ar"] :is(.bz-plan__big, .bz-custom h3) { letter-spacing: 0; }
@media (max-width: 900px) { .bz-price__grid, .bz-plan__list { grid-template-columns: minmax(0, 1fr); } }
.bz-steps { background: var(--white); padding-block: var(--section); }
.bz-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bz-steps__list li { padding-block-start: 24px; border-top: 1px solid #d2d2d7; }
.bz-steps__n { display: block; font-size: 15px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.bz-steps__list h3 { margin-block-start: 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.bz-steps__list p { margin-block-start: 8px; font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--mute); }
@media (max-width: 760px) { .bz-steps__list { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.bz-access { background: var(--biz-grad); color: #fff; padding-block: var(--section); scroll-margin-top: var(--nav-h); }
.bz-access__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.bz-access .bz-kicker { color: #c9c4fb; }
.bz-access .lead { color: var(--biz-mute); }
.cform--access { background: var(--white); }
.cform--access :is(input, select, textarea) { background-color: var(--cloud); box-shadow: none; }
@media (max-width: 900px) { .bz-access__in { grid-template-columns: minmax(0, 1fr); } }
.bz-app { padding: 0 !important; overflow: hidden; background: #fff !important; }
.bz-app svg { display: block; width: 100%; height: 100%; }
.anyw__art { position: relative; container-type: size; }
.anyw__art--render { padding: 0; }
.anyw__art--render picture, .anyw__art--render img { display: block; width: 100%; height: 100%; }
.anyw__art--render img { object-fit: contain; }
.scn { position: absolute; inset: 0; display: grid; place-items: center; font-size: min(calc(100cqw / var(--w)), calc(100cqh / var(--h))); font-family: "Poppins", "Alexandria", system-ui, sans-serif; color: #111426; }
.scn > * { grid-area: 1 / 1; }
.scn svg { display: block; }
.anyw__art--shop .anyw__phone { --show: .74; }
@media (min-width: 1000px) {
:is(.anyw__card--shop, .anyw__card--course) .anyw__art { height: clamp(300px, 30.5vw, 440px); }
.anyw__art--shop .anyw__phone { --show: .68; width: min(78cqw, 300px, calc(100cqh * .732)); }
}
.pdp { color: #111426; }
.pdp__bar { display: flex; align-items: center; justify-content: space-between; height: 2.4em; }
.pdp__bar b { font-size: .9em; font-weight: 800; letter-spacing: .16em; }
.pdp__bar .i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; }
:root[dir="rtl"] .pdp__bar .i:first-child { transform: scaleX(-1); }
.pdp__img { position: relative; display: grid; place-items: center; height: 12.6em; margin-block-start: .4em; border-radius: 1.4em; overflow: hidden; background: #000; }
.pdp__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp__dots { position: absolute; bottom: .9em; display: flex; gap: .35em; }
.pdp__dots i { width: .42em; height: .42em; border-radius: .21em; background: rgba(255, 255, 255, .45); }
.pdp__dots i.is-on { width: 1.1em; background: #fff; }
.pdp__name { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-block-start: .95em; }
.pdp__name b { font-size: 1.18em; font-weight: 750; letter-spacing: -0.02em; }
.pdp__name em { font-style: normal; font-size: 1.02em; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdp__meta { margin-block-start: .15em; font-size: .76em; color: #6b7086; }
.pdp__sizes { display: flex; gap: .4em; margin-block-start: .85em; }
.pdp__sizes i { flex: 1; display: grid; place-items: center; height: 2.25em; border-radius: .7em; box-shadow: inset 0 0 0 1px rgba(17, 20, 38, .12); font-style: normal; font-size: .78em; font-weight: 650; }
.pdp__sizes i.is-on { background: #111426; color: #fff; box-shadow: none; }
.pdp .bkbtn { margin-block-start: .85em; }
.anyw__art--member > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.scn--member { --w: 31; --h: 30; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-block-end: clamp(22px, 2.6vw, 34px); }
.mos { position: relative; width: calc(100cqw - 2 * clamp(24px, 3vw, 36px)); color: #f5f5f7; }
.mos__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; font-size: 1em; }
.mos__head b { font-weight: 700; white-space: nowrap; }
.mos__head > span { display: flex; align-items: center; gap: .45em; color: rgba(255, 255, 255, .62); font-weight: 600; white-space: nowrap; }
.mos__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55em; margin: .7em 0 0; padding: 0; list-style: none; }
.mos__list li { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: .8em .3em .75em; border-radius: .9em; background: rgba(255, 255, 255, .06); }
.mos__list b { font-size: .95em; font-weight: 650; white-space: nowrap; }
.mos__list i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; box-shadow: inset 0 0 0 .14em rgba(255, 255, 255, .22); }
.mos__list .is-paid { background: rgba(18, 183, 106, .14); }
.mos__list .is-paid i { background: #12b76a; box-shadow: none; color: #fff; }
.mos__list .i { width: 1.1em; height: 1.1em; stroke-width: 3.2; }
@media (prefers-reduced-motion: no-preference) {
.js .anyw__card .mos__list .is-paid i { transition: scale .7s var(--ease); }
.js .anyw__card .mos__list li:nth-child(1) i { transition-delay: .5s; }
.js .anyw__card .mos__list li:nth-child(2) i { transition-delay: .7s; }
.js .anyw__card .mos__list li:nth-child(3) i { transition-delay: .9s; }
.js .anyw__card:not(.is-in) .mos__list .is-paid i { scale: 0; }
.anyw__card.is-in .anyw__art--shop .scn-btn { animation: scn-tap 1.3s 1s var(--ease) both; }
}
@keyframes scn-tap { 35% { transform: scale(.955); } 70% { transform: none; box-shadow: 0 0 0 .55em rgba(9, 123, 245, .18), 0 1em 1.8em -.9em rgba(26, 0, 128, .8); } }