/* ==========================================================================
   casinosduquebec.co — G210
   Дизайн-система перенесена из утверждённого макапа B2 «Le Registre / Spectrum»
   (mockups/casinosduquebec-co/b2-dark-tech-registre-spectrum.html) без
   переизобретения: токены, каркас шапки, bento, реестр, RG-инструменты.

   01 токены · 02 база · 03 фон и hairline · 04 шапка и overlay · 05 кнопки
   06 hero · 07 bento · 08 реестр и фильтры · 09 карточки продуктов
   10 RG-инструменты и коллауты · 11 текстовые страницы · 12 формы
   13 аккордеон и табы · 14 футер · 15 cookie · 16 наверх и 404
   17 адаптив · 18 reduced-motion
   ========================================================================== */

/* ============ 01 токены ============ */
:root{
  /* поверхности */
  --bg:#0E1014; --bg-2:#12151A; --surface:#171B21; --surface-2:#1E232A;
  --line:#2A3038; --line-2:#39414B;
  /* Граница интерактивных элементов: 3:1 к фону — требование WCAG 2.2 SC 1.4.11.
     --line-2 для этого слишком тёмный, он остаётся декоративным. */
  --ui:#66707C;   /* 3.2:1 против --bg: граница интерактивных элементов, SC 1.4.11 */
  --text:#EEF1F4; --muted:#98A3AE; --bone:#E9E0CB;

  /* цветовые РОЛИ — у каждого раздела свой оттенок */
  --c-draw:#19B9A6;    /* лотереи / розыгрыши */
  --c-inst:#F2A03D;    /* instants */
  --c-res:#6D77EE;     /* результаты / реестр */
  --c-rg:#E85C45;      /* responsible gambling */
  --c-acct:#C46BD6;    /* аккаунт / регистрация */
  --c-bone:#E9E0CB;
  --c-ok:#5BC98B;

  /* тёмные подложки под цветной текст */
  --on-cool:#06131A; --on-hot:#180A07; --on-bone:#0D0F12;

  /* градиенты собраны из тех же ролей */
  --g-spectrum:linear-gradient(90deg,var(--c-draw),var(--c-res),var(--c-acct),var(--c-rg),var(--c-inst),var(--c-draw));
  --g-cool:linear-gradient(135deg,var(--c-draw),var(--c-res));
  --g-hot:linear-gradient(135deg,var(--c-rg),var(--c-inst));
  --g-bone:linear-gradient(120deg,#FFF8E6,var(--bone),#C9BFA6);
  --g-acct:linear-gradient(135deg,var(--c-acct),var(--c-res));

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:88px;

  --f-body:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --f-mono:"JetBrains Mono","SF Mono",ui-monospace,Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.22,.8,.28,1);
  --r:3px; --r-2:5px;
  --wrap:1240px;
}

/* ============ 02 база и типографика ============ */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.14;letter-spacing:-.025em}
p{margin:0}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
img,svg{max-width:100%}
/* [hidden] обязан выигрывать у компонентных display: .btn{display:inline-flex}
   при равной специфичности перебивал атрибут, и скрытые кнопки формы оставались видны. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--c-draw);outline-offset:3px;border-radius:2px}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
.lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Разделители — это текст, а не рамка: --line-2 давал 1.84:1 при норме 4.5:1.
   Ставим --muted (7.4:1) и приглушаем только начертанием, а не контрастом. */
.lbl .sl{color:var(--muted);opacity:.85}
.lbl .ic{width:13px;height:13px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:1em;height:1em;flex:none}
.demo{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r);padding:5px 10px;margin-top:var(--s3)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--c-draw);color:var(--on-cool);
  padding:12px 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* ============ 03 фон-поле и спектральная hairline ============ */
.bg-field{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(60% 45% at 12% 0%,rgba(25,185,166,.16),transparent 70%),
   radial-gradient(50% 40% at 88% 8%,rgba(109,119,238,.15),transparent 70%),
   radial-gradient(45% 40% at 70% 92%,rgba(232,92,69,.10),transparent 70%),
   radial-gradient(40% 35% at 20% 88%,rgba(242,160,61,.09),transparent 70%),
   var(--bg);
  background-size:200% 200%,200% 200%,200% 200%,200% 200%,100% 100%;
  animation:drift 34s var(--ease) infinite alternate}
@keyframes drift{
  0%{background-position:0% 0%,100% 0%,80% 100%,10% 100%,0 0}
  100%{background-position:18% 12%,78% 14%,60% 86%,28% 84%,0 0}
}
.bg-field::after{content:"";position:absolute;inset:0;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/100% 88px,
             linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/88px 100%}

.scrollbar{position:fixed;top:0;left:0;height:2px;width:100%;z-index:99;transform-origin:0 50%;transform:scaleX(0);
  background:var(--g-spectrum);background-size:300% 100%;animation:shift 9s linear infinite}
@keyframes shift{to{background-position:300% 0}}

.charter{max-width:var(--wrap);margin:0 auto;padding:10px var(--s4);
  font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line)}

/* ============ 04 шапка + overlay ============ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(14,16,20,.72);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line)}
.hdr::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--g-spectrum);
  background-size:300% 100%;animation:shift 9s linear infinite;opacity:.9}
.hdr .inner{display:flex;align-items:center;gap:var(--s3);height:72px;transition:height .3s var(--ease)}
.hdr.small .inner{height:56px}
.hdr .sp{flex:1}

.wm{font-family:var(--f-mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.wm b{font-weight:500;background:var(--g-bone);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm i{font-style:normal;background:var(--g-spectrum);background-size:300% 100%;-webkit-background-clip:text;
  background-clip:text;color:transparent;animation:shift 9s linear infinite}

.chipset{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chipset a{padding:6px 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
  transition:color .2s,background .2s}
.chipset a:hover{color:var(--text)}
.chipset a[aria-current]{background:var(--g-cool);color:var(--on-cool);font-weight:600}
.chipset abbr{text-decoration:none;border:0}

.age{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;padding:5px 9px;border-radius:var(--r);
  color:var(--on-bone);background:var(--g-bone);font-weight:700}

.menubtn{position:relative;display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--ui);
  color:var(--text);padding:9px 15px;border-radius:var(--r);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:color .22s,border-color .22s;overflow:hidden}
.menubtn span{position:relative;z-index:1}
.menubtn .ic{width:14px;height:14px;position:relative;z-index:1}
.menubtn::before{content:"";position:absolute;inset:0;background:var(--g-cool);opacity:0;transition:opacity .25s}
.menubtn:hover{color:var(--on-cool);border-color:transparent}
.menubtn:hover::before{opacity:1}

.overlay{position:fixed;inset:0;z-index:70;background:rgba(10,12,15,.94);backdrop-filter:blur(18px);
  overflow-y:auto;padding:var(--s4) 0}
.overlay[hidden]{display:none}
.ov-inner{display:flex;flex-direction:column;gap:var(--s5);min-height:100%}
.ov-top{display:flex;justify-content:space-between;align-items:center}
.ov-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.ov-nav a{position:relative;background:var(--bg-2);padding:var(--s4);display:flex;gap:var(--s3);align-items:baseline;
  overflow:hidden;opacity:0;transform:translateY(16px);animation:navIn .5s var(--ease) forwards;animation-delay:calc(var(--i)*60ms)}
@keyframes navIn{to{opacity:1;transform:none}}
.ov-nav a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,var(--c-draw));
  transform:scaleY(0);transform-origin:0 100%;transition:transform .3s var(--ease)}
.ov-nav a:hover::before,.ov-nav a[aria-current]::before{transform:scaleY(1)}
.ov-nav a:hover{background:var(--surface-2)}
.ov-nav a .n{font-family:var(--f-mono);font-size:11px;color:var(--ac,var(--muted))}
.ov-nav a .ttl{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--text)}

.ov-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);border-top:1px solid var(--line);
  padding-top:var(--s4);margin-top:auto}
.ov-col ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:9px}
.ov-col a{color:var(--muted);font-size:14.5px;transition:color .2s,padding-left .2s}
.ov-col a:hover,.ov-col a[aria-current]{color:var(--text);padding-left:3px}
.ov-help p{color:var(--muted);font-size:14.5px;margin-top:12px}
.ov-tel{color:var(--c-rg);font-size:15px}

/* ============ 05 кнопки ============ */
.cta,.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 19px;border:0;border-radius:var(--r);cursor:pointer;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--on-cool);background:var(--g,var(--g-cool));overflow:hidden;transition:transform .25s var(--ease),color .25s,background .25s}
.cta:hover,.btn:hover{transform:translateY(-2px)}
.cta::after,.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg)}
.cta:hover::after,.btn-primary:hover::after{animation:sheen .85s var(--ease)}
@keyframes sheen{to{left:120%}}
.cta .ic,.btn .ic{width:15px;height:15px;transition:transform .25s var(--ease);position:relative;z-index:1}
.cta:hover .ic{transform:translateX(4px)}
.cta span,.btn span{position:relative;z-index:1}

.cta.ghost{background:none;color:var(--ac,var(--c-draw));border:1px solid var(--ac,var(--c-draw))}
.cta.ghost::after{display:none}
.cta.ghost:hover{background:rgba(255,255,255,.04)}

.btn-primary{background:var(--g-cool);color:var(--on-cool)}
.btn-acct{background:var(--g-acct);color:#0B0713}
.btn-line{background:none;border:1px solid var(--ui);color:var(--text)}
.btn-line:hover{border-color:var(--text)}
.btn-ghost{background:none;color:var(--muted);border:1px solid transparent}
.btn-ghost:hover{color:var(--text)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.linkbtn{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}

.link-in{color:var(--c-draw);border-bottom:1px solid rgba(25,185,166,.4);transition:border-color .2s,color .2s}
.link-in:hover{border-color:var(--c-draw)}

/* ============ 06 hero / вводные секции ============ */
/* ---- hero с фотофоном ----
   Слою фона явно задаётся position:absolute и inset:0 — иначе контейнерные
   правила выбивают его из-под контента. Затемнение двухслойное: вертикальное
   под шапку и горизонтальное под текст, чтобы белый заголовок держал контраст
   на светлых огнях города. */
.top-sec.has-bg{position:relative;overflow:hidden;isolation:isolate;
  padding-top:var(--s7);padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
/* Фон занимает только верх секции: секция вместе с bento уходит за 1400px,
   и растянутый на всю высоту кадр обрезался бы до узкой центральной полосы —
   от панорамы не оставалось ничего. Низ растворяем маской в фон страницы. */
.hero-bg{position:absolute;inset:0 0 auto 0;height:min(720px,80vh);z-index:-2;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
.hero-bg picture,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.top-sec.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(14,16,20,.90) 0%,rgba(14,16,20,.62) 52%,rgba(14,16,20,.10) 100%),
    linear-gradient(180deg,rgba(14,16,20,.50) 0%,rgba(14,16,20,.05) 30%,rgba(14,16,20,.55) 62%,rgba(14,16,20,.92) 100%)}

.top-sec{padding:var(--s6) 0 var(--s5)}
.top-sec h1{font-size:clamp(32px,5vw,62px);max-width:19ch;margin-top:var(--s3)}
.top-sec h1 .w{display:inline-block;opacity:0;transform:translateY(28px) rotate(2deg);
  animation:wordIn .8s var(--ease) forwards;animation-delay:calc(var(--i)*80ms + 120ms)}
@keyframes wordIn{to{opacity:1;transform:none}}
.top-sec h1 .grad{background:linear-gradient(92deg,var(--c-draw),var(--c-res) 38%,var(--c-inst) 72%,var(--c-draw));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shift 9s linear infinite,wordIn .8s var(--ease) forwards;animation-delay:0s,calc(var(--i)*80ms + 120ms)}
.top-sec .lede{color:var(--muted);font-size:16.5px;max-width:62ch;margin-top:var(--s3);opacity:0;
  animation:wordIn .7s var(--ease) .55s forwards}
.top-sec .hero-cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);opacity:0;
  animation:wordIn .7s var(--ease) .68s forwards}

/* бегущая строка результатов */
.ticker{margin-top:var(--s4);border:1px solid var(--line);border-radius:4px;background:rgba(23,27,33,.7);
  overflow:hidden;display:flex;align-items:stretch;opacity:0;animation:wordIn .7s var(--ease) .7s forwards}
.ticker .tag{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:8px;padding:0 var(--s3);
  background:var(--g-cool);color:var(--on-cool);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700}
.ticker .tag i{width:7px;height:7px;border-radius:50%;background:var(--on-cool);animation:blip 1.6s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.ticker .track{display:flex;gap:var(--s5);padding:11px var(--s3);white-space:nowrap;animation:marquee 38s linear infinite;will-change:transform}
.ticker:hover .track,.ticker:focus-within .track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .it{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.ticker .it b{color:var(--text);font-weight:500}
.ticker .it u{text-decoration:none;color:var(--c-inst)}

/* шапка внутренней страницы */
.page-head{padding:var(--s6) 0 var(--s4);position:relative}
.page-head h1{font-size:clamp(30px,4.4vw,52px);max-width:22ch;margin-top:var(--s3)}
.page-head .lede{color:var(--muted);font-size:16.5px;max-width:64ch;margin-top:var(--s3)}
.page-head .head-meta{margin-top:var(--s3)}

.crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--text)}
.crumbs .sl{color:var(--muted);opacity:.85}

/* ---- reveal-состояния включаются ТОЛЬКО при живом JS ----
   Без этого правила отключённый или упавший JS оставил бы половину страницы
   прозрачной: IntersectionObserver некому вызвать, класс .in не появится.
   Флаг js ставится инлайновым скриптом в <head>. */
.js .t   { --rv:0; --rv-t:translateY(22px) }
.js .tr  { --rv:0; --rv-t:translateY(16px) }
.js .tool,
.js .card{ --rv:0; --rv-t:translateY(20px) }
.js .tr.h{ --rv:1; --rv-t:none }

/* ============ 07 bento ============ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden;margin-top:var(--s5)}
.t{position:relative;background:var(--surface);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  min-height:180px;transition:background .3s var(--ease);opacity:var(--rv,1);transform:var(--rv-t,none)}
.t.in{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--i)*90ms),transform .6s var(--ease) calc(var(--i)*90ms),background .3s}
.t::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--ac);opacity:.85;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.t.in::before{transform:scaleX(1);transition-delay:calc(var(--i)*90ms + 180ms)}
.t::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(75% 65% at 78% 0%,var(--glow),transparent 72%)}
.t:hover::after{opacity:1}
.t:hover{background:var(--surface-2)}
.t .head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.t.wide{grid-column:span 2}
.t-draw{grid-column:span 2;grid-row:span 2;justify-content:space-between}
.t h2,.t h3{font-size:20px}
.t .note{font-size:14px;color:var(--muted)}
.t .note b{color:var(--text);font-weight:600}
.t .big{font-family:var(--f-mono);font-size:38px;letter-spacing:-.03em;background:var(--gtxt,var(--g-hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.t-draw .name{font-size:clamp(26px,3.4vw,44px);font-weight:600;letter-spacing:-.03em}
.t-draw .pot{font-family:var(--f-mono);font-size:clamp(30px,4.2vw,54px);letter-spacing:-.05em;line-height:1.05;margin-top:10px;
  background:var(--g-bone);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-draw .pot sup{font-size:.4em;vertical-align:super;letter-spacing:0;-webkit-text-fill-color:var(--muted);color:var(--muted)}

.count{display:flex;gap:var(--s2)}
.count div{position:relative;border:1px solid var(--line-2);border-radius:var(--r);padding:9px 13px;text-align:center;
  min-width:66px;overflow:hidden;background:rgba(10,12,15,.5)}
.count div::before{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--g-cool)}
.count b{display:block;font-family:var(--f-mono);font-size:23px;font-weight:500;line-height:1.2}
.count b.tick{animation:tick .42s var(--ease)}
/* Цифра не должна пропадать: при opacity:0 в начале кадра секунды на скриншоте
   и на медленном экране читаются как пустая ячейка. Сдвиг остаётся, прозрачность — нет. */
@keyframes tick{0%{transform:translateY(-45%);opacity:.35}100%{transform:none;opacity:1}}
.count span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

.balls{display:flex;gap:7px;flex-wrap:wrap;list-style:none}
.balls li,.balls i{font-family:var(--f-mono);font-style:normal;font-size:14px;width:36px;height:36px;display:grid;
  place-items:center;border-radius:50%;border:1px solid var(--line-2);
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.09),transparent 60%);
  opacity:var(--rv,1);transform:var(--rv-t,none)}
.js .balls li,.js .balls i{--rv:0;--rv-t:scale(.55)}
.balls.in li,.balls.in i{animation:pop .5s var(--ease) forwards;animation-delay:calc(var(--n)*70ms)}
@keyframes pop{60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
.balls li.bonus,.balls i.bonus{border-color:transparent;background:var(--g-hot);color:var(--on-hot);font-weight:700}
.balls.sm li,.balls.sm i{width:30px;height:30px;font-size:12.5px}

.mini{display:flex;flex-direction:column;gap:9px;margin-top:auto;list-style:none}
.mini a{display:flex;justify-content:space-between;gap:var(--s2);font-size:14px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:9px;transition:color .2s,padding-left .2s}
.mini a:hover{color:var(--text);padding-left:4px}
.mini a b{font-family:var(--f-mono);font-weight:600;color:var(--ac)}

/* ============ 08 секции, реестр, фильтры ============ */
.sec{padding:var(--s7) 0;position:relative}
.sec::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--g-spectrum);
  background-size:300% 100%;opacity:.35;animation:shift 12s linear infinite}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-head h2{font-size:clamp(24px,3vw,36px);margin-top:12px}
.sec-head p{color:var(--muted);font-size:15px;max-width:58ch;margin-top:10px}

select,input,textarea{font-family:inherit}
select{background:var(--bg-2);color:var(--text);border:1px solid var(--ui);border-radius:var(--r);
  padding:11px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.chip{background:none;border:1px solid var(--ui);color:var(--muted);border-radius:var(--r);padding:9px 14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:var(--text)}
.chip[aria-pressed="true"]{color:var(--on-cool);background:var(--ac,var(--c-draw));border-color:transparent;font-weight:700}

.tbl{border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.tr{display:grid;grid-template-columns:150px 1.1fr 2fr 130px;gap:var(--s3);align-items:center;padding:var(--s3);
  border-bottom:1px solid var(--line);transition:background .25s;position:relative;opacity:var(--rv,1);transform:var(--rv-t,none)}
.tr.in{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--i)*70ms),transform .5s var(--ease) calc(var(--i)*70ms),background .25s}
.tr:last-child{border-bottom:0}
.tr:hover{background:var(--surface)}
.tr.h{background:var(--surface-2);opacity:1;transform:none}
.tr.h span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tr .d{font-family:var(--f-mono);font-size:13.5px;color:var(--muted)}
.tr .g{font-size:17px;font-weight:600}
.tr .p{font-family:var(--f-mono);font-size:14px;text-align:right;background:var(--g-bone);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tr[hidden]{display:none}

.empty{border:1px dashed var(--line-2);border-radius:var(--r-2);padding:var(--s5) var(--s3);text-align:center;color:var(--muted)}
.empty .ic{width:22px;height:22px;color:var(--line-2);margin-bottom:10px}
.empty b{display:block;color:var(--text);font-weight:600;margin-bottom:6px}

/* ============ 09 карточки продуктов ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:var(--surface);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:12px;
  overflow:hidden;transition:background .3s;opacity:var(--rv,1);transform:var(--rv-t,none)}
.card.in{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--i)*80ms),transform .6s var(--ease) calc(var(--i)*80ms),background .3s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--ac,var(--c-draw));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.card.in::before{transform:scaleX(1);transition-delay:calc(var(--i)*80ms + 160ms)}
.card:hover{background:var(--surface-2)}
.card h2,.card h3{font-size:21px}
.card p{color:var(--muted);font-size:14.5px}
.card .card-meta{display:flex;gap:var(--s2);flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:var(--s2);
  border-top:1px solid var(--line)}
.card .card-meta b{color:var(--ac,var(--c-draw));font-weight:600}
.card .price{font-family:var(--f-mono);font-size:13px;color:var(--text)}
.card[hidden]{display:none}

.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r);border:1px solid var(--line-2);color:var(--muted)}
.tag.on{border-color:transparent;background:var(--ac,var(--c-draw));color:var(--on-cool);font-weight:700}

/* ============ 09b изображения ============ */

/* Арт карточки: мотив формата игры / механики instants.
   Ширина/высота заданы в разметке — блок не прыгает при загрузке. */
.card-art{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#0B0D11;
  /* растровый арт заказчика приходит 3:2 — при 16/9 срезало верх знака */

  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);margin-bottom:2px}
.card-art-photo{aspect-ratio:3/2}

/* Фото-полоса: фон + затемнение, текст поверх.
   Слою фона ЯВНО задан position:absolute — контейнерные правила вроде
   .sec>*{position:relative} иначе выбивают его из-под контента. */
.band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-2);
  padding:var(--s6) var(--s4);isolation:isolate}
.band-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.band-bg picture,.band-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,16,20,.94) 0%,rgba(14,16,20,.86) 46%,rgba(14,16,20,.55) 100%)}
.band::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:1;
  background:var(--g-spectrum);background-size:300% 100%;animation:shift 9s linear infinite}
.band-inner{position:relative;z-index:1;max-width:62ch}
.band h2{font-size:clamp(24px,3vw,34px);margin-top:12px}
.band p{color:#C6CDD5;font-size:15.5px;margin-top:var(--s2)}
.band .cta{margin-top:var(--s3)}

/* Фото рядом с текстом (RG-страница) */
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;align-items:stretch}
.photo-split .txt{background:var(--surface);padding:var(--s4) var(--s3);display:flex;flex-direction:column;justify-content:center;gap:12px}
.photo-split .pic{position:relative;min-height:260px;background:var(--bg-2)}
.photo-split .pic picture,.photo-split .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo-split .pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,16,20,.18),rgba(14,16,20,.55))}
.photo-split .txt h3{font-size:20px}
.photo-split .txt p{color:var(--muted);font-size:14.5px}
.photo-split.flip .pic{order:-1}


/* Способы оплаты: цветные бренд-логотипы кладём на светлую плашку,
   иначе тёмные части знаков (Visa, Mastercard) сливаются с фоном. */
.side-box ul.paylist,.paylist{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:14px}
.side-box .paylist li,.paylist li{background:#F4F6F8;border-radius:var(--r);padding:7px 10px;display:grid;place-items:center;
  min-height:36px;min-width:64px;padding-left:10px}
.side-box .paylist li::before,.paylist li::before{display:none}
.paylist img{display:block;height:20px;width:auto;object-fit:contain}
.paynote{font-size:12.5px;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:10px}

/* Бейдж 18+ в футере: настоящий знак вместо текстовой плашки */
.mark-age img{display:block;width:26px;height:26px}
.mark-age{background:none;border:1px solid var(--ui);padding:5px 8px}

/* ============ 10 RG-инструменты, helpline, коллауты ============ */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden}
.tool{position:relative;background:var(--surface);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:12px;
  overflow:hidden;transition:background .3s;opacity:var(--rv,1);transform:var(--rv-t,none)}
.tool.in{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--i)*110ms),transform .6s var(--ease) calc(var(--i)*110ms),background .3s}
.tool::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--ac);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .4s var(--ease)}
.tool:hover::before{transform:scaleX(1)}
.tool:hover{background:var(--surface-2)}
.tool .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ac)}
.tool p{font-size:14px;color:var(--muted)}
.tool h3{font-size:20px}

.helpline{margin-top:var(--s4);border:1px solid var(--line-2);border-radius:var(--r-2);padding:var(--s3);
  display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(232,92,69,.10),transparent 62%)}
.helpline .ic{width:20px;height:20px;color:var(--c-rg)}
.helpline p{flex:1;min-width:240px;font-size:14.5px;color:var(--muted)}
.helpline p b{color:var(--text)}
.helpline a.tel{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--c-rg);color:var(--c-rg);padding:10px 15px;border-radius:var(--r);transition:background .25s,color .25s}
.helpline a.tel:hover{background:var(--c-rg);color:var(--on-hot)}

.callout{border:1px solid var(--line);border-left:2px solid var(--ac,var(--c-res));border-radius:var(--r-2);
  background:var(--surface);padding:var(--s3);margin:var(--s3) 0}
.callout p+p{margin-top:10px}
.callout .lbl{margin-bottom:10px;color:var(--ac,var(--c-res))}

.split{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden}
.split > div{background:var(--surface);padding:var(--s4) var(--s3)}
.split h3{font-size:19px;margin-bottom:10px}
.split p{color:var(--muted);font-size:14.5px}
.split ul{margin-top:12px;list-style:none;display:flex;flex-direction:column;gap:9px}
.split li{position:relative;padding-left:20px;color:var(--muted);font-size:14.5px}
.split li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--ac,var(--c-draw))}

.steps{counter-reset:step;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden;list-style:none}
.steps li{counter-increment:step;background:var(--surface);padding:var(--s3);display:grid;
  grid-template-columns:44px 1fr;column-gap:var(--s3);row-gap:4px;align-items:start}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--f-mono);font-size:13px;
  color:var(--ac,var(--c-draw));padding-top:2px}
.steps li>b{grid-column:2}
.steps li>p{grid-column:2}
.steps b{display:block}
.steps p{color:var(--muted);font-size:14.5px}

.marks{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s3)}
.mark{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:var(--r);border:1px solid var(--line-2);color:var(--muted)}
.mark .ic{width:14px;height:14px}
.mark-age{background:var(--g-bone);color:var(--on-bone);border-color:transparent;font-weight:700}
.mark-rg{color:var(--c-rg);border-color:rgba(232,92,69,.45)}

/* ============ 11 текстовые (legal) страницы ============ */
/* minmax(0,1fr) вместо 1fr: у grid-item по умолчанию min-width:auto, и широкая
   таблица в .table-scroll растягивала трек вместе со всей колонкой — на 360px
   это давало горизонтальный скролл всей страницы. */
.doc > * {min-width:0}
.doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s6);padding-bottom:var(--s7);align-items:start}
.toc{position:sticky;top:96px;border-left:1px solid var(--line);padding-left:var(--s3)}
.toc .lbl{margin-bottom:14px}
.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:10px}
.toc li{counter-increment:toc}
.toc a{color:var(--muted);font-size:13.5px;display:flex;gap:10px;transition:color .2s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;color:var(--line-2)}
.toc a:hover,.toc a.on{color:var(--text)}
.toc a.on::before{color:var(--c-res)}

.prose{max-width:76ch}
.prose section{padding-top:var(--s5);scroll-margin-top:96px}
.prose section:first-child{padding-top:0}
.prose h2{font-size:clamp(21px,2.4vw,28px);margin-bottom:var(--s2);display:flex;gap:14px;align-items:baseline}
.prose h2 .num{font-family:var(--f-mono);font-size:12px;color:var(--c-res);letter-spacing:.1em}
.prose h3{font-size:17px;margin:var(--s3) 0 10px}
.prose p{color:#C6CDD5;font-size:15.5px}
.prose p+p{margin-top:12px}
.prose ul+p,.prose ol+p{margin-top:14px}
.prose ul,.prose ol{margin:14px 0 0 0;display:flex;flex-direction:column;gap:9px;list-style:none}
.prose li{position:relative;padding-left:22px;color:#C6CDD5;font-size:15.5px}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--c-res)}
.prose ol{counter-reset:pl}
.prose ol li{counter-increment:pl}
.prose ol li::before{content:counter(pl) ".";position:absolute;left:0;top:0;font-family:var(--f-mono);font-size:12.5px;color:var(--c-res)}
.prose a:not(.cta):not(.btn){color:var(--c-draw);border-bottom:1px solid rgba(25,185,166,.35)}
.prose a:not(.cta):not(.btn):hover{border-color:var(--c-draw)}
.prose .updated{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;display:inline-flex;gap:8px;align-items:center}

.deftable{width:100%;border-collapse:collapse;margin-top:var(--s3);font-size:14px}
.deftable th,.deftable td{border:1px solid var(--line);padding:12px var(--s2);text-align:left;vertical-align:top}
.deftable th{background:var(--surface-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.deftable td{color:#C6CDD5}
.deftable td.mono{font-size:13px}
.table-scroll{overflow-x:auto}

/* ============ 12 формы и регистрация ============ */
.form-wrap{display:grid;grid-template-columns:1fr 330px;gap:var(--s5);align-items:start;padding-bottom:var(--s7)}
.form-card{border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);overflow:hidden}
.form-head{padding:var(--s3);border-bottom:1px solid var(--line);background:var(--surface-2)}
.form-body{padding:var(--s4) var(--s3)}

.progress{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.progress li{flex:1;background:var(--bg-2);padding:12px var(--s2);list-style:none;position:relative}
.progress li::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--c-acct);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.progress li[aria-current]::before,.progress li.done::before{transform:scaleX(1)}
.progress li.done::before{background:var(--c-ok)}
.progress .n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);display:block}
.progress .s{font-size:13.5px;color:var(--muted)}
.progress li[aria-current] .s,.progress li.done .s{color:var(--text)}

.step[hidden]{display:none}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field > label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field > label .req{color:var(--c-rg)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=password],
.field input[type=date],.field select,.field textarea{
  background:var(--bg-2);border:1px solid var(--ui);border-radius:var(--r);color:var(--text);
  padding:13px 14px;font-size:15px;width:100%;transition:border-color .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-acct);background:var(--bg)}
.field .hint{font-size:12.5px;color:var(--muted)}
.field .err{font-size:12.5px;color:var(--c-rg);display:flex;gap:6px;align-items:center;min-height:0}
.field .err .ic{width:13px;height:13px}
.field .err[hidden]{display:none}
.field.invalid input,.field.invalid select{border-color:var(--c-rg)}

.dob{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

.meter{display:flex;gap:5px;margin-top:4px}
.meter i{height:3px;flex:1;background:var(--line);border-radius:2px;transition:background .3s}
.meter[data-level="1"] i:nth-child(-n+1){background:var(--c-rg)}
.meter[data-level="2"] i:nth-child(-n+2){background:var(--c-inst)}
.meter[data-level="3"] i:nth-child(-n+3){background:var(--c-draw)}
.meter[data-level="4"] i{background:var(--c-ok)}

.consents{display:flex;flex-direction:column;gap:var(--s2)}
.check{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;cursor:pointer;
  border:1px solid var(--ui);border-radius:var(--r);padding:var(--s2);background:var(--bg-2);transition:border-color .2s}
.check:hover{border-color:var(--line-2)}
.check input{width:20px;height:20px;margin:0;accent-color:var(--c-acct)}
.check .txt{font-size:14.5px;color:#C6CDD5}
.check .txt b{display:block;color:var(--text);font-weight:600;margin-bottom:3px}
.check.invalid{border-color:var(--c-rg)}
.check .optional{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.form-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.form-actions .sp{flex:1}

.form-side{display:flex;flex-direction:column;gap:var(--s3);position:sticky;top:96px}
.side-box{border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);padding:var(--s3)}
.side-box h3{font-size:16px;margin:10px 0}
.side-box p,.side-box li{font-size:14px;color:var(--muted)}
.side-box ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:10px}
.side-box li{position:relative;padding-left:20px}
.side-box li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:1px;background:var(--c-acct)}

.done-box{text-align:left;border:1px solid var(--line-2);border-radius:var(--r-2);padding:var(--s4);
  background:linear-gradient(135deg,rgba(91,201,139,.10),transparent 60%)}
.done-box .ic-big{width:34px;height:34px;color:var(--c-ok)}
.done-box h2{font-size:26px;margin:var(--s2) 0}
.done-box p{color:var(--muted);font-size:15px}
.done-box .sim{margin-top:var(--s3)}

.status{border:1px solid var(--line-2);border-radius:var(--r);padding:12px var(--s2);font-size:14px;color:var(--muted);
  display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--s3)}
.status .ic{width:16px;height:16px;margin-top:2px;color:var(--c-inst)}
.status[hidden]{display:none}
.status.bad{border-color:var(--c-rg);color:#F0BDB3}
.status.bad .ic{color:var(--c-rg)}

/* контактная сетка */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start;padding-bottom:var(--s7)}
.info-list{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden}
.info-list li{background:var(--surface);padding:var(--s3);display:grid;grid-template-columns:20px 1fr;gap:var(--s3)}
.info-list .ic{width:18px;height:18px;color:var(--ac,var(--c-draw));margin-top:3px}
.info-list b{display:block;font-size:14px;margin-bottom:5px}
.info-list p,.info-list address{color:var(--muted);font-size:14.5px;font-style:normal}

/* ============ 13 аккордеон ============ */
.acc{border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:last-child{border-bottom:0}
.acc-btn{width:100%;background:var(--surface);border:0;text-align:left;padding:var(--s3);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);font-size:16.5px;font-weight:600;
  transition:background .25s}
.acc-btn:hover{background:var(--surface-2)}
.acc-btn .ic{width:18px;height:18px;color:var(--muted);transition:transform .3s var(--ease)}
.acc-btn[aria-expanded="true"] .ic{transform:rotate(180deg);color:var(--c-draw)}
.acc-panel{padding:0 var(--s3) var(--s3);color:#C6CDD5;font-size:15px}
.acc-panel[hidden]{display:none}
.acc-panel p+p{margin-top:10px}

/* ============ 14 футер ============ */
.ftr{border-top:1px solid var(--line);background:rgba(18,21,26,.72);padding:var(--s6) 0 var(--s4);position:relative;margin-top:var(--s6)}
.ftr::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--g-spectrum);
  background-size:300% 100%;animation:shift 12s linear infinite;opacity:.6}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s4)}
.ftr-lede{color:var(--muted);font-size:14px;margin-top:var(--s2);max-width:34ch}
.ftr-nav ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ftr-nav a,.ftr-nav .linkbtn{color:var(--muted);font-size:14px;transition:color .2s,padding-left .2s}
.ftr-nav a:hover,.ftr-nav .linkbtn:hover,.ftr-nav a[aria-current]{color:var(--text);padding-left:3px}

.ftr-help{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s5);padding:var(--s3);
  border:1px solid var(--line-2);border-radius:var(--r-2);background:linear-gradient(120deg,rgba(232,92,69,.09),transparent 62%)}
.ftr-help > .ic{width:19px;height:19px;color:var(--c-rg)}
.ftr-help p{flex:1;min-width:250px;font-size:14.5px;color:var(--muted)}
.ftr-help p b{color:var(--text)}
.ftr-help p a{color:var(--c-rg);margin-left:6px}
.ftr-help-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--ui);
  padding:10px 14px;border-radius:var(--r);transition:color .2s,border-color .2s}
.ftr-help-link:hover{color:var(--text);border-color:var(--text)}
.ftr-help-link .ic{width:13px;height:13px}

.ftr-legal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:10px;font-size:13px;color:var(--muted);max-width:104ch}
.ftr-id{font-family:var(--f-mono);font-size:12.5px;color:var(--text)}
.ftr-id .sl{color:var(--muted);opacity:.85}
.ftr-trust{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.ftr-trust .ic{width:15px;height:15px;color:var(--c-draw)}
.ftr-warn{display:flex;gap:9px;align-items:center;color:var(--bone);font-weight:500}
.ftr-warn .ic{width:15px;height:15px;color:var(--c-inst)}
.ftr-copy{color:var(--muted)}
.ftr-lang a{color:var(--muted);border-bottom:1px solid var(--line-2)}
.ftr-lang a[aria-current]{color:var(--text)}

/* ============ 15 cookie consent ============ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:var(--s3);display:flex;justify-content:center}
.cc[hidden]{display:none}
/* Баннер не должен закрывать страницу: Google Ads считает перекрывающий контент
   попапом. Ограничиваем высоту и скроллим внутри, а не поверх страницы. */
.cc-box{width:min(980px,100%);max-height:min(70vh,560px);overflow-y:auto;
  background:rgba(18,21,26,.97);backdrop-filter:blur(14px);border:1px solid var(--ui);
  border-radius:var(--r-2);padding:var(--s3);position:relative;
  animation:ccIn .45s var(--ease)}
@keyframes ccIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cc-box::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--g-spectrum);
  background-size:300% 100%;animation:shift 9s linear infinite}
.cc-main p{font-size:14.5px;color:var(--muted);margin-top:10px}
.cc-main a{color:var(--c-draw);border-bottom:1px solid rgba(25,185,166,.4)}
.cc-prefs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.cc-prefs[hidden]{display:none}
.cc-cat{display:grid;grid-template-columns:20px 1fr;gap:12px;border:1px solid var(--ui);border-radius:var(--r);
  padding:14px;background:var(--bg-2);cursor:pointer;font-size:13.5px;color:var(--muted)}
.cc-cat input{width:18px;height:18px;margin:0;accent-color:var(--c-draw)}
.cc-cat b{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s3)}
.cc-actions .btn{padding:12px 17px}
.cc-actions .btn[hidden]{display:none}

/* ============ 16 наверх, 404 ============ */
.up{position:fixed;right:22px;bottom:22px;z-index:65;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--g-cool);color:var(--on-cool);display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.85);
  transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.up.on{opacity:1;transform:none;pointer-events:auto}
.up:hover{transform:translateY(-3px)}
.up .ic{width:19px;height:19px}

.nf{padding:var(--s7) 0;text-align:center}
.nf .code{font-family:var(--f-mono);font-size:clamp(64px,14vw,150px);line-height:1;letter-spacing:-.05em;
  background:var(--g-spectrum);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:shift 9s linear infinite}
.nf h1{font-size:clamp(24px,3.4vw,38px);margin-top:var(--s3)}
.nf p{color:var(--muted);margin-top:var(--s2);max-width:52ch;margin-inline:auto}
.nf .nf-links{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}

/* ============ 17 адаптив ============ */
@media(max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .t-draw{grid-column:span 2}
  .cards{grid-template-columns:repeat(2,1fr)}
  .doc{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .toc{position:static;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--s3)}
  .toc ol{display:grid;grid-template-columns:repeat(2,1fr)}
  .form-wrap{grid-template-columns:1fr}
  .form-side{position:static}
  .ftr-top{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .wrap{padding:0 var(--s3)}
  .charter{padding:10px var(--s3)}
  .bento,.cards,.cards.two{grid-template-columns:1fr}
  .t-draw,.t.wide{grid-column:span 1}
  .t-draw{grid-row:span 1}
  .tools{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .photo-split{grid-template-columns:1fr}
  .photo-split .pic{min-height:200px}
  .photo-split.flip .pic{order:0}
  .band{padding:var(--s5) var(--s3)}
  .band::after{background:linear-gradient(180deg,rgba(14,16,20,.50) 0%,rgba(14,16,20,.88) 62%)}
  .ov-nav{grid-template-columns:1fr}
  .ov-nav a{padding:var(--s3)}
  .ov-nav a .ttl{font-size:20px}
  .ov-foot{grid-template-columns:1fr;gap:var(--s3)}
  /* На узком экране строка реестра читается сверху вниз — дата, игра, числа,
     лот. Двухколоночный вариант ломал даты переносом посреди числа. */
  .tr{grid-template-columns:1fr;gap:10px}
  .tr.h{display:none}
  .tr .d{order:1}
  .tr .g{order:2;font-size:18px}
  .tr .balls{order:3}
  .tr .p{order:4;text-align:left;font-size:15px}
  .sec{padding:var(--s5) 0}
  .top-sec{padding:var(--s5) 0 var(--s4)}
  .top-sec.has-bg{padding:var(--s5) 0 var(--s4)}
  /* На узком экране текст ложится прямо на огни города — средний слой плотнее. */
  .top-sec.has-bg::after{background:linear-gradient(180deg,rgba(14,16,20,.80) 0%,rgba(14,16,20,.68) 34%,rgba(14,16,20,.88) 62%,rgba(14,16,20,.96) 100%)}
  .page-head{padding:var(--s5) 0 var(--s3)}
  .age{display:none}
  .hdr .inner{gap:var(--s2)}
  .wm{font-size:11px;letter-spacing:.16em}
  /* Шапка на узких экранах: лого сжимается, переключатель языка и кнопка меню — нет.
     Иначе flex ужимает chipset и «FR» обрезается на середине буквы. */
  .wm{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .chipset,.menubtn,.age{flex:none}
  .menubtn{padding:9px 11px;gap:7px;font-size:10px;letter-spacing:.1em}
  .ticker .tag{padding:0 14px}
  .fields{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:var(--s4)}
  .ftr-top{grid-template-columns:1fr}
  .cc-prefs{grid-template-columns:1fr}
  .cc-actions .btn{flex:1 1 100%}
  .toc ol{grid-template-columns:1fr}
  .progress{flex-wrap:wrap}
  .progress li{flex:1 1 50%}
  .steps li{grid-template-columns:34px 1fr;gap:var(--s2)}
  /* Размер цели ≥24px (WCAG 2.2 SC 2.5.8): списочные ссылки футера и меню
     на десктопе живут в строке 17px, для пальца этого мало. */
  .ftr-nav a,.ftr-nav .linkbtn,.ov-col a{display:block;padding:5px 0}
  .mini a{padding-bottom:5px}
  .chipset a{padding:8px 12px}
  .up{right:14px;bottom:14px}
}
@media(max-width:400px){
  .wm{font-size:10px;letter-spacing:.12em}
  .chipset a{padding:6px 8px;font-size:10px}
  .menubtn span{display:none}
  .menubtn{padding:9px}
}

/* ============ 18 prefers-reduced-motion ============ *
   Приёмы движения не просто выключаются: элементы принудительно переводятся
   в конечное видимое состояние, иначе reveal-стили оставят страницу пустой. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .t,.tr,.tool,.card,.ticker,.top-sec h1 .w,.top-sec .lede,.top-sec .hero-cta,.ov-nav a{opacity:1!important;transform:none!important}
  .balls li,.balls i{opacity:1!important;transform:none!important}
  .t::before,.card::before,.progress li[aria-current]::before,.progress li.done::before{transform:scaleX(1)!important}
  .ticker .track{animation:none!important}
}

/* ==========================================================================
   Знак «Registry» — четыре записи, верхняя активная
   Метафора: строка добавляется в публичный реестр и подтверждается системой.
   Анимируются только transform и opacity: ни filter, ни box-shadow.
   ========================================================================== */

.rgl{
  --rgl-bone:#E9E0CB;
  --rgl-a:#19B9A6;      /* вердигри */
  --rgl-b:#6D77EE;      /* ирис */
  --rgl-size:28px;
  width:var(--rgl-size);
  height:var(--rgl-size);
  flex:none;
  display:block;
  overflow:visible;
}

/* Раскрытие каждой записи слева направо.
   transform-box:fill-box нужен, чтобы left center считался от самой строки,
   а не от системы координат всего SVG. */
.rgl__rr{
  transform-box:fill-box;
  transform-origin:left center;
  transform:scaleX(0);
  animation:rgl-write 300ms cubic-bezier(.22,1,.36,1) forwards;
}
.rgl__rr--01{animation-delay:0ms}
.rgl__rr--02{animation-delay:80ms}
.rgl__rr--03{animation-delay:160ms}
.rgl__rr--04{animation-delay:240ms}

@keyframes rgl-write{to{transform:scaleX(1)}}

/* Активная запись: движется не полоса, а спектр внутри неё.
   Заливка вдвое шире окна клипа, поэтому сдвиг на -26 прогоняет спектр
   через всю строку. Проход туда и обратно: вердигри → ирис → вердигри.
   Затем — редкое обновление записи раз в 11 секунд. */
.rgl__fill{
  transform-box:fill-box;
  animation:
    rgl-pass 900ms cubic-bezier(.4,0,.2,1) 550ms both,
    rgl-idle 11s   cubic-bezier(.4,0,.2,1) 1600ms infinite;
}
@keyframes rgl-pass{
  0%  {transform:translateX(0)}
  50% {transform:translateX(-26px)}
  100%{transform:translateX(0)}
}
@keyframes rgl-idle{
  0%,86%{transform:translateX(0)}
  93%   {transform:translateX(-3.4px)}   /* ≈13% ширины строки */
  100%  {transform:translateX(0)}
}

/* Проверка записи системой: тонкая линия проходит по знаку ровно один раз. */
.rgl__scan{
  transform-box:fill-box;
  opacity:0;
  animation:rgl-scan 600ms linear 900ms 1;
}
@keyframes rgl-scan{
  0%  {opacity:0;   transform:translateX(2px)}
  15% {opacity:.32}
  85% {opacity:.32}
  100%{opacity:0;   transform:translateX(30px)}
}

/* Сдвиг внутренних записей на hover — сдержанный, только две средние строки. */
.rgl__sh{
  transform-box:fill-box;
  transition:transform 420ms cubic-bezier(.22,1,.36,1);
}
a:hover .rgl__rr--02 .rgl__sh,
button:hover .rgl__rr--02 .rgl__sh{transform:translateX(2.5px)}
a:hover .rgl__rr--03 .rgl__sh,
button:hover .rgl__rr--03 .rgl__sh{transform:translateX(1.6px)}

/* Отдельный слой под hover: не конфликтует с intro и idle на .rgl__fill. */
.rgl__hv{transform-box:fill-box}
a:hover .rgl__hv,
button:hover .rgl__hv,
a:focus-visible .rgl__hv{animation:rgl-sweep 450ms cubic-bezier(.22,1,.36,1)}
@keyframes rgl-sweep{
  0%  {transform:translateX(0)}
  60% {transform:translateX(-26px)}
  100%{transform:translateX(0)}
}

/* Знак читается и без движения: при reduce сразу финальное состояние. */
@media (prefers-reduced-motion:reduce){
  .rgl__rr,.rgl__fill,.rgl__scan,.rgl__sh,.rgl__hv{
    animation:none!important;
    transition:none!important;
  }
  .rgl__rr{transform:scaleX(1)}
  .rgl__fill{transform:none}
  .rgl__scan{opacity:0}
}

/* Лого в шапке: знак + вордмарк одной строкой. */
.wm{display:inline-flex;align-items:center;gap:10px}
.wm .rgl{--rgl-size:26px}
.wm__txt{white-space:nowrap}
@media(max-width:760px){ .wm .rgl{--rgl-size:22px} }
@media(max-width:400px){ .wm .rgl{--rgl-size:20px} }

/* ==========================================================================
   Правки по итогам QA-ревью
   ========================================================================== */

/* Тап-цели: WCAG 2.2 SC 2.5.8 проходил только по исключению spacing.
   Поднимаем вертикальную зону нажатия там, где строки шли вплотную. */
.crumbs a{padding:6px 0;display:inline-block}
.side-box a{padding:7px 0;display:inline-block}
.wm{padding:6px 0}
@media(max-width:400px){
  .menubtn{min-width:44px;min-height:44px;justify-content:center}
}

/* Бейдж демо-данных был самым мелким текстом на странице, при том что рядом
   стоит самая крупная цифра. Для дисклеймера по §10 это не годится. */
.demo{font-size:12.5px;letter-spacing:.1em;padding:6px 12px}

/* Логотип берёт цвета из общих токенов, а не хардкодит их копии. */
.rgl{
  --rgl-bone:var(--bone);
  --rgl-a:var(--c-draw);
  --rgl-b:var(--c-res);
}


/* Пометка демо-данных на первом экране: над сгибом, рядом с тем, к чему
   относится, а не под всей сеткой. */
.demo-top{display:inline-block;margin:var(--s3) 0 0}

/* «Отклонить» получает тот же вес, что «Принять»: политика прямо обещает
   одинаковый вес, а градиентная заливка против hairline-рамки этому обещанию
   противоречила. Разводим их не весом, а оттенком роли. */
.cc-actions .btn-primary[data-cc="none"]{background:var(--surface-2);color:var(--text);border:1px solid var(--ui)}
.cc-actions .btn-primary[data-cc="none"]:hover{background:var(--line);border-color:var(--muted)}

/* Тап-цели по WCAG 2.2 SC 2.5.8: оглавление legal-страниц и списочные ссылки
   шли вплотную, поэтому исключение по spacing на них не распространялось. */
.toc a{display:block;padding:5px 0;min-height:24px}
.info-list .link-in,
.mini a,
li > .link-in{display:inline-block;padding:4px 0;min-height:24px}

/* Контейнер прокручиваемой таблицы получает фокус — он должен быть виден. */
.table-scroll:focus-visible{outline:2px solid var(--c-draw);outline-offset:2px}