/* ============================================================
   BETON review (betonslots.com.ua) — design system
   Palette extracted from official brand assets (§24): lime #E8FF00,
   purple CTA, near-black surfaces. Prefix: bo-. Mobile-first.
   ============================================================ */

:root{
  /* brand palette (§24.2) — only these colors are used */
  --c-bg:#070707;
  --c-surface:#131419;
  --c-surface-2:#1a1d26;
  --c-surface-3:#232733;
  --c-border:#383d50;
  --c-accent:#e8ff00;          /* lime — logo */
  --c-accent-strong:#c8dd00;   /* AA-safe lime variant for text-on-dark edges */
  --c-accent-2:#7b4fd6;        /* purple CTA */
  --c-accent-2-strong:#8f63ea;
  --c-text:#ffffff;
  --c-text-muted:#9aa0b0;
  --c-success:#3ad29f;
  --c-warning:#ffb547;
  --c-danger:#ff5d6c;
  --c-cta:var(--c-accent-2);

  /* neutral tokens */
  --fs-4xl:clamp(2rem,6vw,3.2rem);
  --fs-3xl:clamp(1.6rem,4.5vw,2.4rem);
  --fs-2xl:clamp(1.35rem,3.5vw,1.8rem);
  --fs-xl:1.25rem; --fs-lg:1.1rem; --fs-md:1rem; --fs-sm:.9rem; --fs-xs:.8rem;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:4rem;
  --radius:14px; --radius-sm:10px; --radius-lg:22px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-accent:0 8px 26px rgba(232,255,0,.12);
  --container:1200px; --content:820px;
  --t:.22s ease;
  --z-header:50; --z-cta:60;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--c-accent-strong);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{line-height:1.2;font-weight:800;margin:0 0 var(--sp-2)}
h1{font-size:var(--fs-4xl)}h2{font-size:var(--fs-2xl)}h3{font-size:var(--fs-xl)}
p{margin:0 0 var(--sp-2)}
ul,ol{margin:0 0 var(--sp-2);padding-left:1.3em}
li{margin:.3em 0}
strong{color:#fff}
.bo-skip{position:absolute;left:-999px;top:0;background:var(--c-accent);color:#000;padding:.6em 1em;z-index:100}
.bo-skip:focus{left:8px;top:8px}

/* layout */
.bo-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--sp-2)}
.bo-main{padding:var(--sp-3) 0 calc(var(--sp-6) + 60px)}
.bo-article{max-width:var(--content);margin:0 auto}
.bo-section{margin:0 0 var(--sp-5);scroll-margin-top:80px}
.bo-section>h2{display:flex;align-items:center;gap:.5em;border-left:4px solid var(--c-accent);padding-left:.6em}
.bo-lead{font-size:var(--fs-lg);color:#e7e9ef}
.bo-muted{color:var(--c-text-muted)}
.bo-small{font-size:var(--fs-sm);color:var(--c-text-muted)}

/* header / nav */
.bo-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(7,7,7,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border)}
.bo-header-row{display:flex;align-items:center;gap:var(--sp-2);min-height:60px}
.bo-logo{display:flex;align-items:center;gap:.5em;font-weight:800;color:#fff;flex:0 0 auto}
.bo-logo img{height:26px;width:auto}
.bo-nav{margin-left:auto;display:flex;align-items:center;gap:.2em;flex-wrap:wrap}
.bo-nav a{color:var(--c-text-muted);padding:.5em .7em;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600}
.bo-nav a:hover,.bo-nav a[aria-current="page"]{color:#fff;background:var(--c-surface-2);text-decoration:none}
.bo-lang{display:inline-flex;border:1px solid var(--c-border);border-radius:999px;overflow:hidden;margin-left:.4em}
.bo-lang a{padding:.35em .7em;font-size:var(--fs-xs);color:var(--c-text-muted)}
.bo-lang a[aria-current="true"]{background:var(--c-accent);color:#000;font-weight:700}
.bo-burger{display:none;margin-left:auto;background:none;border:1px solid var(--c-border);border-radius:10px;color:#fff;width:42px;height:42px;font-size:1.3rem;cursor:pointer}

/* affiliate CTA */
.bo-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:800;
  padding:.85em 1.6em;border-radius:999px;border:0;cursor:pointer;text-align:center;transition:var(--t)}
.bo-cta--primary{background:var(--c-cta);color:#fff;box-shadow:var(--shadow)}
.bo-cta--primary:hover{background:var(--c-accent-2-strong);text-decoration:none;transform:translateY(-1px)}
.bo-cta--lime{background:var(--c-accent);color:#000}
.bo-cta--lime:hover{background:var(--c-accent-strong);text-decoration:none}

/* hero (#1) */
.bo-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--c-border);margin-bottom:var(--sp-3)}
.bo-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.bo-hero-body{padding:var(--sp-3)}
.bo-hero-badges{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:var(--sp-2)}
.bo-chip{display:inline-flex;align-items:center;gap:.35em;padding:.3em .8em;border-radius:999px;font-size:var(--fs-xs);font-weight:700;background:var(--c-surface-3);color:#fff;border:1px solid var(--c-border)}
.bo-chip--lime{background:rgba(232,255,0,.12);color:var(--c-accent-strong);border-color:rgba(232,255,0,.3)}
.bo-chip--ok{color:var(--c-success);border-color:rgba(58,210,159,.35)}

/* quickfacts dl (#1) */
.bo-qf{display:grid;grid-template-columns:1fr;gap:var(--sp-1);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-2)}
.bo-qfi{display:flex;justify-content:space-between;gap:var(--sp-2);padding:.55em 0;border-bottom:1px dashed var(--c-border)}
.bo-qfi:last-child{border-bottom:0}
.bo-qft{color:var(--c-text-muted);font-size:var(--fs-sm)}
.bo-qfv{font-weight:700;text-align:right;white-space:nowrap}
.bo-qfv--wrap{white-space:normal;text-align:right}

/* rating-card (#3) */
.bo-rating{background:linear-gradient(160deg,var(--c-surface-2),var(--c-surface));border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3)}
.bo-rating-top{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.bo-score{font-size:clamp(2.4rem,9vw,3.6rem);font-weight:900;color:var(--c-accent);line-height:1}
.bo-score small{display:block;font-size:.9rem;color:var(--c-text-muted);font-weight:600}
.bo-breakdown{flex:1;min-width:240px;display:grid;gap:.6em}
.bo-mrow{display:grid;grid-template-columns:1fr;gap:.2em}
.bo-mrow span{display:flex;justify-content:space-between;font-size:var(--fs-sm)}
.bo-mrow meter{width:100%;height:10px}
meter{-webkit-appearance:none;appearance:none;background:var(--c-surface-3);border-radius:999px;border:0}
meter::-webkit-meter-bar{background:var(--c-surface-3);border-radius:999px;border:0}
meter::-webkit-meter-optimum-value{background:var(--c-accent);border-radius:999px}
meter::-moz-meter-bar{background:var(--c-accent);border-radius:999px}

/* generic cards / grids */
.bo-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3)}
.bo-grid{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
.bo-grid-2{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
.bo-grid-3{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
.bo-feature{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-2)}
.bo-feature h3{font-size:var(--fs-lg);color:var(--c-accent-strong)}

/* license timeline (#4) */
.bo-timeline{list-style:none;padding:0;margin:0;position:relative}
.bo-timeline li{position:relative;padding:0 0 var(--sp-2) 1.6em;border-left:2px solid var(--c-border);margin-left:.4em}
.bo-timeline li::before{content:"";position:absolute;left:-7px;top:.35em;width:12px;height:12px;border-radius:50%;background:var(--c-accent)}
.bo-timeline time{display:block;color:var(--c-accent-strong);font-weight:700;font-size:var(--fs-sm)}

/* stepper (#5 / HowTo) */
.bo-steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:var(--sp-2)}
.bo-steps li{counter-increment:s;position:relative;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-2) var(--sp-2) var(--sp-2) 3.4em}
.bo-steps li::before{content:counter(s);position:absolute;left:1em;top:1em;width:1.7em;height:1.7em;display:grid;place-items:center;background:var(--c-accent);color:#000;font-weight:800;border-radius:50%}

/* bonus-card (#6) */
.bo-bonus{background:linear-gradient(135deg,rgba(123,79,214,.18),var(--c-surface));border:1px solid var(--c-accent-2);border-radius:var(--radius);padding:var(--sp-3);text-align:center}
.bo-bonus-amt{font-size:var(--fs-3xl);font-weight:900;color:var(--c-accent)}
.bo-bonus ul{text-align:left;display:inline-block;margin:var(--sp-2) auto}

/* providers grid (#7) */
.bo-prov{display:grid;grid-template-columns:repeat(2,1fr);gap:.6em}
.bo-prov span{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:.6em;text-align:center;font-size:var(--fs-sm);font-weight:600}

/* tables */
.bo-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-border);border-radius:var(--radius);margin:0 0 var(--sp-2)}
table.bo-table{width:100%;border-collapse:collapse;min-width:460px}
.bo-table th,.bo-table td{padding:.7em .9em;text-align:left;border-bottom:1px solid var(--c-border);font-size:var(--fs-sm)}
.bo-table thead th{background:var(--c-surface-3);color:#fff;font-weight:700;white-space:nowrap}
.bo-table td:last-child,.bo-table th:last-child{white-space:nowrap}
.bo-table tr:last-child td{border-bottom:0}

/* tag-cloud (#2, §25) */
.bo-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;padding:0;margin:0}
.bo-tags li{padding:.4em .9em;border-radius:999px;font-size:var(--fs-sm);font-weight:600;border:1px solid var(--c-border);background:var(--c-surface-2)}
.bo-tags li[data-cat="cyr"]{border-color:rgba(232,255,0,.4);color:var(--c-accent-strong)}
.bo-tags li[data-cat="lat"]{border-color:rgba(123,79,214,.5);color:#bda6f2}
.bo-tags li[data-cat="mod"]{color:#fff}
.bo-tags li[data-cat="nospace"]{color:var(--c-text-muted)}
.bo-tags li[data-cat="typo"]{border-color:rgba(255,93,108,.4);color:#ffb0b8}
.bo-legend{display:flex;flex-wrap:wrap;gap:.8em;margin-bottom:var(--sp-2);font-size:var(--fs-xs)}
.bo-legend span{display:inline-flex;align-items:center;gap:.4em}
.bo-dot{width:10px;height:10px;border-radius:50%;display:inline-block}

/* pros / cons (#11) */
.bo-procons{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
.bo-pros,.bo-cons{border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-2)}
.bo-pros{background:rgba(58,210,159,.06)}
.bo-cons{background:rgba(255,93,108,.06)}
.bo-pros h3{color:var(--c-success)}.bo-cons h3{color:var(--c-danger)}
.bo-pros ul,.bo-cons ul{list-style:none;padding:0}
.bo-pros li::before{content:"+ ";color:var(--c-success);font-weight:800}
.bo-cons li::before{content:"– ";color:var(--c-danger);font-weight:800}

/* trust-block (#14) */
.bo-trust{display:flex;gap:var(--sp-2);align-items:center;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3);flex-wrap:wrap}
.bo-trust .bo-score{color:var(--c-success)}

/* sport-card (#16) */
.bo-sport{border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;background:var(--c-surface)}
.bo-sport img{width:100%;aspect-ratio:16/9;object-fit:cover}
.bo-sport-body{padding:var(--sp-3)}

/* verdict-box (#17) */
.bo-verdict{background:linear-gradient(135deg,var(--c-surface-3),var(--c-surface));border:1px solid var(--c-accent);border-radius:var(--radius-lg);padding:var(--sp-3);box-shadow:var(--shadow-accent)}

/* author (#19) */
.bo-author{display:flex;gap:var(--sp-2);align-items:flex-start;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3)}

/* FAQ accordion (#16/FAQ) */
.bo-faq details{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);margin-bottom:.6em;padding:.2em .9em}
.bo-faq summary{cursor:pointer;font-weight:700;padding:.7em 0;list-style:none}
.bo-faq summary::-webkit-details-marker{display:none}
.bo-faq summary::after{content:"+";float:right;color:var(--c-accent)}
.bo-faq details[open] summary::after{content:"–"}

/* responsible gaming / compliance */
.bo-rg{background:var(--c-surface);border:1px solid var(--c-warning);border-radius:var(--radius);padding:var(--sp-3)}
.bo-disclosure{font-size:var(--fs-sm);color:var(--c-text-muted);border-top:1px solid var(--c-border);padding-top:var(--sp-2);margin-top:var(--sp-2)}

/* footer */
.bo-footer{background:var(--c-surface);border-top:1px solid var(--c-border);padding:var(--sp-4) 0;margin-top:var(--sp-5);font-size:var(--fs-sm)}
.bo-footer-grid{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
.bo-footer a{color:var(--c-text-muted)}
.bo-footer h4{color:#fff;margin-bottom:var(--sp-1)}
.bo-footer-21{display:inline-grid;place-items:center;width:42px;height:42px;border:2px solid var(--c-accent);border-radius:50%;color:var(--c-accent);font-weight:800;flex:0 0 auto}

/* sticky claim bar (mobile + desktop, centered) */
body{padding-bottom:80px}
.bo-sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cta);display:flex;justify-content:center;
  padding:.6em var(--sp-2);background:rgba(7,7,7,.96);border-top:1px solid var(--c-border);backdrop-filter:blur(8px)}
.bo-sticky .bo-claim{width:100%;max-width:460px;font-size:1.05rem;padding:.85em 1.4em;
  background:var(--c-accent);color:#000;font-weight:800;border-radius:999px;box-shadow:var(--shadow);animation:bo-pulse 2.4s ease-in-out infinite}
.bo-sticky .bo-claim:hover{background:var(--c-accent-strong);text-decoration:none;transform:translateY(-1px)}
@keyframes bo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,255,0,.45)}50%{box-shadow:0 0 0 10px rgba(232,255,0,0)}}
@media (min-width:768px){.bo-sticky .bo-claim{width:auto;min-width:340px}}

/* image figures */
.bo-shot{margin:var(--sp-3) 0}
.bo-shot img{width:100%;height:auto;border:1px solid var(--c-border);border-radius:var(--radius);display:block}
.bo-shot figcaption{margin-top:.5em;font-size:var(--fs-sm);color:var(--c-text-muted)}
.bo-shot--archive img{opacity:.85;filter:grayscale(.15)}
.bo-shot--archive figcaption{border-left:3px solid var(--c-warning);padding-left:.6em}
.bo-shot--sq{max-width:420px;margin-inline:auto}

/* TOC */
.bo-toc{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3)}
.bo-toc ol{columns:2;column-gap:var(--sp-3);font-size:var(--fs-sm)}
.bo-toc a{color:var(--c-text-muted)}

/* ===== breakpoints (mobile-first up) ===== */
@media (min-width:560px){
  .bo-qf{grid-template-columns:1fr 1fr}
  .bo-grid-2{grid-template-columns:1fr 1fr}
  .bo-procons{grid-template-columns:1fr 1fr}
  .bo-prov{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  .bo-grid-3{grid-template-columns:repeat(3,1fr)}
  .bo-prov{grid-template-columns:repeat(4,1fr)}
  .bo-footer-grid{grid-template-columns:2fr 1fr 1fr}
  .bo-hero img{aspect-ratio:21/9}
}
@media (max-width:767px){
  .bo-nav{display:none}
  .bo-nav.is-open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:var(--sp-2);gap:.3em}
  .bo-nav.is-open a{width:100%}
  .bo-burger{display:block}
  .bo-toc ol{columns:1}
}
@media print{
  .bo-header,.bo-sticky,.bo-cta,.bo-burger{display:none!important}
  body{background:#fff;color:#000}
}