.base-page {
  --x1: #6fa2ff; --x2: #0052ff; --x3: #003acc; --x4: #06257a;
  --xink: #f3f6ff; --xink-2: #dbe5ff;
  --xline: rgba(77, 141, 255, .18); --xline-2: rgba(77, 141, 255, .34);
  --night: #04060c;
  background: var(--night);
}
.base-page ::selection { background: var(--x2); color: #fff; }
.base-page .fx-scan::after { background: linear-gradient(to bottom, transparent, rgba(60, 130, 255, .04), transparent); }
.page-bg--base .haze i { background: radial-gradient(circle, rgba(0, 82, 255, .26), rgba(0, 82, 255, 0) 70%); }
.page-bg--base .haze i:nth-child(2) { background: radial-gradient(circle, rgba(0, 58, 204, .24), rgba(0, 58, 204, 0) 70%); }
.page-bg--base .haze i:nth-child(3) { background: radial-gradient(circle, rgba(219, 229, 255, .06), rgba(219, 229, 255, 0) 70%); }
.page-bg--base .page-bg__glow { background: radial-gradient(closest-side, rgba(0, 82, 255, .18), rgba(0, 58, 204, .05) 60%, transparent); }

.bx { padding: 110px 0 0; overflow: hidden; }
.bx-idx { color: var(--x1); display: flex; gap: 14px; }
.bx-idx span { color: var(--ink-3); }
.bx-idx em { font-style: normal; }
.base-page.is-live .bx-idx em { color: #46e38c; }
.bx-brand { display: flex; align-items: center; gap: 14px; }
.bx-sq { display: inline-block; flex: none; width: 44px; height: 44px; border-radius: 22%; background: var(--x2); box-shadow: 0 0 0 4px rgba(0, 82, 255, .14), 0 0 26px rgba(0, 82, 255, .55); }
.bx-sq--sm { width: 10px; height: 10px; border-radius: 22%; box-shadow: none; vertical-align: 0; margin: 0 2px; }

.bx-btn { background: linear-gradient(180deg, var(--x1), var(--x2) 55%, var(--x3)); color: #fff; border-color: var(--x2); box-shadow: 0 0 34px rgba(0, 82, 255, .42), inset 0 1px 0 rgba(220, 232, 255, .55); font-weight: 700; }
.bx-btn:hover { background: linear-gradient(180deg, #8fb8ff, var(--x2)); color: #fff; border-color: var(--x1); box-shadow: 0 0 46px rgba(0, 82, 255, .6), inset 0 1px 0 rgba(230, 240, 255, .65); }
.bx-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.bx-btn--ghost { border-color: var(--xline-2); color: var(--xink-2); }
.bx-btn--ghost:hover { border-color: var(--x1); box-shadow: 0 0 0 1px var(--x1) inset, 0 0 30px rgba(0, 82, 255, .22); color: var(--xink); }

.bx-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 70px); align-items: center; min-height: min(760px, calc(100svh - 110px)); padding-bottom: 30px; }
.bx-title { font-size: clamp(64px, 9.4vw, 158px); margin: 18px 0 14px; line-height: .82; color: var(--xink); text-shadow: 0 0 40px rgba(0, 82, 255, .16); }
.bx-blue { display: inline-block; background: linear-gradient(180deg, #e4edff 0 14%, var(--x1) 15%, var(--x2) 60%, var(--x3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(0, 82, 255, .5)); }
.bx-tag { font-size: clamp(22px, 2.3vw, 34px); color: var(--x1); margin: 0 0 20px; letter-spacing: .01em; }
.bx-sub { max-width: 600px; color: var(--ink-2); font-size: 17px; margin: 0 0 30px; }
.bx-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.bx-ca { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 22px; padding: 10px 14px; border: 1px solid var(--xline); background: rgba(0, 82, 255, .06); border-radius: 999px; transition: border-color .25s, background .25s; }
.bx-ca:not(:disabled):hover { border-color: var(--x1); background: rgba(0, 82, 255, .12); }
.bx-ca:disabled { cursor: default; }
.bx-ca .label { color: var(--x1); }
.bx-ca__v { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bx-ca__ok { color: var(--xink-2) !important; opacity: .7; }
.bx-ca:disabled .bx-ca__ok { display: none; }

.bx-stage { position: relative; display: grid; place-items: center; min-height: 560px; }
.bx-halo { position: absolute; width: min(520px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 82, 255, .38), rgba(0, 58, 204, .1) 55%, transparent); filter: blur(10px); }
.bx-card { position: relative; z-index: 2; width: min(340px, 82vw); padding: 24px; border-radius: 26px; border: 1px solid var(--xline-2); background: linear-gradient(160deg, rgba(20, 30, 60, .95), rgba(6, 9, 20, .98) 60%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 60px rgba(0, 82, 255, .22), inset 0 1px 0 rgba(160, 190, 255, .15); animation: bxfloat 6s ease-in-out infinite; }
@keyframes bxfloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(-1deg); } }
.bx-card__top { display: flex; align-items: center; gap: 14px; }
.bx-card__top img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #0a0f20, 0 0 0 5px var(--x2); }
.bx-card__top b { display: block; font-size: 20px; color: var(--xink); }
.bx-card__top span { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 700 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--x1); }
.bx-card__price { display: grid; gap: 4px; margin: 26px 0 16px; }
.bx-card__price .label { color: var(--ink-3); }
.bx-card__price b { font-size: 40px; color: var(--xink); font-variant-numeric: tabular-nums; }
.bx-card__spark { display: flex; align-items: flex-end; gap: 5px; height: 64px; margin-bottom: 20px; }
.bx-card__spark i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--x1), rgba(0, 82, 255, .15)); height: var(--h, 40%); transform-origin: bottom; animation: bxbar 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.bx-card__spark i:nth-child(1) { --h: 22%; } .bx-card__spark i:nth-child(2) { --h: 30%; --d: -.3s; } .bx-card__spark i:nth-child(3) { --h: 26%; --d: -.6s; } .bx-card__spark i:nth-child(4) { --h: 38%; --d: -.9s; }
.bx-card__spark i:nth-child(5) { --h: 34%; --d: -1.2s; } .bx-card__spark i:nth-child(6) { --h: 48%; --d: -1.5s; } .bx-card__spark i:nth-child(7) { --h: 44%; --d: -1.8s; } .bx-card__spark i:nth-child(8) { --h: 58%; --d: -2.1s; }
.bx-card__spark i:nth-child(9) { --h: 54%; --d: -2.4s; } .bx-card__spark i:nth-child(10) { --h: 70%; --d: -2.7s; } .bx-card__spark i:nth-child(11) { --h: 78%; --d: -3s; } .bx-card__spark i:nth-child(12) { --h: 92%; --d: -3.3s; }
@keyframes bxbar { 50% { transform: scaleY(.86); } }
.bx-card__buy { display: block; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, var(--x1), var(--x2)); color: #fff; text-align: center; font: 800 14px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 0 30px rgba(0, 82, 255, .45); }

.bx-recipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--xline); border-bottom: 1px solid var(--xline); margin-top: 20px; }
.bx-recipe > div { display: grid; gap: 8px; padding: 20px 18px; }
.bx-recipe > div + div { border-left: 1px solid var(--xline); }
.bx-recipe .label { color: var(--ink-3); }
.bx-recipe b { font-size: clamp(24px, 2.3vw, 36px); color: var(--xink-2); }

.bx-sec { margin-top: clamp(80px, 9vw, 130px); scroll-margin-top: 80px; }
.bx-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.bx-head h2 { font-size: clamp(48px, 6.4vw, 104px); margin: 12px 0 0; color: var(--xink); }
.bx-head p { max-width: 380px; margin: 0; color: var(--ink-2); font-size: 15px; }

.bx-board { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--xline); border: 1px solid var(--xline); }
.bx-board > * { min-width: 0; }
.bx-stat { display: grid; gap: 8px; align-content: start; padding: 22px 20px; background: linear-gradient(180deg, rgba(0, 82, 255, .07), rgba(4, 6, 12, .95) 70%); }
.bx-stat .label { color: var(--ink-3); }
.bx-stat b { font-size: clamp(30px, 2.8vw, 46px); color: var(--xink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bx-stat em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.bx-stat--big b { font-size: clamp(40px, 4vw, 68px); background: linear-gradient(180deg, #eef3ff 0 14%, var(--x1) 15%, var(--x2) 60%, var(--x3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx-meter { height: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; border-radius: 3px; }
.bx-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--x2), var(--x1)); box-shadow: 0 0 12px rgba(77, 141, 255, .7); transition: width .8s var(--ease); }

.bx-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--xline); border: 1px solid var(--xline); }
.bx-way { padding: 26px 24px 24px; background: linear-gradient(180deg, rgba(8, 12, 26, .96), rgba(4, 6, 12, .98)); }
.bx-way--main { background: linear-gradient(180deg, rgba(0, 82, 255, .14), rgba(4, 6, 12, .98) 75%); }
.bx-way .label { color: var(--x1); }
.bx-way h3 { margin: 10px 0 14px; font-size: clamp(28px, 2.6vw, 40px); color: var(--xink); }
.bx-way ol { margin: 0; padding-left: 18px; display: grid; gap: 9px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.bx-way b { color: var(--xink); }
.bx-way a { color: var(--x1); text-decoration: underline; text-underline-offset: 3px; }
.bx-fine { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-3); }

.bx-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--xline); border-bottom: 1px solid var(--xline); }
.bx-why > div { padding: 24px 22px; }
.bx-why > div + div { border-left: 1px solid var(--xline); }
.bx-why b { display: block; font-size: clamp(22px, 2vw, 30px); color: var(--xink-2); margin-bottom: 10px; }
.bx-why p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.bx-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--xline); border: 1px solid var(--xline); }
.bx-road li { padding: 24px 22px; background: rgba(4, 6, 12, .96); }
.bx-road li.is-now { background: linear-gradient(180deg, rgba(0, 82, 255, .16), rgba(4, 6, 12, .98) 80%); }
.bx-road .label { color: var(--ink-3); }
.bx-road li.is-now .label { color: var(--x1); }
.bx-road b { display: block; margin: 10px 0; font-size: clamp(28px, 2.6vw, 40px); color: var(--xink); }
.bx-road p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.bx-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 60px; align-items: center; }
.bx-help h2 { font-size: clamp(48px, 6.4vw, 104px); margin: 12px 0 16px; color: var(--xink); }
.bx-help p { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: 0 0 24px; max-width: 520px; }
.bx-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--xline); border: 1px solid var(--xline); counter-reset: s; }
.bx-steps li { counter-increment: s; position: relative; padding: 18px 20px 18px 64px; background: rgba(4, 6, 12, .96); color: var(--ink-2); line-height: 1.5; }
.bx-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 20px; top: 20px; font: 800 13px var(--f-ui); color: var(--x1); }
.bx-steps b { color: var(--xink); }

.bx-links { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 60px; padding-bottom: 10px; }
.bx-links[hidden] { display: none; }
.bx-links a { color: var(--ink-2); font: 700 12px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.bx-links a:hover { color: var(--xink); }

@media (max-width: 960px) {
  .bx-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bx-stage { min-height: 420px; order: -1; }
  .bx-recipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-recipe > div:nth-child(4) { border-left: 0; }
  .bx-recipe > div:nth-child(n+4) { border-top: 1px solid var(--xline); }
  .bx-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-stat--big { grid-column: 1 / -1; }
  .bx-ways, .bx-road, .bx-help { grid-template-columns: minmax(0, 1fr); }
  .bx-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-why > div:nth-child(3) { border-left: 0; }
  .bx-why > div:nth-child(n+3) { border-top: 1px solid var(--xline); }
  .bx-head { flex-direction: column; align-items: start; }
}
@media (max-width: 560px) {
  .bx { padding-top: 90px; }
  .bx-stage { min-height: 360px; }
  .bx-recipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-recipe > div:nth-child(odd) { border-left: 0; }
  .bx-recipe > div:nth-child(even) { border-left: 1px solid var(--xline); }
  .bx-recipe > div:nth-child(n+3) { border-top: 1px solid var(--xline); }
  .bx-why { grid-template-columns: minmax(0, 1fr); }
  .bx-why > div + div { border-left: 0; border-top: 1px solid var(--xline); }
  .bx-ctas .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .bx-card, .bx-card__spark i { animation: none; } }
.bx-ways--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .bx-ways--two { grid-template-columns: minmax(0, 1fr); } }

.bx-swap { animation: none; transform: none; width: min(380px, 100%); }
.bx-swap .bx-card__price { margin: 20px 0 16px; }
.bx-swap .bx-card__price b { font-size: 30px; }
.bx-field { display: grid; gap: 8px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--xline); border-radius: 14px; background: rgba(0, 82, 255, .05); transition: border-color .2s; }
.bx-field:focus-within { border-color: var(--x1); }
.bx-field--out { background: rgba(255, 255, 255, .02); }
.bx-field .label { color: var(--ink-3); }
.bx-field__row { display: flex; justify-content: space-between; align-items: center; }
.bx-field__in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-field__in input, .bx-field__in output { flex: 1; min-width: 0; padding: 0; border: 0; background: none; outline: 0; color: var(--xink); font: 700 26px var(--f-ui); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-field__in input::placeholder { color: rgba(219, 229, 255, .25); }
.bx-field__in b { flex: none; font: 800 13px var(--f-ui); letter-spacing: .14em; color: var(--x1); }
.bx-field em { font-style: normal; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.bx-field em.is-warn { color: #ffb4a8; }
.bx-max { padding: 3px 8px; border: 1px solid var(--xline-2); border-radius: 6px; color: var(--x1) !important; background: none; cursor: pointer; }
.bx-max:hover { border-color: var(--x1); color: var(--xink) !important; }
.bx-pick { display: grid; gap: 6px; margin-bottom: 10px; }
.bx-pick[hidden] { display: none; }
.bx-pick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--xline-2); border-radius: 12px; background: rgba(0, 82, 255, .06); color: var(--xink); font: 600 14px var(--f-ui); text-align: left; cursor: pointer; }
.bx-pick button:hover { border-color: var(--x1); background: rgba(0, 82, 255, .14); }
.bx-pick img { width: 22px; height: 22px; border-radius: 5px; }
.bx-swap .bx-card__buy { width: 100%; margin-top: 6px; border: 0; cursor: pointer; transition: filter .2s, box-shadow .2s, opacity .2s; }
.bx-swap .bx-card__buy:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 44px rgba(0, 82, 255, .6); }
.bx-swap .bx-card__buy:disabled { opacity: .5; cursor: default; box-shadow: none; }
.bx-add { display: block; width: 100%; margin-top: 12px; padding: 4px; border: 0; background: none; color: var(--x1) !important; cursor: pointer; }
.bx-add[hidden] { display: none; }
.bx-add:hover { color: var(--xink) !important; }
.bx-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.bx-modal[hidden] { display: none; }
.bx-modal__scrim { position: fixed; inset: 0; background: rgba(2, 4, 10, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bx-modal .bx-swap { position: relative; z-index: 1; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95), 0 0 70px rgba(0, 82, 255, .28), inset 0 1px 0 rgba(160, 190, 255, .15); }
.bx-modal__x { position: absolute; top: 12px; right: 16px; padding: 0 4px; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.bx-modal__x:hover { color: var(--xink); }
.bx-hold { color: var(--ink-3) !important; }
.bx-stage .bx-card { cursor: pointer; }
.bf--tx.bf--base { background: rgba(2, 4, 10, .7); }
.bf--tx.bf--base .bf__box { background: linear-gradient(180deg, #0d1426, #05070e); border-color: rgba(77, 141, 255, .4); box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 50px rgba(0, 82, 255, .2); }
.bf--tx.bf--base li.is-on { background: rgba(0, 82, 255, .12); }
.bf--tx.bf--base li.is-on .bf__dot { animation-name: bfPulseBase; }
.bf--tx.bf--base li.is-done .bf__dot::after { border-color: #fff; }
.bf--tx.bf--base .bf__btn:not(.bf__btn--ghost) { color: #fff; background: linear-gradient(180deg, var(--x1), var(--x2)); }
.bf--tx.bf--base.is-err .bf__box::before { background: #ff6b5a; }
@keyframes bfPulseBase { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 123, 255, .55); background: rgba(47, 123, 255, .15); } 50% { box-shadow: 0 0 0 5px rgba(47, 123, 255, 0); background: rgba(47, 123, 255, .45); } }
@media (prefers-reduced-motion: reduce) { .bf--tx.bf--base li.is-on .bf__dot { background: rgba(47, 123, 255, .35); } }