/* atomplay.buzz — архетип bar-chart, namespace brg- */

:root{
  --bg:#0B0D16;          /* фон страницы: почти чёрный с синим подтоном */
  --bg-deep:#070911;     /* подвал, глубокие подложки */
  --surface:#141726;     /* панели, карточки, боковая колонка */
  --surface-2:#1B1F30;   /* вложенные блоки, вторичная кнопка, строки таблиц */
  --line:#262B40;        /* границы */
  --pink:#FF2D8E;        /* фирменная фуксия — главный акцент и CTA */
  --pink-light:#FF5FA2;  /* верх градиента кнопки */
  --pink-deep:#D81B77;   /* низ градиента, тени */
  --cyan:#3FE0F0;        /* фирменный циан — вторая половина логотипа, подсветка */
  --cyan-deep:#22B8D6;
  --violet:#7B5CFF;      /* промо-блоки, третий акцент */
  --text:#FFFFFF;
  --muted:#9AA0B5;       /* подписи, второстепенный текст */
  --muted-2:#6B7189;     /* мелочь, футер */
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Rubik',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:16.5px;
  line-height:1.72;
  overflow-x:hidden;
}

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

a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--pink-light)}

.brg-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 22px}

/* ---------- шапка: лого слева, кнопки-пилюли справа ---------- */

.brg-top{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.brg-top-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:68px;padding:10px 22px;
  width:100%;max-width:1160px;margin:0 auto;
}
.brg-logo{display:flex;align-items:flex-end;gap:10px;flex-shrink:0}
.brg-logo-bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.brg-logo-bars i{width:5px;border-radius:2px 2px 0 0;display:block}
.brg-logo-bars i:nth-child(1){height:11px;background:var(--cyan)}
.brg-logo-bars i:nth-child(2){height:18px;background:var(--violet)}
.brg-logo-bars i:nth-child(3){height:26px;background:var(--pink)}
.brg-word{
  font-family:'Oswald',Impact,sans-serif;
  font-size:27px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(90deg,#3FE0F0,#FF2D8E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.brg-word span{display:block;font-size:9.5px;letter-spacing:.34em;color:var(--muted-2);
  background:none;-webkit-text-fill-color:var(--muted-2);margin-top:4px}

.brg-pills{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.brg-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 20px;border-radius:999px;
  font-family:'Oswald',Impact,sans-serif;font-size:14.5px;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;
}
.brg-pill-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.brg-pill-ghost:hover{color:var(--cyan);border-color:var(--cyan-deep)}
.brg-pill-alt{background:transparent;color:var(--cyan);border:1px solid var(--cyan-deep)}
.brg-pill-alt:hover{background:rgba(63,224,240,.1);color:var(--cyan)}
.brg-pill-main{
  background:linear-gradient(180deg,#FF5FA2 0%,#FF2D8E 100%);
  color:#fff;box-shadow:0 5px 16px rgba(216,27,119,.38);
}
.brg-pill-main:hover{color:#fff;box-shadow:0 7px 22px rgba(216,27,119,.55)}

/* ---------- общие столбчатые элементы ---------- */

.brg-sec{padding:44px 0 6px}
.brg-sec h2{
  font-family:'Oswald',Impact,sans-serif;
  font-size:clamp(22px,3.1vw,31px);font-weight:500;line-height:1.22;
  letter-spacing:.012em;margin:0 0 8px;text-transform:uppercase;
}
.brg-bars{display:flex;align-items:flex-end;gap:4px;height:22px;margin-bottom:12px}
.brg-bars i{width:7px;border-radius:2px 2px 0 0;display:block}
.brg-bars i:nth-child(1){height:8px;background:var(--cyan-deep)}
.brg-bars i:nth-child(2){height:14px;background:var(--violet)}
.brg-bars i:nth-child(3){height:22px;background:var(--pink)}
.brg-bars i:nth-child(4){height:11px;background:var(--line)}

h3{
  font-family:'Oswald',Impact,sans-serif;
  font-size:19.5px;font-weight:500;letter-spacing:.02em;
  margin:26px 0 6px;color:#fff;
}
h3::before{
  content:"";display:inline-block;width:4px;height:15px;margin-right:9px;
  vertical-align:-2px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),var(--pink));
}
p{margin:0 0 14px}
.brg-lead{font-size:18px;color:#E7E9F2;max-width:70ch}
.brg-note{color:var(--muted);font-size:14.5px}
.brg-hl{color:var(--cyan)}
.brg-hl-pink{color:var(--pink-light)}
.brg-acc{font-family:'Oswald',Impact,sans-serif;letter-spacing:.03em;color:#fff}

ul{margin:0 0 16px;padding-left:0;list-style:none}
ul li{position:relative;padding-left:20px;margin-bottom:7px}
ul li::before{
  content:"";position:absolute;left:0;top:11px;width:9px;height:4px;
  border-radius:1px;background:var(--pink);
}
ul li:nth-child(even)::before{background:var(--cyan)}

/* ---------- hero ---------- */

.brg-hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 300px at 12% 0%,rgba(123,92,255,.20),transparent 62%),
    radial-gradient(760px 280px at 92% 8%,rgba(255,45,142,.18),transparent 60%),
    var(--bg);
  padding:34px 0 30px;
}
.brg-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px;align-items:start}
.brg-hero h1{
  font-family:'Oswald',Impact,sans-serif;
  font-size:clamp(27px,4.4vw,45px);font-weight:600;line-height:1.1;
  letter-spacing:.008em;margin:0 0 14px;text-transform:uppercase;
}
.brg-hero h1 em{font-style:normal;color:var(--cyan)}

.brg-chart{
  display:flex;align-items:flex-end;gap:8px;height:84px;margin:0 0 18px;
}
.brg-chart i{flex:1;border-radius:3px 3px 0 0;display:block;opacity:.92}
.brg-chart i:nth-child(1){height:34%;background:var(--surface-2)}
.brg-chart i:nth-child(2){height:58%;background:var(--cyan-deep)}
.brg-chart i:nth-child(3){height:41%;background:var(--surface-2)}
.brg-chart i:nth-child(4){height:100%;background:linear-gradient(180deg,var(--pink-light),var(--pink-deep))}
.brg-chart i:nth-child(5){height:72%;background:var(--violet)}
.brg-chart i:nth-child(6){height:47%;background:var(--surface-2)}
.brg-chart i:nth-child(7){height:88%;background:var(--cyan)}
.brg-chart i:nth-child(8){height:29%;background:var(--surface-2)}

.brg-hero-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px;
}
.brg-hero-card img{border-radius:10px;width:100%}
.brg-hero-card figcaption{margin-top:10px;color:var(--muted);font-size:13.5px;line-height:1.5}

/* KPI — пять столбиков разной высоты */
.brg-kpi{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
  align-items:end;margin:22px 0 20px;
}
.brg-kpi div{
  background:var(--surface);border:1px solid var(--line);
  border-bottom:3px solid var(--pink);
  border-radius:10px 10px 4px 4px;padding:14px 13px;
}
.brg-kpi div:nth-child(1){min-height:118px;border-bottom-color:var(--cyan)}
.brg-kpi div:nth-child(2){min-height:154px;border-bottom-color:var(--pink)}
.brg-kpi div:nth-child(3){min-height:132px;border-bottom-color:var(--violet)}
.brg-kpi div:nth-child(4){min-height:112px;border-bottom-color:var(--cyan-deep)}
.brg-kpi div:nth-child(5){min-height:140px;border-bottom-color:var(--pink-light)}
.brg-kpi .brg-num{
  display:block;font-family:'Oswald',Impact,sans-serif;font-weight:600;
  font-size:25px;line-height:1.1;letter-spacing:.01em;margin-bottom:5px;
}
.brg-kpi span{display:block;color:var(--muted);font-size:13px;line-height:1.45}

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

.brg-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;border-radius:8px;
  background:linear-gradient(180deg,#FF5FA2 0%,#FF2D8E 100%);
  color:#fff;font-family:'Oswald',Impact,sans-serif;font-size:17px;
  letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(216,27,119,.4);
}
.brg-cta:hover{color:#fff;box-shadow:0 10px 30px rgba(216,27,119,.58)}
.brg-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:6px 0 4px}
.brg-cta-row p{margin:0;color:var(--muted);font-size:14px;max-width:44ch}

/* ---------- панели, таблицы ---------- */

.brg-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin:18px 0;
}
.brg-panel-violet{border-left:4px solid var(--violet)}
.brg-panel-cyan{border-left:4px solid var(--cyan)}
.brg-panel-pink{border-left:4px solid var(--pink)}

.brg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;
  border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
caption{
  text-align:left;padding:12px 16px 10px;color:var(--muted);font-size:13.5px;
  border-bottom:1px solid var(--line);
}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:var(--bg-deep);color:var(--cyan);
  font-family:'Oswald',Impact,sans-serif;font-weight:500;font-size:13.5px;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
tbody tr:nth-child(odd){background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}

/* ---------- клуб: пять столбиков ---------- */

.brg-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;align-items:end;margin:18px 0}
.brg-steps div{
  background:var(--surface);border:1px solid var(--line);border-radius:9px 9px 3px 3px;
  padding:12px 12px 14px;
}
.brg-steps div:nth-child(1){min-height:104px}
.brg-steps div:nth-child(2){min-height:124px}
.brg-steps div:nth-child(3){min-height:144px}
.brg-steps div:nth-child(4){min-height:164px}
.brg-steps div:nth-child(5){min-height:186px;border-color:var(--pink-deep)}
.brg-steps .brg-step-name{
  font-family:'Oswald',Impact,sans-serif;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;display:block;margin-bottom:4px;
}
.brg-steps div:nth-child(1) .brg-step-name{color:var(--muted)}
.brg-steps div:nth-child(2) .brg-step-name{color:var(--cyan-deep)}
.brg-steps div:nth-child(3) .brg-step-name{color:var(--cyan)}
.brg-steps div:nth-child(4) .brg-step-name{color:var(--violet)}
.brg-steps div:nth-child(5) .brg-step-name{color:var(--pink-light)}
.brg-steps small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}

/* ---------- галерея: превью столбиками разной высоты ---------- */

.brg-shelf{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end;
  margin:20px 0 10px;
}
.brg-shelf figure{
  margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:10px 10px 3px 3px;padding:9px 9px 11px;
  border-bottom:3px solid var(--line);
}
.brg-shelf img{width:100%;border-radius:6px;object-fit:cover}
.brg-shelf figcaption{margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.42}
.brg-shelf figure:nth-child(5n+1) img{height:210px}
.brg-shelf figure:nth-child(5n+2) img{height:148px}
.brg-shelf figure:nth-child(5n+3) img{height:186px}
.brg-shelf figure:nth-child(5n+4) img{height:124px}
.brg-shelf figure:nth-child(5n+5) img{height:168px}
.brg-shelf figure:nth-child(5n+1){border-bottom-color:var(--pink)}
.brg-shelf figure:nth-child(5n+2){border-bottom-color:var(--cyan-deep)}
.brg-shelf figure:nth-child(5n+3){border-bottom-color:var(--violet)}
.brg-shelf figure:nth-child(5n+4){border-bottom-color:var(--line)}
.brg-shelf figure:nth-child(5n+5){border-bottom-color:var(--cyan)}

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

.brg-faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  margin-bottom:9px;border-left:3px solid var(--violet);
}
.brg-faq details:nth-child(even){border-left-color:var(--cyan-deep)}
.brg-faq details[open]{border-left-color:var(--pink)}
.brg-faq summary{
  cursor:pointer;list-style:none;padding:13px 17px;
  font-family:'Oswald',Impact,sans-serif;font-size:16.5px;letter-spacing:.02em;
}
.brg-faq summary::-webkit-details-marker{display:none}
.brg-faq summary::after{content:"+";float:right;color:var(--pink-light);font-size:19px;line-height:1}
.brg-faq details[open] summary::after{content:"–"}
.brg-faq p{margin:0;padding:0 17px 15px;color:#DDE1EE}

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

.brg-quote{
  background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--cyan);
  border-radius:10px;padding:16px 20px;margin:20px 0;
}
.brg-quote p{margin:0 0 8px;font-size:16.5px;color:#EDEFF6}
.brg-quote cite{font-style:normal;color:var(--muted);font-size:13.5px}

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

.brg-src{
  background:var(--bg-deep);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin:30px 0 10px;
}
.brg-src h2{margin-bottom:10px}

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

.brg-foot{
  background:var(--bg-deep);border-top:1px solid var(--line);
  margin-top:34px;padding:28px 0 36px;color:var(--muted-2);font-size:13.5px;
}
.brg-foot .brg-foot-bars{display:flex;align-items:flex-end;gap:5px;height:18px;margin-bottom:14px}
.brg-foot .brg-foot-bars i{width:9px;border-radius:2px 2px 0 0;display:block}
.brg-foot .brg-foot-bars i:nth-child(1){height:6px;background:var(--line)}
.brg-foot .brg-foot-bars i:nth-child(2){height:12px;background:var(--cyan-deep)}
.brg-foot .brg-foot-bars i:nth-child(3){height:18px;background:var(--pink-deep)}
.brg-foot p{margin:0 0 8px;max-width:92ch}
.brg-foot .brg-age{color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:12px}

/* ---------- мобильная раскладка ---------- */

@media (max-width:980px){
  .brg-hero-grid{grid-template-columns:1fr}
  .brg-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brg-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brg-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:640px){
  body{font-size:16px;line-height:1.68}
  .brg-wrap{padding:0 15px}
  .brg-top-in{padding:9px 15px;gap:10px;flex-wrap:wrap;min-height:0}
  .brg-logo{gap:8px}
  .brg-word{font-size:22px}
  .brg-pills{width:100%;justify-content:space-between;gap:7px;padding-bottom:4px}
  .brg-pill{height:36px;padding:0 13px;font-size:13px;flex:1 1 auto}
  .brg-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .brg-kpi div{min-height:0!important;padding:12px}
  .brg-kpi .brg-num{font-size:21px}
  .brg-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .brg-steps div{min-height:0!important}
  .brg-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .brg-shelf figure img{height:132px!important}
  .brg-sec{padding:32px 0 4px}
  .brg-src{padding:18px 16px}
  table{min-width:520px}
  .brg-cta{width:100%;padding:13px 18px;font-size:16px}
}