/* plinko-play.xyz — архетип ribbon-braid, namespace rbb- */

: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;         /* «нет» в таблицах сравнения */

  --rbb-strand:14px;
  --rbb-round:20px;
  --rbb-wrap:1080px;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--plum);
  font-family:"Roboto Slab",Georgia,serif;
  font-size:17px;
  line-height:1.72;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.rbb-mark,.rbb-kpi__num,.rbb-btn{
  font-family:"Didact Gothic","Trebuchet MS",sans-serif;
}

a{color:var(--pink-mid);text-decoration:none}
a:hover{color:var(--pink-deep);text-decoration:underline}

p{margin:0 0 .95rem}

.rbb-wrap{max-width:var(--rbb-wrap);margin:0 auto;padding:0 22px}

/* ---------- плетение: базовый мотив косы ---------- */
.rbb-braid{
  height:var(--rbb-strand);
  border:0;
  margin:0;
  background:
    repeating-linear-gradient(64deg,var(--pink) 0 16px,transparent 16px 34px),
    repeating-linear-gradient(-64deg,var(--pink-soft) 0 16px,transparent 16px 34px),
    var(--surface);
}

.rbb-braid--thin{height:8px;opacity:.8}

/* ---------- шапка: лого и кнопки вплетены в розовую косу ---------- */
.rbb-head{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg);
  border-bottom:2px solid var(--line);
}

.rbb-head__weave{
  max-width:var(--rbb-wrap);
  margin:0 auto;
  padding:10px 22px;
  display:flex;
  align-items:center;
  gap:16px;
  background:
    repeating-linear-gradient(58deg,rgba(255,111,163,.20) 0 18px,transparent 18px 40px),
    repeating-linear-gradient(-58deg,rgba(255,159,189,.20) 0 18px,transparent 18px 40px);
}

.rbb-mark{
  font-size:1.6rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--plum);
  padding:.25rem .8rem;
  border-top:3px solid var(--pink);
  border-bottom:3px solid var(--pink-soft);
  transform:rotate(-1.4deg);
}
.rbb-mark span{color:var(--pink-mid)}

.rbb-head__nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.rbb-btn{
  display:inline-block;
  border-radius:var(--rbb-round);
  padding:.625rem 1.25rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.92rem;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s,color .18s,transform .18s;
}
.rbb-btn:hover{text-decoration:none;transform:translateY(-2px)}

.rbb-btn--main{
  background:var(--pink);
  color:#FFFFFF;
  border:2px solid var(--pink);
}
.rbb-btn--main:hover{background:var(--pink-soft);border-color:var(--pink-soft);color:#FFFFFF}
.rbb-btn--main:active{background:var(--pink-deep);border-color:var(--pink-deep)}

.rbb-btn--ghost{
  background:transparent;
  color:var(--pink);
  border:2px solid var(--pink);
}
.rbb-btn--ghost:hover{background:var(--surface);color:var(--pink-mid)}
.rbb-btn--ghost:active{color:var(--pink-deep);border-color:var(--pink-deep)}

.rbb-head__nav .rbb-btn:first-child{transform:translateY(-3px) rotate(-1.2deg)}
.rbb-head__nav .rbb-btn:last-child{transform:translateY(3px) rotate(1.2deg)}
.rbb-head__nav .rbb-btn:hover{transform:translateY(0) rotate(0deg)}

/* ---------- первый экран ---------- */
.rbb-hero{
  background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 88%);
  padding:34px 0 10px;
}

.rbb-hero h1{
  font-size:2.25rem;
  line-height:1.2;
  margin:0 0 .8rem;
  letter-spacing:.005em;
}

.rbb-lead{
  font-size:1.09rem;
  color:var(--plum-soft);
  max-width:48rem;
}

.rbb-kpi{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin:22px 0 24px;
}

.rbb-kpi__cell{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--rbb-round);
  padding:.8rem .7rem;
  text-align:center;
}
.rbb-kpi__cell:nth-child(odd){transform:translateY(-6px);background:var(--surface-2)}
.rbb-kpi__num{
  display:block;
  font-size:1.42rem;
  color:var(--pink-mid);
  letter-spacing:.01em;
}
.rbb-kpi__cap{
  display:block;
  font-size:.79rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--plum-soft);
}

.rbb-hero__board{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:24px;
  align-items:center;
  margin-bottom:18px;
}

.rbb-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  margin:26px 0;
  background:var(--surface);
  border:2px solid var(--line);
  border-left:10px solid var(--pink);
  border-radius:var(--rbb-round);
}
.rbb-cta p{margin:0;flex:1 1 16rem;color:var(--plum-soft)}

/* ---------- секции ---------- */
.rbb-sec{padding:26px 0 6px}
.rbb-sec--tint{background:var(--bg-soft)}
.rbb-sec--weave{
  background:
    repeating-linear-gradient(72deg,rgba(255,214,228,.55) 0 22px,transparent 22px 52px),
    var(--bg);
}

.rbb-sec h2{
  font-size:1.62rem;
  line-height:1.26;
  margin:.4rem 0 .9rem;
  padding-left:18px;
  border-left:8px solid var(--pink);
}
.rbb-sec h3{
  font-size:1.16rem;
  margin:1.3rem 0 .5rem;
  color:var(--pink-deep);
  letter-spacing:.01em;
}

.rbb-hl{color:var(--pink-mid)}
.rbb-num{color:var(--gold);letter-spacing:.01em}
.rbb-yes{color:var(--green)}
.rbb-no{color:var(--red)}
.rbb-em{color:var(--plum);border-bottom:2px solid var(--pink-soft)}

/* ---------- пряди: двухколоночные вставки ---------- */
.rbb-strands{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:16px 0 20px;
}
.rbb-strand{
  background:var(--bg);
  border:2px solid var(--line);
  border-radius:var(--rbb-round);
  padding:.9rem 1.1rem;
}
.rbb-strand:nth-child(even){background:var(--surface);transform:translateY(8px)}
.rbb-strand h3{margin-top:.2rem}

.rbb-list{margin:0 0 1rem;padding-left:1.15rem}
.rbb-list li{margin-bottom:.4rem}

/* ---------- таблицы ---------- */
.rbb-tablewrap{overflow-x:auto;margin:16px 0 20px}
.rbb-table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--plum);
  font-size:.95rem;
  background:var(--bg);
}
.rbb-table caption{
  caption-side:top;
  text-align:left;
  padding:0 0 .5rem;
  color:var(--plum-soft);
  font-size:.9rem;
}
.rbb-table th,.rbb-table td{
  border:1px solid var(--plum);
  padding:.5rem .6rem;
  text-align:center;
}
.rbb-table thead th{
  background:var(--surface-2);
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.04em;
}
.rbb-table tbody tr:nth-child(even){background:var(--bg-soft)}
.rbb-table tfoot td{background:var(--surface);}

/* ---------- SVG ---------- */
.rbb-fig{margin:18px 0 22px}
.rbb-fig svg{display:block;width:100%;max-width:100%;height:auto}
.rbb-fig figcaption{
  margin-top:.5rem;
  font-size:.86rem;
  color:var(--plum-soft);
}
.rbb-fig--board svg{max-width:560px}
.rbb-fig--wide svg{max-width:720px}

/* ---------- FAQ ---------- */
.rbb-faq details{
  border:2px solid var(--line);
  border-radius:var(--rbb-round);
  padding:.55rem .95rem;
  margin-bottom:9px;
  background:var(--bg);
}
.rbb-faq details:nth-child(even){background:var(--surface)}
.rbb-faq summary{
  cursor:pointer;
  font-family:"Didact Gothic","Trebuchet MS",sans-serif;
  font-size:1.03rem;
  color:var(--plum);
  list-style:none;
}
.rbb-faq summary::-webkit-details-marker{display:none}
.rbb-faq summary::before{content:"\232C";color:var(--pink);margin-right:.55rem}
.rbb-faq details[open] summary{color:var(--pink-deep)}
.rbb-faq details p{margin:.55rem 0 .3rem;font-size:.97rem;color:var(--plum-soft)}

/* ---------- отзыв ---------- */
.rbb-quote{
  border:2px dashed var(--pink-soft);
  border-radius:var(--rbb-round);
  padding:1rem 1.2rem;
  margin:18px 0;
  background:var(--bg-soft);
}
.rbb-quote__who{font-size:.86rem;color:var(--plum-soft);text-transform:uppercase;letter-spacing:.05em}

/* ---------- сверка ---------- */
.rbb-proof{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--rbb-round);
  padding:1.1rem 1.3rem;
  margin:20px 0;
}
.rbb-proof h3{margin-top:0}

/* ---------- подвал ---------- */
.rbb-foot{
  background:var(--bg-soft);
  border-top:2px solid var(--line);
  padding:22px 0 30px;
  font-size:.9rem;
  color:var(--plum-soft);
}
.rbb-foot__legal{margin-bottom:.6rem}
.rbb-foot__age{
  display:inline-block;
  border:2px solid var(--pink);
  border-radius:var(--rbb-round);
  padding:.4rem .9rem;
  color:var(--plum);
  margin-top:.4rem;
}

/* ---------- мобильная раскладка ---------- */
@media (max-width:960px){
  .rbb-hero__board{grid-template-columns:1fr}
  .rbb-kpi{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:640px){
  body{font-size:16px;line-height:1.66}
  .rbb-wrap{padding:0 14px}
  .rbb-head__weave{padding:8px 14px;gap:8px}
  .rbb-mark{font-size:1.15rem;padding:.15rem .45rem;transform:none}
  .rbb-head__nav{gap:6px}
  .rbb-btn{padding:.5rem .7rem;font-size:.74rem;letter-spacing:.02em}
  .rbb-head__nav .rbb-btn:first-child,
  .rbb-head__nav .rbb-btn:last-child{transform:none}
  .rbb-hero h1{font-size:1.58rem}
  .rbb-kpi{grid-template-columns:repeat(2,1fr);gap:8px}
  .rbb-kpi__cell:nth-child(odd){transform:none}
  .rbb-kpi__cell:last-child{grid-column:span 2}
  .rbb-strands{grid-template-columns:1fr}
  .rbb-strand:nth-child(even){transform:none}
  .rbb-sec h2{font-size:1.28rem;padding-left:12px;border-left-width:6px}
  .rbb-table{font-size:.86rem}
  .rbb-table th,.rbb-table td{padding:.4rem .35rem}
  .rbb-cta{border-left-width:6px;padding:14px}
  .rbb-fig svg{max-width:100%}
}