/* plinko-bonus.pro — архетип abacus, namespace abk */

:root{
  --bg:#FFFFFF;          /* фон страницы — светлая тема, как на оригинале */
  --bg-soft:#FFF6F9;     /* очень светлая розовая подложка */
  --surface:#FFE6EF;     /* заливка секций и карточек */
  --surface-2:#FFD3E2;   /* вторая заливка, таблицы и выделенные блоки */
  --line:#FFB9D0;        /* границы, разделители, рамки таблиц */
  --pink:#FF6FA3;        /* основной акцент, фон главной кнопки */
  --pink-soft:#FF9FBD;   /* ховер, второстепенные акценты */
  --pink-mid:#E85F91;    /* активное состояние */
  --pink-deep:#D94F85;   /* нажатие */
  --plum:#4A1D2C;        /* основной текст */
  --plum-soft:#4E3441;   /* подписи, второстепенный текст */
  --gold:#FFBF19;        /* рейтинг, значки, акцент в цифрах */
  --green:#15AC24;       /* «да» в таблицах сравнения */
  --red:#E40539;         /* «нет» в таблицах сравнения */
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--plum);
  font-family:'Ubuntu',system-ui,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.66;
}

/* ---------- каркас счётов: рамка и прутки ---------- */

.abk-frame{
  max-width:1060px;
  margin:0 auto;
  padding:0 20px;
}

.abk-rod{
  height:6px;
  border-top:2px solid var(--line);
  border-bottom:2px solid var(--line);
  background:var(--bg-soft);
  margin:0;
}

/* ---------- шапка: счёты, лого по центру, бусины по краям ---------- */

.abk-top{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg);
  border-bottom:3px solid var(--plum);
  box-shadow:0 2px 0 var(--line);
}

.abk-top-grid{
  max-width:1060px;
  margin:0 auto;
  padding:10px 20px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}

.abk-top-left{justify-self:start}
.abk-top-right{justify-self:end}

.abk-mark{
  justify-self:center;
  text-align:center;
  font-family:'Unbounded',Impact,sans-serif;
  font-weight:700;
  font-size:1.18rem;
  letter-spacing:.06em;
  line-height:1.15;
  color:var(--plum);
  text-transform:uppercase;
}

.abk-mark span{
  display:block;
  font-family:'Ubuntu',sans-serif;
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.34em;
  color:var(--pink-mid);
  text-transform:uppercase;
}

/* бусины-разделители по бокам вордмарка */
.abk-mark::before,.abk-mark::after{
  content:'';
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--pink-soft);
  vertical-align:middle;
  margin:0 8px;
}

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

.abk-go,.abk-go-2{
  display:inline-block;
  border-radius:20px;
  padding:.625rem 1.25rem;
  font-family:'Unbounded',sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s,color .15s;
}

.abk-go{
  background:var(--pink);
  color:#FFFFFF;
  border:2px solid var(--pink);
}
.abk-go:hover{background:var(--pink-mid);border-color:var(--pink-mid)}
.abk-go:active{background:var(--pink-deep);border-color:var(--pink-deep)}

.abk-go-2{
  background:transparent;
  color:var(--pink);
  border:2px solid var(--pink);
}
.abk-go-2:hover{background:var(--pink-soft);color:#FFFFFF}
.abk-go-2:active{background:var(--pink-deep);color:#FFFFFF}

.abk-go-big{
  font-size:.86rem;
  padding:.8rem 1.9rem;
}

.abk-cta{
  margin:26px 0 4px;
  text-align:center;
}

.abk-cta p{
  margin:0 0 12px;
  font-size:.95rem;
  color:var(--plum-soft);
}

/* ---------- типографика ---------- */

h1,h2,h3{
  font-family:'Unbounded',Impact,sans-serif;
  font-weight:700;
  line-height:1.22;
  color:var(--plum);
  margin:0 0 14px;
}

h1{font-size:2rem;letter-spacing:-.01em}
h2{font-size:1.32rem;margin-top:0}
h3{font-size:1.02rem;margin-top:22px}

p{margin:0 0 14px}

.abk-lead{
  font-size:1.06rem;
  color:var(--plum-soft);
  max-width:64ch;
}

.abk-num{color:var(--pink-mid);font-weight:700}
.abk-key{color:var(--plum);font-weight:700}
.abk-gold{color:var(--gold);font-weight:700}
.abk-yes{color:var(--green);font-weight:700}
.abk-no{color:var(--red);font-weight:700}
.abk-note{font-size:.88rem;color:var(--plum-soft)}

/* ---------- секции: каждая — отдельный ряд счётов ---------- */

.abk-row{
  padding:34px 0;
  border-bottom:2px solid var(--line);
}
.abk-row:nth-of-type(even){background:var(--bg-soft)}
.abk-row.abk-fill{background:var(--surface)}

.abk-row h2::before{
  content:'';
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--pink);
  margin-right:10px;
  vertical-align:baseline;
}

/* ---------- первый экран ---------- */

.abk-hero{
  padding:30px 0 34px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-soft) 100%);
  border-bottom:3px solid var(--plum);
}

.abk-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:28px;
  align-items:start;
}

/* ---------- KPI: бусины на пруткe ---------- */

.abk-kpi{
  list-style:none;
  margin:20px 0 0;
  padding:12px 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  border-top:2px solid var(--plum);
  border-bottom:2px solid var(--plum);
}

.abk-kpi li{
  background:var(--bg);
  border:2px solid var(--line);
  border-radius:16px;
  padding:10px 8px;
  text-align:center;
}

.abk-kpi b,.abk-kpi .abk-kpi-v{
  display:block;
  font-family:'Unbounded',sans-serif;
  font-size:1.02rem;
  font-weight:700;
  color:var(--pink-mid);
}

.abk-kpi .abk-kpi-l{
  display:block;
  font-size:.7rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--plum-soft);
  margin-top:4px;
}

/* ---------- SVG ---------- */

.abk-art{
  background:var(--bg);
  border:2px solid var(--plum);
  border-radius:18px;
  padding:14px;
}

.abk-art svg{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

.abk-art figcaption{
  margin-top:10px;
  font-size:.82rem;
  color:var(--plum-soft);
  text-align:center;
}

figure.abk-art{margin:18px 0}

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

.abk-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:16px 0;
  border-radius:14px;
}

table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  background:var(--bg);
  font-size:.92rem;
}

caption{
  caption-side:top;
  text-align:left;
  font-size:.86rem;
  color:var(--plum-soft);
  padding:0 0 8px;
}

th,td{
  border:1px solid var(--plum);
  padding:8px 10px;
  text-align:center;
}

thead th{
  background:var(--surface-2);
  font-family:'Unbounded',sans-serif;
  font-size:.76rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}

tbody tr:nth-child(odd) td{background:var(--bg-soft)}

/* ---------- карточки-бусины ---------- */

.abk-beads{
  list-style:none;
  margin:16px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
}

.abk-beads li{
  background:var(--bg);
  border:2px solid var(--line);
  border-radius:20px;
  padding:14px 16px;
  font-size:.92rem;
}

.abk-beads li span{
  display:block;
  font-family:'Unbounded',sans-serif;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--pink-mid);
  margin-bottom:6px;
}

.abk-list{
  margin:0 0 14px;
  padding-left:20px;
}
.abk-list li{margin-bottom:7px}

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

details{
  border:2px solid var(--line);
  border-radius:16px;
  background:var(--bg);
  padding:10px 16px;
  margin-bottom:10px;
}

summary{
  cursor:pointer;
  font-family:'Unbounded',sans-serif;
  font-size:.93rem;
  font-weight:600;
  color:var(--plum);
  list-style:none;
}

summary::-webkit-details-marker{display:none}

summary::before{
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--pink-soft);
  margin-right:10px;
}

details[open] summary::before{background:var(--pink-deep)}
details[open] summary{color:var(--pink-mid)}
details p{margin:10px 0 4px;font-size:.94rem}

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

.abk-voice{
  border-left:6px solid var(--pink);
  background:var(--surface);
  border-radius:0 16px 16px 0;
  padding:14px 18px;
  margin:18px 0;
}

.abk-voice p{margin:0 0 8px;font-size:.95rem}
.abk-voice cite{font-style:normal;font-size:.84rem;color:var(--plum-soft)}

/* ---------- блок источников ---------- */

.abk-ledger{
  background:var(--surface-2);
  border:2px solid var(--plum);
  border-radius:20px;
  padding:20px 22px;
}

.abk-ledger h3{margin-top:0}

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

.abk-foot{
  background:var(--bg-soft);
  border-top:3px solid var(--plum);
  padding:26px 0 32px;
  font-size:.86rem;
  color:var(--plum-soft);
}

.abk-foot p{margin:0 0 9px}

.abk-age{
  display:inline-block;
  border:2px solid var(--pink);
  border-radius:20px;
  padding:7px 14px;
  color:var(--plum);
  font-size:.86rem;
}

.abk-foot-rods{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
  margin-bottom:16px;
}

/* ---------- ≤640 px ---------- */

@media (max-width:900px){
  .abk-hero-grid{grid-template-columns:1fr}
  .abk-kpi{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:1.44rem}
  h2{font-size:1.1rem}
  h3{font-size:.98rem}
  .abk-frame,.abk-top-grid{padding-left:14px;padding-right:14px}
  .abk-top-grid{
    grid-template-columns:auto 1fr auto;
    gap:8px;
    padding-top:8px;
    padding-bottom:8px;
  }
  .abk-mark{font-size:.84rem;letter-spacing:.02em}
  .abk-mark::before,.abk-mark::after{margin:0 4px;width:7px;height:7px}
  .abk-go,.abk-go-2{
    padding:.5rem .7rem;
    font-size:.62rem;
    letter-spacing:.02em;
  }
  .abk-go-big{font-size:.74rem;padding:.7rem 1.1rem}
  .abk-kpi{grid-template-columns:repeat(2,1fr)}
  .abk-art{padding:10px}
  table{min-width:460px;font-size:.86rem}
  th,td{padding:6px 7px}
  .abk-ledger{padding:16px}
}

@media (max-width:380px){
  .abk-mark span{display:none}
  .abk-go,.abk-go-2{padding:.45rem .55rem;font-size:.58rem}
}