/* =========================================================
   COMPACT RESPONSIVE REDESIGN — coder handoff
   All new selectors are prefixed with brx-.
   Desktop target: hero ~500px. Mobile: key action appears early.
   ========================================================= */
:root {
  --brx-blue-950: #101b4a;
  --brx-blue-900: #263a91;
  --brx-blue-700: #2e67c8;
  --brx-cyan-500: #21bad8;
  --brx-red-600: #f70854;
  --brx-red-700: #dc0046;
  --brx-text: #111827;
  --brx-muted: #667085;
  --brx-line: #e5e7eb;
  --brx-bg: #f5f7fb;
  --brx-radius: 14px;
}
.brx-hero .container,
.brx-steps .container,
.brx-guide .container { max-width: 1380px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.brx-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.brx-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(116deg,#3a409e 0%,#295cb7 52%,#20bed9 100%); }
.brx-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 78% 30%,rgba(255,255,255,.16),transparent 26%),linear-gradient(135deg,transparent 0 57%,rgba(255,255,255,.075) 57% 58%,transparent 58% 100%); }
.brx-hero .container { position:relative; z-index:1; padding-top:14px; padding-bottom:30px; }
.brx-breadcrumbs { display:flex; align-items:center; gap:8px; margin-bottom:14px; color:rgba(255,255,255,.72); font-size:13px; }
.brx-breadcrumbs a { color:#fff; text-decoration:none; }
.brx-breadcrumbs a:hover { text-decoration:underline; }
.brx-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:38px; align-items:center; }
.brx-brandline { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:13px; }
.brx-bookmaker-logo { width:132px; height:auto; filter:brightness(0) invert(1); }
.brx-trust-badges { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.brx-trust-badge { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 10px; border:1px solid rgba(255,255,255,.24); border-radius:8px; background:rgba(19,33,90,.25); color:#fff; font-size:12px; font-weight:750; line-height:1; backdrop-filter:blur(7px); }
.brx-trust-badge .brx-icon { width:17px; height:17px; }
.brx-trust-badge--cupis { padding:5px 10px; }
.brx-cupis-logo { display:block; width:112px; height:auto; }
.brx-title { max-width:820px; margin:0 0 10px; color:#fff; font-size:clamp(34px,3.45vw,50px); line-height:1.15; letter-spacing:-.035em; text-transform:none; white-space:normal; overflow-wrap:anywhere; word-break:normal; }
.brx-lead { max-width:760px; margin:0 0 14px; color:rgba(255,255,255,.92); font-size:16px; line-height:1.45; }
.brx-quickline { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0 0 16px; padding:0; list-style:none; color:rgba(255,255,255,.9); font-size:13px; font-weight:700; }
.brx-quickline li { display:inline-flex; align-items:center; gap:7px; }
.brx-quickline li:not(:last-child)::after { content:"•"; margin-left:9px; color:rgba(255,255,255,.45); }
.brx-quickline .brx-icon { width:17px; height:17px; color:#78e8ff; }
.brx-section-label { margin:0 0 8px; color:rgba(255,255,255,.86); font-size:13px; font-weight:800; line-height:1.3; }
.brx-methods { display:flex; flex-wrap:wrap; gap:8px; overflow:visible; }
.brx-method { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; min-width:110px; min-height:48px; padding:7px 11px; border:1px solid rgba(255,255,255,.8); border-radius:9px; background:#fff; color:#182230; box-shadow:0 6px 16px rgba(13,31,79,.08); transition:transform .16s ease,box-shadow .16s ease; }
.brx-method:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,31,79,.2); }
.brx-method-brand { display:inline-flex; align-items:center; justify-content:center; height:26px; flex:0 0 auto; }
.brx-method-brand img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.brx-method-name { color:#182230; font-size:12px; font-weight:800; white-space:nowrap; }
.brx-method--gos .brx-method-brand { width:82px; height:25px; }
.brx-method--sber { min-width:128px; }
.brx-method--sber .brx-method-brand { width:78px; }
.brx-method--tid { min-width:100px; }
.brx-method--tid .brx-method-brand { width:46px; height:27px; }
.brx-method-tooltip { position:absolute; left:50%; bottom:calc(100% + 8px); z-index:20; width:max-content; max-width:235px; padding:7px 9px; border-radius:7px; background:#101b4a; color:#fff; box-shadow:0 8px 22px rgba(9,20,57,.28); font-size:11px; font-weight:700; line-height:1.3; text-align:center; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,4px); transition:.15s ease; }
.brx-method-tooltip::after { content:""; position:absolute; top:100%; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:#101b4a; }
.brx-method:hover .brx-method-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.brx-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:18px; }
.brx-btn { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:48px; padding:11px 20px; border:1px solid transparent; border-radius:10px; text-decoration:none; font-size:14px; font-weight:850; line-height:1.1; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.brx-btn:hover { transform:translateY(-1px); }
.brx-btn:focus-visible,.brx-tab:focus-visible { outline:3px solid rgba(255,255,255,.78); outline-offset:3px; }
.brx-btn-primary { background:var(--brx-red-600); color:#fff; box-shadow:0 10px 24px rgba(174,0,55,.24); }
.brx-btn-primary:hover { background:var(--brx-red-700); color:#fff; }
.brx-text-link { display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:14px; font-weight:800; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); padding:7px 1px 5px; }
.brx-text-link:hover { color:#fff; border-color:#fff; }
.brx-text-link .brx-icon { width:18px; height:18px; }
.brx-disclaimer { margin:9px 0 0; color:rgba(255,255,255,.64); font-size:11px; line-height:1.35; }
.brx-bonus { padding:24px; border-radius:16px; background:#fff; box-shadow:0 22px 54px rgba(16,27,74,.22); color:var(--brx-text); text-align:center; }
.brx-bonus img { width:116px; height:auto; margin-bottom:7px; }
.brx-bonus-kicker { color:var(--brx-muted); font-size:12px; }
.brx-bonus-title { margin-top:12px; color:var(--brx-text); font-size:19px; font-weight:850; }
.brx-bonus-value { margin-top:2px; color:var(--brx-red-600); font-size:39px; line-height:1; font-weight:900; letter-spacing:-.03em; }
.brx-bonus-note { max-width:210px; margin:9px auto 14px; color:var(--brx-muted); font-size:12px; line-height:1.3; }
.brx-bonus-btn { width:100%; min-height:46px; }
.brx-steps { position:relative; z-index:2; background:#fff; box-shadow:0 8px 24px rgba(21,38,81,.07); }
.brx-steps-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.brx-step { position:relative; display:flex; align-items:center; gap:11px; min-height:82px; padding:14px 18px; }
.brx-step:not(:last-child)::after { content:""; position:absolute; top:25%; right:0; width:1px; height:50%; background:var(--brx-line); }
.brx-step-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:#eef4ff; color:var(--brx-blue-700); }
.brx-step span:last-child { display:flex; flex-direction:column; }
.brx-step b { color:var(--brx-text); font-size:13px; line-height:1.25; }
.brx-step small { margin-top:3px; color:var(--brx-muted); font-size:11px; line-height:1.25; }
.brx-guide { padding:30px 0; background:var(--brx-bg); }
.brx-guide-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
.brx-guide-card { padding:24px; border:1px solid #e8ebf2; border-radius:var(--brx-radius); background:#fff; box-shadow:0 9px 26px rgba(20,31,72,.06); }
.brx-guide-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:17px; }
.brx-eyebrow { color:var(--brx-blue-700); font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.brx-guide-heading h2 { margin:4px 0 0; color:var(--brx-text); font-size:25px; line-height:1.2; }
.brx-updated { flex:0 0 auto; padding:6px 9px; border-radius:8px; background:#eef4ff; color:var(--brx-blue-700); font-size:11px; font-weight:750; }
.brx-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:19px; border:1px solid #dfe3eb; border-radius:10px; overflow:hidden; }
.brx-tab { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:48px; padding:9px; border:0; border-right:1px solid #dfe3eb; background:#fff; color:#344054; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.brx-tab:last-child { border-right:0; }
.brx-tab .brx-icon { width:19px; height:19px; }
.brx-tab.is-active { background:var(--brx-blue-950); color:#fff; box-shadow:inset 0 -3px 0 var(--brx-red-600); }
.brx-tabpanel { animation:brxFade .2s ease; }
@keyframes brxFade { from { opacity:.4; transform:translateY(3px); } to { opacity:1; transform:none; } }
.brx-howto { display:grid; gap:13px; margin:0; padding:0; list-style:none; }
.brx-howto li { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; }
.brx-howto li>span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--brx-red-600); color:#fff; font-size:12px; font-weight:900; }
.brx-howto b { color:var(--brx-text); font-size:14px; }
.brx-howto p { margin:2px 0 0; color:var(--brx-muted); font-size:13px; line-height:1.42; }
.reg { padding-top:28px; }
.reg .reg__intro { align-items:flex-start; }
.reg .sidebar-author { margin-top:0; }

@media (max-width: 1040px) {
  .brx-hero-grid { grid-template-columns:minmax(0,1fr) 292px; gap:26px; }
  .brx-title { font-size:42px; }
  .brx-steps-grid { grid-template-columns:repeat(2,1fr); }
  .brx-step:nth-child(2)::after { display:none; }
}
@media (max-width: 767px) {
  .brx-hero .container,.brx-steps .container,.brx-guide .container { padding-left:16px; padding-right:16px; }
  .brx-hero .container { padding-top:12px; padding-bottom:22px; }
  .brx-breadcrumbs { display:none; }
  .brx-hero-grid { grid-template-columns:1fr; gap:17px; }
  .brx-brandline { gap:8px; margin-bottom:11px; }
  .brx-bookmaker-logo { width:112px; margin-right:4px; }
  .brx-trust-badges { gap:6px; }
  .brx-trust-badge { min-height:30px; padding:5px 8px; font-size:10px; }
  .brx-trust-badge--legal { width:auto; justify-content:center; padding:5px 8px; font-size:10px; }
  .brx-trust-badge--legal .brx-icon { width:18px; height:18px; }
  .brx-cupis-logo { width:96px; }
  .brx-title { margin-bottom:8px; font-size:clamp(29px,8.7vw,36px); line-height:1.06; }
  .brx-lead { margin-bottom:11px; font-size:14px; line-height:1.42; }
  .brx-quickline { gap:6px 9px; margin-bottom:13px; font-size:11px; }
  .brx-quickline li:not(:last-child)::after { margin-left:5px; }
  .brx-quickline .brx-icon { display:none; }
  .brx-section-label { margin-bottom:7px; font-size:12px; }
  .brx-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .brx-method { flex-direction:column; gap:4px; min-width:0; min-height:62px; padding:7px 4px; }
  .brx-method--sber,.brx-method--tid { min-width:0; }
  .brx-method--gos .brx-method-brand { width:72px; height:22px; }
  .brx-method--sber .brx-method-brand { width:70px; height:24px; }
  .brx-method--tid .brx-method-brand { width:45px; height:25px; }
  .brx-method-name { font-size:10px; }
  .brx-method-tooltip { display:none; }
  .brx-actions { display:grid; grid-template-columns:1fr; gap:7px; margin-top:14px; }
  .brx-btn { width:100%; min-height:47px; }
  .brx-text-link { justify-self:center; font-size:13px; }
  .brx-disclaimer { margin-top:7px; font-size:10px; }
  .brx-bonus { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 14px; padding:14px 15px; text-align:left; border-radius:13px; }
  .brx-bonus img,.brx-bonus-kicker,.brx-bonus-note { display:none; }
  .brx-bonus-title { margin:0; font-size:13px; }
  .brx-bonus-value { margin:2px 0 0; font-size:29px; }
  .brx-bonus-btn { grid-column:2; grid-row:1 / span 2; width:auto; min-height:43px; padding:10px 14px; font-size:12px; }
  .brx-steps-grid { grid-template-columns:repeat(2,1fr); }
  .brx-step { min-height:70px; padding:11px 9px; gap:8px; }
  .brx-step:not(:last-child)::after { display:none; }
  .brx-step:nth-child(odd) { border-right:1px solid var(--brx-line); }
  .brx-step:nth-child(-n+2) { border-bottom:1px solid var(--brx-line); }
  .brx-step-icon { width:36px; height:36px; flex-basis:36px; }
  .brx-step-icon .brx-icon { width:19px; height:19px; }
  .brx-step b { font-size:11px; }
  .brx-step small { display:none; }
  .brx-guide { padding:20px 0; }
  .brx-guide-card { padding:16px; border-radius:12px; }
  .brx-guide-heading { display:block; margin-bottom:14px; }
  .brx-guide-heading h2 { font-size:21px; }
  .brx-updated { display:inline-flex; margin-top:9px; }
  .brx-tabs { display:flex; overflow-x:auto; margin:0 -2px 16px; border-radius:9px; scrollbar-width:none; }
  .brx-tabs::-webkit-scrollbar { display:none; }
  .brx-tab { flex:0 0 auto; min-width:145px; min-height:45px; border-right:1px solid #dfe3eb; font-size:12px; }
  .brx-howto { gap:11px; }
  .brx-howto b { font-size:13px; }
  .brx-howto p { font-size:12px; }
  .reg { padding-top:20px; }
}
@media (max-width: 430px) {
  .brx-bonus { grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px; }
  .brx-bonus-value { font-size:26px; }
  .brx-bonus-btn { grid-column:2; grid-row:1 / span 2; width:auto; min-height:40px; padding:9px 11px; font-size:11px; }
  .brx-trust-badge--cupis { padding-left:7px; padding-right:7px; }
  .brx-cupis-logo { width:84px; }
}