/* Примитивы pantano.ru — по инвентарю blocks.md. Один класс на тип блока,
   внутри — слоты. Токены в tokens.css. Теней нет, глоу нет. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink-1); font: 400 var(--fs-body)/1.55 var(--font); }
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: var(--bg); padding: 8px 12px; border: 2px solid var(--acc); }

/* --- типографика --- */
.label { font: 600 var(--fs-label)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.label--acc { color: var(--acc); }
.display { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; }
.h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.015em; font-weight: 600; }
.h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.01em; font-weight: 600; }
.h2 .quiet { color: var(--ink-3); font-weight: 600; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 58ch; }
.body { max-width: var(--measure); }
.small { font-size: var(--fs-small); color: var(--ink-3); }
.muted { color: var(--ink-2); }

/* --- действия --- */
.btn { display: inline-block; padding: 13px 22px; border-radius: var(--r2); font-weight: 600; text-decoration: none; border: 1px solid var(--btn-bg); color: var(--btn-ink); background: var(--btn-bg); cursor: pointer; font-family: inherit; font-size: var(--fs-body); line-height: 1.3; }
.btn:hover { background: var(--panel-2); border-color: var(--panel-2); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-1); }
.btn--ghost:hover { background: var(--bg-2); border-color: var(--line); }
.link { color: var(--acc); text-decoration: underline; text-underline-offset: 4px; }
.link--arrow::after { content: " \2192"; }
.pill { display: inline-block; padding: 10px 20px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-2); background: transparent; font: inherit; cursor: pointer; }
.pill[aria-selected="true"] { background: var(--ink-1); color: var(--bg); border-color: var(--ink-1); }
.badge { display: inline-block; font: 600 11px/1 var(--font); letter-spacing: .06em; background: var(--acc-soft); color: var(--acc); padding: 5px 7px; border-radius: var(--r1); margin-left: 8px; vertical-align: middle; text-transform: uppercase; }
.rollout { font: 12px/1 var(--mono); color: var(--ink-4); margin-top: 10px; }

/* --- кадр продукта: плоско, в линии; паспарту сейчас запечено в файл --- */
.frame { border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; background: var(--bg-2); }
.frame img, .frame video { width: 100%; }

/* --- секции: свободное пространство, без разделителей --- */
.section { padding: var(--s10) 0; }
.section--hero { padding: var(--s9) 0 var(--s10); }
.section--tight { padding: var(--s8) 0; }
.section-head { margin-bottom: var(--s6); }
.section-head .lead { margin-top: var(--s3); }

/* --- nav --- */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: var(--s6); padding-top: 14px; padding-bottom: 14px; }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; text-decoration: none; }
.nav__brand svg { width: 28px; height: 25px; color: var(--mark, var(--ink-1)); }
.nav__items { display: flex; gap: var(--s5); margin-left: auto; }
.nav__items a { text-decoration: none; color: var(--ink-2); }
.nav__items a:hover { color: var(--ink-1); }
.nav .btn { padding: 10px 18px; font-size: 15px; }
@media (max-width: 820px) { .nav__items { display: none; } }

/* --- hero --- */
.all { white-space: nowrap; }
.all__mark { font-size: inherit; display: inline-block; vertical-align: top; margin: .08em 0 0 .12em; width: .4em; height: .4em; border: .07em solid var(--ink-1); border-radius: 50%; background: var(--bg); padding: 0; cursor: pointer; transition: background .15s, transform .15s; }
.all__mark:hover, .all__mark[aria-expanded="true"] { background: var(--ink-1); transform: scale(1.1); }
.hero__title { position: relative; }
.all__note { position: absolute; left: 0; top: calc(100% + 12px); z-index: 5; max-width: 46ch; padding: var(--s5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r3); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--ink-2); box-shadow: 0 24px 60px -30px rgba(17,19,24,.35); }
.all__note p + p { margin-top: 12px; }
.all__note[hidden] { display: none; }
.hero__h1 { max-width: 40ch; }
.nb { white-space: nowrap; }
.br-wide { display: none; }
@media (min-width: 1100px) { .br-wide { display: inline; } }
.hero__lead { margin-top: var(--s5); max-width: 62ch; }
.hero__ctas { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.hero__note { margin-top: var(--s4); }
.hero__media { margin-top: var(--s8); }
.hero__panel[hidden] { display: none; }
.hero__panel .frame { aspect-ratio: 3 / 2; }
.hero__panel .frame img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.hero__panel--pair { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s4); }
.hero__panel--pair .frame:last-child { aspect-ratio: auto; position: relative; }
.hero__panel--pair .frame:first-child img { object-position: center; }
.hero__panel--pair .frame:last-child img { position: absolute; inset: 0; object-position: center top; }
@media (max-width: 820px) { .hero__panel--pair { grid-template-columns: 1fr; } .hero__panel--pair .frame:last-child { display: none; } }
.hero__tabs { display: flex; gap: 40px; justify-content: center; margin-top: var(--s6); font-size: 20px; color: var(--ink-4); flex-wrap: wrap; }
.hero__tabs button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 6px 0; }
.hero__tabs button[aria-selected="true"] { color: var(--ink-1); }
.hero__tabs button[aria-selected="true"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); margin-right: 10px; vertical-align: middle; }
.hero__tabline { text-align: center; max-width: 60ch; margin: var(--s4) auto 0; font-size: 19px; color: var(--ink-2); }
@media (max-width: 820px) { .hero__tabs { flex-direction: column; gap: 10px; align-items: flex-start; font-size: 18px; } .hero__tabline { text-align: left; margin-left: 0; } }

/* --- portrait-cards --- */
.pills { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); }
.pc-grid--two { grid-template-columns: 2fr 1fr; }
.pc { background: var(--bg-2); border-radius: var(--r4); padding: var(--s6); min-height: 440px; display: flex; flex-direction: column; overflow: hidden; }
.pc--ink { background: var(--panel); color: var(--on-panel); }
.pc--ink .label { color: var(--on-panel-2); }
.pc--ink .pc__sub { color: var(--on-panel-2); }
/* кадр-элемент: сидит внизу карточки и уходит под обрез справа и снизу, как в телеграм-карусели */
.pc__shot { margin: var(--s5) calc(-1 * var(--s6)) calc(-1 * var(--s6)) 0; margin-top: auto; padding: var(--s5) 0 0 var(--s4); background: var(--bg); border-radius: var(--r3) 0 0 0; border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.pc__shot img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: left top; border: 1px solid var(--line); border-right: 0; border-bottom: 0; border-radius: var(--r2) 0 0 0; }
.pc--ink .pc__list { color: var(--on-panel-2); }
.pc-grid--two .pc:first-child .pc__shot img { height: 220px; object-position: left top; }
/* цифра вместо кадра: одно число крупно и подпись к нему */
.pc__num { margin-top: auto; padding-top: var(--s6); font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.pc__numcap { font: 600 var(--fs-label)/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--on-panel-2); margin-top: 10px; }
.pc__list { margin-top: auto; padding: var(--s6) 0 0 18px; color: var(--ink-2); }
.pc__list li { margin-top: 6px; }
.pc__claim { font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; margin-top: 14px; }
.pc__sub { color: var(--ink-2); margin-top: 10px; }
.pc-group[hidden] { display: none; }
@media (max-width: 820px) { .pc-grid, .pc-grid--two { grid-template-columns: 1fr; } .pc { min-height: 0; } .pc__shot img, .pc-grid--two .pc:first-child .pc__shot img { height: 200px; } .pc__num { font-size: 48px; } }

/* --- feature-list --- */
.rows { margin-top: var(--s6); }
.row { display: grid; grid-template-columns: 2fr 3fr 3fr 2fr; gap: var(--s6); padding: var(--s7) 0; border-top: 1px solid var(--line); align-items: start; }
.row:last-child { border-bottom: 1px solid var(--line); }
.row__body { color: var(--ink-2); }
.row__links { text-align: right; }
.row--text > div:nth-child(2) { grid-column: 2 / 4; }
/* фрагмент под обрез: контейнер 4:3, видео увеличено и сдвинуто к элементу */
.frame--crop { position: relative; aspect-ratio: 4 / 3; }
.frame--crop video, .frame--crop img { position: absolute; left: var(--mx, 0); top: var(--my, 0); width: var(--mw, 100%); max-width: none; height: auto; }
.row__links a { display: inline-block; white-space: nowrap; }
@media (max-width: 820px) { .row { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s6) 0; } .row__links { text-align: left; } .row--text > div:nth-child(2) { grid-column: auto; } }

/* --- link-note, list-block, callout, doc-links --- */
.link-note { font-size: 19px; }
.list { columns: 2; column-gap: var(--s6); padding-left: 20px; max-width: 72ch; margin-top: var(--s4); }
.list li { break-inside: avoid; margin-bottom: 6px; }
.callout { border-left: 3px solid var(--ink-1); padding: var(--s2) var(--s5); max-width: 62ch; }
.callout__st { font-size: 24px; font-weight: 600; line-height: 1.25; }
.callout__detail { color: var(--ink-2); margin-top: 8px; }
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-top: var(--s5); max-width: 72ch; }
.doc { border: 1px solid var(--line); padding: var(--s4); border-radius: var(--r2); }
.doc small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 4px; }
@media (max-width: 820px) { .list { columns: 1; } .docs { grid-template-columns: 1fr; } }

/* --- чернильная панель / cta --- */
.panel { background: var(--panel); color: var(--on-panel); border-radius: var(--r4); padding: var(--s7); }
.panel .lead, .panel .muted { color: var(--on-panel-2); }
.panel .frame { border-color: var(--line-panel); background: var(--panel-2); }
.panel .btn { background: var(--on-panel); color: var(--panel); border-color: var(--on-panel); }
.panel .link { color: #3ddc97; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s6); counter-reset: s; }
.steps > div::before { counter-increment: s; content: counter(s); display: block; font: 600 13px/1 var(--mono); color: var(--on-panel-2); margin-bottom: 8px; }
/* финал: итог слева, контакты справа */
.panel--final { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s7); padding: var(--s8) var(--s7); }
.panel--final .label { color: var(--on-panel-2); }
.panel--final .lead { margin-top: var(--s4); }
.panel__contacts .label { margin-top: var(--s5); }
.panel__contacts .label:first-child { margin-top: 0; }
.panel__contacts a { display: block; color: var(--on-panel); text-decoration: none; font-size: 20px; font-weight: 600; margin-top: 6px; }
.panel__contacts a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px) { .steps, .panel--final { grid-template-columns: 1fr; } .panel { padding: var(--s5); } .panel--final { gap: var(--s5); } }

/* --- chips: облако возможностей --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); max-width: 72ch; }
.chips span { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 14px; font-size: var(--fs-small); color: var(--ink-2); }

/* --- launch: шаги и что нужно --- */
.launch { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s7); margin-top: var(--s6); align-items: start; }
.launch__steps { list-style: none; padding: 0; counter-reset: l; }
.launch__steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.launch__steps li:last-child { border-bottom: 1px solid var(--line); }
.launch__steps li::before { counter-increment: l; content: "0" counter(l); font: 600 13px/1 var(--mono); color: var(--acc); padding-top: 6px; grid-row: 1 / 3; }
.launch__steps b, .launch__steps p { grid-column: 2; }
.launch__steps b { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }
.launch__steps p { color: var(--ink-2); margin-top: 6px; }
.launch__needs { background: var(--bg-2); border-radius: var(--r4); padding: var(--s6); }
.launch__needs ul { list-style: none; padding: 0; margin-top: var(--s4); }
.launch__needs li { position: relative; padding-left: 26px; margin-top: 10px; }
.launch__needs li::before { content: "\2713"; position: absolute; left: 0; color: var(--acc); font-weight: 600; }
.launch__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.launch__chips span { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r2); padding: 5px 10px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 820px) { .launch { grid-template-columns: 1fr; gap: var(--s5); } }

/* --- faq: вопрос слева, ответы справа --- */
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s7); align-items: start; }
.faq .acc summary { font-size: var(--fs-h3); padding: 20px 0; }
.faq .acc p { color: var(--ink-2); padding: 0 0 20px 24px; max-width: 60ch; }
@media (max-width: 820px) { .faq { grid-template-columns: 1fr; gap: var(--s5); } .faq .acc summary { font-size: 18px; } }

/* --- deflist, table --- */
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: 10px var(--s6); max-width: 72ch; }
.deflist dt { color: var(--ink-3); }
.deflist dd { margin: 0; }
@media (max-width: 820px) { .deflist { grid-template-columns: 1fr; gap: 2px; } .deflist dd { margin-bottom: 12px; } }

/* --- footer --- */
.footer { border-top: 1px solid var(--line); padding: var(--s7) 0; color: var(--ink-3); font-size: var(--fs-small); }
.footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: var(--s6); }
.footer b { display: block; color: var(--ink-1); margin-bottom: 8px; font-weight: 600; }
.footer a { text-decoration: none; color: var(--ink-2); }
.footer a:hover { color: var(--ink-1); }
.footer__req { font: 13px/1.7 var(--mono); }
@media (max-width: 820px) { .footer .wrap { grid-template-columns: 1fr; } }

/* --- модальная форма заявки --- */
.modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(17,19,24,.55); padding: var(--gutter); }
.modal[open] { display: flex; }
.modal__box { background: var(--bg); border-radius: var(--r4); padding: var(--s7); width: min(560px, 100%); max-height: 92vh; overflow: auto; position: relative; }
.modal__close { position: absolute; top: 16px; right: 16px; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-3); }
.field { display: block; margin-top: var(--s4); }
.field span { display: block; font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 6px; }
.field input, .field select { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); color: var(--ink-1); }
.field input:focus, .field select:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
/* окно письма (mail.js): веб-почты и копирование — вместо mailto, который без почтовой программы молчит */
.btn--sm { padding: 8px 14px; font-size: var(--fs-small); }
.compose__lead { margin-top: var(--s2); }
.compose__apps { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.compose__or { margin-top: var(--s5); }
.compose__field { margin-top: var(--s3); }
.compose__field > span { display: block; font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 6px; }
.compose__field > div { display: flex; gap: var(--s2); align-items: flex-start; }
.compose__field input, .compose__field textarea { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-small); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg-2); color: var(--ink-1); resize: vertical; }
.compose__field[data-f="body"] > div { flex-direction: column; align-items: flex-end; }
.compose__field textarea { width: 100%; }
.legal-line { font-size: 13px; color: var(--ink-3); margin-top: var(--s4); }

/* --- раздел документации: проза из markdown, оглавление, каталог --- */
.section--doc { padding-bottom: var(--s6); }
.prose { max-width: 76ch; }
.prose h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.01em; font-weight: 600; margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--line); }
.prose h2:first-of-type { border-top: 0; padding-top: 0; }
.prose h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; margin-top: var(--s7); }
.prose h4 { font-size: var(--fs-body); font-weight: 600; margin-top: var(--s5); }
.prose p, .prose ul, .prose ol { margin-top: var(--s4); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-top: 6px; }
.prose li > ul, .prose li > ol { margin-top: 6px; }
.prose strong { font-weight: 600; }
.prose blockquote { margin: var(--s4) 0 0; padding: var(--s2) var(--s5); border-left: 3px solid var(--ink-1); color: var(--ink-2); }
.prose blockquote p { margin-top: 0; }
.prose table { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink-3); font-weight: 600; }
.prose code { font: 14px/1.4 var(--mono); background: var(--bg-2); padding: 1px 5px; border-radius: var(--r1); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
.prose .deflist { margin-top: var(--s4); }
.prose .callout { margin-bottom: var(--s6); }
.toc { margin-bottom: var(--s6); }
.toc ol { margin-top: var(--s3); padding-left: 0; list-style: none; columns: 2; column-gap: var(--s6); }
.toc li { break-inside: avoid; margin-top: 4px; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink-1); text-decoration: underline; text-underline-offset: 4px; }
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before { content: "+"; font-family: var(--mono); color: var(--ink-3); width: 14px; }
.acc[open] summary::before { content: "\2212"; }
.acc summary .quiet { color: var(--ink-4); font-weight: 400; }
.cat { margin: 0 0 var(--s4) 24px; display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 8px var(--s5); }
.cat dt { font-weight: 600; scroll-margin-top: 80px; }
.cat dt.is-target { color: var(--acc); }
.cat dt small { font: 600 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--acc); margin-left: 6px; }
.cat dd { margin: 0; color: var(--ink-2); }
.cat dd .rollout { display: block; margin-top: 4px; }
.shot { margin: var(--s5) 0 0; }
.shot img { width: 100%; border: 1px solid var(--line); border-radius: var(--r3); }
.shot figcaption { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.docs--grid { max-width: none; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .toc ol { columns: 1; } .cat { grid-template-columns: 1fr; gap: 2px; margin-left: 0; } .cat dd { margin-bottom: 10px; } .docs--grid { grid-template-columns: 1fr; } }

/* ============================================================
   Настроение страницы — слои против стерильности. Включаются
   атрибутом data-mood на body (через ?mood=a,b в адресе) и по
   умолчанию выключены. Решение владельца зафиксирует один набор.
   ============================================================ */
.section--hero { position: relative; isolation: isolate; }
.section--hero::before, .section--hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; }
/* warm: тёплое пятно, продолжающее паспарту кадров, и холодное внизу слева */
.section--hero::before { background:
  radial-gradient(55% 45% at 85% 8%, #fbe3da 0%, rgba(251,227,218,0) 70%),
  radial-gradient(40% 35% at 5% 95%, #e6f3ef 0%, rgba(230,243,239,0) 70%); }
body[data-mood~="warm"] .section--hero::before { opacity: 1; }
/* grid: точечная сетка, растворяется к краям */
.section--hero::after { background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); }
body[data-mood~="grid"] .section--hero::after { opacity: .9; }
/* glow: очень лёгкое свечение под кадрами первого экрана и итоговой панелью */
body[data-mood~="glow"] .hero__media .frame { box-shadow: 0 40px 90px -50px rgba(232,120,90,.32); border-color: rgba(227,229,233,.6); }
body[data-mood~="glow"] .panel { box-shadow: 0 50px 120px -60px rgba(232,120,90,.4); }
/* paspartu: вся страница на большом мягком паспарту, как розовый фон у Superhuman */
body[data-mood~="paspartu"] { background: linear-gradient(180deg, #faf3ef 0, #ffffff 720px); }
body[data-mood~="paspartu"] .nav { background: rgba(255,255,255,.7); }
/* glass: стекло — навигация и карточки полупрозрачные над серо-белым градиентом */
body[data-mood~="glass"] { background: linear-gradient(180deg, #f3f4f6 0, #ffffff 1100px); }
body[data-mood~="glass"] .nav { background: rgba(255,255,255,.55); backdrop-filter: blur(18px); }
body[data-mood~="glass"] .pc:not(.pc--ink), body[data-mood~="glass"] .launch__needs, body[data-mood~="glass"] .doc { background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(17,19,24,.04); }
/* suites: у трёх участков свой цвет и знак — в вкладках, надзаголовках карточек и ссылках рядов */
:root { --suite-front: #0f6e56; --suite-ops: #1f4fd8; --suite-loyal: #c2573b; }
.suite { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin-right: 8px; opacity: 0; width: 0; margin-right: 0; transition: opacity .2s; }
body[data-mood~="suites"] .suite { opacity: 1; width: 20px; margin-right: 8px; }
body[data-mood~="suites"] .hero__tabs button[aria-selected="true"]::before { display: none; }
body[data-mood~="suites"] .hero__tabs .suite { color: var(--ink-3); }
body[data-mood~="suites"] .hero__tabs button[aria-selected="true"] .suite { color: var(--ink-1); }
/* mark=warm: знак терракотой вместо зелени */
body[data-mark="warm"] { --mark: #c2573b; }
body[data-mark="green"] { --mark: var(--acc); }

/* tone: тот же подход (паспарту + свечение), но не персиковый — персик совпал с конкурентом.
   Включается ?tone=mint|sky|lilac|graphite; без tone — тёплый базовый. */
body[data-mood~="paspartu"][data-tone="mint"] { background: linear-gradient(180deg, #edf5f1 0, #ffffff 720px); }
body[data-mood~="paspartu"][data-tone="sky"] { background: linear-gradient(180deg, #edf2fb 0, #ffffff 720px); }
body[data-mood~="paspartu"][data-tone="lilac"] { background: linear-gradient(180deg, #f2effa 0, #ffffff 720px); }
body[data-mood~="paspartu"][data-tone="graphite"] { background: linear-gradient(180deg, #f1f2f4 0, #ffffff 720px); }
body[data-mood~="glow"][data-tone="mint"] .hero__media .frame, body[data-mood~="glow"][data-tone="mint"] .panel { box-shadow: 0 40px 90px -50px rgba(15,110,86,.32); }
body[data-mood~="glow"][data-tone="sky"] .hero__media .frame, body[data-mood~="glow"][data-tone="sky"] .panel { box-shadow: 0 40px 90px -50px rgba(31,79,216,.28); }
body[data-mood~="glow"][data-tone="lilac"] .hero__media .frame, body[data-mood~="glow"][data-tone="lilac"] .panel { box-shadow: 0 40px 90px -50px rgba(112,84,196,.28); }
body[data-mood~="glow"][data-tone="graphite"] .hero__media .frame, body[data-mood~="glow"][data-tone="graphite"] .panel { box-shadow: 0 40px 90px -50px rgba(17,19,24,.22); }