:root {
  --blue: #1565C0;
  --blue-d: #0D47A1;
  --blue-dd: #0A3A86;
  --blue-l: #64B5F6;
  --blue-s: #E3F0FD;
  --green: #10B981;
  --green-d: #047857;
  --s50: #F8FAFC;
  --s100: #F1F5F9;
  --s200: #E2E8F0;
  --s300: #CBD5E1;
  --s400: #94A3B8;
  --s500: #64748B;
  --s600: #475569;
  --s700: #334155;
  --s800: #1E293B;
  --s900: #0F172A;
  --gutter: 24px;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--s900);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 3px; border-radius: 6px; }
.top :focus-visible, .hero :focus-visible, .navy :focus-visible, .get :focus-visible, .foot :focus-visible { outline-color: #fff; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #fff; color: var(--s900); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Header */
.top { background: var(--blue); color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 36px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; text-decoration: none; }
.brand img { border-radius: 10px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; color: rgba(255, 255, 255, .86); }
.nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.langs { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.nav + .langs { margin-left: 0; }
.langs a { text-decoration: none; font-weight: 600; font-size: .85rem; padding: 6px 11px; border-radius: 999px; color: rgba(255, 255, 255, .85); }
.langs a[aria-current] { background: #fff; color: var(--blue-d); }
.langs a:not([aria-current]):hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* Shared type */
section { padding: clamp(80px, 10vw, 128px) 0; overflow-x: clip; }
h2 { font-size: clamp(2.05rem, 1.35rem + 2.7vw, 3.35rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.intro { font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--s600); max-width: 34rem; margin-top: 20px; text-wrap: pretty; }

/* Store badges */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 11px; min-width: 176px; padding: 10px 20px 10px 16px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .22); transition: transform .15s ease; }
.store:hover { transform: translateY(-2px); }
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.1; }
.store small { font-size: .72rem; opacity: .85; }
.store strong { font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; }

/* Hero */
.hero { background: var(--blue); color: #fff; padding: 36px 0 96px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 1.2rem + 4.6vw, 5.2rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; text-wrap: balance; max-width: 11ch; }
.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); color: rgba(255, 255, 255, .9); max-width: 31rem; margin: 28px 0 40px; text-wrap: pretty; }
.hero-points { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 40px; font-weight: 600; }
.hero-points li { display: flex; align-items: center; gap: 9px; }
.hero-points svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #fff; color: var(--blue); stroke-width: 3; }

.stage { --u: 11.6px; font-size: var(--u); position: relative; width: 45em; height: 67em; }
.stage .front { position: absolute; left: 4.5em; top: 1.5em; z-index: 2; }
.stage .back { position: absolute; left: 19em; top: 7em; font-size: .84em; rotate: 7deg; z-index: 1; }
.stage .back .screen { filter: saturate(.95); }
.f-loc { left: .5em; top: 9.2em; }
.f-toast { left: 20em; top: 37em; width: 24em; }

@media (prefers-reduced-motion: no-preference) {
  .stage .front { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .stage .back { animation: rise 1s .12s cubic-bezier(.2, .8, .2, 1) both; }
  .stage .float { animation: pop .55s .6s cubic-bezier(.2, .9, .3, 1.2) both; }
  .stage .f-toast { animation-delay: .8s; }
}
@keyframes rise { from { translate: 0 4em; opacity: 0; } }
@keyframes pop { from { scale: .88; opacity: 0; } }

/* Steps */
.how h2 { max-width: 16ch; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin-top: 64px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--s200); padding-top: 24px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blue); color: #fff; font-weight: 800; font-size: 1.45rem; margin-bottom: 22px; }
.steps h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.steps p { color: var(--s600); margin-top: 8px; font-size: 1rem; }

/* Feature rows */
.feature .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.feature.flip .media { order: -1; }
.feature .text { max-width: 33rem; }
.feature.flip .text { justify-self: end; }
.plain + .plain, .how + .plain { border-top: 1px solid var(--s200); }
.soft { background: var(--blue-s); }
.navy { background: var(--blue-d); color: #fff; }
.navy .intro { color: rgba(255, 255, 255, .86); }
.points { display: grid; gap: 26px; margin-top: 40px; }
.points li { display: grid; grid-template-columns: 4px 1fr; column-gap: 20px; }
.points li::before { content: ""; grid-row: span 2; border-radius: 4px; background: var(--blue); }
.points h3 { font-size: 1.15rem; font-weight: 700; }
.points p { color: var(--s600); margin-top: 4px; }

.media { --u: 10.4px; font-size: var(--u); display: flex; justify-content: center; }
.device { position: relative; width: 37em; padding: 0 3.5em; }
.crop { height: 47em; clip-path: inset(-30em -30em 0 -30em); }
.kiosks { padding-bottom: 0; }
.kiosks .wrap { align-items: end; }
.kiosks .text { align-self: center; padding-bottom: clamp(80px, 10vw, 128px); }

/* Files */
.files .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.facts > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--s200); }
.facts > div:first-child { border-top: 1px solid var(--s200); }
.facts dt { color: var(--s500); font-weight: 500; }
.facts dd { font-weight: 600; }

/* Branches */
.branches-sec { background: var(--blue-s); }
.branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; }
.branches li { padding: 28px 32px 8px 0; border-top: 3px solid var(--blue); }
.branches li + li { padding-left: 32px; border-left: 1px solid rgba(21, 101, 192, .2); }
.branches h3 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; }
.branches p { margin-top: 8px; color: var(--s700); font-size: 1.05rem; }
.maplink { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 16px 10px 12px; border-radius: 12px; background: #fff; color: var(--blue-d); font-weight: 600; text-decoration: none; border: 1px solid rgba(21, 101, 192, .25); }
.maplink:hover { border-color: var(--blue); }
.maplink svg { width: 20px; height: 20px; }
.hours { display: flex; align-items: center; gap: 12px; margin-top: 48px; font-weight: 600; font-size: 1.08rem; }
.hours svg { width: 24px; height: 24px; color: var(--blue); flex: none; }

/* Download band */
.get { background: var(--blue); color: #fff; padding: clamp(64px, 8vw, 96px) 0; }
.get .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.get-icon { width: 128px; height: 128px; border-radius: 30px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .16); }
.get p { font-size: 1.15rem; color: rgba(255, 255, 255, .88); margin-top: 12px; max-width: 32rem; }
.get .stores { flex-direction: column; }

/* Books */
.books { padding: clamp(72px, 8vw, 104px) 0; }
.books .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.books h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem); }
.books-list li { padding: 16px 0; border-bottom: 1px solid var(--s200); font-weight: 600; font-size: 1.08rem; }
.books-list li:first-child { border-top: 1px solid var(--s200); }
.books-cta { margin-top: 24px; color: var(--s600); }
.books-cta a { color: var(--blue-d); font-weight: 700; text-underline-offset: 4px; }

/* Footer */
.foot { background: var(--s900); color: var(--s300); padding: 48px 0 40px; font-size: .95rem; }
.foot-main { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
.foot .brand { color: #fff; font-size: 1.1rem; margin-right: auto; }
.foot a { text-underline-offset: 4px; }
.foot a:hover { color: #fff; }
.foot .langs { margin-left: 0; }
.legal { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--s800); color: var(--s400); }

/* Privacy */
.doc { padding: 64px 0 96px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.doc .updated { color: var(--s500); margin-top: 12px; }
.doc h2 { font-size: 1.3rem; letter-spacing: -.01em; margin-top: 40px; }
.doc p { color: var(--s700); margin-top: 10px; }
.doc a { color: var(--blue-d); font-weight: 600; }

/* ---------- Phone frame ---------- */
.phone { position: relative; width: 30em; height: 63em; padding: 1.05em; border-radius: 5.2em; background: #08090c; box-shadow: 0 0 0 .28em #3a404c, 0 0 0 .42em #111318, 0 3.6em 6em -1.6em rgba(3, 18, 56, .55); flex: none; }
.screen { position: relative; height: 100%; overflow: hidden; border-radius: 4.15em; background: var(--s50); color: var(--s900); font-size: 1em; line-height: 1.3; letter-spacing: 0; }
.screen::after { content: ""; position: absolute; bottom: .8em; left: 50%; width: 11em; margin-left: -5.5em; height: .45em; border-radius: 1em; background: var(--s900); z-index: 6; }
.screen.dark { background: #0b141a; color: #e9edef; }
.screen.dark::after { background: #fff; }
.island { position: absolute; top: 1.05em; left: 50%; width: 9.4em; height: 2.75em; margin-left: -4.7em; border-radius: 2em; background: #000; z-index: 7; }
.sb { display: flex; justify-content: space-between; align-items: center; height: 4.9em; padding: .3em 2.5em 0 3.4em; position: relative; z-index: 3; }
.sb-time { font-size: 1.42em; font-weight: 600; }
.sb-icons { display: flex; gap: .45em; align-items: center; }
.sb-icons svg:nth-child(1) { width: 1.6em; height: 1.1em; }
.sb-icons svg:nth-child(2) { width: 1.45em; height: 1.1em; }
.sb-icons svg:nth-child(3) { width: 2.4em; height: 1.1em; }
.screen svg { flex: none; }
.screen b, .float b { font-weight: 600; }
.screen small, .float small, .screen em, .float em { font-style: normal; }
.bar { display: grid; grid-template-columns: 3em 1fr 3em; align-items: center; height: 4.3em; padding: 0 1em; }
.bar svg { width: 2.1em; height: 2.1em; }
.bar b { text-align: center; font-size: 1.45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pdf { display: grid; place-items: center; width: 3.3em; height: 3.9em; border-radius: .7em; background: #FEE2E2; color: #DC2626; flex: none; }
.pdf b { font-size: .9em; font-weight: 800; }

/* Floats */
.float { position: absolute; z-index: 5; background: #fff; color: var(--s900); border-radius: 1.8em; line-height: 1.3; box-shadow: 0 2.2em 4em -1.2em rgba(3, 18, 56, .5), 0 0 0 .18em rgba(100, 181, 246, .9); }

/* Location row (in screen and floating) */
.p-loc, .f-loc { display: flex; align-items: center; gap: 1em; }
.loc-pin { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--blue-s); color: var(--blue); flex: none; }
.loc-pin svg { width: 1.8em; height: 1.8em; }
.loc-tx { display: flex; flex-direction: column; min-width: 0; }
.loc-tx small { font-size: 1em; color: var(--blue); font-weight: 600; }
.loc-tx b { font-size: 1.4em; margin-top: .1em; }
.loc-tx em { font-size: 1.02em; color: var(--s500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: .8em; height: .8em; border-radius: 50%; background: var(--green); margin-left: auto; flex: none; box-shadow: 0 0 0 .3em rgba(16, 185, 129, .18); }
.p-loc > svg:last-child, .f-loc > svg:last-child { width: 1.8em; height: 1.8em; color: var(--s500); }
.f-loc { padding: 1.4em 1.6em; font-size: 1.12em; width: 29.5em; }

.f-toast { display: flex; align-items: center; gap: .8em; padding: 1.1em 1.4em; background: #ECFDF5; color: var(--green-d); border-radius: 1.4em; box-shadow: 0 2em 3.6em -1.2em rgba(3, 18, 56, .45), 0 0 0 .14em #A7F3D0; }
.f-toast svg { width: 2.2em; height: 2.2em; }
.f-toast span { font-size: 1.32em; font-weight: 700; line-height: 1.25; }

/* Dashboard screen */
.d-head { margin: .4em 1.4em 0; padding: 1.7em 1.7em 1.5em; border-radius: 2.2em; color: #fff; background: linear-gradient(140deg, #2B8CF0, #1565C0 72%); box-shadow: 0 1.2em 2.4em -1em rgba(21, 101, 192, .6); }
.d-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6em; }
.d-top small { display: block; font-size: 1.08em; opacity: .82; }
.d-top strong { display: block; font-size: 1.9em; font-weight: 700; letter-spacing: -.01em; margin-top: .1em; }
.d-chips { display: flex; gap: .6em; align-items: center; }
.d-lang { display: flex; align-items: center; gap: .3em; font-size: 1.02em; font-weight: 600; padding: .3em .65em; border-radius: 1em; background: rgba(255, 255, 255, .2); }
.d-lang svg { width: 1.15em; height: 1.15em; }
.d-av { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: rgba(255, 255, 255, .24); }
.d-av svg { width: 1.7em; height: 1.7em; }
.d-wallet { display: flex; align-items: center; margin-top: 1.5em; padding: 1em 1.2em; border-radius: 1.4em; background: rgba(255, 255, 255, .15); }
.d-wallet > div { flex: 1; display: flex; align-items: center; gap: .7em; min-width: 0; }
.d-wallet > div svg { width: 1.9em; height: 1.9em; opacity: .9; }
.d-wallet > div span { display: flex; flex-direction: column; min-width: 0; }
.d-wallet small { font-size: .95em; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-wallet b { font-size: 1.35em; font-weight: 700; }
.d-wallet > i { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .3); margin: 0 1em; }
.d-label { margin: 1.7em 2.1em .8em; font-size: 1.08em; font-weight: 600; color: var(--s500); }
.d-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; padding: 0 1.4em; }
.d-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9em; height: 11.2em; padding: 0 .7em; border-radius: 2em; background: #fff; text-align: center; box-shadow: 0 .3em 1em rgba(15, 23, 42, .05); }
.d-ic { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: var(--bg); color: var(--fg); }
.d-ic svg { width: 2.2em; height: 2.2em; }
.d-t { font-size: 1.18em; font-weight: 600; line-height: 1.2; }
.f-tile { left: 0; top: 46em; padding: 0; border-radius: 2.2em; }
.f-tile .d-tile { width: 15.5em; height: 13.5em; font-size: 1.1em; border-radius: 2em; box-shadow: none; }

/* Print screen */
.p-body { display: flex; flex-direction: column; gap: .9em; padding: 0 1.3em; }
.p-loc, .p-file, .p-set { background: #fff; border: 1px solid var(--s200); border-radius: 1.6em; }
.p-loc { padding: 1em 1.2em; }
.p-file { display: flex; align-items: center; gap: 1em; padding: .9em 1.2em; }
.fn { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fn b { font-size: 1.32em; }
.fn small { font-size: 1.02em; color: var(--s500); }
.p-eye, .p-del { display: grid; place-items: center; }
.p-eye svg, .p-del svg { width: 1.9em; height: 1.9em; }
.p-eye { color: var(--blue); }
.p-del { color: #DC2626; }
.p-set { display: flex; flex-direction: column; gap: 1.15em; padding: 1.25em 1.2em; }
.p-row3 { display: grid; grid-template-columns: 1.3fr 1.2fr .85fr; gap: .7em; }
.p-row3 > div { min-width: 0; }
.p-row3 small, .p-lab { display: block; font-size: .95em; color: var(--s500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel { display: block; margin-top: .5em; padding: .6em .7em; border-radius: .8em; border: 1px solid var(--blue-l); background: var(--blue-s); color: var(--blue-d); font-size: 1.02em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: flex; gap: .35em; margin-top: .5em; }
.seg span { display: flex; align-items: center; gap: .15em; padding: .6em .55em; border-radius: .8em; border: 1px solid var(--s300); font-size: 1.02em; font-weight: 600; }
.seg .on { background: var(--blue-s); border-color: var(--blue-l); color: var(--blue-d); }
.seg svg { width: 1.05em; height: 1.05em; stroke-width: 3; }
.stepper { display: flex; align-items: center; gap: .5em; margin-top: .65em; font-size: 1.15em; font-weight: 600; }
.stepper i { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; border: .1em solid var(--blue); color: var(--blue); font-style: normal; line-height: 1; }
.p-tog, .p-lay { display: flex; flex-wrap: wrap; gap: .5em; }
.p-tog span, .p-lay span { display: flex; align-items: center; gap: .4em; padding: .5em .85em; border-radius: 2em; border: 1px solid var(--s300); font-size: 1.05em; font-weight: 500; color: var(--s700); }
.p-tog svg { width: 1.2em; height: 1.2em; }
.p-tog .on, .p-lay .on { background: var(--blue); border-color: var(--blue); color: #fff; }
.p-lab { margin-bottom: -.5em; }
.p-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1em; padding: 1.3em 1.5em 2.8em; background: #fff; border-radius: 2.4em 2.4em 0 0; box-shadow: 0 -.8em 2.4em rgba(15, 23, 42, .08); }
.p-chips { display: flex; gap: .5em; }
.p-chips span { display: flex; align-items: center; gap: .4em; padding: .45em .85em; border-radius: 2em; border: 1px solid var(--s200); font-size: 1em; color: var(--s600); white-space: nowrap; }
.p-chips svg { width: 1.2em; height: 1.2em; }
.p-cb { display: flex; align-items: center; gap: .5em; color: #059669; font-weight: 600; font-size: 1.1em; }
.p-cb svg { width: 1.4em; height: 1.4em; }
.p-btns { display: grid; grid-template-columns: 1fr 1.2fr; gap: .7em; }
.p-btns span { display: grid; place-items: center; min-height: 3.6em; padding: 0 .6em; border-radius: 1.2em; font-size: 1.1em; font-weight: 700; text-align: center; line-height: 1.15; }
.p-btns .ghost { border: .12em solid var(--blue); color: var(--blue); }
.p-btns .solid { background: var(--blue); color: #fff; }

/* Kiosks screen */
.screen:has(.k-list) { background: #fff; }
.k-list { padding: .4em 1.6em 0; }
.k-list li { display: flex; align-items: flex-start; gap: 1.1em; padding: 1.4em 0; border-bottom: 1px solid var(--s200); }
.k-ic { display: grid; place-items: center; width: 3.9em; height: 3.9em; border-radius: 50%; background: #22A55B; color: #fff; flex: none; }
.k-ic svg { width: 1.9em; height: 1.9em; }
.k-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-name { display: flex; align-items: center; gap: .6em; }
.k-name b { font-size: 1.4em; }
.k-name em { font-size: .88em; font-weight: 600; color: var(--blue); background: var(--blue-s); border: 1px solid var(--blue-l); border-radius: .5em; padding: .1em .5em; }
.k-tx small { font-size: 1.1em; color: var(--s600); margin-top: .25em; }
.k-ok { font-size: 1em; color: #16A34A; margin-top: .35em; }
.k-go { display: grid; place-items: center; width: 2.3em; height: 2.3em; margin: 1em .3em 0 0; border-radius: .5em; background: var(--blue); color: #fff; rotate: 45deg; flex: none; }
.k-go svg { width: 1.5em; height: 1.5em; rotate: -45deg; stroke-width: 2.4; }
.f-kiosk { left: 0; top: 19.5em; width: 31em; display: flex; align-items: flex-start; gap: 1.1em; padding: 1.5em 1.6em; font-size: 1.08em; }

/* History screen */
.h-list { display: flex; flex-direction: column; gap: .8em; padding: 0 1.4em; }
.h-item { display: flex; align-items: center; gap: 1em; padding: 1.05em 1.2em; border-radius: 1.4em; background: #fff; border: 1px solid var(--s200); }
.h-ok { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: #D1FAE5; color: #059669; flex: none; }
.h-ok svg { width: 1.7em; height: 1.7em; stroke-width: 2.6; }
.h-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.h-tx b { font-size: 1.28em; }
.h-tx small { font-size: 1.02em; color: var(--s500); }
.h-br { display: flex; align-items: center; gap: .3em; font-size: .95em; color: var(--s500); margin-top: .1em; }
.h-br svg { width: 1.1em; height: 1.1em; }
.h-st { font-size: .82em; font-weight: 700; color: var(--s500); text-transform: uppercase; letter-spacing: .04em; text-align: right; flex: none; max-width: 8em; }
.f-order { left: 0; right: 0; top: 9.6em; padding: .6em; font-size: 1.08em; }
.f-order .h-item { border: 0; padding: 1em 1.1em; }
.fo-file { display: flex; align-items: center; gap: 1em; padding: 1em 1.1em; border-top: 1px solid var(--s200); }
.fo-file > svg { width: 2em; height: 2em; color: var(--s500); }
.fo-file > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fo-file b { font-size: 1.2em; }
.fo-file small { font-size: 1em; color: var(--s500); }
.fo-act { display: flex; justify-content: center; gap: 2em; padding: .9em 1em 1em; border-top: 1px solid var(--s200); color: var(--blue); font-weight: 600; }
.fo-act span { display: flex; align-items: center; gap: .45em; font-size: 1.08em; }
.fo-act svg { width: 1.25em; height: 1.25em; }

/* WhatsApp screen */
.w-head { display: flex; align-items: center; gap: .9em; padding: .2em 1.4em 1em; background: #111b21; border-bottom: 1px solid #1f2c34; color: #e9edef; }
.w-head > svg { width: 2em; height: 2em; color: #53bdeb; }
.w-av { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: #2a3942; font-weight: 700; font-size: 1em; color: #d1d7db; flex: none; }
.w-who { display: flex; flex-direction: column; min-width: 0; }
.w-who b { font-size: 1.3em; }
.w-who small { font-size: .98em; color: #8696a0; }
.w-chat { display: flex; flex-direction: column; gap: .7em; padding: 1.3em 1.3em; }
.w-chat small { display: block; text-align: right; font-size: .8em; color: #8696a0; margin-top: .2em; }
.w-in, .w-out { max-width: 82%; padding: .6em .9em .45em; border-radius: 1.1em; font-size: 1.15em; line-height: 1.3; }
.w-in { align-self: flex-start; background: #202c33; border-top-left-radius: .3em; }
.w-out { align-self: flex-end; background: #005c4b; border-top-right-radius: .3em; }
.w-out small { color: #9fd3c7; }
.w-doc { align-self: flex-start; width: 78%; padding: .5em .5em .35em; border-radius: 1.1em; background: #202c33; }
.w-file { display: flex; align-items: center; gap: .8em; padding: .8em; border-radius: .8em; background: #1a2329; }
.w-file > span:last-child, .w-prev > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.w-file b, .w-prev b { font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-file small, .w-prev small { text-align: left; font-size: .95em; color: #8696a0; margin: 0; }
.w-doc .pdf, .w-prev .pdf { width: 2.8em; height: 3.3em; }
.w-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: .9em 1.5em 3em; background: #1c1c1e; border-radius: 2.6em 2.6em 0 0; box-shadow: 0 -1em 3em rgba(0, 0, 0, .5); color: #f2f2f7; }
.w-grab { display: block; width: 4.2em; height: .45em; margin: 0 auto 1.2em; border-radius: 1em; background: #48484a; }
.w-prev { display: flex; align-items: center; gap: .9em; padding-bottom: 1.2em; border-bottom: 1px solid #2c2c2e; }
.w-prev small { display: block; }
.w-apps { display: flex; justify-content: space-between; padding: 1.4em .2em 1.3em; }
.w-app { display: flex; flex-direction: column; align-items: center; gap: .5em; width: 5.6em; }
.w-app img, .w-ico { width: 5em; height: 5em; border-radius: 1.2em; }
.w-ico { display: grid; place-items: center; background: var(--c); color: #fff; }
.w-ico svg { width: 2.4em; height: 2.4em; }
.w-app small { font-size: .92em; color: #d1d1d6; white-space: nowrap; }
.w-app.on img { box-shadow: 0 0 0 .2em #1c1c1e, 0 0 0 .4em var(--blue-l); }
.w-acts { display: flex; flex-direction: column; border-radius: 1.2em; overflow: hidden; }
.w-acts span { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.2em; background: #2c2c2e; font-size: 1.12em; }
.w-acts span + span { border-top: 1px solid #3a3a3c; }
.w-acts svg { width: 1.3em; height: 1.3em; color: #aeaeb2; }
.f-dk { left: 0; top: 41em; display: flex; align-items: center; gap: 1em; padding: 1em 2em 1em 1em; border-radius: 1.6em; background: #2c2c2e; color: #fff; box-shadow: 0 2em 4em -1em rgba(0, 0, 0, .55), 0 0 0 .18em var(--blue-l); }
.f-dk img { width: 4.4em; height: 4.4em; border-radius: 1.1em; }
.f-dk b { font-size: 1.7em; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .get .wrap { grid-template-columns: auto minmax(0, 1fr); }
  .get .stores { grid-column: 1 / -1; flex-direction: row; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .hero { padding: 24px 0 72px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hero h1 { max-width: 14ch; }
  .stage { --u: clamp(8.6px, calc((100vw - 2 * var(--gutter)) / 34), 10.8px); width: 34em; height: 66em; justify-self: center; }
  .stage .back { display: none; }
  .stage .front { left: 2em; }
  .f-loc { left: .5em; }
  .f-toast { left: auto; right: 0; width: 22em; }
  .feature .wrap, .files .wrap, .books .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .feature.flip .media { order: 0; }
  .feature.flip .text { justify-self: start; }
  .media { --u: clamp(8px, calc((100vw - 2 * var(--gutter)) / 37), 10.4px); }
  .kiosks .text { padding-bottom: 0; }
  .branches { grid-template-columns: minmax(0, 1fr); }
  .branches li, .branches li + li { padding: 24px 0 28px; border-left: 0; }
  .branches li + li { border-top: 1px solid rgba(21, 101, 192, .25); }
  .branches li:first-child { border-top-width: 3px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .top .wrap { min-height: 68px; gap: 16px; }
  .brand { font-size: 1.12rem; }
  .brand img { width: 32px; height: 32px; }
  .langs a { padding: 6px 9px; }
  .lead { margin: 22px 0 32px; }
  .store { min-width: 0; flex: 1 1 0; gap: 8px; padding: 9px 10px 9px 11px; }
  .store svg { width: 22px; height: 22px; }
  .store strong { font-size: 1.02rem; white-space: nowrap; }
  .hero-points { flex-direction: column; gap: 10px; margin-top: 32px; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 40px; }
  .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 20px 0; }
  .steps li::before { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; font-size: 1.2rem; margin: 0; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .get .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .get-icon { width: 96px; height: 96px; border-radius: 24px; }
  .get .stores { flex-direction: row; }
  .foot-main { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}