:root { --bg: #17100C; --pn: #1F1612; --pn2: #271C16; --ln: rgba(255,240,225,.10); --cr: #F5F3EF; --mut: rgba(245,243,239,.55); --dim: rgba(245,243,239,.35); --amb: #FCB124; --or: #F77F12; --win: #3FD08A; --lose: #F0485A; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--cr); font: 400 15px/1.55 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } .dim { color: var(--dim); } .small { font-size: 12px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.row { display: flex; align-items: center; gap: 14px; } .spacer { flex: 1; }
.hot { background: linear-gradient(90deg, #FFC542, #F77F12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.win { color: var(--win); } .lose { color: var(--lose); }

.smoke { position: absolute; left: 0; right: 0; top: 0; height: 820px; z-index: -1; overflow: hidden; pointer-events: none; }
.smoke svg { width: 100%; height: 100%; }

.top { position: sticky; top: 0; z-index: 20; background: rgba(23,16,12,.72); backdrop-filter: blur(12px); }
.top .row { height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px Michroma; letter-spacing: .08em; }
nav { display: flex; gap: 26px; margin-left: 30px; } nav a { text-decoration: none; font: 400 11px Michroma; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); } nav a:hover { color: var(--cr); }
.top .btn.sq { margin-left: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 8px; font: 400 12px Michroma; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid var(--ln); color: var(--cr); background: rgba(245,243,239,.03); }
.btn.fire { background: linear-gradient(180deg, #FFB72A, #F77F12); color: #1a0d02; border: 0; box-shadow: 0 6px 30px rgba(247,127,18,.25); }
.btn.sq { width: 40px; padding: 0; font-size: 15px; font-family: Inter; }
.btn.big { height: 52px; padding: 0 28px; font-size: 13px; }
.btn.full { width: 100%; height: 50px; margin-top: 12px; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

.hero { text-align: center; padding: 70px 0 56px; }
h1 { font: 400 clamp(38px, 6.4vw, 86px)/1.08 Michroma; letter-spacing: -.01em; margin: 0; }
.tag { font: 400 clamp(11px, 1.3vw, 16px) Michroma; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 18px 0 30px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.term { background: var(--pn); border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02); }
.th { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ln); }
.th b { font: 400 14px Michroma; letter-spacing: .08em; }
.tabs { display: flex; gap: 4px; margin-left: 14px; flex-wrap: wrap; }
.tabs button { background: none; border: 1px solid transparent; color: var(--mut); font: 500 12px 'JetBrains Mono'; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.tabs button.on { color: var(--amb); border-color: rgba(252,177,36,.35); background: rgba(252,177,36,.06); }
.pts { color: var(--win); font-size: 13px; }
.tb { display: grid; grid-template-columns: 260px 1fr 330px; min-height: 520px; }
.ph { font: 400 11px Michroma; letter-spacing: .14em; text-transform: uppercase; padding: 14px 16px 10px; } .ph.c { text-align: center; border-bottom: 1px solid var(--ln); }
.feed { border-right: 1px solid var(--ln); display: flex; flex-direction: column; min-width: 0; }
.flt { display: flex; gap: 6px; padding: 0 16px 10px; } .flt button { background: none; border: 1px solid var(--ln); color: var(--mut); font: 500 11px 'JetBrains Mono'; padding: 3px 9px; border-radius: 5px; cursor: pointer; } .flt button.on { color: var(--amb); border-color: rgba(252,177,36,.4); }
.fl { flex: 1; overflow: hidden; max-height: 470px; }
.sw { padding: 9px 16px; border-top: 1px solid var(--ln); font: 400 12px 'JetBrains Mono'; }
.sw .a { display: flex; justify-content: space-between; } .sw .a b { font-weight: 700; } .sw .d { color: var(--dim); font-size: 11px; margin-top: 2px; }
.chart { display: flex; flex-direction: column; min-width: 0; }
.ch-h { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--ln); }
.sym { font-size: 15px; font-weight: 700; } .px { font-size: 22px; font-weight: 700; color: var(--win); }
#cv { width: 100%; height: 440px; display: block; }
.bet { border-left: 1px solid var(--ln); padding: 0 16px 16px; min-width: 0; }
.lab { font: 400 10px Michroma; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 14px 0 7px; display: flex; justify-content: space-between; } .lab .mono { color: var(--amb); font-size: 12px; letter-spacing: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--pn2); border: 1px solid var(--ln); border-radius: 8px; padding: 3px; }
.seg button { background: none; border: 0; color: var(--mut); font: 500 12px 'JetBrains Mono'; padding: 8px 4px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: rgba(252,177,36,.12); color: var(--amb); }
input[type=range] { width: 100%; accent-color: var(--or); }
.zone { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; } .zone span:first-child { color: var(--lose); } .zone span:last-child { color: var(--win); }
.stake { display: grid; grid-template-columns: 1fr 44px 44px; gap: 6px; }
.stake input { background: var(--pn2); border: 1px solid var(--ln); border-radius: 8px; color: var(--cr); padding: 9px 12px; font-size: 15px; outline: none; min-width: 0; }
.stake button { background: var(--pn2); border: 1px solid var(--ln); border-radius: 8px; color: var(--mut); font: 500 12px 'JetBrains Mono'; cursor: pointer; }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--ln); font-size: 13px; } .kv b { color: var(--amb); }
.note { text-align: center; color: var(--dim); font-size: 11px; margin-top: 8px; }
.mine { border-top: 1px solid var(--ln); }
.bl .b { display: grid; grid-template-columns: 80px 1fr 1fr 1fr 130px; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--ln); font: 400 12.5px 'JetBrains Mono'; align-items: center; }
.bl .b.tap { cursor: pointer; } .bl .b.tap:hover { background: rgba(255,255,255,.015); }
.bl .b .st2 { text-align: right; font-weight: 700; }
.empty { padding: 16px; color: var(--dim); font-size: 13px; }

.sec { padding-top: 90px; }
h2 { font: 400 clamp(26px, 3.4vw, 44px) Michroma; margin: 0 0 30px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st { background: var(--pn); border: 1px solid var(--ln); border-radius: 12px; padding: 22px; }
.st > span { color: var(--amb); font-size: 12px; } .st h3 { font: 400 15px Michroma; letter-spacing: .04em; margin: 12px 0 8px; } .st p { color: var(--mut); margin: 0; }
.ver { background: var(--pn); border: 1px solid var(--ln); border-radius: 12px; padding: 18px; }
.vf { display: grid; grid-template-columns: 110px 1fr 1fr 1fr 1fr auto; gap: 8px; }
.vf input, .vf select { background: var(--pn2); border: 1px solid var(--ln); border-radius: 8px; color: var(--cr); padding: 0 12px; height: 40px; font-size: 13px; outline: none; min-width: 0; }
.vout { margin-top: 14px; font-size: 12.5px; line-height: 1.85; color: var(--mut); word-break: break-all; } .vout b { color: var(--cr); } .vout a { color: var(--amb); }
.ctaX { margin-top: 24px; }
.foot { display: flex; justify-content: space-between; gap: 30px; margin-top: 90px; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--ln); color: var(--dim); font-size: 12px; }

@media (max-width: 1100px) {
  .tb { grid-template-columns: 1fr; }
  .feed { order: 3; border-right: 0; border-top: 1px solid var(--ln); } .fl { max-height: 260px; }
  .bet { border-left: 0; border-top: 1px solid var(--ln); }
  nav { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  .top .btn.fire { display: none; }
  .hero { padding: 40px 0 34px; }
  .th { flex-wrap: wrap; } .tabs { order: 5; width: 100%; margin-left: 0; } #headTag { display: none; }
  .bl .b { grid-template-columns: 1fr 1fr; } .bl .b > :nth-child(3), .bl .b > :nth-child(4) { display: none; }
  .steps { grid-template-columns: 1fr; }
  #cv { height: 300px; }
  #symName, #swn { display: none; } .ch-h { gap: 12px; }
  .ctaX { height: auto; padding: 14px 18px; text-align: center; line-height: 1.5; }
  .vf { grid-template-columns: 1fr 1fr; } .vf .btn { grid-column: 1 / -1; }
  .foot { flex-direction: column; gap: 10px; }
}