/* Сайт «Ритма» (ritmtg.click): одна страница для админов каналов и сммщиков. Облик — как у бота: чёрная сцена, красный цвет, заголовки Unbounded лесенкой.
   Устроен как сайт «Реплики»: плавающая стеклянная шапка, свёрстанный телефон с живым экраном, цветные развороты (красный и светлый) между тёмными разделами.
   Собирает site/build.py (русская и английская страницы из одного шаблона). Шрифты общие с приложением (/app/fonts/). */
@font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(/app/fonts/Unbounded-400-800-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-weight: 400 800; font-display: swap; src: url(/app/fonts/Unbounded-400-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Onest'; font-weight: 400 700; font-display: swap; src: url(/app/fonts/Onest-400-700-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-weight: 400 700; font-display: swap; src: url(/app/fonts/Onest-400-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(/app/fonts/IBMPlexMono-600-latin.woff2) format('woff2'); }
:root { --bg: #070708; --ink: #fff; --mute: rgba(255, 255, 255, .64); --dim: rgba(255, 255, 255, .4); --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .16);
        --hl: #ff5546; --red: #ec2d2b; --card: #121114; --max: 1160px; --disp: 'Unbounded', sans-serif; --sans: 'Onest', -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --gap: 136px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3, p, ul { margin: 0; padding: 0; } li { list-style: none; }
.w { width: min(var(--max), 100% - 48px); margin: 0 auto; position: relative; }
h2 { font: 600 50px/1.05 var(--disp); font-size: clamp(30px, 4.1vw, 50px); letter-spacing: -.035em; }
h1 em, h2 em { font-style: normal; color: var(--hl); }
.mono { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
a:focus-visible { outline: 2px solid var(--hl); outline-offset: 3px; }

/* кнопки: плотная короткая тень под кнопкой, без свечения вокруг */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 14px; font: 600 15.5px/1 var(--sans); letter-spacing: -.012em; white-space: nowrap; transition: transform .16s, background .16s, box-shadow .16s; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-2px); } .btn:active { transform: scale(.97); }
.btn.lg { height: 58px; padding: 0 24px; border-radius: 16px; font-size: 16.5px; } .btn.lg svg { width: 21px; height: 21px; }
.btn.sm { height: 42px; padding: 0 16px 0 13px; border-radius: 999px; font-size: 14.5px; gap: 7px; }
.btn small { margin-left: 4px; padding-left: 13px; font-size: 12.5px; letter-spacing: 0; opacity: .78; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3); line-height: 20px; }
.btn.ghost svg, .btn.dark svg:last-child { width: 16px; height: 16px; opacity: .7; }
.btn.red { background: var(--red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(60, 0, 4, .5), 0 12px 22px -14px rgba(227, 37, 42, .9); }
.btn.red:hover { background: #f53a36; }
.btn.ghost { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line2), inset 0 1px 0 rgba(255, 255, 255, .1); }
.btn.ghost:hover { background: rgba(255, 255, 255, .11); }
.btn.white { background: #fff; color: #c3161c; box-shadow: 0 1px 2px rgba(70, 0, 4, .3), 0 16px 30px -14px rgba(70, 0, 4, .8); } .btn.white small { box-shadow: inset 1px 0 0 rgba(195, 22, 28, .3); }
.btn.dark { background: #111013; color: #fff; box-shadow: 0 14px 26px -14px rgba(17, 16, 19, .7); }

/* появление при прокрутке — только когда работает site.js (он ставит .js на html) */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }
.js .cards .rv:nth-child(2) { transition-delay: .08s; } .js .cards .rv:nth-child(3) { transition-delay: .16s; }

/* шапка: стеклянная капсула, плывёт над страницей; смена языка — круглая кнопка справа от неё */
.nav { position: fixed; left: 0; right: 0; top: 14px; z-index: 50; padding: 0 16px; pointer-events: none; }
.pill { pointer-events: auto; max-width: calc(var(--max) + 8px); margin: 0 auto; height: 58px; padding: 0 8px 0 13px; border-radius: 999px; display: flex; align-items: center; gap: 22px;
        background: rgba(20, 19, 22, .62); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
        box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px -14px rgba(0, 0, 0, .7); }
.brand { display: flex; align-items: center; gap: 11px; font: 600 19px/1 var(--disp); letter-spacing: -.02em; }
/* знак — как значок бота: красное поле, тёмный пузырь, в нём белые «удары»: длинный — короткий — короткий */
.mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(160deg, #ff6a45, #ee2f27 45%, #a80f18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.mark svg { width: 100%; height: 100%; overflow: visible; } .mark .bb { fill: #1d0c0d; } .mark .bt { fill: #fff; } .mark .bt > * { transform-box: fill-box; transform-origin: 50% 50%; }
.links { display: flex; gap: 4px; margin-left: 8px; font: 500 15px var(--sans); color: var(--mute); }
.links a { padding: 7px 13px; border-radius: 999px; transition: color .2s, background .25s; } .links a:hover { color: var(--ink); } .links a.on { color: var(--ink); background: rgba(255, 255, 255, .09); }
.nav .sp { flex: 1; }
.lang { pointer-events: auto; position: fixed; top: 21px; right: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px var(--sans); letter-spacing: .06em;
        background: rgba(20, 19, 22, .62); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
        box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px -14px rgba(0, 0, 0, .7); transition: background .2s; }
.lang:hover { background: rgba(48, 46, 52, .8); }
/* кнопка в шапке прячется, пока на экране такая же кнопка первого экрана (класс .below ставит site.js, когда та ушла) */
.js .pill .btn { transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s, background .16s, box-shadow .16s; }
.js .nav:not(.below) .pill .btn { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.94); pointer-events: none; transition: opacity .25s, transform .3s, visibility 0s .3s; }
@media (max-width: 1320px) { .nav { padding-right: 70px; } }


/* первый экран: слева слова, справа телефон с календарём; красный свет — мягким пятном за телефоном, без краёв */
.hero { position: relative; padding: 148px 0 96px; background: radial-gradient(40% 58% at 77% 50%, rgba(236, 45, 43, .36), rgba(236, 45, 43, .1) 52%, transparent 76%); }
.hero .w { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: center; }
.tag { display: block; font: 500 15px/1.2 var(--sans); color: var(--mute); }
h1 { margin: 18px 0 0 -3px; font: 600 68px/1.02 var(--disp); font-size: clamp(31px, 4.9vw, 68px); letter-spacing: -.045em; }
h1 span { display: block; white-space: nowrap; } h1 span + span { margin-left: .62em; }
.hero .lead { max-width: 520px; margin-top: 26px; font-size: 19.5px; line-height: 1.5; color: var(--mute); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 28px; font: 500 14.5px var(--sans); color: var(--dim); }
.facts li { white-space: nowrap; } .facts li:not(:last-child)::after { content: '·'; margin: 0 10px; }
.stage { position: relative; display: grid; place-items: center; }
.fl { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 12px; border-radius: 18px; background: #1f1d22;
      box-shadow: inset 0 0 0 1px var(--line2), inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 36px -18px rgba(0, 0, 0, .9); }
.fl b { display: block; font: 600 14.5px/1.2 var(--sans); } .fl span { display: block; margin-top: 3px; font: 500 12.5px/1.2 var(--sans); color: var(--mute); white-space: nowrap; }
.fl i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--red); } .fl i svg { width: 20px; height: 11px; }
.fl.a { left: -178px; top: 344px; transform: rotate(-4deg); }

/* телефон: рамка и экран свёрстаны, внутри — экран приложения «Ритма» */
.ph { position: relative; flex: none; width: 318px; padding: 10px; border-radius: 54px; background: #0c0c0e;
      box-shadow: inset 0 0 0 1.5px #45434a, inset 0 0 0 4px #1b1a1e, 0 0 0 1px #000, 0 46px 70px -34px rgba(0, 0, 0, .95), 0 26px 60px -30px rgba(236, 45, 43, .55); }
.ph > i { position: absolute; width: 3px; background: #2c2b30; } .ph .k1 { left: -3px; top: 118px; height: 26px; border-radius: 2px 0 0 2px; } .ph .k2 { left: -3px; top: 164px; height: 48px; border-radius: 2px 0 0 2px; } .ph .k3 { right: -3px; top: 186px; height: 74px; border-radius: 0 2px 2px 0; }
.scr { position: relative; height: 640px; border-radius: 44px; overflow: hidden; background: #0a0a0b; padding: 0 13px; font-family: var(--sans); color: #fff; text-align: left; }
.isl { position: absolute; left: 50%; top: 10px; width: 90px; height: 26px; margin-left: -45px; border-radius: 99px; background: #000; z-index: 3; }
.st { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 2px 13px 0 17px; font: 600 14px var(--sans); } .st svg { width: 54px; height: 12px; }
.chs { display: flex; gap: 6px; margin: 4px -13px 0 0; overflow: hidden; }
.chs span { flex: none; height: 32px; padding: 0 11px 0 5px; border-radius: 16px; display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--sans); color: var(--mute); background: #17161a; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.chs i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--disp); font-style: normal; color: #fff; background: var(--red); } .chs i.g { background: #4a4750; }
.chs .on { background: #fff; color: #0b0b0d; box-shadow: none; } .chs em { font: 600 11px var(--mono); font-style: normal; color: var(--red); }
.hd { display: flex; align-items: center; justify-content: space-between; height: 52px; } .hd.one { height: 58px; }
.hd b { display: inline-flex; align-items: center; gap: 8px; font: 600 21px/1 var(--disp); letter-spacing: -.03em; } .hd b svg { width: 11px; height: 8px; color: var(--mute); }
.hd i { position: relative; width: 34px; height: 30px; border-radius: 11px; background: #17161a; box-shadow: inset 0 0 0 1px var(--line); }
.hd i::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff; box-shadow: -6px 0 #fff, 6px 0 #fff; }
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.strip span { height: 58px; border-radius: 14px; padding-top: 9px; text-align: center; background: #17161a; box-shadow: inset 0 0 0 1px var(--line); }
.strip small { display: block; font: 600 9px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); } .strip b { display: block; margin-top: 4px; font: 600 15px/1 var(--disp); letter-spacing: -.03em; }
.strip u { display: block; width: 4px; height: 4px; margin: 6px auto 0; border-radius: 50%; background: var(--hl); } .strip u.z { background: rgba(255, 255, 255, .22); }
.strip .on { background: #fff; color: #0b0b0d; box-shadow: none; } .strip .on small { color: rgba(0, 0, 0, .5); }
.scr .day { margin: 13px 2px 9px; font: 500 12px/1.3 var(--sans); color: var(--mute); } .scr .day em { font-style: normal; color: var(--hl); }
.lst { position: relative; }
.po { position: relative; display: grid; grid-template-columns: 42px 1fr 14px; align-items: center; gap: 9px; height: 52px; margin-bottom: 6px; padding-right: 11px; border-radius: 15px; background: #17161a; box-shadow: inset 0 0 0 1px var(--line); transition: rotate .22s, scale .22s, background .22s, box-shadow .22s; }
.po > .mono { font-size: 12.5px; text-align: right; } .po > div { min-width: 0; }
.po p { font: 500 12.8px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .po small { display: block; margin-top: 3px; font: 500 10.8px var(--sans); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grip { width: 13px; height: 16px; opacity: .3; background: radial-gradient(circle, #fff 1.3px, transparent 1.6px) 0 0 / 6.5px 5.4px; }
.po.lift { z-index: 2; rotate: -2deg; scale: 1.03; background: #26242b; box-shadow: 0 0 0 1.5px var(--hl), 0 20px 30px -10px rgba(0, 0, 0, .9); }
.po.lift::after { content: ''; position: absolute; right: 34px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.fr { display: flex; align-items: center; gap: 7px; height: 28px; margin-bottom: 6px; padding-left: 4px; transition: opacity .25s; } .fr.mv { opacity: 0; }
.fr span { font: 600 10.5px var(--sans); color: var(--dim); } .fr b { height: 26px; padding: 0 8px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 11.5px; color: #ff7b6c; box-shadow: inset 0 0 0 1.5px rgba(255, 85, 70, .55); }
.tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; padding: 0 18px 12px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; background: #0d0d0f; box-shadow: inset 0 1px 0 var(--line); }
.tabs span { display: grid; justify-items: center; gap: 4px; font: 600 10px var(--sans); color: var(--dim); } .tabs svg { width: 21px; height: 21px; } .tabs .on { color: #fff; } .tabs .on svg { color: var(--hl); }
.sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sum div { border-radius: 15px; padding: 12px 11px 11px; background: #17161a; box-shadow: inset 0 0 0 1px var(--line); } .sum b { display: block; font: 600 21px/1 var(--disp); letter-spacing: -.04em; } .sum .bad b { color: var(--hl); }
.sum span { display: block; margin-top: 6px; font: 500 10.5px/1.2 var(--sans); color: var(--mute); }
.rows { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 11px; height: 72px; border-top: 1px solid var(--line); }
.row .av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--disp); font-style: normal; background: var(--red); }
.row .a2 { background: #4a4750; } .row .a3 { background: #f1ede6; color: #0b0b0d; } .row .a4 { background: #2b2a30; box-shadow: inset 0 0 0 1.5px var(--hl); color: var(--hl); } .row .a5 { background: #6d2326; }
.row p { flex: 1; min-width: 0; font: 600 13px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row small { display: block; margin-top: 3px; font: 500 10.8px var(--sans); color: var(--mute); }
.b7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 7px; max-width: 150px; } .b7 u { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); } .b7 .h { background: rgba(255, 255, 255, .42); } .b7 .z { background: var(--hl); }
.row em { font-style: normal; font-size: 13px; color: var(--hl); } .row em.ok { color: var(--dim); }

/* развороты: большие цветные панели со скруглением между тёмными разделами */
.spread { position: relative; overflow: hidden; margin: 0 16px; border-radius: 40px; }
.spread.red { background: linear-gradient(125deg, #c0121b 0%, #ee2f2c 52%, #ff6540 100%); }
.spread.red::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 18% 0%, rgba(255, 255, 255, .2), transparent 60%); }
.spread.light { background: #f1ede6; color: #0d0c0e; }

/* слова лесенкой на красном */
.stmt { padding: 112px 0 104px; }
.stmt .big { font: 700 132px/.98 var(--disp); font-size: clamp(30px, 7.4vw, 110px); letter-spacing: -.05em; }
.stmt .l { display: block; width: max-content; max-width: none; will-change: transform; transform: translate3d(var(--dx), 0, 0); }
.stmt .l2 { margin-left: 6%; color: rgba(255, 255, 255, .64); } .stmt .l3 { margin-left: auto; color: #33060a; }
.stmt .bub { position: absolute; right: 5%; top: 6px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 15px 12px 18px; border-radius: 20px 20px 6px 20px; background: #fff; color: #0d0c0e; font: 600 17px/1 var(--sans); transform: rotate(4deg); box-shadow: 0 24px 40px -20px rgba(70, 0, 4, .7); }
.stmt .bub small { font-size: 13px; color: var(--red); } .stmt .bub svg { width: 19px; height: 11px; color: var(--red); }
.stmt .sub { position: relative; max-width: 30em; margin-top: 44px; font-size: 19px; color: rgba(255, 255, 255, .9); }

/* что умеет */
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; gap: 0 48px; margin-bottom: 50px; }
.head p { padding-top: 9px; font-size: 17.5px; color: var(--mute); }
.feat { padding: var(--gap) 0 0; }
.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.fc { display: flex; flex-direction: column; min-height: 350px; padding: 30px 30px 30px; border-radius: 30px; overflow: hidden; background: linear-gradient(160deg, #19181c, #100f12 60%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .1); }
.fc h3 { margin-bottom: 9px; font: 600 25px/1.1 var(--disp); letter-spacing: -.03em; }
.fc > p, .fc > div > p { max-width: 400px; font-size: 16.5px; line-height: 1.45; color: var(--mute); }
.fc .art { margin-top: auto; padding-top: 28px; }
.fc.a { grid-column: span 12; min-height: 0; }
.fc.c { grid-column: span 4; } .fc.d { grid-column: span 4; margin-top: 40px; } .fc.e { grid-column: span 4; }
.fc.f { grid-column: span 12; min-height: 0; flex-direction: row; align-items: center; gap: 30px; margin-top: 4px; } .fc.f .art { margin: 0 0 0 auto; padding: 0; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.12fr); align-items: center; gap: 16px; }
.flow .col { display: grid; gap: 8px; min-width: 0; } .flow small, .key small { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.msg { justify-self: start; max-width: 100%; padding: 10px 14px; border-radius: 16px 16px 16px 5px; background: #23222a; font: 500 14px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.msg:nth-of-type(2) { margin-left: 14px; } .msg:nth-of-type(3) { margin-left: 4px; } .msg:nth-of-type(4) { margin-left: 20px; }
.flow .arr { color: var(--hl); } .flow .arr svg { width: 46px; height: 16px; }
.slot { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 13px 0 5px; border-radius: 13px; background: #1b1a1f; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px var(--sans); min-width: 0; }
.slot b { flex: none; height: 30px; padding: 0 9px; border-radius: 9px; display: grid; place-items: center; font-size: 13.5px; background: var(--red); } .slot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgp { border-radius: 18px 18px 6px 6px; padding: 5px 5px 11px; background: #23222a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.tgp p { margin: 9px 9px 0; font: 500 13.5px/1.35 var(--sans); } .tgp.txt { padding: 11px 5px 12px; } .tgp.txt p { margin-top: 0; } .tgp.second { margin-top: 12px; }
.covs { display: flex; gap: 5px; border-radius: 14px; overflow: hidden; }
.cv { position: relative; flex: none; width: 74%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; padding: 13px 14px; display: flex; flex-direction: column; }
.cv b { font: 700 19px/1.02 var(--disp); letter-spacing: -.04em; } .cv small { margin-top: auto; font: 600 11.5px var(--sans); }
.cv.one { background: #f1ede6; color: #0d0c0e; } .cv.one small { color: var(--red); }
.cv.two { background: #141317; box-shadow: inset 0 0 0 1px var(--line); } .cv.two svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; } .cv.two b { position: relative; font-size: 26px; } .cv.two small { position: relative; margin-top: 3px; font: 500 11.5px var(--sans); color: var(--mute); }
.cv.three { background: var(--red); justify-content: flex-end; }
.dots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); } .dots .on { width: 14px; border-radius: 3px; background: #fff; }
.kb { display: grid; gap: 5px; margin-top: 5px; } .kb.two { grid-template-columns: 1fr 1fr; }
.kb span { position: relative; display: grid; place-items: center; height: 40px; border-radius: 6px 6px 14px 14px; font: 600 13.5px var(--sans); background: #2e2d36; } .kb.two span:first-child { border-radius: 6px 6px 6px 14px; } .kb.two span:last-child { border-radius: 6px 6px 14px 6px; }
.kb svg { position: absolute; right: 7px; top: 7px; width: 10px; height: 10px; opacity: .5; }
.tpl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; padding: 13px 16px; border-radius: 16px; background: rgba(255, 85, 70, .1); box-shadow: inset 0 0 0 1px rgba(255, 85, 70, .32); } .tpl b { font: 600 14.5px var(--sans); } .tpl span { font: 500 13.5px var(--sans); color: var(--mute); }
.cv.shot { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; padding: 16px 18px; } .cv.shot b { font-size: 34px; }
.cv.shot em { position: absolute; right: 14px; bottom: 12px; font: 600 14px var(--sans); font-style: normal; color: rgba(255, 255, 255, .86); }
.cv.shot u { position: absolute; right: 8px; bottom: 6px; width: 118px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); background: radial-gradient(circle at 0 0, #fff 3px, transparent 3.5px) -1.5px -1.5px / 100% 100% no-repeat; }
.team { display: flex; align-items: center; gap: 22px; }
.faces { display: flex; } .faces span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 600 15px var(--disp); letter-spacing: -.02em; background: #2a2930; box-shadow: 0 0 0 4px #141316; }
.faces span + span { margin-left: -9px; background: #f1ede6; color: #0d0c0e; } .faces .plus { background: var(--red); color: #fff; font: 600 26px var(--sans); }
.key { display: grid; gap: 7px; } .key b { height: 42px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; font-size: 13.5px; background: #1b1a1f; box-shadow: inset 0 0 0 1px var(--line2); white-space: nowrap; }

/* календарь: светлый разворот, телефон с экраном «Каналы» */
.app { margin-top: var(--gap); padding: 104px 0; }
.app .w { display: grid; grid-template-columns: 430px minmax(0, 1fr); align-items: center; gap: 50px; }
.app .shot { display: grid; place-items: center; } .app .ph { transform: rotate(-3deg); box-shadow: inset 0 0 0 1.5px #45434a, inset 0 0 0 4px #1b1a1e, 0 0 0 1px #000, 0 50px 70px -36px rgba(40, 20, 10, .75); }
.app h2 em { color: var(--red); }
.app .lead { margin: 18px 0 30px; font-size: 19.5px; color: #55504c; }
.app li { display: flex; gap: 15px; margin-bottom: 18px; font-size: 17.5px; line-height: 1.5; color: #55504c; } .app li b { color: #0d0c0e; font-weight: 600; }
.app li i { flex: none; width: 32px; height: 32px; margin-top: -2px; border-radius: 10px; display: grid; place-items: center; font: 600 13px var(--disp); font-style: normal; color: #fff; background: #0d0c0e; }
.app .btn { margin-top: 16px; }

/* сравнение */
.cmp { padding: var(--gap) 0 0; }
.tbl { position: relative; border-radius: 30px; padding: 6px 30px; background: linear-gradient(160deg, #19181c, #100f12 60%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .1); }
.tbl::before { content: ''; position: absolute; left: calc(30px + (100% - 60px - 40px) * .2985 + 6px); width: calc((100% - 60px - 40px) * .403 + 28px); top: -12px; bottom: -12px; border-radius: 24px; background: linear-gradient(180deg, rgba(236, 45, 43, .2), rgba(236, 45, 43, .07)); box-shadow: inset 0 0 0 1.5px rgba(255, 85, 70, .45); }
.tr { position: relative; display: grid; grid-template-columns: 1fr 1.35fr 1fr; column-gap: 20px; align-items: center; min-height: 64px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16.5px; }
.tr.th { border-top: 0; min-height: 64px; font: 600 12.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); } .tr.th .y { font: 600 19px var(--disp); text-transform: none; letter-spacing: -.02em; color: #fff; }
.tr b { font-weight: 700; } .tr .y { display: flex; align-items: center; gap: 11px; padding-left: 20px; } .tr .n { color: var(--mute); } .tr.th .n { color: var(--dim); }
.tr .y svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--red); }

/* вопросы: слева шапка раздела и канал, справа окно чата с ботом (его вид — blocks.css) */
.faq { padding: var(--gap) 0 0; } .faq .w { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 70px; align-items: center; }
.side p { margin-top: 16px; font-size: 17px; color: var(--mute); }
.chan { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 12px 16px 12px 12px; border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line2); transition: background .2s, transform .3s; } .chan:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.chan img { flex: none; width: 52px; height: 52px; border-radius: 50%; } .chan p { flex: 1; min-width: 0; margin: 0; } .chan b { display: block; font: 600 17px/1.2 var(--disp); letter-spacing: -.025em; color: #fff; } .side .chan p span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--mute); }
.chan i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--hl); box-shadow: inset 0 0 0 1.5px var(--line2); } .chan i svg { width: 12px; height: 12px; }

/* финал: красный разворот, слова слева, справа три выхода лесенкой — первый уже вышел */
.fin { margin-top: var(--gap); padding: 96px 0 100px; }
.fin .w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: center; gap: 56px; }
.fin h2 { font-size: clamp(30px, 4.7vw, 62px); } .fin p { position: relative; margin-top: 20px; font-size: 19px; color: rgba(255, 255, 255, .9); } .fin .btn { margin-top: 34px; }
.tix { display: grid; gap: 10px; }
.tk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 66px; padding: 0 20px 0 18px; border-radius: 20px; background: rgba(52, 4, 8, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.tk b { font-size: 21px; } .tk span { font: 500 15px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tk em { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .08em; opacity: .7; } .tk em svg { width: 18px; height: 10px; }
.tk:nth-child(2) { margin-left: 30px; } .tk:nth-child(3) { margin-left: 60px; opacity: .78; }
.tk.done { margin-right: 30px; background: #fff; color: #0d0c0e; transform: rotate(-2.5deg); box-shadow: 0 26px 40px -22px rgba(70, 0, 4, .75); } .tk.done em { color: var(--red); opacity: 1; }

/* подвал: слоган, указатель разделов и ссылок, нижняя строка и огромное слово во всю ширину (целиком: автор просил не обрезать) */
footer { position: relative; overflow: hidden; }   /* слово выезжает снизу — край подвала прячет его, пока не доехало */
.f-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 60px; padding: 110px 0 70px; }
.f-say { max-width: 11em; font: 600 40px/1.08 var(--disp); font-size: clamp(27px, 3.3vw, 42px); letter-spacing: -.04em; } .f-say span { display: block; color: var(--hl); }
.f-idx { display: grid; grid-template-columns: 250px 250px; gap: 44px; }
.f-lb { display: block; padding-bottom: 13px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--dim); border-bottom: 1px solid var(--line2); }
.f-idx a { display: flex; align-items: center; gap: 14px; height: 50px; font: 500 16.5px var(--sans); color: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line); transition: color .2s; }
.f-idx a i { flex: none; width: 34px; font: 600 11px var(--mono); font-style: normal; letter-spacing: .04em; color: var(--dim); } .f-idx a b { margin-left: auto; font-weight: 400; color: var(--dim); transition: transform .25s, color .2s; }
.f-idx a:hover { color: #fff; } .f-idx a:hover b { color: var(--hl); transform: translateX(3px); }
.f-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--dim); } .f-bottom .mono { font-size: 12.5px; letter-spacing: .02em; }
.f-up { color: var(--mute); transition: color .2s; } .f-up:hover { color: #fff; } .f-up b { font-weight: 400; color: var(--hl); }
.f-giant { display: flex; align-items: center; justify-content: center; margin: 14px 0 0; padding-bottom: .1em; font: 700 21vw/1.02 var(--disp); letter-spacing: -.06em; white-space: nowrap; user-select: none; }
.f-giant i { display: block; flex: none; height: .15em; border-radius: .075em; background: var(--hl); margin: .1em 0 0 .09em; } .f-giant i.l { width: .46em; margin-left: .2em; } .f-giant i.s { width: .15em; }
.wm { display: inline-flex; align-items: center; font: 600 22px/1 var(--disp); letter-spacing: -.02em; color: #fff; }
.wm i { display: block; height: .16em; border-radius: .08em; background: var(--hl); margin: .12em 0 0 .1em; } .wm i.l { width: .5em; margin-left: .22em; } .wm i.s { width: .16em; }

/* ---------- движение, тени и переходы (проход сессии «Реплика», 10.10.2026) ----------
   Всё здесь висит на классе .mo — его ставит site.js, когда движение разрешено (нет ?still и человек не просил его убавить).
   Без .mo страница остаётся такой же целой и неподвижной: каждая анимация идёт ОТ начального вида К обычному, поэтому
   обычный вид — это просто отсутствие анимации. Запуск понятный: при входе блока в экран и по наведению, без бесконечных
   циклов по скрытому таймеру (единственный цикл — показ переноса в телефоне первого экрана, он был и раньше). */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.3, 1.5, .5, 1); interpolate-size: allow-keywords; }

/* числа, которые site.js меняет при прокрутке и за курсором. Объявлены с inherits: false: правка такого числа пересчитывает
   стиль одного элемента, а не всего, что у него внутри, — на телефоне именно этот пересчёт съедал кадры при прокрутке */
@property --p { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --f { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --hp { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --fp { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --dx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --py { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fa { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* заставка при заходе, как на сайте «Реплики»: на тёмном поле знак — пузырь выскакивает, удары встают по одному
   (длинный — короткий — короткий), затем знак растёт и тает, а под ним собирается первый экран. Классы .intro и .intro-out
   ставит site.js на секунду с небольшим; без скрипта, с ?still и при «меньше движения» заставки нет */
#intro { display: none; }
.intro #intro, .intro-out #intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 99; background: var(--bg); pointer-events: none; transition: opacity .55s cubic-bezier(.4, 0, .2, 1); }
.intro-out #intro { opacity: 0; }
#intro .mark { width: 120px; height: 120px; border-radius: 0; background: none; box-shadow: none; transition: transform .6s cubic-bezier(.5, 0, .2, 1), opacity .45s; }
#intro .bb { fill: var(--red); transform-box: fill-box; transform-origin: 30% 100%; animation: in-bb .5s cubic-bezier(.2, 1.1, .3, 1.25) .05s both; }
#intro .bt rect { transform-origin: 0 50%; animation: in-dash .34s var(--ease) .4s both; }
#intro .bt circle { animation: in-dot .32s var(--spring) .68s both; } #intro .bt circle + circle { animation-delay: .84s; }
.intro-out #intro .mark { transform: scale(2.2); opacity: 0; }
@keyframes in-bb { from { opacity: 0; transform: scale(.4); } }
@keyframes in-dash { from { transform: scaleX(0); } }
@keyframes in-dot { from { transform: scale(0); } }

/* первый экран: слова, кнопки и телефон встают по очереди — сразу после заставки (пока она на экране, сцена ждёт) */
@keyframes up { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes ph-in { from { opacity: 0; transform: perspective(1300px) translate3d(0, 54px, 0) rotateX(7deg); } }
@keyframes pop-a { from { opacity: 0; transform: translate3d(-18px, 16px, 0) rotate(-10deg) scale(.82); } }
.mo:not(.intro) .hero .tag, .mo:not(.intro) .hero h1 span, .mo:not(.intro) .hero .lead, .mo:not(.intro) .hero .cta, .mo:not(.intro) .hero .facts { animation: up .85s var(--ease) backwards; }
.mo .hero h1 span:nth-child(1) { animation-delay: .07s; } .mo .hero h1 span:nth-child(2) { animation-delay: .16s; }
.mo .hero .lead { animation-delay: .27s; } .mo .hero .cta { animation-delay: .36s; } .mo .hero .facts { animation-delay: .46s; }
.mo:not(.intro) .hero .ph { animation: ph-in 1.1s var(--ease) .12s backwards; }
.mo:not(.intro) .fl.a { animation: pop-a .8s var(--spring) .75s backwards; }
/* с мышью: телефон чуть наклоняется за курсором (--rx, --ry) и вместе с плашкой едет при прокрутке (--py, --fa); на телефоне этого нет */
@media (hover: hover) and (pointer: fine) {
  .mo .hero .ph { transform: perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--py), 0); transition: transform .45s var(--ease); will-change: transform; }
  .mo .fl.a { transform: translate3d(0, var(--fa), 0) rotate(-4deg); transition: transform .35s var(--ease); will-change: transform; }
}
/* знак в шапке под курсором: плитка коротко «нажимается», удары стучат по очереди, пока курсор на знаке */
@keyframes mk-tap { 30% { transform: scale(.88) rotate(-6deg); } }
@keyframes mk-beat { 0%, 46%, 100% { transform: none; } 16% { transform: translate3d(0, -9px, 0) scaleY(1.3); } 30% { transform: translate3d(0, 1.5px, 0) scaleY(.86); } }
@media (hover: hover) {
  .mo .brand:hover .mark { animation: mk-tap .5s var(--spring); }
  .mo .brand:hover .bt > * { animation: mk-beat 1.1s var(--ease) infinite; } .mo .brand:hover .bt > :nth-child(2) { animation-delay: .17s; } .mo .brand:hover .bt > :nth-child(3) { animation-delay: .31s; }
}
/* тени телефона: пятно касания под корпусом и слабый блик по стеклу экрана */
.stage::after { content: ''; position: absolute; left: 50%; bottom: -30px; width: 290px; height: 44px; margin-left: -145px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .3) 55%, transparent); }
.scr::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 22%, transparent 34%); }

/* шапка: при прокрутке плотнее; под активным разделом ездит одна подсветка (--x, --w ставит site.js) */
.pill { transition: background .35s, box-shadow .35s; }
.nav.sc .pill { background: rgba(14, 13, 16, .84); box-shadow: inset 0 0 0 1px var(--line2), inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -16px rgba(0, 0, 0, .9); }
.mo .links { position: relative; } .mo .links a { position: relative; z-index: 1; } .mo .links a.on { background: none; }
.mo .links::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0px); border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
                     transform: translate3d(var(--x, 0px), 0, 0); opacity: var(--o, 0); transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; }

/* кнопки: быстрое нажатие */
.btn:active { transition-duration: .06s; }
.btn.ghost:active { background: rgba(255, 255, 255, .16); }

/* развороты наезжают: панель подъезжает снизу и подрастает по мере входа в экран (--p от 0 до 1 ставит site.js) */
.mo .spread { transform: translate3d(0, calc((1 - var(--p)) * 54px), 0) scale(calc(.935 + .065 * var(--p))); transform-origin: 50% 100%; will-change: transform; }
.mo .stmt .l { opacity: calc(.2 + .8 * var(--f)); }   /* строки наливаются по мере прокрутки: --f от 0 до 1 ставит site.js каждой строке по очереди */
.mo .stmt .bub { opacity: 0; transform: translate3d(0, 26px, 0) rotate(-8deg) scale(.6); transition: transform .8s var(--spring) .45s, opacity .3s ease .45s; }
.mo .stmt.seen .bub { opacity: 1; transform: rotate(4deg); }
.mo .stmt .sub { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .8s ease .4s, transform .8s var(--ease) .4s; } .mo .stmt.seen .sub { opacity: 1; transform: none; }
.mo .app .ph { transform: rotate(calc(-9deg + 6deg * var(--p))) translate3d(0, calc((1 - var(--p)) * 40px), 0); }
.app .ph { box-shadow: inset 0 0 0 1.5px #45434a, inset 0 0 0 4px #1b1a1e, 0 0 0 1px #000, 0 2px 3px rgba(40, 20, 10, .3), 0 28px 36px -22px rgba(40, 20, 10, .5), 0 70px 90px -40px rgba(40, 20, 10, .7); }
.mo .fin h2, .mo .fin p, .mo .fin .btn { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s ease, transform .9s var(--ease); }
.mo .fin.seen h2, .mo .fin.seen p, .mo .fin.seen .btn { opacity: 1; transform: none; } .mo .fin.seen p { transition-delay: .1s; } .mo .fin.seen .btn { transition-delay: .2s; }

/* карточки: глубина; при появлении чуть подрастают. По наведению не поднимаются и не светятся — они не нажимаются */
.fc { position: relative; box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 44px -34px #000; }
.mo .fc.rv { transform: translate3d(0, 28px, 0) scale(.985); } .mo .fc.rv.in { transform: none; }
.mo .rv.set { transition-delay: 0s !important; }

/* жизнь внутри карточек: класс .play ставится при входе карточки в экран и заново — по наведению */
@keyframes msg-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.95); } }
@keyframes slot-in { from { opacity: 0; transform: translate3d(-58px, 0, 0) scale(.9); } }
@keyframes arr-in { from { opacity: 0; transform: translate3d(-12px, 0, 0); } 60% { opacity: 1; transform: translate3d(5px, 0, 0); } }
.play .flow .msg { animation: msg-in .5s var(--ease) backwards; } .play .flow .msg:nth-of-type(2) { animation-delay: .12s; } .play .flow .msg:nth-of-type(3) { animation-delay: .24s; } .play .flow .msg:nth-of-type(4) { animation-delay: .36s; }
.play .flow .arr svg { animation: arr-in .7s var(--ease) .54s backwards; }
.play .flow .slot { animation: slot-in .65s var(--spring) backwards; } .play .flow .slot:nth-of-type(1) { animation-delay: .74s; } .play .flow .slot:nth-of-type(2) { animation-delay: .9s; } .play .flow .slot:nth-of-type(3) { animation-delay: 1.06s; } .play .flow .slot:nth-of-type(4) { animation-delay: 1.22s; }
@keyframes wd-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.mo .covs { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; } .mo .covs::-webkit-scrollbar { display: none; }
.mo .covs .cv { scroll-snap-align: start; } .mo .covs .cv:last-child { scroll-snap-align: end; } .mo .covs.drag { scroll-snap-type: none; cursor: grabbing; } .mo .covs.drag .cv { pointer-events: none; }
.mo .dots i { transition: width .3s var(--ease), background .3s, border-radius .3s; }
@keyframes tap { 40% { transform: scale(.965); background: rgba(255, 85, 70, .22); } }
@keyframes ring { 0% { box-shadow: inset 0 0 0 0 rgba(255, 85, 70, 0); } 35% { box-shadow: inset 0 0 0 2px rgba(255, 85, 70, 1); background: #3a2a30; } 100% { box-shadow: inset 0 0 0 0 rgba(255, 85, 70, 0); } }
.play .tpl { animation: tap .55s ease .45s; }
.play .kb.two span:nth-child(1) { animation: ring 1.1s ease .8s; } .play .kb.two span:nth-child(2) { animation: ring 1.1s ease .95s; }
@keyframes wmk { 0% { opacity: 0; transform: translate3d(-120px, -64px, 0) scale(1.12); } 25% { opacity: 1; transform: translate3d(-120px, -64px, 0) scale(1.12); } }
.play .cv.shot em, .play .cv.shot u { animation: wmk 1.5s var(--ease) .4s backwards; }
@keyframes face { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.5); } }
@keyframes key-in { from { opacity: 0; clip-path: inset(0 100% 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
.play .faces span { animation: face .55s var(--spring) backwards; } .play .faces span:nth-child(2) { animation-delay: .12s; } .play .faces span:nth-child(3) { animation-delay: .26s; }
.play .key b { animation: key-in .8s var(--ease) .45s backwards; }

/* сравнение: выделенная колонка вырастает сверху, галочки ставятся по очереди */
.mo .tbl::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1s var(--ease) .15s; } .mo .tbl.seen::before { transform: none; }
.mo .tbl .y svg { transform: scale(0) rotate(-40deg); transition: transform .55s var(--spring); } .mo .tbl.seen .y svg { transform: none; }
.mo .tbl .tr:nth-child(2) .y svg { transition-delay: .3s; } .mo .tbl .tr:nth-child(3) .y svg { transition-delay: .38s; } .mo .tbl .tr:nth-child(4) .y svg { transition-delay: .46s; } .mo .tbl .tr:nth-child(5) .y svg { transition-delay: .54s; }
.mo .tbl .tr:nth-child(6) .y svg { transition-delay: .62s; } .mo .tbl .tr:nth-child(7) .y svg { transition-delay: .7s; } .mo .tbl .tr:nth-child(8) .y svg { transition-delay: .78s; } .mo .tbl .tr:nth-child(n + 9) .y svg { transition-delay: .86s; }

/* ---------- второй проход движения (10.10.2026): шапки разделов, шаги и чат, билеты финала, подвал ---------- */
/* шапка раздела — одна сцена на всю страницу: заголовок поднимается из-под маски, абзац проявляется.
   Сам блок .head / .side / колонка светлого разворота больше не уезжает целиком — двигаются его части */
.mo .head.rv, .mo .side.rv, .mo .app .w > .rv:last-child { opacity: 1; transform: none; }
.mo .head h2, .mo .side h2, .mo .app h2 { clip-path: inset(0 0 100% 0); transform: translate3d(0, .42em, 0); transition: clip-path .9s var(--ease) .08s, transform .9s var(--ease) .08s; }
.mo .head > p, .mo .side > p, .mo .side .chan, .mo .app .lead, .mo .app li, .mo .app .btn { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s ease .24s, transform .8s var(--ease) .24s; }
.mo .in > p, .mo .in .chan, .mo .in .lead, .mo .in li, .mo .in > .btn { opacity: 1; transform: none; }
.mo .in h2 { clip-path: inset(-.2em -.1em -.25em -.1em); transform: none; }
.mo .app .in li:nth-child(1) { transition-delay: .32s; } .mo .app .in li:nth-child(2) { transition-delay: .4s; } .mo .app .in li:nth-child(3) { transition-delay: .48s; } .mo .app .in > .btn { transition-delay: .58s; } .mo .side.in .chan { transition-delay: .36s; }
.mo .app .set .btn, .mo .side.set .chan { transition: transform .16s, background .2s, box-shadow .16s; transition-delay: 0s; }
/* кнопки: значок откликается на наведение — самолётик взлетает, стрелка показывает вниз */
.btn svg { transition: transform .4s var(--spring); }
@media (hover: hover) { .mo .btn.red:hover svg:first-child, .mo .btn.white:hover svg:first-child, .mo .btn.dark:hover svg:first-child { transform: translate3d(2px, -2px, 0) rotate(-8deg); } .mo .btn.ghost:hover svg:last-child { transform: translate3d(0, 3px, 0); } }
/* первый экран уходит под красный разворот: слова и телефон чуть уменьшаются и гаснут (--hp ставит site.js; на телефоне — нет) */
@media (hover: hover) and (pointer: fine) { .mo .hero .w { transform: scale(calc(1 - .045 * var(--hp))); opacity: calc(1 - .55 * var(--hp)); transform-origin: 50% 70%; will-change: transform, opacity; } }
/* шаги связаны линией: она дорисовывается от цифры к следующей; когда сцена в чате доходит до шага — цифра отзывается */
.steps li { position: relative; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 25px; top: 60px; bottom: -58px; width: 19px; border: solid rgba(255, 85, 70, .4); border-width: 0 0 1.5px 1.5px; border-radius: 0 0 0 14px; pointer-events: none; }
.mo .steps li:not(:last-child)::after { clip-path: inset(0 100% 100% 0); transition: clip-path .9s var(--ease) .5s; } .mo .steps li.in:not(:last-child)::after { clip-path: inset(0 0 0 0); } .mo .steps li.in:nth-child(2)::after { transition-delay: .7s; }
@keyframes step-hit { 35% { transform: scale(1.16) rotate(-4deg); box-shadow: inset 0 0 0 1.5px rgba(255, 85, 70, 1), inset 0 0 0 30px rgba(255, 85, 70, .22); } }
.scene .steps li:nth-child(2) i { animation: step-hit .8s var(--ease) .25s; } .scene .steps li:nth-child(3) i { animation: step-hit .8s var(--ease) 1.1s; }
/* чат: перед ответом бота — три точки «печатает» (элемент ставит site.js на место ответа) */
.chat-body { position: relative; }
.typing { position: absolute; display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 15px; border-radius: 16px 16px 16px 5px; background: #1c1b20; pointer-events: none; opacity: 0; animation: typing 1.02s ease forwards; }
.typing u { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .7); animation: vd .7s ease infinite; } .typing u:nth-child(2) { animation-delay: .12s; } .typing u:nth-child(3) { animation-delay: .24s; }
@keyframes typing { 0%, 62% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.9); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.96); } }
@keyframes vd { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translate3d(0, -4px, 0); opacity: 1; } }
/* «посты не теряются»: знаки встают по одному */
.mo .quad .sg { opacity: 0; transform: scale(.5) rotate(-12deg); transition: transform .7s var(--spring) .2s, opacity .3s ease .2s; } .mo .quad .in .sg { opacity: 1; transform: none; }
.mo .quad .rv:nth-child(2) .sg { transition-delay: .29s; } .mo .quad .rv:nth-child(3) .sg { transition-delay: .38s; } .mo .quad .rv:nth-child(4) .sg { transition-delay: .47s; }
/* таблица: строка под курсором подсвечивается */
@media (hover: hover) { .tr:not(.th) { transition: background .2s, box-shadow .2s; border-radius: 10px; } .tr:not(.th):hover { background: rgba(255, 255, 255, .04); box-shadow: -18px 0 0 rgba(255, 255, 255, .04), 18px 0 0 rgba(255, 255, 255, .04); } }
/* финал: билеты выезжают по одному, затем второй «выходит» (класс .done ему ставит site.js один раз) */
.tk { transition: background .5s, color .5s, box-shadow .5s, margin .7s var(--ease), transform .7s var(--spring), opacity .5s; }
.mo .fin .tk { opacity: 0; transform: translate3d(46px, 0, 0); } .mo .fin.seen .tk { opacity: 1; transform: none; } .mo .fin.seen .tk.done { transform: rotate(-2.5deg); } .mo .fin.seen .tk:nth-child(3):not(.done) { opacity: .78; }
.mo .fin.seen .tk:nth-child(1) { transition-delay: .2s; } .mo .fin.seen .tk:nth-child(2) { transition-delay: .32s; } .mo .fin.seen .tk:nth-child(3) { transition-delay: .44s; } .mo .fin.go .tk { transition-delay: 0s; } .mo .fin.go .tk.done + .tk.done { transform: rotate(1.5deg); }
/* подвал: ссылки указателя встают по очереди, огромное слово выезжает из-под края (--fp), черта и точки один раз стучат: длинный — короткий — короткий */
.mo .f-idx a, .mo .f-say, .mo .f-lb { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s ease, transform .7s var(--ease), color .2s; } .mo footer.seen .f-idx a, .mo footer.seen .f-say, .mo footer.seen .f-lb { opacity: 1; transform: none; }
.mo footer.seen .f-idx a:nth-of-type(1) { transition-delay: .06s; } .mo footer.seen .f-idx a:nth-of-type(2) { transition-delay: .1s; } .mo footer.seen .f-idx a:nth-of-type(3) { transition-delay: .14s; } .mo footer.seen .f-idx a:nth-of-type(4) { transition-delay: .18s; }
.mo footer.seen .f-idx a:nth-of-type(5) { transition-delay: .22s; } .mo footer.seen .f-idx a:nth-of-type(6) { transition-delay: .26s; } .mo footer.seen .f-idx a:nth-of-type(7) { transition-delay: .3s; } .mo footer.set .f-idx a { transition-delay: 0s; }
.mo .f-giant { transform: translate3d(0, calc((1 - var(--fp)) * 38%), 0); will-change: transform; }
@keyframes beat { 0%, 100% { transform: none; } 30% { transform: translate3d(0, -.2em, 0) scaleY(1.3); } 55% { transform: translate3d(0, .03em, 0) scaleY(.9); } }
.mo footer.seen .f-giant i.l { animation: beat .62s var(--ease) .5s; } .mo footer.seen .f-giant i.s { animation: beat .42s var(--ease) 1.04s; } .mo footer.seen .f-giant i.s + i.s { animation-delay: 1.34s; }
@keyframes hop { 40% { transform: translate3d(0, -4px, 0); } } .f-up b { display: inline-block; } @media (hover: hover) { .mo .f-up:hover b { animation: hop .45s var(--ease); } }

/* новые блоки (разметка и вид — blocks.css): шаги, чат с ботом, облако умений, «посты не теряются» */
.js .steps li.rv:nth-child(2), .js .quad .rv:nth-child(2) { transition-delay: .09s; } .js .steps li.rv:nth-child(3), .js .quad .rv:nth-child(3) { transition-delay: .18s; } .js .quad .rv:nth-child(4) { transition-delay: .27s; }
.mo .steps li i { opacity: 0; transform: scale(.4) rotate(-14deg); transition: transform .65s var(--spring) .18s, opacity .3s ease .18s; } .mo .steps li.in i { opacity: 1; transform: none; }
.mo .steps li:nth-child(2) i { transition-delay: .27s; } .mo .steps li:nth-child(3) i { transition-delay: .36s; }
/* окно чата наклонено (blocks.css); появление наклон сохраняет, на телефоне наклона нет */
.js .chat.rv { transform: translate3d(0, 24px, 0) rotate(3deg); } .js .chat.rv.in { transform: rotate(1.5deg); }
@media (max-width: 620px) { .js .chat.rv, .js .chat.rv.in { transform: none; } .js .chat.rv { transform: translate3d(0, 20px, 0); } }
/* сцена в чате: посты улетают боту по одному → бот отвечает экраном → строки таблицы → кнопки */
@keyframes mine-in { from { opacity: 0; transform: translate3d(46px, 10px, 0) scale(.9); } }
@keyframes rich-in { from { opacity: 0; transform: translate3d(-10px, 16px, 0) scale(.94); } }
@keyframes row-in { from { opacity: 0; transform: translate3d(-12px, 0, 0); } }
@keyframes key-pop { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.92); } }
.play .fwd small { animation: wd-in .4s ease backwards; }
.play .mine { animation: mine-in .5s var(--spring) backwards; transform-origin: 100% 100%; } .play .mine:nth-of-type(1) { animation-delay: .15s; } .play .mine:nth-of-type(2) { animation-delay: .38s; } .play .mine:nth-of-type(3) { animation-delay: .61s; }
.play .rich { animation: rich-in .6s var(--spring) 1.05s backwards; transform-origin: 0 100%; }
.play .tb div { animation: row-in .45s var(--ease) backwards; } .play .tb div:nth-child(1) { animation-delay: 1.4s; } .play .tb div:nth-child(2) { animation-delay: 1.54s; } .play .tb div:nth-child(3) { animation-delay: 1.68s; }
.play .rich p { animation: wd-in .4s ease 1.86s backwards; }
.play .rkb span { animation: key-pop .45s var(--spring) backwards; } .play .rkb span:nth-child(1) { animation-delay: 2s; } .play .rkb span:nth-child(2) { animation-delay: 2.09s; } .play .rkb span:nth-child(3) { animation-delay: 2.18s; }
/* планшет и телефон */
@media (max-width: 1080px) {
  :root { --gap: 110px; }
  .hero .w { grid-template-columns: minmax(0, 1fr) 360px; } .fl.a { left: -70px; top: -14px; }
  .f-idx { grid-template-columns: 210px 210px; gap: 30px; } .fin .w { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 36px; }
  .app .w { grid-template-columns: 360px minmax(0, 1fr); gap: 30px; }
  .fc.c, .fc.d, .fc.e { grid-column: span 6; margin-top: 0; } .fc.e { grid-column: span 12; min-height: 0; } .fc.f { grid-column: span 12; }
  .cv.shot { max-width: 420px; }
}
@media (max-width: 900px) {
  :root { --gap: 84px; }
  .links { display: none; }
  .head { grid-template-columns: 1fr; gap: 0; margin-bottom: 34px; } .head p { margin-top: 14px; padding: 0; max-width: 34em; font-size: 17px; }
  .hero { padding: 120px 0 70px; background: radial-gradient(90% 40% at 50% 74%, rgba(236, 45, 43, .36), rgba(236, 45, 43, .1) 55%, transparent 78%); }
  .hero .w { grid-template-columns: 1fr; gap: 56px; } .hero .lead { font-size: 18px; }
  .fl.a { left: max(0px, calc(50% - 250px)); top: -36px; }
  .spread { margin-left: 8px; margin-right: 8px; border-radius: 30px; }
  .stmt { padding: 70px 0 64px; } .stmt .bub { top: -48px; right: 2%; font-size: 15px; padding: 10px 13px 10px 15px; } .stmt .sub { font-size: 17px; margin-top: 30px; }
  .app { padding: 64px 0 70px; } .app .w { grid-template-columns: 1fr; gap: 50px; } .app .shot { order: 2; }
  .tbl { padding: 2px 20px; border-radius: 26px; } .tbl::before { display: none; }
  .tr { grid-template-columns: 1fr; row-gap: 7px; min-height: 0; padding: 17px 0; } .tr.th { display: none; } .tr:nth-child(2) { border-top: 0; }
  .tr .y { padding-left: 0; align-items: flex-start; } .tr .y svg { margin-top: 1px; } .tr .n { padding-left: 33px; } .tr .n::before { content: attr(data-l) ' — '; }
  .faq .w { grid-template-columns: 1fr; gap: 34px; } .side .chan { max-width: 420px; }
  .fin { padding: 64px 0 70px; } .fin .w { grid-template-columns: 1fr; gap: 44px; } .tix { max-width: 440px; }
  .f-top { grid-template-columns: 1fr; gap: 44px; padding: 80px 0 54px; } .f-idx { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  :root { --gap: 72px; }
  body { font-size: 16px; }
  .w { width: calc(100% - 36px); }
  .nav { top: 8px; padding: 0 58px 0 8px; } .pill { height: 52px; padding: 0 6px 0 10px; gap: 10px; } .brand { font-size: 17px; gap: 9px; } .brand img { width: 30px; height: 30px; }
  .btn.sm { height: 40px; padding: 0 14px 0 11px; font-size: 13.5px; } .lang { top: 13px; right: 8px; width: 42px; height: 42px; }
  .hero { padding-top: 104px; } h1 { margin-top: 22px; }
  .cta .btn { flex: 1 1 100%; } .facts { gap: 4px 16px; } .facts li:not(:last-child)::after { content: none; } .btn.lg { height: 56px; padding: 0 18px; font-size: 16px; } .btn small { padding-left: 11px; font-size: 12px; }
  .fl { padding: 9px 13px 9px 10px; border-radius: 16px; } .fl b { font-size: 13px; } .fl span { font-size: 11.5px; } .fl i { width: 30px; height: 30px; border-radius: 10px; }
  .cards { gap: 12px; } .fc { padding: 24px 22px 24px; border-radius: 26px; min-height: 0; } .fc.c, .fc.d, .fc.e { grid-column: span 12; } .fc h3 { font-size: 22px; }
  .flow { grid-template-columns: 1fr; gap: 12px; } .flow .arr { justify-self: center; transform: rotate(90deg); margin: 8px 0; }
  .fc.f { flex-direction: column; align-items: flex-start; gap: 22px; } .fc.f .art { margin: 0; } .team { flex-wrap: wrap; gap: 16px; } .faces span { width: 54px; height: 54px; font-size: 15px; }
  .app li { font-size: 16.5px; } .app .lead, .fin p { font-size: 17.5px; } .app .btn { width: 100%; }
  .fin .btn { width: 100%; max-width: 360px; } .tk { height: 58px; padding: 0 15px 0 14px; gap: 11px; border-radius: 17px; } .tk b { font-size: 18px; } .tk span { font-size: 14px; } .tk:nth-child(2) { margin-left: 14px; } .tk:nth-child(3) { margin-left: 28px; } .tk.done { margin-right: 14px; }
  .f-idx { grid-template-columns: 1fr; gap: 34px; } .f-bottom { flex-wrap: wrap; gap: 10px 20px; } .f-giant { margin-top: 18px; font-size: 23vw; }
}
@media (max-width: 370px) { .ph { zoom: .88; } .btn.sm span { display: none; } .btn.sm { padding: 0 11px; } }
@media (max-width: 1080px) { .steps li:not(:last-child)::after { width: 0; border-bottom-width: 0; border-radius: 0; bottom: -30px; } }
@media (max-width: 620px) { .steps li:not(:last-child)::after { left: 21px; top: 50px; bottom: -24px; } .mo .fin .tk { transform: translate3d(24px, 0, 0); } }
@media (max-width: 900px) { .stage::after { bottom: -22px; } .mo .spread { transform: translate3d(0, calc((1 - var(--p)) * 30px), 0) scale(calc(.96 + .04 * var(--p))); } .mo .app .ph { transform: rotate(calc(-6deg + 3deg * var(--p))); } }
/* телефон и планшет: шапка без размытия страницы под собой — закреплённое «стекло» поверх прокрутки там самое дорогое, что есть на странице */
@media (max-width: 900px) { .pill, .lang, .nav.sc .pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(17, 16, 19, .96); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .rv { opacity: 1; transform: none; transition: none; } .stmt .l { transform: none; } .btn, .pill { transition: none; } }