/* Landing and auth pages. Layout language: 8px gaps between full-width rounded blocks, black islands on a light canvas. */
body.home { background: var(--bg); }
.wrap { width: calc(100% - 16px); max-width: 1650px; margin: 8px auto 0; }
.sec { position: relative; margin: 8px auto 0; width: calc(100% - 16px); max-width: 1650px; border-radius: var(--rI); background: var(--s1); border: 1px solid var(--line); overflow: hidden; }
.sec-in { padding: 80px 64px 72px; }
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.sec-t { font: 500 clamp(1.75rem, 3vw, 2.5rem)/1.05 var(--head); letter-spacing: -.04em; margin-top: 22px; max-width: 760px; }
.sec-p { color: var(--mu); font-weight: 500; font-size: 15px; line-height: 1.5; max-width: 520px; margin-top: 16px; }
.dk { background: var(--ink); color: #fff; border-color: rgba(255, 255, 255, .06); --s1: #19191c; --s2: #212125; --s3: #2b2b30; --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .17); --tx: #fff; --mu: #a2a2ae; --mu2: #6f6f7b; }
.dk .sec-p { color: #a2a2ae; }

/* ---------------------------------------------------------------- header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding-top: 14px; pointer-events: none; }
.hdr .bar { pointer-events: auto; width: calc(100% - 16px); max-width: 1650px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 22px; border-radius: 30px; background: transparent; color: #fff; transition: background-color .4s ease, box-shadow .4s ease; }
.hdr.sc .bar { background: #0e0e0e; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); }
.hdr .brand { padding: 0; margin-right: 8px; font-size: 22px; }
.hdr .brand .xlogo { color: var(--red); width: 36px; }
.hdr nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.hdr nav a { position: relative; padding: 11px 15px; font: 600 13px/1 var(--sans); color: rgba(255, 255, 255, .85); border-radius: 8px; transition: color .3s ease, background-color .3s ease, border-radius .3s ease; }
.hdr nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hdr nav a.on { color: #fff; background: rgba(255, 255, 255, .06); border-radius: 0; }
.hdr nav a::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: linear-gradient(currentColor, currentColor) top left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) top right/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom right/3px 3px no-repeat; }
.hdr nav a.on::before { opacity: .6; content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: linear-gradient(currentColor, currentColor) top left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) top right/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom right/3px 3px no-repeat; }
.hdr .acts { display: flex; align-items: center; gap: 6px; }
.hdr .btn { height: 42px; padding: 0 18px; border-radius: 10px; }
.hdr .btn:not(.primary) { color: #fff; border-color: rgba(255, 255, 255, .26); background: transparent; }
.hdr .btn:not(.primary) { --hv: #fff; }
.hdr .btn:not(.primary):hover { color: #000; border-color: #fff; }
.hdr .iconbtn { width: 42px; height: 42px; border-radius: 10px; background: transparent; border-color: rgba(255, 255, 255, .26); color: #fff; }
.hdr .iconbtn:hover { background: #fff; color: #000; border-color: #fff; }
.hdr .menu-btn { display: none; }
.drawer { position: fixed; inset: 0; z-index: 120; display: none; }
.drawer.open { display: block; }
.drawer .shade { position: absolute; inset: 0; background: rgba(8, 6, 7, .6); }
.drawer .pn { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); background: var(--ink); color: #fff; padding: 20px; display: flex; flex-direction: column; gap: 4px; animation: slideIn .28s ease; }
.drawer .pn a.l { padding: 14px 0; font: 500 22px var(--head); letter-spacing: -.03em; opacity: .9; }
.drawer .pn a.l:hover { color: var(--red); }
@keyframes slideIn { from { transform: translateX(100%); } }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; width: calc(100% - 16px); max-width: 1650px; margin: 8px auto 0; min-height: clamp(720px, calc(100vh - 16px), 940px); border-radius: var(--rI); overflow: hidden; --gx: 74%; --gy: 62%; }
.hero.glow::before { background: radial-gradient(ellipse 52% 72% at 78% 60%, rgba(251, 21, 25, .62), rgba(251, 21, 25, .14) 50%, transparent 74%), radial-gradient(ellipse 36% 44% at 64% -8%, rgba(255, 112, 40, .5), transparent 70%), radial-gradient(ellipse 28% 38% at 0% 100%, rgba(251, 21, 25, .2), transparent 70%); }
.hero .in { position: relative; z-index: 3; min-height: clamp(720px, calc(100vh - 16px), 940px); display: flex; align-items: center; padding: 120px 64px 80px; }
.hero h1 { font: 500 clamp(2.6rem, 5.2vw, 4.75rem)/1 var(--head); letter-spacing: -.05em; color: #fff; display: flex; flex-direction: column; }
.hero h1 span { display: block; white-space: nowrap; line-height: 1; margin-bottom: -.1em; }
.ti { display: inline-block; vertical-align: middle; height: 1.34em; width: auto; margin: -.18em -.14em -.18em .02em; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
.tc { display: inline-block; vertical-align: middle; width: .92em; height: .92em; margin: -.08em .1em 0 .1em; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.hero p.lead { margin-top: 38px; max-width: 360px; font: 600 14px/1.4 var(--sans); color: #fff; }
.hero .acts { display: flex; gap: 10px; margin-top: 46px; flex-wrap: wrap; }
.hero .acts .btn { height: 52px; padding: 0 24px; }
.hero .acts .btn:not(.primary) { color: #fff; border-color: rgba(255, 255, 255, .26); background: transparent; }
.hero .acts .btn:not(.primary) { --hv: #fff; }
.hero .acts .btn:not(.primary):hover { color: #000; border-color: #fff; }
.hero .live { display: flex; gap: 36px; margin-top: 56px; }
.hero .live b { display: block; font: 500 30px/1 var(--head); letter-spacing: -.04em; color: #fff; }
.hero .live span { display: block; margin-top: 8px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8e8e9a; }
.scene { position: absolute; right: 14px; top: 50%; width: 880px; height: 680px; margin-top: -300px; transform-origin: right center; transform: scale(var(--k, 1)); z-index: 2; pointer-events: none; }
.scene .disc { position: absolute; left: 130px; top: 60px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 21, 25, .55), rgba(251, 21, 25, .12) 55%, transparent 72%); }
.scene .chest { position: absolute; left: 190px; top: 120px; width: 500px; animation: float 7s ease-in-out infinite; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .55)); }
.gc { position: absolute; border-radius: 24px; padding: 18px; background: rgba(21, 17, 18, .72); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.gc .lbl { color: #fff; font-size: 10.5px; }
.gc .row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-drop { left: 0; top: 36px; width: 262px; }
.gc-drop h4 { font: 500 19px/1.1 var(--head); letter-spacing: -.03em; margin: 14px 0 12px; }
.dr-list { position: relative; height: 164px; overflow: hidden; }
.dr { position: absolute; left: 0; right: 0; top: 0; height: 50px; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 0 10px 0 8px; border-radius: 14px; background: rgba(255, 255, 255, .06); border-left: 3px solid var(--rc, #888); transform: translateY(calc(var(--i, 0) * 57px)); opacity: 1; transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.dr.in0 { opacity: 0; } .dr.out { opacity: 0; }
.dr .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--rc); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 72%), #212125; }
.dr b { display: block; font: 600 12.5px/1.15 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr small { font: 500 9.5px var(--mono); color: var(--rc); letter-spacing: .05em; text-transform: uppercase; }
.dr i { font: 500 11px var(--mono); font-style: normal; color: #a2a2ae; }
.gc-bal { left: 618px; top: 16px; width: 262px; }
.gc-bal .v { display: flex; align-items: center; gap: 10px; font: 500 34px/1 var(--head); letter-spacing: -.04em; margin: 16px 0 12px; }
.gc-bal .v .coin { width: 34px; height: 34px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.bars i { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .16); height: var(--h); animation: barUp 4.2s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.bars i:nth-child(5) { background: var(--redg); }
@keyframes barUp { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.bars i { transform-origin: bottom; }
.gc-mk { left: 618px; top: 440px; width: 262px; }
.mk-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mk-row .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--c-mythic); background: radial-gradient(circle at 50% 40%, rgba(239, 47, 58, .35), transparent 72%), #212125; flex: none; }
.mk-row b { font: 600 13px/1.2 var(--sans); display: block; }
.mk-row small { font: 500 11px var(--mono); color: #a2a2ae; }
.mk-price { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); font: 600 17px var(--head); }
.mk-price .tg { font: 500 9.5px var(--mono); letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; background: rgba(63, 207, 121, .16); color: #3fcf79; text-transform: uppercase; }
.mouse { position: absolute; right: 32px; bottom: 32px; z-index: 3; width: 28px; height: 46px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 16px; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------------------------------------------------------------- features: accordion + scene */
.feat-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; padding: 80px 64px 64px; }
.scn { position: relative; margin-top: 48px; aspect-ratio: 770 / 509; max-height: 560px; border-radius: var(--rI); overflow: hidden; background: #080607; }
.scn .sl { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease; display: grid; place-items: center; padding: 28px; color: #fff; }
.scn .sl.on { opacity: 1; pointer-events: auto; }
.acc { padding-top: 14px; }
.acc .it { border-bottom: 1px solid var(--line); }
.acc .it.on { border-image: var(--redg) 0 0 1 0; }
.acc button.hd { width: 100%; padding: 26px 0; background: transparent; border: 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--tx); }
.acc .tt { font: 500 28px/1.1 var(--head); letter-spacing: -.035em; transition: color .25s; }
.acc .it.on .tt { background: var(--redg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.acc .ar { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--red); color: var(--red); display: grid; place-items: center; flex: none; transition: transform .3s; }
.acc .it.on .ar { transform: rotate(90deg); background: var(--red); color: #fff; }
.acc .ds { max-height: 0; opacity: 0; overflow: hidden; font: 500 15px/1.45 var(--sans); color: var(--tx); transition: max-height .35s ease, opacity .3s ease, padding .3s ease; }
.acc .it.on .ds { max-height: 220px; opacity: 1; padding-bottom: 26px; }
/* scene widgets (inside black scenes) */
.cr-row { display: grid; grid-template-columns: 96px 1fr 54px; gap: 12px; align-items: center; margin: 11px 0; font-size: 13px; }
.cr-row .b { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; } .cr-row .b i { display: block; height: 100%; border-radius: 5px; background: var(--rc); transform-origin: left; animation: fill 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.cr-row .r { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc); }
@keyframes fill { from { transform: scaleX(0); } }
.sc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; width: 100%; }
.sc2 img.big { width: 100%; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .6)); animation: float 7s ease-in-out infinite; }
.lst { display: grid; gap: 8px; width: 100%; }
.lst .card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 11px; border-radius: 16px; background: #19191c; }
.lst .card .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--rc); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 72%), #212125; }
.lst .card b { font: 600 13px var(--sans); display: block; } .lst .card small { font: 500 10px var(--mono); color: var(--rc); letter-spacing: .05em; text-transform: uppercase; }
.lst .card .btn { height: 32px; padding: 0 14px; font-size: 12px; }
.slots6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.slots6 .s { aspect-ratio: 1.1; border-radius: 18px; background: #19191c; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--rc, #666); box-shadow: inset 0 -3px 0 var(--rc, transparent); font: 500 11px var(--sans); text-align: center; padding: 6px; }
.slots6 .s span { color: #fff; font-weight: 600; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl { display: grid; gap: 8px; width: 100%; }
.pl .p { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #19191c; }
.pl .p .av { width: 38px; height: 38px; border-radius: 12px; background: #2b2b30; display: grid; place-items: center; color: #fff; font: 600 14px var(--head); flex: none; }
.pl .p b { font: 600 13.5px var(--sans); } .pl .p small { display: block; color: #a2a2ae; font-size: 11.5px; }
.pl .p .tg { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .06em; padding: 5px 9px; border-radius: 7px; text-transform: uppercase; background: rgba(251, 21, 25, .2); color: #ff7a7d; }
.pl .p .tg.f { background: rgba(63, 207, 121, .16); color: #3fcf79; }
.wheel2 { position: relative; width: min(100%, 360px); margin: 0 auto; }
.wheel2 svg { width: 100%; display: block; }

/* ---------------------------------------------------------------- case slider */
.cs-in { padding: 64px 0 72px 40px; }
.cs-hd { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 40px 44px 0; }
.arrows { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 32px; background: rgba(120, 135, 155, .22); }
.arrows button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--s1); color: var(--tx); display: grid; place-items: center; transition: .2s; }
.arrows button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.arrows button:disabled { opacity: .4; cursor: default; }
.sld { overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; }
.sld::-webkit-scrollbar { display: none; }
.sld.drag { cursor: grabbing; }
.trk { display: flex; gap: 12px; padding-right: 40px; }
.cc { position: relative; flex: 0 0 310px; height: 410px; padding: 40px 32px 30px; border-radius: var(--rI); background: var(--s2); overflow: hidden; display: flex; flex-direction: column; color: var(--tx); isolation: isolate; transition: background-color .3s ease, color .3s ease; }
.cc::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse 85% 55% at 70% 78%, color-mix(in srgb, var(--cc, #fb1519) 62%, transparent), transparent 72%); }
.cc .no { font: 500 14px var(--mono); color: var(--red); }
.cc h3 { margin-top: 24px; font: 500 30px/.92 var(--head); letter-spacing: -.045em; max-width: 78%; }
.cc .im { position: absolute; left: 3%; right: 3%; bottom: 64px; top: 130px; display: grid; place-items: center; pointer-events: none; }
.cc .im img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(16, 24, 40, .2)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cc .pr { position: relative; z-index: 2; margin-top: auto; display: flex; align-items: center; justify-content: space-between; font: 600 18px var(--head); }
.cc .pr small { font: 500 11px var(--mono); color: var(--mu); letter-spacing: .04em; text-transform: uppercase; }
.cc .go { position: absolute; top: 24px; right: 24px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: var(--redg); color: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(-8px); transition: .35s; }
@media (hover: hover) {
  .cc:hover { background: var(--ink); color: #fff; }
  .cc:hover::before { opacity: 1; } .cc:hover .go { opacity: 1; transform: none; }
  .cc:hover .im img { transform: scale(1.06) translateY(-8px); filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .55)); }
  .cc:hover .pr small { color: #a2a2ae; }
}
.sld.drag .cc .im img { transition: none; transform: none; }

/* ---------------------------------------------------------------- protection bento */
.bn-in { padding: 8px; }
.bn-hd { text-align: center; padding: 64px 24px 44px; display: flex; flex-direction: column; align-items: center; }
.bn-hd .sec-t { max-width: 640px; text-align: center; }
.bn-hd .sec-p { margin-left: auto; margin-right: auto; text-align: center; }
.bn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.bc { position: relative; overflow: hidden; border-radius: 24px; background: #121012; min-height: 330px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.bc.r1 { grid-column: span 3; } .bc.r2 { grid-column: span 5; } .bc.r3 { grid-column: span 4; }
.bc.r4, .bc.r5, .bc.r6 { grid-column: span 4; }
.bc.red { background: radial-gradient(ellipse 120% 90% at 30% 0%, #b3040d, #3a0509 55%, #0c0809 100%); }
.bc.glowb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(251, 21, 25, .35), transparent 70%); }
.bc .t { font: 500 24px/1.18 var(--head); letter-spacing: -.03em; color: #fff; position: relative; z-index: 2; }
.bc .t small { display: block; margin-top: 8px; font: 500 13.5px/1.4 var(--sans); letter-spacing: 0; color: #a9a9b4; max-width: 340px; }
.bc .ic { color: #fff; position: relative; z-index: 2; }
.bc .vis { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.hashbox { width: min(100% - 56px, 420px); padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font: 500 11px/1.7 var(--mono); color: #cfcfd8; word-break: break-all; margin-bottom: 70px; }
.hashbox b { color: #ff6a6e; font-weight: 500; } .hashbox i { font-style: normal; color: #3fcf79; }
.ledger { width: min(100% - 56px, 360px); display: grid; gap: 6px; margin-bottom: 76px; }
.ledger div { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); font: 500 12px var(--mono); color: #cfcfd8; }
.ledger .p { color: #3fcf79; } .ledger .m { color: #ff6a6e; }
.shield { width: 176px; height: 176px; margin-top: -40px; color: #fff; animation: float 6s ease-in-out infinite; }
.keyring { display: flex; gap: 10px; margin-top: -30px; } .keyring i { width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); display: grid; place-items: center; color: #fff; animation: float 5s ease-in-out infinite; }
.keyring i:nth-child(2) { animation-delay: -1.5s; background: var(--redg); border-color: transparent; } .keyring i:nth-child(3) { animation-delay: -3s; }

/* ---------------------------------------------------------------- steps */
.st { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px auto 0; width: calc(100% - 16px); max-width: 1650px; }
.st .big-card { position: relative; border-radius: var(--rI); min-height: 780px; padding: 40px 40px 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; --gx: 50%; --gy: 110%; }
.st .big-card .lbl { align-self: stretch; justify-content: space-between; color: #8e8e9a; }
.st .big-card h2 { margin-top: 64px; text-align: center; font: 500 clamp(2rem, 3.6vw, 3.2rem)/1.06 var(--head); letter-spacing: -.045em; position: relative; z-index: 2; color: #fff; }
.st .big-card p { margin-top: 18px; text-align: center; font: 500 15px/1.4 var(--sans); color: rgba(255, 255, 255, .85); max-width: 400px; position: relative; z-index: 2; }
.win { position: relative; z-index: 2; margin-top: 44px; width: min(100%, 560px); border-radius: 22px 22px 0 0; background: #fff; color: #0e0e0e; box-shadow: 0 -20px 80px rgba(251, 21, 25, .35); overflow: hidden; flex: 1; }
.win .bar { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #f0f4f8; } .win .bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9d2dc; }
.win .bd { padding: 22px; display: grid; gap: 14px; }
.win .ln { height: 12px; border-radius: 6px; background: #e6ecf3; } .win .ln.s { width: 60%; }
.win .row3 { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: #f0f4f8; }
.win .row3 b { font: 600 14px var(--head); display: block; } .win .row3 small { color: #6b7590; font-size: 12px; }
.win .pgb { height: 8px; border-radius: 5px; background: #e6ecf3; overflow: hidden; } .win .pgb i { display: block; height: 100%; width: 70%; border-radius: 5px; background: var(--redg); animation: pgb 5s ease-in-out infinite; }
@keyframes pgb { 0% { width: 6%; } 70%, 100% { width: 96%; } }
.win .go { height: 46px; border-radius: 12px; background: var(--redg); color: #fff; display: grid; place-items: center; font: 700 13px var(--head); }
.stg { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
.stg .s { position: relative; border-radius: var(--rI); padding: 34px 40px; min-height: 250px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; --gx: 90%; --gy: 40%; }
.stg .s .lbl { color: #fff; }
.stg .s h3 { font: 500 clamp(1.7rem, 2.6vw, 2.4rem)/1.05 var(--head); letter-spacing: -.045em; color: #fff; position: relative; z-index: 2; }
.stg .s .vis { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 1; }
.stg .s .btn { align-self: flex-start; position: relative; z-index: 2; margin-top: 18px; }
.tog { width: 190px; height: 92px; border-radius: 46px; background: linear-gradient(180deg, #8e0a12, #5a050b); padding: 9px; box-shadow: inset 0 4px 14px rgba(0, 0, 0, .5), 0 0 60px rgba(251, 21, 25, .35); }
.tog i { display: block; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a7d, #fb1519 60%, #b3040d); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); animation: tog 4.5s ease-in-out infinite; }
@keyframes tog { 0%, 25% { transform: translateX(0); } 45%, 90% { transform: translateX(98px); } 100% { transform: translateX(0); } }
.stg .s img.v { width: 240px; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .55)); animation: float 6s ease-in-out infinite; }

/* ---------------------------------------------------------------- news */
.nw-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; padding: 80px 64px 72px; }
.rel { position: relative; border-radius: var(--rI); overflow: hidden; background: #0d0a0b; display: flex; flex-direction: column; }
.rel img { width: 100%; height: auto; display: block; }
.rel .cap { padding: 26px 30px 30px; color: #fff; display: grid; gap: 12px; }
.rel .cap h3 { font: 500 26px/1.1 var(--head); letter-spacing: -.035em; } .rel .cap p { color: #a9a9b4; font-weight: 500; font-size: 14.5px; }
.chg { display: grid; align-content: start; }
.chg .e { padding: 26px 0; border-bottom: 1px solid var(--line); }
.chg .e:first-child { padding-top: 6px; }
.chg .m { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu); }
.chg .m b { color: var(--red); font-weight: 500; }
.chg .m .t { padding: 3px 8px; border-radius: 6px; background: var(--redbg); color: var(--red); }
.chg .m .t.fix { background: var(--okbg); color: var(--ok); } .chg .m .t.improve { background: rgba(59, 130, 246, .12); color: #3b82f6; }
.chg h4 { font: 500 24px/1.1 var(--head); letter-spacing: -.035em; margin: 12px 0 12px; }
.chg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.chg li { position: relative; padding-left: 20px; font: 500 14.5px/1.4 var(--sans); }
.chg li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--redg); }
.more { margin-top: 22px; }

/* ---------------------------------------------------------------- client features */
.cf-in { padding: 80px 64px 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; }
.cf-tabs { display: grid; gap: 4px; align-content: start; margin-top: 40px; }
.cf-tabs button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--mu); font: 500 20px var(--head); letter-spacing: -.03em; text-align: left; transition: .2s; }
.cf-tabs button:hover { color: var(--tx); background: var(--s2); }
.cf-tabs button.on { color: var(--tx); background: var(--s2); } .cf-tabs button.on .xi { color: var(--red); }
.cf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; margin-top: 40px; }
.cf-list .f { padding: 24px; border-radius: 22px; background: var(--s2); animation: pg .35s ease; }
.cf-list .f b { display: block; font: 500 19px/1.15 var(--head); letter-spacing: -.03em; margin-bottom: 8px; } .cf-list .f p { color: var(--mu); font: 500 14px/1.45 var(--sans); }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }
.gal a { border-radius: 24px; overflow: hidden; background: #080607; aspect-ratio: 16 / 10; display: block; } .gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .gal a:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------- faq */
.fq-in { display: grid; grid-template-columns: 34% 1fr; gap: 80px; padding: 110px 40px; }
.fq .acc button.hd { padding: 24px 0; } .fq .acc .it { border-bottom-color: rgba(255, 255, 255, .1); }
.fq .acc .tt { font: 500 20px/1.15 var(--head); color: #fff; }
.fq .acc .it.on .tt { -webkit-text-fill-color: transparent; }
.fq .acc .ds { color: rgba(255, 255, 255, .6); font-size: 14.5px; max-width: 640px; }
.fq .acc .it.on .ds { padding-bottom: 24px; }
.fq .acc .ar { width: 28px; height: 28px; border: 0; background: transparent; color: #fff; } .fq .acc .it.on .ar { background: transparent; color: var(--red); }
.sup { position: relative; margin-top: 150px; padding: 30px; border-radius: 22px; background: radial-gradient(ellipse 90% 80% at 100% 100%, rgba(251, 21, 25, .5), #0e0a0b 70%); overflow: hidden; min-height: 240px; border: 1px solid rgba(255, 255, 255, .08); }
.sup h4 { font: 500 24px/1 var(--head); letter-spacing: -.03em; color: #fff; max-width: 190px; } .sup p { margin-top: 14px; font: 500 14.5px/1.35 var(--sans); max-width: 200px; color: #fff; position: relative; z-index: 2; }
.sup img { position: absolute; right: -40px; bottom: -22px; width: 220px; }

/* ---------------------------------------------------------------- cta, footer */
.cta { position: relative; margin: 8px auto 0; width: calc(100% - 16px); max-width: 1650px; min-height: 440px; border-radius: var(--rI); padding: 72px 80px; display: flex; flex-direction: column; justify-content: center; gap: 36px; overflow: hidden; --gx: 86%; --gy: 50%; }
.cta h2 { position: relative; z-index: 2; font: 500 clamp(2.4rem, 5vw, 4.5rem)/.95 var(--head); letter-spacing: -.05em; color: #fff; max-width: 780px; }
.cta .acts { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; }
.cta .btn { height: 54px; }
.cta .btn:not(.primary) { color: #fff; border-color: rgba(255, 255, 255, .26); background: transparent; } .cta .btn:not(.primary) { --hv: #fff; }
.cta .btn:not(.primary):hover { color: #000; border-color: #fff; }
.cta .vis { position: absolute; right: 70px; top: 50%; margin-top: -120px; z-index: 1; width: 340px; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .6)); }
.ftr { margin: 8px auto 0; width: calc(100% - 16px); max-width: 1650px; padding-bottom: 8px; }
.ftr .info { padding: 28px 24px 22px; display: grid; gap: 26px; }
.ftr .top { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between; }
.ftr .top b { font: 600 12.5px var(--sans); } .ftr .top nav { display: flex; flex-wrap: wrap; gap: 8px 28px; } .ftr .top nav a { font-size: 12.5px; color: var(--mu); font-weight: 500; } .ftr .top nav a:hover { color: var(--tx); }
.ftr .legal { font-size: 11px; line-height: 1.6; color: var(--mu2); max-width: 640px; }
.ftr .pill-bar { border-radius: var(--rI); background: #0e0e0e; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: #fff; }
.ftr .pill-bar .brand { padding: 0; font-size: 22px; } .ftr .pill-bar .brand .xlogo { color: var(--red); }
.ftr .pill-bar nav { display: flex; gap: 28px; flex-wrap: wrap; } .ftr .pill-bar nav a { font-size: 13px; color: rgba(255, 255, 255, .85); font-weight: 500; } .ftr .pill-bar nav a:hover { color: #fff; }

/* ---------------------------------------------------------------- auth pages */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 8px; width: calc(100% - 16px); margin: 8px; min-height: calc(100vh - 16px); }
.auth .form-side { position: relative; border-radius: var(--rI); background: var(--s1); border: 1px solid var(--line); display: flex; flex-direction: column; padding: 32px 40px; }
.auth .form-side .tl { display: flex; align-items: center; justify-content: space-between; }
.auth .form-side .tl .brand { padding: 0; } .auth .form-side .tl .brand .xlogo { color: var(--red); }
.auth .form-side .tl .iconbtn { width: 42px; height: 42px; }
.auth .fcard { margin: auto; width: min(100%, 400px); padding: 40px 0; }
.auth .fcard h1 { font: 500 clamp(2rem, 3vw, 2.5rem)/1.05 var(--head); letter-spacing: -.045em; margin: 22px 0 12px; }
.auth .fcard .sub { font-weight: 500; font-size: 15px; margin-bottom: 30px; }
.auth .fcard .btn.primary { margin-top: 4px; }
.auth .foot-l { margin-top: 22px; text-align: center; font-size: 14px; color: var(--mu); font-weight: 500; } .auth .foot-l a { color: var(--red); font-weight: 650; }
.auth .art-side { position: relative; border-radius: var(--rI); overflow: hidden; display: grid; place-items: center; --gx: 50%; --gy: 55%; min-height: 560px; }
.auth .art-side .cap { position: absolute; left: 36px; right: 36px; bottom: 34px; z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 16px; color: #fff; }
.auth .art-side .cap b { font: 500 30px/1.05 var(--head); letter-spacing: -.04em; display: block; max-width: 340px; } .auth .art-side .cap span { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8e8e9a; }
.auth .chips { position: absolute; z-index: 3; left: 36px; top: 34px; display: flex; gap: 8px; flex-wrap: wrap; }
.auth .chips span { padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; backdrop-filter: blur(8px); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .hdr nav { display: none; } .hdr .menu-btn { display: grid; } .hdr .acts { margin-left: auto; }
  .hdr .acts .btn:not(.primary) { display: none; }
}
@media (max-width: 1100px) {
  .hero, .hero .in { min-height: 0; }
  .hero .in { padding: 110px 28px 40px; display: block; }
  .scene { position: relative; right: auto; top: auto; margin: 0 auto -40px; width: 760px; transform-origin: top left; transform: scale(var(--k, 1)); height: calc(700px * var(--k, 1)); transform-box: fill-box; }
  .scene-host { height: calc(700px * var(--k, 1)); margin-top: 20px; position: relative; overflow: hidden; }
  .mouse { display: none; }
  .feat-in, .nw-in, .cf-in, .fq-in, .st { grid-template-columns: 1fr; }
  .fq-in { gap: 40px; padding: 64px 24px; } .sup { margin-top: 40px; max-width: 360px; }
  .sec-in, .feat-in, .nw-in, .cf-in { padding: 56px 28px 48px; }
  .st .big-card { min-height: 640px; } .stg .s { min-height: 220px; }
  .bc.r1, .bc.r2, .bc.r3, .bc.r4, .bc.r5, .bc.r6 { grid-column: span 6; }
  .auth { grid-template-columns: 1fr; } .auth .art-side { min-height: 420px; order: -1; }
  .cta { padding: 56px 32px; } .cta .vis { width: 220px; right: 20px; opacity: .5; }
}
@media (max-width: 640px) {
  .sec-in, .feat-in, .nw-in, .cf-in { padding: 40px 18px 36px; }
  .hero .in { padding: 104px 18px 30px; } .hero .live { gap: 22px; }
  .cs-in { padding: 44px 0 52px 18px; } .cs-hd { margin-right: 18px; } .arrows { display: none; } .cc { flex-basis: min(82vw, 310px); height: 390px; }
  .bc.r1, .bc.r2, .bc.r3, .bc.r4, .bc.r5, .bc.r6 { grid-column: span 12; } .bc { min-height: 300px; }
  .cf-list { grid-template-columns: 1fr; } .gal { grid-template-columns: 1fr; }
  .acc .tt { font-size: 22px; } .stg .s { padding: 26px 24px; } .stg .s .vis { opacity: .35; } .st .big-card { padding: 28px 20px 0; }
  .auth .form-side { padding: 22px 20px; } .auth .art-side { display: none; }
  .ftr .pill-bar { padding: 20px; } .cta { padding: 44px 22px; }
}

@keyframes ptr { 0% { transform: rotate(0deg); } 45%, 90% { transform: rotate(1230deg); } 100% { transform: rotate(0deg); } }
.wheel2 .ptr { transform-origin: 150px 150px; animation: ptr 7s cubic-bezier(.25, .7, .1, 1) infinite; }
.arrowdn { display: grid; place-items: center; color: #a2a2ae; margin: -2px 0; }

/* auth art panel: a full-bleed composition that runs to the panel edges, like the photo on PayHot's login */
.auth .art-side { background: #0d0809; padding: 0; }
.auth .art-side .bgfx { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 55% at 15% 0%, rgba(255, 150, 60, .75), transparent 70%), radial-gradient(ellipse 70% 55% at 90% 100%, rgba(251, 21, 25, .65), transparent 72%), linear-gradient(180deg, #d4141b 0%, #7a0710 38%, #230508 70%, #0d0809 100%); }
.auth .art-side .rays { position: absolute; left: 50%; top: 52%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0 5deg, transparent 5deg 16deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); mask-image: radial-gradient(circle, #000 0, transparent 60%); animation: spin 90s linear infinite; }
.artimg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .9s ease; z-index: 1; }
.artimg.on { opacity: 1; }
.artvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .9s ease; }
.artvid.on { opacity: 1; }
.auth .art-side canvas.matrix { z-index: 1; }
.auth .art-side .cf { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .55)); }
.auth .art-side .c1 { width: 80%; left: 10%; bottom: 8%; animation: float 7s ease-in-out infinite; }
.auth .art-side .c2 { width: 40%; right: -8%; top: 11%; animation: float 9s ease-in-out -3s infinite; filter: blur(1.4px) drop-shadow(0 24px 28px rgba(0, 0, 0, .5)); }
.auth .art-side .c3 { width: 34%; left: -8%; top: 27%; animation: float 8s ease-in-out -1.5s infinite; filter: blur(1px) drop-shadow(0 24px 28px rgba(0, 0, 0, .5)); }
.auth .art-side .c4 { width: 30%; left: -6%; bottom: 3%; animation: float 10s ease-in-out -5s infinite; filter: blur(2.4px) drop-shadow(0 24px 28px rgba(0, 0, 0, .5)); }
.auth .art-side .coinf { right: 12%; bottom: 14%; animation: float 5.5s ease-in-out -2s infinite; }
.auth .art-side .chips, .auth .art-side .cap { z-index: 4; }
.auth .art-side .cap { padding-top: 90px; background: linear-gradient(180deg, transparent, rgba(13, 8, 9, .85)); left: 0; right: 0; bottom: 0; padding: 90px 36px 34px; }
.auth .art-side .chips { top: 30px; }

/* animations are on by default; the switch in the cabinet settings (data-motion="off") freezes every widget in its finished state */
html[data-motion="off"] .wheel2 .ptr { transform: rotate(150deg); }
html[data-motion="off"] .tog i { transform: translateX(98px); }
html[data-motion="off"] .cr-row .b i { transform: none; }

/* hero art: the wave behind everything, the cube video on screen blend, a shade so the headline stays readable */
.hero .artimg { background-position: center 40%; }
.hero .artimg.on { opacity: .5; }
.hero .shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(16, 12, 13, .9) 0%, rgba(16, 12, 13, .62) 34%, rgba(16, 12, 13, .1) 66%, transparent 100%); }
.hero canvas.matrix { z-index: 2; mix-blend-mode: screen; }
.scene .chest { width: 520px; left: 180px; top: 100px; transition: opacity .8s ease; }
.hero.has-vid .scene .chest { opacity: 0; }
.hero .vidhost { position: absolute; right: -6%; top: 5%; width: 74%; height: 90%; z-index: 2; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 50% 64% at 50% 50%, #000 42%, transparent 100%); mask-image: radial-gradient(ellipse 50% 64% at 50% 50%, #000 42%, transparent 100%); }
.hero .vidhost .artvid { object-fit: cover; }
.bc .b3d { position: relative; z-index: 2; width: min(56%, 240px); margin-top: -26px; filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .55)); animation: float 6s ease-in-out infinite; }
.bc .b3d.corner { position: absolute; right: 16px; top: 14px; width: 120px; margin: 0; z-index: 2; animation-duration: 7s; }
.cta .artimg { background-position: center; }
.cta .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10, 6, 7, .92) 0%, rgba(10, 6, 7, .6) 45%, rgba(10, 6, 7, .15) 100%); }
.cta > canvas.matrix { z-index: 1; mix-blend-mode: screen; }

/* auth panel: the picture and the loop run to every edge at any zoom (cover), the drawn composition only shows until they arrive */
.auth .art-side { min-height: calc(100vh - 16px); }
.auth .art-side .artimg { background-position: center 62%; }
.auth .art-side .vidhost { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.auth .art-side .vidhost .artvid { object-position: center 55%; }
.auth .art-side.has-art .cf, .auth .art-side.has-art .rays, .auth .art-side.has-art .bgfx, .auth .art-side.has-art canvas.matrix { display: none; }
.auth .art-side.has-art .cap { background: linear-gradient(180deg, transparent, rgba(13, 8, 9, .8)); }

.cta .vidhost { position: absolute; right: -3%; top: -12%; width: 64%; height: 124%; z-index: 1; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 52% 60% at 50% 50%, #000 40%, transparent 100%); }
.cta .vidhost .artvid { object-fit: cover; }
.cta.has-vid .vis { display: none; }
.bc .vis .b3d { margin-top: -78px; width: min(46%, 200px); }
.auth .art-side .vidhost .artvid { object-position: 46% 55%; }

/* the spinning coin lives bottom-left of the hero scene where the upgrader card used to be */
.scene .coinv { position: absolute; left: 8px; top: 438px; width: 232px; height: 232px; object-fit: contain; filter: drop-shadow(0 28px 26px rgba(0, 0, 0, .6)); transition: opacity .5s ease; }
.scene .coinv.spinvid { transition: none; }

/* item pictures on the landing (real renders of the models) */
.ic.pic { overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc, #888) 36%, transparent), transparent 76%), #1c1c20; }
.ic.pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.mk-row .ic.pic { width: 60px; height: 60px; border-radius: 16px; }
.lst .card .ic.pic { width: 52px; height: 52px; }
.lst .card:has(.ic.pic) { grid-template-columns: 52px 1fr auto; }
.slots6 .s.has-pic { gap: 4px; padding: 10px 6px 12px; }
.slots6 .s img.pic { width: 64%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.slots6 .s:hover img.pic { transform: translateY(-4px) scale(1.04); }