/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-11a46887.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-fe2bd26a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* math */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-44a3e14c.woff2") format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

/* symbols */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-7a339641.woff2") format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}

/* vietnamese */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-f5fe8d22.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-3e2cb988.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;
}

/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-3db826ed.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;
}

body{margin:0}
/* Construct PDF — сайт, редакция 2 (на основе исходного макета холста «Construct PDF — сайт»).
   Бренд: красный значка, тёмно-красный, фирменный светлый #FDFBF7; пастельные поля разделов;
   схемы вместо снимков экрана; много движения — перелистывание, бегущая строка, наклон окна. */
:root {
  --cream: #FDFBF7;       /* фирменный светлый — основной фон */
  --cream-2: #F6EFE6;     /* шаг тона: плашки, карточки */
  --beige: #F3EAE0;
  --ink: #1D1517;
  --ink-2: #5A4D50;
  --red: #C8202A;
  --red-deep: #8F1219;
  --pink: #F6DEDB;
  --white: #FFFFFF;
  --mint: #E4F2EA;  --mint-ink: #1F7A57; --mint-deep: #2E9E7B;
  --lav: #ECEAFB;   --lav-ink: #4B3FB0;  --lav-deep: #6A5BD8;
  --sky: #E2EFFA;   --sky-ink: #1F5E9E;  --sky-deep: #2F7DCC;
  --peach: #FBE6D6; --peach-ink: #A2521A;
  --night: #1D1517;
  --font: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --doc: "Times New Roman", "Liberation Serif", Georgia, serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --max: 1280px;
  --g: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
/* Страница задумана светлой (фирменный кремовый): тёмная тема системы не переключает её —
   цвета заданы явно, фон body — фирменный. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--red); }
img { max-width: 100%; display: block; }
a { color: var(--red); }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid #1F4FA8; outline-offset: 3px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.02; font-weight: 800; }
h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; font-weight: 800; }
h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--g); padding-right: var(--gr); }
@media (min-width: 700px) { :root { --g: max(32px, env(safe-area-inset-left, 0px)); --gr: max(32px, env(safe-area-inset-right, 0px)); } }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; font: 700 17px/1 var(--font); padding: 18px 28px; border-radius: 999px; background: var(--red); color: var(--white); transition: transform .18s var(--ease), background-color .18s, color .18s, box-shadow .18s; }
.btn:hover { background: var(--red-deep); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(0) scale(.97); }
.btn svg { width: 20px; height: 20px; }
.btn.soft { background: var(--pink); color: var(--red-deep); }
.btn.soft:hover { background: #F0CCC7; color: var(--red-deep); }
.btn.white { background: var(--white); color: var(--red-deep); }
.btn.white:hover { background: var(--pink); color: var(--red-deep); }
.btn.dark { background: var(--ink); color: var(--white); }
.btn.dark:hover { background: #3A2E31; }
.btn.small { padding: 11px 20px; font-size: 15px; }
.btn[aria-disabled="true"] { cursor: default; opacity: .75; }
.btn[aria-disabled="true"]:hover { transform: none; }
.more { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.more::after { content: "→"; transition: transform .2s var(--ease); }
.more:hover::after { transform: translateX(4px); }

/* ---------- шапка ---------- */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--red); color: var(--white); }
.bar .wrap { display: flex; align-items: center; gap: 18px; padding-block: 9px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.brand:hover { color: var(--white); }
.brand span.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--cream); display: grid; place-items: center; }
.brand img { width: 30px; height: 30px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav > a, .nav > .dd > button { color: var(--white); text-decoration: none; padding: 10px 14px; border-radius: 999px; background: transparent; border: 0; font: inherit; cursor: pointer; display: flex; gap: 6px; align-items: center; transition: background-color .18s; }
.nav > a:hover, .nav > .dd > button:hover, .nav > a[aria-current="page"] { background: rgba(255,255,255,.16); color: var(--white); }
.nav svg { width: 14px; height: 14px; }
.lang { color: var(--white); font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.14); display: flex; gap: 6px; align-items: center; cursor: default; }
.lang svg { width: 16px; height: 16px; }
a.lang, a.lang:hover { color: var(--white); text-decoration: none; cursor: pointer; }
.dd { position: relative; }
.menu { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; width: min(720px, 92vw); background: var(--white); color: var(--ink); border-radius: 22px; padding: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; box-shadow: 0 24px 60px rgba(29,21,23,.18); transform-origin: top center; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.menu[data-open="false"] { opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; }
.menu:focus-within, .menu[data-open="true"] { visibility: visible; }
.menu b { font-size: 13px; color: var(--ink-2); font-weight: 600; padding: 8px 10px 4px; }
.menu a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 10px; display: flex; gap: 10px; align-items: center; font-size: 15px; transition: background-color .15s; }
.menu a:hover { background: var(--cream-2); color: var(--ink); }
.menu a i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.menu .all { grid-column: 1 / -1; margin-top: 6px; background: var(--cream-2); justify-content: center; font-weight: 700; color: var(--red-deep); }

/* ---------- первый экран ---------- */
.hero { padding-top: clamp(48px, 7vw, 84px); }
.hero h1 { max-width: 15em; }
.hero .lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; max-width: 36em; margin-top: 26px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 38px; }
.meta { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stage { margin-top: clamp(48px, 6vw, 64px); background: var(--red); border-radius: 40px 40px 0 0; padding: clamp(28px, 4vw, 56px) clamp(14px, 7vw, 100px) 0; perspective: 1600px; position: relative; overflow: visible; }
.win { background: #F3EEE8; border-radius: 14px 14px 0 0; overflow: hidden; transform-style: preserve-3d; will-change: transform; box-shadow: 0 30px 80px rgba(60,8,12,.35); }
.win-top { display: flex; align-items: center; gap: 18px; padding: 12px 16px 0; background: #ECE5DD; }
.dots { display: flex; gap: 8px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: #D3CBC2; }
.tabname { background: #F7F3EE; border-radius: 9px 9px 0 0; padding: 9px 16px; font-size: 13.5px; font-weight: 600; min-width: 220px; transition: opacity .25s; }
.win-tools { display: flex; gap: 6px 18px; flex-wrap: wrap; padding: 12px 18px; font-size: 13px; background: #F7F3EE; }
.win-tools span { display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; }
.win-tools span.on { background: var(--white); }
.win-tools i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.win-body { display: grid; grid-template-columns: 108px minmax(0, 1fr) 260px; gap: 16px; padding: 0 16px; background: #F7F3EE; height: clamp(360px, 40vw, 560px); }
.thumbs { display: grid; gap: 12px; align-content: start; padding-top: 6px; }
.thumbs i { height: 118px; background: var(--white); border-radius: 3px; transition: outline-color .3s; outline: 3px solid transparent; }
.thumbs i.on { outline-color: var(--red); }
.side { background: var(--white); padding: 18px; font-size: 13px; display: grid; gap: 10px; align-content: start; }
.side b { font-size: 14px; }
.side span { display: flex; align-items: center; gap: 10px; }
.side i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* лист документа и перелистывание */
.book { position: relative; perspective: 2200px; }
.sheet { position: absolute; inset: 6px 0 0; background: var(--white); padding: clamp(18px, 3vw, 46px) clamp(16px, 3.5vw, 56px); font: 13.5px/1.75 var(--doc); color: #222; transform-origin: left center; backface-visibility: hidden; transition: transform .9s var(--ease-io), opacity .9s var(--ease-io); overflow: hidden; }
.sheet .t { text-align: center; font-weight: 700; font-size: 15px; letter-spacing: .02em; margin-bottom: 14px; }
.sheet .row { display: flex; justify-content: space-between; margin-bottom: 12px; }
.sheet p { margin: 0 0 8px; text-indent: 2em; }
.sheet .hl { outline: 2px solid #3B6FD8; outline-offset: 3px; background: #F2F6FF; }
.sheet .fld { display: inline-block; min-width: 9em; border-bottom: 1px solid #333; color: #1F5E9E; font-family: var(--font); font-size: 13px; padding: 0 4px; }
.sheet.next { transform: rotateY(0); z-index: 1; }
.sheet.cur { transform: rotateY(0); z-index: 2; }
.sheet.turn { transform: rotateY(-100deg); opacity: 0; z-index: 3; }
.sheet.hidden-s { opacity: 0; z-index: 0; }
.seal { display: inline-grid; place-items: center; width: 96px; height: 96px; border: 2px solid #4A57C8; border-radius: 50%; color: #4A57C8; font: 700 10px/1.15 var(--font); text-align: center; transform: rotate(-12deg); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px #4A57C8; }
.sign { display: flex; align-items: center; gap: 18px; margin-top: 18px; }

.pop { position: absolute; z-index: 4; background: var(--white); color: var(--ink); border-radius: 16px; padding: 14px 18px; box-shadow: 0 18px 40px rgba(29,21,23,.18); font-size: 14px; line-height: 1.45; max-width: 300px; will-change: transform; }
.pop b { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.pop b i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pop.dark { background: var(--ink); color: var(--white); }
.pop.p1 { top: 110px; right: clamp(4px, 2vw, 24px); animation: pop .6s .9s var(--ease) both, float 6s 1.6s ease-in-out infinite; }
.pop.p2 { bottom: 40px; left: clamp(4px, 1.6vw, 24px); animation: pop .6s 1.3s var(--ease) both, float 7s 2s ease-in-out infinite; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---------- бегущая строка ---------- */
.ticker { background: var(--night); padding: 28px 0; overflow: hidden; position: relative; z-index: 3; }
.tick { display: flex; gap: 12px; width: max-content; animation: tick 52s linear infinite; }
.ticker:hover .tick { animation-play-state: paused; }
.tick span { display: flex; align-items: center; gap: 10px; color: var(--white); background: #2B2124; border-radius: 999px; padding: 12px 20px; font-weight: 500; white-space: nowrap; }
.tick i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- листы-разделы: каждый ложится поверх предыдущего ---------- */
.sheet-sec { position: relative; margin-top: -44px; border-radius: 44px 44px 0 0; padding: clamp(96px, 10vw, 130px) 0 clamp(120px, 12vw, 170px); box-shadow: 0 -16px 40px rgba(29,21,23,.12); transform-origin: 50% 0; }
.sheet-sec.cream { background: var(--cream); }
.sheet-sec.mint { background: var(--mint); }
.sheet-sec.lav { background: var(--lav); }
.sheet-sec.sky { background: var(--sky); }
.sheet-sec.night { background: var(--night); color: var(--white); }
.sheet-sec.deep { background: var(--red-deep); color: var(--white); }
.sheet-sec.red { background: var(--red); color: var(--white); }
.tag { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--tc, var(--ink-2)); }
.tag::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip > .text { order: 2; }
.text { display: grid; gap: 22px; align-content: start; min-width: 0; }
.text > p { font-size: 18px; max-width: 32em; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.checks li::before { content: ""; width: 14px; height: 8px; margin: 7px 0 0 3px; border-left: 2.5px solid var(--cc, var(--mint-deep)); border-bottom: 2.5px solid var(--cc, var(--mint-deep)); transform: rotate(-45deg); }

/* ---------- для кого ---------- */
.who-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 30px; }
.who-tab { position: relative; overflow: hidden; font: 600 16px/1 var(--font); border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; background: var(--cream-2); color: var(--ink); transition: background-color .2s, color .2s; }
.who-tab:hover { background: var(--pink); }
.who-tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.who-tab .bar-p { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.who-tab[aria-selected="true"] .bar-p { animation: prog var(--dur, 7s) linear forwards; }
.who.paused .who-tab .bar-p { animation: none; transform: scaleX(0); }
@keyframes prog { to { transform: scaleX(1); } }
.who-pan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.who-pan article { background: var(--white); border-radius: 24px; padding: 26px; display: grid; gap: 14px; align-content: start; animation: rise .6s var(--ease) both; }
.who-pan article:nth-child(2) { animation-delay: .07s; } .who-pan article:nth-child(3) { animation-delay: .14s; }
.who-pan .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.who-pan .ic svg { width: 26px; height: 26px; }
.who-pan p { color: var(--ink-2); font-size: 16px; }
.who-pan em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--cream-2); border-radius: 999px; padding: 6px 12px; justify-self: start; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- до / после ---------- */
.ba { background: var(--mint-deep); padding: clamp(24px, 3.4vw, 48px); border-radius: 0; }
.ba .paper { background: #FAF8F3; padding: 30px 36px; font: 16.5px/1.8 var(--doc); min-height: 230px; position: relative; }
.ba .paper b { font-size: 17px; }
.ba .swap { position: relative; display: inline-grid; padding: 0 6px; border-radius: 3px; background: #F6D9D7; transition: background-color .4s; }
.ba .swap > span { grid-area: 1 / 1; transition: opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease); }
.ba .swap .new { opacity: 0; filter: blur(4px); transform: translateY(6px); }
.ba[data-state="after"] .swap { background: #DDF0E6; }
.ba[data-state="after"] .swap .old { opacity: 0; filter: blur(4px); transform: translateY(-6px); }
.ba[data-state="after"] .swap .new { opacity: 1; filter: none; transform: none; }
.ba-ex { transition: opacity .35s var(--ease); }
.ba-ex.fade { opacity: 0; }
.seg { display: inline-flex; background: var(--white); border-radius: 999px; padding: 5px; margin-top: 26px; position: relative; }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; font: 600 15px/1 var(--font); padding: 12px 20px; border-radius: 999px; cursor: pointer; color: var(--ink); transition: color .25s; }
.seg .knob { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--ink); transition: transform .35s var(--ease), width .35s var(--ease); }
.seg button[aria-pressed="true"] { color: var(--white); }
.ba-dots { display: flex; gap: 8px; margin-top: 18px; }
.ba-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background-color .3s, width .3s; }
.ba-dots i.on { width: 22px; border-radius: 4px; background: var(--white); }

/* ---------- печать переезжает ---------- */
.move { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 12px; position: relative; }
.move .pg { aspect-ratio: 3 / 4; background: #FAF8F3; padding: 26px; font: 12.5px/1.7 var(--doc); color: #555; position: relative; }
.move .pg.b { background: var(--white); }
.move .ghost { position: absolute; left: 16%; bottom: 14%; width: 44%; aspect-ratio: 1; border: 2px dashed #9C93DA; border-radius: 50%; }
.move .arrow { height: 2px; background: var(--lav-deep); position: relative; }
.move .arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--lav-deep); }
.flystamp { position: absolute; width: 21%; aspect-ratio: 1; left: 6.5%; bottom: 13%; border-radius: 50%; border: 2.5px solid #5A54C9; box-shadow: inset 0 0 0 6px var(--white), inset 0 0 0 7.5px #5A54C9; display: grid; place-items: center; color: #4A44B9; font: 700 clamp(8px, .8vw, 11px)/1.2 var(--font); text-align: center; background: rgba(255,255,255,.6); animation: fly 6s var(--ease-io) infinite; }
@keyframes fly {
  0%, 12% { transform: translate(0, 0) rotate(-10deg) scale(1); }
  20% { transform: translate(20%, -30%) rotate(-4deg) scale(1.08); }
  48%, 78% { transform: translate(295%, 0) rotate(-14deg) scale(1); }
  88% { transform: translate(295%, 0) rotate(-14deg) scale(1); opacity: 1; }
  94% { opacity: 0; } 95% { transform: translate(0,0) rotate(-10deg); opacity: 0; } 100% { opacity: 1; }
}

/* ---------- поля формы ---------- */
.formdemo { background: var(--white); padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; font-size: 15px; box-shadow: 0 30px 60px rgba(31,94,158,.12); }
.formdemo .ttl { font-family: var(--doc); font-weight: 700; font-size: 17px; text-align: center; margin-bottom: 6px; }
.fr { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; align-items: end; font-family: var(--doc); }
.fbox { height: 30px; border-bottom: 1.5px solid #333; position: relative; overflow: hidden; }
.fbox::before { content: ""; position: absolute; inset: 0; background: rgba(47,125,204,.16); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.fbox span { position: absolute; left: 8px; bottom: 3px; font-family: var(--font); color: var(--sky-ink); font-weight: 500; white-space: nowrap; overflow: hidden; width: 0; transition: width 1s steps(var(--n, 14)); }
.cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 30px; border: 1.5px solid #333; }
.cells i { border-right: 1px solid #333; display: grid; place-items: center; font: 500 14px var(--font); color: var(--sky-ink); font-style: normal; opacity: 0; transition: opacity .2s; }
.cells i:last-child { border-right: 0; }
.ck { display: flex; gap: 24px; font-family: var(--doc); }
.ck span { display: flex; gap: 8px; align-items: center; }
.ck b { width: 16px; height: 16px; border: 1.5px solid #333; display: grid; place-items: center; font-family: var(--font); color: var(--sky-ink); font-size: 13px; }
.formdemo.go .fbox::before { transform: scaleX(1); }
.formdemo.go .fbox span { width: calc(var(--n, 14) * 1ch); }
.formdemo.go .cells i { opacity: 1; }

/* ---------- подпись ---------- */
.sigdemo { background: #2B2124; padding: clamp(28px, 4vw, 56px) clamp(24px, 7vw, 100px); position: relative; }
.sigdoc { background: var(--white); color: #222; padding: 34px; font: 13px/1.8 var(--doc); }
.sigbox { margin-top: 22px; border: 2px solid #2346A8; border-radius: 10px; padding: 16px 20px; color: #2346A8; font: 500 13px/1.6 var(--font); clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-io) .2s; }
.sigbox b { display: block; font-weight: 800; font-size: 13.5px; margin-bottom: 4px; letter-spacing: .01em; }
.sigdemo.go .sigbox { clip-path: inset(0 0 0 0); }
.sigok { position: absolute; top: 18px; right: 16px; background: var(--white); color: var(--ink); border-radius: 14px; padding: 12px 16px; font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 16px 34px rgba(0,0,0,.3); opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .5s var(--ease) 1.4s, transform .5s var(--ease) 1.4s; }
.sigok svg { width: 20px; height: 20px; color: var(--mint-deep); }
.sigdemo.go .sigok { opacity: 1; transform: none; }

/* ---------- подача ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.tiles div { background: rgba(255,255,255,.09); padding: 24px 26px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; font-size: 16.5px; line-height: 1.5; }
.tiles div::before { content: ""; width: 14px; height: 8px; margin: 6px 0 0 2px; border-left: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white); transform: rotate(-45deg) scale(0); transition: transform .35s var(--ease); transition-delay: calc(var(--i) * 140ms + .2s); }
.tiles.go div::before { transform: rotate(-45deg) scale(1); }
.portals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.portals span { border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 16px; font-size: 15px; }

/* ---------- всё остальное ---------- */
.allgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin-top: 46px; }
.allgrid h3 { font-size: 18px; margin-bottom: 12px; }
.allgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; }
.allgrid li { display: flex; gap: 10px; align-items: baseline; }
.allgrid li i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(-1px); }
.headrow { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }

.offline { background: var(--red); color: var(--white); border-radius: 32px; padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: clamp(80px, 9vw, 120px); }
.offline h2 { font-size: clamp(26px, 2.6vw, 38px); }
.req { margin-top: 40px; background: var(--beige); border-radius: 24px; padding: 30px 36px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.req h3 { font-size: 22px; }
.soon { margin-top: 40px; background: var(--pink); border-radius: 24px; padding: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.soon h2 { font-size: clamp(28px, 3vw, 40px); }
.osicons { display: flex; gap: 12px; }
.osicons span { background: var(--white); border-radius: 18px; padding: 16px 20px; font-weight: 700; display: grid; gap: 4px; min-width: 120px; }
.osicons small { font-weight: 500; color: var(--ink-2); font-size: 13px; }

/* ---------- вопросы ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px 64px; padding-top: clamp(100px, 10vw, 144px); }
.faq-list { display: grid; gap: 10px; }
.faq details { background: var(--cream-2); border-radius: 16px; padding: 0 24px; transition: background-color .2s; }
.faq details[open] { background: var(--beige); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { color: var(--red); font-size: 22px; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 40em; }

/* ---------- подвал ---------- */
.foot { margin-top: clamp(100px, 10vw, 144px); background: var(--red); color: var(--white); border-radius: 44px 44px 0 0; overflow: hidden; }
.foot .wrap { padding-block: clamp(56px, 6vw, 80px) 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; }
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.cta h2 { font-size: clamp(26px, 2.6vw, 36px); max-width: 16em; }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; font-size: 15px; }
.cols b { display: block; margin-bottom: 12px; }
.cols a { display: block; color: rgba(255,255,255,.88); text-decoration: none; padding: 3px 0; }
.cols a:hover { color: var(--white); text-decoration: underline; }
.word { overflow: hidden; font-size: clamp(48px, 11.6vw, 186px); line-height: .8; font-weight: 800; letter-spacing: -0.05em; color: rgba(255,255,255,.16); margin: 0 0 -4px; white-space: nowrap; }
.copy { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: rgba(255,255,255,.8); }

/* ---------- страницы «Возможности», «Скачать», «Онлайн» ---------- */
.pagehead { padding-top: clamp(56px, 7vw, 84px); }
.pagehead p { font-size: 18px; max-width: 40em; margin-top: 22px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.filters button { font: 600 15px/1 var(--font); border: 0; border-radius: 999px; padding: 12px 18px; background: var(--cream-2); color: var(--ink); cursor: pointer; transition: background-color .18s, color .18s; }
.filters button:hover { background: var(--pink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.fgroup { margin-top: 64px; }
.fgroup h2 { font-size: 26px; display: flex; align-items: center; gap: 12px; }
.fgroup h2::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--gc); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.card { background: var(--gb); border-radius: 4px; padding: 22px; display: grid; gap: 10px; align-content: start; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(29,21,23,.1); } }
.card .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--gc); color: var(--white); display: grid; place-items: center; }
.card .ic svg { width: 20px; height: 20px; }
.card b { font-size: 17px; line-height: 1.3; }
.card span { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.card em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--red-deep); }
.card .new { justify-self: start; background: var(--red); color: var(--white); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.band { margin-top: 80px; background: var(--red); color: var(--white); border-radius: 4px; padding: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.band h2 { font-size: clamp(26px, 2.6vw, 36px); }
dialog.info { border: 0; border-radius: 28px; padding: 0; width: min(560px, 92vw); color: var(--ink); background: var(--cream); box-shadow: 0 40px 100px rgba(29,21,23,.3); }
dialog.info::backdrop { background: rgba(29,21,23,.45); }
dialog.info[open] { animation: dlg .25s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.info .in { padding: 32px; display: grid; gap: 16px; }
.info .head { display: flex; gap: 14px; align-items: center; }
.info .close { margin-left: auto; border: 0; background: var(--cream-2); width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.info .where { background: var(--white); border-radius: 14px; padding: 14px 16px; font-size: 15px; }

.dlcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.dlc { border-radius: 4px; padding: 30px; display: grid; gap: 16px; align-content: start; min-height: 300px; }
.dlc.a { background: var(--red); color: var(--white); }
.dlc.b { background: var(--pink); }
.dlc.c { background: var(--beige); }
.dlc h2 { font-size: 26px; }
.dlc .meta { color: inherit; opacity: .8; }
.dlc .btn { justify-self: start; margin-top: auto; }
.sum { font-size: 14px; color: var(--ink-2); margin-top: 18px; word-break: break-all; }
.sysreq { display: grid; gap: 8px; }
.sysreq div { display: grid; grid-template-columns: 44px 12em minmax(0, 1fr); gap: 16px; align-items: center; background: var(--cream-2); border-radius: 12px; padding: 12px 18px; }
.sysreq .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--white); background: var(--c); }
.sysreq svg { width: 18px; height: 18px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; background: #2B2124; border-radius: 16px; padding: 22px 24px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
.steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-weight: 700; }
.steps b { display: block; margin-bottom: 4px; }
.steps span { color: rgba(255,255,255,.78); font-size: 15.5px; }
.newgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: 34px; }

/* ---------- появление при прокрутке ---------- */
.rv { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.on { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
.no-js .rv { opacity: 1; transform: none; }
.in1 { animation: rise .8s var(--ease) both; } .in2 { animation: rise .8s .1s var(--ease) both; } .in3 { animation: rise .8s .2s var(--ease) both; } .in4 { animation: rise .9s .3s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tick { animation: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- узкие экраны ---------- */
@media (max-width: 1080px) {
  .tiles, .allgrid, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .win-body { grid-template-columns: 80px minmax(0, 1fr); } .side { display: none; }
}
@media (max-width: 860px) {
  .split, .split.flip, .faq, .offline, .soon, .who-pan, .dlcards, .newgrid { grid-template-columns: minmax(0, 1fr); }
  .split.flip > .text { order: 0; }
  .req { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nav .hide-m { display: none; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .bar .wrap { gap: 8px; }
  .brand { font-size: 16px; } .brand span.logo { width: 32px; height: 32px; } .brand img { width: 26px; height: 26px; }
  .lang { display: none; }
  .nav { gap: 0; } .nav > a, .nav > .dd > button { padding: 8px 10px; }
  .nav > .dd { display: none; }
  .btn { padding: 16px 22px; font-size: 16px; }
  .stage { border-radius: 26px 26px 0 0; }
  .win-body { grid-template-columns: minmax(0, 1fr); height: 380px; } .thumbs { display: none; }
  .win-tools { font-size: 12px; gap: 4px 8px; }
  .pop { max-width: 220px; font-size: 13px; padding: 12px 14px; }
  .pop.p1 { top: 70px; }
  .sheet { font-size: 11.5px; }
  .tiles, .allgrid, .cards { grid-template-columns: minmax(0, 1fr); }
  .sheet-sec { border-radius: 28px 28px 0 0; }
  .fr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sysreq div { grid-template-columns: 36px minmax(0, 1fr); } .sysreq div span:last-child { grid-column: 2; }
  .move { grid-template-columns: 1fr 34px 1fr; }
  .ba .paper { padding: 22px; font-size: 15px; }
}
.btn { white-space: nowrap; }
@media (max-width: 600px) { .pop.p1 { display: none; } .bar .btn.small { padding: 10px 14px; font-size: 14px; } }

/* доступность и мобильная шапка — без смены палитры */
.bar :focus-visible, .foot :focus-visible { outline-color: #FFF8EA; }
.nav-toggle { display: none; border: 0; background: rgba(255,255,255,.14); color: var(--white); width: 42px; height: 42px; border-radius: 50%; padding: 11px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; margin: 4px 0; background: currentColor; border-radius: 2px; }
@media (max-width: 600px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 10px max(20px, env(safe-area-inset-left, 0px)) 16px; background: var(--red-deep); box-shadow: 0 12px 24px rgba(29,21,23,.18); flex-wrap: wrap; }
  .nav.open { display: flex; }
  .nav .lang { display: inline-flex; align-items: center; }
  .en-portals { min-height: 250px; }
  .nav > .dd { display: block; }
  .nav > a, .nav > .dd > button { padding: 10px 12px; }
  .nav .menu { position: static; translate: none; width: 100%; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .nav .menu[data-open="false"] { display: none; }
  .pagehead.tint h1 { font-size: clamp(30px, 10vw, 38px); overflow-wrap: anywhere; }
}

/* ===== редакция 3 (24.10.2026): замечания пользователя ===== */
/* №7 — шапка выше, знак и меню крупнее; при прокрутке — компактнее */
.bar .wrap { padding-block: 16px; gap: 22px; transition: padding .25s var(--ease); }
.bar.compact .wrap { padding-block: 9px; }
.brand { font-size: 21px; gap: 12px; }
.brand span.logo { width: 44px; height: 44px; border-radius: 12px; }
.brand img { width: 36px; height: 36px; }
.nav { font-size: 16px; }
.nav > a, .nav > .dd > button { padding: 11px 15px; }
.bar .btn.small { padding: 13px 22px; font-size: 16px; }
/* №3 — переходы между блоками: прямая граница, без скруглений, теней и «наезда» */
.sheet-sec { margin-top: 0; border-radius: 0; box-shadow: none; }
.stage { border-radius: 0; }
.foot { border-radius: 0; }
/* №5 — меньше пустоты между блоками */
.sheet-sec { padding: clamp(72px, 7vw, 96px) 0 clamp(80px, 8vw, 104px); }
.foot { margin-top: 0; }
.faq { padding-top: clamp(64px, 6vw, 88px); }
.pagehead.tint { padding-bottom: clamp(48px, 5vw, 64px); }
.band-tint { background: var(--peach); }
.band-rose { background: var(--pink); }
.band-cream2 { background: var(--cream-2); }
/* №1 — без анимации видна только первая страница (название вкладки совпадает с листом) */
.no-js .book .sheet:not(:first-child) { display: none; }
/* №2 — подсказки у окна: направление + плавная смена */
.pop .dir { display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: inherit; margin-bottom: 6px; }
.pop.dark .dir { background: rgba(255,255,255,.14); }
.pop b span, .pop p, .pop .dir { transition: opacity .3s; }
.pop.fade b span, .pop.fade p, .pop.fade .dir { opacity: 0; }
/* №4 — системные требования плиткой */
.sysreq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.sysreq div { grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; padding: 14px 16px; align-items: center; }
.sysreq div .ic { grid-row: 1 / span 2; }
.sysreq div b { font-size: 15px; }
.sysreq div span:last-child { grid-column: 2; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 1080px) { .sysreq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .sysreq { grid-template-columns: minmax(0, 1fr); }
  .bar .wrap { padding-block: 10px; }
  .brand span.logo { width: 38px; height: 38px; } .brand img { width: 31px; height: 31px; }
  .bar .btn.small { padding: 10px 14px; font-size: 14px; }
}
.band-cream2 .dlc.c { background: var(--cream); }
.band-cream2 { padding-bottom: 1px; }



/* ===== редакция 4 (24.10.2026): замечания пользователя ===== */
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* №1 — меньше белого: тёплая палитра «песок / лён / глина / олива / пудра / шоколад» */
:root {
  --cream: #F2E8D9;      /* песок — основной фон */
  --cream-2: #E9DCC7;    /* лён — плашки, кнопки */
  --beige: #E2D0B7;
  --paper: #FBF5EA;      /* бумага рисованных документов — единственный светлый тон */
  --ink: #2A1D19;
  --ink-2: #66544B;
  --pink: #EFD4CB;
  --white: #FFFCF6;
  --mint: #E1DEC1;  --mint-ink: #56602A; --mint-deep: #7A8541;
  --lav: #ECD6CE;   --lav-ink: #873A54;  --lav-deep: #A5536E;
  --sky: #EBD0BA;   --sky-ink: #8A4720;  --sky-deep: #B7672F;
  --peach: #E9D8BE;
  --night: #34241F;
  --night-2: #47332C;
  --doc: Georgia, "PT Serif", "Times New Roman", serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --pen: #2346A8;        /* синяя ручка */
}
body { background: var(--cream); }
.ticker { background: var(--night); }
.tick span { background: var(--night-2); }
.sigdemo { background: var(--night-2); }
.steps li { background: var(--night-2); }
.who-pan article { background: var(--paper); }
.who-pan .ic { background: color-mix(in srgb, var(--fg) 14%, var(--cream-2)); }
.who-pan em { background: var(--cream-2); }
.card { background: color-mix(in srgb, var(--gc) 11%, var(--cream-2)); }
.faq details { background: rgba(255,252,246,.55); }
.faq details[open] { background: var(--paper); }
.menu { background: var(--paper); }
.osicons span { background: var(--paper); }
.seg { background: var(--paper); }
.win { background: #EDE3D4; }
.win-top { background: #E4D8C6; }
.win-tools, .win-body, .tabname { background: #F1E8DB; }
.win-tools span.on, .side, .thumbs i { background: var(--paper); }
.sysreq div { background: rgba(255,252,246,.5); }
.dialog.info, dialog.info { background: var(--cream); }
.info .where { background: var(--paper); }

/* №2 — плашка на стыке светлого и тёмного блока: «прошитая лента» */
.seam { position: relative; height: 30px; background: var(--red); overflow: hidden; }
.seam::before { content: ""; position: absolute; left: -40px; right: -40px; top: 50%; height: 2px; margin-top: -1px;
  background-image: linear-gradient(90deg, rgba(255,252,246,.85) 0 55%, transparent 55% 100%); background-size: 20px 2px;
  animation: stitch 3.2s linear infinite; }
.seam::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 3px 0 rgba(0,0,0,.08), inset 0 -3px 0 rgba(0,0,0,.08); }
.seam.choc { background: var(--night); }
.seam.choc::before { background-image: linear-gradient(90deg, rgba(233,220,199,.75) 0 55%, transparent 55% 100%); }
@keyframes stitch { to { transform: translateX(20px); } }

/* №4 — документы «от руки», но сдержанно (ред. 4.1): печатный текст, лёгкий неровный край, правки ручкой */
.sheet, .ba .paper, .move .pg, .formdemo, .sigdoc { font-family: var(--doc); color: #2F2420; }
.ba .paper, .move .pg, .formdemo, .sigdoc, .sheet { isolation: isolate; background: transparent !important; box-shadow: none; }
.ba .paper, .move .pg, .formdemo, .sigdoc { position: relative; }
.ba .paper::before, .move .pg::before, .formdemo::before, .sigdoc::before, .sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  border: 1.25px solid rgba(58,44,39,.42); border-radius: 3px;
  filter: url(#rough); pointer-events: none; }
.ba .paper::after, .move .pg::after, .formdemo::after, .sigdoc::after {
  content: ""; position: absolute; inset: 7px -6px -7px 7px; z-index: -2; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, rgba(42,29,25,.13) 0 1.5px, transparent 1.5px 6px); pointer-events: none; }
.ba .paper { transform: rotate(-.35deg); font-size: 16.5px; line-height: 1.85; }
.ba .paper b { font-size: 17px; }
.ba .swap { font-family: var(--hand); font-size: 22px; font-weight: 600; line-height: 1; color: var(--pen); background: rgba(240,190,80,.28); padding: 1px 5px; vertical-align: -1px; }
.ba .swap > span { transition-delay: calc(var(--k, 0) * .32s); }
.ba[data-state="after"] .swap { background: rgba(120,170,90,.22); }
.ba .swap .old { font-family: var(--doc); font-size: 16.5px; font-weight: 400; color: #2F2420; }
.ba-count { position: absolute; right: 16px; bottom: 12px; font: 600 13px/1 var(--font); color: var(--mint-ink); background: rgba(120,170,90,.18); padding: 6px 10px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease) 1s, transform .35s var(--ease) 1s; }
.ba[data-state="after"] .ba-count { opacity: 1; transform: none; }
.ba .paper { min-height: 250px; padding-bottom: 46px; }
.move .pg { transform: rotate(-.5deg); }
.move .pg.b { transform: rotate(.6deg); }
.formdemo { transform: rotate(.3deg); }
.formdemo .ttl { letter-spacing: .06em; }
.fbox span { font-family: var(--hand); font-size: 21px; font-weight: 600; color: var(--pen); bottom: -1px; }
.cells i { font-family: var(--hand); font-size: 19px; font-weight: 600; color: var(--pen); }
.ck b { font-family: var(--hand); color: var(--pen); font-size: 16px; }
.sigdoc { transform: rotate(-.25deg); }
.sigbox { transform: rotate(-.4deg); background: rgba(35,70,168,.03); }

/* лист в окне программы */
.sheet::before { inset: 2px 3px; }
.sheet .hl, .sheet p.hl { outline: 0; background: linear-gradient(100deg, transparent 0 1%, rgba(240,190,80,.38) 2% 98%, transparent 99%); border-radius: 2px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sheet .fld { font-family: var(--hand); font-size: 18px; font-weight: 600; color: var(--pen); border-bottom: 1px solid #2F2420; }
.sheet .fld[style*="background"] { background: #2F2420 !important; color: transparent !important; }
.scribble { width: 80px; height: 34px; color: var(--pen); flex: none; }
.scribble path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seal, .flystamp { filter: url(#rough2); opacity: .82; }
.seal { color: #3D4BC0; border-color: #3D4BC0; box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px #3D4BC0; }

/* №3 — без JS всё видно; с JS блоки появляются при прокрутке */
.ba .seg button { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .seam::before { animation: none; } }
@media (max-width: 600px) { .seam { height: 22px; } }

/* ===== редакция 4.2 ===== */
/* разделитель между светлыми блоками — тонкая «строчка» на льняной полосе */
.seam.soft { height: 14px; background: #DCCAB0; }
.seam.soft::before { background-image: linear-gradient(90deg, rgba(42,29,25,.38) 0 55%, transparent 55% 100%); height: 1.5px; animation-duration: 4.5s; }
.seam.soft::after { box-shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); }

/* бланк заполняется на компьютере — печатный текст, а не ручка */
.fbox::before { background: rgba(47,94,170,.10); }
.fbox span { font: 500 16px/1 var(--font); color: #1C2E66; bottom: 6px; }
.formdemo.go .fbox span { box-shadow: none; }
.cells i { font: 500 15px var(--font); color: #1C2E66; }
.ck b { font: 700 13px var(--font); color: #1C2E66; }
.sheet .fld { font: 500 13px var(--font); color: #1C2E66; border-bottom: 1px solid #2F2420; padding: 0 4px 1px; }

/* электронная подпись: росчерк → штамп опускается на лист → «Подпись верна» */
.sigline { display: flex; align-items: flex-end; gap: 14px; margin-top: 18px; font-size: 13px; }
.sigline span:first-child { color: var(--ink-2); }
.sigdraw { width: 92px; height: 40px; flex: none; }
.sigdraw path { fill: none; stroke: var(--pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sigdraw path.u { stroke-width: 1.2; }
.sigbox { clip-path: none !important; transition: none !important; opacity: 0; transform-origin: 50% 50%; position: relative; }
.sigbox::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid #2346A8; opacity: 0; pointer-events: none; }
.sigok { transition: none !important; }
.sigdemo.go .sigdraw path { animation: sigDraw 7s var(--ease-io) infinite; }
.sigdemo.go .sigdraw path.u { animation-name: sigDrawU; }
.sigdemo.go .sigbox { animation: sigStamp 6s infinite; }
.sigbox { margin-top: 26px; }
.sigdemo.go .sigbox::after { animation: sigRing 6s infinite; }
.sigdemo.go .sigok { animation: sigOk 6s var(--ease) infinite; }
@keyframes sigDraw { 0%, 3% { stroke-dashoffset: 1; opacity: 1; } 20% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sigDrawU { 0%, 18% { stroke-dashoffset: 1; opacity: 1; } 25% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sigStamp {
  0%, 8% { opacity: 0; transform: translateY(-34px) scale(1.32) rotate(-7deg); animation-timing-function: cubic-bezier(.55,0,.9,.4); }
  15% { opacity: 1; transform: translateY(0) scale(.95) rotate(-1deg); animation-timing-function: ease-out; }
  18% { transform: scale(1.025) rotate(-.4deg); }
  21%, 90% { opacity: 1; transform: scale(1) rotate(-.4deg); }
  96%, 100% { opacity: 0; transform: scale(1) rotate(-.4deg); }
}
@keyframes sigRing { 0%, 14% { opacity: 0; transform: scale(1); } 15% { opacity: .55; transform: scale(1); } 25%, 100% { opacity: 0; transform: scale(1.08); } }
@keyframes sigOk { 0%, 24% { opacity: 0; transform: translateY(10px) scale(.95); } 30%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sigdraw path { stroke-dashoffset: 0; } .sigbox, .sigok { opacity: 1 !important; transform: none !important; }
}

/* подвал — бордовый фон, светлый текст читается */
.foot { background: #5C1017; }
.foot .cols b { color: #FFFCF6; }
.foot .cols a { color: #F1DDD3; }
.foot .cols a:hover { color: #FFFFFF; }
.foot .copy { color: #E3C9BE; }
.foot .word { color: rgba(255,240,230,.07); }
.foot .btn.white { background: #FFFCF6; color: #5C1017; }
.foot .btn.white:hover { background: var(--pink); }

/* ===== редакция 4.5: окно программы — ровная страница, живые миниатюры, номер страницы ===== */
.book .sheet::before { filter: none; border: 1px solid rgba(58,44,39,.16); border-radius: 1px; box-shadow: 0 1px 2px rgba(60,40,30,.08), 0 6px 18px rgba(60,40,30,.10); inset: 6px 0 0; }
.thumbs i { position: relative; border-radius: 2px; box-shadow: 0 1px 3px rgba(60,40,30,.12);
  background:
    linear-gradient(rgba(47,36,32,.55), rgba(47,36,32,.55)) 50% 12px / 52% 3px no-repeat,
    repeating-linear-gradient(rgba(47,36,32,.20) 0 1.5px, transparent 1.5px 7px) 50% 26px / 76% 62% no-repeat,
    var(--paper); }
.thumbs i:nth-child(2)::after { content: ""; position: absolute; left: 14%; bottom: 10%; width: 22%; aspect-ratio: 1; border: 1.5px solid rgba(61,75,192,.7); border-radius: 50%; }
.thumbs i:nth-child(4) { background:
    linear-gradient(rgba(47,36,32,.55), rgba(47,36,32,.55)) 50% 12px / 36% 3px no-repeat,
    repeating-linear-gradient(rgba(47,36,32,.20) 0 1.5px, transparent 1.5px 12px) 50% 28px / 76% 55% no-repeat,
    var(--paper); }
.thumbs i { cursor: pointer; transition: outline-color .3s, transform .2s var(--ease); }
.thumbs i:hover { transform: translateY(-2px); }
.win-tools { align-items: center; }
.win-top .pgi { margin-left: auto; color: var(--ink-2); font-size: 13px; padding-bottom: 8px; }
.win-top .pgi b { color: var(--ink); font-variant-numeric: tabular-nums; }
.win-top .zoom { background: var(--paper); border-radius: 8px; padding: 4px 10px; margin: 0 4px 8px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .win-top .pgi, .win-top .zoom { display: none; } }
/* вкладки «Для кого» — в одну строку на широком экране, с прокруткой на узком */
@media (max-width: 860px) { .who-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); } .who-tabs::-webkit-scrollbar { display: none; } .who-tab { flex: none; } }

/* ред. 4.5: исправление вписывается шрифтом самого документа, не «ручкой» */
.ba .swap { display: inline-block; position: relative; font: inherit !important; color: inherit !important; line-height: inherit; vertical-align: baseline; padding: 0 5px; border-radius: 3px; }
.ba .swap > span { display: inline-block; white-space: nowrap; }
.ba .swap .old { font: inherit !important; color: inherit !important; }
.ba .swap .new { position: absolute; left: 5px; top: 0; }
.ba[data-state="after"] .swap .old { position: absolute; left: 5px; top: 0; }
.ba[data-state="after"] .swap .new { position: static; }
.ba .paper b .swap { font-weight: 700 !important; }

/* ===== редакция 4.6: несколько примеров в каждом блоке ===== */
.demo { min-width: 0; }
.demo .scenes { display: grid; padding: clamp(22px, 3.2vw, 44px); background: var(--box, var(--mint-deep)); }
.demo[data-box="scans"] { --box: var(--mint-deep); }
.demo[data-box="stamps"] { --box: #B98292; }
.demo[data-box="forms"] { --box: #C9946A; }
.demo[data-box="sigs"] { --box: var(--night-2); }
.scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; min-width: 0; display: grid; align-content: center; }
.scene.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .1s, transform .45s var(--ease) .1s, visibility 0s; }
.demo .ba, .demo .sigdemo { background: transparent; padding: 0; }
.demo .sigdemo { padding-top: 34px; }
.demo .sigok { top: 0; right: 0; }
.demo .move { padding: 6px 0; }
.demo-cap { margin-top: 16px; display: grid; gap: 10px; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-tab { position: relative; overflow: hidden; font: 600 14px/1 var(--font); border: 0; border-radius: 999px; padding: 10px 15px; cursor: pointer; background: rgba(255,252,246,.6); color: var(--ink); transition: background-color .2s, color .2s; }
.demo-tab:hover { background: var(--paper); }
.demo-tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.demo-tab .bar-p { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.demo-tab[aria-selected="true"] .bar-p { animation: prog var(--dur, 8s) linear forwards; }
.demo.paused .demo-tab .bar-p { animation: none; transform: scaleX(0); }
.demo-desc { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); min-height: 3em; max-width: 36em; }
.sheet-sec.night .demo-tab { background: rgba(255,255,255,.1); color: var(--white); }
.sheet-sec.night .demo-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.sheet-sec.night .demo-desc { color: rgba(255,252,246,.72); }

/* общая «подложка сканера» и лист скана */
.bed { position: relative; min-height: 270px; display: grid; place-items: center; background: #B6AE9F; overflow: hidden; border-radius: 2px; }
.scanpg { position: relative; width: 86%; background: var(--paper); padding: 22px 26px; font: 15px/1.75 var(--doc); color: #3B3430; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.scanpg b { font-size: 15.5px; display: block; margin-bottom: 4px; }
.scanpg p { margin: 0; }
.tag-ok { position: absolute; right: 14px; bottom: 14px; font: 600 13px/1 var(--font); background: var(--paper); color: var(--mint-ink); padding: 8px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.14); opacity: 0; }

/* выровнять скан */
.scanpg.tilt { transform: rotate(-4.5deg); }
.scene.play .bed:has(.tilt) { animation: bedFill 7s infinite; }
.scene.play .scanpg.tilt { animation: tilt 7s var(--ease-io) infinite; }
.scene.play .bed:has(.tilt) .tag-ok { animation: tagIn 7s infinite; animation-delay: .1s; }
@keyframes tilt { 0%, 22% { transform: rotate(-4.5deg); box-shadow: 0 2px 10px rgba(0,0,0,.14); } 42%, 90% { transform: rotate(0); box-shadow: 0 0 0 rgba(0,0,0,0); } 100% { transform: rotate(-4.5deg); } }
@keyframes bedFill { 0%, 38% { background-color: #B6AE9F; } 52%, 90% { background-color: var(--paper); } 100% { background-color: #B6AE9F; } }
@keyframes tagIn { 0%, 48% { opacity: 0; transform: translateY(6px); } 54%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* распознать текст */
.ocr .scanpg { filter: contrast(.92); }
.ocr mark { background: transparent; color: inherit; border-radius: 2px; }
.ocr .sel { position: relative; }
.ocr .sel::before { content: ""; position: absolute; inset: 1px -4px; background: rgba(47,111,214,.22); transform: scaleX(0); transform-origin: left; border-radius: 2px; }
.ocr-bar { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(rgba(47,111,214,0), rgba(47,111,214,.28)); border-bottom: 2px solid rgba(47,111,214,.7); opacity: 0; }
.find { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font); background: var(--paper); color: var(--ink); padding: 9px 12px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.14); opacity: 0; }
.scene.play .ocr-bar { animation: scanBar 7s linear infinite; }
.scene.play .ocr .sel::before { animation: selIn 7s var(--ease) infinite; }
.scene.play .ocr mark { animation: markIn 7s infinite; }
.scene.play .find { animation: findIn 7s var(--ease) infinite; }
@keyframes scanBar { 0% { top: -26px; opacity: 1; } 30% { top: 100%; opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes selIn { 0%, 34% { transform: scaleX(0); } 44%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes markIn { 0%, 54% { background: transparent; } 58%, 90% { background: rgba(255,200,60,.55); } 96%, 100% { background: transparent; } }
@keyframes findIn { 0%, 50% { opacity: 0; transform: translateY(-6px); } 56%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* убрать фон печати */
.bgrm { background-color: #EEE8DD; background-image: conic-gradient(#E0D8CB 25%, transparent 0 50%, #E0D8CB 0 75%, transparent 0); background-size: 18px 18px; }
.chip { position: relative; padding: 26px; display: grid; place-items: center; }
.chip::before { content: ""; position: absolute; inset: 0; background: #D6CDB8; background-image: repeating-linear-gradient(transparent 0 13px, rgba(60,50,40,.28) 13px 15px), radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.5px); background-size: 100% 100%, 5px 5px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.seal.big { position: relative; width: 130px; height: 130px; font-size: 12px; box-shadow: none; outline: 2px solid #3D4BC0; outline-offset: -11px; background: transparent; }
.scene.play .chip::before { animation: bgOff 6s var(--ease) infinite; }
.scene.play .bgrm .tag-ok { animation: tagIn 6s infinite; }
@keyframes bgOff { 0%, 30% { opacity: 1; transform: none; } 46%, 88% { opacity: 0; transform: scale(1.04); } 96%, 100% { opacity: 1; transform: none; } }

/* печать и подпись — по отдельности */
.pgsep { min-height: 210px; }
.pgsep .seal.s1 { position: absolute; left: 30%; top: 70px; width: 96px; height: 96px; font-size: 10px; background: transparent; box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6.5px #3D4BC0; }
.pgsep .s2 { position: absolute; left: calc(30% + 70px); top: 92px; width: 100px; height: 44px; }
.selb { position: absolute; border: 1.5px dashed #2F6FD6; border-radius: 4px; opacity: 0; }
.selb i { position: absolute; left: -1.5px; top: -22px; font: 600 11.5px/1 var(--font); font-style: normal; color: #fff; background: #2F6FD6; padding: 4px 7px; border-radius: 4px 4px 4px 0; }
.selb.b1 { left: calc(30% - 6px); top: 64px; width: 108px; height: 108px; }
.selb.b2 { left: calc(30% + 64px); top: 86px; width: 112px; height: 56px; border-color: #C8202A; }
.selb.b2 i { background: #C8202A; }
.scene.play .selb.b1 { animation: selbIn 7s infinite, slideL 7s var(--ease-io) infinite; }
.scene.play .selb.b2 { animation: selbIn2 7s infinite; }
.scene.play .pgsep .s1 { animation: slideL 7s var(--ease-io) infinite; }
@keyframes selbIn2 { 0%, 30% { opacity: 0; transform: scale(.94); } 38%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes selbIn { 0%, 18% { opacity: 0; transform: scale(.94); } 26%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes slideL { 0%, 55% { translate: 0 0; } 68%, 88% { translate: -38px 10px; } 100% { translate: 0 0; } }

/* поля находятся сами */
.fd2 { gap: 12px; }
.frow { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; align-items: end; font-family: var(--doc); }
.frow .bl { position: relative; height: 26px; border-bottom: 1.5px solid #2F2420; }
.frow .bl.cellsb { width: 60%; border: 1.5px solid #2F2420; background-image: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), #2F2420 calc(12.5% - 1px) 12.5%); }
.frow .bl::after, .frow .cb::after { content: ""; position: absolute; inset: -4px -5px; border: 1.5px dashed #2F6FD6; border-radius: 4px; background: rgba(47,111,214,.08); opacity: 0; }
.ckrow { display: flex; align-items: center; gap: 10px; }
.cb { position: relative; width: 16px; height: 16px; border: 1.5px solid #2F2420; display: inline-block; }
.cb + * { margin-right: 14px; }
.fcount { justify-self: end; font: 600 13px/1 var(--font); color: #1C2E66; background: rgba(47,111,214,.12); padding: 7px 11px; border-radius: 999px; opacity: 0; }
.scene.play .frow .bl::after, .scene.play .frow .cb::after { animation: fdPop 7s infinite; animation-delay: calc(var(--i) * .35s); }
.scene.play .fcount { animation: tagIn 7s infinite; animation-delay: .6s; }
@keyframes fdPop { 0%, 6% { opacity: 0; transform: scale(.9); } 12%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }

/* подпись пачкой */
.batch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 0 6px; }
.fc { position: relative; aspect-ratio: 3 / 4; background: var(--paper); border-radius: 2px; padding: 12px; display: grid; align-content: start; gap: 4px; font: 13px/1.3 var(--doc); color: #2F2420;
  background-image: repeating-linear-gradient(rgba(47,36,32,.16) 0 1.5px, transparent 1.5px 9px); background-size: 72% 46%; background-position: 50% 78%; background-repeat: no-repeat; }
.fc b { font-size: 13px; } .fc span { font-size: 11px; color: var(--ink-2); }
.fc em { position: absolute; left: 50%; bottom: 10%; translate: -50% 0; font: 700 11px/1 var(--font); font-style: normal; color: #2346A8; border: 1.5px solid #2346A8; border-radius: 6px; padding: 6px 8px; white-space: nowrap; background: rgba(251,245,234,.85); opacity: 0; }
.bcount { grid-column: 1 / -1; color: rgba(255,252,246,.85); font: 500 14px/1.4 var(--font); margin-top: 6px; opacity: 0; }
.bcount b { color: #fff; }
.scene.play .fc em { animation: stampIn 7s infinite; animation-delay: calc(var(--i) * .45s); }
.scene.play .bcount { animation: tagIn 7s infinite; animation-delay: .9s; }
@keyframes stampIn { 0%, 6% { opacity: 0; transform: scale(1.5) rotate(-8deg); } 11% { opacity: 1; transform: scale(.95) rotate(-3deg); } 14%, 84% { opacity: 1; transform: rotate(-3deg); } 92%, 100% { opacity: 0; } }

/* проверить подписи */
.verify { background: var(--paper); border-radius: 12px; padding: 20px 22px; display: grid; gap: 4px; color: var(--ink); }
.vh { display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--font); margin-bottom: 8px; }
.vh svg { color: var(--mint-ink); }
.vr { display: grid; grid-template-columns: 22px 9em minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(47,36,32,.1); font-size: 14.5px; }
.vr::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font); color: #fff; background: #4F8A3A; transform: scale(0); }
.vr span { color: var(--ink-2); }
.vok { justify-self: start; margin-top: 10px; font: 700 14px/1 var(--font); color: #2F6A24; background: rgba(79,138,58,.15); padding: 9px 13px; border-radius: 999px; opacity: 0; }
.scene.play .vr::before { animation: tickIn 7s infinite; animation-delay: calc(var(--i) * .45s); }
.scene.play .vok { animation: tagIn 7s infinite; animation-delay: .8s; }
@keyframes tickIn { 0%, 8% { transform: scale(0); } 13% { transform: scale(1.2); } 16%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }

/* подача: было → стало */
.filing { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 16px; align-items: start; background: rgba(0,0,0,.14); padding: clamp(20px, 3vw, 32px); }
.fl-col { display: grid; gap: 8px; }
.fl-col > b { font-size: 15px; margin-bottom: 4px; color: rgba(255,252,246,.8); }
.fl { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; font: 500 15px/1.3 var(--font); background: rgba(255,255,255,.08); }
.fl span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl.bad span { color: #FFB4A8; }
.fl.ok { background: var(--paper); color: var(--ink); opacity: 0; }
.fl.ok span { color: #2F6A24; font-weight: 700; }
.fl-arrow { align-self: center; height: 2px; background: rgba(255,252,246,.6); position: relative; }
.fl-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid rgba(255,252,246,.6); }
.meter { margin-top: 6px; display: grid; gap: 6px; font-size: 13.5px; color: rgba(255,252,246,.85); opacity: 0; }
.meter i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
.meter i::after { content: ""; position: absolute; inset: 0; width: 28%; background: #8FD07A; transform: scaleX(0); transform-origin: left; }
.filing.go .fl.ok { animation: flIn 8s var(--ease) infinite; animation-delay: calc(var(--i) * .4s); }
.filing.go .meter { animation: tagIn 8s infinite; animation-delay: .6s; }
.filing.go .meter i::after { animation: meterIn 8s var(--ease) infinite; animation-delay: .6s; }
@keyframes flIn { 0%, 8% { opacity: 0; transform: translateX(-14px); } 14%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes meterIn { 0%, 52% { transform: scaleX(0); } 64%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }

@media (max-width: 860px) {
  .filing { grid-template-columns: minmax(0, 1fr); } .fl-arrow { display: none; }
  .batch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .vr { grid-template-columns: 22px minmax(0, 1fr); } .vr b { grid-column: 2; } .scanpg { width: 92%; padding: 16px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .fl.ok, .meter, .tag-ok, .find, .fcount, .vok, .bcount, .fc em, .selb { opacity: 1 !important; } .vr::before { transform: none !important; } }

/* ред. 4.8: функции версии 1.1 */
.v11 { display: inline-block; margin-left: 7px; font: 700 10.5px/1 var(--font); letter-spacing: .02em; color: var(--red-deep); background: rgba(200,32,42,.12); padding: 3px 6px; border-radius: 999px; vertical-align: 1px; white-space: nowrap; }
.tick .v11 { color: #FFD9D3; background: rgba(255,255,255,.12); }
.card .new.v11c { background: var(--ink-2); }

/* ред. 5.1: «Скачать» — 4 карточки (Установщик, Microsoft Store, Портативная, Linux и Android) */
.dlcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dlc.d { background: var(--mint); }
.dlc.d .btn[aria-disabled="true"] { background: var(--mint-ink) !important; }
@media (max-width: 1080px) { .dlcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .dlcards { grid-template-columns: minmax(0, 1fr); } }

/* ред. 5.1: страница «Конфиденциальность» */
.legal { padding-block: clamp(40px, 5vw, 64px) clamp(64px, 7vw, 96px); max-width: 980px; }
.legal h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 48px 0 18px; scroll-margin-top: 90px; }
.legal p { font-size: 17px; max-width: 46em; margin-bottom: 12px; }
.legal-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.legal-sum div { background: var(--paper); border-radius: 16px; padding: 18px 20px; display: grid; gap: 4px; box-shadow: inset 4px 0 0 var(--mint-deep); }
.legal-sum div:nth-child(2) { box-shadow: inset 4px 0 0 var(--sky-deep); } .legal-sum div:nth-child(3) { box-shadow: inset 4px 0 0 var(--lav-deep); } .legal-sum div:nth-child(4) { box-shadow: inset 4px 0 0 var(--red); }
.legal-sum b { font-size: 17px; } .legal-sum span { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.legal-t { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 16px; }
.legal-t th { text-align: left; vertical-align: top; width: 13em; padding: 16px 18px; background: var(--cream-2); border-radius: 12px 0 0 12px; font-weight: 700; }
.legal-t td { padding: 16px 18px; background: var(--paper); border-radius: 0 12px 12px 0; line-height: 1.55; }
.legal-date { color: var(--ink-2); font-size: 15px !important; margin-top: 36px; }
.todo { background: #F6E6B8; color: #5A4300; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
@media (max-width: 860px) {
  .legal-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-t, .legal-t tbody, .legal-t tr, .legal-t th, .legal-t td { display: block; width: auto; }
  .legal-t th { border-radius: 12px 12px 0 0; padding-bottom: 6px; } .legal-t td { border-radius: 0 0 12px 12px; padding-top: 6px; }
}
.dlcards .dlc { grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 26px; }
.dlcards .dlc .btn { white-space: normal; padding: 15px 22px; font-size: 16px; }

/* ред. 5.2: баннер согласия на cookie */
.cc { position: fixed; left: 20px; bottom: 20px; z-index: 80; max-width: 520px; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 18px 20px; box-shadow: 0 18px 50px rgba(42,29,25,.22), inset 0 0 0 1px rgba(42,29,25,.06); display: grid; gap: 14px; font-size: 15px; line-height: 1.5; animation: rise .5s var(--ease) both; }
.cc[hidden] { display: none; }
.cc a { color: var(--red-deep); font-weight: 600; }
.cc-b { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .cc { left: 10px; right: 10px; bottom: 10px; max-width: none; font-size: 14px; } }
@media (max-width: 480px) { .hide-xs { display: none; } }

.cc { max-width: 440px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 14px 16px 14px 20px; }
.cc p { margin: 0; }
@media (max-width: 600px) { .cc { grid-template-columns: minmax(0, 1fr); } }
.cc { max-width: 620px; }

/* ===== ред. 5.3 (25.10.2026): правки по замечаниям пользователя ===== */
/* 1. миниатюры в окне программы — у каждого документа своё лицо */
.thumbs i.tn { background: var(--paper); overflow: hidden; }
.thumbs i.tn::after { content: none; }
.tn > span { position: absolute; display: block; }
.tn .ttl { left: 22%; right: 22%; top: 10px; height: 4px; border-radius: 2px; background: rgba(47,36,32,.6); }
/* курсовая: титульный лист */
.t1 .a { left: 18%; right: 18%; top: 10px; height: 3px; background: rgba(47,36,32,.35); border-radius: 2px; }
.t1 .b { left: 30%; right: 30%; top: 17px; height: 3px; background: rgba(47,36,32,.25); border-radius: 2px; }
.t1 .ttl { top: 40px; left: 16%; right: 16%; height: 7px; background: #7A8A3A; }
.t1 .c { left: 24%; right: 24%; top: 52px; height: 3px; background: rgba(47,36,32,.3); border-radius: 2px; }
.t1 .who { right: 10%; width: 40%; top: 70px; height: 18px; background: repeating-linear-gradient(rgba(47,36,32,.28) 0 2px, transparent 2px 6px); }
.t1 .d { left: 38%; right: 38%; bottom: 9px; height: 3px; background: rgba(47,36,32,.35); border-radius: 2px; }
/* договор: текст, таблица, синяя печать */
.t2 .ttl { left: 18%; right: 18%; }
.t2 .txt { left: 12%; right: 12%; top: 22px; height: 30px; background: repeating-linear-gradient(rgba(47,36,32,.22) 0 1.5px, transparent 1.5px 6px); }
.t2 .tbl { left: 12%; right: 12%; top: 58px; height: 24px; border: 1.5px solid rgba(47,36,32,.35); background: linear-gradient(90deg, transparent 49%, rgba(47,36,32,.35) 49% 51%, transparent 51%), linear-gradient(transparent 46%, rgba(47,36,32,.35) 46% 54%, transparent 54%); }
.t2 .seal { left: 14%; bottom: 8px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(47,88,200,.75); box-shadow: inset 0 0 0 3px rgba(47,88,200,.12); }
.t2 .sg { left: 40%; bottom: 14px; width: 34%; height: 9px; border-bottom: 2px solid #23336E; border-radius: 0 0 60% 40%; transform: rotate(-6deg); }
/* статья: две колонки и цветной график */
.t3 .ttl { left: 14%; right: 14%; background: #2F6FB8; }
.t3 .col { top: 22px; width: 34%; height: 50px; background: repeating-linear-gradient(rgba(47,36,32,.22) 0 1.5px, transparent 1.5px 5.5px); }
.t3 .col.l { left: 12%; } .t3 .col.r { right: 12%; }
.t3 .ch { left: 14%; right: 14%; bottom: 9px; height: 30px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1.5px solid rgba(47,36,32,.4); }
.t3 .ch b { flex: 1; border-radius: 1px 1px 0 0; }
.t3 .ch b:nth-child(1) { height: 45%; background: #9BAA5A; } .t3 .ch b:nth-child(2) { height: 75%; background: #C98A4A; }
.t3 .ch b:nth-child(3) { height: 60%; background: #2F7DCC; } .t3 .ch b:nth-child(4) { height: 95%; background: #C8202A; }
/* анкета: поля, галочки, QR */
.t4 .ttl { left: 32%; right: 32%; }
.t4 .f { left: 12%; right: 12%; height: 9px; border-radius: 2px; background: rgba(47,125,204,.16); border-bottom: 1.5px solid rgba(47,36,32,.45); }
.t4 .f1 { top: 24px; } .t4 .f2 { top: 40px; right: 34%; } .t4 .f3 { top: 56px; background: repeating-linear-gradient(90deg, rgba(47,36,32,.45) 0 1.5px, transparent 1.5px 9px); border: 1.5px solid rgba(47,36,32,.45); }
.t4 .cbx { left: 12%; top: 74px; width: 9px; height: 9px; border: 1.5px solid rgba(47,36,32,.55); box-shadow: 18px 0 0 -0px var(--paper), 18px 0 0 1.5px rgba(47,36,32,.55); background: linear-gradient(45deg, transparent 40%, #2E8A4E 40% 60%, transparent 60%); }
.t4 .qr { right: 12%; bottom: 8px; width: 22px; height: 22px; background: conic-gradient(#2F2420 25%, transparent 0 50%, #2F2420 0 75%, transparent 0) 0 0 / 7px 7px, var(--paper); outline: 2px solid #2F2420; outline-offset: -2px; }
/* график в статье на листе */
.mchart { display: flex; align-items: flex-end; gap: 10px; height: 84px; margin: 10px 0 4px; padding: 0 6px; border-bottom: 1.5px solid rgba(47,36,32,.4); position: relative; }
.mchart span { width: 26px; height: var(--h); background: var(--c); border-radius: 2px 2px 0 0; opacity: .85; }
.mchart em { position: absolute; right: 0; top: 0; font-style: italic; font-size: 11px; color: var(--ink-2); max-width: 50%; text-align: right; }

/* 8. кнопки порталов реагируют на наведение */
.portals span { cursor: default; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.portals span:hover { background: var(--paper); color: var(--red-deep); border-color: var(--paper); transform: translateY(-2px); }

/* 9. анонс Linux и Android */
.ann { padding-block: clamp(56px, 7vw, 96px); }
.ann-tag { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px 8px 12px; border-radius: 999px; }
.ann-tag i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: annPulse 1.6s ease-in-out infinite; }
@keyframes annPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.ann h2 { margin-top: 18px; font-size: clamp(32px, 4.2vw, 58px); max-width: 15em; color: var(--white); }
.ann-lead { margin-top: 16px; font-size: 19px; max-width: 38em; color: rgba(255,252,246,.82); }
.ann-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.ann-c { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; background: rgba(255,252,246,.07); border: 1.5px solid rgba(255,252,246,.14); border-radius: 22px; padding: 26px; transition: background-color .25s, transform .25s var(--ease); }
.ann-c:hover { background: rgba(255,252,246,.11); transform: translateY(-3px); }
.ann-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--red); color: #fff; display: grid; place-items: center; }
.ann-c h3 { font-size: 26px; color: var(--white); }
.ann-c p { margin-top: 8px; color: rgba(255,252,246,.78); font-size: 16px; line-height: 1.5; }
.ann-st { display: inline-block; margin-top: 14px; font-style: normal; font-weight: 700; font-size: 13.5px; color: #F2C9A8; border: 1.5px solid rgba(242,201,168,.5); border-radius: 999px; padding: 4px 12px; }
.hero .meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .ann-cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ann-tag i { animation: none; } }

/* 11. подвал: три системы */
.os-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.osb { position: relative; display: flex; align-items: center; gap: 12px; min-width: 180px; padding: 14px 22px 14px 18px; border-radius: 18px; background: #FFFCF6; color: #5C1017; text-decoration: none; transition: transform .2s var(--ease), background-color .2s; }
.osb b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; } .osb small { display: block; font-size: 13px; font-weight: 600; opacity: .7; }
a.osb:hover { background: var(--pink); color: #5C1017; transform: translateY(-2px); }
.osb.off { background: rgba(255,252,246,.10); color: #F1DDD3; border: 1.5px dashed rgba(255,252,246,.35); cursor: default; }
.osb.off:hover { background: rgba(255,252,246,.16); }
.osb-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px; white-space: nowrap; background: #FFFCF6; color: #5C1017; font-style: normal; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s var(--ease); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.osb.off:hover .osb-tip, .osb.off:focus .osb-tip { opacity: 1; translate: -50% 0; }
.cols .soon-l { display: block; padding: 3px 0; color: rgba(241,221,211,.55); font-weight: 500; }
/* 12. подвал жирнее */
.foot .cols b { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.foot .cols a { font-weight: 600; }
.foot .cta h2 { font-weight: 800; }

/* 13. шапка темнеет при прокрутке — к бордовому подвалу */
.bar { transition: background-color .35s var(--ease); }
.bar.compact { background: #8F1219; }

/* 14. шапка: пункты меню не переносятся, кнопка не обрезается */
.nav > a, .nav > .dd > button, .bar .btn.small { white-space: nowrap; }
@media (max-width: 1500px) { .nav > a, .nav > .dd > button { padding: 10px 11px; } .bar .wrap { gap: 14px; } .nav { font-size: 15px; } }
@media (max-width: 1320px) { .bar .hide-xs { display: none; } .lang { padding: 8px 10px; } }
@media (max-width: 1180px) { .nav > a, .nav > .dd > button { padding: 9px 8px; font-size: 14.5px; } }
@media (max-width: 1080px) { .nav .hide-m { display: none; } }
@media (max-width: 600px) { .os-btns { width: 100%; } .osb { flex: 1 1 100%; } .osb-tip { display: none; } }

/* миниатюра договора — без таблицы: шапка, текст, выделенный пункт, подписи сторон, печать */
.t2 .ttl { left: 20%; right: 20%; top: 10px; }
.t2 .sub { left: 12%; right: 12%; top: 19px; height: 3px; background: linear-gradient(90deg, rgba(47,36,32,.3) 0 30%, transparent 30% 70%, rgba(47,36,32,.3) 70%); }
.t2 .txt { left: 12%; right: 12%; top: 28px; height: 22px; background: repeating-linear-gradient(rgba(47,36,32,.22) 0 1.5px, transparent 1.5px 6px); }
.t2 .hl2 { left: 12%; right: 20%; top: 53px; height: 6px; border-radius: 1px; background: rgba(240,190,80,.55); }
.t2 .txt2 { left: 12%; right: 12%; top: 63px; height: 16px; background: repeating-linear-gradient(rgba(47,36,32,.22) 0 1.5px, transparent 1.5px 6px); }
.t2 .sgl, .t2 .sgr { top: 88px; width: 32%; height: 10px; border-bottom: 1.5px solid rgba(47,36,32,.45); background: linear-gradient(rgba(47,36,32,.4), rgba(47,36,32,.4)) 0 0 / 60% 2px no-repeat; }
.t2 .sgl { left: 12%; } .t2 .sgr { right: 12%; }
.t2 .seal { left: 16%; top: 80px; bottom: auto; width: 26px; height: 26px; }
.t2 .sg { left: auto; right: 14%; top: 86px; bottom: auto; width: 28%; height: 8px; }
.t2 .tbl { display: none; }
/* ред. 5.3б: договор — без росчерка ручкой, только строки подписей и печать */
.t2 .sg { display: none; }
.t2 .sgl, .t2 .sgr { background: none; }
.t2 .sgl::after, .t2 .sgr::after { content: ""; position: absolute; left: 0; top: 14px; width: 70%; height: 2px; background: rgba(47,36,32,.35); border-radius: 1px; }
.t2 .seal { left: 20%; top: 79px; }
.stage .pop.dark { box-shadow: 0 0 0 1.5px rgba(255,252,246,.16), 0 18px 40px rgba(0,0,0,.35); }
.stage .win { box-shadow: 0 2px 4px rgba(60,40,30,.08), 0 24px 60px rgba(60,40,30,.22); }
/* ред. 5.3и: скруглены только верхние углы */
.stage { border-radius: 36px 36px 0 0; }
@media (max-width: 600px) { .stage { border-radius: 24px 24px 0 0; } }
/* ред. 5.3к: ещё чуть красного (25.10, 23:59) */
.stage { background: linear-gradient(165deg, #EBAD9C 0%, #DE8570 60%, #D06A54 100%); }