* Mad Casino — Onyx & Gold: quiet 24-karat luxury */

body{
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, color-mix(in srgb, var(--panel) 55%, transparent), transparent 70%),
    var(--bg);
}

h1,h2,h3,.hero-title,.offer-amount{
  color:var(--text);
  font-weight:700;
  letter-spacing:0.02em;
  font-style:normal;
}

.hero-title{
  letter-spacing:0.03em;
  position:relative;
  animation:fadeUp .9s ease both;
}
.hero-title::after{
  content:"";
  display:block;
  width:88px;
  height:1px;
  margin-top:22px;
  background:var(--accent);
}
.hero-sub{color:var(--text-2);animation:fadeUp 1.1s ease both .1s}
.hero-actions{animation:fadeUp 1.1s ease both .2s}

.fact{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.fact b{color:var(--accent);font-weight:700}

.badge{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text-2);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:.72em;
  border-radius:999px;
}

.card,.feature,.faq-item,.offer,.access{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.7);
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  animation:fadeUp .8s ease both;
}
.card:hover,.feature:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.8);
}

.feature .icon,.access .icon{
  border:1px solid var(--accent);
  border-radius:calc(var(--radius) / 2);
  color:var(--accent);
  background:var(--panel-2);
}

.btn{
  border-radius:2px;
  letter-spacing:0.05em;
  transition:all .3s ease;
}
.btn-primary{
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
}
.btn-primary:hover{
  background:transparent;
  color:var(--accent);
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--text);
}
.btn-ghost:hover{
  background:var(--accent);
  color:var(--on-accent);
}

.tabs{border-bottom:1px solid var(--line)}
.tab{
  color:var(--text-2);
  border-bottom:1px solid transparent;
  border-radius:0;
}
.tab.active,.tab:hover{
  color:var(--accent);
  border-bottom:1px solid var(--accent);
}

.tile{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile img{transition:transform .5s ease;filter:saturate(.9)}
.tile:hover img{transform:scale(1.04)}
.tile.noimg{
  background:var(--panel-2);
  color:var(--text-2);
}
.tile .gp{color:var(--accent);letter-spacing:0.06em;text-transform:uppercase;font-size:.7em}
.tile .nm{color:var(--text)}

.offer{
  border:1px solid var(--accent);
  background:var(--panel-2);
}
.offer-badge{
  color:var(--accent);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:.75em;
}
.offer-amount{color:var(--accent);letter-spacing:0.01em}

.chips{gap:10px}
.chip{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text-2);
  border-radius:999px;
  transition:border-color .3s ease, color .3s ease;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}

.access{border-color:var(--line)}
.access .btn{margin-top:4px}

.trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--text-2);
}
.trust .t18{
  border:1px solid var(--accent);
  border-radius:50%;
  color:var(--accent);
}

.faq-q{color:var(--text);font-weight:600}
.faq-item{border-color:var(--line)}
.faq-item.active,.faq-item:hover{border-color:var(--accent)}

.article table.table{border:1px solid var(--line)}
.article table.table th{
  color:var(--accent);
  border-bottom:1px solid var(--accent);
  letter-spacing:0.03em;
}
.article table.table td{border-bottom:1px solid var(--line)}
.article a{color:var(--accent);border-bottom:1px solid var(--line)}
.article a:hover{border-color:var(--accent)}

.site-header{
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.foot-cols{border-top:1px solid var(--line)}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}