/* Marketing site */
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }
/* See-through colours are written out as rgba of --bg (#FAF7F2): a color-mix() with var() inside would leave
   iPhones up to iOS 16.1 with no colour at all, not fall back to the line before it. */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 242, .85); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.nav-links { display: flex; gap: 22px; margin-left: 12px; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14px; }
@media (hover: hover) { .nav-links a:hover { color: var(--ink); } }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) { .nav-links, .nav .hide-sm { display: none; } .nav .wrap { gap: 10px; } }

section { --pt: 88px; padding: var(--pt) 0 88px; }
@media (max-width: 720px) { section { --pt: 56px; padding-bottom: 56px; } }
/* A menu jump (How it works, Pricing…) puts the section's heading just below the 68px sticky header,
   whatever the section's top padding (a section sets its own with --pt). */
section[id] { scroll-margin-top: max(0px, calc(84px - var(--pt))); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--warn-ink); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.h-xl { font-size: clamp(36px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; }
.h-lg { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.02em; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-width: 600px; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sec-head .lead { margin: 0 auto; }

.hero { padding: 48px 0 72px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 18px; }
.hero-trust { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero-visual { position: relative; display: grid; place-items: center; min-height: 600px; }
.hero-visual::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 68%); z-index: 0; }
.hero-visual .phone { z-index: 1; transform: rotate(-3deg); }
/* The notification drops in under the island, inside the screen, like a real iPhone banner. */
.float-notif { position: absolute; z-index: 4; top: calc(var(--bezel) + 40px * var(--s)); left: calc(var(--bezel) + 8px); right: calc(var(--bezel) + 8px); animation: drop 1s .6s cubic-bezier(.2,.9,.3,1.2) both; }
/* Solid: the cards' names behind it would otherwise show through as faint letters. */
.float-notif .lock-notif { background: #fff; position: relative; }
/* Like an iPhone banner, "now" sits on the title's line and the message gets the full width, so it is
   two lines in every language and always ends at the same place over the cards below. */
.float-notif .lock-notif b { padding-right: 52px; }
.float-notif .lock-notif time { position: absolute; top: 12px; right: 12px; }
.float-stamp { position: absolute; z-index: 2; left: -12px; bottom: -6px; background: var(--surface); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; animation: drop 1s 1.2s cubic-bezier(.2,.9,.3,1.2) both; }
.float-stamp i { width: 34px; height: 34px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-style: normal; }
@keyframes drop { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { min-height: 520px; }
  .float-stamp { left: 4px; bottom: -6px; }
}
@media (prefers-reduced-motion: reduce) { .float-notif, .float-stamp { animation: none; } }

.logos-strip { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 16px 32px; }
.logos-strip .ww { display: inline-flex; gap: 8px; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 14px; }

.try { background: var(--ink); color: var(--bg); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; }
.try .lead { color: rgba(250, 247, 242, .75); }
.try .field > span { color: rgba(250, 247, 242, .8); }
.try .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.try .seg { background: rgba(255,255,255,.08); }
.try .seg button { color: rgba(255,255,255,.7); }
.try .seg button.on { background: #fff; color: #111; }
.try .swatch { border-color: var(--ink); }
.icon-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-pick button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.icon-pick button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 900px) { .try { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; border-radius: 24px; } .try .pass { margin: 0 auto; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; position: relative; }
.step::before { counter-increment: s; content: counter(s); width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 800; display: grid; place-items: center; margin-bottom: 18px; font-size: 18px; }
.step h3 { font-size: 20px; }
.step p { color: var(--ink-2); margin: 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature { padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
@media (hover: hover) { .feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); } }
.feature.big { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.feature.big > :not(.f-art) { grid-column: 1; }
.feature.big p { color: rgba(250, 247, 242, .72); }
.feature.big .fi { background: rgba(255,255,255,.1); color: var(--accent); }
.f-art { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.f-art-pass img { border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: rotate(-4deg); }
.f-art .lock-notif { transform: rotate(2deg); background: #fff; }
.f-art .lock-notif p { color: #222; }
.f-chart { width: 100%; height: auto; }
@media (max-width: 640px) { .feature.big { grid-template-columns: 1fr; } .f-art { grid-column: 1; grid-row: auto; margin-top: 18px; } }
.feature .fi { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--warn); display: grid; place-items: center; margin-bottom: 16px; }
.feature h3 { font-size: 16px; margin-bottom: 6px; }
.feature p { color: var(--ink-2); font-size: 14px; margin: 0; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } .feature.big { grid-column: auto; } }

.vs { max-width: 720px; margin: 0 auto; background: var(--surface); border-radius: 24px; border: 1px solid var(--line); overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1fr 110px 110px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--line); }
.vs-row:first-child { border-top: 0; font-weight: 700; font-size: 14px; }
.vs-row > :not(:first-child) { display: grid; place-items: center; align-self: stretch; margin: -16px 0; padding: 16px 0; }
.vs-row > :last-child { background: var(--accent-soft); }
.vs-row:first-child > :last-child { border-radius: 14px 14px 0 0; color: var(--warn-ink); }
.yes { width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.no { color: var(--muted); font-size: 20px; font-weight: 600; }
/* Phones: the column titles wrap inside their own column instead of running into each other,
   and the highlighted column runs to the table's edge rather than stopping just before it. */
@media (max-width: 560px) {
  .vs-row { grid-template-columns: minmax(0, 1fr) 76px 84px; padding: 14px 0 14px 16px; font-size: 14px; }
  .vs-row > :first-child { padding-right: 8px; }
  .vs-row:first-child { font-size: 12px; line-height: 1.25; }
  .vs-row:first-child > :not(:first-child) { padding: 16px 6px; text-align: center; }
  .vs-row:first-child > :last-child { border-radius: 14px 0 0 0; }
}

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
/* One price card with a period switch; on wide screens "everything included" sits beside it. */
.period-switch { display: flex; flex-wrap: nowrap; width: fit-content; max-width: 100%; margin: 0 auto 24px; background: var(--surface); border: 1px solid var(--line); }
.period-switch button { height: auto; min-height: 40px; padding: 6px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.period-switch button.on { background: var(--ink); color: var(--bg); }
.save-badge { background: var(--ok-soft); color: #136B47; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.price-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.plans.one { grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; }
.price-wrap .included { margin: 0; max-width: none; }
.price-wrap .included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; position: relative; }
.plan.pop { border: 2px solid var(--ink); box-shadow: var(--shadow-lg); }
.plan .pop-badge { position: absolute; top: -13px; left: 32px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.plan h3 { font-size: 22px; margin-bottom: 4px; }
@media (min-width: 761px) { .plan h3 + .muted { min-height: 3em; } }
.plan .price { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; margin: 18px 0 2px; }
.plan .price small { font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.plan .bill-note { margin-top: auto; padding-top: 22px; margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.included { max-width: 1040px; margin: 20px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 28px 32px; }
.included h3 { font-size: 18px; margin: 0 0 18px; }
.included ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.included li { display: flex; gap: 10px; font-size: 15px; }
.included li svg { color: var(--ok); flex: none; margin-top: 2px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .plans { gap: 14px; }
  .plan { padding: 26px 22px 22px; border-radius: 24px; }
  .plan .pop-badge { left: 22px; }
  .plan h3 { font-size: 20px; }
  .plan .price { font-size: 38px; }
  .included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; max-width: 480px; } .included { max-width: 480px; } .included ul { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .price-wrap { grid-template-columns: minmax(0, 1fr); max-width: 480px; } .price-wrap .included ul { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .period-switch { width: 100%; } .period-switch button { flex: 1 1 0; min-width: 0; padding: 6px 8px; flex-direction: column; gap: 3px; } }
@media (max-width: 560px) { .plan { padding: 26px 22px 22px; } .plan .price { font-size: 40px; margin-top: 14px; } .plan .bill-note { padding-top: 16px; } .included { padding: 22px; } }

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 4px; }
.faq summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--ink-2); margin: 12px 0 0; }

.lead-box { background: var(--accent); color: var(--accent-ink); border-radius: 32px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.lead-box .lead { color: var(--accent-ink); opacity: .85; }
.lead-box .input { background: #fff; border-color: transparent; color: #1A1714; }
.lead-box .field > span { color: var(--accent-ink); font-weight: 700; }
@media (max-width: 820px) { .lead-box { grid-template-columns: 1fr; padding: 28px 20px; } }

footer { padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--ink-2); text-decoration: none; }
/* The links wrap as one group on the right, so none is left alone under the logo. */
footer .foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; margin-left: auto; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Wallet app look inside the hero phone. The banner covers the "Wallet" title and the first card's
   name whole, and ends above the second card's name, so no letters show half-cut under it. */
.hero-visual .phone .screen { padding: 44px 12px 18px; }
.wallet-top { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 4px; color: #111; }
.wallet-top b { font-size: 24px; line-height: 30px; letter-spacing: -0.02em; }
.wallet-top span { width: 28px; height: 28px; border-radius: 50%; background: #E3E3E8; display: grid; place-items: center; font-weight: 600; color: #333; }
.wallet-peek { height: 46px; border-radius: 14px 14px 0 0; margin-bottom: -6px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: flex-start; font-weight: 600; font-size: 14px; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
.wallet-peek small { font-size: 10px; letter-spacing: .05em; opacity: .8; padding-top: 3px; }
.hero-visual .phone .pass { position: relative; box-shadow: 0 -4px 14px rgba(0,0,0,.12), 0 20px 40px rgba(0,0,0,.2); }

@media (max-width: 640px) {
  .hero-cta .btn { flex: 1 1 100%; }
  .hero .wrap { gap: 24px; }
  .hero-visual { min-height: 0; padding-top: 8px; padding-bottom: 24px; }
  .hero-visual .phone { width: 280px; --s: .933; }
  .float-stamp { bottom: -18px; left: 0; }
  .try #tryPass { order: -1; }
  .h-xl { font-size: 38px; }
}

@media (max-width: 640px) {
  .features { gap: 10px; }
  .feature:not(.big) { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; }
  .feature:not(.big) .fi { grid-row: span 2; margin: 0; }
  .feature:not(.big) h3 { margin: 2px 0 4px; }
  .f-chart { max-height: 110px; }
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  footer .foot-links { flex-direction: column; align-items: flex-start; gap: 12px; margin-left: 0; }
}

.show-sm { display: none; }
@media (max-width: 900px) { .show-sm { display: inline-flex; padding: 0 8px; } }
.menu-sheet { display: grid; gap: 4px; }
.menu-sheet > a:not(.btn) { padding: 12px 8px; font-size: 18px; font-weight: 700; text-decoration: none; border-radius: 10px; }
@media (hover: hover) { .menu-sheet > a:not(.btn):hover { background: var(--surface-2); } }
/* On narrow phones the language switch moves from the top bar into the menu, until the bar has room
   for it in Russian too (from 425px). Only the landing bar (#nav) has a menu; a bar with none, as on the
   legal pages, keeps its switch. (By id, not :has(), which older phones would skip, rule and all.) */
.menu-lang { display: none; justify-content: center; margin-top: 8px; }
@media (max-width: 430px) { #nav .nav-right > [data-lang-switch] { display: none; } .menu-lang { display: flex; } }

/* Real product screenshots */
.product { position: relative; padding-right: 170px; }
.product .browser { margin: 0; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.product .b-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.product .b-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.product img { width: 100%; height: auto; }
/* The scanner in the same phone frame as the hero, overlapping only the screenshot's right margin. */
.product .phone-shot { position: absolute; right: 0; bottom: -40px; width: 200px; --s: .667; margin: 0; }
.product .phone-shot .screen { padding: 0; background: #17140F; }
.product .phone-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 72px; }
.product-caps b { font-size: 18px; display: block; margin-bottom: 4px; }
.product-caps p { color: var(--ink-2); margin: 0; }
/* Tablets: the phone stays in the screenshot's right margin, off its text. */
@media (max-width: 1000px) { .product { padding-right: 190px; } }
@media (max-width: 760px) {
  .product { padding-right: 0; }
  .product .phone-shot { position: relative; bottom: auto; width: 135px; --s: .45; margin: -70px 8px 0 auto; }
  .product-caps { grid-template-columns: 1fr; margin-top: 28px; }
}