/* vavadabonus.click — архетип split-hero, ведущий акцент --gold, ns .vbk- */

:root{
  --bg:#191929;        /* основной тёмно-синий фон */
  --surface:#1c2240;   /* панели, карточки */
  --surface-2:#212132; /* вложенные блоки, строки таблиц */
  --raise:#302e40;     /* приподнятые элементы, hover */
  --line:#40445a;      /* границы */
  --line-2:#4d5a85;    /* светлая граница, разделители */
  --crimson:#871628;   /* фирменный тёмно-красный */
  --red:#fe284a;       /* яркий акцент, CTA */
  --gold:#ffde26;      /* золото, цифры, выделения */
  --gold-2:#e8ce3a;    /* приглушённое золото */
  --blue:#30a2d9;      /* холодный акцент */
  --text:#ffffff;
  --muted:#b99e7c;     /* приглушённый текст */
  --muted-2:#646a87;   /* подписи, мелочь */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Golos Text",system-ui,Segoe UI,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
}

h1,h2,h3,.vbk-display{
  font-family:"Russo One",Impact,Arial Black,sans-serif;
  font-weight:400;
  letter-spacing:.2px;
  line-height:1.16;
  margin:0 0 14px;
}

h1{font-size:40px}
h2{font-size:28px}
h3{font-size:20px;line-height:1.24}

p{margin:0 0 15px}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-2)}

img{max-width:100%;height:auto;display:block}

.vbk-wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- шапка ---------- */

.vbk-top{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1c2240,rgba(25,25,41,0));
  padding:16px 0;
}
.vbk-top .vbk-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vbk-mark{display:flex;align-items:center;gap:11px}
.vbk-mark-name{font-family:"Russo One",Arial Black,sans-serif;font-size:21px;color:var(--gold);letter-spacing:.6px}
.vbk-mark-sub{color:var(--muted-2);font-size:13px}
.vbk-top-meta{color:var(--muted);font-size:14px}

/* ---------- split-hero: экран пополам ---------- */

.vbk-hero{padding:38px 0 30px}
.vbk-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;
  align-items:center;
}
.vbk-split-text .vbk-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--gold);
  border-radius:18px;
  padding:6px 15px;
  margin-bottom:16px;
}
.vbk-lead{font-size:19px;color:#e8e6f2}
.vbk-lead .vbk-num{color:var(--gold);font-family:"Russo One",Arial Black,sans-serif}

.vbk-shot{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 54px rgba(0,0,0,.5);
  border:1px solid var(--line-2);
}
.vbk-shot img{width:100%}
.vbk-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.5) 100%);
  pointer-events:none;
}
.vbk-shot-cap{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:16px 18px;
  font-size:14px;
  color:var(--gold-2);
}

/* ---------- KPI ---------- */

.vbk-kpi{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin:28px 0 8px;
}
.vbk-kpi-cell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 14px 30px rgba(0,0,0,.36);
  padding:17px 16px;
}
.vbk-kpi-cell:nth-child(2){border-color:var(--gold);background:var(--surface-2)}
.vbk-kpi-key{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2)}
.vbk-kpi-val{
  font-family:"Russo One",Arial Black,sans-serif;
  font-size:25px;
  color:var(--gold);
  margin:7px 0 3px;
  line-height:1.1;
}
.vbk-kpi-note{font-size:13px;color:var(--muted)}

/* ---------- кнопки ---------- */

.vbk-cta{
  display:inline-block;
  background:var(--red);
  color:var(--text);
  font-family:"Russo One",Arial Black,sans-serif;
  font-size:17px;
  letter-spacing:.4px;
  padding:15px 34px;
  border-radius:18px;
  box-shadow:0 16px 34px rgba(135,22,40,.55);
  margin:10px 0;
}
.vbk-cta:hover{background:var(--crimson);color:var(--text)}
.vbk-cta-wide{display:block;text-align:center}
.vbk-cta-hint{color:var(--muted-2);font-size:13px;margin-top:6px}

/* ---------- секции ---------- */

.vbk-sec{padding:34px 0;border-top:1px solid var(--line)}
.vbk-sec:first-of-type{border-top:0}
.vbk-sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.vbk-sec-idx{
  font-family:"Russo One",Arial Black,sans-serif;
  color:var(--bg);
  background:var(--gold);
  border-radius:18px;
  padding:2px 13px;
  font-size:14px;
}
.vbk-accent{color:var(--gold)}
.vbk-accent-cold{color:var(--blue)}
.vbk-accent-hot{color:var(--red)}
.vbk-quiet{color:var(--muted)}
.vbk-tiny{color:var(--muted-2);font-size:14px}

.vbk-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 16px 34px rgba(0,0,0,.34);
  padding:20px 22px;
  margin:16px 0;
}
.vbk-card-2{background:var(--surface-2);border-color:var(--line-2)}
.vbk-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vbk-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.vbk-list{margin:0 0 14px;padding-left:20px}
.vbk-list li{margin-bottom:8px}
.vbk-list li::marker{color:var(--gold)}

.vbk-pill{
  display:inline-block;
  border:1px solid var(--line-2);
  border-radius:18px;
  padding:5px 13px;
  margin:0 7px 8px 0;
  font-size:14px;
  color:var(--muted);
  background:var(--surface-2);
}
.vbk-pill span{color:var(--gold)}

/* ---------- таблицы ---------- */

.vbk-tablebox{overflow-x:auto;border-radius:18px;border:1px solid var(--line-2);margin:18px 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
caption{
  caption-side:top;
  text-align:left;
  padding:14px 18px 10px;
  color:var(--muted-2);
  font-size:14px;
}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
thead th{
  background:var(--raise);
  color:var(--gold);
  font-family:"Russo One",Arial Black,sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.4px;
}
tbody tr:nth-child(odd){background:var(--surface-2)}
tbody tr:nth-child(even){background:var(--surface)}
tbody tr:last-child td{border-bottom:0}
.vbk-total td{background:var(--crimson);color:var(--text)}
.vbk-total td:first-child{border-bottom-left-radius:18px}

/* ---------- галерея: шахматка в 2 колонки ---------- */

.vbk-board{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:22px 0 6px;
}
.vbk-tile{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 36px rgba(0,0,0,.38);
  overflow:hidden;
}
.vbk-board .vbk-tile:nth-child(even){transform:translateY(34px);border-color:var(--line-2)}
.vbk-board .vbk-tile:nth-child(4n+1){background:var(--surface-2)}
.vbk-tile img{width:100%}
.vbk-tile-body{padding:14px 16px 16px}
.vbk-tile-name{
  font-family:"Russo One",Arial Black,sans-serif;
  font-size:16px;
  color:var(--gold);
  margin-bottom:5px;
}
.vbk-tile-cap{font-size:14px;color:var(--muted);margin:0}
.vbk-board-foot{margin-top:52px}

/* ---------- клуб ---------- */

.vbk-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0}
.vbk-step{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 14px;
  box-shadow:0 12px 26px rgba(0,0,0,.3);
}
.vbk-step:nth-child(5){border-color:var(--gold);background:var(--surface)}
.vbk-step-name{font-family:"Russo One",Arial Black,sans-serif;color:var(--gold);font-size:17px;margin-bottom:6px}
.vbk-step-val{font-size:14px;color:var(--muted)}

/* ---------- отзыв ---------- */

.vbk-quote{
  background:var(--surface-2);
  border:1px solid var(--line-2);
  border-left:4px solid var(--gold);
  border-radius:18px;
  padding:20px 22px;
  margin:20px 0;
  box-shadow:0 14px 30px rgba(0,0,0,.32);
}
.vbk-quote p{margin:0 0 10px;font-size:17px}
.vbk-quote-sign{color:var(--muted-2);font-size:14px}

/* ---------- FAQ ---------- */

details{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 18px;
  margin-bottom:12px;
  box-shadow:0 12px 26px rgba(0,0,0,.3);
}
details[open]{background:var(--surface-2);border-color:var(--line-2)}
summary{
  cursor:pointer;
  font-family:"Russo One",Arial Black,sans-serif;
  font-size:17px;
  color:var(--gold);
  list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"— ";color:var(--red)}
details[open] summary::before{content:"| ";color:var(--gold)}
details p{margin:12px 0 2px}

/* ---------- источники ---------- */

.vbk-src{
  background:var(--surface-2);
  border:1px dashed var(--line-2);
  border-radius:18px;
  padding:20px 22px;
  margin:18px 0;
}
.vbk-src .vbk-list li{color:#d8d5e6}

/* ---------- подвал ---------- */

.vbk-foot{
  border-top:1px solid var(--line-2);
  background:var(--surface);
  padding:28px 0 34px;
  margin-top:26px;
  font-size:14px;
  color:var(--muted-2);
}
.vbk-foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vbk-foot-key{color:var(--gold-2);font-family:"Russo One",Arial Black,sans-serif;font-size:14px;margin-bottom:6px}
.vbk-age{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
}

/* ---------- мобильный ---------- */

@media (max-width:980px){
  .vbk-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbk-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbk-trio{grid-template-columns:minmax(0,1fr)}
  .vbk-foot-grid{grid-template-columns:minmax(0,1fr)}
  .vbk-split{grid-template-columns:minmax(0,1fr);gap:22px}
  h1{font-size:33px}
}

@media (max-width:640px){
  body{font-size:16px}
  .vbk-wrap{padding:0 16px}
  h1{font-size:27px}
  h2{font-size:22px}
  h3{font-size:18px}
  .vbk-kpi,.vbk-steps,.vbk-duo,.vbk-board{grid-template-columns:minmax(0,1fr)}
  .vbk-board .vbk-tile:nth-child(even){transform:none}
  .vbk-board-foot{margin-top:0}
  .vbk-kpi-val{font-size:22px}
  .vbk-cta{display:block;text-align:center;padding:14px 18px}
  table{min-width:520px}
  .vbk-card{padding:16px 15px}
  .vbk-lead{font-size:17px}
}