body{

background:#0f1117;
color:#e6e6e6;
font-family:system-ui;
line-height:1.6;

}


/* header */

header{

background:#141720;
border-bottom:1px solid #222;
padding:15px 0;

}

.header-wrap{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo{

font-size:24px;
font-weight:800;
color:#00ffa2;
text-decoration:none;

}

.logo span{

color:white;

}


/* hero */

.hero{

padding:70px 0;
text-align:center;

}

.hero h1{

font-size:42px;
font-weight:800;

}

.hero p{

color:#bbb;
max-width:700px;
margin:auto;

}


/* cards */

.site-card{

background:#171a22;
border:1px solid #2a2d37;
border-radius:12px;
padding:25px;
margin-bottom:20px;

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;

}

.site-left{

display:flex;
align-items:center;
gap:15px;

}

.site-logo{

width:115px;
height:60px;
background:#171a22;
border-radius:10px;

display:flex;
align-items:center;
justify-content:center;

font-weight:700;

}

.site-title{

font-size:18px;
font-weight:700;

}

.site-bonus{

color:#00ffa2;

}

.btn-play{

background:#00ffa2;
border:none;
padding:10px 20px;
font-weight:700;
border-radius:8px;
text-decoration: none;
color: #000;
}

@media(max-width:600px){
.btn-play{

background:#00ffa2;
border:none;
padding:10px 20px;
font-weight:700;
border-radius:8px;
text-decoration: none;
color: #000;
width: 80%;
    text-align: center;
        margin-left: auto;
    margin-right: auto;
}

}

/* article */

.article{

background:#151821;
padding:40px;
border-radius:12px;
margin-top:40px;

}


/* table */

.table-wrap{

overflow-x:auto;

}

table{

width:100%;
border-collapse:collapse;
margin-top:20px;

}

th,td{

padding:12px;
border-bottom:1px solid #333;

}

th{

color:#00ffa2;

}


/* FAQ */

/* FAQ – стилизиран за тъмен сайт */
.faq-container {
  max-width: 1100px;
  margin: 20px auto;
  font-family: system-ui;
}

.faq-item {
  border-bottom: 1px solid #222;
  background: #171a22;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: #171a22;
  border: none;
  padding: 18px 20px;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: #e6e6e6;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}

.faq-question:hover {
  background: #1f212b;
}

.faq-question::after {
  content: '+';
  position: absolute;
  right: 20px;
  font-size: 20px;
  color: #00ffa2;
  transition: transform 0.3s;
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: #151821;
  padding: 0 20px;
  color: #bbb;
  font-size: 16px;
}

.faq-item.active .faq-answer {
  max-height: 500px; /* увеличи при по-дълъг текст */
  padding: 15px 20px;
}



/* author */

.author-box{

background:#171a22;
padding:25px;
border-radius:12px;
margin-top:40px;

display:flex;
gap:15px;
align-items:center;

}

.author-avatar{

width:70px;
height:70px;
background:#222;
border-radius:10px;

}


/* footer */

footer{

margin-top:60px;
padding:30px;
border-top:1px solid #222;
text-align:center;
color:#888;

}


img, svg {
    vertical-align: middle;
    width: 100%;
}




.site-left{
display:flex;
align-items:center;
gap:15px;
}

/* ЛЕНТА */
.divider{
width:1px;
height:60px;
background:#2f3340;
opacity:0.8;
}

/* текст блок */
.site-left > div:last-child{
display:flex;
flex-direction:column;
}

@media(max-width:600px){

.divider{
height:30px;
}

}
.site-card{
display:flex;
justify-content:space-between;
align-items:center; /* КЛЮЧОВО - центрира всичко вертикално */
}

.site-left{
display:flex;
align-items:center; /* центрира логото + бонуса */
gap:20px;
}

/* махни всякакви height / margin от бонуса */
.site-bonus{
color:#00ffa2;
font-size:21px;
display:flex;
align-items:center;
text-align: center;
}