/* RESET */
html { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
table { border-collapse: collapse; }
/* TYPOGRAPHY */
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
}
h1, h2, h3, h4 { font-family: "Poppins", "Inter", sans-serif; font-weight: 800; line-height: 1.2; }
h1, h2, h3, p, li, blockquote, td, th { overflow-wrap: anywhere; word-break: break-word; }
a, code { overflow-wrap: anywhere; }
/* ROOT VARIABLES */
:root {
--bzr-bg: #0c0c0f;
--bzr-bg-raised: #15161b;
--bzr-bg-soft: #1c1e25;
--bzr-text: #f5f6f8;
--bzr-text-muted: #9a9ca6;
--bzr-accent: #ff6a1a;
--bzr-accent-hover: #ff7e3d;
--bzr-accent-2: #ffb648;
--bzr-green: #35d68a;
--bzr-green-hover: #4ee29c;
--bzr-border: #292b33;
--bzr-radius: 14px;
--bzr-shadow: 0 20px 40px rgba(0, 0, 0, .5);
--bzr-container: 1280px;
--bzr-content: 1280px;
}
body { background: var(--bzr-bg); color: var(--bzr-text); -webkit-font-smoothing: antialiased; }
.bzr-container { max-width: var(--bzr-container); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 760px) { .bzr-container { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 480px) { .bzr-container { padding-left: 12px; padding-right: 12px; } }
.bzr-no-scroll { overflow: hidden; }
/* PROMO BAR (above header) */
.bzr-promo-bar { display: block; width: 100%; line-height: 0; }
.bzr-promo-bar img { width: 100%; height: auto; display: block; }
/* HEADER */
.bzr-header {
position: sticky;
top: 0;
z-index: 80;
background: #0e0f13;
border-bottom: 1px solid var(--bzr-border);
}
.bzr-header__inner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
flex-wrap: nowrap;
min-width: 0;
}
.bzr-header__logo { flex-shrink: 0; display: flex; align-items: center; min-width: 0; }
.bzr-header__logo img { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
@media (min-width: 760px) {
.bzr-header__logo img { height: 40px; max-width: none; }
.bzr-header__inner { gap: 16px; padding: 14px 24px; }
}
@media (min-width: 1440px) { .bzr-header__inner { padding-left: 48px; padding-right: 48px; } }
.bzr-header__nav { display: none; min-width: 0; }
@media (min-width: 1024px) {
.bzr-header__nav { display: flex; align-items: center; gap: 14px; margin-left: auto; margin-right: auto; }
.bzr-header__nav a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #d7d8de; white-space: nowrap; }
.bzr-header__nav a:hover, .bzr-header__nav a:focus-visible { color: var(--bzr-accent-2); }
.bzr-header__nav a svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }
}
@media (min-width: 1280px) { .bzr-header__nav { gap: 20px; } .bzr-header__nav a { font-size: 14px; } }
.bzr-header__badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding: 3px 6px; border-radius: 5px; line-height: 1.4; }
.bzr-header__badge svg { width: 9px; height: 9px; flex-shrink: 0; }
.bzr-header__badge--new { background: var(--bzr-accent); color: #1a0f06; }
.bzr-header__badge--live { background: #e0263a; color: #fff; }
.bzr-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.bzr-header__flag {
display: none; align-items: center; gap: 5px;
padding: 8px 10px; border-radius: 8px; background: var(--bzr-bg-raised); border: 1px solid var(--bzr-border);
}
.bzr-header__flag-text { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--bzr-text); }
.bzr-header__flag svg:last-child { width: 10px; height: 10px; stroke: var(--bzr-text-muted); }
@media (min-width: 640px) { .bzr-header__flag { display: inline-flex; } }
.bzr-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--bzr-border);
flex-direction: column; gap: 4px; flex-shrink: 0;
}
.bzr-burger span { width: 18px; height: 2px; background: var(--bzr-text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.bzr-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bzr-burger.is-open span:nth-child(2) { opacity: 0; }
.bzr-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .bzr-burger { display: none; } }
/* HEADER CTA */
.bzr-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
letter-spacing: .02em; white-space: nowrap; max-width: 100%; transition: background .15s, transform .15s;
}
.bzr-btn--accent { background: var(--bzr-green); color: #06231a; }
.bzr-btn--accent:hover { background: var(--bzr-green-hover); }
.bzr-btn--outline { border: 1px solid #3a3b42; color: var(--bzr-text); background: transparent; }
.bzr-btn--outline:hover { border-color: var(--bzr-text-muted); }
.bzr-header__actions .bzr-btn { padding: 8px 14px; font-size: 12.5px; border-radius: 8px; }
@media (min-width: 760px) { .bzr-header__actions .bzr-btn { padding: 10px 20px; font-size: 13.5px; } }
/* MOBILE MENU OVERLAY */
.bzr-mobile-menu {
position: fixed; inset: 0; z-index: 100; background: rgba(6, 6, 8, .96);
transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
padding: 84px 20px 40px;
}
.bzr-mobile-menu.is-open { transform: translateX(0); }
.bzr-mobile-menu__close {
position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
background: var(--bzr-bg-raised); border: 1px solid var(--bzr-border); display: flex; align-items: center;
justify-content: center; color: var(--bzr-text); z-index: 1;
}
.bzr-mobile-menu__close svg { width: 18px; height: 18px; }
.bzr-mobile-menu__close:hover { border-color: var(--bzr-accent); }
.bzr-mobile-menu__group { margin-bottom: 26px; }
.bzr-mobile-menu__title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--bzr-text-muted); margin-bottom: 10px; }
.bzr-mobile-menu__group a { display: block; padding: 10px 0; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--bzr-border); }
/* SUBNAV PILLS */
.bzr-subnav { background: var(--bzr-bg); padding: 18px 0 20px; border-bottom: 1px solid var(--bzr-border); }
.bzr-subnav__row { display: flex; justify-content: flex-start; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bzr-subnav__row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .bzr-subnav__row { justify-content: center; flex-wrap: wrap; overflow: visible; } }
.bzr-subnav__pill {
flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: 18px 14px; background: #14151a; border: 1px solid var(--bzr-border);
border-radius: 16px; font-size: 13px; font-weight: 700; color: var(--bzr-text); width: 118px;
text-align: center; transition: border-color .15s, background .15s;
}
.bzr-subnav__pill svg { width: 28px; height: 28px; stroke: var(--bzr-text); }
.bzr-subnav__pill:hover, .bzr-subnav__pill:focus-visible { background: var(--bzr-bg-raised); border-color: var(--bzr-accent); }
/* HERO */
.bzr-hero {
position: relative; padding: 48px 0 56px; overflow: hidden;
background-image: radial-gradient(circle at 15% 20%, rgba(255, 106, 26, .12) 0%, transparent 45%), linear-gradient(160deg, #12131a 0%, var(--bzr-bg) 60%);
border-bottom: 1px solid var(--bzr-border);
}
.bzr-hero__inner { min-width: 0; max-width: var(--bzr-content); display: flex; flex-direction: column; gap: 16px; }
.bzr-hero h1 { font-size: clamp(28px, 4.2vw, 44px); }
.bzr-hero__lead { font-size: 17px; color: var(--bzr-text-muted); max-width: 620px; }
.bzr-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.bzr-hero__ctas .bzr-btn--lg { padding: 15px 26px; font-size: 15px; }
@media (max-width: 639px) {
.bzr-hero__inner { gap: 14px; }
.bzr-hero__lead { font-size: 15.5px; }
.bzr-hero__ctas .bzr-btn--lg { padding: 13px 18px; font-size: 13.5px; width: 100%; }
}
/* BREADCRUMBS */
.bzr-breadcrumbs { padding: 14px 0; font-size: 13px; color: var(--bzr-text-muted); }
.bzr-breadcrumbs a { color: var(--bzr-text-muted); }
.bzr-breadcrumbs a:hover { color: var(--bzr-accent-2); }
.bzr-breadcrumbs span[aria-current] { color: var(--bzr-text); }
/* LEAD PARAGRAPH */
.bzr-lead-block { padding: 4px 0 28px; max-width: var(--bzr-content); margin-left: auto; margin-right: auto; color: var(--bzr-text-muted); font-size: 15.5px; }
/* CONTENT SECTIONS */
.bzr-content { padding: 28px 0; }
.bzr-content h2, .bzr-content p, .bzr-content ul.bzr-list, .bzr-content blockquote, .bzr-table-wrap {
max-width: var(--bzr-content); margin-left: auto; margin-right: auto;
}
.bzr-content h2 { font-size: 26px; margin-bottom: 14px; text-align: center; }
.bzr-content h3 { font-size: 19px; margin-top: 22px; margin-bottom: 10px; }
.bzr-content p { color: #cfd1d8; margin-bottom: 14px; }
.bzr-content ul.bzr-list { display: grid; gap: 8px; margin-bottom: 18px; }
.bzr-content ul.bzr-list li { padding-left: 22px; position: relative; color: #cfd1d8; }
.bzr-content ul.bzr-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--bzr-green); font-weight: 800; }
.bzr-table-wrap { overflow-x: auto; margin-top: 20px; margin-bottom: 20px; border-radius: var(--bzr-radius); border: 1px solid var(--bzr-border); }
table.bzr-table { width: 100%; min-width: 480px; font-size: 14.5px; }
table.bzr-table th, table.bzr-table td { padding: 12px 16px; border-bottom: 1px solid var(--bzr-border); text-align: left; }
table.bzr-table th { background: var(--bzr-bg-raised); color: var(--bzr-accent-2); font-weight: 700; }
table.bzr-table tr:last-child td { border-bottom: none; }
.bzr-content blockquote { margin-top: 22px; margin-bottom: 22px; padding: 18px 22px; border-left: 3px solid var(--bzr-accent); background: var(--bzr-bg-raised); border-radius: 0 var(--bzr-radius) var(--bzr-radius) 0; font-style: italic; color: #dfe0e5; }
.bzr-content blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--bzr-text-muted); }
/* INLINE SECTION CTA */
.bzr-cta-block { text-align: center; padding: 4px 0 8px; }
.bzr-cta-block .bzr-btn { padding: 14px 30px; font-size: 14.5px; }
/* OFFERS LISTING — WIDE HORIZONTAL BARS (3 cards, vertical stack, short height) */
.bzr-offers { padding: 30px 0 20px; }
.bzr-offers__head { margin-bottom: 18px; text-align: center; }
.bzr-offers__head h2 { font-size: 28px; margin-bottom: 6px; }
.bzr-offers__head p { color: var(--bzr-text-muted); font-size: 14.5px; }
.bzr-offers__grid { display: flex; flex-direction: column; gap: 16px; max-width: var(--bzr-content); margin-left: auto; margin-right: auto; }
.bzr-offers__grid > div { display: flex; }
.bzr-offers__card {
position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%;
background: var(--bzr-bg-raised); border: 1px solid var(--bzr-border); border-radius: var(--bzr-radius);
padding: 16px 20px; box-shadow: var(--bzr-shadow);
transition: border-color .2s, background .2s, box-shadow .2s;
}
.bzr-offers__card:hover {
border-color: var(--bzr-accent);
background: var(--bzr-bg-soft);
box-shadow: 0 0 0 1px rgba(255, 106, 26, .3), var(--bzr-shadow);
}
.bzr-offers__card * { pointer-events: none; }
.bzr-offers__card .bzr-offers__overlay-link,
.bzr-offers__card .bzr-offers__review-link { pointer-events: auto; cursor: pointer; }
.bzr-offers__overlay-link {
position: absolute; inset: 0; z-index: 1; font-size: 0; color: transparent; text-indent: -9999px; border-radius: inherit;
}
.bzr-offers__card > *:not(.bzr-offers__overlay-link) { position: relative; z-index: 2; }
.bzr-offers__card > .bzr-offers__ribbon { position: absolute; z-index: 2; }
.bzr-offers__cta, .bzr-offers__review-link { position: relative; z-index: 3; }
.bzr-offers__card--top { border-color: var(--bzr-accent); box-shadow: 0 0 0 1px rgba(255, 106, 26, .25), var(--bzr-shadow); }
.bzr-offers__ribbon {
top: 14px; right: -6px; background: var(--bzr-accent); color: #1a0f06;
font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 5px 14px 5px 10px;
border-radius: 6px 0 0 6px;
}
.bzr-offers__banner {
width: 100%; height: 68px; border-radius: 12px; background: #0d0e12;
border: 1px solid var(--bzr-border); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bzr-offers__banner img { max-width: 68%; max-height: 60%; object-fit: contain; }
.bzr-offers__identity { display: contents; }
.bzr-offers__body { display: contents; }
.bzr-offers__aside { display: contents; }
.bzr-offers__id { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.bzr-offers__name { font-size: 18px; }
.bzr-offers__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--bzr-accent-2); font-weight: 700; flex-shrink: 0; }
.bzr-offers__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bzr-offers__tag { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--bzr-border); color: var(--bzr-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.bzr-offers__tag--top { border-color: rgba(255, 106, 26, .5); color: var(--bzr-accent-2); }
.bzr-offers__tag--exclusive { border-color: rgba(139, 92, 246, .5); color: #cbb8ff; }
.bzr-offers__bonus { background: #0d0e12; border-radius: 10px; padding: 10px 14px; }
.bzr-offers__bonus-label { display: block; font-size: 11px; color: var(--bzr-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.bzr-offers__bonus-value { font-size: 15.5px; font-weight: 800; }
.bzr-offers__usp { display: grid; gap: 6px; }
.bzr-offers__usp li { padding-left: 20px; position: relative; font-size: 13px; color: #cfd1d8; white-space: nowrap; }
.bzr-offers__usp li::before { content: "\2713"; position: absolute; left: 0; color: var(--bzr-green); font-weight: 800; }
.bzr-offers__social { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bzr-text-muted); background: #0d0e12; border-radius: 8px; padding: 5px 10px; width: fit-content; }
.bzr-offers__timer { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bzr-text-muted); }
.bzr-offers__timer-box { background: #0d0e12; border: 1px solid var(--bzr-border); border-radius: 6px; padding: 3px 6px; font-weight: 700; color: var(--bzr-text); min-width: 26px; text-align: center; }
.bzr-offers__cta-row { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.bzr-offers__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border-radius: 10px; background: var(--bzr-green); color: #06231a; font-weight: 800; font-size: 13.5px; text-align: center; }
.bzr-offers__review-link { text-align: center; font-size: 12px; color: var(--bzr-text-muted); text-decoration: underline; }
.bzr-offers__urgency { font-size: 11.5px; color: var(--bzr-accent-2); text-align: center; }
.bzr-offers__aggregate { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--bzr-text-muted); }
/* Desktop/tablet: 3 cards side by side in one row. Each card keeps the same
tall/vertical internal stacking as on mobile (identity/body/aside stay
display: contents — banner+name on top, then bonus/USP, then CTA at the bottom). */
@media (min-width: 860px) {
.bzr-offers__grid { flex-direction: row; align-items: stretch; }
.bzr-offers__grid > div { flex: 1 1 0; min-width: 0; display: flex; }
.bzr-offers__card { width: 100%; }
}
/* SLOTS LISTING */
.bzr-slots { padding: 22px 0 30px; border-bottom: 1px solid var(--bzr-border); }
.bzr-slots__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bzr-slots__head h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.bzr-slots__head h2 span[aria-hidden] { font-size: 16px; }
.bzr-slots__all { font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; background: var(--bzr-green); border: 1px solid var(--bzr-green); color: #06231a; flex-shrink: 0; white-space: nowrap; }
.bzr-slots__all:hover { background: var(--bzr-green-hover); }
.bzr-slots__row-wrap { position: relative; }
.bzr-slots__grid { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.bzr-slots__grid::-webkit-scrollbar { display: none; }
.bzr-slots__grid > div {
flex: 0 0 148px; position: relative; aspect-ratio: 3 / 4; border-radius: var(--bzr-radius); overflow: hidden; border: 1px solid var(--bzr-border);
background: var(--bzr-bg-raised);
}
@media (min-width: 640px) { .bzr-slots__grid > div { flex: 0 0 170px; } }
@media (min-width: 1024px) { .bzr-slots__grid > div { flex: 0 0 190px; } }
.bzr-slots__next {
position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
background: rgba(18, 19, 24, .92); border: 1px solid var(--bzr-border); display: flex; align-items: center; justify-content: center;
color: var(--bzr-text); z-index: 4;
}
.bzr-slots__next svg { width: 16px; height: 16px; }
@media (max-width: 759px) { .bzr-slots__next { display: none; } }
.bzr-slots__scrollbar { height: 3px; background: var(--bzr-border); border-radius: 3px; margin-top: 12px; overflow: hidden; }
.bzr-slots__scrollbar-fill { width: 24%; height: 100%; background: var(--bzr-accent); border-radius: 3px; }
@media (max-width: 759px) {
.bzr-slots__grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; gap: 12px; }
.bzr-slots__grid > div { flex: none; }
.bzr-slots__scrollbar { display: none; }
}
.bzr-slots__tile { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; aspect-ratio: auto; border-radius: 0; }
.bzr-slots__tile img { width: 100%; height: 100%; object-fit: cover; }
.bzr-slots__top-row, .bzr-slots__meta-row, .bzr-slots__overlay, .bzr-slots__play-icon { pointer-events: none; }
.bzr-slots__top-row { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; z-index: 2; }
.bzr-slots__hot { background: var(--bzr-accent); color: #1a0f06; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.bzr-slots__meta-row { position: absolute; left: 8px; right: 8px; bottom: 40px; display: flex; justify-content: space-between; gap: 4px; z-index: 2; }
.bzr-slots__badge { background: rgba(12, 12, 15, .82); color: var(--bzr-text); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.bzr-slots__title-row { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 8px 10px; background: linear-gradient(180deg, rgba(12, 12, 15, 0) 0%, rgba(8, 8, 10, .92) 60%); }
.bzr-slots__name { font-size: 13px; font-weight: 700; color: var(--bzr-text); }
.bzr-slots__overlay {
position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
background: rgba(8, 8, 10, .82); opacity: 0; transition: opacity .2s;
}
.bzr-slots__grid > div:hover .bzr-slots__overlay { opacity: 1; }
.bzr-slots__play-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bzr-accent); display: flex; align-items: center; justify-content: center; color: #1a0f06; }
.bzr-slots__overlay-cta { font-size: 11.5px; font-weight: 800; text-transform: uppercase; color: var(--bzr-text); }
/* REVIEWS */
.bzr-reviews { padding: 30px 0; }
.bzr-reviews__head { text-align: center; margin-bottom: 18px; }
.bzr-reviews__head h2 { font-size: 26px; margin-bottom: 6px; }
.bzr-reviews__agg { color: var(--bzr-accent-2); font-weight: 700; font-size: 14.5px; }
.bzr-reviews__grid { display: grid; gap: 14px; grid-template-columns: 1fr; max-width: var(--bzr-content); margin-left: auto; margin-right: auto; }
@media (min-width: 760px) { .bzr-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
.bzr-reviews__card { background: var(--bzr-bg-raised); border: 1px solid var(--bzr-border); border-radius: var(--bzr-radius); padding: 18px; }
.bzr-reviews__stars { color: var(--bzr-accent-2); font-size: 14px; margin-bottom: 8px; }
.bzr-reviews__body { font-size: 14px; color: #cfd1d8; margin-bottom: 12px; }
.bzr-reviews__meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--bzr-text-muted); }
.bzr-reviews__more { text-align: center; margin-top: 16px; max-width: var(--bzr-content); margin-left: auto; margin-right: auto; }
.bzr-reviews__more a { font-size: 12.5px; color: var(--bzr-accent-2); text-decoration: underline; }
/* AUTHOR BLOCK */
.bzr-author { display: flex; gap: 20px; padding: 26px 24px; background: var(--bzr-bg-raised); border: 1px solid var(--bzr-border); border-radius: var(--bzr-radius); max-width: var(--bzr-content); margin-left: auto; margin-right: auto; align-items: flex-start; }
.bzr-author__photo { border-radius: 50%; overflow: hidden; flex-shrink: 0; width: 96px; height: 96px; }
.bzr-author__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bzr-author__name { font-weight: 800; font-size: 17px; }
.bzr-author__role { color: var(--bzr-text-muted); font-size: 13.5px; margin-bottom: 10px; }
.bzr-author__bio { font-size: 14px; line-height: 1.55; color: #cfd1d8; margin-bottom: 10px; }
.bzr-author__link { font-size: 13px; color: var(--bzr-accent-2); text-decoration: underline; }
/* FAQ */
.bzr-faq { padding: 34px 0; max-width: var(--bzr-content); margin-left: auto; margin-right: auto; }
.bzr-faq h2 { font-size: 28px; margin-bottom: 18px; text-align: center; }
.bzr-faq__item { border: 1px solid var(--bzr-border); border-radius: 12px; margin-bottom: 12px; background: var(--bzr-bg-raised); overflow: hidden; }
.bzr-faq__item summary { padding: 19px 48px 19px 20px; font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none; position: relative; }
.bzr-faq__item summary::-webkit-details-marker { display: none; }
.bzr-faq__item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--bzr-accent-2); }
.bzr-faq__item[open] summary::after { content: "\2013"; }
.bzr-faq__item summary h3 { display: inline; font-size: inherit; font-weight: inherit; }
.bzr-faq__answer { padding: 0 20px 19px; font-size: 14.5px; color: #cfd1d8; }
/* RELATED LINKS */
.bzr-related { padding: 14px 14px 30px; max-width: 100%; }
.bzr-related h2 { font-size: 18px; margin-bottom: 10px; }
.bzr-related__list { display: flex; gap: 8px; flex-wrap: wrap; }
.bzr-related__list a { font-size: 12.5px; padding: 7px 12px; border: 1px solid var(--bzr-border); border-radius: 999px; color: var(--bzr-text-muted); }
.bzr-related__list a:hover { color: var(--bzr-text); border-color: var(--bzr-accent); }
/* FOOTER — each block is its own bordered card with a colored top stripe,
instead of plain flat link columns. */
.bzr-footer { background: #0a0a0d; border-top: 1px solid var(--bzr-border); padding: 40px 0 20px; }
.bzr-footer__top { display: grid; grid-template-columns: 1fr; gap: 16px; padding-bottom: 24px; }
.bzr-footer__brand { grid-column: 1 / -1; }
@media (min-width: 600px) { .bzr-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .bzr-footer__top { grid-template-columns: 1.1fr 1fr 1.2fr; gap: 18px; } .bzr-footer__brand { grid-column: auto; } }
.bzr-footer__brand, .bzr-footer__col {
background: var(--bzr-bg-raised); border: 1px solid var(--bzr-border); border-top: 3px solid var(--bzr-green);
border-radius: var(--bzr-radius); padding: 18px 20px;
}
.bzr-footer__col:nth-of-type(3) { border-top-color: var(--bzr-accent); }
.bzr-footer__col:nth-of-type(4) { border-top-color: var(--bzr-accent-2); }
/* Wide panel: the GGBET Bonus comparisons list has far more items than the
others, so give it the full row width and lay its links out in columns
instead of one long, awkwardly tall single-file list. */
.bzr-footer__col--wide { grid-column: 1 / -1; }
.bzr-footer__col-list--2col { column-gap: 24px; }
.bzr-footer__col-list--2col li { break-inside: avoid; }
@media (min-width: 600px) { .bzr-footer__col-list--2col { column-count: 2; } }
@media (min-width: 900px) { .bzr-footer__col-list--2col { column-count: 3; } }
.bzr-footer__brand img { max-height: 30px; margin-bottom: 10px; }
.bzr-footer__brand p { font-size: 12.5px; color: var(--bzr-text-muted); margin-bottom: 12px; max-width: 320px; }
.bzr-footer__social-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bzr-text-muted); margin-bottom: 8px; }
.bzr-footer__social { display: flex; gap: 8px; flex-wrap: wrap; }
.bzr-footer__social a { width: 32px; height: 32px; border-radius: 8px; background: var(--bzr-bg-soft); border: 1px solid var(--bzr-border); display: flex; align-items: center; justify-content: center; }
.bzr-footer__social svg { width: 15px; height: 15px; fill: var(--bzr-text-muted); }
.bzr-footer__social a:hover svg { fill: var(--bzr-accent-2); }
.bzr-footer__col h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; color: var(--bzr-text); }
.bzr-footer__col ul li { margin-bottom: 7px; padding-left: 12px; position: relative; }
.bzr-footer__col ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--bzr-green); }
.bzr-footer__col a { font-size: 13px; color: var(--bzr-text-muted); }
.bzr-footer__col a:hover { color: var(--bzr-text); }
.bzr-footer__pay { padding: 20px 0; border-top: 1px solid var(--bzr-border); }
.bzr-footer__pay-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bzr-text-muted); margin-bottom: 10px; }
.bzr-footer__pay-grid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bzr-footer__pay-grid img, .bzr-footer__pay-grid svg { height: 28px; width: auto; max-width: 100%; object-fit: contain; flex-shrink: 0; }
@media (max-width: 599px) { .bzr-footer__pay-grid { gap: 8px 12px; } .bzr-footer__pay-grid img, .bzr-footer__pay-grid svg { height: 22px; } }
.bzr-footer__age { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; border-top: 1px solid var(--bzr-border); }
.bzr-footer__age span { font-size: 11.5px; line-height: 1.5; color: var(--bzr-text-muted); }
.bzr-footer__age strong { color: var(--bzr-text); }
.bzr-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--bzr-border); font-size: 12px; color: var(--bzr-text-muted); }
.bzr-footer__legal-links { display: flex; gap: 6px; flex-wrap: wrap; }
.bzr-footer__legal-links a { color: var(--bzr-text-muted); }
.bzr-footer__legal-links a:hover { color: var(--bzr-text); }
@media (max-width: 599px) {
.bzr-footer { padding: 28px 0 16px; font-size: 12px; }
.bzr-footer__col h3 { font-size: 11px; margin-bottom: 6px; }
.bzr-footer__col ul li { margin-bottom: 4px; }
.bzr-footer__col a { font-size: 12px; }
}
/* STICKY FAB (mobile only) */
.bzr-fab {
display: none; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 95;
padding: 16px 30px; background: var(--bzr-green); color: #06231a; font-weight: 800; font-size: 14.5px;
text-transform: uppercase; letter-spacing: .03em; border-radius: 999px;
box-shadow: 0 10px 30px rgba(53, 214, 138, .45), 0 2px 8px rgba(0, 0, 0, .6);
align-items: center; justify-content: center; gap: 8px; min-width: 220px; max-width: calc(100% - 28px);
white-space: nowrap; text-align: center; transition: background .15s;
}
.bzr-fab:hover { background: var(--bzr-green-hover); }
@media (max-width: 979px) { .bzr-fab { display: inline-flex; } }
@media (max-width: 480px) { .bzr-fab { padding: 14px 24px; font-size: 13.5px; min-width: 200px; } }
body.is-cookies-shown .bzr-fab { bottom: 110px; }
@media (max-width: 480px) { body.is-cookies-shown .bzr-fab { bottom: 150px; } }
@media (max-width: 1023px) { .bzr-footer { padding-bottom: 84px; } }
/* COOKIE BAR */
.bzr-cookies {
position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 90; max-width: 640px; margin-left: auto; margin-right: auto;
background: var(--bzr-bg-soft); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 16px 18px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 106, 26, .18);
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.bzr-cookies p { font-size: 13px; color: #cfd1d8; flex: 1; min-width: 200px; }
.bzr-cookies a { color: var(--bzr-accent-2); text-decoration: underline; }
.bzr-cookies__btn { background: var(--bzr-green); color: #06231a; font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 999px; }
/* MOBILE BORDER GUARD */
@media (max-width: 760px) {
.bzr-main, .bzr-main article, .bzr-content, .bzr-related {
max-width: 100%; box-sizing: border-box;
}
.bzr-lead-block, .bzr-content p, .bzr-content ul,
.bzr-content blockquote, .bzr-content h2, .bzr-content h3,
.bzr-offers__name, .bzr-slots__head h2, .bzr-faq h2,
.bzr-footer__brand p, .bzr-footer__age span,
.bzr-author__bio, .bzr-author__name {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.bzr-hero h1 { word-wrap: break-word; max-width: 100%; }
.bzr-content blockquote { margin-left: 0; margin-right: 0; max-width: 100%; }
.bzr-author { padding: 18px 14px; max-width: 100%; }
.bzr-faq__item summary, .bzr-faq__answer { padding-left: 16px; padding-right: 16px; }
.bzr-related { padding: 14px 14px; max-width: 100%; }
.bzr-footer__age { padding-left: 0; padding-right: 0; align-items: flex-start; gap: 12px; }
.bzr-footer__age span { font-size: 11.5px; line-height: 1.5; }
}
@media (max-width: 480px) {
.bzr-hero h1 { font-size: clamp(24px, 7vw, 32px); line-height: 1.1; }
.bzr-content h2 { font-size: 22px; }
.bzr-content p, .bzr-lead-block { font-size: 14.5px; line-height: 1.6; }
.bzr-content blockquote { padding: 14px 16px; font-size: 14px; }
.bzr-author { padding: 14px 12px; gap: 12px; }
.bzr-author__bio { font-size: 13.5px; line-height: 1.55; }
.bzr-faq__item summary { padding: 14px 44px 14px 14px; font-size: 14.5px; }
.bzr-faq__answer { padding: 0 14px 14px; font-size: 13.5px; }
.bzr-offers__card { padding: 18px 14px; }
}
/* ===================================================
ФІКС ТАБЛИЦЬ НА МОБІЛЬНИХ (ДЛЯ ВСІХ ТИПІВ ТАБЛИЦЬ)
=================================================== */
/* 1. Забороняємо розривати слова по буквах у таблицях */
table, table th, table td,
.bzr-content table, .bzr-content th, .bzr-content td {
word-break: normal !important;
overflow-wrap: normal !important;
word-wrap: normal !important;
hyphens: none !important;
}
/* 2. Обгортка для скролу (працює і для .bzr-table-wrap, і для div з inline-стилем) */
.bzr-table-wrap,
.bzr-content div[style*="overflow-x:auto"],
.bzr-content div[style*="overflow-x: auto"] {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 24px 0 !important;
border-radius: var(--bzr-radius, 14px) !important;
border: 1px solid var(--bzr-border, #292b33) !important;
background: var(--bzr-bg-raised, #15161b) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
display: block !important;
}
/* 3. Сама таблиця — фіксуємо комфортну мінімальну ширину */
.bzr-content table,
table.bzr-table {
display: table !important;
width: 100% !important;
min-width: 650px !important; /* Не дає колонкам стискатися в кашу на телефоні */
max-width: none !important;
border-collapse: collapse !important;
table-layout: auto !important;
font-size: 14px !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* 4. Заголовки (Шапка) */
.bzr-content table thead { display: table-header-group !important; }
.bzr-content table th,
table.bzr-table th {
display: table-cell !important;
background: #0e0f14 !important;
color: var(--bzr-accent-2, #ffb648) !important;
font-family: "Poppins", "Inter", sans-serif !important;
font-size: 12.5px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
padding: 14px 16px !important;
border-bottom: 2px solid var(--bzr-border, #292b33) !important;
border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
text-align: left !important;
white-space: nowrap !important; /* Заголовки більше ніколи не розбиваються вертикально */
vertical-align: middle !important;
}
/* 5. Комірки з даними */
.bzr-content table tbody { display: table-row-group !important; }
.bzr-content table tr { display: table-row !important; }
.bzr-content table td,
table.bzr-table td {
display: table-cell !important;
padding: 14px 16px !important;
color: #cfd1d8 !important;
border-bottom: 1px solid var(--bzr-border, #292b33) !important;
border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
vertical-align: middle !important;
white-space: normal !important;
}
/* Перший стовпчик (Номер #1, #2 або Критерій) */
.bzr-content table td:first-child,
table.bzr-table td:first-child {
color: #ffffff !important;
font-weight: 700 !important;
}
/* Прибираємо правий бордер в останньому стовпчику */
.bzr-content table th:last-child,
.bzr-content table td:last-child {
border-right: none !important;
}
/* Прибираємо нижній бордер в останньому рядку */
.bzr-content table tr:last-child td {
border-bottom: none !important;
}
/* Зебра для зручності читання рядків */
.bzr-content table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.02) !important;
}
/* Підсвітка при наведенні */
.bzr-content table tr:hover {
background: var(--bzr-bg-soft, #1c1e25) !important;
}
/* 6. Фірмовий смарагдово-зелений скролбар для мобільних */
.bzr-table-wrap::-webkit-scrollbar,
.bzr-content div[style*="overflow-x:auto"]::-webkit-scrollbar {
height: 6px !important;
}
.bzr-table-wrap::-webkit-scrollbar-track,
.bzr-content div[style*="overflow-x:auto"]::-webkit-scrollbar-track {
background: #0a0a0d !important;
}
.bzr-table-wrap::-webkit-scrollbar-thumb,
.bzr-content div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
background: var(--bzr-green, #35d68a) !important;
border-radius: 4px !important;
}