:root{
  --bg:#0c0d10; --bg2:#121319; --card:#181a22; --line:#262936;
  --tx:#e9eaf0; --mut:#9aa0b4; --dim:#6f7590;
  --acc:#f7931a; --acc2:#ff5c8a; --ok:#37c98b; --warn:#ffb02e; --bad:#ff5f56;
  --tatra:#0aa1dd; --slsp:#2f6fed; --vub:#ff5f56;
  --rad:16px; --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.narrow{max-width:780px}
.section{padding:78px 0}
.alt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em}
h2{font-size:clamp(28px,4vw,40px); letter-spacing:-.02em}
h3{font-size:22px}
.sub{color:var(--mut); font-size:18px; max-width:70ch; margin:0 0 34px}
.fine{color:var(--dim); font-size:14px; line-height:1.6}
.h3-sep{margin-top:52px}

/* nav */
.nav{
  position:sticky; top:0; z-index:900; display:flex; align-items:center; gap:22px;
  justify-content:space-between; padding:12px 22px;
  background:rgba(12,13,16,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:20px; color:var(--tx); letter-spacing:-.02em}
.brand span{color:var(--acc2)}
.brand em{font-style:normal; color:var(--acc); font-size:14px; vertical-align:super}
.nav nav{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.nav nav a{color:var(--mut); font-size:15px}
.nav nav a:hover{color:var(--tx); text-decoration:none}
.nav .cta{background:var(--acc); color:#1a1206; padding:8px 16px; border-radius:999px; font-weight:700}
.nav .cta:hover{filter:brightness(1.08)}

/* hero */
.hero{
  padding:96px 0 78px;
  background:
    radial-gradient(900px 460px at 78% -8%, rgba(247,147,26,.20), transparent 62%),
    radial-gradient(760px 420px at 8% 8%, rgba(255,92,138,.14), transparent 60%);
}
.kicker{color:var(--acc); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; margin:0 0 14px}
.hero h1{font-size:clamp(34px,6vw,62px); letter-spacing:-.03em; margin-bottom:20px}
.lead{font-size:19px; color:var(--mut); max-width:65ch; margin:0 0 30px}
.lead strong{color:var(--tx)}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:46px}
.btn{display:inline-block; padding:14px 26px; border-radius:999px; font-weight:700; font-size:16px}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--acc); color:#1a1206}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--line); color:var(--tx)}
.btn-ghost:hover{border-color:var(--acc); color:var(--acc)}
.stats{list-style:none; display:flex; flex-wrap:wrap; gap:14px; padding:0; margin:0}
.stats li{
  background:var(--card); border:1px solid var(--line); border-radius:var(--rad);
  padding:16px 22px; min-width:150px; flex:1 1 150px;
}
.stats b{display:block; font-size:26px; letter-spacing:-.02em}
.stats span{color:var(--dim); font-size:13.5px}

/* roles */
.roles{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; margin-bottom:30px}
.role{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:28px}
.role-sell{border-top:3px solid var(--acc)}
.role-buy{border-top:3px solid var(--acc2)}
.role h3{margin-bottom:6px}
.role-tag{color:var(--dim); font-size:14px; margin:0 0 16px}
.role-tag b{color:var(--mut)}
.role ol{margin:0 0 14px; padding-left:20px}
.role li{margin-bottom:9px; color:var(--mut)}
.role li strong,.role li em{color:var(--tx)}
.role li em{font-style:normal; border-bottom:1px dotted var(--dim)}
.note{margin:0; color:var(--acc); font-size:14.5px; font-weight:600}

/* callouts */
.callout{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:var(--rad); padding:24px 26px}
.callout h4{margin:0 0 8px; font-size:17px}
.callout p{margin:0; color:var(--mut)}
.callout.small{margin-top:26px}
.callout ul{margin:10px 0 0; padding-left:20px; color:var(--mut)}
.callout li{margin-bottom:7px}
.danger-callout{border-left-color:var(--bad)}
.legal{border-left-color:var(--warn)}

/* privacy */
.privacy{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:28px}
.card-good{border-top:3px solid var(--ok)}
.card-warn{border-top:3px solid var(--warn)}
.card .big{font-size:20px; font-weight:700; margin:0 0 14px}
.card-good .big{color:var(--ok)}
.card-warn .big{color:var(--warn)}
.card ul{margin:0 0 14px; padding-left:20px; color:var(--mut)}
.card li{margin-bottom:7px}

/* tables */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--rad); background:var(--card)}
table.limits{width:100%; border-collapse:collapse; min-width:660px; font-size:15px}
table.limits th,table.limits td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.limits th{color:var(--dim); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700}
table.limits tr:last-child td{border-bottom:0}
table.limits td{color:var(--mut)}
table.limits td b{color:var(--tx)}
td.danger{color:var(--bad); font-weight:700}
tr.hl td{background:rgba(247,147,26,.07)}

/* map */
.mapbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:14.5px;
}
.chip input{accent-color:var(--acc); margin:0}
.chip b{color:var(--dim); font-variant-numeric:tabular-nums}
.chip-tatra{border-color:rgba(10,161,221,.55)}
.chip-slsp{border-color:rgba(47,111,237,.55)}
.chip-vub{border-color:rgba(255,95,86,.55)}
#search{
  flex:1 1 220px; min-width:200px; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:10px 18px; color:var(--tx); font-size:14.5px; outline:none;
}
#search:focus{border-color:var(--acc)}
#map{height:min(70vh,620px); border-radius:var(--rad); border:1px solid var(--line); background:#0f1014}
.map-note{margin-top:12px}
.leaflet-popup-content-wrapper{background:var(--card); color:var(--tx); border-radius:12px}
.leaflet-popup-tip{background:var(--card)}
.leaflet-popup-content{margin:14px 16px; font-size:14px; line-height:1.55}
.leaflet-popup-content b{display:block; margin-bottom:3px}
.leaflet-popup-content .addr{color:var(--mut)}
.leaflet-container a.leaflet-popup-close-button{color:var(--dim)}

/* download */
.dl{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 18px}

/* tabs + steps */
.tabs{display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap}
.tab{
  background:var(--card); border:1px solid var(--line); color:var(--mut);
  padding:11px 22px; border-radius:999px; font-size:15px; font-weight:600; cursor:pointer;
}
.tab.active{background:var(--acc); border-color:var(--acc); color:#1a1206}
.tabpanel{display:none}
.tabpanel.active{display:block}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px}
.steps>li{
  display:grid; grid-template-columns:1fr 250px; gap:28px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:26px;
}
.steps h4{margin:0 0 8px; font-size:19px; color:var(--acc)}
.steps p{margin:0 0 10px; color:var(--mut)}
.steps p:last-child{margin-bottom:0}
.steps .tip{font-size:14px; color:var(--dim); border-left:2px solid var(--line); padding-left:12px}
.steps figure{margin:0}
.steps img{width:100%; border-radius:12px; border:1px solid var(--line); display:block}

/* cases */
.case{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:26px; margin-bottom:20px}
.case h4{font-size:19px; margin-bottom:12px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.case p{color:var(--mut); margin:0 0 12px}
.badge{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap}
.badge-bad{background:rgba(255,95,86,.16); color:var(--bad)}
.badge-warn{background:rgba(255,176,46,.16); color:var(--warn)}
.do{border-left:3px solid var(--ok); padding-left:14px}
.do b{color:var(--ok)}
.dont{border-left:3px solid var(--bad); padding-left:14px}
.dont b{color:var(--bad)}
.shots{display:flex; gap:16px; flex-wrap:wrap; margin:16px 0}
.shots figure{margin:0; width:210px}
.shots img{width:100%; border-radius:12px; border:1px solid var(--line); display:block}
.shots figcaption{color:var(--dim); font-size:13px; margin-top:8px}

/* faq */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:18px 22px; margin-bottom:12px}
.faq summary{cursor:pointer; font-weight:600; font-size:16.5px}
.faq summary::marker{color:var(--acc)}
.faq p{color:var(--mut); margin:12px 0 0}

footer{padding:52px 0 70px; border-top:1px solid var(--line); background:var(--bg2)}
footer p{margin:0 0 10px; color:var(--mut)}

@media (max-width:820px){
  .nav nav a:not(.cta){display:none}
  .steps>li{grid-template-columns:1fr}
  .steps figure{max-width:250px}
  .section{padding:58px 0}
}