@import url("../fonts/fonts.css");

/* ============================================================
   PlayBaze Germany — design system
   Brand: ink #101D2C · yellow #FED100 · teal #017E80 · white
   Motif: "blade / skew" — наклонные параллелограмм-края (эхо лого + V-марки)
   ============================================================ */

:root{
  --pbz-ink:#101D2C;
  --pbz-ink-1:#0b1521;
  --pbz-ink-2:#16273b;
  --pbz-ink-3:#1d3149;
  --pbz-panel:rgba(20,35,53,.6);
  --pbz-yellow:#FED100;
  --pbz-yellow-2:#FFE45C;
  --pbz-teal:#017E80;
  --pbz-teal-2:#0bb6b8;
  --pbz-white:#ffffff;
  --pbz-text:#e8eef5;
  --pbz-mut:#94a8bd;
  --pbz-mut-2:#6f859b;
  --pbz-line:rgba(255,255,255,.09);
  --pbz-line-2:rgba(255,255,255,.16);

  --pbz-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --pbz-accent:"Saira","Helvetica Neue",Arial,sans-serif;
  --pbz-body:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  --pbz-shadow:0 18px 50px -18px rgba(0,0,0,.7);
  --pbz-glow:0 0 0 1px rgba(254,209,0,.4),0 12px 34px -10px rgba(254,209,0,.28);
  --pbz-radius:14px;
  --pbz-blade:14px;            /* срез угла */
  --pbz-head-h:72px;
  --pbz-maxw:1200px;
  --pbz-skew:-7deg;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--pbz-head-h) + 14px); }
body{
  margin:0;
  font-family:var(--pbz-body);
  color:var(--pbz-text);
  background:var(--pbz-ink);
  line-height:1.62;
  font-size:clamp(15px,1.6vw,16.5px);
  overflow-x:hidden;
  padding-top:var(--pbz-head-h);          /* фикс-шапка не перекрывает контент */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* фон-текстура: hex/circuit + блики */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(1,126,128,.30), transparent 60%),
    radial-gradient(900px 600px at -10% 12%, rgba(254,209,0,.07), transparent 55%),
    radial-gradient(1000px 800px at 50% 120%, rgba(1,126,128,.16), transparent 60%),
    var(--pbz-ink);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z'/%3E%3Cpath d='M28 48l24 14v28L28 104 4 90V62z'/%3E%3C/g%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.05; }
p{ margin:0 0 1em; }
:focus-visible{ outline:3px solid var(--pbz-yellow); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------- */
.pbz-wrap{ width:100%; max-width:var(--pbz-maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
.pbz-section{ padding-block:clamp(44px,7vw,84px); position:relative; }
.pbz-section--tight{ padding-block:clamp(30px,5vw,52px); }

/* типографика заголовков */
.pbz-h2,.pbz-h3,.pbz-kicker{ font-family:var(--pbz-display); font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.01em; }
.pbz-h2{
  font-size:clamp(1.55rem,4.2vw,2.7rem); color:var(--pbz-white);
  hyphens:manual; overflow-wrap:break-word;
}
.pbz-h2 .pbz-em{ color:var(--pbz-yellow); }
.pbz-h3{ font-size:clamp(1.15rem,2.6vw,1.5rem); color:var(--pbz-white); margin-top:1.6em; margin-bottom:.5em; hyphens:manual; overflow-wrap:break-word; }
.pbz-kicker{
  font-family:var(--pbz-accent); font-style:italic; font-weight:700;
  font-size:.82rem; letter-spacing:.22em; color:var(--pbz-yellow);
  display:inline-flex; align-items:center; gap:.55em; margin-bottom:.9rem;
}
.pbz-kicker::before{ content:""; width:26px; height:3px; background:var(--pbz-yellow); transform:skewX(var(--pbz-skew)); }
.pbz-lead{ color:var(--pbz-mut); font-size:1.05em; max-width:62ch; }
.pbz-section__head{ margin-bottom:clamp(20px,3vw,34px); }

/* секционный V-разделитель */
.pbz-vdiv{ display:flex; justify-content:center; padding-block:6px; }
.pbz-vdiv svg{ width:30px; height:30px; color:var(--pbz-yellow); opacity:.85; filter:drop-shadow(0 0 14px rgba(254,209,0,.35)); }

/* ---------- header ---------- */
.pbz-header{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--pbz-head-h);
  display:flex; align-items:center;
  background:rgba(11,21,33,.72); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--pbz-line);
  transition:height .25s ease,background .25s ease,box-shadow .25s ease;
}
.pbz-header.is-scrolled{ height:60px; background:rgba(8,16,26,.92); box-shadow:0 10px 30px -16px rgba(0,0,0,.8); }
.pbz-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; }
.pbz-nav{ display:flex; align-items:center; gap:6px; }
.pbz-nav__link{
  font-family:var(--pbz-accent); font-weight:600; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--pbz-text); padding:10px 16px; border-radius:9px; position:relative; transition:color .2s,background .2s;
}
.pbz-nav__link::after{ content:""; position:absolute; left:16px; right:16px; bottom:5px; height:2px; background:var(--pbz-yellow); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.pbz-nav__link:hover{ color:var(--pbz-white); }
.pbz-nav__link:hover::after,.pbz-nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.pbz-nav__link[aria-current="page"]{ color:var(--pbz-yellow); }
.pbz-header__cta{ display:inline-flex; }
.pbz-header__actions{ display:inline-flex; align-items:center; gap:8px; }
.pbz-burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--pbz-line-2); }
.pbz-burger svg{ width:24px; height:24px; }

/* logo (image) */
.pbz-logo{ display:inline-flex; align-items:center; gap:10px; }
.pbz-logo__img{ height:34px; width:auto; display:block; }
.pbz-header.is-scrolled .pbz-logo__img{ height:30px; }
.pbz-footer .pbz-logo__img{ height:40px; }
.pbz-drawer .pbz-logo__img{ height:30px; }

/* mobile drawer */
.pbz-drawer{ position:fixed; inset:0; z-index:70; display:none; }
.pbz-drawer.is-open{ display:block; }
.pbz-drawer__scrim{ position:absolute; inset:0; background:rgba(4,9,15,.6); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s; }
.pbz-drawer.is-open .pbz-drawer__scrim{ opacity:1; }
.pbz-drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(82vw,340px);
  background:var(--pbz-ink-1); border-left:1px solid var(--pbz-line-2);
  padding:22px; display:flex; flex-direction:column; gap:8px;
  transform:translateX(100%); transition:transform .3s ease;
}
.pbz-drawer.is-open .pbz-drawer__panel{ transform:none; }
.pbz-drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.pbz-drawer__panel a.pbz-nav__link{ font-size:1.1rem; padding:14px 12px; border-bottom:1px solid var(--pbz-line); border-radius:0; }
.pbz-drawer__panel a.pbz-nav__link::after{ display:none; }

/* ---------- buttons ---------- */
.pbz-btn{
  --b:var(--pbz-blade);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--pbz-accent); font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.05em;
  padding:14px 26px; line-height:1; color:var(--pbz-ink); background:var(--pbz-yellow);
  clip-path:polygon(var(--b) 0,100% 0,100% calc(100% - var(--b)),calc(100% - var(--b)) 100%,0 100%,0 var(--b));
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease; will-change:transform;
}
.pbz-btn svg{ width:1.15em; height:1.15em; }
.pbz-btn:hover{ background:var(--pbz-yellow-2); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(254,209,0,.6); }
.pbz-btn:active{ transform:translateY(0); }
.pbz-btn--ghost{ background:transparent; color:var(--pbz-white); box-shadow:inset 0 0 0 2px var(--pbz-line-2); }
.pbz-btn--ghost:hover{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 2px var(--pbz-yellow); color:var(--pbz-white); }
.pbz-btn--teal{ background:var(--pbz-teal); color:var(--pbz-white); }
.pbz-btn--teal:hover{ background:var(--pbz-teal-2); box-shadow:0 14px 30px -12px rgba(11,182,184,.55); }
.pbz-btn--sm{ padding:10px 18px; font-size:.85rem; }
.pbz-btn--lg{ padding:17px 34px; font-size:1.05rem; }

/* badge / chip */
.pbz-badge{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--pbz-accent); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; padding:6px 12px; border-radius:999px; background:rgba(1,126,128,.18); color:var(--pbz-teal-2); border:1px solid rgba(11,182,184,.4); }
.pbz-badge--yellow{ background:rgba(254,209,0,.14); color:var(--pbz-yellow); border-color:rgba(254,209,0,.4); }
.pbz-badge svg{ width:1em; height:1em; }
.pbz-chip{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--pbz-accent); font-weight:600; font-size:.82rem; padding:7px 13px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid var(--pbz-line); color:var(--pbz-text); }
.pbz-chip svg{ width:1.05em; height:1.05em; color:var(--pbz-yellow); }
.pbz-chips{ display:flex; flex-wrap:wrap; gap:9px; }

.pbz-ic{ width:1em; height:1em; fill:none; flex:none; }

/* ---------- hero (full-bleed background) ---------- */
.pbz-hero{
  position:relative; overflow:hidden; display:flex; align-items:center;
  padding-block:clamp(24px,4vw,52px);
  min-height:clamp(460px, calc(100svh - var(--pbz-head-h)), 780px);
  background-color:var(--pbz-ink-1);
}
.pbz-hero__bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:78% center;
}
.pbz-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,16,26,.96) 0%, rgba(8,16,26,.8) 30%, rgba(8,16,26,.3) 60%, rgba(8,16,26,.05) 100%),
    linear-gradient(0deg, rgba(8,16,26,.65) 0%, transparent 40%);
}
.pbz-hero > .pbz-wrap{ position:relative; z-index:2; width:100%; }
.pbz-hero__inner{ max-width:660px; }
.pbz-hero__title{ font-family:var(--pbz-display); font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(2rem,6vw,3.9rem); line-height:.94; color:var(--pbz-white); margin:.2em 0 .4em; hyphens:manual; overflow-wrap:break-word; text-shadow:0 4px 24px rgba(0,0,0,.5); }
.pbz-hero__title .pbz-em{ color:var(--pbz-yellow); -webkit-text-stroke:0; }
.pbz-hero__lead{ color:var(--pbz-text); font-size:1.02em; max-width:56ch; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.pbz-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.pbz-hero__stats{ display:flex; flex-wrap:wrap; gap:18px 30px; margin-top:26px; }
.pbz-stat__num{ font-family:var(--pbz-display); font-style:italic; font-weight:900; font-size:clamp(1.7rem,4.2vw,2.5rem); color:var(--pbz-yellow); line-height:1; }
.pbz-stat__lbl{ font-family:var(--pbz-accent); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--pbz-mut); }

/* TOC bar — отдельной полосой под hero */
.pbz-toc-bar{ position:relative; z-index:3; border-bottom:1px solid var(--pbz-line); background:rgba(8,16,26,.55); backdrop-filter:blur(6px); }

@media (max-width:760px){
  .pbz-hero{ min-height:auto; padding-block:22px 26px; }
  .pbz-hero__bg{ object-position:72% center; }
  .pbz-hero::after{ background:linear-gradient(0deg, rgba(8,16,26,.95) 16%, rgba(8,16,26,.74) 54%, rgba(8,16,26,.6) 100%); }
  .pbz-hero__inner{ max-width:none; }
}

/* верхняя «лента»-предупреждение */
.pbz-agebar{ background:rgba(0,0,0,.35); border-bottom:1px solid var(--pbz-line); font-family:var(--pbz-accent); font-size:.78rem; letter-spacing:.04em; color:var(--pbz-mut); }
.pbz-agebar__inner{ display:flex; align-items:center; gap:10px; justify-content:center; padding:7px 0; text-align:center; }
.pbz-agebar b{ color:var(--pbz-yellow); }

/* breadcrumbs */
.pbz-crumbs{ font-family:var(--pbz-accent); font-size:.82rem; color:var(--pbz-mut); display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-top:14px; }
.pbz-crumbs a:hover{ color:var(--pbz-yellow); }
.pbz-crumbs span[aria-current]{ color:var(--pbz-text); }
.pbz-crumbs .sep{ color:var(--pbz-mut-2); }

/* ---------- cards / panels ---------- */
.pbz-panel{
  position:relative; background:var(--pbz-panel); border:1px solid var(--pbz-line);
  border-radius:var(--pbz-radius); padding:clamp(20px,3vw,30px); backdrop-filter:blur(4px);
}
.pbz-panel--accent{ border-color:rgba(254,209,0,.3); box-shadow:inset 4px 0 0 var(--pbz-yellow); }
.pbz-panel--teal{ background:linear-gradient(135deg,rgba(1,126,128,.28),rgba(11,21,33,.4)); border-color:rgba(11,182,184,.3); }

.pbz-grid{ display:grid; gap:clamp(14px,2vw,22px); }
.pbz-grid--2{ grid-template-columns:repeat(2,1fr); }
.pbz-grid--3{ grid-template-columns:repeat(3,1fr); }
.pbz-grid--4{ grid-template-columns:repeat(4,1fr); }

/* feature card */
.pbz-feat{
  position:relative; padding:24px 22px; border-radius:var(--pbz-radius);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--pbz-line); overflow:hidden; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.pbz-feat::after{ content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; background:radial-gradient(circle,rgba(254,209,0,.16),transparent 70%); opacity:0; transition:opacity .3s; }
.pbz-feat:hover{ transform:translateY(-4px); border-color:var(--pbz-line-2); box-shadow:var(--pbz-shadow); }
.pbz-feat:hover::after{ opacity:1; }
.pbz-feat__ic{ width:50px; height:50px; display:grid; place-items:center; border-radius:12px; background:rgba(254,209,0,.12); color:var(--pbz-yellow); margin-bottom:16px; }
.pbz-feat__ic svg{ width:26px; height:26px; }
.pbz-feat--teal .pbz-feat__ic{ background:rgba(11,182,184,.14); color:var(--pbz-teal-2); }
.pbz-feat h3{ font-family:var(--pbz-display); font-style:italic; font-weight:800; text-transform:uppercase; font-size:1.1rem; color:var(--pbz-white); margin-bottom:.4em; }
.pbz-feat p{ color:var(--pbz-mut); margin:0; font-size:.96em; }

/* prose */
.pbz-prose p{ color:var(--pbz-text); }
.pbz-prose p+p{ margin-top:0; }
.pbz-prose a{ color:var(--pbz-yellow); text-decoration:underline; text-underline-offset:3px; }
.pbz-note{ margin-top:14px; padding:14px 18px; border-left:3px solid var(--pbz-teal-2); background:rgba(1,126,128,.12); border-radius:0 10px 10px 0; color:var(--pbz-mut); font-size:.95em; }
.pbz-quote{ padding:18px 22px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--pbz-line); border-left:4px solid var(--pbz-yellow); color:var(--pbz-text); }

/* ---------- pros & cons ---------- */
.pbz-pc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); }
.pbz-pc__col{ border-radius:var(--pbz-radius); padding:22px; border:1px solid var(--pbz-line); }
.pbz-pc__col--pro{ background:linear-gradient(180deg,rgba(1,126,128,.14),transparent); border-color:rgba(11,182,184,.3); }
.pbz-pc__col--con{ background:linear-gradient(180deg,rgba(254,209,0,.06),transparent); border-color:rgba(254,209,0,.22); }
.pbz-pc__head{ display:flex; align-items:center; gap:10px; font-family:var(--pbz-display); font-style:italic; font-weight:800; text-transform:uppercase; font-size:1.15rem; margin-bottom:14px; color:var(--pbz-white); }
.pbz-pc__head svg{ width:24px; height:24px; padding:5px; border-radius:8px; }
.pbz-pc__col--pro .pbz-pc__head svg{ background:rgba(11,182,184,.18); color:var(--pbz-teal-2); }
.pbz-pc__col--con .pbz-pc__head svg{ background:rgba(254,209,0,.16); color:var(--pbz-yellow); }
.pbz-pc__list li{ display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--pbz-line); color:var(--pbz-text); font-size:.97em; }
.pbz-pc__list li:last-child{ border-bottom:0; }
.pbz-pc__list svg{ width:19px; height:19px; flex:none; margin-top:2px; }
.pbz-pc__col--pro .pbz-pc__list svg{ color:var(--pbz-teal-2); }
.pbz-pc__col--con .pbz-pc__list svg{ color:var(--pbz-yellow); }

/* ---------- tables ---------- */
.pbz-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--pbz-radius); border:1px solid var(--pbz-line); background:var(--pbz-panel); }
.pbz-table-wrap::-webkit-scrollbar{ height:8px; }
.pbz-table-wrap::-webkit-scrollbar-thumb{ background:var(--pbz-line-2); border-radius:8px; }
.pbz-table{ width:100%; border-collapse:collapse; min-width:560px; font-size:.93em; }
.pbz-table th,.pbz-table td{ padding:13px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--pbz-line); }
.pbz-table thead th{
  font-family:var(--pbz-accent); font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.04em;
  font-size:.8rem; color:var(--pbz-ink); background:var(--pbz-yellow); white-space:nowrap; position:sticky; top:0;
}
.pbz-table tbody tr:nth-child(even){ background:rgba(255,255,255,.025); }
.pbz-table tbody tr:hover{ background:rgba(1,126,128,.1); }
.pbz-table td:first-child{ font-weight:600; color:var(--pbz-white); }
.pbz-table--key td:first-child{ width:38%; color:var(--pbz-yellow); font-family:var(--pbz-accent); font-weight:600; }
.pbz-table b,.pbz-table strong{ color:var(--pbz-yellow); }

/* stacked tables on mobile — label сверху, значение снизу (никакого гор. скролла) */
@media (max-width:680px){
  .pbz-table-wrap{ overflow:visible; border:0; background:none; border-radius:0; }
  .pbz-table--stack{ min-width:0; display:block; font-size:.95em; }
  .pbz-table--stack thead{ display:none; }
  .pbz-table--stack tbody{ display:block; }
  .pbz-table--stack tr{ display:block; width:auto; border:1px solid var(--pbz-line); border-radius:12px; margin:0 0 12px; background:rgba(255,255,255,.03); overflow:hidden; }
  .pbz-table--stack td{ display:block; width:auto; text-align:left; padding:9px 14px; border-bottom:1px solid var(--pbz-line); overflow-wrap:break-word; hyphens:manual; }
  .pbz-table--stack td:last-child{ border-bottom:0; }
  .pbz-table--stack td::before{ content:attr(data-label); display:block; font-family:var(--pbz-accent); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--pbz-yellow); margin-bottom:2px; }
  .pbz-table--stack td:first-child{ width:auto; background:rgba(254,209,0,.07); color:var(--pbz-white); font-size:1.02em; }
}

/* широкая таблица (9 кол.): на десктопе (≥1025) умещается без скролла и без буквенных переносов
   (1-я колонка шире); на планшете и мобайле — карточный режим (стек). */
@media (min-width:1025px){
  .pbz-table--wide{ table-layout:fixed; min-width:0; font-size:.82em; }
  .pbz-table--wide th,.pbz-table--wide td{ padding:9px 8px; white-space:normal; overflow-wrap:break-word; hyphens:manual; }
  .pbz-table--wide thead th{ white-space:normal; }
  .pbz-table--wide td:first-child,.pbz-table--wide th:first-child{ width:15%; }
}
@media (min-width:681px) and (max-width:1024px){
  .pbz-table-wrap:has(.pbz-table--wide){ overflow:visible; border:0; background:none; border-radius:0; }
  .pbz-table--wide{ min-width:0; display:block; font-size:.95em; }
  .pbz-table--wide thead{ display:none; }
  .pbz-table--wide tbody{ display:block; }
  .pbz-table--wide tr{ display:block; width:auto; border:1px solid var(--pbz-line); border-radius:12px; margin:0 0 12px; background:rgba(255,255,255,.03); overflow:hidden; }
  .pbz-table--wide td{ display:block; width:auto; text-align:left; padding:9px 14px; border-bottom:1px solid var(--pbz-line); overflow-wrap:break-word; hyphens:manual; }
  .pbz-table--wide td:last-child{ border-bottom:0; }
  .pbz-table--wide td::before{ content:attr(data-label); display:block; font-family:var(--pbz-accent); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--pbz-yellow); margin-bottom:2px; }
  .pbz-table--wide td:first-child{ background:rgba(254,209,0,.07); color:var(--pbz-white); }
}

/* ---------- steps ---------- */
.pbz-steps{ counter-reset:s; display:grid; gap:12px; }
.pbz-steps li{ counter-increment:s; position:relative; display:flex; gap:16px; padding:16px 18px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid var(--pbz-line); transition:border-color .2s,transform .2s; }
.pbz-steps li:hover{ border-color:rgba(254,209,0,.35); transform:translateX(3px); }
.pbz-steps li::before{
  content:counter(s,decimal-leading-zero); flex:none; width:42px; height:42px; display:grid; place-items:center;
  font-family:var(--pbz-display); font-style:italic; font-weight:900; font-size:1.1rem; color:var(--pbz-ink); background:var(--pbz-yellow);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.pbz-steps li span{ align-self:center; color:var(--pbz-text); }

/* numbered list (ordered, inline) */
.pbz-list{ display:grid; gap:9px; }
.pbz-list li{ display:flex; gap:11px; color:var(--pbz-text); }
.pbz-list li svg{ width:20px; height:20px; color:var(--pbz-yellow); flex:none; margin-top:3px; }

/* ---------- VIP ladder / rating ---------- */
.pbz-rating{ display:grid; gap:14px; }
.pbz-rating__row{ display:grid; grid-template-columns:1fr auto; gap:10px 18px; align-items:center; padding:14px 0; border-bottom:1px solid var(--pbz-line); }
.pbz-rating__row:last-child{ border-bottom:0; }
.pbz-rating__name{ font-family:var(--pbz-accent); font-weight:600; color:var(--pbz-white); }
.pbz-rating__ev{ grid-column:1/-1; color:var(--pbz-mut); font-size:.9em; }
.pbz-rating__bar{ width:min(46vw,220px); height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.pbz-rating__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--pbz-teal-2),var(--pbz-yellow)); border-radius:99px; }
.pbz-rating__score{ font-family:var(--pbz-display); font-style:italic; font-weight:900; color:var(--pbz-yellow); min-width:64px; text-align:right; }
.pbz-table--rating td:nth-child(2){ white-space:nowrap; }
.pbz-table--rating .pbz-rating__score{ display:block; text-align:left; min-width:0; }
.pbz-table--rating .pbz-rating__bar{ display:block; width:150px; max-width:100%; margin-top:7px; }
@media (max-width:680px){ .pbz-table--rating .pbz-rating__score,.pbz-table--rating .pbz-rating__bar{ margin-left:auto; } .pbz-table--rating .pbz-rating__score{ text-align:right; } }
.pbz-stars{ display:inline-flex; gap:2px; color:var(--pbz-yellow); }
.pbz-stars svg{ width:18px; height:18px; }
.pbz-stars .off{ color:rgba(255,255,255,.18); }

.pbz-score-grid{ grid-template-columns:300px 1fr; align-items:start; }
@media (max-width:860px){ .pbz-score-grid{ grid-template-columns:1fr; } }

/* score donut */
.pbz-scorebox{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pbz-donut{ --v:76; width:118px; height:118px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--pbz-yellow) calc(var(--v)*1%),rgba(255,255,255,.08) 0); position:relative; }
.pbz-donut::before{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--pbz-ink-1); }
.pbz-donut b{ position:relative; font-family:var(--pbz-display); font-style:italic; font-weight:900; font-size:1.5rem; color:var(--pbz-white); }
.pbz-donut b small{ font-size:.8rem; color:var(--pbz-mut); }

/* ---------- feedback cards ---------- */
.pbz-reviews{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
.pbz-review{ padding:20px; border-radius:var(--pbz-radius); background:rgba(255,255,255,.035); border:1px solid var(--pbz-line); }
.pbz-review__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pbz-review__who{ font-family:var(--pbz-accent); font-weight:700; color:var(--pbz-white); }

/* ---------- accordion (FAQ) ---------- */
.pbz-acc{ display:grid; gap:10px; }
.pbz-acc__item{ border:1px solid var(--pbz-line); border-radius:12px; background:rgba(255,255,255,.03); overflow:hidden; transition:border-color .2s; }
.pbz-acc__item.is-open{ border-color:rgba(254,209,0,.4); }
.pbz-acc__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; text-align:left; font-family:var(--pbz-accent); font-weight:700; font-size:1.04rem; color:var(--pbz-white); }
.pbz-acc__btn svg{ width:22px; height:22px; color:var(--pbz-yellow); transition:transform .25s; flex:none; }
.pbz-acc__item.is-open .pbz-acc__btn svg{ transform:rotate(180deg); }
.pbz-acc__panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.pbz-acc__panel > div{ padding:0 20px 18px; color:var(--pbz-mut); }

/* ---------- CTA banner ---------- */
.pbz-ctabox{ position:relative; overflow:hidden; border-radius:20px; padding:clamp(28px,5vw,52px); text-align:center; background:linear-gradient(135deg,rgba(1,126,128,.4),rgba(11,21,33,.7)); border:1px solid rgba(11,182,184,.35); }
.pbz-ctabox__v{ position:absolute; right:-4%; top:50%; transform:translateY(-50%); width:42%; color:var(--pbz-yellow); opacity:.12; z-index:1; }
.pbz-ctabox h2,.pbz-ctabox p,.pbz-ctabox .pbz-kicker,.pbz-ctabox a{ position:relative; z-index:2; }
.pbz-ctabox p{ color:var(--pbz-mut); max-width:56ch; margin-inline:auto; }
/* CTA/секция с фоновой картинкой (картинка задаётся inline background-image на элементе) */
.pbz-ctabox--img{ border-color:rgba(254,209,0,.3); background-size:cover; background-position:center; background-repeat:no-repeat; }
.pbz-ctabox--img::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(8,16,26,.74), rgba(8,16,26,.9)); }
.pbz-ctabox--img p{ color:var(--pbz-text); }

/* ---------- image band (фоновая картинка + оверлей, текст слева) ---------- */
.pbz-band{ position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--pbz-line); padding:clamp(24px,4vw,44px); }
.pbz-band::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--pbz-band-img) center/cover no-repeat; transform:scale(1.02); }
.pbz-band::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,16,26,.95) 0%, rgba(8,16,26,.8) 45%, rgba(8,16,26,.45) 100%); }
.pbz-band > *{ position:relative; z-index:2; }
.pbz-band__in{ max-width:60ch; }

/* ---------- slot gallery (тумбы игр) ---------- */
.pbz-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,16px); }
.pbz-slotcard{ position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid var(--pbz-line); aspect-ratio:1/1; background:var(--pbz-ink-2); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.pbz-slotcard:hover{ transform:translateY(-4px); border-color:rgba(254,209,0,.5); box-shadow:var(--pbz-shadow); }
.pbz-slotcard img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pbz-slotcard:hover img{ transform:scale(1.07); }
.pbz-slotcard__cap{ position:absolute; inset:auto 0 0 0; padding:26px 12px 11px; background:linear-gradient(0deg, rgba(8,16,26,.95) 12%, rgba(8,16,26,.55) 60%, transparent); }
.pbz-slotcard__name{ display:block; font-family:var(--pbz-display); font-style:italic; font-weight:800; text-transform:uppercase; font-size:.92rem; color:var(--pbz-white); line-height:1; }
.pbz-slotcard__prov{ display:block; font-family:var(--pbz-accent); font-size:.72rem; letter-spacing:.04em; color:var(--pbz-yellow); margin-top:3px; }
.pbz-slotcard__badge{ position:absolute; top:9px; left:9px; z-index:2; }
@media (max-width:760px){ .pbz-slots{ grid-template-columns:repeat(2,1fr); } }

/* секция «текст + картинка» */
.pbz-media-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,30px); align-items:center; }
.pbz-media-split__img{ border-radius:16px; overflow:hidden; border:1px solid var(--pbz-line); box-shadow:var(--pbz-shadow); }
.pbz-media-split__img img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/10; }
@media (max-width:860px){ .pbz-media-split{ grid-template-columns:1fr; } .pbz-media-split__img{ order:-1; } }

/* ---------- promo-баннеры (full-width, как hero: фон-картинка + текст слева) ---------- */
.pbz-promo{ position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--pbz-line); background:var(--pbz-ink-1); min-height:clamp(170px,19vw,210px); display:flex; align-items:center; }
.pbz-promo__bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:right center; }
.pbz-promo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,16,26,.95) 0%, rgba(8,16,26,.82) 32%, rgba(8,16,26,.4) 62%, rgba(8,16,26,.05) 100%); }
.pbz-promo--teal::after{ background:linear-gradient(90deg, rgba(8,16,26,.95) 0%, rgba(1,40,46,.8) 34%, rgba(1,60,62,.35) 64%, rgba(8,16,26,.05) 100%); }
.pbz-promo__in{ position:relative; z-index:2; padding:clamp(18px,3vw,32px); max-width:64%; }
.pbz-promo__label{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--pbz-accent); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:rgba(254,209,0,.16); color:var(--pbz-yellow); border:1px solid rgba(254,209,0,.45); }
.pbz-promo__title{ font-family:var(--pbz-display); font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(1.3rem,2.7vw,2.05rem); line-height:1; color:var(--pbz-white); margin:.45em 0 .2em; text-shadow:0 3px 16px rgba(0,0,0,.6); overflow-wrap:break-word; hyphens:manual; }
.pbz-promo__title .pbz-em{ color:var(--pbz-yellow); }
.pbz-promo__sub{ color:var(--pbz-text); font-size:.96rem; max-width:48ch; margin:0; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.pbz-promo__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media (max-width:760px){
  .pbz-promo{ min-height:236px; align-items:flex-end; }
  .pbz-promo__bg{ object-position:center 18%; }
  .pbz-promo::after,.pbz-promo--teal::after{ background:linear-gradient(0deg, rgba(8,16,26,.96) 30%, rgba(8,16,26,.52) 64%, rgba(8,16,26,.18) 100%); }
  .pbz-promo__in{ max-width:none; width:100%; }
}

/* ---------- footer (минимальный) ---------- */
.pbz-footer{ margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--pbz-line); background:rgba(8,16,26,.6); }
.pbz-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:30px; padding-block:clamp(30px,5vw,52px); }
.pbz-footer__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:16px 0; }
.pbz-footer__nav a{ font-family:var(--pbz-accent); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.9rem; color:var(--pbz-mut); }
.pbz-footer__nav a:hover{ color:var(--pbz-yellow); }
.pbz-footer__rg{ font-size:.9em; color:var(--pbz-mut); }
.pbz-footer__rg b{ color:var(--pbz-text); }
.pbz-foot18{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; border:2px solid var(--pbz-yellow); color:var(--pbz-yellow); font-family:var(--pbz-display); font-style:italic; font-weight:900; font-size:1rem; flex:none; }
.pbz-footer__bottom{ border-top:1px solid var(--pbz-line); padding-block:16px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; color:var(--pbz-mut-2); font-size:.84em; }

/* ---------- back to top ---------- */
.pbz-top{ position:fixed; right:18px; bottom:18px; z-index:50; width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:var(--pbz-yellow); color:var(--pbz-ink); box-shadow:var(--pbz-shadow); opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .25s,transform .25s; }
.pbz-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.pbz-top:hover{ background:var(--pbz-yellow-2); }
.pbz-top svg{ width:24px; height:24px; }

/* TOC sticky chips */
.pbz-toc{ display:flex; gap:8px; overflow-x:auto; padding:10px 0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pbz-toc::-webkit-scrollbar{ display:none; }
.pbz-toc a{ white-space:nowrap; font-family:var(--pbz-accent); font-weight:600; font-size:.84rem; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--pbz-line); color:var(--pbz-mut); }
.pbz-toc a:hover{ color:var(--pbz-yellow); border-color:rgba(254,209,0,.4); }

/* providers / payments strip */
.pbz-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.pbz-tag{ font-family:var(--pbz-accent); font-weight:700; font-size:.82rem; letter-spacing:.03em; padding:8px 14px; border-radius:9px; background:linear-gradient(180deg,rgba(254,209,0,.1),rgba(1,126,128,.08)); border:1px solid rgba(254,209,0,.22); color:var(--pbz-text); transition:border-color .2s,color .2s,transform .2s; }
.pbz-tag:hover{ color:var(--pbz-yellow); border-color:rgba(254,209,0,.55); transform:translateY(-2px); }

/* ---------- scroll reveal & motion ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
@keyframes pbz-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.pbz-hero__v svg{ animation:pbz-float 6s ease-in-out infinite; }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .pbz-grid--4{ grid-template-columns:repeat(2,1fr); }
  .pbz-grid--3{ grid-template-columns:repeat(2,1fr); }
}
/* шапка: при нехватке места (3 кнопки + nav) всё уходит в бургер */
@media (max-width:980px){
  .pbz-nav,.pbz-header__actions{ display:none; }
  .pbz-burger{ display:inline-flex; }
}
@media (max-width:760px){
  .pbz-grid--2,.pbz-grid--3,.pbz-grid--4{ grid-template-columns:1fr; }
  .pbz-pc{ grid-template-columns:1fr; }
  .pbz-reviews{ grid-template-columns:1fr; }
  .pbz-footer__grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .pbz-hero__stats{ gap:16px 22px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* print-ish / utility */
.pbz-center{ text-align:center; }
.pbz-mt{ margin-top:clamp(18px,3vw,30px); }
.pbz-mt-sm{ margin-top:12px; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }