/* Шрифты варианта «meme» (Google Fonts, OFL), локальные копии */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/jetbrainsmono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/jetbrainsmono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/jetbrainsmono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/jetbrainsmono-500-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: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/meme/onest-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/meme/onest-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/meme/onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/meme/onest-400-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: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/meme/onest-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/meme/onest-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/meme/onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/meme/onest-400-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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/meme/oswald-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/meme/oswald-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/meme/oswald-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/meme/oswald-700-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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/meme/unbounded-500-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;
}

/* E «Потік» - сайт как производственная линия. Чёрный / тёплый белый / красный. */
:root{
  --ink:#0B0B0C; --ink2:#151517; --paper:#F3F0EA; --paper2:#E6E1D8;
  --red:#E5202B; --red-hi:#FF4A52; --white:#fff;
  --mute-d:#9B9AA1; --mute-l:#625E58;
  --line-d:rgba(255,255,255,.14); --line-l:rgba(11,11,12,.16);
  --display:"Unbounded","Arial Black",sans-serif;
  --text:"Onest","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
  --wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ink); color:var(--white); font-family:var(--text); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0; list-style:none}
h1,h2,h3{font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.03em}
h2{font-size:clamp(30px,4.2vw,62px); max-width:18ch}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.kicker{font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-hi); margin-bottom:22px}
.kicker::before{content:"\25A0\00a0\00a0"; color:var(--red)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
::selection{background:var(--red); color:#fff}

/* ---------- шапка ---------- */
.topbar{position:sticky; top:0; z-index:50; background:rgba(11,11,12,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-d)}
.topbar__in{display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px}
.brand{font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:-.01em}
.brand b{font-weight:800}
.nav{display:flex; align-items:center; gap:26px; font-size:14.5px; color:var(--mute-d)}
.nav a:hover{color:var(--white)}
.nav__cta{color:var(--white)!important; padding:9px 16px; border:1px solid var(--white); font-weight:600}
.nav__cta:hover{background:var(--white); color:var(--ink)!important}
/* переключатель языка: кнопка-пилюля и выпадающий список */
.langmenu{position:relative}
.langmenu__btn{display:flex; align-items:center; gap:8px; padding:8px 12px 8px 12px; border:1px solid rgba(255,255,255,.32); border-radius:999px; background:rgba(255,255,255,.03); color:var(--white); font:700 14px var(--text); letter-spacing:.04em; cursor:pointer; transition:border-color .2s, box-shadow .2s}
.langmenu__btn:hover{border-color:rgba(255,255,255,.6)}
.langmenu.is-open .langmenu__btn{border-color:rgba(255,255,255,.75); box-shadow:0 0 0 3px rgba(229,32,43,.35)}
.langmenu svg{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.langmenu__globe{width:18px; height:18px}
.langmenu__chev{width:16px; height:16px; transition:transform .2s}
.langmenu.is-open .langmenu__chev{transform:rotate(180deg)}
.langmenu__list{position:absolute; right:0; top:calc(100% + 10px); z-index:60; min-width:230px; margin:0; padding:8px; list-style:none; background:#18181b; border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 24px 50px -18px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s}
.langmenu.is-open .langmenu__list{opacity:1; visibility:visible; transform:none}
.langmenu__list a{display:flex; align-items:center; gap:14px; padding:9px 10px; border-radius:10px; color:var(--white); font-size:15.5px}
.langmenu__list a:hover{background:rgba(255,255,255,.07)}
.langmenu__list b{display:grid; place-items:center; width:38px; height:28px; border-radius:7px; background:#2a2a2f; font:700 12.5px var(--text); letter-spacing:.06em}
.langmenu__list a.is-active b{background:var(--red); color:#fff}
.langmenu__check{width:18px; height:18px; margin-left:auto; color:var(--red-hi)}
.burger{display:none; width:44px; height:44px; background:none; border:1px solid var(--line-d); cursor:pointer}
.burger span{display:block; width:18px; height:2px; margin:4px auto; background:var(--white)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:12px; padding:18px 26px; background:var(--red); color:#fff; font-weight:600; font-size:15.5px; border:1px solid var(--red); transition:background .2s, color .2s}
.btn::after{content:"\2192"; transition:transform .2s}
.btn:hover{background:var(--white); color:var(--ink); border-color:var(--white)}
.btn:hover::after{transform:translateX(4px)}
.btn--line{background:transparent; border-color:var(--line-d)}
.btn--line::after{content:"\2193"}

/* ---------- первый экран ---------- */
.hero{position:relative; overflow:hidden; padding:72px 0 0}
.hero__in{display:grid; grid-template-columns:1.25fr 1fr; grid-template-areas:"k k" "big big" "rest side"; column-gap:64px; align-items:end}
.hero .kicker{grid-area:k}
.hero__h{display:contents}
.hero__big{grid-area:big; display:block; font-size:clamp(96px,21vw,330px); line-height:.82; letter-spacing:-.06em; color:var(--red); margin-left:-.04em}
.hero__rest{grid-area:rest; align-self:start; display:block; margin-top:30px; font-weight:500; font-size:clamp(24px,3vw,44px); line-height:1.08; letter-spacing:-.025em; max-width:15ch}
.hero__side{grid-area:side; align-self:start; margin-top:36px}
.hero__lead{color:var(--mute-d); font-size:18px; max-width:46ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}


/* лента скриншотов инструментов системы */
.belt{margin-top:78px; overflow:hidden; transform:rotate(-2deg) scale(1.04); border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d); padding:22px 0; background:var(--ink2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.belt__track{display:flex; gap:22px; width:max-content; animation:belt 190s linear infinite}
.belt:hover .belt__track{animation-play-state:paused}
.belt__item{margin:0; flex:none}
.belt img{display:block; height:320px; width:auto; border:1px solid rgba(255,255,255,.22); border-radius:6px; cursor:zoom-in; transition:border-color .2s}
.belt img:hover{border-color:var(--red-hi)}
@keyframes belt{to{transform:translateX(-50%)}}
.facts{display:grid; grid-template-columns:repeat(4,1fr); margin:72px 0 0; border-top:1px solid var(--line-d)}
.facts li{padding:26px 24px 34px 0}
.facts li+li{padding-left:24px; border-left:1px solid var(--line-d)}
.facts b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(26px,2.8vw,40px); letter-spacing:-.03em}
.facts span{display:block; margin-top:8px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute-d)}

/* ---------- разделы ---------- */
.sec{padding:120px 0}
.sec--light{background:var(--paper); color:var(--ink)}
/* тёмные разделы подряд (Переваги -> Ніші -> Кейси): отступы не складываются */
.niches + .sec,.adv + .niches{padding-top:0; scroll-margin-top:100px}
/* преимущества над SaaS: четыре карточки с иконками */
.adv__list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.adv__list li{display:flex; flex-direction:column; gap:20px; padding:30px 24px 30px 0; border-top:1px solid var(--line-d)}
.adv__list li+li{padding-left:24px; border-left:1px solid var(--line-d)}
.adv__ic{width:44px; height:44px; color:var(--red-hi); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.adv__list span{font-size:19px; line-height:1.35; font-weight:500; color:var(--white)}
.sec--light .kicker{color:var(--red)}
.head{margin-bottom:56px}
.head--split{display:flex; justify-content:space-between; align-items:flex-end; gap:40px}
.head__lead{margin-top:20px; max-width:56ch; font-size:18px; color:var(--mute-d)}
.sec--light .head__lead{color:var(--mute-l)}

/* ---------- 50 против 200 ---------- */
.thr__row{display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start; padding:34px 0; border-top:1px solid var(--line-l)}
.thr__num b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(54px,6vw,92px); line-height:.9; letter-spacing:-.05em}
.thr__row--system .thr__num b{color:var(--red)}
.thr__num span{display:block; margin-top:14px; font-weight:600; font-size:17px}
.thr__num em{display:block; margin-top:6px; font-style:normal; font-size:15px; color:var(--mute-l); max-width:28ch}
.tiles{display:grid; grid-template-columns:repeat(25,1fr); gap:5px}
.tiles i{aspect-ratio:1; display:block}
.tiles--classic i{background:var(--ink)}
.tiles--system i{background:var(--red)}
.tiles.is-armed i{transform:scale(0); transition:transform .35s cubic-bezier(.2,.9,.3,1.3); transition-delay:calc(var(--i) * 6ms)}
.tiles.is-armed.is-in i{transform:none}

/* ---------- преимущества ---------- */
.bens{counter-reset:b; border-bottom:1px solid var(--line-d)}
.ben{position:relative; display:grid; grid-template-columns:90px 1fr 1fr; gap:32px; align-items:baseline; padding:38px 0; border-top:1px solid var(--line-d); transition:padding .3s}
.ben::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--red); transition:width .5s}
.ben:hover::before{width:100%}
.ben__n{font-family:var(--mono); font-size:14px; color:var(--red-hi)}
.ben__t{font-size:clamp(22px,2.4vw,34px); font-weight:500; letter-spacing:-.025em}
.ben__p{color:var(--mute-d); font-size:16.5px}

/* ---------- экономика ---------- */
.vol-scope[data-vol="200"] [data-vol-show="400"],.vol-scope[data-vol="400"] [data-vol-show="200"]{display:none}
.voltoggle{display:inline-flex; align-items:center; gap:4px; padding:5px; border:1px solid var(--ink); flex:none}
.voltoggle__label{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:0 12px 0 8px; color:var(--mute-l)}
.voltoggle button{font:600 15px var(--text); padding:12px 18px; border:0; background:transparent; color:var(--ink); cursor:pointer}
.voltoggle button.is-on{background:var(--ink); color:var(--paper)}

.budget__row{display:grid; grid-template-columns:270px 1fr; gap:30px; align-items:center; padding:26px 0; border-top:1px solid var(--line-l)}
.budget__label>span{display:block; font-weight:600}
.budget__label b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(30px,3.2vw,46px); letter-spacing:-.04em; line-height:1.05; margin-top:4px}
.budget__row--system .budget__label b{color:var(--red)}
.budget__label em{display:block; font-style:normal; font-size:14px; color:var(--mute-l); margin-top:6px}
.bar,.budget__track{display:flex; height:72px}
.budget__track .bar{display:contents}
.bar__seg{container-type:inline-size; position:relative; flex:none; height:100%; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:8px 10px; border-right:2px solid var(--paper); transition:width .7s cubic-bezier(.6,0,.2,1)}
.vol-scope[data-vol="200"] .bar__seg,.vol-scope[data-vol="200"] .gap{width:var(--w200)}
.vol-scope[data-vol="400"] .bar__seg,.vol-scope[data-vol="400"] .gap{width:var(--w400)}
.bar__seg i{font-style:normal; font-size:12px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar__seg em{font-style:normal; font-family:var(--mono); font-size:12px; margin-top:2px}
@container (max-width:96px){.bar__seg i,.bar__seg em{display:none}}
.bar--classic .bar__seg{color:var(--paper)}
.bar__seg--seo{background:#1B1B1D} .bar__seg--copy{background:#3B3A3C} .bar__seg--dev{background:#5A5859} .bar__seg--links{background:#7B7877}
.bar--system .bar__seg{color:#fff}
.bar--system .bar__seg--support{background:#B5121C} .bar--system .bar__seg--servers{background:#CB1823}
.bar--system .bar__seg--ai{background:#D91D28} .bar--system .bar__seg--base{background:#E5202B} .bar--system .bar__seg--seo{background:#F0414A}
.gap{flex:0 1 auto; min-width:0; height:100%; border:2px dashed var(--red); border-left:0; display:flex; align-items:center; overflow:hidden; transition:width .7s cubic-bezier(.6,0,.2,1)}
.gap em{font-style:normal}
.gap>span{padding:0 14px; white-space:nowrap; font-family:var(--mono); font-size:12.5px; color:var(--red); font-weight:500}
.budget__legends{display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:24px 0 0 300px; border-top:1px solid var(--line-l)}
.legend li{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:14px}
.legend i{width:12px; height:12px; flex:none}
.legend b{margin-left:auto; font-family:var(--mono); font-weight:500; font-size:13px}
.legend--classic .legend__seo i{background:#1B1B1D} .legend--classic .legend__copy i{background:#3B3A3C}
.legend--classic .legend__dev i{background:#5A5859} .legend--classic .legend__links i{background:#7B7877}
.legend--system .legend__support i{background:#B5121C} .legend--system .legend__servers i{background:#CB1823}
.legend--system .legend__ai i{background:#D91D28} .legend--system .legend__base i{background:#E5202B} .legend--system .legend__seo i{background:#F0414A}

.payback{display:grid; grid-template-columns:1.5fr 1fr; gap:56px; margin-top:64px; padding-top:40px; border-top:2px solid var(--ink)}
.payback__chart .mono{color:var(--mute-l); margin-bottom:14px}
.pb{width:100%; height:auto; overflow:visible}
.pb__below{fill:rgba(11,11,12,.10)} .pb__above{fill:rgba(229,32,43,.20)}
.pb__zero{stroke:var(--ink); stroke-width:1} .pb__line{stroke:var(--ink); stroke-width:2.5}
.pb__mark{stroke:var(--red); stroke-width:1.5; stroke-dasharray:5 5} .pb__dot{fill:var(--red)}
.pb__ml{font:500 15px var(--mono); fill:var(--red)}
.pb__tick{stroke:var(--ink); stroke-width:1}
.pb__xl,.pb__yl,.pb__axis{font:500 12px var(--mono); fill:var(--mute-l)}
.pb__xl{text-anchor:middle} .pb__yl{text-anchor:end} .pb__axis{text-anchor:end; text-transform:uppercase}
.payback__nums div{padding:18px 0; border-bottom:1px solid var(--line-l)}
.payback__nums div:first-child{padding-top:0}
.payback__nums dt{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute-l)}
.payback__nums dd{font-family:var(--display); font-weight:800; font-size:clamp(32px,3.6vw,52px); letter-spacing:-.04em; line-height:1.1}
.payback__nums .is-red dd{color:var(--red)}

/* ---------- ниши ---------- */
.niches__line{font-family:var(--display); font-weight:500; font-size:clamp(34px,5.6vw,88px); line-height:1.08; letter-spacing:-.035em}
.rot{display:inline-grid; grid-template-columns:minmax(0,max-content); max-width:100%; vertical-align:top; color:var(--red-hi)}
.rot>span{grid-area:1/1; justify-self:start; align-self:start; opacity:0; transform:translateY(.35em); transition:opacity .45s, transform .45s; box-shadow:inset 0 -.07em 0 var(--red)}
.rot>span.is-on{opacity:1; transform:none}
.niches__foot{display:grid; gap:34px; margin-top:64px}
.niches__list{display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.niches__list li{display:flex; flex-direction:column; gap:18px; padding:28px 20px 26px 0; border-top:1px solid var(--line-d)}
.niches__list li+li{padding-left:22px; border-left:1px solid var(--line-d)}
.niche__ic{width:42px; height:42px; color:var(--red-hi); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s}
.niche__ic .f{fill:currentColor; stroke:none}
.niches__list li:hover .niche__ic{transform:translateY(-4px)}
.niches__list span{font-family:var(--mono); font-size:13.5px; line-height:1.4; text-transform:uppercase; letter-spacing:.06em; color:var(--white)}
.niches__foot p{color:var(--mute-d); max-width:62ch}

/* ---------- примеры ---------- */
.cases{display:grid; gap:28px}
.case{display:grid; grid-template-columns:1.45fr 1fr; grid-template-areas:"h h" "site shots" "kpi shots"; gap:28px; padding:32px; background:var(--ink2); border-top:3px solid var(--red)}
.case__head{grid-area:h; display:flex; justify-content:space-between; align-items:baseline; gap:20px}
.case__head h3{font-size:clamp(22px,2.2vw,30px); font-weight:500}
.case__head .mono{color:var(--mute-d)}
.case__site{grid-area:site}
.case__site img,.case__shots img{border:1px solid rgba(255,255,255,.14); cursor:zoom-in}
.case__kpi{grid-area:kpi; display:grid; grid-template-columns:repeat(4,1fr); align-content:start; border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d)}
.case__kpi li{padding:16px 12px 18px 0}
.case__kpi li+li{padding-left:16px; border-left:1px solid var(--line-d)}
.case__kpi b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(26px,2.6vw,38px); letter-spacing:-.04em; color:var(--red-hi)}
.case__kpi span{display:block; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute-d); margin-top:4px}
.case__shots{grid-area:shots; display:grid; gap:16px; align-content:start}
.case__shots figcaption{margin-top:8px; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; color:var(--mute-d)}

/* ---------- заявка одной фразой ---------- */
/* фон заявки глубже фирменного красного: яркий #E5202B на всю ширину слепил (владелец 15.10) */
.contact{background:#B5161E; color:#fff}
.contact .kicker{color:#fff} .contact .kicker::before{color:var(--ink)}
.contact .head__lead{color:rgba(255,255,255,.86)}
.contact__in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:64px; align-items:start}
.contact__in .head{margin-bottom:0}
.contact h2{font-size:clamp(28px,3vw,46px); max-width:none; text-wrap:balance}
/* форма: белая карточка на красном, тёмный текст */
.form{display:grid; gap:22px; padding:36px; background:#fff; color:var(--ink); box-shadow:0 24px 60px -24px rgba(11,11,12,.45)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:8px}
.field__label{font-size:15px; font-weight:600; color:var(--ink)}
.field__label b{color:var(--red); font-weight:600}
.field__label em{margin-left:6px; font-style:normal; font-weight:400; font-size:14px; color:var(--mute-l)}
.field input,.field textarea{width:100%; padding:14px 16px; border:1.5px solid #CFC9BF; border-radius:0; background:#fff; color:var(--ink); font:400 17px/1.4 var(--text); outline:none; transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:124px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6F6A63; opacity:1}
.field input:hover,.field textarea:hover{border-color:#9C968C}
.field input:focus,.field textarea:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(229,32,43,.28)}
.form__foot{display:grid; gap:12px}
.form__btn{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:58px; padding:16px 24px; border:0; background:var(--ink); color:#fff; font:600 16px var(--text); cursor:pointer; transition:background .2s}
.form__btn::after{content:"\2192"; transition:transform .2s}
.form__btn:hover{background:var(--red)}
.form__btn:hover::after{transform:translateX(4px)}
.form__btn:disabled{opacity:.6; cursor:wait}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__status{font-size:15px; color:var(--mute-l)}
.form__status:empty{display:none}
.form__status.is-ok{color:#1E7A3A; font-weight:600} .form__status.is-err{color:#C8102E; font-weight:600}

/* ---------- подвал ---------- */
.footer{padding:30px 0; border-top:1px solid var(--line-d); color:var(--mute-d); font-size:14px}
.footer__in{display:flex; gap:28px; align-items:baseline; flex-wrap:wrap}
.footer__brand{font-family:var(--display); color:var(--white)}
.footer__brand b{font-weight:800}
.footer__year{margin-left:auto; font-family:var(--mono); font-size:12.5px}

/* ---------- лайтбокс, появление ---------- */
.lightbox{position:fixed; inset:0; z-index:90; background:rgba(11,11,12,.95); display:grid; place-items:center; padding:28px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1500px,96vw); max-height:92vh}
.lightbox button{position:absolute; top:18px; right:22px; width:46px; height:46px; background:var(--red); border:0; color:#fff; font-size:26px; cursor:pointer}
.reveal{opacity:0; transform:translateY(18px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .nav{gap:18px; font-size:14px}
  .hero__in{grid-template-columns:1fr; grid-template-areas:"k" "big" "rest" "side"}
  .hero__side{margin-top:34px}
  .case{grid-template-columns:1fr 1fr; grid-template-areas:"h h" "site site" "kpi kpi" "shots shots"}
  .case__shots{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  body{font-size:16px}
  .nav{position:absolute; top:63px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--ink); border-bottom:1px solid var(--line-d); display:none}
  .nav.is-open{display:flex}
  /* телефон набок: панель выше экрана - прокручивается внутри себя */
  .nav{max-height:calc(100vh - 63px); max-height:calc(100dvh - 63px); overflow-y:auto; overscroll-behavior:contain}
  .nav>a{padding:16px 24px; border-top:1px solid var(--line-d)}
  /* мобильное меню: заявка - сплошная красная кнопка без белой обводки */
  .nav>a.nav__cta{margin:12px 24px; text-align:center; border:0; background:var(--red); padding:14px 16px}
  .nav__cta:hover{background:var(--red-hi); color:var(--white)!important}
  /* в панели телефона список языков открыт сразу, без кнопки */
  .langmenu{padding:10px 16px 16px; border-top:1px solid var(--line-d)}
  .langmenu__btn{display:none}
  .langmenu__list{position:static; min-width:0; padding:0; background:none; border:0; box-shadow:none; opacity:1; visibility:visible; transform:none}
  .burger{display:block}
  .sec{padding:80px 0}
  .head--split{flex-direction:column; align-items:flex-start}
  .belt img{height:220px}
  .facts{grid-template-columns:1fr 1fr}
  .facts li:nth-child(3){padding-left:0; border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line-d)}
  .thr__row,.budget__row{grid-template-columns:1fr; gap:22px}
  .tiles{gap:3px}
  .ben{grid-template-columns:44px 1fr; gap:10px 16px}
  .ben__p{grid-column:2}
  .budget__legends{grid-template-columns:1fr; gap:18px; padding-left:0}
  .bar,.budget__track{height:56px}
  .payback{grid-template-columns:1fr; gap:36px}
  .niches__foot{gap:24px}
  .niches__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .niches__list li,.niches__list li+li{padding:22px 14px 20px 0; border-left:0}
  .adv__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adv__list li,.adv__list li+li{padding:24px 16px 24px 0; border-left:0}
  .adv__list span{font-size:17px}
  .case{grid-template-columns:1fr; grid-template-areas:"h" "site" "kpi" "shots"; padding:22px}
  .case__kpi{grid-template-columns:1fr 1fr}
  .case__kpi li:nth-child(3){padding-left:0; border-left:0}
  .case__kpi li:nth-child(n+3){border-top:1px solid var(--line-d)}
  .case__shots{grid-template-columns:1fr}
  .case__head{flex-direction:column; gap:6px}
  .contact__in{grid-template-columns:1fr; gap:36px}
  .form{padding:24px 20px}
  .form__row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .belt__track{animation:none}
  .reveal{opacity:1; transform:none}
  .tiles.is-armed i{transform:none; transition:none}
}

/* подписи графика окупаемости на телефоне: SVG сжимается вдвое, шрифт компенсируем */
@media (max-width:700px){.pb__xl,.pb__yl,.pb__axis{font-size:21px} .pb__ml{font-size:26px} .pb__yl--tight{display:none} .gap>span{padding:0 8px} .gap em{display:none}}
@media (max-width:560px){.hero__big{font-size:26vw}}
@media (max-width:420px){.niches__line{font-size:8.2vw} .rot>span{overflow-wrap:anywhere}}
/* самые узкие телефоны: длинные слова заголовков («индексируются») не шире колонки */
@media (max-width:340px){h2{font-size:26px}}

/* логотип BulkStack (svg): высота по гайду - 32px в шапке, 24px в подвале */
.brand .logo{display:block; height:32px; width:auto}
.footer__brand .logo{display:block; height:24px; width:auto}
@media (max-width:380px){.brand .logo{height:26px}}

/* ===== Wunderwaffle: мемный слой поверх flow.css (собирается вместе с ним, build_site.py) =====
   Палитра та же, что у «Потока»: чёрный / тёплый белый / красный (владелец 15.10: «палитру не меняй»).
   Мемные подписи - Oswald 700 капсом с чёрной обводкой (Impact без кириллицы на телефонах). */
:root{--meme:"Oswald",Impact,"Arial Narrow",sans-serif}

/* ---------- логотип: вафля с глазами + Wunder<b>waffle</b> ---------- */
.wlogo{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-size:21px; letter-spacing:-.03em; color:var(--white); white-space:nowrap}
.wlogo__ic{width:46px; height:46px; flex:none; transition:transform .3s}
.brand:hover .wlogo__ic{transform:rotate(-14deg) scale(1.08)}
.wlogo__t{font-weight:500; transform:skewX(-8deg)}
/* приписка SEO: красная плашка, наклон как у слова - «на скорости» */
.wlogo__seo{padding:3px 6px 2px; background:var(--red); color:#fff; font:800 13px/1 var(--display); letter-spacing:.02em; transform:skewX(-8deg); margin-right:-2px}
.wlogo b{font-weight:800; color:var(--red-hi)}
.footer__brand .wlogo{font-size:17px}
.footer__brand .wlogo__ic{width:28px; height:28px}
.footer__brand .wlogo__seo{font-size:11px}
.burger{flex:none}

/* width/height у картинок нужны только для места под них (см. pic в tpl/meme.py), размер по-прежнему задаёт колонка */
main img[width]{height:auto}

/* ---------- меню на десктопах: одна строка, на логотип не наезжает ----------
   Замеры (uk - самый длинный): с полной подписью «Знижка / …» меню + логотип влезают от 1230px, с короткой - от 1005px,
   ниже шапка компактнее. Пороги с запасом на полосу прокрутки Windows: она съедает 17px, а media-запрос её не вычитает.
   Хвост подписи - .nav__more в тексте nav.discount; в бургере он виден всегда. */
@media (min-width:901px){
  .nav>a{white-space:nowrap}
}
@media (min-width:901px) and (max-width:1259px){
  .nav__more{display:none}
}
@media (min-width:901px) and (max-width:1023px){
  .topbar__in{gap:14px}
  .nav{gap:11px}
  .nav__cta{padding:9px}
  .wlogo{font-size:17px; gap:8px}
  .wlogo__ic{width:38px; height:38px}
  .wlogo__seo{font-size:11px}
}

/* ---------- первый экран: конец заголовка красным, третья кнопка ---------- */
.hero__yes{color:var(--red); white-space:nowrap}
/* сетка по ширине первых двух кнопок, третья - на обе колонки: ровно их общая ширина */
.hero__cta{display:grid; grid-template-columns:auto auto; width:fit-content; max-width:100%}
.btn--deal{grid-column:1/-1; justify-content:center; text-align:center; text-wrap:balance; border-color:var(--red)}
/* колонка справа от заголовка уже двух кнопок: в ряд влезают только с меньшими полями */
@media (min-width:1101px) and (max-width:1150px){
  .hero__cta .btn{padding-left:20px; padding-right:20px}
}

/* ---------- панда под лентой: вырезанная голова без рамки «смотрит» на ленту, заходит на неё снизу ---------- */
.panda{position:relative; z-index:2; width:min(330px,78vw); margin:-70px auto 0}
.panda + .facts{margin-top:36px}
.panda img{width:100%; height:auto; filter:drop-shadow(0 16px 26px rgba(0,0,0,.75))}
.panda .ph{width:min(500px,90vw); margin-top:64px}
.ph{display:grid; place-items:center; align-content:center; gap:12px; padding:20px; text-align:center; color:var(--mute-d);
  border:2px dashed rgba(255,255,255,.3); background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 14px,transparent 14px 28px);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.ph--wide{aspect-ratio:5/2}

/* ---------- бегущая строка ---------- */
.ticker{overflow:hidden; background:var(--red); color:#fff; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:14px 0}
.ticker__track{display:flex; width:max-content; animation:belt 45s linear infinite}
.ticker span{display:flex; align-items:center; gap:24px; padding-right:24px; font:700 22px var(--meme); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap}
.ticker span::before{content:"\2605"; color:var(--ink)}

/* ---------- мем с лошадью: под квадратиками «200+», две половинки в ряд, подписи поверх ---------- */
.horse{grid-column:2; display:grid; grid-template-columns:1fr 1fr; gap:3px; max-width:620px; margin:6px 0 0; padding:3px; background:var(--ink); box-shadow:8px 8px 0 var(--red)}
.horse__p{position:relative}
.horse__p img{width:100%; height:auto}
.horse__cap{position:absolute; color:#fff; font:600 clamp(12px,1.15vw,15px)/1.2 var(--text); pointer-events:none;
  text-shadow:0 0 3px #000, 0 1px 2px #000, 0 0 10px rgba(0,0,0,.85)}
.horse__cap--top{left:60%; right:3%; top:58%}
.horse__cap--bot{left:36%; right:12%; top:74%}

/* ---------- калькулятор бюджета ---------- */
.calcin{display:grid; gap:12px; width:340px; padding:18px 20px 16px; background:#fff; border:2px solid var(--ink)}
.calcin__label{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute-l)}
.calcin__row{display:flex; align-items:baseline; gap:12px}
.calcin__row input{width:170px; padding:0 0 4px; border:0; border-bottom:3px solid var(--ink); border-radius:0; background:transparent; color:var(--red);
  font:800 clamp(34px,3.4vw,48px)/1 var(--display); letter-spacing:-.04em; outline:none; -moz-appearance:textfield; appearance:textfield}
.calcin__row input::-webkit-outer-spin-button,.calcin__row input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.calcin__row input:focus{border-bottom-color:var(--red)}
.calcin__row span{font-weight:600; font-size:17px}
.calcin__range{width:100%; margin:0; accent-color:var(--red); cursor:pointer}
.gap[hidden]{display:none}
.calc__note{margin-top:18px; padding:14px 18px; border-left:4px solid var(--red); background:#fff; font-weight:600}
.calc__note[hidden]{display:none}

/* ---------- STONKS сбоку от графика ---------- */
.payback--stonks{grid-template-columns:minmax(0,.62fr) minmax(0,1.5fr) minmax(0,1fr); gap:48px; align-items:center}
.stonks{transform:rotate(-3deg)}
.stonks img{width:100%; height:auto; border:4px solid #fff; box-shadow:0 14px 30px -12px rgba(11,11,12,.55)}
/* убыточный объём: Stonks меняется на Not stonks (класс is-loss ставит калькулятор) */
.stonks .stonks__no,.is-loss .stonks .stonks__yes{display:none}
.is-loss .stonks .stonks__no{display:block}
/* «не окупается» длиннее «≈4 мес» - мельче, чтобы не вылезало из колонки */
.is-loss .payback__nums .is-red dd{font-size:clamp(26px,2.5vw,38px); line-height:1.05}

/* график окупаемости: старт (минус внедрение), конец года и «точка ушла за год» */
.pb__drop{stroke:var(--ink); stroke-width:1.5; stroke-dasharray:4 4; opacity:.5}
.pb__p{fill:var(--ink)}
.pb__no{font:500 15px var(--mono); fill:var(--red)}

/* ---------- «Мы не видим вашу инфу»: три ответа + сравнение с облачными SaaS ---------- */
.priv__cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:64px}
.priv__cards li{display:flex; flex-direction:column; gap:16px; padding:30px 24px 30px 0; border-top:1px solid var(--line-d)}
.priv__cards li+li{padding-left:24px; border-left:1px solid var(--line-d)}
.priv__ic{width:44px; height:44px; color:var(--red-hi); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.priv__cards h3{font-size:clamp(19px,1.7vw,23px); font-weight:600; letter-spacing:-.025em; line-height:1.15}
.priv__cards p{color:var(--mute-d); font-size:16px; line-height:1.5}
.cmp{border-top:2px solid var(--white)}
.cmp__row{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line-d)}
.cmp__row--head{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-d); padding:12px 0}
.cmp__row--head span:last-child{color:var(--red-hi)}
.cmp__l{font-weight:600; font-size:16.5px}
.cmp__them{color:var(--mute-d); font-size:16px}
.cmp__them::before{content:"\2014\00a0\00a0"; color:#55535A}
.cmp__us{color:var(--white); font-weight:600; font-size:16.5px}
.cmp__us::before{content:"\2713\00a0\00a0"; color:var(--red-hi); font-weight:700}
.cmp__row i{display:none}

/* мем-переписка под таблицей: как «поддерживает» облачный сервис */
/* переписка и Илон стоят вровень, каждый под своей колонкой таблицы (владелец 17.10) */
.tgrow{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; margin-top:30px}
.tgrow .tg{grid-column:2}
.tgrow .elon{grid-column:3}
.tg{max-width:330px; margin:0; padding:11px 11px 0; background:var(--ink2); border:1px solid var(--line-d); border-radius:16px; transform:rotate(-1deg)}
.tg__head{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-d); padding:2px 4px 9px; border-bottom:1px solid var(--line-d); margin-bottom:10px}
.tg__msg{width:fit-content; max-width:88%; margin-bottom:7px; padding:7px 10px 5px; border-radius:12px; background:#2A2A2F; font-size:12.5px; line-height:1.3}
.tg__msg--out{margin-left:auto; background:#3A3A41}
.tg__msg i{display:block; text-align:right; font-style:normal; font-family:var(--mono); font-size:9.5px; color:#8E8B85; margin-top:2px}
.tg__unread{display:flex; align-items:center; gap:9px; margin:11px 0 9px; font-size:10.5px; color:var(--mute-d); white-space:nowrap}
.tg__unread::before,.tg__unread::after{content:""; flex:1; height:1px; background:var(--line-d)}
.tg img{display:block; width:calc(100% + 22px); margin:10px -11px 0; border-radius:0 0 15px 15px}

/* Илон на запуске Falcon Heavy - вырезан по контуру (rembg bria + белая обводка), стоит под строками
   таблицы со стороны «Вундервафли»; без рамки и подписи (владелец 17.10) */
.elon{margin:0; justify-self:end; align-self:start; width:min(400px,100%)}
.elon img{display:block; width:100%; height:auto}

/* связь: вместо формы заявки - Telegram (владелец 18.10) */
.tgbox{display:grid; gap:16px; justify-items:center; padding:44px 36px; background:#fff; color:var(--ink); text-align:center;
  box-shadow:0 24px 60px -24px rgba(11,11,12,.45)}
.tgbox__btn{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:62px; padding:16px 24px;
  background:var(--ink); color:#fff; font:600 17px var(--text); transition:background .2s}
.tgbox__btn:hover{background:var(--red)}
.tgbox__ic{width:24px; height:24px; fill:currentColor; flex:none}
.tgbox__h{font-family:var(--mono); font-size:21px; letter-spacing:.02em}
.tgbox__h a{color:var(--red); border-bottom:1px solid rgba(197,16,30,.35)}
.tgbox__h a:hover{border-bottom-color:var(--red)}
.tgbox__note{font-size:15px; line-height:1.45; color:var(--mute-l); max-width:34ch}

/* ---------- некролог классическому отделу ---------- */
.coffin__gif{width:100%; height:auto; border:3px solid var(--ink); box-shadow:12px 12px 0 var(--red)}
.coffin__text h2{margin-bottom:6px}
.coffin{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center}
.coffin__rip{margin-top:28px; font:700 19px var(--meme); letter-spacing:.1em; color:var(--red-hi)}
.coffin__list{display:grid; gap:10px; margin-top:12px}
.coffin__list li{display:flex; align-items:center; gap:14px; font-size:17px; color:var(--mute-l); text-decoration:line-through; text-decoration-color:var(--red)}
.coffin__list li::before{content:""; width:14px; height:18px; flex:none; border-radius:7px 7px 2px 2px; background:rgba(11,11,12,.3)}
.cf{display:block; width:100%; height:auto; overflow:visible}
.cf__box rect{fill:var(--red)}
.cf__lid{stroke:#B5161E; stroke-width:3}
.cf__box text{font:700 25px var(--meme); letter-spacing:.06em; fill:#fff}
.cf__fig{fill:var(--ink)}
.cf__limb{fill:none; stroke:var(--ink); stroke-width:8; stroke-linecap:round}
.cf__shades{fill:var(--paper)}
.cf__box,.cf__fig{animation:bob .45s ease-in-out infinite alternate}
.cf__fig{animation-delay:var(--d)}
@keyframes bob{to{transform:translateY(-9px)}}
/* после «Ниш» идёт светлая мемотека, а не тёмный раздел: обычный отступ */
.niches + .sec--light{padding-top:120px}

/* ---------- мемы сбоку от кейсов (Тони/Джарвис, сойджеки): кейсы шире обычной колонки, мем - в своей колонке ---------- */
.cases{--wide:min(1480px, calc(100vw - 64px)); margin-inline:min(0px, calc((100% - var(--wide)) / 2))}
.caserow{display:grid; grid-template-columns:270px minmax(0,1fr); gap:34px; align-items:center}
.caserow--r{grid-template-columns:minmax(0,1fr) 270px}
.caserow--r .cmeme{order:2}
.cmeme{position:relative; margin:0; transform:rotate(-3deg)}
.caserow--r .cmeme{transform:rotate(3deg)}
.cmeme img{display:block; width:100%; height:auto; border:4px solid #fff; box-shadow:10px 10px 0 var(--red)}
.cmeme--adult img{border:0; box-shadow:none; filter:drop-shadow(0 14px 24px rgba(0,0,0,.65))}
.cmeme__cap{position:absolute; left:10px; right:10px; text-align:center; color:#fff; pointer-events:none;
  font:700 clamp(17px,1.4vw,22px)/1.06 var(--meme); text-transform:uppercase; letter-spacing:.01em; -webkit-text-stroke:3.5px #000; paint-order:stroke fill}
.cmeme__cap--top{top:10px}
.cmeme__cap--bot{bottom:12px}
.cmeme--adult .cmeme__cap--top{position:static; display:block; margin-bottom:10px; font-size:clamp(20px,1.7vw,26px); color:var(--red-hi); -webkit-text-stroke:0}

/* ---------- команда (полароиды) ---------- */
.mates{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
.mate{padding:14px 14px 22px; background:#fff; box-shadow:0 18px 40px -22px rgba(11,11,12,.5); transform:rotate(-1.6deg); transition:transform .25s}
.mate:nth-child(2n){transform:rotate(1.4deg)}
.mate:hover{transform:rotate(0) translateY(-6px)}
.mate__photo{aspect-ratio:4/5; overflow:hidden}
.mate__photo img{width:100%; height:100%; object-fit:cover}
.mate__photo .ph{height:100%; border:0; background:var(--ink2); color:var(--mute-d); font-size:11.5px}
.ph__face{width:56%; fill:#2E2E33}
.ph__shades{fill:var(--red)}
.mate__name{margin-top:16px; font-size:19px; letter-spacing:-.02em; line-height:1.15}
.mate__role{margin-top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--red)}
.mate__duty{margin-top:10px; font-size:15px; line-height:1.45; color:var(--mute-l)}
.mate__duty s{text-decoration-color:var(--red); text-decoration-thickness:2px}

/* ---------- «Наші раби»: витрина агентов под командой, маленькие полароиды ---------- */
.slaves{margin-top:96px}
.slaves__title{font-size:clamp(24px,2.8vw,38px)}
.slaves__lead{margin-top:14px; max-width:56ch; font-size:18px; color:var(--mute-l)}
.slaves__list{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px 20px; margin-top:40px}
.slave{padding:9px 9px 14px; background:#fff; box-shadow:0 14px 30px -18px rgba(11,11,12,.5); transform:rotate(-1.4deg); transition:transform .25s; overflow-wrap:break-word}
.slave:nth-child(2n){transform:rotate(1.2deg)}
.slave:nth-child(3n){transform:rotate(-.7deg)}
.slave:hover{transform:rotate(0) translateY(-5px)}
.slave__photo{aspect-ratio:1; overflow:hidden}
.slave__photo img{width:100%; height:100%; object-fit:cover}
.slave__photo .ph{height:100%; gap:6px; padding:10px; border:0; background:var(--ink2); color:var(--mute-d); font-size:9.5px; line-height:1.25}
.slave__photo .ph__face{width:40%}
.slave__name{margin:11px 0 0; font:800 15.5px/1.15 var(--display); letter-spacing:-.02em}
.slave__role{margin-top:4px; font:500 10.5px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--red)}
.slave__hp{display:flex; align-items:center; gap:8px; margin-top:10px; font:500 10.5px var(--mono)}
.slave__hp b{font-weight:500; white-space:nowrap}
.slave__bar{flex:1; height:8px; border:1px solid var(--ink); background:var(--paper2)}
.slave__bar i{display:block; height:100%; background:var(--red)}
.slave__state{margin-top:9px; font-size:13.5px; line-height:1.38; color:var(--mute-l)}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .caserow,.caserow--r{grid-template-columns:minmax(0,1fr); gap:0}
  .cmeme,.caserow--r .cmeme{order:2; width:min(320px,82%); margin:-26px auto 0; z-index:2}
}
@media (max-width:1100px){
  .payback--stonks{grid-template-columns:1fr 1fr; gap:36px}
  .payback--stonks .stonks{grid-column:1/-1; max-width:420px}
  .mates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coffin{grid-template-columns:1fr; gap:40px}
}
@media (max-width:1023px){
  .slaves__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .tgbox{padding:32px 20px}
  .tgrow{grid-template-columns:1fr; gap:10px; margin-top:32px}
  .tgrow .tg,.tgrow .elon{grid-column:1}
  .tg{margin:0}
  .elon{justify-self:center; width:min(330px,80%); margin:0}
  .tg{max-width:none; margin-top:32px}
  .priv__cards{grid-template-columns:1fr; margin-bottom:44px}
  .priv__cards li,.priv__cards li+li{padding:24px 0; border-left:0}
  .cmp__row{grid-template-columns:1fr; gap:7px; padding:16px 0}
  .cmp__row--head{display:none}
  .cmp__l{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-d)}
  .cmp__row i{display:inline; font-style:normal; color:var(--mute-d); font-size:13px}
  .cmp__row i::after{content:":\00a0"}
  .horse{grid-column:auto; max-width:none; box-shadow:6px 6px 0 var(--red)}
  .horse__cap{font-size:clamp(11px,3.2vw,14px)}
  .panda{margin-top:-46px}
  .calcin{width:100%}
  .payback--stonks{grid-template-columns:1fr}
  .payback--stonks .stonks{max-width:340px}
  .ticker span{font-size:17px; gap:18px; padding-right:18px}
  .niches + .sec--light{padding-top:80px}
}
@media (max-width:560px){
  /* в столбик все три на всю ширину: иначе третья кнопка выглядела бы главнее первых двух */
  .hero__cta{width:100%; grid-template-columns:minmax(0,1fr)}
  .hero__cta .btn{justify-content:center}
  .horse{grid-template-columns:1fr}
  .horse__cap{font-size:15px}
  .mates{grid-template-columns:1fr; gap:22px}
  .slaves{margin-top:72px}
  .slaves__lead{font-size:16px}
  .slaves__list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; margin-top:28px}
  /* 15 карточек на 2 колонки: последняя - одна посередине, как и положено упаковщику */
  .slave:last-child{grid-column:1/-1; justify-self:center; width:calc(50% - 7px)}
  .wlogo{font-size:18px; gap:8px}
  .wlogo__ic{width:38px; height:38px}
  .wlogo__seo{font-size:11px}
}
/* самые узкие телефоны: логотип с плашкой SEO не выталкивает кнопку меню */
@media (max-width:380px){
  .wlogo{font-size:16px; gap:6px}
  .wlogo__ic{width:32px; height:32px}
  .wlogo__seo{font-size:10px; padding:3px 4px 2px}
}
@media (max-width:340px){
  .wlogo{font-size:15px; gap:5px}
  .wlogo__ic{width:30px; height:30px}
}
@media (prefers-reduced-motion:reduce){
  .ticker__track,.cf__box,.cf__fig{animation:none}
}

/* суммы в легенде бюджета не переносятся (длинные подписи «… ×2» на телефоне) */
.legend b{white-space:nowrap; padding-left:8px}

/* подписи графика на телефоне: SVG сжимается вдвое, шрифт компенсируем (как .pb__ml в flow.css) */
@media (max-width:700px){.pb__no{font-size:24px}}

/* ===== Шашки на скидку: блок #discount, собирается после flow.css и meme.css =====
   Палитра сайта: чёрный, тёплый белый, красный. Шашки игрока красные, Вафли тёплые белые, дамки с короной. */
.game{overflow:hidden}
.game .head{margin-bottom:44px}
.game__nojs{max-width:56ch; padding:14px 18px; border-left:4px solid var(--red); background:var(--ink2); font-weight:600}
.game__nojs[hidden],.game__app[hidden],.game__board[hidden],.game__screen[hidden],.game__bar[hidden]{display:none}
.game__app{display:grid; grid-template-columns:minmax(0,min(520px,56%)) minmax(0,1fr); grid-template-areas:"main side"; column-gap:clamp(36px,5vw,72px); align-items:start}
.game__main{grid-area:main; min-width:0}
.game__side{grid-area:side; display:grid; gap:28px; min-width:0}

/* ---------- Мадам Вафля и пузырь ---------- */
.game__who{display:grid; grid-template-columns:clamp(216px,17.5vw,252px) minmax(0,1fr); gap:38px; align-items:center}
/* .wf - обёртка: картинка владельца как есть (высота - от картинки) и поверх неё плашки с промокодами; cqw у плашек = ширина картинки */
.wf{position:relative; display:block; width:100%; max-width:320px; background:var(--ink2); box-shadow:0 0 0 3px var(--white),9px 9px 0 3px var(--red); container-type:inline-size; transition:transform .3s}
.wf > img{display:block; width:100%; height:auto; transition:filter .3s}
.wf--empty{aspect-ratio:848/1264}
.wf.is-horned{box-shadow:0 0 0 3px var(--red-hi),9px 9px 0 3px var(--red)}
.wf[data-mood="happy"]{animation:game-jump .5s ease-out}
.wf[data-mood="sad"]{transform:rotate(-2deg) translateY(5px)}
.wf[data-mood="sad"] > img{filter:saturate(.7) brightness(.85)}
@keyframes game-jump{30%{transform:translateY(-12px)} 62%{transform:translateY(2px)}}
/* плашка-«цензура» с промокодом уровня: центр - в точке left/top (% от картинки), видна после победы на своём уровне.
   checkers.js: is-on - выигран, is-new - выигран только что (печать, как у .game__stamp) */
.wf__code{--rot:0deg; position:absolute; z-index:2; left:50%; top:50%; padding:.3em .55em .26em; border:1px solid var(--red); background:var(--ink); color:var(--white);
  font:600 11px/1.15 var(--mono); font-size:6cqw; letter-spacing:.04em; white-space:nowrap; text-align:center; pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--rot)); opacity:0; visibility:hidden}
.wf__code.is-on{opacity:1; visibility:visible}
.wf__code.is-new{animation:game-seal .34s cubic-bezier(.3,1.5,.5,1) both}
@keyframes game-seal{from{transform:translate(-50%,-50%) rotate(var(--rot)) scale(2.4); opacity:0}}
.wf__code--1{left:50%; top:45%; --rot:-6deg; min-width:46cqw}      /* поперёк груди */
.wf__code--2{left:34%; top:83.5%; --rot:8deg}                     /* низ юбки спереди */

.game__bubble{position:relative; display:flex; align-items:center; min-height:158px; padding:16px 20px; background:var(--paper); color:var(--ink); font:700 22px/1.24 var(--meme); letter-spacing:.01em}
.game__bubble::before{content:""; position:absolute; left:-12px; top:50%; margin-top:-11px; border-style:solid; border-width:11px 12px 11px 0; border-color:transparent var(--paper) transparent transparent}
.game__bubble.is-pop{animation:game-pop .22s ease-out}
@keyframes game-pop{from{transform:scale(.96)} 60%{transform:scale(1.015)} to{transform:none}}

/* ---------- лестница: снизу 1-й уровень, сверху недостижимый ---------- */
.game__ladder{display:flex; flex-direction:column-reverse; gap:8px}
.game__rung:nth-child(2){margin-left:22px}
.game__rung:nth-child(3){margin-left:44px}
.game__rung button{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; min-height:56px; padding:9px 14px 9px 14px;
  background:var(--ink2); border:1px solid var(--line-d); border-radius:0; color:var(--white); font:600 15.5px/1.25 var(--text); text-align:left; cursor:pointer; transition:border-color .2s, background .2s}
.game__rung button:hover{border-color:var(--white)}
.game__rung button:focus-visible{outline:2px solid var(--white); outline-offset:2px}
.game__n{font:800 19px/1 var(--display); color:var(--red-hi)}
.game__got{font:500 12px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute-d); white-space:nowrap}
.game__rung.is-now button{border-color:var(--red); box-shadow:inset 4px 0 0 var(--red)}
.game__rung.is-now .game__got{color:var(--white)}
.game__rung.is-won .game__got{color:var(--red-hi); font-size:13.5px; letter-spacing:.04em}
.game__rung.is-locked button{color:var(--mute-d); cursor:not-allowed}
.game__rung.is-locked button:hover{border-color:var(--line-d)}
.game__rung.is-locked .game__n{color:var(--mute-d)}
.game__rung[data-level="3"] .game__prize{font:800 clamp(22px,2.3vw,30px)/1 var(--display); letter-spacing:-.04em}
.game__rung[data-level="3"].is-now .game__prize{color:var(--red-hi)}

/* ---------- доска ---------- */
.game__board{position:relative; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; aspect-ratio:1;
  box-shadow:0 0 0 4px var(--white),10px 10px 0 4px var(--red)}
.game__cell{position:relative; display:block; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:var(--ink2); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.game__app:not([data-phase="you"]) .game__cell{cursor:default}
.game__cell--w{background:var(--paper2); cursor:default}
.game__cell.is-last{background:#2A2A2F}
.game__cell:focus-visible{outline:3px solid var(--white); outline-offset:-3px}
.game__cell.is-go::after{content:""; position:absolute; left:34%; top:34%; width:32%; height:32%; border-radius:50%; background:var(--red-hi); box-shadow:0 0 0 3px var(--ink2),0 0 0 5px var(--red-hi)}

.game__layer{position:absolute; inset:0; pointer-events:none}
.game__pc{position:absolute; left:0; top:0; z-index:1; width:12.5%; height:12.5%; transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%)); transition:transform .27s cubic-bezier(.3,.7,.3,1)}
.game__pc i{position:absolute; inset:10%; display:block; border-radius:50%; transition:opacity .22s, transform .22s}
.game__pc i::before{content:""; position:absolute; inset:15%; border-radius:50%; border:2px solid}
.game__pc--me i{background:var(--red); box-shadow:inset 0 -3px 0 #B5161E,0 2px 0 rgba(0,0,0,.55)}
.game__pc--me i::before{border-color:#B5161E}
.game__pc--her i{background:var(--paper); box-shadow:inset 0 -3px 0 var(--paper2),0 2px 0 rgba(0,0,0,.55)}
.game__pc--her i::before{border-color:var(--paper2)}
.game__pc.is-king i::after{content:""; position:absolute; inset:25%; background:var(--white); clip-path:polygon(0 90%,0 24%,26% 50%,50% 8%,74% 50%,100% 24%,100% 90%)}
.game__pc--her.is-king i::after{background:var(--red)}
.game__pc.is-moving{z-index:3}
.game__pc.is-moving i{animation:game-hop .27s ease-out}
.game__pc.is-must i{animation:game-must 1s ease-in-out infinite}
.game__pc.is-sel i{box-shadow:0 0 0 3px var(--white)}
.game__pc.is-taken i{opacity:.4}
.game__pc.is-gone i{opacity:0; transform:scale(.4)}
.game__pc.is-no i{animation:game-no .32s ease-in-out}
@keyframes game-hop{50%{transform:scale(1.14)}}
@keyframes game-must{0%,100%{box-shadow:0 0 0 2px var(--white)} 50%{box-shadow:0 0 0 5px var(--white)}}
@keyframes game-no{20%,60%{transform:translateX(-11%)} 40%,80%{transform:translateX(11%)}}

/* доска перевёрнута и печать «время вышло» */
.game__board.is-flip{animation:game-flip 1.25s cubic-bezier(.5,0,.6,1) both}
.game__board.is-flip .game__pc i{animation:game-fly .9s ease-in both}
@keyframes game-flip{0%{transform:perspective(900px) rotateX(0)} 30%{transform:perspective(900px) rotateX(-24deg) translateY(-14px)} 100%{transform:perspective(900px) rotateX(180deg) translateY(26px)}}
@keyframes game-fly{to{transform:translate(var(--fx),var(--fy)) rotate(420deg); opacity:0}}
.game__stamp{position:absolute; z-index:6; left:50%; top:50%; padding:.28em .5em .2em; border:6px solid var(--red); background:var(--ink); color:var(--red-hi); font:700 clamp(30px,7vw,54px)/1.05 var(--meme); text-transform:uppercase; white-space:nowrap;
  transform:translate(-50%,-50%) rotate(-9deg); animation:game-stamp .34s cubic-bezier(.3,1.5,.5,1) both}
@keyframes game-stamp{from{transform:translate(-50%,-50%) rotate(-9deg) scale(2.6); opacity:0}}

/* ---------- строка под доской ---------- */
.game__bar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:28px; min-height:42px; font:500 12.5px/1.3 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--mute-d)}
.game__turn{color:var(--white)}
.game__turn:empty{display:none}
.game__quit{margin-left:auto; min-height:40px; padding:0 14px; background:transparent; border:1px solid var(--line-d); border-radius:0; color:var(--white); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; transition:border-color .2s, color .2s}
.game__quit:hover{border-color:var(--red-hi); color:var(--red-hi)}
.game__quit:focus-visible{outline:2px solid var(--white); outline-offset:2px}

/* ---------- экран награды и поражения: на месте доски, не окно ---------- */
.game__screen{display:grid; align-content:center; gap:14px; min-height:min(520px,calc(100vw - 48px)); padding:clamp(20px,4vw,36px); background:var(--ink2); border-top:3px solid var(--red)}
.game__screen h3:focus{outline:none}
.game__tag{font:500 12.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--red-hi)}
.game__big{font-size:clamp(25px,3vw,38px); line-height:1.08; overflow-wrap:anywhere}
.game__note{color:var(--mute-d); font-size:16px; line-height:1.45}
.game__coderow{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px}
.game__code{display:flex; align-items:center; flex:1 1 auto; min-height:50px; padding:6px 14px; border:2px dashed var(--red-hi); color:var(--white); font:500 clamp(18px,2.2vw,23px)/1.1 var(--mono); letter-spacing:.06em; user-select:all}
.game__copy{flex:0 1 auto; min-height:50px; padding:0 16px; background:var(--white); border:0; border-radius:0; color:var(--ink); font:600 15px var(--text); cursor:pointer; transition:background .2s, color .2s}
.game__copy:hover{background:var(--red); color:#fff}
.game__copy.is-done{background:var(--red); color:#fff}
.game__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.game .game__acts .btn{justify-content:center; flex:1 1 auto; padding:15px 18px; font-family:var(--text); cursor:pointer}
.game .game__acts .btn--line::after{content:"\2192"}
.game .btn:focus-visible,.game__copy:focus-visible{outline:2px solid var(--white); outline-offset:2px}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .game__rung:nth-child(2){margin-left:12px}
  .game__rung:nth-child(3){margin-left:24px}
  .game__who{grid-template-columns:clamp(150px,18vw,190px) minmax(0,1fr); gap:30px}
  .game__bubble{min-height:150px; padding:12px 14px; font-size:18px}
}
@media (max-width:1000px){
  .game__who{grid-template-columns:150px minmax(0,1fr); gap:26px}
  .game__bubble{font-size:16px}
}
@media (max-width:900px){
  .game__app{grid-template-columns:minmax(0,1fr); grid-template-areas:"side" "main"; row-gap:30px}
  .game__main{width:100%; max-width:520px; margin-inline:auto}
  .game__side{width:100%; max-width:560px; margin-inline:auto; gap:18px}
  .game__rung:nth-child(n){margin-left:0}
  .game__who{grid-template-columns:clamp(116px,36vw,220px) minmax(0,1fr); gap:clamp(24px,5vw,34px)}
  .game__bubble{min-height:122px; font-size:clamp(16px,2.6vw,20px)}
  .game__rung button{min-height:48px; gap:10px; font-size:14.5px}
  .game__screen{min-height:min(520px,calc(100vw - 32px))}
}
@media (max-width:480px){
  .game__bubble{min-height:132px; padding:10px 12px; font-size:16px}
  .game__board{box-shadow:0 0 0 3px var(--white),7px 7px 0 3px var(--red)}
  .game__rung[data-level="3"] .game__prize{font-size:20px}
  .game__rung button{grid-template-columns:22px minmax(0,1fr) auto; padding:7px 10px}
  .game__n{font-size:16px}
  .game__got{font-size:11px}
  .game__rung.is-won .game__got{font-size:12px}
  .game__bar{font-size:11.5px; letter-spacing:.03em}
  .game__screen{padding:18px 16px}
}
/* самые узкие телефоны: доска шире колонки текста, запас клетке на полосу прокрутки и рамку */
@media (max-width:360px){
  .game__main{width:calc(100% + 20px); max-width:none; margin-inline:-10px}
  .game__bubble{min-height:142px}
  .game__bar{padding-inline:10px}
}
@media (max-width:340px){
  .game__bubble{min-height:154px; font-size:15px}
}
/* телефон набок: доска целиком в высоту экрана за вычетом шапки сайта */
@media (max-height:600px) and (orientation:landscape){
  .game__main{max-width:max(272px,calc(100vh - 92px))}
}
@supports not (aspect-ratio:1/1){
  .game__board{height:min(520px,calc(100vw - 48px))}
}
@media (prefers-reduced-motion:reduce){
  .game *,.game *::before,.game *::after{animation:none!important; transition:none!important}
}