:root{
  --bg:#0b0f1a;
  --panel:#0e1523;
  --elev:#101826;          /* было не задано — теперь есть */
  --card:#101a2b;
  --text:#e8edf6;
  --muted:#9aa4b2;
  --brand:#7cffe3;
  --accent:#73a0ff;
  --border:#1d2a40;
  --highlight:#1a2540;
}

/* Light theme (если переключишься) */
html[data-theme="light"]{
  --bg:#f5f7ff;
  --panel:#eef2ff;
  --elev:#edf1ff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#4b5565;
  --border:#cdd9ee;
  --highlight:#dfe7ff;
  --brand:#006b5a;
  --accent:#2c5bff;
}

.legend{margin-top:8px; margin-bottom:12px; background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:16px 18px!important;}
.legend-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:10px;}
.legend-card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px;}
.legend-h{font-weight:800; margin-bottom:6px;}
.legend-p{color:var(--muted); line-height:1.55;}
.legend .note{margin-top:10px; color:var(--muted);}

.title{font-size: 24px;}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}
img{max-width:200px; height:auto; display:block}
a{color:var(--accent); text-decoration:none}

/* layout */
.container{max-width:1100px; margin:0 auto; padding:0 18px}
.section{padding:18px 0}
.hero{padding:20px 0 8px}
.hero h1{font-size:40px; margin:6px 0 6px}
.muted{color:var(--muted)}

/* header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(8px);
  background:rgba(10,14,24,.6);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{ overflow:visible;
  max-width:1100px; margin:0 auto; padding:18px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--brand); font-weight:800; letter-spacing:.3px}
.main-nav{display:flex; gap:10px; flex-wrap:wrap}
.main-nav a{padding:8px 12px; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:12px; font-size:14px}
.main-nav a.active{
  background:var(--accent);
  color:#081225;
  border-color:transparent;
  box-shadow:0 6px 18px rgba(115,160,255,.25);
}
html[data-theme="light"] .main-nav a.active{ color:#081225; }


.desktop-only{display:flex}
@media (max-width:860px){ .desktop-only{display:none} }

/* badges */
.badges{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.badge{font-size:12px; padding:6px 10px; border:1px solid var(--border); background:var(--panel); color:var(--muted); border-radius:999px}

/* cards */
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.22)}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.logo{width:158px; height:58px; object-fit:contain}
.card .desc{color:var(--muted); min-height:40px}
.facts{list-style:disc; padding-left:20px; margin:8px 0; color:var(--text)}
.proscons{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.proscons .h{font-weight:700; font-size:14px; margin:4px 0}
.proscons ul{padding-left:18px; margin:4px 0}
@media (max-width:640px){ .proscons{grid-template-columns:1fr} }

/* показываем бургер только на мобилках */
.mobile-only{ display:none; }
@media (max-width:860px){ .mobile-only{ display:inline-flex; } .desktop-only{ display:none; } }

/* бургер */
.hamburger{
  align-items:center; justify-content:center;
  width:40px; height:36px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
}
.hamburger span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; }
.hamburger span + span{ margin-top:4px; }

/* затемнение */
.nav-backdrop{ pointer-events:none;
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .2s ease; z-index:2000;
}
.nav-backdrop.open{ pointer-events:auto; opacity:1; }

/* drawer */
.mobile-nav{
  position:fixed; inset:0 auto 0 0; right:0;
  width: 100%; height:100%;
  background:var(--panel); border-left:1px solid var(--border);
  transform:translateX(100%); opacity:0;
  transition:transform .22s ease, opacity .2s ease;
  z-index:2100; padding:14px; overflow:auto; -webkit-overflow-scrolling:touch;
  box-shadow:-8px 0 30px rgba(0,0,0,.35);
}
.mobile-nav.open{ transform:translateX(0); opacity:1; }

.mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.brand.small{ gap:8px; color:var(--brand); font-weight:800; display:flex; align-items:center; }
.mobile-nav .close{ border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px; padding:6px 10px; }

.mobile-menu{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.mobile-menu a{
  display:block; padding:10px 12px; border-radius:12px;
  background:var(--card); border:1px solid var(--border); color:var(--text); text-decoration:none;
}
.mobile-menu a.active{ background:var(--accent); color:#0b1220; border-color:transparent; }

.mobile-lang{ margin-top:16px; }
.mobile-lang .lbl{ font-weight:700; margin-bottom:6px; color:var(--muted); }
.mobile-lang .grid{ display:flex; flex-wrap:wrap; gap:8px; }
.mobile-lang .pill{
  padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px;
}
.mobile-lang .pill.active{ background:var(--accent); color:#0b1220; border-color:transparent; }

/* когда меню открыто — блокируем прокрутку и горизонтальный скролл */
body.nav-open{ overflow:hidden; }



/* кнопка */
.btn{
  --btn-bg:#16233b;
  --btn-fg:var(--text);
  --btn-br:12px;
  --btn-bc:var(--border);
  --btn-shadow:0 6px 18px rgba(0,0,0,.25);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:var(--btn-br);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bc);
  font-weight:700; line-height:1; white-space:nowrap;
  box-shadow:var(--btn-shadow);
  transition:transform .15s ease, box-shadow .25s ease, filter .2s ease, background .25s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.28) }
.btn:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.28) }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(94,161,255,.35), 0 8px 24px rgba(94,161,255,.25) }
.btn.cta{
  --g1:var(--accent); --g2:#8fb3ff; --btn-fg:#081225; --btn-bc:transparent;
  background:linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%); border:none;
  box-shadow:0 12px 28px rgba(115,160,255,.30), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
}
.btn.cta::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background:radial-gradient(120% 120% at 50% -20%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.btn.cta::after{
  content:""; position:absolute; top:-120%; left:-30%; width:40%; height:340%;
  transform:rotate(25deg) translateX(-120%);
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 100%);
  filter:blur(1px); transition:transform .7s cubic-bezier(.2,.9,.2,1); pointer-events:none;
}
.btn.cta:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(115,160,255,.36), 0 0 0 1px rgba(255,255,255,.06) inset; filter:saturate(1.05) }
.btn.cta:hover::before{ opacity:.5 }
.btn.cta:hover::after{ transform:rotate(25deg) translateX(220%) }
.btn .icon{ transition:transform .2s ease; display:inline-flex }
.btn:hover .icon{ transform:translateX(2px) }
.btn.sm{ padding:15px 15px }
.btn.lg{ padding:14px 18px; font-size:1.06rem }
.btn[disabled], .btn.disabled{ opacity:.6; pointer-events:none }

/* language switcher */
.lang-switcher{ position:relative; z-index:1200 }
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--elev); color:var(--text);
  font-weight:800; letter-spacing:.3px;
}
.lang-btn .code{min-width:2.2ch; text-align:center}
.lang-btn svg{width:14px; height:14px; opacity:.75; transition:transform .18s ease}
.lang-btn[aria-expanded="true"] svg{ transform:rotate(180deg) }
.lang-menu{ z-index:1200;
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--elev); border:1px solid var(--border);
  border-radius:12px; padding:8px; min-width:140px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
  opacity:0; transform:translateY(-6px) scale(.98);
  pointer-events:none; transition:opacity .14s ease, transform .18s ease;
}
.lang-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
.lang-menu a{
  display:block; text-align:center; font-weight:800; letter-spacing:.3px;
  padding:10px 12px; border-radius:10px; color:var(--text);
  border:1px solid transparent;
}
.lang-menu a:hover{ background:#131c2a; border-color:var(--border) }

.header,.topbar{overflow:visible}

/* exchange page hero */
.exchange-hero{display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:center; margin:10px 0 18px}
.logo-link{width: 240px; align-items:center; justify-content:center; background:linear-gradient(145deg,#0f1828,#0b1220);
  border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 14px 32px rgba(0,0,0,.25)}
.logo-link:hover{transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,0,0,.3)}
.logo-xl{max-height:90px; width:auto}

/* facts grid */
.facts.section{margin-top:8px}
.facts-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px}
.fact{background:var(--elev); border:1px solid var(--border); border-radius:14px; padding:10px}
.fact .k{font-size:12px; color:var(--muted)}
.fact .v{font-weight:700}

/* rich sections */
.section h2{margin:18px 0 8px}
.richtext{color:var(--text)}
.richtext p{margin:10px 0}
.richtext ul{margin:8px 0 8px 18px}
.two-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:760px){
  .exchange-hero{grid-template-columns:1fr; gap:12px}
  .two-cols{grid-template-columns:1fr}
}

/* footer */
.footer{border-top:1px solid var(--border); margin-top:20px; padding:14px 0}

.widget-shell{
  background: transparent;
  border: none;
  padding: 0;
}
.widget-wrap{
  max-width: 660px;
  margin: 0 auto;
  padding: 20px;
}
.widget-frame{
  display:block;
  width:100%;
  min-height:560px;
  border:0;
  border-radius:16px;
  /* страхуемся от белых «полей» вокруг карточки внутри iframe */
  background:#0f1828;
  overflow:hidden;
}
@media (max-width:640px){
  .widget-wrap{ padding:12px; }
  .widget-frame{ min-height:620px; }
}



/* ===== Background layer ===== */
#bg-layer{
  position:fixed; inset:0; z-index:0; pointer-events:none;  /* не перехватывает клики */
}

/* мягкие «небулы» как на bittab */
.bg-gradient{
  position:absolute; inset:0; filter:blur(60px); opacity:.55;
  background:
    radial-gradient(600px 400px at 10% 10%, rgba(124,255,227,.35) 0%, rgba(124,255,227,0) 60%),
    radial-gradient(700px 420px at 85% 15%, rgba(115,160,255,.35) 0%, rgba(115,160,255,0) 60%),
    radial-gradient(600px 360px at 50% 90%, rgba(40,60,120,.35) 0%, rgba(40,60,120,0) 65%);
}
html[data-theme="light"] .bg-gradient{
  opacity:.45;
  filter:blur(70px);
  background:
    radial-gradient(600px 400px at 12% 12%, rgba(0,194,111,.18) 0%, rgba(0,194,111,0) 60%),
    radial-gradient(720px 420px at 86% 14%, rgba(115,160,255,.22) 0%, rgba(115,160,255,0) 60%),
    radial-gradient(640px 360px at 52% 92%, rgba(90,120,255,.12) 0%, rgba(90,120,255,0) 65%);
}

/* контейнер для canvas tsParticles */
#bg-particles{
  position:absolute; inset:0;
}

/* чтобы хедер/контент были над фоном */
.site-header, main, .wrap, .container { position:relative;  overflow:visible; }