/* bemicro — landing. Black + BNB yellow. One unit = 1px at a 1440px viewport, everything scales with width. */
@font-face { font-family: "Neue Montreal"; src: url("/assets/fonts/NeueMontreal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DIN Next"; src: url("/assets/fonts/DINNextLight.woff2") format("woff2"); font-weight: 300; font-display: swap; }

:root {
  --u: calc(100vw / 1440);
  --bg: #0B0B0B; --bg2: #111111; --panel: #161616; --panel2: #1C1C1C;
  --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.18);
  --y: #F3BA2F; --y2: #FFE7A0; --amber: #E0B04A; --o: #F5A24B; --r: #F4552F;
  --txt: #FFFFFF; --mut: #A3A3A3; --mut2: #6F6F6F;
  --ff: "Neue Montreal", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.76,0,.24,1);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--txt); font-family: var(--ff); -webkit-font-smoothing: antialiased; scroll-behavior: auto; }
body { margin: 0; font-size: calc(var(--u) * 16); line-height: 1.3; overflow-x: hidden; }
body.landing { background: var(--bg); }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wrap { width: min(calc(100% - var(--u) * 60), calc(var(--u) * 1380)); margin: 0 auto; }
.sec { position: relative; }

/* ---------- type ---------- */
.eyebrow { font-size: calc(var(--u) * 13); letter-spacing: .02em; text-transform: none; color: var(--txt); margin: 0 0 calc(var(--u) * 26); }
.h-xl { font-weight: 400; letter-spacing: -.035em; line-height: 1.02; font-size: calc(var(--u) * 64); margin: 0; }
.h-lg { font-weight: 400; letter-spacing: -.03em; line-height: 1.05; font-size: calc(var(--u) * 44); margin: 0; }
.h-md { font-weight: 400; letter-spacing: -.02em; line-height: 1.1; font-size: calc(var(--u) * 26); margin: 0 0 calc(var(--u) * 14); }
.lead { font-size: calc(var(--u) * 18); color: var(--mut); line-height: 1.25; }
p { margin: 0; }

/* pixel-wipe headline: the text is hidden until the canvas wipe reveals it */
.sx-wipe { display: inline-block; position: relative; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.sx-wipe .sx-wipe-txt { visibility: hidden; }
.sx-wipe .sx-wipe-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* per-line slide-up body copy */
.sx-lines .sx-line { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
.sx-lines .sx-line > span { display: inline-block; transform: translateY(150%); transition: transform .8s cubic-bezier(.16,1,.3,1); will-change: transform; }
.sx-lines.sx-play .sx-line > span { transform: translateY(0); }
/* soft reveal for cards */
.rv { opacity: 0; transform: translateY(calc(var(--u) * 28)); transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 14); white-space: nowrap; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.btn .arr { width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: calc(var(--u) * 3); display: inline-grid; place-items: center; background: rgba(0,0,0,.18); }
.btn .arr::after { content: ""; width: calc(var(--u) * 8); height: calc(var(--u) * 8); background: currentColor; -webkit-mask: url("/assets/chevron.svg") center / contain no-repeat; mask: url("/assets/chevron.svg") center / contain no-repeat; }
.btn.open { background: var(--y); color: #0B0B0B; }
.btn.open:hover { background: var(--y2); }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--txt); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.btn.ghost .arr { background: rgba(255,255,255,.14); }
.btn.ghost:hover { background: var(--y); color: #0B0B0B; }
.btn.ghost:hover .arr { background: rgba(0,0,0,.18); }
.btns { display: flex; gap: calc(var(--u) * 10); flex-wrap: wrap; margin-top: calc(var(--u) * 28); }
.xbtn { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background-color .25s ease, color .25s ease; }
.xbtn:hover { background: var(--y); color: #0B0B0B; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 900; height: calc(var(--u) * 92); pointer-events: none; }
.hdr-blur { position: absolute; inset: 0; width: 100%; height: calc(var(--u) * 150); border: 0; pointer-events: none; z-index: 0; }
.hdr > *:not(.hdr-blur) { pointer-events: auto; }
.hdr-home { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 28); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 5); background: rgba(255,255,255,.08); color: var(--mut); font-size: calc(var(--u) * 11); display: inline-flex; align-items: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 2; }
.hdr-home:hover { color: #fff; }
.hdr-pill { position: absolute; left: 50%; top: calc(var(--u) * 24); transform: translateX(-50%); width: calc(var(--u) * 380); height: calc(var(--u) * 44); background: #000; border: 1px solid rgba(255,255,255,.08); border-radius: calc(var(--u) * 6); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 12); z-index: 3; }
.brand { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 17); letter-spacing: -.02em; }
.brand img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.burger { width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center; gap: 0; }
.burger i { display: block; width: calc(var(--u) * 20); height: 1.5px; background: #fff; margin: 3px 0; transition: transform .3s var(--ease); }
.menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #000; border: 1px solid rgba(255,255,255,.08); border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 8); display: grid; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.menu a { padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 14); color: var(--mut); }
.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.hdr-pill.open .menu { opacity: 1; transform: none; pointer-events: auto; }
.hdr-right { position: absolute; right: calc(var(--u) * 30); top: calc(var(--u) * 26); display: flex; gap: calc(var(--u) * 10); align-items: center; z-index: 2; }
.hdr-right .btn.open { background: #fff; color: #0B0B0B; }
.hdr-right .btn.open:hover { background: var(--y); }

/* ---------- hero ---------- */
.hero-wrap { height: 200vh; background: var(--bg); }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#heroHtml { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }

/* ---------- quote ---------- */
.quote { background: var(--bg2); padding: calc(var(--u) * 150) 0 calc(var(--u) * 130); border-top: 1px solid var(--line); }
.quote-txt { font-size: calc(var(--u) * 40); letter-spacing: -.03em; line-height: 1.1; max-width: calc(var(--u) * 980); }
.quote-by { margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 13); color: var(--y); }
.quote-by::before { content: "— "; color: var(--mut); }

/* ---------- book ---------- */
.book { background: var(--bg); padding: calc(var(--u) * 130) 0 0; overflow: hidden; }
.book-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--u) * 60); align-items: end; margin-top: calc(var(--u) * 70); padding-bottom: calc(var(--u) * 80); }
.book-col { max-width: calc(var(--u) * 620); }
.book-btns { display: flex; gap: calc(var(--u) * 10); justify-content: flex-end; }
.chips-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: calc(var(--u) * 26) 0; display: grid; gap: calc(var(--u) * 14); background: #0D0D0D; }
.chips-marquee .row { display: flex; gap: calc(var(--u) * 14); width: max-content; will-change: transform; }
.chips-marquee .row span { display: inline-flex; align-items: center; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 6); background: #2A2A2A; color: #fff; font-size: calc(var(--u) * 14); white-space: nowrap; }
.chips-marquee .row span.hl { background: var(--y); color: #0B0B0B; }
.chips-marquee .row span.lt { background: #fff; color: #0B0B0B; }
.chips-marquee .row[data-dir="left"] { animation: mq-l 46s linear infinite; }
.chips-marquee .row[data-dir="right"] { animation: mq-r 52s linear infinite; }
@keyframes mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- reach: three cards ---------- */
.reach { background: var(--bg); padding: calc(var(--u) * 120) 0; }
.reach-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 30); margin-bottom: calc(var(--u) * 50); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 20); }
.card h3 { font-weight: 400; font-size: calc(var(--u) * 20); letter-spacing: -.02em; margin: calc(var(--u) * 24) 0 calc(var(--u) * 10); }
.card p { color: var(--mut); font-size: calc(var(--u) * 15); line-height: 1.3; }
.card-vis { aspect-ratio: 440 / 300; border-radius: calc(var(--u) * 8); background: var(--panel); border: 1px solid var(--line); overflow: hidden; position: relative; display: grid; place-items: center; }
.diag { width: 100%; height: 100%; font-family: var(--ff); }
.diag .dl { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.4; stroke-dasharray: 5 6; }
.diag .nd rect { fill: #0B0B0B; stroke: rgba(255,255,255,.12); }
.diag .nd text { fill: #fff; font-size: 15px; }
.card-vis.steps { display: grid; place-content: center; gap: calc(var(--u) * 10); background: var(--panel); }
.card-vis.steps .step { display: flex; align-items: center; gap: calc(var(--u) * 12); width: calc(var(--u) * 240); height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background: #0B0B0B; border: 1px solid var(--line); font-size: calc(var(--u) * 15); transform: translateX(calc(var(--u) * -14)); transition: transform .6s var(--ease), border-color .3s; }
.card.in .card-vis.steps .step { transform: none; }
.card.in .card-vis.steps .step:nth-child(2) { transition-delay: .12s; } .card.in .card-vis.steps .step:nth-child(3) { transition-delay: .24s; }
.card-vis.steps .step:hover { border-color: var(--y); }
.ic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 5); display: inline-grid; place-items: center; background: var(--y); position: relative; }
.ic::after { content: ""; width: 55%; height: 55%; background: #0B0B0B; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic.flag { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2v20h2v-8h10l-2-4 2-4H7V2z'/%3E%3C/svg%3E"); }
.ic.pos { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17l6-6 4 4 8-8v5h2V3h-9v2h5l-6 6-4-4-8 8z'/%3E%3C/svg%3E"); }
.ic.set { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/%3E%3C/svg%3E"); }
.card-vis.best { background: var(--panel); }
.best-card { width: calc(var(--u) * 250); padding: calc(var(--u) * 18) calc(var(--u) * 20); border-radius: calc(var(--u) * 8); background: #0B0B0B; border: 1px solid var(--line); display: grid; gap: calc(var(--u) * 6); }
.best-card span { font-size: calc(var(--u) * 12); color: var(--mut); }
.best-card b { font-weight: 400; font-size: calc(var(--u) * 34); color: var(--y); letter-spacing: -.02em; }
.best-card small { font-size: calc(var(--u) * 12); color: var(--mut2); }

/* ---------- built: orb ---------- */
.built { background: var(--bg); min-height: 100vh; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line); }
.built .orb { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: auto; }
.built-txt { position: relative; z-index: 2; max-width: calc(var(--u) * 520); margin-left: calc(var(--u) * 30); padding: calc(var(--u) * 120) 0; pointer-events: none; }
.built-txt * { pointer-events: auto; }
.built-txt p.sx-lines { color: var(--mut); font-size: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 36); line-height: 1.3; }

/* ---------- account: sticky aside + blocks ---------- */
.account { background: var(--bg2); padding: calc(var(--u) * 120) 0; border-top: 1px solid var(--line); }
.account-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: calc(var(--u) * 80); align-items: start; }
.account-side { position: sticky; top: calc(var(--u) * 120); }
.account-side p.sx-lines { color: var(--mut); margin-top: calc(var(--u) * 20); font-size: calc(var(--u) * 15); max-width: calc(var(--u) * 440); }
.account-blocks { display: grid; gap: calc(var(--u) * 90); }
.blk h3 { font-weight: 400; font-size: calc(var(--u) * 30); letter-spacing: -.025em; margin: calc(var(--u) * 26) 0 calc(var(--u) * 10); }
.blk > p { color: var(--mut); font-size: calc(var(--u) * 15); max-width: calc(var(--u) * 640); }
.result { margin-top: calc(var(--u) * 18); border-radius: calc(var(--u) * 8); background: var(--panel); border: 1px solid var(--line); padding: calc(var(--u) * 14) calc(var(--u) * 16); display: grid; gap: calc(var(--u) * 10); }
.result .tag { display: inline-flex; width: max-content; height: calc(var(--u) * 24); align-items: center; padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 4); background: var(--y); color: #0B0B0B; font-size: calc(var(--u) * 11); }
.result p { font-size: calc(var(--u) * 15); }
.blk-vis { position: relative; aspect-ratio: 690 / 350; border-radius: calc(var(--u) * 10); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.bgv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.bgv.on { opacity: 1; }
.vis-countries .bgv { filter: saturate(0) brightness(.55) contrast(1.1); }
.vis-trading .bgv { filter: saturate(0) brightness(.5); }
.flow { position: absolute; left: calc(var(--u) * 24); right: calc(var(--u) * 24); bottom: calc(var(--u) * 34); display: flex; justify-content: space-between; align-items: flex-end; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 20); border-top: 1.5px dashed rgba(255,255,255,.45); }
.fnode { position: relative; display: grid; gap: calc(var(--u) * 6); justify-items: start; }
.fnode small { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 5) calc(var(--u) * 10); border-radius: calc(var(--u) * 4); background: rgba(255,255,255,.14); color: #fff; }
.fnode b, .fnode.k { font-weight: 400; font-size: calc(var(--u) * 16); height: calc(var(--u) * 40); display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 5); background: #fff; color: #0B0B0B; }
.fnode b.r { background: var(--r); color: #fff; } .fnode b.o { background: var(--o); color: #0B0B0B; } .fnode b.y { background: var(--y); color: #0B0B0B; }
.ticket { position: absolute; right: calc(var(--u) * 30); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 300); padding: calc(var(--u) * 18); border-radius: calc(var(--u) * 8); background: #0B0B0B; border: 1px solid var(--line2); display: grid; gap: calc(var(--u) * 8); }
.t-row { display: flex; justify-content: space-between; font-size: calc(var(--u) * 13); color: var(--mut); padding-bottom: calc(var(--u) * 8); border-bottom: 1px solid var(--line); }
.t-row b { font-weight: 400; color: #fff; } .t-row b.y { color: var(--y); }
.t-go { margin-top: calc(var(--u) * 6); height: calc(var(--u) * 36); border-radius: calc(var(--u) * 5); background: var(--y); color: #0B0B0B; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 14); }
.t-go .arr::after { content: ""; display: block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); background: #0B0B0B; -webkit-mask: url("/assets/chevron.svg") center / contain no-repeat; mask: url("/assets/chevron.svg") center / contain no-repeat; }
.vis-listing { display: grid; place-items: center; }
.vis-listing .diag { width: 92%; height: auto; }
.vis-settle { display: grid; grid-template-columns: 1fr auto 1.3fr; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 30) calc(var(--u) * 40); }
.pos-card { background: #fff; color: #0B0B0B; border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 18); display: grid; gap: calc(var(--u) * 6); }
.pos-card small { color: #8a8a8a; font-size: calc(var(--u) * 11); }
.pos-card b { font-weight: 400; font-size: calc(var(--u) * 30); letter-spacing: -.02em; padding-bottom: calc(var(--u) * 8); border-bottom: 1px solid #e5e5e5; }
.pos-card .pr { display: flex; justify-content: space-between; font-size: calc(var(--u) * 12); padding: calc(var(--u) * 4) 0; border-bottom: 1px solid #eee; }
.pos-card .pr span:last-child { color: #777; }
.branch { width: calc(var(--u) * 90); height: auto; }
.branch .dl { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.5; stroke-dasharray: 5 6; }
.outs { display: grid; gap: calc(var(--u) * 70); }
.out { display: flex; gap: calc(var(--u) * 8); align-items: center; }
.out span { height: calc(var(--u) * 40); display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 5); font-size: calc(var(--u) * 14); white-space: nowrap; }
.out .k { background: #0B0B0B; border: 1px solid var(--line2); color: #fff; }
.out .y { background: var(--y); color: #0B0B0B; } .out .o { background: var(--o); color: #0B0B0B; }

/* ---------- under the hood ---------- */
.hood { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: #0B0B0B; }
.hood-left { position: relative; padding: calc(var(--u) * 90) calc(var(--u) * 60) calc(var(--u) * 40) calc(var(--u) * 30); background: linear-gradient(180deg, #1B1710 0%, #2A2413 60%, #3A3118 100%); display: flex; flex-direction: column; }
.hood-left .eyebrow { display: inline-flex; padding: calc(var(--u) * 8) calc(var(--u) * 12); background: #fff; color: #0B0B0B; border-radius: calc(var(--u) * 4); width: max-content; }
.hood-copy { position: relative; min-height: calc(var(--u) * 170); margin-top: calc(var(--u) * 20); }
.hc { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.hc.on { opacity: 1; transform: none; pointer-events: auto; }
.hc h3 { font-weight: 400; font-size: calc(var(--u) * 22); margin: 0 0 calc(var(--u) * 12); }
.hc p { color: rgba(255,255,255,.72); font-size: calc(var(--u) * 15); max-width: calc(var(--u) * 480); }
.hood-tabs { margin-top: auto; display: grid; }
.ht { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 16) 0; border-top: 1px solid rgba(255,255,255,.14); font-size: calc(var(--u) * 24); letter-spacing: -.02em; color: rgba(255,255,255,.6); text-align: left; transition: color .3s; }
.ht small { font-size: calc(var(--u) * 12); color: rgba(255,255,255,.5); }
.ht small::before { content: "‹ "; } .ht small::after { content: " ›"; }
.ht.on, .ht:hover { color: #fff; }
.ht.on small { color: var(--y); }
.hood-right { position: relative; background: #0B0B0B; min-height: calc(var(--u) * 560); overflow: hidden; }
.hv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; filter: saturate(0) brightness(.8); }
.hv.on { opacity: 1; }
.hood-live { position: absolute; left: calc(var(--u) * 30); bottom: calc(var(--u) * 30); display: inline-flex; gap: calc(var(--u) * 10); align-items: center; padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 6); background: rgba(0,0,0,.6); border: 1px solid var(--line2); font-size: calc(var(--u) * 13); backdrop-filter: blur(12px); }
.hood-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 0 rgba(243,186,47,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(243,186,47,.6); } 70% { box-shadow: 0 0 0 10px rgba(243,186,47,0); } 100% { box-shadow: 0 0 0 0 rgba(243,186,47,0); } }

/* ---------- what to watch ---------- */
.watch { background: var(--bg2); padding: calc(var(--u) * 120) 0; border-top: 1px solid var(--line); }
.wgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 14); }
.wc { min-height: calc(var(--u) * 210); border-radius: calc(var(--u) * 8); background: var(--panel); border: 1px solid var(--line); padding: calc(var(--u) * 18); display: flex; flex-direction: column; transition: border-color .3s ease, transform .3s ease; }
.wc:hover { border-color: rgba(243,186,47,.6); transform: translateY(-3px); }
.wc h4 { font-weight: 400; font-size: calc(var(--u) * 15); letter-spacing: -.01em; margin: 0 0 calc(var(--u) * 8); line-height: 1.2; }
.wc p { color: var(--mut); font-size: calc(var(--u) * 12.5); line-height: 1.3; }
.wi { margin-top: auto; width: calc(var(--u) * 22); height: calc(var(--u) * 22); background: var(--y); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.wi-layers { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E"); }
.wi-pulse { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12h4l3-8 4 16 3-8h6'/%3E%3C/svg%3E"); }
.wi-clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.wi-moon { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z'/%3E%3C/svg%3E"); }
.wi-pin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.wi-scale { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 3v18M4 21h16M6 7l-4 8h8zM18 7l-4 8h8z'/%3E%3C/svg%3E"); }
.wi-hand { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M7 11V5a1.5 1.5 0 0 1 3 0v6M10 10V4a1.5 1.5 0 0 1 3 0v7M13 11V6a1.5 1.5 0 0 1 3 0v8M16 13V9a1.5 1.5 0 0 1 3 0v5a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-3l-3-5a1.5 1.5 0 0 1 2.6-1.5L7 13'/%3E%3C/svg%3E"); }
.wi-coin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.5 9.5a2.5 2.5 0 0 0-5 0c0 3 5 2 5 5a2.5 2.5 0 0 1-5 0M12 5v2M12 17v2'/%3E%3C/svg%3E"); }
.wi-chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 17l5-6 4 3 5-7 4 4'/%3E%3C/svg%3E"); }
.wi-lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* ---------- cta ---------- */
.cta { background: var(--bg); padding: calc(var(--u) * 40) 0 calc(var(--u) * 60); }
.cta-card { position: relative; border-radius: calc(var(--u) * 12); overflow: hidden; background: #000; min-height: calc(var(--u) * 520); display: grid; place-items: center; border: 1px solid var(--line); }
.cta-card .bgv { filter: saturate(0) brightness(.35); }
.cta-in { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: calc(var(--u) * 30); padding: calc(var(--u) * 60) calc(var(--u) * 20); }
.cta-in .h-xl { font-size: calc(var(--u) * 56); }

/* ---------- footer ---------- */
.ftr { background: #000; border-top: 1px solid var(--line); padding-top: calc(var(--u) * 40); }
.ftr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: calc(var(--u) * 30) calc(var(--u) * 40); }
.ftr-brand { grid-row: 1 / 3; }
.ftr-col { display: grid; align-content: start; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 13); }
.ftr-col h5 { margin: 0 0 calc(var(--u) * 6); font-weight: 400; font-size: calc(var(--u) * 12); color: var(--mut); }
.ftr-col a { display: flex; justify-content: space-between; color: #fff; }
.ftr-col a:not(.xbtn)::after { content: "›"; color: var(--mut); }
.ftr-col .xbtn { margin-top: calc(var(--u) * 10); width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.ftr-col .xbtn::after { content: none; }
.ftr-word { grid-column: 1 / 2; display: flex; align-items: center; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 40); letter-spacing: -.03em; padding: calc(var(--u) * 60) 0; }
.ftr-word em { font-style: normal; font-size: calc(var(--u) * 13); color: var(--mut); line-height: 1.25; margin-left: calc(var(--u) * 10); }
.ftr-open { grid-column: 2 / 4; position: relative; min-height: calc(var(--u) * 220); border-radius: calc(var(--u) * 10) calc(var(--u) * 10) 0 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; display: flex; align-items: center; padding: 0 calc(var(--u) * 36); font-size: calc(var(--u) * 40); letter-spacing: -.03em; }
.ftr-open .bgv { filter: saturate(0) brightness(.5); }
.ftr-open span { position: relative; z-index: 2; transition: color .3s; }
.ftr-open:hover span { color: var(--y); }
.ftr-bottom { display: flex; justify-content: space-between; padding: calc(var(--u) * 18) 0 calc(var(--u) * 24); border-top: 1px solid var(--line); font-size: calc(var(--u) * 12); color: var(--mut); margin-top: 0; }
.ftr-bottom a:hover { color: #fff; }

/* ---------- intro loader + wipe (site-level) ---------- */
#sxEnter { z-index: 2147483600; background: #0B0B0B; display: none; position: fixed; inset: 0; }
#sxEnter canvas { display: block; position: absolute; top: 0; left: 0; }
#sxLoader { pointer-events: none; color: #fff; flex-direction: column; align-items: center; font-family: var(--ff); font-size: calc(var(--u) * 14); line-height: 110%; transition: opacity .4s; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#sxMask { display: block; overflow: hidden; }
#sxRoll { will-change: transform; transition: transform .85s var(--ease); display: block; transform: translateY(115%); }
#sxLoader.up #sxRoll { transform: translateY(0); }
#sxLoadText { white-space: nowrap; line-height: 1.35; display: block; }
#sxTrack { transform-origin: 50%; background: rgba(255,255,255,.2); width: 0; height: 1px; margin-top: .55em; transition: transform .6s var(--ease); display: block; position: relative; transform: scaleX(0); }
#sxLoader.track #sxTrack { transform: scaleX(1); }
#sxFill { transform-origin: 0; background: var(--y); width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transform: scaleX(0); }
#sxLoader.load #sxFill { animation: sxLoad var(--sx-dur, 1.6s) linear forwards; }
@keyframes sxLoad { to { transform: scaleX(1); } }
#sxEnter.go #sxLoader { opacity: 0; }
#sxEnter.fade { opacity: 0; transition: opacity .5s; }
#sx-wipe { z-index: 2147483600; pointer-events: none; will-change: transform; background: var(--y); justify-content: center; align-items: center; width: 100vw; height: 100vh; display: flex; position: fixed; inset: 0; overflow: hidden; transform: translateY(101%); }
#sx-mark { will-change: transform; line-height: 0; }
#sx-mark img { width: 64px; height: 64px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  :root { --u: calc(100vw / 900); }
  .cards3 { grid-template-columns: 1fr; }
  .card-vis { aspect-ratio: 16 / 8; }
  .account-grid { grid-template-columns: 1fr; gap: calc(var(--u) * 50); }
  .account-side { position: static; }
  .wgrid { grid-template-columns: repeat(2, 1fr); }
  .hood { grid-template-columns: 1fr; }
  .hood-right { min-height: 60vw; }
  .book-row { grid-template-columns: 1fr; }
  .book-btns { justify-content: flex-start; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-row: auto; grid-column: 1 / 3; }
  .ftr-word, .ftr-open { grid-column: 1 / 3; }
  .hdr-home { display: none; }
  .hdr-pill { width: calc(var(--u) * 340); }
}
@media (max-width: 749.98px) {
  :root { --u: calc(100vw / 390); }
  body { font-size: calc(var(--u) * 14); }
  .wrap { width: calc(100% - var(--u) * 32); }
  .h-xl { font-size: calc(var(--u) * 36); } .h-lg { font-size: calc(var(--u) * 30); } .quote-txt { font-size: calc(var(--u) * 24); }
  .hdr-pill { left: calc(var(--u) * 16); transform: none; width: calc(var(--u) * 200); top: calc(var(--u) * 16); }
  .hdr-right { right: calc(var(--u) * 16); top: calc(var(--u) * 18); }
  .hdr-right .xbtn { display: none; }
  .btn { height: calc(var(--u) * 38); font-size: calc(var(--u) * 13); }
  .wgrid { grid-template-columns: 1fr; }
  .vis-settle { grid-template-columns: 1fr; gap: calc(var(--u) * 14); padding: calc(var(--u) * 20); }
  .branch { display: none; }
  .outs { gap: calc(var(--u) * 10); }
  .flow { flex-wrap: wrap; gap: calc(var(--u) * 10); }
  .flow::before { display: none; }
  .ticket { position: static; transform: none; width: auto; margin: calc(var(--u) * 20); }
  .ftr-grid { grid-template-columns: 1fr; }
  .ftr-brand, .ftr-word, .ftr-open { grid-column: 1; }
  .reach-head { flex-direction: column; align-items: flex-start; }
  .cta-in .h-xl { font-size: calc(var(--u) * 34); }
}
@media (prefers-reduced-motion: reduce) {
  .chips-marquee .row { animation: none !important; }
  .rv { opacity: 1; transform: none; }
}