/* Self-hosted fonts: same origin, no third-party round-trip,
   so the text does not repaint when the webfont lands. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/onest-400-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/onest-400-lat.woff2') format('woff2');
  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: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/onest-500-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/onest-500-lat.woff2') format('woff2');
  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: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/onest-600-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/onest-600-lat.woff2') format('woff2');
  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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/unbounded-500-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/unbounded-500-lat.woff2') format('woff2');
  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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/unbounded-600-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/unbounded-600-lat.woff2') format('woff2');
  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: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/unbounded-700-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/unbounded-700-lat.woff2') format('woff2');
  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;
}

/* onetwocard — landing.
   Same system as the Mini App: near-black neutrals, one blue accent, and the
   card carrying a live blue gradient. */
:root {
  --bg:        #0A0B0C;
  --surface:   #131417;
  --surface-2: #191B1F;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.15);

  --accent:    #3B82F6;
  --accent-2:  #7CB0FF;   /* accent text on dark */
  --ink:       #FFFFFF;   /* text on accent      */

  --txt:       #EDEFF2;
  --muted:     #838A93;
  --dim:       #575D65;

  --card-bg:   #02060F;
  --screen:    #0C0E11;

  --r-sm: 14px;
  --r:    22px;
  --r-lg: 30px;

  --pad: 20px;
  --sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Unbounded', var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 400 16px/1.62 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--disp); font-weight: 600; letter-spacing: -.035em; margin: 0; }
h1 { font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

::selection { background: var(--accent); color: var(--ink); }

/* absolute, not fixed: the glows belong to the first screen and scroll away
   with it. Fixed ones follow the viewport all the way down and get sliced by
   the first opaque section they meet. */
.glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
.glow--a { top: -260px; left: -200px; width: 620px; height: 620px; background: rgba(59,130,246,.20); }
.glow--b { top: 42%; right: -260px; width: 640px; height: 640px; background: rgba(59,130,246,.09); }

/* ══ layout ═════════════════════════════════ */
.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--pad); position: relative; z-index: 1; }
.wrap--narrow { max-width: 800px; }

.sec { padding-block: 76px; scroll-margin-top: 92px; }
.sec--tight { padding-block: 44px; }

/* A light band breaks the page into separate screens. Only the tokens flip —
   every component inside picks up the new palette on its own. */
.sec--light {
  --surface:   #FFFFFF;
  --surface-2: #FFFFFF;
  --line:      rgba(9,12,16,.10);
  --line-2:    rgba(9,12,16,.20);
  --txt:       #0A0C0F;
  --muted:     #5D646E;
  --dim:       #8B939D;

  position: relative;
  z-index: 1;
  background: #EEF0F3;
  color: var(--txt);
  padding-block: 84px;
}

/* …except the phone mockups, which stay dark on the light band. */
.sec--light .phone {
  --surface:   #101216;
  --surface-2: #16181D;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.15);
  --txt:       #F2F5F7;
  --muted:     #838B96;
  --dim:       #5A616B;
  color: var(--txt);
}

/* the mint accent is too pale for text on white */
.sec--light .price--hl .price__v,
.sec--light .acc[open] summary { color: #1D4ED8; }
.sec--light .price--hl { border-color: rgba(29,78,216,.3); background: linear-gradient(165deg, rgba(59,130,246,.14), #FFF); }

.sec__h { font-size: clamp(25px, 4.6vw, 38px); line-height: 1.14; margin-bottom: 14px; }
.sec__sub { color: var(--muted); max-width: 580px; margin-bottom: 34px; font-size: 15.5px; }

.grid { display: grid; gap: 14px; }

/* ══ nav ════════════════════════════════════
   A floating capsule rather than a full-width bar: a bar over a page that has
   its own gradient always shows a seam where its background stops. */
.nav {
  position: fixed;
  top: 14px; left: 0; right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-inline: 14px;
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(15,17,21,.74);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 20px 46px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  transition: background .3s, box-shadow .3s;
}
.nav.is-stuck .nav__pill {
  background: rgba(15,17,21,.92);
  box-shadow: 0 26px 58px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
}

.logo { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.logo__mark { flex: none; }
.logo__text { font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: -.05em; }
.logo__text span { color: var(--accent); }
.logo--sm .logo__text { font-size: 15.5px; }

.nav__sep { display: none; width: 1px; height: 18px; background: var(--line-2); flex: none; margin-inline: 3px; }

.nav__links { display: none; gap: 20px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.nav__links a { transition: color .18s; }
.nav__links a:hover { color: var(--txt); }

.lang { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); }
.lang button, .lang a {
  border: 0; background: none; color: var(--muted);
  font: 600 12px/1 var(--sans); letter-spacing: .05em;
  padding: 7px 11px; border-radius: 999px; cursor: pointer; transition: .18s;
}
.lang button.is-on, .lang a.is-on { background: rgba(255,255,255,.1); color: var(--txt); }
.lang a:hover { color: var(--txt); }

.lang--foot { padding: 2px; }
.lang--foot button { font-size: 11px; padding: 5px 9px; }

/* ══ buttons ════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14.5px/1 var(--sans);
  padding: 14px 22px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap; transition: .2s;
}
.btn--lg { font-size: 15.5px; padding: 18px 32px; }
.btn--primary {
  background: linear-gradient(115deg, var(--accent), var(--accent-2));
  color: var(--ink);
  box-shadow: 0 12px 38px -14px rgba(59,130,246,.75);
}
.btn--ghost { border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--cta {
  flex: none;
  gap: 7px;
  padding: 11px 17px;
  font-size: 13.5px;
  background: linear-gradient(115deg, var(--accent), var(--accent-2));
  color: var(--ink);
  box-shadow: 0 8px 22px -10px rgba(59,130,246,.75);
}

/* ══ hero ═══════════════════════════════════ */
.hero { padding-top: 104px; padding-bottom: 30px; }
.hero__in { display: grid; gap: 54px; }

.hero h1 { font-size: clamp(29px, 7vw, 50px); line-height: 1.1; margin-bottom: 22px; }
.lead { color: var(--muted); font-size: clamp(15.5px, 2.1vw, 17.5px); max-width: 480px; margin-bottom: 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.hero__art { position: relative; display: flex; justify-content: center; }

/* ══ phone ══════════════════════════════════ */
.phone {
  position: relative;          /* the screen is absolute inside, so overflowing
                                  content can never stretch the frame */
  width: 100%;
  max-width: 306px;
  aspect-ratio: 305 / 620;
  border-radius: 44px;
  background: linear-gradient(160deg, #23262C, #101216 42%, #1B1E23);
  box-shadow: 0 44px 90px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
  flex: none;
}
.phone--lead { will-change: transform; }

.phone__scr {
  position: absolute;
  inset: 9px;
  border-radius: 36px;
  background: var(--screen);
  padding: 16px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.ph-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; }
.ph-top__t { font: 600 12.5px/1 var(--disp); letter-spacing: -.04em; }
.ph-top__b { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.07); }

/* balance card — the same object as in the app */
.bal {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px;
  padding: 15px 15px 18px;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.bal::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(108% 80% at 30% -16%, rgba(59,130,246,.62), transparent 66%),
    radial-gradient(74% 52% at 96% -6%, rgba(96,165,250,.28), transparent 62%);
}
.bal__gl { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.bal > *:not(.bal__gl) { position: relative; }
.bal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bal__brand { font: 600 10px/1 var(--disp); letter-spacing: -.03em; opacity: .92; }
.bal__k { font-size: 9.5px; opacity: .6; }
.bal__v { display: block; font: 700 25px/1.05 var(--disp); letter-spacing: -.055em; margin: 3px 0 12px; }
.bal__v small { font-size: .5em; opacity: .45; }
.bal__num { display: block; font: 600 10.5px/1 var(--disp); letter-spacing: .07em; opacity: .84; margin-bottom: 12px; }
.bal__foot { display: flex; align-items: flex-end; gap: 14px; }
.bal__foot small { display: block; font-size: 6.5px; letter-spacing: .14em; opacity: .5; margin-bottom: 2px; }
.bal__foot b { display: block; font: 600 9px/1 var(--disp); letter-spacing: .04em; }
.bal__tag { margin-left: auto; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); font-size: 8px; font-weight: 600; }
.ms { display: flex; }
.ms i { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.34); }
.ms i + i { margin-left: -6px; background: rgba(255,255,255,.2); }

/* circular actions */
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.act__i {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: #EDEFF2; color: #0A0B0C;
}
.act__i svg { width: 17px; height: 17px; }
.act small { font-size: 9.5px; color: var(--muted); letter-spacing: -.01em; }

/* transactions */
.tx { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.tx__h { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 6px; font-size: 11px; color: var(--muted); }
.tx__all { color: var(--accent); }

.row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 13px; }
.row:hover { background: rgba(255,255,255,.03); }
.mono {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  font: 700 13px/1 var(--disp);
}
.mono--in { font-size: 15px; }
.row__t { min-width: 0; flex: 1; }
.row__t b { display: block; font: 600 12.5px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__t small { font-size: 10px; color: var(--dim); }
.row__a { font: 600 12.5px/1 var(--sans); white-space: nowrap; }
.row__a--in { color: var(--accent); }

/* ── chips floating around the phone ─────────
   Two layers: the outer .fl carries the pointer parallax that main.js writes,
   the inner .fl__i carries the entrance and the idle drift. Keeping them apart
   means the two transforms never fight over the same property. */
.fl {
  position: absolute;
  z-index: 2;
  will-change: transform;
}
.fl__i {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 13px;
  white-space: nowrap;
  background: rgba(20,23,27,.86);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 26px 54px -26px rgba(0,0,0,.9);

  animation-name: rise, var(--anim, driftA);
  animation-duration: .85s, var(--dur, 16s);
  animation-timing-function: cubic-bezier(.22,.72,.24,1), ease-in-out;
  animation-delay: var(--del, 0s), calc(var(--del, 0s) + .85s);
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px) scale(.93); }
  to   { opacity: 1; transform: none; }
}

/* three long, low-amplitude paths so no two chips ever line up */
@keyframes driftA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  28%      { transform: translate3d(5px, -9px, 0) rotate(.7deg); }
  61%      { transform: translate3d(-4px, -15px, 0) rotate(-.5deg); }
  84%      { transform: translate3d(-6px, -4px, 0) rotate(-.2deg); }
}
@keyframes driftB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%      { transform: translate3d(-7px, -12px, 0) rotate(-.8deg); }
  58%      { transform: translate3d(2px, -3px, 0) rotate(.3deg); }
  79%      { transform: translate3d(6px, -10px, 0) rotate(.6deg); }
}
@keyframes driftC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  24%      { transform: translate3d(4px, -5px, 0) rotate(.35deg); }
  55%      { transform: translate3d(-5px, -13px, 0) rotate(-.55deg); }
  81%      { transform: translate3d(3px, -8px, 0) rotate(.25deg); }
}

.fl__i svg { flex: none; }
.fl__i > b { font: 500 15px/1 var(--sans); letter-spacing: -.02em; color: #fff; }
.fl__i > span { font-size: 11.5px; color: var(--muted); }

.fl--apple { top: 2%; left: 0; color: #fff; }

.fl--gpay { display: none; }

.fl--usdt, .fl--sec, .fl--ms { display: none; }

.fl__ic {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--accent);
  background: rgba(59,130,246,.13);
  border: 1px solid rgba(59,130,246,.26);
}
.fl__ic--usdt { color: #26A17B; background: rgba(38,161,123,.16); border-color: rgba(38,161,123,.34); }

.fl__t { display: flex; flex-direction: column; gap: 2px; }
.fl__t b { font: 600 12.5px/1.2 var(--sans); color: var(--txt); }
.fl__t span { font-size: 10.5px; color: var(--dim); }

.fl--sec .fl__i > b { font: 600 13px/1 var(--sans); color: var(--txt); }

.fl--push { bottom: 4%; left: 0; }
.fl--push .fl__i {
  width: 216px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 17px;
}
.push__ic {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.push__b { min-width: 0; flex: 1; }
.push__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.push__h b { font: 600 11.5px/1.2 var(--sans); letter-spacing: .01em; }
.push__h span { font-size: 10px; color: var(--dim); flex: none; }
.push__b p { font-size: 11.5px; line-height: 1.35; color: #C6CDD5; white-space: normal; }

/* ══ stats strip ════════════════════════════ */
.strip { padding-block: 10px 24px; }
.strip__in {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.stat { padding: 22px 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat:nth-child(-n+2) { border-top: 0; }
.stat:nth-child(odd) { border-left: 0; }
.stat b { display: block; font: 700 clamp(24px, 5vw, 32px)/1 var(--disp); letter-spacing: -.05em; margin-bottom: 6px; }
.stat b em { font-size: .5em; letter-spacing: -.02em; color: inherit; }
.stat span { font-size: 12.5px; color: var(--muted); }

/* ══ product screens ════════════════════════ */
.screens { display: grid; gap: 40px; justify-items: center; }
.screen { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.screen figcaption { text-align: center; max-width: 290px; }
.screen figcaption b { display: block; font: 600 17px/1.3 var(--disp); letter-spacing: -.04em; margin-bottom: 7px; }
.screen figcaption span { color: var(--muted); font-size: 14px; }

.phone__scr--chat { gap: 10px; }
.msg {
  max-width: 88%; padding: 10px 13px; border-radius: 15px 15px 15px 5px;
  background: #191C21; font-size: 11.5px; line-height: 1.45; color: #D6DCE2;
}
.msg--out {
  align-self: flex-end; border-radius: 15px 15px 5px 15px;
  background: rgba(59,130,246,.16); color: var(--accent); font-weight: 500;
}
.mini-card {
  position: relative; overflow: hidden;
  border-radius: 17px; padding: 14px;
  background:
    radial-gradient(108% 80% at 30% -16%, rgba(59,130,246,.62), transparent 66%),
    #02060F;
  background: linear-gradient(142deg, #3B82F6, #0AA6E6);
  color: var(--ink);
}
.mini-card__n { font: 600 12px/1 var(--disp); letter-spacing: .02em; }
.mini-card__f { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.mini-card__f b { font: 600 9.5px/1 var(--disp); letter-spacing: .05em; }
.mini-card__f span { font: 600 9.5px/1 var(--disp); opacity: .7; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.inp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; border-radius: 999px; background: #191C21;
  font-size: 11px; color: var(--dim);
}
.inp i { width: 17px; height: 17px; border-radius: 50%; background: var(--accent); flex: none; }
.row--last { margin-top: auto; background: rgba(255,255,255,.03); }
.chip { padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; color: var(--muted); }
.chip--on { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }

.nets { display: flex; gap: 6px; }
.net { padding: 8px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.net--on { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.1); color: var(--accent); font-weight: 600; }

.qr {
  display: block; width: 148px; height: 148px;
  padding: 11px; border-radius: 16px; background: #FFF;
  margin: 2px auto;
}

.addr {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-radius: 13px; background: #191C21;
}
.addr code { font-size: 10.5px; color: #C3CAD2; }
.addr__c { font-size: 10.5px; color: var(--accent); font-weight: 600; }
.phnote { font-size: 10px; color: var(--dim); line-height: 1.45; }

.spent { padding: 2px 4px; }
.spent span { font-size: 10.5px; color: var(--muted); }
.spent b { display: block; font: 700 26px/1.1 var(--disp); letter-spacing: -.05em; margin-top: 4px; }
.spent b small { font-size: 16px; color: var(--dim); }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; padding: 0 2px; }
.bars i { flex: 1; height: var(--h); border-radius: 5px; background: linear-gradient(180deg, var(--accent), rgba(59,130,246,.25)); opacity: .85; }

/* ══ islands ════════════════════════════════ */
.isle {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  transition: border-color .22s;
}
.isle h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 9px; }
.isle p { color: var(--muted); font-size: 14px; }
.isle--wide { padding: 30px 24px; }
article.isle:hover { border-color: var(--line-2); }

.isle__ic {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px; background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.22); color: var(--accent); margin-bottom: 16px;
}
.isle__ic svg { width: 21px; height: 21px; }


/* ══ marquee ════════════════════════════════ */
.marq {
  display: flex; flex-direction: column; gap: 12px; margin-top: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marq__row { overflow: hidden; }
.marq__track { display: flex; gap: 11px; width: max-content; animation: slide 46s linear infinite; }
.marq__track--rev { animation-direction: reverse; }
@keyframes slide { to { transform: translateX(-50%); } }
.marq__track span {
  flex: none; padding: 13px 21px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font: 500 14px/1 var(--disp); color: #C0C7CF; letter-spacing: -.035em;
}

/* ══ steps ══════════════════════════════════ */
.steps { display: grid; gap: 14px; }
.step { padding-top: 24px; }
.step__n {
  display: block; font: 700 40px/1 var(--disp); letter-spacing: -.06em;
  background: linear-gradient(150deg, var(--accent), rgba(59,130,246,.3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}

/* ══ pricing ════════════════════════════════ */
.prices { margin-bottom: 16px; }
.price { display: flex; flex-direction: column; gap: 5px; }
.price__k { font-size: 13px; color: var(--muted); }
.price__v { font: 700 clamp(24px, 5vw, 30px)/1 var(--disp); letter-spacing: -.05em; }
.price__n { font-size: 12px; color: var(--dim); }
.price--hl { border-color: rgba(59,130,246,.34); background: linear-gradient(165deg, rgba(59,130,246,.11), var(--surface)); }
.price--hl .price__v { color: var(--accent); }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl td { padding: 13px 0; border-bottom: 1px solid var(--line); }
.tbl td:first-child { color: var(--muted); }
.tbl td:last-child { text-align: right; font-weight: 600; font-family: var(--disp); letter-spacing: -.04em; white-space: nowrap; padding-left: 16px; }
.tbl tr:last-child td { border-bottom: 0; }
.note { color: var(--dim); font-size: 12.5px; margin-top: 14px; }

/* ══ accordion ══════════════════════════════ */
.acc { padding: 0; margin-bottom: 10px; }
.acc summary {
  list-style: none; cursor: pointer; padding: 19px 24px;
  font: 600 15px/1.4 var(--sans); display: flex; align-items: center; gap: 14px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; width: 9px; height: 9px; flex: none; margin-left: auto;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .22s;
}
.acc[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.acc[open] summary { color: var(--accent); }
.acc__body { padding: 0 24px 22px; }
.acc__body p { color: var(--muted); font-size: 14px; }
.acc--wide { margin-top: 6px; }

/* ══ restrictions ═══════════════════════════ */
.bans { display: grid; gap: 12px; }
.ban {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  border-left: 2px solid rgba(255,90,90,.5);
}
.ban h3 { font-size: 15.5px; margin-bottom: 8px; }
.ban p { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.codes { display: flex; flex-wrap: wrap; gap: 6px; }
.codes span {
  padding: 5px 9px; border-radius: 7px;
  background: rgba(255,90,90,.1);
  border: 1px solid rgba(255,90,90,.24);
  color: #FF9A9A;
  font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}
.lim-geo {
  margin-top: 20px; padding: 16px 20px;
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  color: var(--muted); font-size: 13.5px;
}


/* ══ legal documents ════════════════════════ */
.doc { padding-block: 120px 90px; }
.doc__crumb { font-size: 13px; color: var(--dim); margin-bottom: 18px; }
.doc__crumb a { color: var(--muted); }
.doc__crumb a:hover { color: var(--accent); }

.doc h1 { font-size: clamp(28px, 5.4vw, 42px); line-height: 1.1; margin-bottom: 12px; }
.doc__meta { font-size: 13.5px; color: var(--dim); margin-bottom: 28px; }
.doc__lead { font-size: 17px; line-height: 1.6; color: #C9D0D8; margin-bottom: 36px; }

.doc__toc {
  display: grid; gap: 9px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  margin-bottom: 56px;
}
.doc__toc a { font-size: 14px; color: var(--muted); transition: color .18s; }
.doc__toc a:hover { color: var(--accent); }

.doc section { margin-bottom: 48px; scroll-margin-top: 92px; }
.doc h2 {
  font-size: clamp(20px, 3.4vw, 25px);
  line-height: 1.25;
  margin-bottom: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.doc h3 { font-size: 16.5px; margin: 26px 0 10px; color: #E3E8ED; }
.doc p { color: #AEB6BF; font-size: 15.5px; line-height: 1.72; margin-bottom: 14px; }
.doc p b, .doc li b { color: var(--txt); font-weight: 600; }
.doc a:not(.logo):not(.doc__crumb a) { color: var(--accent); }
.doc a[href^="http"]:hover, .doc a[href^="mailto"]:hover { text-decoration: underline; }

.doc ul { margin: 0 0 18px; display: grid; gap: 9px; }
.doc li {
  position: relative;
  padding-left: 22px;
  color: #AEB6BF;
  font-size: 15.5px;
  line-height: 1.6;
}
.doc li::before {
  content: '';
  position: absolute; left: 2px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(59,130,246,.5);
}

.doc__note {
  padding: 16px 20px;
  border-left: 2px solid rgba(59,130,246,.45);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(59,130,246,.05);
  font-size: 14.5px !important;
  margin-bottom: 16px;
}

.doc__tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.doc__tbl th {
  text-align: left; font-weight: 600; color: var(--txt);
  padding: 0 14px 11px 0; border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.doc__tbl td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); color: #AEB6BF; vertical-align: top; }
.doc__tbl tr:last-child td { border-bottom: 0; }
.doc__tbl td:last-child, .doc__tbl th:last-child { padding-right: 0; }

@media (max-width: 640px) {
  .doc__tbl, .doc__tbl tbody, .doc__tbl tr, .doc__tbl td { display: block; width: 100%; }
  .doc__tbl thead { display: none; }
  .doc__tbl tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .doc__tbl td { border: 0; padding: 2px 0; }
  .doc__tbl td:first-child { color: var(--txt); font-weight: 600; }
  .doc__tbl td:last-child { color: var(--dim); font-size: 13px; }
}

/* ══ footer ═════════════════════════════════ */
.foot { position: relative; background: transparent; padding-block: 10px 50px; }
.foot__in { display: grid; gap: 20px; }
.foot__legal { color: var(--dim); font-size: 12px; line-height: 1.7; max-width: 640px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; color: var(--muted); }
.foot__links a:hover { color: var(--accent); }
.foot__c { font-size: 12px; color: #4C535C; }

/* ══ tablet ═════════════════════════════════ */
@media (min-width: 720px) {
  :root { --pad: 28px; }
  .sec { padding-block: 100px; }
  .fl--gpay { display: block; top: 24%; left: -2%; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .bans { grid-template-columns: repeat(2, 1fr); }
  .strip__in { grid-template-columns: repeat(4, 1fr); }
  .stat { border-top: 0; border-left: 1px solid var(--line); }
  .stat:first-child { border-left: 0; }
  .screens { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .isle { padding: 26px; }
  .isle--wide { padding: 38px 34px; }
  .final { padding: 74px 40px; }
  .foot__in { grid-template-columns: 1fr auto; align-items: start; }
  .foot__legal { grid-column: 1; }
  .foot__links { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}

/* ══ desktop ════════════════════════════════ */
@media (min-width: 1010px) {
  .nav__links, .nav__sep { display: flex; }

  .hero { padding-top: 138px; padding-bottom: 44px; }
  .hero__in { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 40px; }
  .hero h1 { letter-spacing: -.045em; }
  .hero .phone { max-width: 292px; }

  .fl--apple { top: 1%;    right: calc(50% + 112px); left: auto; }
  .fl--gpay  { top: 30%;   right: calc(50% + 176px); left: auto; }
  .fl--push  { bottom: 1%; right: calc(50% + 128px); left: auto; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .bans { grid-template-columns: repeat(3, 1fr); }
  .screens { gap: 34px; }
}

/* the two right-hand chips only fit once there is room beside the phone */
@media (min-width: 1200px) {
  .fl--usdt { display: block; top: 5%;    left: calc(50% + 178px); right: auto; }
  .fl--sec  { display: block; top: 43%;   left: calc(50% + 120px); right: auto; }
  .fl--ms   { display: block; bottom: 1%; left: calc(50% + 172px); right: auto; }
}

/* ══ motion / a11y ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ══ dawn ═══════════════════════════════════════════════════════════════
   The page ends on a planet's limb at first light: three parallax star
   layers over a dark sky, and one blue glow hugging the horizon. */
.cosmos {
  --horizon: 350px;              /* how high the limb sits above the bottom */
  position: relative;
  overflow: hidden;
  /* Pulled up over the section above and starting at zero alpha: whatever is
     behind shows through the top edge unchanged, so no join can appear. The
     paint only reaches full opacity around the point the section above ends. */
  margin-top: -360px;
  padding: 500px 0 0;
  background: linear-gradient(180deg,
    rgba(3,5,10,0)    0%,
    rgba(3,5,10,.42) 13%,
    rgba(5,8,16,.86) 25%,
    #06090F         36%,
    #04070D         60%,
    #010204         86%,
    #010204        100%);
}
.cosmos__sky {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.32) 17%, #000 38%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.32) 17%, #000 38%);
}

.cosmos__stars {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  animation: starRise 110s linear infinite;
}
.cosmos__stars::after {
  content: ''; position: absolute; top: 2000px; left: 0;
  width: inherit; height: inherit;
  box-shadow: inherit; border-radius: inherit;
}
.cosmos__stars--m { width: 1.6px; height: 1.6px; animation-duration: 165s; }
.cosmos__stars--l { width: 2.4px; height: 2.4px; animation-duration: 230s; }
@keyframes starRise { to { transform: translateY(-2000px); } }

.cosmos__planet {
  position: absolute; left: 50%; top: calc(100% - var(--horizon));
  width: 300%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(120% 60% at 50% 0%, #0A1220, #010204 42%);
  box-shadow: inset 0 1.5px 0 rgba(180,214,255,.42);
}
.cosmos__glow {
  position: absolute; left: 50%; top: calc(100% - var(--horizon));
  width: 112%; height: 280px;
  transform: translate(-50%, -88%);
  border-radius: 50%;
  background: radial-gradient(48% 100% at 50% 100%,
              rgba(140,196,255,.92), rgba(48,110,226,.4) 40%, transparent 70%);
  filter: blur(30px);
}

.cosmos__in { position: relative; text-align: center; padding-bottom: 210px; }
.cosmos__in h2 {
  font-size: clamp(24px, 5vw, 40px); line-height: 1.14;
  margin-bottom: 12px;
}
.cosmos__in p { color: #93A0B4; margin-bottom: 28px; font-size: 15.5px; }

@media (prefers-reduced-motion: reduce) { .cosmos__stars { animation: none; } }