/* /moneybutton — copy trading page. Everything on the page is drawn from the app's own pieces (cards, rows, chips,
   the copy screen, pushes, coins) in the app palette; motion runs only while a scene is on screen. */
.mb {
  --bg: #050505; --s1: #11141B; --s2: #151924; --s3: #191E2B; --s4: #1F2535;
  --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.05);
  --tx: #F9F9FB; --tx2: #C9CFDB; --mut: #9AA3B6; --dim: #7C8498;
  --blue: #2767E5; --blue2: #3290FF; --green: #30BF73; --red: #F03D3D; --gold: #F5CC3B; --orange: #F46E42;
  --r: 16px;
  color: var(--tx); font-family: 'Inter', system-ui, sans-serif; overflow-x: clip; position: relative;
  font-feature-settings: "tnum" 0;
}
.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }
.mb svg { display: inline-block; max-width: none !important; max-height: none !important; } /* the shell caps svg without width at 48px */
.mb b, .mb em { font-style: normal; }
.mb u { text-decoration: none; }
.mb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; }
.mb .g { color: var(--green); }
.mb .y { color: var(--gold); }
.mb [data-n], .mb-row b, .mb-pnl, .mb-chart-px, .mb-split-r b, .mb-split-r em, .mb-fd time, .mb-fd em { font-variant-numeric: tabular-nums; }

/* ───────── type ───────── */
.mb-eyebrow, .mb-kicker { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--blue2); letter-spacing: .01em; }
.mb-kicker-gold { color: var(--gold); }
.mb-h1 { margin: 0; }
.mb-h1-name {
  display: block; font-size: clamp(56px, 8.4vw, 104px); line-height: .95; font-weight: 800; letter-spacing: -.045em;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, #9cc4ff 48%, #fff 58%, #fff 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbSheen 7s ease-in-out infinite;
  padding-bottom: .06em;
}
@keyframes mbSheen { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.mb-h1-line { display: block; margin-top: 18px; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.22; font-weight: 600; letter-spacing: -.015em; color: var(--tx2); max-width: 560px; }
.mb-lead { margin: 22px 0 0; font-size: 17px; line-height: 1.6; color: var(--mut); max-width: 540px; }
.mb-h2 { margin: 0; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; max-width: 860px; }
.mb-sub { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--mut); max-width: 700px; }
.mb-fine { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #858DA0; }
.mb-risk { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--dim); }

/* ───────── buttons (page) ───────── */
.mb-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mb-btn:active { transform: translateY(1px) scale(.99); }
.mb-btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px -10px rgba(39,103,229,.8); }
.mb-btn-primary:hover { background: #2f72f2; }
.mb-btn-ghost { color: var(--tx); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.mb-btn-ghost:hover { border-color: rgba(255,255,255,.3); }
.mb-btn-gold { color: #0B0B10; background: var(--gold); box-shadow: 0 10px 30px -12px rgba(245,204,59,.7); }
.mb-btn-gold:hover { background: #ffd84f; }
.mb-btn:focus-visible, .mb-store:focus-visible, .mb-jump a:focus-visible, .mb-qa summary:focus-visible, .mb a.mb-key:focus-visible { outline: 2px solid var(--blue2); outline-offset: 3px; }

/* ───────── app primitives ───────── */
.mb-app {
  position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 16px 28px rgba(0,0,0,.55); padding: 16px; color: var(--tx); font-size: 13px; line-height: 1.35;
}
.mb-app-h { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.mb-app-l { margin: 14px 0 8px; font-size: 12px; color: var(--mut); font-weight: 600; }
.mb-app-line { margin: 12px 0 0; font-size: 13px; color: var(--tx2); }
.mb-app-fine { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--mut); }
.mb-app-hint { display: flex; gap: 9px; align-items: flex-start; margin: 14px 2px 0; font-size: 13px; line-height: 1.45; color: var(--tx2); }
.mb-app-hint svg { width: 17px; height: 17px; flex: none; color: var(--mut); margin-top: 1px; }
.mb-app-hint svg.y { color: var(--gold); }
.mb-rows { background: var(--s3); border-radius: 12px; padding: 0 14px; }
.mb-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.mb-row + .mb-row { border-top: 1px solid var(--line2); }
.mb-row > span { color: var(--mut); font-size: 13.5px; min-width: 0; }
.mb-row > span small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--dim); }
.mb-row > b { font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
.mb-row > b u { color: var(--mut); font-size: 12px; font-weight: 500; }
.mb-row > b em { font-size: 18px; }
.mb-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--s4); display: inline-grid; place-items: center; flex: none; color: #8E97AB; }
.mb-ava svg { width: 18px; height: 18px; }
.mb-ava-ring { box-shadow: 0 0 0 2px rgba(50,144,255,.55); }
.mb-ava-lg { width: 54px; height: 54px; box-shadow: 0 0 0 2px rgba(39,103,229,.6); }
.mb-ava-lg svg { width: 26px; height: 26px; }
.mb-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mb-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mb-pill-on { color: var(--green); background: rgba(48,191,115,.14); border: .8px solid rgba(48,191,115,.35); }
.mb-pill.sm { height: 22px; font-size: 11px; padding: 0 8px; }
.mb-pill-idle { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.mb-side { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--green); background: rgba(48,191,115,.14); }
.mb-link { display: inline-flex; align-items: center; gap: 4px; color: var(--blue2); font-weight: 600; font-size: 14px; }
.mb-link svg { width: 15px; height: 15px; }

/* ───────── the money key ───────── */
.mb-key { display: inline-block; padding: 7px; border-radius: 19px; background: #07080D; box-shadow: inset 0 2px 7px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06), 0 24px 40px -18px rgba(39,103,229,.55); text-decoration: none; }
.mb-key-cap {
  position: relative; display: block; overflow: hidden; padding: 17px 30px 16px; border-radius: 13px; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap;
  background: linear-gradient(180deg, #4C8AF7 0%, #2D6EEA 45%, #2461D8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 0 #2459C9, 0 2px 0 #2254C0, 0 3px 0 #1F4EB4, 0 4px 0 #1C48A8, 0 5px 0 #1A429C, 0 6px 0 #173C8F, 0 7px 0 #153784, 0 8px 0 #12307A,
    0 16px 26px -6px rgba(10,30,90,.9);
  transform: translateY(0); transition: transform .14s cubic-bezier(.3,.7,.4,1), box-shadow .14s cubic-bezier(.3,.7,.4,1);
}
.mb-key-cap::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); animation: mbKeySweep 4.6s ease-in-out infinite; }
@keyframes mbKeySweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.mb-key-label { position: relative; z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.mb-key.is-down .mb-key-cap, a.mb-key:active .mb-key-cap {
  transform: translateY(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 0 #2459C9, 0 2px 0 #1F4EB4, 0 6px 14px -4px rgba(10,30,90,.9), 0 0 34px 2px rgba(50,144,255,.55);
}
a.mb-key:hover .mb-key-cap { filter: brightness(1.06); }

/* ───────── HERO ───────── */
.mb-hero { position: relative; padding: 56px 0 40px; }
.mb-hero-sky { position: absolute; inset: -80px 0 0; pointer-events: none; overflow: hidden; }
.mb-hero-sky::before { content: ""; position: absolute; width: 900px; height: 900px; right: -220px; top: -240px; background: radial-gradient(closest-side, rgba(39,103,229,.22), transparent 70%); }
.mb-hero-sky::after { content: ""; position: absolute; width: 700px; height: 700px; left: -260px; top: 120px; background: radial-gradient(closest-side, rgba(48,191,115,.07), transparent 70%); }
.mb-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 40px; align-items: center; }
.mb-hero-note { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--dim); max-width: 520px; }
.mb-hero-scene { margin: 0; }
.mb-hero-scene figcaption { margin-top: 8px; font-size: 12px; color: var(--dim); text-align: center; }

.mb-stage { position: relative; height: 540px; perspective: 1500px; perspective-origin: 50% 40%; }
.mb-plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 9deg)) rotateY(var(--ry, -13deg)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.mb-plane > * { position: absolute; }
.mb-src { left: 0; top: 70px; width: 300px; transform: translateZ(var(--zs, -50px)); padding: 14px; }
.mb-src-head { display: flex; align-items: center; gap: 10px; }
.mb-src-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-src-who b { font-size: 14px; }
.mb-src-who small { font-size: 11px; line-height: 1.3; color: var(--mut); }
.mb-src-who small em { color: var(--green); font-weight: 600; }
.mb-src-res { font-weight: 700; color: var(--green); font-size: 14px; }
.mb-chart { position: relative; margin-top: 12px; height: 132px; border-radius: 10px; background: linear-gradient(180deg, #0D1017, #10131B); overflow: hidden; }
.mb-candles { width: 100%; height: 100%; display: block; }
.mb-candles .up { fill: #30BF73; stroke: #30BF73; }
.mb-candles .dn { fill: #F03D3D; stroke: #F03D3D; }
.mb-candles line { stroke-width: 1; }
.mb-candles .grid { stroke: rgba(255,255,255,.04); stroke-width: 1; }
.mb-candles .entry { stroke: rgba(50,144,255,.75); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .4s; }
.mb-stage.buy .mb-candles .entry { opacity: 1; }
.mb-chart-px { position: absolute; right: 6px; top: 6px; font-size: 10.5px; font-weight: 700; color: #0B0B10; background: var(--green); padding: 2px 5px; border-radius: 4px; }
.mb-chart-buy { position: absolute; left: 58%; white-space: nowrap; bottom: 10px; font-size: 11px; font-weight: 700; color: #fff; background: var(--blue); padding: 4px 8px; border-radius: 7px; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.3,1.4,.5,1); box-shadow: 0 6px 16px -4px rgba(39,103,229,.8); }
.mb-chart-buy::after { content: ""; position: absolute; left: 12px; top: 100%; border: 5px solid transparent; border-top-color: var(--blue); }
.mb-stage.buy .mb-chart-buy { opacity: 1; transform: none; }
.mb-src-pos { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: var(--s3); font-size: 12px; color: var(--tx2); opacity: .25; transition: opacity .4s; }
.mb-src-pos span, .mb-src-pos b { white-space: nowrap; }
.mb-src-pos b { margin-right: 4px; margin-left: auto; color: var(--mut); font-weight: 600; font-size: 11.5px; }
.mb-stage.buy .mb-src-pos { opacity: 1; }

.mb-wire { left: 262px; top: 150px; width: 230px; height: 128px; transform: translateZ(-10px); overflow: visible; pointer-events: none; }
.mb-wire path { fill: none; stroke-linecap: round; }
.mb-wire.m { display: none; }
.mb-wire-base { stroke: rgba(50,144,255,.16); stroke-width: 2; stroke-dasharray: 2 6; }
.mb-wire-run { stroke: url(#mbWire); stroke-width: 3; stroke-dasharray: 22 100; stroke-dashoffset: 22; opacity: 0; filter: drop-shadow(0 0 6px rgba(50,144,255,.9)); }
.mb-stage.wire .mb-wire-run { opacity: 1; animation: mbWire 1.1s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes mbWire { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -100; } }
.mb-lag { left: 384px; top: 160px; transform: translateZ(10px); font-size: 12px; font-weight: 700; color: var(--blue2); background: rgba(50,144,255,.12); border: .8px solid rgba(50,144,255,.35); border-radius: 8px; padding: 4px 9px; opacity: 0; transition: opacity .4s; }
.mb-stage.wire .mb-lag { opacity: 1; }

.mb-dst { right: 0; top: 286px; width: 290px; transform: translateZ(var(--zd, 40px)); padding: 14px; }
.mb-dst-head { position: relative; height: 24px; display: flex; align-items: center; }
.mb-dst-head .mb-pill-on { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.mb-dst-head .mb-pill-idle { transition: opacity .3s; }
.mb-stage.on .mb-dst-head .mb-pill-on { opacity: 1; transform: none; }
.mb-stage.on .mb-dst-head .mb-pill-idle { opacity: 0; }
.mb-dst-acc { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.mb-dst-bal { margin-top: 6px; font-size: 13px; color: var(--mut); }
.mb-dst-bal b { font-size: 22px; color: var(--gold); font-weight: 700; margin-right: 2px; }
.mb-dst-bal small { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.mb-dst-pos { margin-top: 12px; padding: 10px; border-radius: 10px; background: var(--s3); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .5s cubic-bezier(.2,1.2,.4,1), box-shadow .6s; }
.mb-stage.fill .mb-dst-pos { opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(50,144,255,.45), 0 0 24px -4px rgba(50,144,255,.6); }
.mb-stage.tick .mb-dst-pos { box-shadow: 0 0 0 1px rgba(255,255,255,.05); }
.mb-dst-pos-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.mb-pnl { margin-left: auto; font-size: 13px; color: var(--mut); }
.mb-pnl.g { color: var(--green); }
.mb-dst-pos-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--mut); }

.mb-hero-scene .mb-key { left: 24px; bottom: 14px; transform: translateZ(var(--zk, 90px)); }
.mb-push { right: -6px; top: 0; width: 318px; display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: rgba(30,35,48,.92); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 20px 40px -10px rgba(0,0,0,.8); transform: translateZ(var(--zp, 120px)) translateY(-14px); opacity: 0; transition: opacity .4s, transform .6s cubic-bezier(.2,1.25,.4,1); }
@supports (backdrop-filter: blur(1px)) { .mb-push { background: rgba(30,35,48,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
.mb-stage.push .mb-push { opacity: 1; transform: translateZ(var(--zp, 120px)); }
.mb-push-ic { width: 32px; height: 32px; border-radius: 9px; overflow: hidden; flex: none; background: #2767E5; }
.mb-push-ic img { width: 100%; height: 100%; display: block; }
.mb-push-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.mb-push-txt small { font-size: 10.5px; color: var(--mut); text-transform: none; }
.mb-push-txt b { font-size: 13px; }
.mb-push-txt span { color: var(--tx2); }

.mb-jump { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line2); }
.mb-jump a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--tx2); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .2s; }
.mb-jump a span { font-size: 12px; color: var(--dim); font-weight: 700; }
.mb-jump a:hover { color: #fff; }
.mb-jump .mb-jump-gold { color: var(--gold); }

/* ───────── sections ───────── */
.mb-sec { position: relative; padding: 120px 0 40px; scroll-margin-top: 80px; }
.mb-head { margin-bottom: 64px; }

/* steps */
.mb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 120px; }
.mb-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.mb-step-txt { max-width: 480px; }
.mb-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; font-weight: 800; color: var(--blue2); background: rgba(50,144,255,.14); border: .8px solid rgba(50,144,255,.35); transition: background .5s, color .5s, box-shadow .5s; }
.mb-step.in .mb-step-n { background: var(--blue2); color: #0B0B10; box-shadow: 0 0 22px -2px rgba(50,144,255,.7); }
.mb-step h3 { margin: 18px 0 0; font-size: 28px; line-height: 1.15; font-weight: 750; letter-spacing: -.025em; }
.mb-step p { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: #AEB5C4; }
.mb-step p.mb-fine { font-size: 14px; color: #858DA0; }
.mb-frag { position: relative; perspective: 1400px; max-width: 470px; justify-self: center; width: 100%; }
.mb-frag > .mb-app, .mb-frag > div { transform: rotateX(calc(var(--p, .5) * 10deg - 5deg)) rotateY(calc(var(--p, .5) * -6deg + 3deg)); transition: transform .2s linear; }
.mb-frag::before { content: ""; position: absolute; inset: 10% 6% -6%; border-radius: 40px; background: radial-gradient(closest-side, rgba(39,103,229,.16), transparent); filter: blur(10px); z-index: -1; }

/* reveal (JS adds .in; without JS everything is visible) */
.mb-js [data-mb-reveal] .mb-frag > *, .mb-js [data-mb-reveal] .mb-step-txt { opacity: 0; translate: 0 34px; transition: opacity .7s ease, translate .9s cubic-bezier(.2,.8,.2,1); }
.mb-js [data-mb-reveal] .mb-frag > :nth-child(2) { transition-delay: .12s; }
.mb-js [data-mb-reveal].in .mb-frag > *, .mb-js [data-mb-reveal].in .mb-step-txt { opacity: 1; translate: 0 0; }

/* f1 */
.mb-f1 { display: grid; gap: 14px; }
.mb-tcard-top { display: flex; gap: 14px; align-items: center; }
.mb-tcard-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mb-tcard-who b { font-size: 19px; letter-spacing: -.01em; }
.mb-tcard-who span { font-size: 13.5px; color: var(--tx2); }
.mb-tcard-who small { font-size: 12px; color: var(--mut); }
.mb-tcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--s3); }
.mb-tcard-stats span { display: block; font-size: 12px; color: var(--mut); }
.mb-tcard-stats b { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; }
.mb-who { padding: 14px 10px 8px; }
.mb-who .mb-app-h { margin-left: 6px; }
.mb-who-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; transition: background .5s, box-shadow .5s; }
.mb-who-row .nm { flex: 1; display: flex; flex-direction: column; font-weight: 600; font-size: 13.5px; }
.mb-who-row small { font-weight: 500; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.mb-who-row b { font-size: 14px; }
.mb-step.in .mb-who-row.on { background: rgba(39,103,229,.12); box-shadow: inset 0 0 0 1px rgba(50,144,255,.45); transition-delay: .8s; }

/* f2 */
.mb-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-seg2-o { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); transition: border-color .5s, background .5s; }
.mb-seg2-o b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mb-seg2-o b i { width: 7px; height: 7px; border-radius: 50%; }
.mb-seg2-o.d b i { background: var(--green); }
.mb-seg2-o.x b i { background: var(--gold); }
.mb-seg2-o span { display: block; margin-top: 4px; font-size: 12px; color: var(--mut); }
.mb-seg2-o.d b { color: var(--mut); }
.mb-step.in .mb-seg2-o.x { border-color: rgba(50,144,255,.85); background: #0F1A33; transition-delay: .6s; }
.mb-accs { display: grid; gap: 8px; }
.mb-acc { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line2); transition: border-color .5s, background .5s; }
.mb-acc img { flex: none; border-radius: 6px; }
.mb-acc > span { flex: 1; display: flex; flex-direction: column; font-weight: 600; font-size: 13.5px; }
.mb-acc small { font-weight: 500; color: var(--mut); font-size: 11.5px; }
.mb-acc b { font-size: 13.5px; }
.mb-acc b u { font-size: 11px; color: var(--mut); font-weight: 500; }
.mb-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid #3A4256; position: relative; flex: none; transition: border-color .4s; }
.mb-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue2); transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.mb-step.in .mb-acc.on { border-color: rgba(50,144,255,.85); background: #0F1A33; transition-delay: 1s; }
.mb-step.in .mb-acc.on .mb-radio { border-color: var(--blue2); transition-delay: 1s; }
.mb-step.in .mb-acc.on .mb-radio::after { transform: scale(1); transition-delay: 1.1s; }
.mb-js .mb-acc { opacity: 0; translate: 12px 0; transition: opacity .5s, translate .6s cubic-bezier(.2,.8,.2,1), border-color .5s, background .5s; }
.mb-js .mb-step.in .mb-acc { opacity: 1; translate: 0 0; }
.mb-step.in .mb-acc:nth-child(2) { transition-delay: .1s; } .mb-step.in .mb-acc:nth-child(3) { transition-delay: .18s; }
.mb-step.in .mb-acc:nth-child(4) { transition-delay: .26s; } .mb-step.in .mb-acc:nth-child(5) { transition-delay: .34s; }

/* f3 */
.mb-share { margin-top: 14px; padding: 16px 14px 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line2); }
.mb-share-line { display: grid; grid-template-columns: 136px 1fr 40px; gap: 12px; align-items: center; }
.mb-share-line + .mb-share-line { margin-top: 14px; }
.mb-share-l { font-size: 12.5px; color: var(--tx2); font-weight: 600; line-height: 1.25; }
.mb-share-l small { display: block; font-size: 11px; color: var(--mut); font-weight: 500; }
.mb-share-bar { position: relative; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, #232A3B 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); overflow: hidden; }
.mb-share-bar .t { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #3290FF, #6AB0FF); box-shadow: 0 0 12px rgba(50,144,255,.7); transition: width .9s cubic-bezier(.2,.8,.2,1) .5s; }
.mb-share-line.you .mb-share-bar .t { background: linear-gradient(90deg, #E9B820, #F5CC3B); box-shadow: 0 0 12px rgba(245,204,59,.6); transition-delay: 1.2s; }
.mb-step.in .mb-share-bar .t { width: var(--w); }
.mb-share-line b { font-size: 14px; text-align: right; }
.mb-share-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.08); font-size: 12.5px; color: var(--mut); }
.mb-share-sum svg { width: 16px; height: 16px; color: var(--dim); }
.mb-share-sum b { color: var(--tx); }
.mb-share-sum b.y { color: var(--gold); }

/* f4 */
.mb-chips { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--s3); overflow: hidden; }
.mb-chip { position: relative; z-index: 1; flex: 1 0 auto; padding: 9px 9px; text-align: center; font-size: 13px; font-weight: 600; color: var(--tx2); border-radius: 9px; white-space: nowrap; transition: color .3s; }
.mb-chip:first-of-type { flex-grow: 2; }
.mb-chip.is-sel { color: #fff; }
.mb-chip-sel { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 9px; background: #2B3245; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: left .7s cubic-bezier(.5,0,.2,1), width .7s cubic-bezier(.5,0,.2,1); }
.mb-stop { margin-top: 16px; padding: 4px 14px 14px; border-radius: 12px; background: var(--s3); }
.mb-stop .mb-row { padding: 12px 0 6px; }
.mb-slider { position: relative; height: 34px; margin: 4px 10px 0; }
.mb-slider-track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: #2A3142; }
.mb-slider-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--k, 0%); border-radius: 2px; background: #fff; }
.mb-slider-dot { position: absolute; top: 12px; left: var(--x); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #4A5266; }
.mb-slider-knob { position: absolute; top: 5px; left: var(--k, 0%); width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 0 5px rgba(255,255,255,.08); }
.mb-slider-l { display: flex; justify-content: space-between; margin: 2px -2px 0; font-size: 12px; color: var(--mut); font-weight: 600; }
.mb-slider-l .is-on { color: #fff; }
.mb-slider-l span:last-child { text-align: right; }

/* f5 */
.mb-buyt-stage { position: relative; height: 150px; display: grid; place-items: center; margin-top: 6px; perspective: 600px; }
.mb-buyt-stage::before { content: ""; position: absolute; width: 180px; height: 26px; bottom: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(39,103,229,.35), transparent); }
.mb-buyt-lock { position: absolute; left: calc(50% + 22px); top: 26px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #0B0B10; background: var(--gold); box-shadow: 0 8px 18px -4px rgba(245,204,59,.6); transform: translateY(-30px) scale(.6); opacity: 0; transition: transform .6s cubic-bezier(.3,1.5,.5,1) .7s, opacity .3s .7s; }
.mb-buyt-lock svg { width: 19px; height: 19px; }
.mb-step.in .mb-buyt-lock { transform: none; opacity: 1; }
.mb-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-fork-o { padding: 12px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line2); }
.mb-fork-o span { display: block; font-size: 12px; font-weight: 700; }
.mb-fork-o.minus span { color: var(--red); }
.mb-fork-o.plus span { color: var(--green); }
.mb-fork-o b { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--tx2); line-height: 1.4; }
.mb-js .mb-fork-o { opacity: 0; translate: 0 10px; transition: opacity .5s 1.2s, translate .6s 1.2s; }
.mb-js .mb-fork-o.plus { transition-delay: 1.4s; }
.mb-js .mb-step.in .mb-fork-o { opacity: 1; translate: 0 0; }

/* f6 */
.mb-live { border-color: rgba(48,191,115,.4); }
.mb-live-top { display: flex; align-items: center; gap: 10px; }
.mb-live-until { font-size: 13px; color: var(--mut); }
.mb-live-who { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.mb-live-who b { display: block; font-size: 15px; }
.mb-live-who small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--tx2); font-size: 13px; }
.mb-live-who small svg { width: 14px; height: 14px; color: var(--mut); }
.mb-live-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mb-abtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 11px; background: #2A3042; font-size: 14px; font-weight: 600; color: #fff; }
.mb-abtn.wide { grid-column: 1 / -1; }
.mb-abtn svg { width: 17px; height: 17px; }
.mb-abtn.red { background: transparent; border: 1px solid #3A4152; color: var(--red); }
.mb-live-link { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); font-size: 14px; font-weight: 600; }
.mb-live-link svg { width: 19px; height: 19px; color: var(--mut); }
.mb-live-link .chev { margin-left: auto; width: 16px; height: 16px; }
.mb-pill-on i { animation: mbPulse 1.8s ease-in-out infinite; }
@keyframes mbPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(48,191,115,.55); } 50% { box-shadow: 0 0 0 4px rgba(48,191,115,0); } }

/* ───────── 3D coin (as Token3D in the app's onboarding) ───────── */
.mb-coin { --s: 44px; position: relative; display: inline-block; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: mbSpin 4.2s linear infinite; }
.mb-coin i { position: absolute; inset: 0; border-radius: 50%; backface-visibility: visible; }
.mb-coin i.e { background: var(--edge); }
.mb-coin i.f, .mb-coin i.b { background-size: cover; overflow: hidden; }
.mb-coin i.f img, .mb-coin i.b img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.mb-coin i.f::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 50%, transparent 68%); background-size: 300% 100%; animation: mbGloss 4.2s linear infinite; mix-blend-mode: screen; }
.mb-coin-usdc { --edge: #1B4F8F; }
.mb-coin-usdt { --edge: #17795A; }
.mb-coin-buyt { --edge: #1F3FA8; }
@keyframes mbSpin { from { transform: rotateX(8deg) rotateY(0); } to { transform: rotateX(8deg) rotateY(360deg); } }
@keyframes mbGloss { 0% { background-position: 100% 0; } 50% { background-position: 0 0; } 100% { background-position: 100% 0; } }

/* ───────── AUTO ───────── */
.mb-auto-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.mb-auto-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 26px; }
.mb-auto-steps li { counter-increment: st; position: relative; padding-left: 50px; }
.mb-auto-steps li::before { content: counter(st); position: absolute; left: 0; top: -3px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--blue2); background: rgba(50,144,255,.14); border: .8px solid rgba(50,144,255,.35); }
.mb-auto-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: -22px; width: 1px; background: linear-gradient(rgba(50,144,255,.35), rgba(50,144,255,.05)); }
.mb-auto-steps b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.mb-auto-steps span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.6; color: #AEB5C4; }

.mb-auto-scene { position: relative; margin: 0; display: grid; gap: 12px; max-width: 470px; width: 100%; justify-self: center; padding-top: 6px; }
.mb-cc { background: linear-gradient(140deg, #1A2335, #11141B 70%); }
.mb-cc-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mb-cc-hero b { display: block; font-size: 18px; }
.mb-cc-hero small { position: relative; display: block; height: 18px; margin-top: 3px; font-size: 13.5px; }
.mb-cc-hero small span { position: absolute; left: 0; top: 0; transition: opacity .35s; }
.mb-cc-hero .off { color: var(--mut); }
.mb-cc-hero .on { color: var(--green); opacity: 0; }
.mb-toggle { position: relative; width: 52px; height: 30px; border-radius: 16px; border: 2px solid #8E97AB; background: transparent; flex: none; transition: background .35s, border-color .35s; }
.mb-toggle i { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #9AA6C2; transition: transform .45s cubic-bezier(.3,1.4,.5,1), background .35s; }
.mb-auto-scene.on .mb-toggle { background: var(--blue); border-color: var(--blue); }
.mb-auto-scene.on .mb-toggle i { transform: translateX(22px); background: #fff; }
.mb-auto-scene.on .mb-cc-hero .off { opacity: 0; }
.mb-auto-scene.on .mb-cc-hero .on { opacity: 1; }
.mb-cc-line { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--tx2); }
.mb-favs { display: flex; align-items: flex-end; gap: 14px; }
.mb-fav { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tx2); transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.mb-fav .mb-ava { width: 42px; height: 42px; }
.mb-fav .st { position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; color: var(--gold); filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.mb-auto-scene.ev .mb-fav.f2 { transform: translateY(-6px); }
.mb-auto-scene.ev .mb-fav.f2 .mb-ava { box-shadow: 0 0 0 2px var(--blue2), 0 0 18px rgba(50,144,255,.6); }
.mb-favs-all { margin-left: auto; text-align: right; font-size: 13.5px; font-weight: 600; }
.mb-favs-all small { display: block; color: var(--mut); font-weight: 500; font-size: 11.5px; margin-top: 2px; }
.mb-cc-event { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(39,103,229,.16); border: .8px solid rgba(50,144,255,.45); opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .4s, transform .5s cubic-bezier(.3,1.4,.5,1); }
.mb-cc-event svg { width: 18px; height: 18px; color: var(--blue2); flex: none; }
.mb-auto-scene.ev .mb-cc-event { opacity: 1; transform: none; }
.mb-cc-acc { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line2); transition: border-color .5s, background .5s; }
.mb-cc-acc + .mb-cc-acc { margin-top: 8px; }
.mb-cc-acc .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #0B0B10; background: var(--blue2); flex: none; }
.mb-cc-acc .nm { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; position: relative; min-width: 0; }
.mb-cc-acc .nm small { font-size: 11.5px; color: var(--mut); font-weight: 500; }
.mb-cc-acc.free .nm small.s { position: absolute; left: 0; top: 100%; margin-top: -15px; color: var(--green); opacity: 0; transition: opacity .3s; }
.mb-cc-acc.free .nm small.f { transition: opacity .3s; }
.mb-cc-acc.free .mb-pill { opacity: 0; transform: scale(.8); transition: opacity .35s, transform .45s cubic-bezier(.3,1.5,.5,1); }
.mb-auto-scene.run .mb-cc-acc.free { border-color: rgba(48,191,115,.6); background: rgba(48,191,115,.07); }
.mb-auto-scene.run .mb-cc-acc.free .mb-pill { opacity: 1; transform: none; }
.mb-auto-scene.run .mb-cc-acc.free .nm small.f { opacity: 0; }
.mb-auto-scene.run .mb-cc-acc.free .nm small.s { opacity: 1; }
.mb-auto-scene .mb-push-auto { position: absolute; right: -18px; top: -26px; width: 330px; z-index: 3; transform: translateY(-12px); }
.mb-auto-scene.push .mb-push-auto { opacity: 1; transform: none; }

.mb-terms { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 1px solid var(--line); }
.mb-term { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.mb-term > span { flex: none; max-width: 48%; font-size: 15px; color: var(--mut); }
.mb-term > b { font-size: 15px; font-weight: 650; text-align: right; color: var(--tx); }

/* ───────── SPEED ───────── */
.mb-tracks { margin: 0; padding: 30px 28px 22px; border-radius: 20px; background: linear-gradient(180deg, #0C0F16, #090B10); border: 1px solid var(--line); }
.mb-track { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
.mb-track + .mb-track { margin-top: 30px; }
.mb-track-l b { display: block; font-size: 15px; }
.mb-track-l small { display: block; margin-top: 3px; font-size: 12px; color: var(--mut); }
.mb-track.you .mb-track-l b { color: var(--gold); }
.mb-track-line { position: relative; height: 64px; }
.mb-track-line::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.07); }
.mb-track-fill { position: absolute; left: 0; top: 20px; height: 2px; width: var(--f, 0%); border-radius: 1px; background: linear-gradient(90deg, rgba(50,144,255,.2), #3290FF); box-shadow: 0 0 10px rgba(50,144,255,.7); }
.mb-track.you .mb-track-fill { background: linear-gradient(90deg, rgba(245,204,59,.2), #F5CC3B); box-shadow: 0 0 10px rgba(245,204,59,.6); }
.mb-ev { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.mb-ev i { width: 14px; height: 14px; margin-top: 14px; border-radius: 50%; background: #0B0D13; border: 2px solid #3A4256; transition: background .3s, border-color .3s, box-shadow .3s, transform .4s cubic-bezier(.3,1.6,.5,1); }
.mb-ev b { margin-top: 8px; font-size: 12.5px; font-weight: 650; color: var(--mut); transition: color .3s; }
.mb-ev small { font-size: 11px; color: var(--dim); }
.mb-ev small.g { color: var(--green); font-weight: 700; }
.mb-ev.on i { background: var(--blue2); border-color: var(--blue2); box-shadow: 0 0 14px rgba(50,144,255,.8); transform: scale(1.15); }
.mb-track.you .mb-ev.on i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(245,204,59,.7); }
.mb-ev.on b { color: var(--tx); }
.mb-tracks figcaption { margin-top: 18px; font-size: 12.5px; color: var(--dim); }
.mb-speed-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; margin-top: 64px; }
.mb-rows-page { background: transparent; padding: 0; border-top: 1px solid var(--line); border-radius: 0; }
.mb-rows-page .mb-row { padding: 17px 0; border-bottom: 1px solid var(--line); }
.mb-rows-page .mb-row + .mb-row { border-top: 0; }
.mb-rows-page .mb-row > span { font-size: 15px; color: var(--tx); font-weight: 600; }
.mb-rows-page .mb-row > b { font-size: 14.5px; font-weight: 500; color: var(--mut); white-space: normal; max-width: 52%; }
.mb-feed { padding: 16px 0 6px; }
.mb-feed-title { margin: 0 16px 6px; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.mb-fd { position: relative; display: grid; grid-template-columns: 38px 1fr auto; gap: 4px 12px; padding: 12px 16px; }
.mb-fd + .mb-fd { border-top: 1px solid var(--line2); }
.mb-fd-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--s4); color: #fff; grid-row: span 2; }
.mb-fd-ic svg { width: 17px; height: 17px; }
.mb-fd-ic.up { background: rgba(48,191,115,.18); color: var(--green); }
.mb-fd-ic.cl { background: rgba(50,144,255,.16); color: var(--blue2); }
.mb-fd-ic.ok { background: var(--blue2); color: #fff; }
.mb-fd-t { grid-row: span 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-fd-t b { font-size: 14px; }
.mb-fd-t span { font-size: 12.5px; color: var(--tx2); }
.mb-fd-t small { font-size: 11px; color: var(--dim); }
.mb-fd time { font-size: 12px; color: var(--mut); }
.mb-fd em { grid-column: 3; grid-row: 2; align-self: end; font-size: 13px; font-weight: 700; text-align: right; }
.mb-js [data-mb-feed] .mb-fd { opacity: 0; translate: 0 -10px; transition: opacity .45s, translate .55s cubic-bezier(.2,1.2,.4,1); }
.mb-js [data-mb-feed] .mb-fd.on { opacity: 1; translate: 0 0; }

/* ───────── FUND ───────── */
.mb-fund { padding-top: 140px; }
.mb-fund-glow { position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none; background: radial-gradient(800px 420px at 70% 120px, rgba(245,204,59,.10), transparent 70%), radial-gradient(600px 360px at 10% 300px, rgba(48,191,115,.05), transparent 70%); }
.mb-fund::before { content: ""; position: absolute; left: 50%; top: 40px; width: min(1200px, 92%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(245,204,59,.35), transparent); }
.mb-fund-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.mb-ladder { position: relative; margin: 0; height: 460px; perspective: 1200px; }
.mb-ladder-plane { position: absolute; left: 50%; top: 50%; width: 470px; height: 420px; margin: -210px 0 0 -235px; transform-style: preserve-3d; transform: rotateX(var(--lx, 9deg)) rotateY(var(--ly, -9deg)); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.mb-lstep { position: absolute; width: 290px; height: 68px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 16px; background: var(--s1); border: 1px solid rgba(255,255,255,.07);
  --edge: color-mix(in srgb, var(--c) 12%, #07080F); box-shadow: 0 10px 0 var(--edge), 0 24px 30px rgba(0,0,0,.55); transition: border-color .5s, box-shadow .5s; }
.mb-lstep.l1 { --c: #F46E42; left: 0; top: 330px; transform: translateZ(0); }
.mb-lstep.l2 { --c: #3290FF; left: 56px; top: 228px; transform: translateZ(0); }
.mb-lstep.l3 { --c: #30BF73; left: 112px; top: 126px; transform: translateZ(0); }
.mb-lstep.l4 { --c: #F5CC3B; left: 168px; top: 24px; transform: translateZ(0); }
.mb-lnum { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: .8px solid color-mix(in srgb, var(--c) 35%, transparent); transition: background .4s, color .4s; }
.mb-lt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mb-lt small { font-size: 11px; color: var(--mut); white-space: nowrap; }
.mb-lt b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.mb-lstep.lit { border-color: color-mix(in srgb, var(--c) 75%, transparent); --edge: color-mix(in srgb, var(--c) 35%, #07080F); box-shadow: 0 10px 0 var(--edge), 0 24px 30px rgba(0,0,0,.55), 0 0 24px color-mix(in srgb, var(--c) 35%, transparent); }
.mb-lstep.lit .mb-lnum { background: var(--c); color: #0B0B10; border-color: transparent; }
.mb-lstep.gold.lit .mb-lt b { color: var(--gold); }
.mb-lstep.gold.lit { box-shadow: 0 10px 0 var(--edge), 0 24px 30px rgba(0,0,0,.55), 0 0 44px rgba(245,204,59,.45); }
.mb-hopper { position: absolute; left: 0; top: 0; z-index: 5; will-change: transform; animation: none; transform-style: preserve-3d; }
.mb-hopper > .mb-coin-in { position: absolute; inset: 0; transform-style: preserve-3d; animation: mbSpin 2.4s linear infinite; }
.mb-burst { position: absolute; left: 313px; top: 58px; width: 0; height: 0; transform-style: preserve-3d; }
.mb-burst .mb-coin { position: absolute; left: 0; top: 0; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: 0; animation: none; }
.mb-burst.go .mb-coin { animation: mbBurst 1.6s cubic-bezier(.15,.7,.3,1) var(--d, 0s) forwards; }
@keyframes mbBurst {
  0% { opacity: 0; transform: translate3d(0, 0, -20px) rotateY(0) scale(.4); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--tx), calc(var(--ty) + 120px), -20px) rotateY(var(--rot)) scale(1); }
}

.mb-fund-txt { display: grid; gap: 34px; }
.mb-fund-side h3 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.mb-fund-side:first-child h3 { color: var(--gold); }
.mb-fund-side p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: #AEB5C4; }

.mb-split { margin-top: 76px; padding: 22px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 16px 28px rgba(0,0,0,.55); }
.mb-split-head { display: flex; align-items: center; gap: 14px; }
.mb-split-head b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.mb-split-head small { display: block; font-size: 13px; color: var(--mut); margin-top: 2px; }
.mb-split-rows { margin-top: 18px; display: grid; gap: 10px; }
.mb-split-r { display: grid; grid-template-columns: 150px 1fr 46px 92px; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--s3); }
.mb-split-r .nm { display: flex; flex-direction: column; font-weight: 650; font-size: 14px; }
.mb-split-r .nm small { font-weight: 500; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.mb-split-r .bar { height: 8px; border-radius: 4px; background: #232A3B; overflow: hidden; }
.mb-split-r .bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, rgba(245,204,59,.55), #F5CC3B); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.mb-js .mb-split .bar i { transform: scaleX(0); }
.mb-js .mb-split.in .bar i { transform: scaleX(1); }
.mb-split.in .mb-split-r:nth-child(2) .bar i { transition-delay: .12s; } .mb-split.in .mb-split-r:nth-child(3) .bar i { transition-delay: .24s; } .mb-split.in .mb-split-r:nth-child(4) .bar i { transition-delay: .36s; }
.mb-split-r b { font-size: 14px; text-align: right; }
.mb-split-r em { font-size: 13px; color: var(--gold); text-align: right; font-weight: 600; }
.mb-split-cap { margin: 16px 2px 0; font-size: 13px; line-height: 1.55; color: var(--mut); }
.mb-fund-terms { margin-top: 56px; }
.mb-fund-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ───────── FAQ ───────── */
.mb-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.mb-faq-grid .mb-head { position: sticky; top: 110px; }
.mb-qa details { border-bottom: 1px solid var(--line); }
.mb-qa details:first-child { border-top: 1px solid var(--line); }
.mb-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.mb-qa summary::-webkit-details-marker { display: none; }
.mb-qa summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s; }
.mb-qa details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mb-qa p { margin: -6px 0 24px; font-size: 15.5px; line-height: 1.7; color: #AEB5C4; max-width: 700px; }
.mb-qa a { color: var(--blue2); }

/* ───────── END ───────── */
.mb-end { padding: 120px 0 110px; }
.mb-end-card { position: relative; text-align: center; padding: 64px 28px 48px; border-radius: 28px; background: radial-gradient(600px 300px at 50% 0, rgba(39,103,229,.22), transparent 70%), linear-gradient(180deg, #0E121C, #0A0C12); border: 1px solid var(--line); overflow: hidden; }
.mb-end-key { display: flex; justify-content: center; margin-bottom: 34px; }
.mb-end-key .mb-key-cap { font-size: 18px; padding: 20px 38px 19px; }
.mb-end h2 { margin: 0 auto; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; max-width: 760px; }
.mb-end p { margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: var(--mut); max-width: 620px; }
.mb-end-cta { justify-content: center; }
.mb-store { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; background: rgba(255,255,255,.03); transition: border-color .2s; }
.mb-store:hover { border-color: rgba(255,255,255,.35); }
.mb-store svg { width: 22px; height: 22px; }
.mb-store span { display: flex; flex-direction: column; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.1; }
.mb-store small { font-size: 10.5px; font-weight: 500; color: var(--mut); }
.mb-end .mb-risk { margin-top: 26px; font-size: 13px; color: var(--dim); }

/* ───────── responsive ───────── */
@media (max-width: 1100px) {
  .mb-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .mb-hero-copy { display: contents; }
  .mb-eyebrow { order: 1; } .mb-h1 { order: 2; } .mb-hero-scene { order: 3; } .mb-lead { order: 4; } .mb-hero-grid .mb-cta { order: 5; } .mb-hero-note { order: 6; }
  .mb-hero-scene { max-width: 640px; width: 100%; margin: 26px auto 0; }
  .mb-step, .mb-auto-grid, .mb-speed-grid, .mb-fund-grid, .mb-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .mb-step-txt { max-width: 640px; }
  .mb-faq-grid .mb-head { position: static; margin-bottom: 0; }
  .mb-fund-grid .mb-ladder { order: 2; }
}
@media (max-width: 640px) {
  .mb-wrap { padding: 0 16px; }
  .mb-hero { padding: 28px 0 24px; }
  .mb-h1-line { margin-top: 14px; }
  .mb-lead { font-size: 16px; }
  .mb-cta .mb-btn { flex: 1 1 100%; }
  .mb-stage { height: 612px; perspective: 1100px; }
  .mb-plane { --rx: 5deg; --ry: -7deg; --zs: -16px; --zd: 14px; --zk: 26px; --zp: 34px; }
  .mb-lead { margin-top: 18px; }
  .mb-src { width: 88%; top: 62px; }
  .mb-dst { width: 84%; top: 318px; }
  .mb-wire { display: none; }
  .mb-wire.m { display: block; left: 48%; top: 292px; width: 26%; height: 34px; }
  .mb-lag { left: auto; right: 4px; top: 290px; }
  .mb-hero-scene .mb-key { left: 0; bottom: 4px; }
  .mb-hero-scene .mb-key-cap { padding: 15px 22px 14px; font-size: 15px; }
  .mb-push { right: 0; width: 88%; }
  .mb-jump { gap: 10px 20px; margin-top: 18px; }
  .mb-sec { padding: 84px 0 24px; }
  .mb-head { margin-bottom: 40px; }
  .mb-steps { gap: 84px; }
  .mb-step h3 { font-size: 24px; }
  .mb-step p { font-size: 15.5px; }
  .mb-frag > .mb-app, .mb-frag > div { transform: none; }
  .mb-share-line { grid-template-columns: 96px 1fr 34px; gap: 10px; }
  .mb-chip { padding: 9px 5px; font-size: 12px; }
  .mb-terms { grid-template-columns: 1fr; margin-top: 48px; }
  .mb-term { flex-direction: column; gap: 4px; padding: 14px 0; }
  .mb-term > b { text-align: left; }
  .mb-term > span { max-width: none; }
  .mb-auto-scene .mb-push-auto { position: relative; right: auto; top: auto; width: auto; order: 9; }
  .mb-tracks { padding: 22px 14px 16px; overflow: hidden; }
  .mb-track { grid-template-columns: 1fr; gap: 6px; }
  .mb-track + .mb-track { margin-top: 18px; }
  .mb-track-line { height: 70px; margin: 0 26px; }
  .mb-ev b { font-size: 11px; white-space: normal; width: 64px; line-height: 1.2; }
  .mb-ev small { font-size: 10px; }
  .mb-rows-page .mb-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mb-rows-page .mb-row > b { max-width: none; text-align: left; }
  .mb-ladder { height: 380px; }
  .mb-ladder-plane { transform: translateX(-4px) scale(.74) rotateX(var(--lx, 10deg)) rotateY(var(--ly, -10deg)); }
  .mb-split { padding: 16px; }
  .mb-split-r { grid-template-columns: 1fr 40px 76px; gap: 6px 10px; padding: 10px 12px; }
  .mb-split-r .bar { grid-column: 1 / -1; grid-row: 2; }
  .mb-qa summary { font-size: 16.5px; padding: 18px 0; }
  .mb-end { padding: 84px 0 80px; }
  .mb-end-card { padding: 44px 18px 34px; border-radius: 22px; }
  .mb-end-key .mb-key-cap { padding: 17px 26px 16px; font-size: 16px; }
  .mb-store { flex: 1 1 calc(50% - 6px); justify-content: center; padding: 0 12px; }
}
@media (max-width: 360px) {
  .mb-h1-name { font-size: 50px; }
  .mb-src { width: 84%; }
  .mb-dst { width: 82%; }
  .mb-push { width: 94%; }
  .mb-chip { font-size: 11px; padding: 9px 3px; }
  .mb-store { flex-basis: 100%; }
  .mb-ladder-plane { transform: translateX(-14px) scale(.64) rotateX(var(--lx, 10deg)) rotateY(var(--ly, -10deg)); }
}

/* ───────── reduced motion: final frames, no loops ───────── */
@media (prefers-reduced-motion: reduce) {
  .mb *, .mb *::before, .mb *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .mb-h1-name { animation: none; background: none; color: #fff; }
  .mb-coin, .mb-hopper > .mb-coin-in { animation: none !important; transform: rotateX(8deg) rotateY(-24deg); }
  .mb-key-cap::after { display: none; }
}