/* =========================================================
   Бизнес-инференс — система по мотивам x.ai
   Монохром, кремовые поверхности, чёрная таблетка-кнопка,
   окна и терминалы как главная иллюстрация.
   Тема следует настройке устройства.
   ========================================================= */

@font-face { font-family: "Geist"; src: url("fonts/geist-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+25CF, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geistmono-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geistmono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+25CF, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;

  --bg:      #ffffff;
  --cream:   #f9f8f6;
  --cream-2: #f1f0ed;
  --cream-3: #e9e7e3;
  --sand:    #f2ede5;
  --ink:     #0a0a0a;
  --slate:   #3b3b3b;
  --steel:   #545454;
  --fog:     #858585;
  --pewter:  #9d9d9d;
  --hair:    rgba(10, 10, 10, 0.08);
  --hair-2:  rgba(10, 10, 10, 0.14);
  --ring:    #d5d9e2;
  --on-ink:  #ffffff;
  --win:     #ffffff;
  --term:    #151515;
  --term-2:  #1d1d1d;
  --bubble-me: #ffffff;
  --shadow-panel: 0 30px 60px -20px rgba(10, 10, 10, 0.18), 0 0 0 1px rgba(10, 10, 10, 0.05);
  --shadow-win: 0 0 0 1px rgba(10, 10, 10, 0.06), 0 18px 40px -24px rgba(15, 23, 42, 0.28);

  /* Рамка с зерном — своя палитра: сумерки над песком */
  --art-1: #232846;
  --art-2: #5d6bb0;
  --art-3: #c9b7a4;
  --art-4: #efe7dc;

  --ok:   #2f9e5b;
  --run:  #6b63d9;
  --warn: #c98a1a;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Темп объясняющих анимаций: на странице их смотрят, в меню пролистывают */
  --tempo: 1.2;

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 11vw, 144px);
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0a0a0a;
    --cream:   #141414;
    --cream-2: #1b1b1b;
    --cream-3: #242424;
    --sand:    #211d18;
    --ink:     #f4f4f2;
    --slate:   #cfcfcc;
    --steel:   #a9a9a6;
    --fog:     #8a8a87;
    --pewter:  #6f6f6c;
    --hair:    rgba(255, 255, 255, 0.08);
    --hair-2:  rgba(255, 255, 255, 0.14);
    --ring:    #2c2c2c;
    --on-ink:  #0a0a0a;
    --win:     #161616;
    --term:    #111111;
    --term-2:  #1a1a1a;
    --bubble-me: #222222;
    --shadow-panel: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow-win: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -24px rgba(0, 0, 0, 0.7);
    --art-1: #0e1022;
    --art-2: #313a78;
    --art-3: #6d6153;
    --art-4: #2a2520;
    --ok: #4cc27f;
    --run: #9a93ff;
    --warn: #e0a83a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--on-ink); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* Ритм страницы: у каждой секции только нижний отступ, поэтому между любыми соседями ровно --section */
main > section { padding-block: 0 var(--section); }
.section { padding-block: 0 var(--section); }
.mono { font-family: var(--mono); }

/* ---------- Типографика ---------- */
.label { display: block; font-size: 15px; color: var(--fog); margin-bottom: 18px; }
.display { font-size: clamp(44px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.035em; }
.h1 { font-size: clamp(42px, 5.2vw, 68px); line-height: 1; letter-spacing: -0.032em; }
.h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.028em; }
.h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -0.018em; }
.tone { color: var(--fog); }
.sub { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--fog); max-width: 58ch; text-wrap: pretty; }
.body { color: var(--steel); line-height: 1.6; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 500; line-height: 1.25; text-align: center; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ghost { border-color: var(--ring); color: var(--ink); background: transparent; }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 12px 26px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { opacity: 0.86; }
  .btn--ghost:hover { background: var(--cream-2); border-color: var(--cream-3); }
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.note { margin-top: 14px; font-size: 13.5px; color: var(--pewter); max-width: 48ch; }
.link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.link svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover svg { transform: translateX(3px); } }

/* ---------- Знак (логотип Ирека: шеврон ведёт к результату) ---------- */
.mark { width: 20px; height: 28px; flex: none; overflow: visible; }
/* Перекладины на глаз совпадают с неактивными пунктами меню: крупная заливка кажется темнее тонкого текста, поэтому тон светлее */
.mark .a1, .mark .a2 { fill: #a3a3a3; }
@media (prefers-color-scheme: dark) { .mark .a1, .mark .a2 { fill: #7a7a77; } }
.mark .r { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.mark .a1, .mark .a2 { transform-box: fill-box; }
/* Знак собирается только на первой странице за визит, дальше стоит сразу */
.is-loaded:not(.mk-seen) .header .mark .a1 { animation: mk-in 420ms var(--ease-out) both; }
.is-loaded:not(.mk-seen) .header .mark .a2 { animation: mk-in 420ms var(--ease-out) 80ms both; }
.is-loaded:not(.mk-seen) .header .mark .r { animation: mk-pop 420ms var(--ease-out) 360ms both; }
@keyframes mk-in { from { opacity: 0; transform: translateX(-12%); } }
@keyframes mk-pop { from { opacity: 0; transform: scale(0.9); } }

/* =========================================================
   ШАПКА И МЕГА-МЕНЮ
   ========================================================= */
.header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow 200ms ease; }
.header.is-scrolled { box-shadow: 0 1px 0 var(--hair); }
.bar { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); height: 68px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 20px; }
.nav-item > button, .nav-item > a {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; background: none; border-radius: 999px;
  font-size: 15px; font-weight: 450; color: var(--fog); cursor: pointer; transition: color 150ms ease;
}
.nav-item > button[aria-expanded="true"], .nav-item > [aria-current="page"], .nav-item > button[data-current] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .nav-item > button:hover, .nav-item > a:hover { color: var(--ink); } }
.chev { width: 12px; height: 12px; transition: transform 200ms var(--ease-out); }
.nav-item > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; border-radius: 999px; cursor: pointer; align-items: center; justify-content: center; }

.mega {
  position: absolute; left: 50%; top: 68px; width: min(1160px, calc(100vw - 32px));
  translate: -50% 0;
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; padding: 16px;
  background: var(--cream); border-radius: 20px; box-shadow: var(--shadow-panel);
  opacity: 0; transform: translateY(-6px) scale(0.99); transform-origin: top center; visibility: hidden;
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s 220ms;
}
.mega { --tempo: 1; }
.mega.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mega.is-swap { transition: none; }
.mega-list { display: grid; align-content: start; gap: 2px; }
.mega-list a { display: block; padding: 16px 20px; border-radius: 12px; transition: background-color 150ms ease; }
.mega-list a b { display: block; font-size: 18px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 4px; }
.mega-list a span { display: block; font-size: 15px; line-height: 1.45; color: var(--fog); }
.mega-list a[data-active] { background: var(--cream-2); }
.mega-stage { position: relative; border-radius: 14px; overflow: hidden; min-height: 520px; background: var(--cream-2); }
.pv { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s 160ms; }
.pv.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

.m-panel { display: none; }
@media (max-width: 1080px) {
  .nav, .bar-end .btn--ghost { display: none; }
  .burger { display: inline-flex; }
  .mega { display: none; }
  .m-panel { position: fixed; inset: 68px 0 0; z-index: 99; background: var(--bg); overflow-y: auto; padding: 8px var(--gutter) 40px; }
  .m-panel[data-open] { display: block; animation: m-in 220ms var(--ease-out); }
  @keyframes m-in { from { opacity: 0; transform: translateY(-6px); } }
  .m-panel details { border-bottom: 1px solid var(--hair); }
  .m-panel summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 60px; font-size: 22px; letter-spacing: -0.015em; cursor: pointer; }
  .m-panel summary::-webkit-details-marker { display: none; }
  .m-panel details[open] summary .chev { transform: rotate(180deg); }
  .m-panel details a { display: block; padding: 10px 0; }
  .m-panel details a b { display: block; font-weight: 400; font-size: 17px; }
  .m-panel details a span { display: block; font-size: 14px; color: var(--fog); }
  .m-panel details > div { padding-bottom: 14px; }
  .m-panel > a { display: flex; align-items: center; min-height: 60px; font-size: 22px; letter-spacing: -0.015em; border-bottom: 1px solid var(--hair); }
  .m-panel .btn { margin-top: 24px; width: 100%; }
}
@media (max-width: 420px) { .brand-name { display: none; } }

/* =========================================================
   ОКНА, ТЕРМИНАЛЫ, ЧАТ, РАМКА С ЗЕРНОМ
   ========================================================= */
.win { background: var(--win); border-radius: 14px; box-shadow: var(--shadow-win); overflow: hidden; }
.win-top { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--hair); }
.dots { display: inline-flex; gap: 7px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #ffbd2e; }
.dots i:nth-child(3) { background: #28c840; }
.win-title { font-family: var(--mono); font-size: 13px; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-meta { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--fog); white-space: nowrap; }
.win-body { padding: 20px 22px 22px; font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: var(--slate); }

.term { background: var(--term); color: #d9d9d6; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.04); }
.term .win-top { border-bottom-color: rgba(255,255,255,0.07); }
.term .win-title, .term .win-meta { color: #8b8b88; }
.term-body { padding: 18px 22px; font-family: var(--mono); font-size: 13.5px; line-height: 1.85; }
.term-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid rgba(255,255,255,0.07); background: var(--term-2); font-family: var(--mono); font-size: 13.5px; color: #e8e8e5; }
.t-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.t-g { color: #8b8b88; }
.t-k { color: #7fd3a7; }
.t-b { color: #a9a3ff; }
.t-y { color: #e8c170; }
.t-w { color: #f1f1ee; }
.t-st { font-size: 12.5px; }
.t-st.run { color: #a9a3ff; }
.t-st.ok { color: #7fd3a7; }
.t-st.wait { color: #e8c170; }
.t-add { background: rgba(76, 194, 127, 0.14); }

.chat { display: flex; flex-direction: column; gap: 12px; }
.bub { max-width: 82%; padding: 12px 18px; border-radius: 22px; font-size: 15px; line-height: 1.5; }
.bub--me { align-self: flex-end; background: var(--bubble-me); color: var(--ink); box-shadow: 0 0 0 1px var(--hair); }
.bub--ai { align-self: flex-start; background: var(--bg); color: var(--steel); box-shadow: 0 0 0 1px var(--hair); }
.bub .file { display: inline-block; font-family: var(--mono); font-size: 13px; padding: 0 6px; border-radius: 6px; background: var(--cream-2); color: var(--ink); }

.art { position: relative; padding: clamp(28px, 5vw, 64px); isolation: isolate; border-radius: 16px; overflow: hidden; }
.art::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--art-2) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, var(--art-1) 0%, transparent 60%),
    radial-gradient(80% 70% at 85% 95%, var(--art-3) 0%, transparent 60%),
    var(--art-4);
}
.art::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.tab { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 0; background: none; font-size: 14.5px; color: var(--fog); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.tab[aria-selected="true"] { background: var(--cream-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--ink); } }

/* ---------- Последовательности (перезапускаются классом .run) ---------- */
.sq { opacity: 0; transform: translateY(6px); }
.run .sq { animation: sq-in calc(420ms * var(--tempo)) var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); }
@keyframes sq-in { to { opacity: 1; transform: none; } }
.run .sq-type { animation: sq-in calc(420ms * var(--tempo)) var(--ease-out) forwards, sq-type calc(700ms * var(--tempo)) steps(24) forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); clip-path: inset(0 100% 0 0); }
@keyframes sq-type { to { clip-path: inset(0 0 0 0); } }

/* =========================================================
   ПРЕВЬЮ В МЕНЮ
   ========================================================= */
.pv-pad { position: absolute; inset: 0; padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; }
.pv .term { position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; }
.pv .term .term-body { flex: 1; }

/* Сайт с ИИ-админкой: мини-сайт и сообщение боту */
.site-mock { background: var(--bg); border-radius: 12px; box-shadow: var(--shadow-win); overflow: hidden; }
.site-mock .sm-top { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 12px; color: var(--fog); }
.sm-body { padding: 18px; display: grid; gap: 10px; }
.sm-bar { height: 10px; border-radius: 6px; background: var(--cream-3); }
.sm-hero { position: relative; height: 92px; border-radius: 10px; background: var(--cream-2); overflow: hidden; }
.sm-promo { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 18px; background: var(--ink); color: var(--on-ink); clip-path: inset(0 100% 0 0); }
.run .sm-promo { animation: sm-wipe calc(520ms * var(--tempo)) var(--ease-in-out) forwards; animation-delay: calc(1000ms * var(--tempo)); }
@keyframes sm-wipe { to { clip-path: inset(0 0 0 0); } }
.sm-promo b { font-weight: 450; font-size: 15px; letter-spacing: -0.01em; }
.sm-promo span { font-size: 12px; opacity: 0.7; }
.sm-promo i { align-self: flex-start; font-style: normal; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: var(--on-ink); color: var(--ink); }
.sm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sm-cards span { height: 52px; border-radius: 8px; background: var(--cream-2); }
.sm-ring { position: absolute; inset: -3px; border-radius: 12px; box-shadow: 0 0 0 2px var(--run); opacity: 0; }
.run .sm-ring { animation: sm-ring calc(1400ms * var(--tempo)) ease forwards; animation-delay: calc(600ms * var(--tempo)); }
@keyframes sm-ring { 20% { opacity: 1; } 70% { opacity: 1; } to { opacity: 0; } }

/* Экспорт: три стороны */
.parties { position: relative; display: grid; gap: 22px; }
.party { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); }
.party-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--cream-2); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--ink); }
.party b { display: block; font-weight: 450; font-size: 16px; }
.party span { display: block; font-size: 13.5px; color: var(--fog); line-height: 1.4; }
.party-link { justify-self: center; width: 1px; height: 22px; margin-block: -22px; background: var(--hair-2); position: relative; overflow: hidden; }
.party-link::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: top; }
.run .party-link::after { animation: link-grow calc(500ms * var(--tempo)) var(--ease-in-out) forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); }
@keyframes link-grow { to { transform: scaleY(1); } }

/* =========================================================
   ГЛАВНАЯ
   ========================================================= */
.hero { padding-block: clamp(56px, 9vw, 120px) var(--section); text-align: center; }
.hero .display { max-width: 14ch; margin-inline: auto; }
.hero .sub { margin: 26px auto 0; }
.hero .actions { justify-content: center; margin-top: 34px; }
.hero .note { margin-inline: auto; }
.hero-art { margin-top: clamp(48px, 7vw, 88px); }
.hero-art .art { max-width: 1060px; margin-inline: auto; padding: clamp(20px, 5vw, 72px) clamp(16px, 6vw, 96px); }
.hero-win { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); text-align: left; }
.hero-win .chat { padding: 22px; background: var(--cream); border-right: 1px solid var(--hair); }
.hero-win .term { border-radius: 0; box-shadow: none; }
@media (max-width: 820px) { .hero-win { grid-template-columns: minmax(0, 1fr); } .hero-win .chat { border-right: 0; border-bottom: 1px solid var(--hair); } }

/* Карточки-продукты: медиа сверху, текст снизу */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--cream); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.card-media { position: relative; height: 240px; margin: 8px 8px 0; border-radius: 10px; background: var(--cream-2); overflow: hidden; }
.card-text { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-text .body { font-size: 15.5px; }
.card-change { color: var(--ink); font-size: 15.5px; line-height: 1.55; }
.card-change b { font-weight: 500; }
.card-text .link { margin-top: auto; padding-top: 6px; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }

/* Инфографики в карточках */
.ig { position: absolute; inset: 0; display: grid; place-items: center; }
.ig svg { width: 100%; height: 100%; }
.ig .stroke { fill: none; stroke: var(--pewter); stroke-width: 1.2; }
.ig .ink { fill: var(--ink); }
.ig .inkS { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ig .paper { fill: var(--bg); stroke: var(--hair-2); stroke-width: 1; }
.ig .soft { fill: var(--cream-3); }
.ig text { font-family: var(--mono); font-size: 11px; fill: var(--fog); }
.ig .t-ink { fill: var(--ink); }
.ig .flow { stroke-dasharray: 4 6; animation: none; }
.run .ig .flow, .ig.run .flow { animation: ig-dash calc(1.2s * var(--tempo)) linear 3 forwards; }
@keyframes ig-dash { to { stroke-dashoffset: -30; } }
.ig .pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.run .ig .pop, .ig.run .pop { animation: ig-pop calc(500ms * var(--tempo)) var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); }
@keyframes ig-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.ig .draw { stroke-dasharray: 400; stroke-dashoffset: 400; }
.run .ig .draw, .ig.run .draw { animation: ig-draw calc(1200ms * var(--tempo)) var(--ease-in-out) forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); }
@keyframes ig-draw { to { stroke-dashoffset: 0; } }

/* Блок «текст слева, окно справа» */
.feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.feature .sub { margin-top: 22px; }
.feature .actions { margin-top: 30px; }
.feature--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.feature--flip > :first-child { order: 2; }
@media (max-width: 960px) { .feature, .feature--flip { grid-template-columns: minmax(0, 1fr); } .feature--flip > :first-child { order: 0; } }

.stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 44px; }
.stat b { display: block; font-weight: 400; font-size: 18px; color: var(--ink); }
.stat span { display: block; font-size: 13px; color: var(--pewter); }

/* Где теряется результат: вкладки-проблемы и окно */
.loss-win .win-body { min-height: 360px; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--steel); }
.loss-win .lw-title { font-size: 22px; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 12px; line-height: 1.3; }
.loss-win .lw-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--hair); }
.loss-win .lw-row:first-of-type { margin-top: 18px; }
.loss-win .lw-k { font-family: var(--mono); font-size: 12.5px; color: var(--fog); padding-top: 3px; }
.loss-win .lw-res { color: var(--ink); }
.loss-panel[hidden] { display: none; }
.loss-panel { animation: panel-in 220ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } }
.closing { margin-top: clamp(56px, 7vw, 96px); padding-top: 32px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.closing p { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; letter-spacing: -0.018em; max-width: 36ch; }
@media (max-width: 700px) { .closing { grid-template-columns: 1fr; } .loss-win .lw-row { grid-template-columns: 1fr; gap: 4px; } }

/* Титры задач */
.tape-text { font-size: clamp(26px, 3.6vw, 52px); line-height: 1.18; letter-spacing: -0.028em; color: var(--pewter); text-wrap: pretty; }
/* Луч с переливом в духе Apple: вне луча серый, к центру экрана проявляется яркий спектр.
   Спектр общий на весь экран и сдвигается при прокрутке (--shift), сам по себе не крутится */
.tape-text { --g1: #0894ff; --g2: #7b61ff; --g3: #c959dd; --g4: #ff2e54; --g5: #ff9004; --shift: 0; }
.tape-text span:not(.sep) {
  color: transparent;
  background-image: linear-gradient(100deg,
    color-mix(in oklab, var(--g1) calc(var(--t, 0) * 100%), var(--pewter)) 0%,
    color-mix(in oklab, var(--g2) calc(var(--t, 0) * 100%), var(--pewter)) 20%,
    color-mix(in oklab, var(--g3) calc(var(--t, 0) * 100%), var(--pewter)) 40%,
    color-mix(in oklab, var(--g4) calc(var(--t, 0) * 100%), var(--pewter)) 60%,
    color-mix(in oklab, var(--g5) calc(var(--t, 0) * 100%), var(--pewter)) 80%,
    color-mix(in oklab, var(--g1) calc(var(--t, 0) * 100%), var(--pewter)) 100%);
  background-size: 200% 100%;
  background-position: calc(var(--shift) * 1%) 0;
  background-attachment: fixed;
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tape-text .sep { color: var(--cream-3); }

/* Сценарий в Telegram */
.scenario { background: var(--cream); border-radius: 20px; padding: clamp(10px, 1.2vw, 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.sc-chat { background: var(--cream-2); border-radius: 14px; display: flex; flex-direction: column; height: clamp(560px, 68vh, 660px); overflow: hidden; }
.sc-chat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.sc-chat-top span { color: var(--fog); font-family: var(--mono); font-size: 12.5px; }
.sc-feed { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; overscroll-behavior: contain; }
.sc-feed .bub ul { margin-top: 8px; }
.sc-feed .bub li { padding-left: 14px; position: relative; }
.sc-feed .bub li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 6px; height: 1px; background: currentColor; opacity: 0.5; }
.sc-feed .bub p + p { margin-top: 8px; }
.sc-status { align-self: stretch; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--fog); padding: 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); }
.choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.choice button { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--ring); background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: transform 160ms var(--ease-out), opacity 160ms ease; }
.choice button.is-main { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.choice button:active { transform: scale(0.97); }
.choice button:disabled { cursor: default; opacity: 0.45; }
.choice button.is-main:disabled { opacity: 1; }
.choice-hint { margin-top: 8px; font-size: 12.5px; color: var(--pewter); }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 22px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); align-self: flex-start; }
.typing--me { align-self: flex-end; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--pewter); animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing { 50% { opacity: 0.3; } }

.sc-term { display: flex; flex-direction: column; min-height: 100%; }
.sc-term .term-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.sc-log .t-line { opacity: 0; transform: translateY(6px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.sc-log .t-line[data-on] { opacity: 1; transform: none; }
.sc-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 22px 0; min-height: 44px; }
.sc-tools span { font-family: var(--mono); font-size: 12px; padding: 2px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); color: #bdbdba; opacity: 0; transition: opacity 260ms ease; }
.sc-tools span[data-on] { opacity: 1; }
.sc-path { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; padding: 18px 22px 20px; border-top: 1px solid rgba(255,255,255,0.07); }
.sc-path::before, .sc-path i { content: ""; position: absolute; top: 24px; left: calc(22px + (100% - 44px) / 12); right: calc(22px + (100% - 44px) / 12); height: 1px; }
.sc-path::before { background: rgba(255,255,255,0.14); }
.sc-path i { background: #f1f1ee; transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-in-out); }
.sc-path span { position: relative; display: grid; justify-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: #77776f; text-align: center; transition: color 200ms ease; }
.sc-path span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--term); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); transition: background-color 200ms ease, box-shadow 200ms ease; }
.sc-path span[data-on] { color: #e8e8e5; }
.sc-path span[data-on]::before { background: #f1f1ee; box-shadow: none; }
.sc-path span:last-child[data-on] { color: #7fd3a7; }
.sc-path span:last-child[data-on]::before { background: #7fd3a7; box-shadow: 0 0 0 5px rgba(127, 211, 167, 0.18); }
.sc-path[data-wait] i { background: #e8c170; }
.sc-again { margin-left: 12px; min-height: 28px; padding: 2px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: none; color: #e8e8e5; font-family: var(--mono); font-size: 12px; cursor: pointer; transition: border-color 150ms ease, transform 160ms var(--ease-out); }
.sc-again:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sc-again:hover { border-color: rgba(255,255,255,0.4); } }
@media (max-width: 900px) { .scenario { grid-template-columns: minmax(0, 1fr); } .sc-chat { height: 520px; } .sc-path span { font-size: 10px; } .sc-path span:nth-child(even) { gap: 22px; } }

/* Объяснение: список действий в окне */
.steps-win .win-body { padding: 10px 22px 16px; }
.steps-win li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding-block: 9px; border-bottom: 1px solid var(--hair); font-family: var(--sans); font-size: 15.5px; color: var(--ink); }
.steps-win li:last-child { border-bottom: 0; }
.steps-win .n { font-family: var(--mono); font-size: 12px; color: var(--pewter); }
.steps-win .ok { font-family: var(--mono); font-size: 12px; color: var(--ok); opacity: 0; }
.run .steps-win .ok, .steps-win.run .ok { animation: sq-in calc(300ms * var(--tempo)) var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); }

/* Трансформация: уровни решения */
.levels .term-body { padding-block: 22px; }
.levels .t-line { padding-block: 2px; }
.levels .lv { color: #8b8b88; }
.run .levels .lv-pick { animation: lv-pick calc(500ms * var(--tempo)) var(--ease-out) forwards; animation-delay: calc(2400ms * var(--tempo)); }
@keyframes lv-pick { to { color: #f1f1ee; background: rgba(169, 163, 255, 0.14); } }

/* Маршруты — индекс в 4 колонки */
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.route { display: flex; flex-direction: column; gap: 12px; }
.route-media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--cream); overflow: hidden; margin-bottom: 8px; }
.route .h3 { font-size: 18px; font-weight: 450; }
.route p { font-size: 15px; color: var(--steel); }
.route .link { margin-top: auto; }
@media (max-width: 1000px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .routes { grid-template-columns: 1fr; } }

/* Кейсы — кремовые панели с чек-листом */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case { background: var(--cream); border-radius: 16px; padding: clamp(28px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.pill { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--sand); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.case .h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; }
.case .body { font-size: 15.5px; }
.case-val { padding-top: 16px; border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.55; }
.case-val b { font-weight: 500; }
.checks { display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.checks svg { width: 16px; height: 16px; margin-top: 2px; }
.checks-k { font-size: 13px; color: var(--pewter); margin-bottom: 2px; }
@media (max-width: 820px) { .cases { grid-template-columns: 1fr; } }

/* Принципы */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.principle { padding: 32px; border-radius: 16px; background: var(--cream); }
.principle .h3 { margin-bottom: 14px; }
.principle p { color: var(--steel); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 860px) { .principles { grid-template-columns: 1fr; } }

/* Финал */
.final { text-align: center; }
.final .h1 { max-width: 18ch; margin-inline: auto; }
.final .sub { margin: 24px auto 0; }
.final .actions { justify-content: center; margin-top: 34px; }
.final .note { margin-inline: auto; }

.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head:last-child { margin-bottom: 0; }
/* Шапка секции во всю ширину: подпись и заголовок слева, абзац справа по нижней линии */
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.section-head--split > .sub { padding-top: 0.5em; }
.section-head--split .sub { margin: 0; justify-self: end; max-width: 52ch; }
@media (max-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr); gap: 20px; } .section-head--split .sub { justify-self: start; } }
.section-head.center .sub { margin-inline: auto; margin-top: 18px; }

/* ---------- Подвал ---------- */
/* ---------- Подвал: огромное название, по которому за курсором идёт спектр ---------- */
.fx { border-top: 1px solid var(--hair); padding-top: clamp(56px, 7vw, 88px); overflow: hidden; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 0.7fr) minmax(0, 1.15fr); gap: 28px; }
.fx h2 { font-size: 13.5px; color: var(--pewter); margin-bottom: 14px; }
.fx li + li { margin-top: 10px; }
.fx nav a { font-size: 14.5px; color: var(--fog); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .fx nav a:hover, .fx-legal a:hover, .fx-status a:hover { color: var(--ink); } }
.fx-brand .qr-card { margin-top: 24px; max-width: 300px; }
.fx-brand .qr-card .qr { width: 80px; height: 80px; }
.fx-status { padding: 20px 22px; border-radius: 16px; background: var(--cream); align-self: start; }
.fx-status h2 { margin-bottom: 12px; }
.fx-zeros li { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--steel); }
.fx-zeros li + li { margin-top: 6px; }
.fx-zeros b { min-width: 1ch; font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--ink); }
.fx-status p { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--fog); }
.fx-status a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; transition: color 150ms ease; }
.fx-mark { margin-top: clamp(28px, 4vw, 56px); height: clamp(64px, 9.4vw, 112px); }
.fx-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-mark text { font-family: var(--sans); font-size: 140px; font-weight: 500; }
/* В покое название серое, под курсором проявляется яркий спектр во всю силу */
.fx-base { fill: var(--cream-3); }
.fx-glow { opacity: 0; transition: opacity 300ms var(--ease-out); }
.fx-mark.is-lit .fx-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-glow { transition: none; } }
/* Спектр идёт через всё слово; под курсором перетекает вслед за ним */
.fx-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.5; color: var(--pewter); }
.fx-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fx-legal a { transition: color 150ms ease; }
[data-todo] { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--ink); border-radius: 4px; padding-inline: 4px; }
@media (max-width: 1080px) { .fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fx-brand { grid-column: 1 / -1; } .fx-status { grid-column: span 3; max-width: 420px; } }
@media (max-width: 640px) { .fx-grid { grid-template-columns: 1fr 1fr; } .fx-status { grid-column: 1 / -1; } }

/* ---------- Документ: политика ---------- */
.doc-head { max-width: 860px; }
.doc-zeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc-zeros div { display: grid; gap: 8px; padding: 24px 26px; border-radius: 16px; background: var(--cream); }
.doc-zeros b { font-family: var(--mono); font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--ink); }
.doc-zeros span { font-size: 15.5px; color: var(--steel); }
.doc { max-width: 760px; }
.doc .h3 { margin: 40px 0 12px; }
.doc .h3:first-child { margin-top: 0; }
.doc p { font-size: 16.5px; line-height: 1.65; color: var(--steel); }
.doc p + p { margin-top: 12px; }
.doc b { font-weight: 500; color: var(--ink); }
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
@media (max-width: 760px) { .doc-zeros { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Уведомление о cookies: честное, без «принять» ---------- */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(340px, calc(100vw - 32px)); padding: 0 0 16px; border-radius: 16px; background: var(--term); color: #e8e8e5; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.ck.is-on { opacity: 1; transform: none; }
.ck-top { display: flex; align-items: center; gap: 12px; height: 38px; padding-inline: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 12px; color: #8b8b88; }
.ck-top .dots i { width: 9px; height: 9px; }
.ck-cmd, .ck-out { padding-inline: 16px; font-family: var(--mono); font-size: 12.5px; }
.ck-cmd { margin-top: 12px; color: #bdbdba; }
.ck-p { color: #7fd3a7; margin-right: 6px; }
.ck-out { color: #8b8b88; }
.ck-n { display: inline-block; font-weight: 500; color: #7fd3a7; }
.ck.is-on .ck-n { animation: ck-pop calc(420ms * var(--tempo)) var(--ease-out) calc(700ms * var(--tempo)) both; }
@keyframes ck-pop { from { opacity: 0; transform: translateY(4px) scale(0.9); } }
.ck-t { margin-top: 10px; padding-inline: 16px; color: #e8e8e5; }
.ck-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-inline: 16px; }
.ck-ok { min-height: 36px; padding: 6px 16px; border: 0; border-radius: 999px; background: #f4f4f2; color: #0a0a0a; font-weight: 500; font-size: 14px; cursor: pointer; transition: transform 160ms var(--ease-out); }
.ck-ok:active { transform: scale(0.97); }
.ck-row a { font-size: 13.5px; color: #bdbdba; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 3px; }
@media (max-width: 560px) { .ck { left: 12px; right: 12px; bottom: 12px; width: auto; } .ck-cmd { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .ck { transform: none; transition: opacity 200ms ease; } .ck.is-on .ck-n { animation: none; } }

/* =========================================================
   ЦИФРОВОЙ ИИ-СОТРУДНИК
   ========================================================= */
.p-hero { padding-block: clamp(48px, 7vw, 96px) var(--section); }
.p-hero .h1 { font-size: clamp(40px, 4.5vw, 62px); }
.p-hero .feature { align-items: center; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 60px); }
.p-hero .btn--lg { padding-inline: 18px; font-size: 14.5px; }
.p-hero .stats { gap: 28px; }
@media (max-width: 960px) { .p-hero .feature { grid-template-columns: minmax(0, 1fr); } }
.role-win .win-body { min-height: 300px; }
.role-win .rw-name { color: var(--ink); }
.role-panel[hidden] { display: none; }
.role-panel .t-line { grid-template-columns: 18px minmax(0, 1fr); }
.intro2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); padding-top: 36px; border-top: 1px solid var(--hair); }
.intro2 p { font-size: 17px; line-height: 1.65; color: var(--steel); }
@media (max-width: 760px) { .intro2 { grid-template-columns: 1fr; } }

.pipe-panel { background: var(--cream); border-radius: 20px; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 56px); }
.pipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.pipe::before, .pipe::after { content: ""; position: absolute; top: 27px; left: calc(100% / 12); right: calc(100% / 12); height: 1px; }
.pipe::before { background: var(--hair-2); }
.pipe::after { background: var(--ink); transform: scaleX(0); transform-origin: left; }
.run .pipe::after, .pipe.run::after { animation: pipe-grow calc(2400ms * var(--tempo)) var(--ease-in-out) calc(200ms * var(--tempo)) forwards; }
@keyframes pipe-grow { to { transform: scaleX(1); } }
.pipe li { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 18px; padding-inline: 8px; text-align: center; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.3; color: var(--fog); text-wrap: balance; }
.pipe .pipe-t { display: grid; gap: 8px; justify-items: inherit; }
.pipe .pipe-t b { font-weight: 500; color: var(--ink); }
.pipe .pipe-d { font-size: 14px; line-height: 1.45; color: var(--pewter); max-width: 28ch; }
.pipe .node { position: relative; width: 54px; height: 54px; border-radius: 16px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--pewter); transition: color 300ms ease, box-shadow 300ms ease, background-color 300ms ease; }
.pipe.run li { animation: pipe-on 1ms linear forwards; animation-delay: calc((var(--i) * 420ms + 300ms) * var(--tempo)); }
.pipe.run li .node { animation: node-on calc(300ms * var(--tempo)) ease forwards; animation-delay: calc((var(--i) * 420ms + 300ms) * var(--tempo)); }
@keyframes pipe-on { to { color: var(--ink); } }
@keyframes node-on { to { color: var(--on-ink); background: var(--ink); box-shadow: none; } }
.pipe-note { margin-top: 36px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--pewter); }
@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr; gap: 12px; }
  .pipe::before, .pipe::after { top: 27px; bottom: 27px; left: 27px; right: auto; width: 1px; height: auto; }
  .pipe::after { transform: scaleY(0); transform-origin: top; }
  @keyframes pipe-grow { to { transform: scaleY(1); } }
  .pipe li { grid-template-columns: 54px 1fr; justify-items: start; text-align: left; align-items: center; }
}

.fits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fit { background: var(--cream); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.fit .card-media { height: 170px; }
.fit .card-text { padding: 24px 26px 28px; }
.fit .h3 { font-size: 19px; }
.fit .body { font-size: 15px; }
@media (max-width: 1060px) { .fits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fits { grid-template-columns: 1fr; } }

/* Роли — как мега-меню, но на странице */
.roles { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; padding: 16px; background: var(--cream); border-radius: 20px; }
.role-list { display: grid; align-content: start; gap: 2px; }
.role-list button { text-align: left; border: 0; background: none; padding: 13px 18px; border-radius: 12px; font-size: 16.5px; color: var(--fog); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.role-list button[aria-selected="true"] { background: var(--cream-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .role-list button:hover { color: var(--ink); } }
.role-stage { position: relative; border-radius: 14px; background: var(--cream-2); padding: clamp(24px, 4vw, 48px); min-height: 460px; display: flex; flex-direction: column; justify-content: center; }
.role-stage h3 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 18px; }
.role-stage .role-text { font-size: 17.5px; line-height: 1.6; color: var(--steel); max-width: 52ch; }
.role-stage .term { margin-top: 28px; }
.role-stage [role="tabpanel"] { animation: panel-in 200ms var(--ease-out); }
@media (max-width: 900px) {
  .roles { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .role-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .role-list::-webkit-scrollbar { display: none; }
  .role-list button { white-space: nowrap; padding: 10px 14px; font-size: 15px; }
  .role-stage { min-height: 0; }
}

.know .term-body { padding-block: 20px; }
.know .t-line { opacity: 0; }
.run .know .t-line, .know.run .t-line { animation: sq-in calc(360ms * var(--tempo)) var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); }

.timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.timeline::before, .timeline::after { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; }
.timeline::before { background: var(--hair-2); }
.timeline::after { background: var(--ink); transform: scaleX(0); transform-origin: left; }
.timeline.run::after { animation: pipe-grow calc(2000ms * var(--tempo)) var(--ease-in-out) forwards; }
.tl { padding: 32px 20px 0 0; position: relative; }
.tl::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair-2); }
.timeline.run .tl::before { animation: tl-dot calc(240ms * var(--tempo)) ease forwards; animation-delay: calc(var(--i) * 330ms * var(--tempo)); }
@keyframes tl-dot { to { background: var(--ink); box-shadow: none; } }
.tl .n { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--pewter); margin-bottom: 12px; }
.tl p { font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; }
@media (max-width: 960px) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; } .timeline::before, .timeline::after { display: none; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }

.modes { display: grid; gap: 8px; }
.mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 14px; background: var(--cream); font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.01em; }
.meter { display: inline-flex; gap: 4px; }
.meter i { width: 18px; height: 6px; border-radius: 3px; background: var(--cream-3); }
.run .meter i.on { animation: meter-on calc(260ms * var(--tempo)) ease forwards; animation-delay: calc(var(--d, 0) * 1ms * var(--tempo)); }
@keyframes meter-on { to { background: var(--ink); } }
.warn { margin-top: 28px; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -0.015em; max-width: 30ch; }

/* =========================================================
   ACTA
   ========================================================= */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.principles--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .principles--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .principles--8 { grid-template-columns: minmax(0, 1fr); } }
.cards--3 .card-media { height: 200px; }
@media (max-width: 960px) { .cards--3 { grid-template-columns: minmax(0, 1fr); } }

.pipe--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pipe--5::before, .pipe--5::after { left: calc(100% / 10); right: calc(100% / 10); }
.pipe--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pipe--4::before, .pipe--4::after { left: calc(100% / 8); right: calc(100% / 8); }
.timeline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.timeline--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .timeline--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .timeline--4 { grid-template-columns: minmax(0, 1fr); } }
.p-hero .qr-card { margin-top: 28px; }
@media (max-width: 900px) { .pipe--5, .pipe--4 { grid-template-columns: minmax(0, 1fr); } .pipe--5::before, .pipe--5::after, .pipe--4::before, .pipe--4::after { left: 27px; right: auto; } .pipe li:has(.pipe-t) { align-items: start; } .pipe .pipe-t { padding-top: 15px; justify-items: start; } }
@media (max-width: 960px) { .timeline--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .timeline--5 { grid-template-columns: minmax(0, 1fr); } }

/* Окно приложения */
.app-win .win-body.app-body { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--steel); min-height: 412px; display: flex; flex-direction: column; gap: 12px; }
.app-panel { display: flex; flex-direction: column; gap: 10px; }
.app-panel[hidden] { display: none; }
.tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 8px 12px; border-radius: 10px; position: relative; }
.tr p { grid-column: 1 / -1; }
.tr p { color: var(--ink); }
.tr-t { font-family: var(--mono); font-size: 12px; color: var(--pewter); }
.tr-s { font-size: 13px; font-weight: 500; }
.s1 { color: #5d6bb0; } .s2 { color: #b0775d; } .s3 { color: #4f9a7a; }
@media (prefers-color-scheme: dark) { .s1 { color: #9aa6ef; } .s2 { color: #e0a887; } .s3 { color: #7fd3a7; } }
.tr--dec { background: var(--cream-2); }
.tr--dec .dec { position: absolute; right: 10px; top: -9px; }
.dec { display: inline-block; font-family: var(--mono); font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); white-space: nowrap; }
.dec--task { background: var(--sand); color: var(--ink); }
.dec-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.dec-row p { color: var(--ink); }
.app-body .bub--me { align-self: flex-end; background: var(--cream-2); box-shadow: none; }
.app-answer { align-self: stretch; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.app-answer p { color: var(--ink); }
.src-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.src { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--cream-2); color: var(--steel); }
.src i { font-style: normal; font-size: 9px; color: var(--ink); }
.proto { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.proto-k { font-family: var(--mono); font-size: 12px; color: var(--pewter); padding-top: 3px; }
.proto p { color: var(--ink); }
@media (max-width: 520px) { .dec-row { grid-template-columns: minmax(0, 1fr) auto; } .dec-row .dec { grid-column: 1 / -1; justify-self: start; } .proto { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Контур развёртывания */
.contour { display: grid; grid-template-columns: minmax(0, 1.2fr) 140px minmax(0, 1fr); align-items: center; padding: clamp(16px, 2vw, 24px); border-radius: 20px; background: var(--cream); }
.ct-box { padding: clamp(24px, 3vw, 36px); border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); }
.ct-box--main { box-shadow: 0 0 0 1.5px var(--ink); }
.ct-k { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 16px; }
.ct-box .checks li { font-size: 16px; }
.ct-link { position: relative; height: 40px; display: grid; place-items: center; }
.ct-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hair-2); overflow: hidden; }
.ct-line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.run .ct-line::after, .contour.run .ct-line::after { animation: pipe-grow calc(700ms * var(--tempo)) var(--ease-in-out) calc(650ms * var(--tempo)) forwards; }
.ct-tag { position: relative; font-family: var(--mono); font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--cream); color: var(--fog); }
.ct-note { margin-top: 20px; font-size: 15px; color: var(--fog); }
@media (max-width: 860px) { .contour { grid-template-columns: minmax(0, 1fr); } .ct-link { height: 48px; } .ct-line { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .ct-line::after { transform: scaleY(0); transform-origin: top; } }

/* Вопросы */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:first-child { border-top: 1px solid var(--hair); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding-block: 14px; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -0.01em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 40px 22px 0; color: var(--steel); font-size: 16px; line-height: 1.6; max-width: 62ch; }
.plus { position: relative; width: 14px; height: 14px; flex: none; color: var(--fog); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; translate: 0 -50%; transition: transform 200ms var(--ease-out); }
.plus::after { transform: rotate(90deg); }
.faq details[open] .plus::after { transform: rotate(0deg); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   ОБЩИЕ КОМПОНЕНТЫ ВНУТРЕННИХ СТРАНИЦ
   ========================================================= */
.principles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.principles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .principles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .principles--4, .principles--2 { grid-template-columns: minmax(0, 1fr); } }
.principle .n { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--pewter); margin-bottom: 18px; }
.principle p.lead-ink { color: var(--ink); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; letter-spacing: -0.01em; }
.principle--ink p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; }
.feature > .compare, .feature > .modes { position: sticky; top: 100px; }
@media (max-width: 960px) { .feature > .compare, .feature > .modes { position: static; } }
.principle--ink { background: var(--ink); color: var(--on-ink); }
.principle--ink .h3 { color: var(--on-ink); }
.principle--ink p { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }

.panel { background: var(--cream); border-radius: 20px; padding: clamp(28px, 4vw, 56px); }
.panel .sub + .sub { margin-top: 16px; }
.lead-ink { color: var(--ink); }
.stack > * + * { margin-top: 18px; }
.feature .sub + .sub { margin-top: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li, .chip { padding: 7px 14px; border-radius: 999px; background: var(--cream-2); font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.chips--line li { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }

.checklist { display: grid; gap: 0; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--hair); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--ink); }
.checklist li:first-child { border-top: 1px solid var(--hair); }
.checklist svg { width: 16px; height: 16px; translate: 0 2px; }
.checklist--no svg { color: var(--fog); }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.checklist--2 li:nth-child(2) { border-top: 1px solid var(--hair); }
.checklist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
.checklist--3 li:nth-child(-n+3) { border-top: 1px solid var(--hair); }
@media (max-width: 900px) { .checklist--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .checklist--3 li:nth-child(3) { border-top: 0; } }
@media (max-width: 600px) { .checklist--2, .checklist--3 { grid-template-columns: minmax(0, 1fr); } .checklist--2 li:nth-child(2), .checklist--3 li:nth-child(-n+3) { border-top: 0; } .checklist--2 li:first-child, .checklist--3 li:first-child { border-top: 1px solid var(--hair); } }
.checklist.run li, .run .checklist li { }

/* Большой нумерованный список */
.bignum { counter-reset: none; border-top: 1px solid var(--hair); }
.bignum li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--hair); font-size: clamp(20px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.018em; color: var(--ink); }
.bignum .n { font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: var(--pewter); }

/* Сравнение двух подходов */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 20px; background: var(--cream); }
.compare > div { padding: clamp(22px, 2.6vw, 32px); border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); }
.compare > .compare--on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.compare-k { font-family: var(--mono); font-size: 12.5px; color: var(--fog); margin-bottom: 16px; }
.compare--on .compare-k { color: color-mix(in srgb, var(--on-ink) 60%, transparent); }
.compare li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding-block: 9px; font-size: 15.5px; line-height: 1.45; border-bottom: 1px solid var(--hair); }
.compare--on li { border-bottom-color: color-mix(in srgb, var(--on-ink) 14%, transparent); }
.compare li:last-child { border-bottom: 0; }
.compare li i { font-style: normal; font-family: var(--mono); color: var(--fog); }
.compare--on li i { color: #7fd3a7; }
@media (max-width: 700px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* Этап проекта во вкладках */
.stage-res { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); font-size: 16px; line-height: 1.55; color: var(--ink); }
.stage-res b { display: block; font-family: var(--mono); font-weight: 400; font-size: 12.5px; color: var(--fog); margin-bottom: 4px; }
.role-stage .role-text + .role-text { margin-top: 14px; }
.role-stage--top { justify-content: flex-start; }

/* Цены */
.prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.price { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 16px; background: var(--cream); }
.price-v { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.price-t { font-family: var(--mono); font-size: 12.5px; color: var(--fog); }
.price p { font-size: 15px; color: var(--steel); line-height: 1.55; }
.price--ink { background: var(--ink); color: var(--on-ink); }
.price--ink .h3, .price--ink .price-v { color: var(--on-ink); }
.price--ink p, .price--ink .price-t { color: color-mix(in srgb, var(--on-ink) 65%, transparent); }
@media (max-width: 1100px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .prices { grid-template-columns: minmax(0, 1fr); } }

/* Портфолио */
.folio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.folio .card-media { height: 210px; }
.folio .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.folio .tags li { font-family: var(--mono); font-size: 12px; padding: 2px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--steel); }
.folio .kv b { display: block; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--fog); margin-bottom: 3px; }
.folio .kv { font-size: 15px; line-height: 1.55; color: var(--ink); }
@media (max-width: 1000px) { .folio { grid-template-columns: minmax(0, 1fr); } }

/* Подарок */
.gift { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.gift .pill { margin-bottom: 16px; }
.gift-art { position: relative; aspect-ratio: 5 / 3; }
@media (max-width: 860px) { .gift { grid-template-columns: minmax(0, 1fr); } }

/* Города */
.cities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.city { padding: 26px; border-radius: 16px; background: var(--cream); min-height: 170px; display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; }
.city p { margin-top: 6px; }
.city b { font-weight: 400; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.015em; }
.city p { font-size: 14.5px; color: var(--steel); line-height: 1.5; }
.city .dotc { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
@media (max-width: 1000px) { .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cities { grid-template-columns: minmax(0, 1fr); } }

/* Команда: нейтральные плейсхолдеры по компетенциям */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.member { padding: 22px; border-radius: 16px; background: var(--cream); display: flex; align-items: center; gap: 14px; }
.member i { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--cream-3); }
.member span { font-size: 15.5px; line-height: 1.35; hyphens: auto; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team { grid-template-columns: minmax(0, 1fr); } }

/* Каналы связи */
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.channel { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.4vw, 44px); border-radius: 20px; background: var(--cream); }
.channel--ink { background: var(--ink); color: var(--on-ink); }
.channel--ink .h2, .channel--ink .h3 { color: var(--on-ink); }
.channel--ink .sub { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.channel--ink .btn--ink { background: var(--on-ink); color: var(--ink); }
.channel .actions { margin-top: auto; padding-top: 12px; }
.channel .qr-card { background: color-mix(in srgb, var(--on-ink) 8%, transparent); margin-top: 8px; }
.channel--ink .qr-t { color: var(--on-ink); }
@media (max-width: 860px) { .channels { grid-template-columns: minmax(0, 1fr); } }

/* Шаблон первого сообщения */
.first-msg { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.first-msg .warnbox { align-content: center; }
@media (max-width: 860px) { .first-msg { grid-template-columns: minmax(0, 1fr); } }
.tpl { display: flex; flex-direction: column; }
.tpl-rows { flex: 1; padding: 10px 22px; font-family: var(--mono); font-size: 14.5px; color: #e8e8e5; }
.tpl-rows li { display: grid; grid-template-columns: 22px auto minmax(60px, 1fr); gap: 12px; align-items: end; padding-block: 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.tpl-rows li:last-child { border-bottom: 0; }
.tpl-n { color: #77776f; }
.tpl .blank { height: 1.2em; border-bottom: 1px dashed rgba(232, 193, 112, 0.6); }
@media (max-width: 520px) { .tpl-rows li { grid-template-columns: 18px minmax(0, 1fr); } .tpl-rows li > span:nth-child(2) { grid-column: 2 / -1; } .tpl .blank { grid-column: 2; } }
.tpl .term-foot { justify-content: space-between; }
.copy-btn { min-height: 32px; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: none; color: #e8e8e5; font-family: var(--mono); font-size: 12.5px; cursor: pointer; transition: border-color 150ms ease, transform 160ms var(--ease-out); }
.copy-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { border-color: rgba(255,255,255,0.45); } }

/* Предупреждение */
.warnbox { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(24px, 3vw, 36px); border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.warnbox .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-family: var(--mono); font-size: 20px; }
.warnbox p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink); max-width: 64ch; }

/* =========================================================
   МАТЕРИАЛЫ: левая навигация раздела
   ========================================================= */
.mat { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-top: clamp(40px, 6vw, 80px); }
.mat-nav { position: sticky; top: 96px; display: grid; gap: 2px; }
.mat-nav a { padding: 10px 14px; border-radius: 10px; font-size: 15.5px; color: var(--fog); transition: color 150ms ease, background-color 150ms ease; }
.mat-nav a[aria-current="page"] { color: var(--ink); background: var(--cream-2); }
@media (hover: hover) and (pointer: fine) { .mat-nav a:hover { color: var(--ink); } }
.mat-main > section { padding-block: 0 clamp(64px, 8vw, 112px); }
.mat-main .p-hero { padding: 0 0 clamp(64px, 8vw, 112px); }
@media (max-width: 860px) {
  .mat { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 20px; }
  .mat-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .mat-nav::-webkit-scrollbar { display: none; }
}
.sections3 { display: grid; gap: 16px; }
.sec-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(26px, 3.4vw, 44px); border-radius: 20px; background: var(--cream); }
.sec-card .h2 { font-size: clamp(30px, 3vw, 40px); }
.sec-card .sub { margin-top: 14px; font-size: 16.5px; }
.sec-card .link { margin-top: 22px; }
.sec-card .k { font-family: var(--mono); font-size: 12.5px; color: var(--fog); margin-bottom: 12px; }
.sec-card .k + * + .k { margin-top: 22px; }
@media (max-width: 900px) { .sec-card { grid-template-columns: minmax(0, 1fr); } }
.mini-cases { display: grid; gap: 8px; }
.mini-cases li { padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 14.5px; line-height: 1.5; color: var(--steel); }
.mini-cases b { font-weight: 500; color: var(--ink); }

/* Кейсы: фильтры и плитки */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filters button { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 0; background: var(--cream-2); color: var(--steel); font-size: 14.5px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .filters button:not([aria-pressed="true"]):hover { color: var(--ink); } }
.tile-group + .tile-group { margin-top: clamp(40px, 5vw, 64px); }
.tile-group[hidden] { display: none; }
.tile-group > h2 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; margin-bottom: 18px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--cream); }
.tile .h3 { font-size: 19px; }
.tile p { font-size: 15px; line-height: 1.55; color: var(--steel); }
.tile .look { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink); line-height: 1.5; }
.tile .look b { display: block; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--fog); margin-bottom: 2px; }

/* Статьи */
.rows { border-top: 1px solid var(--hair); }
.rows li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 22px; border-bottom: 1px solid var(--hair); font-size: clamp(19px, 1.8vw, 25px); letter-spacing: -0.015em; line-height: 1.3; }
.rows .n { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; color: var(--pewter); }

/* =========================================================
   ACTA — окно приложения по макету acta_app (узел 189:71667).
   Продукт светлый: окно не меняет тему вместе с сайтом, как скриншот
   ========================================================= */
.art--wide { padding: clamp(12px, 3.4vw, 48px); }
.aw {
  --aw-bg: #fafafa; --aw-fg: #18181b; --aw-muted: #71717a; --aw-text: #52525b; --aw-def: #ebebec;
  --aw-seg: #f5f5f5; --aw-border: #dedee0; --aw-sep: #e4e4e7; --aw-accent: #0485f7; --aw-slate: #e2e8f0;
  --aw-inner: inset 0 0 1px rgba(0, 0, 0, 0.3);
  color-scheme: light; position: relative; background: var(--aw-bg); color: var(--aw-fg);
  border-radius: 14px; box-shadow: var(--shadow-win); overflow: hidden; text-align: left;
  font-family: var(--sans); font-size: 14px; line-height: 20px; letter-spacing: 0;
}
.aw img { display: block; flex: none; }
/* Окно собрано в размерах макета 1512×982 и целиком масштабируется под ширину — пропорции как в Figma */
.aw-stage { position: relative; aspect-ratio: 1512 / 982; }
.aw-stage > .aw { position: absolute; top: 0; left: 0; width: 1512px; height: 982px; transform: scale(var(--k, 0.68)); transform-origin: 0 0; border-radius: 20px; }
.aw-top, .aw-main { display: grid; grid-template-columns: 224px 348px minmax(0, 1fr); column-gap: 24px; padding-inline: 24px; }
.aw-top { align-items: center; height: 76px; padding-block: 24px 16px; border-bottom: 1px solid var(--aw-sep); }
.aw-brand { display: flex; align-items: flex-end; gap: 8px; }
.aw-word { margin-bottom: 1px; }
.aw-ver { margin-left: 18px; font-size: 12px; line-height: 16px; color: #737373; }
.aw-search { display: flex; align-items: center; gap: 6px; height: 36px; padding: 8px 12px; border-radius: 12px; background: var(--aw-bg); box-shadow: 0 0 0.5px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.06), 0 2px 2px rgba(0,0,0,.04); color: var(--aw-muted); white-space: nowrap; overflow: hidden; }
.aw-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.aw-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; min-width: 32px; padding: 6px 12px; border-radius: 16px; background: var(--aw-def); font-weight: 500; white-space: nowrap; }
.aw-btn--ic { width: 32px; padding: 0; justify-content: center; }
.aw-actions .aw-btn--ic { margin-left: 0; }
.aw-actions .aw-btn:nth-child(2) { margin-right: 24px; }
.aw-ava { width: 32px; height: 32px; border-radius: 32px; }
.aw-main { grid-template-columns: 224px 348px 620px; height: 906px; padding-top: 32px; }
.aw-side { display: flex; flex-direction: column; min-height: 0; }
.aw-up, .aw-tab { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 4px 12px 6px; border-left: 2px solid var(--aw-sep); font-weight: 500; color: var(--aw-muted); }
.aw-up { color: var(--aw-fg); }
.aw-tab--mute { color: #a3a3a3; }
.aw-tab.is-on { border-left-color: var(--aw-accent); color: var(--aw-fg); }
.aw-tab b { min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 11px; background: var(--aw-def); font-size: 12px; line-height: 22px; font-weight: 500; text-align: center; color: var(--aw-fg); }
.aw-new { margin-top: 12px; padding: 6px 12px; font-weight: 500; }
.aw-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px 2px 32px; scrollbar-width: none; }
.aw-list::-webkit-scrollbar { display: none; }
.aw-rec { flex: none; min-height: 80px; display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: var(--aw-seg); box-shadow: var(--aw-inner); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 150ms ease, box-shadow 150ms ease; }
.aw-rec.is-on { background: #fff; border-color: var(--aw-border); box-shadow: 0 0 1px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.06), 0 0 5px rgba(0,0,0,.02); }
@media (hover: hover) and (pointer: fine) { .aw-rec:not(.is-on):hover { background: #efefef; } }
.aw-rec:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 1px; }
.aw-thumb { position: relative; flex: none; width: 72px; height: 48px; border-radius: 6px; background: #ebebeb; display: grid; place-items: center; }
.aw-thumb--call { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 3px; background: #1d1d20; place-items: stretch; }
.aw-thumb--call i { display: grid; place-items: center; border-radius: 3px; background: #34343a; color: #d4d4d8; font-style: normal; font-size: 8px; line-height: 1; font-weight: 500; }
.aw-rec-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.aw-rec-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.aw-tags { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--aw-muted); white-space: nowrap; }
.aw-tags > span, .aw-chips > span { display: inline-flex; align-items: center; gap: 4px; height: 20px; }
.aw-dot { margin-left: auto; width: 11px; height: 11px; border-radius: 8px; background: var(--aw-slate); }
.aw-body { align-self: start; height: 911px; background: #fff; margin-top: -38px; padding: 31px 16px 0; overflow: hidden; }
.aw-doc { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.aw-head { display: flex; flex-direction: column; gap: 8px; }
.aw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.aw-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 16px; color: var(--aw-muted); }
.aw-switch i { width: 41px; height: 21px; padding: 2.5px; border-radius: 21px; background: var(--aw-def); }
.aw-switch i::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 .6px rgba(0,0,0,.06), 0 1.3px 1.3px rgba(0,0,0,.06), 0 2.6px 2.6px rgba(0,0,0,.04); }
.aw-title { font-size: 16px; line-height: 24px; font-weight: 600; color: #000; letter-spacing: 0; }
.aw-chips { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; line-height: 16px; color: var(--aw-muted); }
.aw-chips > span { padding: 2px 6px; border-radius: 16px; background: var(--aw-seg); }
.aw-icons { display: flex; gap: 16px; }
.aw-card { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; border-radius: 16px; background: #fff; box-shadow: var(--aw-inner); overflow: hidden; }
.aw-card-top { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.aw-video { position: relative; aspect-ratio: 608 / 301; border-radius: 16px; background: #000; overflow: hidden; display: grid; place-items: center; }
.aw-grid { position: absolute; inset: 14px; display: grid; gap: 6px; grid-template-columns: repeat(var(--c, 2), 1fr); }
.aw-grid[data-n="3"], .aw-grid[data-n="5"] { --c: 3; }
.aw-grid[data-n="4"] { --c: 2; }
.aw-grid i { display: grid; place-items: center; border-radius: 10px; background: #1f1f23; color: #a1a1aa; font-style: normal; font-size: clamp(12px, 1.3vw, 18px); font-weight: 500; }
.aw-grid i.is-talk { box-shadow: inset 0 0 0 2px #7fd3a7; color: #f4f4f5; }
.aw-video--audio .aw-grid { inset: auto; position: relative; display: flex; gap: 12px; }
.aw-video--audio .aw-grid i { width: clamp(44px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%; }
.aw-video--audio .aw-play { position: absolute; }
.aw-play { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 9999px; display: grid; place-items: center; background: rgba(24, 24, 27, 0.15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aw-video--audio .aw-play { right: 16px; bottom: 16px; }
.aw-collapse { position: absolute; right: 24px; bottom: 24px; z-index: 1; width: 24px; height: 24px; padding: 4px; border-radius: 12px; background: rgba(24, 24, 27, 0.15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aw-video--audio .aw-collapse { display: none; }
.aw-seg { display: flex; gap: 2px; padding: 4px 8px; border-radius: 24px; background: var(--aw-def); }
.aw-seg button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 24px; background: none; font: inherit; font-weight: 500; color: var(--aw-muted); cursor: pointer; transition: color 150ms ease; }
.aw-seg button[aria-selected="true"] { color: var(--aw-fg); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-inline: -4px; padding-inline: 16px; }
.aw-seg button[aria-selected="false"] img { opacity: .6; }
.aw-seg button:focus-visible { outline: 2px solid var(--aw-accent); }
.aw-tools { display: flex; gap: 8px; }
.aw-obtn { display: inline-flex; align-items: center; gap: 4px; height: 32px; min-width: 32px; padding: 6px 12px; border: 1px solid var(--aw-border); border-radius: 16px; font-weight: 500; white-space: nowrap; }
.aw-obtn--ic { width: 32px; padding: 0; justify-content: center; }
.aw-tr { position: relative; width: 16px; height: 16px; overflow: hidden; }
.aw-tr img { position: absolute; }
.aw-tr-a { inset: 43.23% 9.37% 7.12% 45.48%; width: 45.15%; height: 49.65%; }
.aw-tr-b { top: 7.12%; left: 9.37%; width: 40.63%; height: 54.17%; }
.aw-text { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding-inline: 16px; color: var(--aw-text); }
.aw-text[hidden] { display: none; }
.aw-sec { display: flex; flex-direction: column; gap: 6px; }
.aw-k { font-weight: 600; color: var(--aw-fg); }
.aw-sec ul { list-style: disc; padding-left: 21px; }
.aw-sec--dec p:last-child { color: var(--aw-fg); }

@media (max-width: 760px) {
  .aw-stage { aspect-ratio: auto; }
  .aw-stage > .aw { position: relative; width: auto; height: auto; transform: none; border-radius: 14px; }
  .aw-main { grid-template-columns: minmax(0, 1fr); height: auto; }
  .aw-top { height: auto; }
  .aw-body { height: auto; margin-top: 0; }
  .aw-side, .aw-search, .aw-ver { display: none; }
  .aw-top, .aw-main { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; }
  .aw-top { display: flex; justify-content: space-between; }
  .aw-actions .aw-btn:nth-child(2) { margin-right: 0; }
  .aw-actions .aw-btn:not(.aw-btn--ic) { display: none; }
  .aw-main { height: auto; padding-top: 12px; }
  .aw-list { flex-direction: row; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; }
  .aw-rec { flex: none; width: 82%; scroll-snap-align: start; }
  .aw-body { margin: 0 -12px; padding: 20px 12px 12px; }
  .aw-card { padding: 0 0 12px; }
  .aw-card-top { padding: 12px; }
  .aw-text { max-height: 360px; padding-inline: 12px; }
  .aw-tools .aw-obtn:not(.aw-obtn--ic) { display: none; }
}

/* ---------- QR: только для компьютера, где Telegram обычно в телефоне ---------- */
.qr-card { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1081px) {
  .qr-card { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--cream); max-width: 340px; }
  .qr-card .qr { width: 92px; height: 92px; flex: none; border-radius: 8px; }
  .qr-t { font-size: 15px; color: var(--ink); }
  .qr-s { margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--fog); }
  .qr-card--inline { margin: 36px auto 0; text-align: left; }
}

/* ---------- Появление при прокрутке ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Сниженное движение ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; transition: opacity 200ms ease; }
  .sq, .sc-log .t-line, .know .t-line, .ig .pop { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; }
  .ig .draw { stroke-dashoffset: 0 !important; animation: none !important; }
  .sm-promo { clip-path: none !important; animation: none !important; }
  .party-link::after, .pipe::after, .timeline::after { transform: none !important; animation: none !important; }
  .pipe li { color: var(--ink) !important; animation: none !important; }
  .pipe li .node { animation: none !important; }
  .steps-win .ok { opacity: 1 !important; animation: none !important; }
  .meter i.on { background: var(--ink) !important; animation: none !important; }
  .typing i { animation: none; }
  .is-loaded .header .mark .a1, .is-loaded .header .mark .a2, .is-loaded .header .mark .r { animation: none; }
  .mega, .pv, .sc-path i { transition-duration: 0.01ms !important; }
  .ct-line::after { transform: none !important; animation: none !important; }
  .m-panel[data-open], .loss-panel, .role-stage [role="tabpanel"] { animation-name: fade-in; }
  @keyframes fade-in { from { opacity: 0; } }
}

/* Узкие телефоны: длинные слова в заголовках («ответственность») не влезают при 34 px */
@media (max-width: 420px) { .h2 { font-size: 30px; } }