:root{
  --bg:#0b0c12;
  --panel:#10131a;
  --ink:#e6e8ee;
  --muted:#9aa1ad;
  --gold:#ffd34d;
  --gold2:#ffef9a;
  --ring: rgba(255, 211, 77, 0.2);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 60% -10%, #1a1c28 0%, var(--bg) 60%) var(--bg);
}

/* News bar */
.newsbar{
  position:sticky; top:0; z-index:1000; display:flex; align-items:center; gap:10px;
  background:#060708; color:#cbd0da; padding:8px 10px; border-bottom:1px solid #0f1116;
  font-weight:600; letter-spacing:.1px
}
.news-viewport{flex:1; overflow:hidden; text-align:center}
#news-text{white-space:nowrap; transition: transform .3s ease}
.news-prev,.news-next{
  background:transparent; color:#cbd0da; border:1px solid #23262f; border-radius:8px; width:28px; height:28px; cursor:pointer
}
.news-prev:hover,.news-next:hover{border-color:#3a3e49}

/* Nav */
.nav{
  position:sticky; top:40px; z-index:999; display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background: linear-gradient(180deg, rgba(16,19,26,.9), rgba(16,19,26,.6));
  border-bottom:1px solid rgba(255,211,77,.16); backdrop-filter: blur(6px)
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800}
.brand img{width:42px; height:42px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.links{display:flex; gap:16px; align-items:center}
.links a{color:var(--ink); text-decoration:none; opacity:.88}
.links a:hover{opacity:1}
.hamburger{display:none; background:transparent; border:0; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:#cbd0da; margin:4px 0}

.btn{display:inline-block; border-radius:12px; padding:12px 16px; font-weight:800; text-decoration:none; cursor:pointer; border:1px solid rgba(229,231,235,.15); color:var(--ink)}
.btn.primary{background:linear-gradient(180deg,var(--gold),var(--gold2)); color:#0b0b0b; border:0; box-shadow:0 10px 30px rgba(255,211,77,.18)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px}
.btn.block{display:block; text-align:center}

/* Hero */
.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:center; padding: clamp(22px, 6vw, 64px)}
.badge{display:inline-block; background:#0e1118; border:1px solid rgba(255,211,77,.22); color:var(--ink); border-radius:10px; padding:6px 8px; font-weight:800}
.badge .sub{font-weight:600; color:var(--muted); margin-left:6px}
.hero h1{font-size: clamp(28px, 6vw, 54px); line-height:1.06; margin:12px 0}
.checks{list-style:none; padding:0; margin:0 0 16px}
.checks li{padding:8px 0 8px 28px; position:relative; color:#cbd0da}
.checks li::before{content:"⚡"; position:absolute; left:0; top:5px; color:var(--gold)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.trust{display:flex; align-items:center; gap:10px; margin-top:12px; color:#a2a8b4}
.stars{letter-spacing:2px}

.hero-right{display:flex; flex-direction:column; gap:10px}
.swap-cards{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.swap-card{background: linear-gradient(180deg, rgba(255,211,77,.05), rgba(16,19,26,.7)); border:1px solid rgba(255,211,77,.18); border-radius:16px; padding:14px; min-height:120px}
.hint{color:#97a0ae; font-size:12px}

/* Sections */
.section{padding: clamp(22px, 6vw, 64px)}
.section.alt{background: linear-gradient(180deg, rgba(255,211,77,.05), rgba(16,19,26,.3)); border-top:1px solid rgba(255,211,77,.12); border-bottom:1px solid rgba(255,211,77,.12)}
.section h2{font-size: clamp(22px, 4.8vw, 36px); margin: 0 0 12px}
.grid{display:grid; gap:14px}
.grid.two{grid-template-columns: 1fr 1fr}
.grid.three{grid-template-columns: repeat(3, 1fr)}
.card{background: linear-gradient(180deg, rgba(255,211,77,.05), rgba(16,19,26,.7)); border:1px solid rgba(255,211,77,.18); border-radius:16px; padding:14px}
.price{background: linear-gradient(180deg, rgba(255,211,77,.05), rgba(16,19,26,.7)); border:1px solid rgba(255,211,77,.18); border-radius:16px; padding:16px; text-align:center}
.price.highlight{box-shadow: 0 10px 40px rgba(255,211,77,.18); border-color: rgba(255,211,77,.35)}
.price .num{font-size:28px; font-weight:800; margin:10px 0}
.faq{display:flex; flex-direction:column; gap:4px; padding:12px; border:1px dashed rgba(255,211,77,.2); border-radius:12px; text-decoration:none; color:var(--ink)}

/* Contact */
form.contact{display:grid; grid-template-columns:1fr 1fr; gap:12px}
form.contact input, form.contact textarea{
  grid-column: span 1;
  background:#0e1118; color:var(--ink); border:1px solid rgba(255,211,77,.2); border-radius:12px; padding:12px
}
form.contact textarea{grid-column: 1 / -1}
form.contact button{grid-column: 1 / -1; justify-self:start}

/* Footer */
.footer{padding:18px; text-align:center; color:#8a91a1; border-top:1px solid rgba(255,211,77,.12)}

/* Responsive */
@media (max-width: 980px){
  .nav{top:40px}
  .hero{grid-template-columns: 1fr}
  .grid.three{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .links{display:none}
  .hamburger{display:block}
  .grid.two, .grid.three{grid-template-columns: 1fr}
  form.contact{grid-template-columns:1fr}
}