/* ============================================================
   beton777.com.ua — design system "magazine / stat-dashboard"
   prefix: b7-  |  brand palette only (§24)
   ============================================================ */
:root{
  --c7-bg:#0a0b0e; --c7-surface:#14161c; --c7-surface-2:#1c1f28; --c7-surface-3:#272b36;
  --c7-accent:#e8ff00; --c7-accent-strong:#c9dd00; --c7-accent-2:#8a5cf6; --c7-accent-2-strong:#6f3fd6;
  --c7-text:#f2f3f5; --c7-text-muted:#9aa0ad; --c7-border:#2c313d;
  --c7-success:#37d399; --c7-warning:#ffcc4d; --c7-danger:#ff5d6c; --c7-cta:var(--c7-accent-2);
  --fs-4xl:clamp(2.1rem,5.5vw,3.4rem); --fs-3xl:clamp(1.7rem,4vw,2.4rem); --fs-2xl:1.55rem; --fs-xl:1.3rem;
  --fs-lg:1.12rem; --fs-md:1rem; --fs-sm:.9rem; --fs-xs:.8rem;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.25rem; --sp-5:3.25rem;
  --radius:14px; --radius-lg:22px; --shadow:0 10px 34px rgba(0,0,0,.42);
  --container:1180px; --rail:230px; --z-cta:60; --z-head:50;
  --ff-display:"Unbounded","Onest","Segoe UI",system-ui,sans-serif;
  --ff-body:"Onest","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c7-bg);color:var(--c7-text);font-family:var(--ff-body);font-size:var(--fs-md);
  line-height:1.7;-webkit-font-smoothing:antialiased;padding-bottom:82px}
img{display:block;max-width:100%;height:auto}
a{color:var(--c7-accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--c7-accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.18;font-weight:700;margin:0 0 .5em}
h1{font-size:var(--fs-4xl);letter-spacing:-.01em}
h2{font-size:var(--fs-2xl);margin-top:1.4em;padding-left:.6rem;border-left:4px solid var(--c7-accent)}
h3{font-size:var(--fs-xl)}
p{margin:0 0 1em}
.b7-skip{position:absolute;left:-999px}
.b7-skip:focus{left:1rem;top:1rem;background:var(--c7-accent);color:#000;padding:.5em 1em;border-radius:8px;z-index:99}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ===== header ===== */
.b7-wrap{max-width:var(--container);margin:0 auto;padding:0 1rem}
.b7-header{position:sticky;top:0;z-index:var(--z-head);background:rgba(10,11,14,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c7-border)}
.b7-headrow{display:flex;align-items:center;gap:1rem;min-height:62px}
.b7-logo{display:flex;align-items:center;gap:.5rem;font-family:var(--ff-display);font-weight:700;color:var(--c7-text)}
.b7-logo img{width:118px;height:26px}
.b7-logo span{color:var(--c7-accent)}
.b7-nav{margin-left:auto;display:flex;gap:.2rem;align-items:center;flex-wrap:wrap}
.b7-nav a{color:var(--c7-text-muted);padding:.45em .7em;border-radius:10px;font-size:var(--fs-sm)}
.b7-nav a:hover,.b7-nav a[aria-current]{color:var(--c7-text);background:var(--c7-surface-2);text-decoration:none}
.b7-lang{display:inline-flex;border:1px solid var(--c7-border);border-radius:10px;overflow:hidden;margin-left:.4rem}
.b7-lang a{padding:.4em .6em;border-radius:0}
.b7-lang a[aria-current="true"]{background:var(--c7-accent);color:#000}
.b7-burger{margin-left:auto;display:none;background:none;border:1px solid var(--c7-border);color:var(--c7-text);
  font-size:1.3rem;border-radius:10px;padding:.2em .5em;cursor:pointer}

/* ===== layout: content + right rail ===== */
.b7-main{padding:var(--sp-3) 0 var(--sp-5)}
.b7-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
.b7-article{min-width:0}
.b7-rail{display:none}
.b7-lead{font-size:var(--fs-lg);color:var(--c7-text)}
.b7-small{font-size:var(--fs-sm);color:var(--c7-text-muted)}
.b7-section{margin:var(--sp-4) 0}

/* ===== hero (diagonal 777 split) ===== */
.b7-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:var(--sp-4) var(--sp-3);
  background:linear-gradient(115deg,var(--c7-surface-2) 0 52%,rgba(138,92,246,.22) 52% 74%,rgba(232,255,0,.14) 74%);
  border:1px solid var(--c7-border)}
.b7-hero h1{margin-bottom:.3em}
.b7-hero .b7-777{font-family:var(--ff-display);font-size:clamp(3rem,11vw,7rem);font-weight:700;color:var(--c7-accent);
  opacity:.16;position:absolute;right:.4rem;bottom:-.3rem;pointer-events:none;letter-spacing:-.04em}

/* ===== buttons ===== */
.b7-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-family:var(--ff-display);
  border:0;border-radius:999px;padding:.8em 1.5em;cursor:pointer;transition:transform .15s,background .15s;font-size:var(--fs-md)}
.b7-cta--primary{background:var(--c7-cta);color:#fff;box-shadow:var(--shadow)}
.b7-cta--primary:hover{background:var(--c7-accent-2-strong);text-decoration:none;transform:translateY(-1px)}
.b7-cta--lime{background:var(--c7-accent);color:#000}
.b7-cta--lime:hover{background:var(--c7-accent-strong);text-decoration:none}

/* ===== stat tiles (quickfacts as dashboard) ===== */
.b7-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:var(--sp-3) 0}
.b7-tile{background:var(--c7-surface);border:1px solid var(--c7-border);border-radius:var(--radius);padding:.9rem 1rem}
.b7-tile dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--c7-text-muted);margin-bottom:.2em}
.b7-tile dd{margin:0;font-family:var(--ff-display);font-weight:700;font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== segmented rating gauges ===== */
.b7-gauges{margin:var(--sp-3) 0;display:grid;gap:.7rem}
.b7-gauge{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:center}
.b7-gauge .b7-glabel{font-size:var(--fs-sm)}
.b7-gauge .b7-gval{font-family:var(--ff-display);font-weight:700;color:var(--c7-accent)}
.b7-bars{grid-column:1/-1;display:flex;gap:4px}
.b7-bars i{flex:1;height:9px;border-radius:3px;background:var(--c7-surface-3)}
.b7-bars i.on{background:var(--c7-accent)}
.b7-score{display:inline-flex;align-items:baseline;gap:.3rem;font-family:var(--ff-display);font-weight:700}
.b7-score b{font-size:2.6rem;color:var(--c7-accent)}

/* ===== cards / grids ===== */
.b7-card{background:var(--c7-surface);border:1px solid var(--c7-border);border-radius:var(--radius);padding:var(--sp-3)}
.b7-grid{display:grid;gap:.8rem;grid-template-columns:1fr}
.b7-grid-2{display:grid;gap:.8rem;grid-template-columns:1fr}
.b7-grid-3{display:grid;gap:.8rem;grid-template-columns:1fr}
.b7-feature{background:var(--c7-surface);border:1px solid var(--c7-border);border-radius:var(--radius);padding:1rem 1.1rem}
.b7-feature h3{margin-top:0;font-size:var(--fs-lg)}
.b7-prov{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:var(--sp-2) 0}
.b7-prov span{background:var(--c7-surface-2);border:1px solid var(--c7-border);border-radius:10px;padding:.5em .7em;
  text-align:center;font-size:var(--fs-sm)}

/* ===== tables ===== */
.b7-tablewrap{overflow-x:auto;margin:var(--sp-2) 0;border:1px solid var(--c7-border);border-radius:var(--radius)}
.b7-table{width:100%;border-collapse:collapse;min-width:420px}
.b7-table th,.b7-table td{padding:.7em .9em;text-align:left;border-bottom:1px solid var(--c7-border);font-size:var(--fs-sm)}
.b7-table thead th{background:var(--c7-surface-2);font-family:var(--ff-display);font-weight:700}
.b7-table tbody tr:last-child td{border-bottom:0}
.b7-table td:not(:first-child){white-space:nowrap}

/* ===== pros/cons ===== */
.b7-procons{display:grid;grid-template-columns:1fr;gap:.8rem;margin:var(--sp-2) 0}
.b7-pros,.b7-cons{border-radius:var(--radius);padding:1rem 1.1rem;border:1px solid var(--c7-border)}
.b7-pros{background:rgba(55,211,153,.08)} .b7-pros h3{color:var(--c7-success)}
.b7-cons{background:rgba(255,93,108,.08)} .b7-cons h3{color:var(--c7-danger)}
.b7-pros ul,.b7-cons ul{margin:.3em 0 0;padding-left:1.1em}

/* ===== timeline stepper ===== */
.b7-steps{list-style:none;counter-reset:s;padding:0;margin:var(--sp-2) 0}
.b7-steps li{position:relative;padding:0 0 1rem 2.6rem;counter-increment:s;border-left:2px solid var(--c7-border);margin-left:.8rem}
.b7-steps li::before{content:counter(s);position:absolute;left:-1.05rem;top:-.1rem;width:2rem;height:2rem;border-radius:50%;
  background:var(--c7-accent);color:#000;font-family:var(--ff-display);font-weight:700;display:grid;place-items:center;font-size:.9rem}
.b7-steps li:last-child{border-left-color:transparent}

/* ===== bonus block ===== */
.b7-bonus{background:linear-gradient(120deg,var(--c7-surface-2),rgba(138,92,246,.18));border:1px solid var(--c7-accent-2);
  border-radius:var(--radius-lg);padding:var(--sp-3);margin:var(--sp-3) 0;text-align:center}
.b7-bonus .b7-amt{font-family:var(--ff-display);font-size:clamp(1.7rem,5vw,2.6rem);font-weight:700;color:var(--c7-accent)}

/* ===== FAQ (card style, not plain accordion) ===== */
.b7-faq details{background:var(--c7-surface);border:1px solid var(--c7-border);border-left:3px solid var(--c7-accent);
  border-radius:10px;padding:.4em 1em;margin:.5em 0}
.b7-faq summary{cursor:pointer;font-family:var(--ff-display);font-weight:700;font-size:var(--fs-md);padding:.4em 0;list-style:none}
.b7-faq summary::-webkit-details-marker{display:none}
.b7-faq summary::after{content:"+";float:right;color:var(--c7-accent);font-size:1.3em;line-height:1}
.b7-faq details[open] summary::after{content:"\2212"}

/* ===== verdict ===== */
.b7-verdict{background:var(--c7-surface-2);border:1px solid var(--c7-border);border-top:4px solid var(--c7-accent);
  border-radius:var(--radius);padding:var(--sp-3);margin:var(--sp-3) 0}

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

/* ===== search-variant chips (§25) ===== */
.b7-tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:var(--sp-2) 0}
.b7-tags li{background:var(--c7-surface-2);border:1px solid var(--c7-border);border-radius:999px;padding:.35em .8em;font-size:var(--fs-sm)}
.b7-tags li[data-c="lat"]{border-color:var(--c7-accent)}
.b7-tags li[data-c="cyr"]{border-color:var(--c7-accent-2)}
.b7-tags li[data-c="mod"]{border-color:var(--c7-success)}
.b7-tags li[data-c="err"]{border-color:var(--c7-danger)}

/* ===== compliance / footer ===== */
.b7-disclosure{font-size:var(--fs-xs);color:var(--c7-text-muted);background:var(--c7-surface);border:1px dashed var(--c7-border);
  border-radius:10px;padding:.7em 1em;margin:1em 0}
.b7-footer{border-top:1px solid var(--c7-border);background:var(--c7-surface);margin-top:var(--sp-5)}
.b7-footergrid{display:grid;grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-4) 0}
.b7-footer h4{font-family:var(--ff-display);margin:0 0 .5em}
.b7-rg{display:flex;gap:.8rem;align-items:flex-start;background:var(--c7-surface-2);border:1px solid var(--c7-border);border-radius:10px;padding:1em}
.b7-21{flex:none;width:44px;height:44px;border-radius:50%;background:var(--c7-danger);color:#fff;font-family:var(--ff-display);
  font-weight:700;display:grid;place-items:center}

/* ===== sticky centered claim ===== */
.b7-sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cta);display:flex;justify-content:center;
  padding:.6em 1rem;background:rgba(10,11,14,.96);border-top:1px solid var(--c7-border);backdrop-filter:blur(10px)}
.b7-claim{width:100%;max-width:460px;font-size:1.05rem;padding:.85em 1.4em;background:var(--c7-accent);color:#000;
  font-family:var(--ff-display);font-weight:700;border-radius:999px;box-shadow:var(--shadow);text-align:center;
  animation:b7-pulse 2.4s ease-in-out infinite}
.b7-claim:hover{background:var(--c7-accent-strong);text-decoration:none;transform:translateY(-1px)}
@keyframes b7-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)}}

/* ===== breakpoints ===== */
@media (min-width:560px){
  .b7-tiles{grid-template-columns:repeat(3,1fr)}
  .b7-grid-2{grid-template-columns:1fr 1fr}
  .b7-procons{grid-template-columns:1fr 1fr}
  .b7-prov{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  .b7-grid-3{grid-template-columns:repeat(3,1fr)}
  .b7-prov{grid-template-columns:repeat(4,1fr)}
  .b7-footergrid{grid-template-columns:2fr 1fr 1fr}
  .b7-claim{width:auto;min-width:340px}
}
@media (min-width:980px){
  .b7-shell{grid-template-columns:minmax(0,1fr) var(--rail)}
  .b7-shell>.b7-article{grid-column:1}
  .b7-shell>.b7-rail{grid-column:2}
  .b7-article{min-width:0}
  .b7-rail{display:block}
  .b7-rail nav{position:sticky;top:78px}
  .b7-rail a{display:block;color:var(--c7-text-muted);font-size:var(--fs-sm);padding:.3em 0;border-left:2px solid transparent;padding-left:.7em}
  .b7-rail a:hover{color:var(--c7-text);border-left-color:var(--c7-accent);text-decoration:none}
}
@media (max-width:767px){
  .b7-nav{display:none;order:3;width:100%;flex-direction:column}
  .b7-nav.is-open{display:flex}
  .b7-burger{display:block}
}
@media print{.b7-header,.b7-sticky,.b7-cta,.b7-claim,.b7-burger{display:none!important}body{background:#fff;color:#000}}