/* The living cabinet on the /crm/ pages (server/crm-scene.js + js/crm-motion.js), on top of style.css and crm.css.
   The industry page's hero: text above, the scene below — the site's chat, the cabinet (a light app window, as the main page's mocks),
   the Telegram notice, and the cables between them. /crm/'s hero: the same window switching industries. Without a script the final
   state shows; with reduced motion (html.reduced, style.css) nothing moves. */
@property --acc { syntax: '<color>'; inherits: true; initial-value: #4b58c9; }
.crm ::selection { background: rgba(154, 166, 255, .32); }
.crm :is(.crm-hero, .crm-dark, .crm-lead) :focus-visible { outline-color: var(--peri); }

/* ---------------------------------------------------------------- hero: the text above, the scene below */
.crm-hero-in:has(> .stage, > .sw) { grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 5vw, 72px); }
.crm-hero-in:has(> .stage, > .sw) > .ch-text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(32px, 6vw, 96px); align-items: end; }
.crm-hero-in:has(> .stage, > .sw) > .ch-text > * { grid-column: 1 / -1; }
.crm-hero-in:has(> .stage, > .sw) > .ch-text > h1 { grid-column: 1; grid-row: span 2; margin-bottom: 0; }
.crm-hero-in:has(> .stage, > .sw) > .ch-text > .lead { grid-column: 2; }
.crm-hero-in:has(> .stage, > .sw) > .ch-text > .ch-cta { grid-column: 2; margin-top: 22px; }
.crm-hero-in:has(> .stage, > .sw) > .ch-text > .ch-points { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; }

/* (the drifting light behind the scene is gone: a glowing orb is one of the stock marks the owner ruled out, 19.10.2026) */

/* the entrance: the words come into focus, then the scene rises */
.js .crm-hero .ch-text > * { animation: crm-in .45s var(--ease) both; }
.js .crm-hero .ch-text > :nth-child(2) { animation-delay: .03s; } .js .crm-hero .ch-text > :nth-child(3) { animation-delay: .06s; }
.js .crm-hero .ch-text > :nth-child(4) { animation-delay: .09s; } .js .crm-hero .ch-text > :nth-child(5) { animation-delay: .12s; } .js .crm-hero .ch-text > :nth-child(6) { animation-delay: .15s; }
.js .crm-hero :is(.stage, .sw) { animation: crm-rise 1.1s .3s var(--ease) both; }
@keyframes crm-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes crm-rise { from { opacity: 0; translate: 0 30px; scale: .985; } }

/* ---------------------------------------------------------------- the cabinet window */
.cab { position: relative; overflow: hidden; border-radius: 20px; background: #fff; color: var(--ink); font-size: 13.5px; line-height: 1.45; text-align: left;
  box-shadow: 0 0 0 1px rgba(16, 25, 56, .06), 0 30px 80px rgba(3, 6, 20, .5), 0 50px 140px -40px color-mix(in srgb, var(--acc) 55%, transparent); transition: box-shadow .6s var(--ease); }
.cab-bar { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); background: #fafafb; }
.cab-dots { display: flex; gap: 6px; }
.cab-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2e3e8; }
.cab-url { margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: #f0f1f4; font-size: 12px; color: var(--ink-3); }
.cab-ten { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; white-space: nowrap; }
.cab-ten i { width: 9px; height: 9px; border-radius: 3px; background: var(--acc); }
.cab-ten svg { width: 14px; height: 14px; color: var(--ink-3); }
.cab-in { display: grid; grid-template-columns: 178px minmax(0, 1fr); min-height: 318px; }
.cab-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); background: #fbfbfc; }
.cab-side span { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cab-side svg { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.cab-side .on { background: color-mix(in srgb, var(--acc) 9%, #fff); color: var(--ink); font-weight: 650; }
.cab-side .on svg { color: var(--acc); }
.cab-side .cab-ai { margin-top: auto; font-size: 12px; color: var(--ink-3); }
.cab-ai i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(63, 191, 122, .18); }
.cab-main { min-width: 0; padding: 16px 18px 18px; }
.cab-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cab-h b { font-size: 16.5px; letter-spacing: -0.02em; }
.cab-v { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
:is(.cab-v, .pipe-n, .cab-tbl td) > span { display: inline-block; }

/* services: the day */
.cab-rows { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.cab-rows li { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 7px 12px; border-radius: 12px; background: var(--paper); }
.cab-rows time { font-weight: 700; font-variant-numeric: tabular-nums; }
.cab-rows b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cab-rows small { font-size: 12px; color: var(--ink-3); }
.cab-rows .free { background: transparent; outline: 1.5px dashed var(--line-2); outline-offset: -1.5px; }
.free-l { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.src { font-style: normal; font-weight: 650; color: color-mix(in srgb, var(--acc) 80%, #000); }
.st { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 700; white-space: nowrap; }
.st.ok { background: #e6f5ec; color: #17703c; }
.st.new { background: #fff3dc; color: #7a4f00; }
.st.done { background: #eef0f3; color: var(--ink-2); }
.st.low { background: #fdeceb; color: #a8231a; }
.is-new { background: color-mix(in srgb, var(--acc) 8%, #fff) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 28%, transparent) !important; }

/* shop: stock below the threshold */
.cab-tbl { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; font-variant-numeric: tabular-nums; }
.cab-tbl :is(th, td) { padding: 10px 12px; text-align: left; font-weight: 500; }
.cab-tbl thead th { padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.cab-tbl :is(thead th, td):is(:nth-child(2), :nth-child(3)) { text-align: right; }
.cab-tbl tbody :is(th, td) { background: var(--paper); transition: background .4s; }
.cab-tbl tbody :is(th, td):first-child { border-radius: 12px 0 0 12px; }
.cab-tbl tbody :is(th, td):last-child { border-radius: 0 12px 12px 0; text-align: right; }
.cab-tbl tbody th { font-weight: 600; }
.cab-tbl tbody th small { margin-left: 4px; font-weight: 600; color: var(--ink-3); }
.cab-tbl td:is(:nth-child(2), :nth-child(3)) { font-weight: 700; }
.stage .cab-tbl tr.sel > * { background: #fff1ef; } /* the rows the assistant names; the moved one turns green once it's done */
.stage .cab-tbl tr.sel:has(> td > span[data-t].on) > * { background: #eaf6ef; }
.cab-log { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 9px 12px; border-radius: 12px; background: #f1f3fb; font-size: 12.5px; color: var(--ink-2); }
.cab-log svg { flex: none; width: 16px; height: 16px; color: var(--pick); }

/* dealer: the pipeline */
.cab-pipe { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.pipe-col { min-height: 220px; padding: 10px; border-radius: 14px; background: var(--paper); }
.pipe-col > p { display: flex; justify-content: space-between; margin: 2px 4px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pipe-n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pipe-col ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.pipe-card { position: relative; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16, 25, 56, .06), inset 0 0 0 1px var(--line); }
.pipe-card b { display: block; font-size: 13px; font-weight: 650; }
.pipe-card small { font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------- the scene */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 1fr); gap: clamp(56px, 7vw, 104px); align-items: center; margin: 0; }
.stage .sx-chat { justify-self: stretch; max-width: none; align-self: center; }
.stage .cm-body { min-height: 352px; transition: opacity .5s; }
.sx-right { position: relative; }
.sx-cap { grid-column: 1 / -1; margin: -26px 0 0; font-size: 12.5px; color: var(--on-dark-3); }

/* the timeline: what hasn't happened yet isn't there */
.js .stage :is([data-t], [data-off]):not([data-fx]):not(.on) { display: none; }
:root:not(.js) .stage [data-off] { display: none; }
.js .stage .cm-m { animation: none; }
.js .stage :is([data-t], [data-off]):not([data-fx]).on { animation: msgIn .45s var(--ease) both; }
.js .stage :is(.cab-v, .pipe-n, .cab-tbl td) > .on { animation: crm-num .5s var(--ease) both; }
@keyframes crm-num { from { opacity: 0; transform: translateY(-7px); filter: blur(3px); } }
.cm-dots { display: inline-flex; align-self: flex-start; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--hair-d); }
.cm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark-2); animation: bounce 1s infinite; }
.cm-dots i:nth-child(2) { animation-delay: .15s; } .cm-dots i:nth-child(3) { animation-delay: .3s; }
.cm-chips b { transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--ease); }
.cm-chips b.sel { background: var(--peri); color: var(--navy); box-shadow: 0 0 0 4px rgba(154, 166, 255, .22); transform: scale(.96); }

/* the booking lands: a ring of the industry's colour opens around it */
.stage .is-new.on::after, .stage tr.is-new.on > th::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: crm-ring 1.3s var(--ease) both; }
.stage tr.is-new.on > th { position: relative; }
@keyframes crm-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
.js .stage .is-new.on { animation: crm-land .7s var(--ease) both; }
@keyframes crm-land { from { opacity: 0; transform: translateX(-14px); filter: blur(4px); } }

/* the Telegram notice */
.tgx { position: absolute; z-index: 3; top: -44px; right: -34px; width: min(300px, 74%); padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.45;
  box-shadow: 0 0 0 1px rgba(16, 25, 56, .06), 0 24px 60px rgba(3, 6, 20, .38); transition: opacity .35s var(--ease), transform .55s var(--ease), filter .5s var(--ease); }
.js .tgx:not(.on) { opacity: 0; transform: translateY(-16px) scale(.97); filter: blur(5px); pointer-events: none; }
.tgx-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.tgx-ava { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(150deg, #2aabee, #1e88c7); color: #fff; }
.tgx-ava .pm { width: 16px; height: 16px; }
.tgx-h b { display: block; font-size: 13px; }
.tgx-h small { font-size: 11.5px; color: var(--ink-3); }
.tgx p { margin: 0; }
.tgx p b { font-size: 13.5px; }
.tgx-k { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; margin-top: 10px; }
.tgx-k span { padding: 6px 8px; border-radius: 9px; background: #edf4fb; color: #1d6aa8; font-size: 12px; font-weight: 650; text-align: center; transition: background .25s, color .25s, transform .25s var(--ease); }
.tgx-k span.sel { background: #2aabee; color: #fff; transform: scale(.95); }

/* the cables: the main page's light (polish + panes), drawn once from the cause to the effect, then a pulse rides them */
.sx-lines { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sx-cb .cb { fill: none; stroke: rgba(154, 166, 255, .5); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; }
.sx-cb.on .cb { animation: crm-draw .65s var(--ease) forwards; }
.sx-cb .cb-flow { fill: none; stroke: #d3d8ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 9 100; stroke-dashoffset: 9; opacity: 0; filter: drop-shadow(0 0 4px #9aa6ff); }
.sx-cb.on .cb-flow { animation: crm-flow 1.8s .45s linear infinite; }
.sx-cb circle { fill: #d3d8ff; filter: drop-shadow(0 0 6px #9aa6ff); transform-box: fill-box; transform-origin: center; }
.sx-cb.on circle { animation: crm-dot .5s .55s var(--ease) both; }
@keyframes crm-draw { to { stroke-dashoffset: 0; } }
@keyframes crm-flow { from { stroke-dashoffset: 9; opacity: 1; } 92% { opacity: 1; } to { stroke-dashoffset: -100; opacity: 0; } }
@keyframes crm-dot { from { transform: scale(0); } }

/* the loop's last moment: what happened fades before it starts again */
.stage.fading :is(.cm-body, .sx-lines, .is-new, .cab-log) { opacity: 0; transition: opacity .5s; }

/* ---------------------------------------------------------------- /crm/: one window, the eight industries */
.sw { display: grid; gap: 18px; transition: --acc .7s var(--ease); }
.sw-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); color: var(--on-dark-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.sw-tabs button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sw-tabs [aria-selected="true"], .sw-tabs [aria-selected="true"]:hover { background: #fff; box-shadow: none; color: var(--ink); }
.sw-tabs button::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--acc); opacity: .75; transform: scaleX(0); transform-origin: 0 50%; }
.sw.auto [aria-selected="true"]::after { animation: sw-prog 5.5s linear forwards; }
.sw.auto:is(:hover, :focus-within, .idle) [aria-selected="true"]::after { animation-play-state: paused; }
@keyframes sw-prog { to { transform: scaleX(1); } }
.sw-panels { display: grid; }
.sw-panels > .cab-in { grid-area: 1 / 1; }
.js .sw-panels > .cab-in { visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s .3s; }
.js .sw-panels > .cab-in.is-on { visibility: visible; opacity: 1; transition: opacity .45s var(--ease); }
.sw-panels :is(.cab-rows > li, .cab-tbl tbody tr, .cab-log, .pipe-col, .cab-side span, .cab-h) { transition: opacity .5s var(--ease), transform .55s var(--ease); }
.js .sw-panels > .cab-in:not(.is-on) :is(.cab-rows > li, .cab-tbl tbody tr, .cab-log, .pipe-col, .cab-side span, .cab-h) { opacity: 0; transform: translateY(10px); }
.sw-panels :is(.cab-rows > li, .cab-tbl tbody tr, .pipe-col, .cab-side span):nth-child(2) { transition-delay: .05s; }
.sw-panels :is(.cab-rows > li, .cab-tbl tbody tr, .pipe-col, .cab-side span):nth-child(3) { transition-delay: .1s; }
.sw-panels :is(.cab-rows > li, .cab-tbl tbody tr, .pipe-col, .cab-side span):nth-child(4) { transition-delay: .15s; }
.sw-panels :is(.cab-rows > li, .cab-side span):nth-child(n+5) { transition-delay: .2s; }
.sw-cab.sweep .cab-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acc); transform-origin: 0 50%; animation: sw-sweep .8s var(--ease) both; }
@keyframes sw-sweep { from { transform: scaleX(0); } 70% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
.sw-more { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--on-dark-2); font-size: 14.5px; text-decoration: none; }
.sw-more b { font-weight: 600; color: #fff; }
.sw-more svg { width: 16px; height: 16px; color: #fff; transition: transform .25s var(--ease); }
.sw-more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- the page below: reveals come into focus; the cursor's light */
.crm .rv { transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.crm .sec-head.rv:not(.in) { filter: blur(6px); }
:where(.feat, .ind-card, .steps3 > li, .tpl, .rule, .cl-form) { position: relative; }
/* (the cursor's glow on cards is gone with the other glows, 21.10.2026) */

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 1100px) {
  .cab-in { grid-template-columns: minmax(0, 1fr); }
  .cab-side { display: none; }
  .tgx { right: -12px; }
}
@media (max-width: 860px) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .stage .cm-body { min-height: 0; }
  .sx-cap { margin-top: -40px; }
  .tgx { top: -30px; right: 8px; width: min(290px, calc(100% - 16px)); }
}
@media (max-width: 760px) {
  .crm-hero-in:has(> .stage, > .sw) > .ch-text { grid-template-columns: minmax(0, 1fr); }
  .crm-hero-in:has(> .stage, > .sw) > .ch-text > * { grid-column: 1 !important; grid-row: auto !important; }
  .crm-hero-in:has(> .stage, > .sw) > .ch-text > .lead { margin-top: 14px; }
  .crm-hero-in:has(> .stage, > .sw) > .ch-text > .ch-points { display: grid; margin-top: 22px; }
  .crm-hero::after { width: 120vw; height: 120vw; right: -50vw; top: -40vw; }
  .cab-url { display: none; }
  .cab-ten { margin-left: auto; }
  .cab-main { padding: 14px 12px 14px; }
  .cab-rows li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; }
  .cab-rows li > .st { grid-column: 2; justify-self: start; }
  .cab-tbl :is(th, td) { padding: 9px 8px; }
  .cab-pipe { grid-template-columns: repeat(3, minmax(132px, 1fr)); overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .pipe-col { min-height: 190px; }
  .sw-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 2px; }
  .sw-tabs button { flex: none; }
}

/* ================================================================ the cinematic layer (owner, 19.10: «современный, самые современные
   технологии анимаций»): words that rise, cards with their screen, bento tiles with pictures,
   scroll-driven motion (where the browser has it), page-to-page transitions, the tabs' sliding pill */

.crm-hero.gl::before { z-index: 1; }

/* the headline: each word rises out of its own mask */
.crm-hero h1 .wd { display: inline-block; overflow: clip; vertical-align: top; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
.js .crm-hero .ch-text > h1 { animation: none; }
.js .crm-hero h1 .wd > span { display: inline-block; animation: wd-up .6s calc(var(--i) * 30ms) var(--ease) both; }
@keyframes wd-up { from { transform: translateY(112%) rotate(4deg); } }


/* ---------------------------------------------------------------- /crm/: the industry cards carry their own screen */
.ind-card { gap: 10px; padding: 26px 24px 0; isolation: isolate; background: #fff; }
.ic-more { position: absolute; top: 26px; right: 22px; margin: 0; padding: 0; opacity: .0; translate: -6px 0; transition: opacity .3s, translate .4s var(--ease); }
.ind-card:is(:hover, :focus-visible) .ic-more { opacity: 1; translate: 0 0; }
@media (hover: none) { .ic-more { opacity: 1; translate: 0 0; } }
.ic-shot { position: relative; display: block; height: 176px; margin: 8px -24px 0; padding: 0 24px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 52%, transparent 96%); mask: linear-gradient(#000 52%, transparent 96%); }
.cab-shot { zoom: .64; border-radius: 22px; box-shadow: 0 0 0 1px rgba(16, 25, 56, .08), 0 24px 60px rgba(16, 25, 56, .14); pointer-events: none; }
.ic-shot .cab-shot { translate: 0 14px; transition: translate .7s var(--ease), box-shadow .5s; }
.ind-card:hover .ic-shot .cab-shot { translate: 0 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent), 0 30px 70px rgba(16, 25, 56, .18); }

/* ---------------------------------------------------------------- bento: tiles of different sizes, each with a picture */
.bento { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; margin: 0; padding: 0; }
.bento .feat { display: flex; flex-direction: column; min-height: 236px; overflow: hidden; }
.bento .b-txt { margin-top: auto; }
.bento .v { position: relative; margin-bottom: 22px; }


/* ---------------------------------------------------------------- the /crm/ tabs: a pill that slides to the chosen one */
.sw-tabs { position: relative; }
.sw-tabs button { z-index: 1; }
.sw-ind { position: absolute; left: 0; top: 0; z-index: 0; width: var(--w, 0); height: var(--h, 0); translate: var(--x, 0) var(--y, 0); border-radius: 999px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); pointer-events: none;
  transition: translate .55s var(--ease), width .55s var(--ease), height .55s var(--ease); }
.sw-tabs.has-ind [aria-selected="true"], .sw-tabs.has-ind [aria-selected="true"]:hover { background: transparent; }

/* ---------------------------------------------------------------- scroll-driven, where the browser has it (Chrome, Edge, Safari 26) */
@supports (animation-timeline: view()) {
  /* the hero's window starts tilted back and lies flat as the page scrolls */
  html:not(.reduced) .crm-hero :is(.stage, .sw) { animation: crm-rise 1.1s .3s var(--ease) both, crm-tilt linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 60vh; transform-origin: 50% 0; }
  html.vt-in:not(.reduced) .crm-hero :is(.stage, .sw) { animation: crm-tilt linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  @keyframes crm-tilt { from { transform: perspective(1700px) rotateX(13deg) scale(.96); } to { transform: none; } }
  /* blocks come in with the scroll, not on a timer */
  .crm .sd { animation: sd-in linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  .crm .sec-head.sd { animation-name: sd-head; }
  @keyframes sd-in { from { opacity: 0; translate: 0 40px; filter: blur(8px); } }
  @keyframes sd-head { from { opacity: 0; translate: 0 26px; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20% 0); } }
  /* the launch steps: a line fills across them */
  @media (min-width: 761px) {
    .steps3 { position: relative; padding-top: 30px; }
    .steps3::before, .steps3::after { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: var(--hair); }
    .steps3::after { background: linear-gradient(90deg, var(--acc), #9aa6ff); transform-origin: 0 50%; animation: steps-fill linear both; animation-timeline: view(); animation-range: entry 60% cover 55%; }
    @keyframes steps-fill { from { transform: scaleX(0); } }
  }
}

/* ---------------------------------------------------------------- page to page: the card becomes the industry's cabinet */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.crm #hdr { view-transition-name: crm-hdr; }
::view-transition-group(crm-cab) { animation-duration: .8s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(crm-cab), ::view-transition-new(crm-cab) { height: 100%; object-fit: cover; object-position: 50% 0; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-new .5s .08s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-new { from { opacity: 0; } }
html.vt-in .crm-hero .ch-text > *, html.vt-in .crm-hero h1 .wd > span { animation: none; }

/* ---------------------------------------------------------------- bento on tablets and phones */
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .feat { grid-column: auto !important; min-height: 0; }
  .ic-shot { height: 150px; }
}


/* ================================================================ the main page's studio (owner, 19.10: «фон как на главной»): the hero film's
   last frame — the lit «P» plug powering a display — spans the page, and the CRM lives in that display. From 1025 px; narrower screens keep
   the plain layout (the display would be too small to read). */
.st-img { display: none; }
@media (min-width: 1025px) {
  .studio { position: relative; width: min(100vw, 1920px); margin-inline: calc(50% - min(50vw, 960px)); aspect-ratio: 16 / 9; }
  .st-img { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none;
    -webkit-mask: linear-gradient(transparent, #000 13%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in;
    mask: linear-gradient(transparent, #000 13%, #000 88%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
  .st-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* the display's screen (js/film.js: x 39.17–91.77 %, y 18.7–75.5 % of the frame); the cabinet is drawn at 760 × 462 and zoomed in */
  .studio > .sx-right { position: absolute; z-index: 2; left: 39.17%; top: 18.7%; width: 52.6%; height: 56.8%; }
  .studio > .sx-right > .cab { width: 760px; height: 462px; border-radius: 3px; box-shadow: 0 0 90px rgba(154, 166, 255, .32); }
  .studio .cab-in, .studio .sw-panels > .cab-in { min-height: 0; height: 418px; }
  .studio .cab::after { display: none; }
  /* the industry page: the conversation on the dark wall, left of the plug */
  .stage.studio { display: block; }
  .stage.studio > .sx-chat { position: absolute; z-index: 3; left: 3.5%; top: 6%; width: min(350px, 26%); }
  .stage.studio .cm-body { min-height: 0; }
  .stage.studio > .sx-cap { position: absolute; z-index: 3; left: 3.5%; bottom: 5%; max-width: 26%; margin: 0; }
  .stage.studio .tgx { top: -9%; right: -4%; }
  /* /crm/: the industries stand on the wall, the window is in the display */
  .sw.studio { display: block; }
  .sw.studio > .sw-side { position: absolute; z-index: 3; left: 3.5%; top: 6%; width: 27%; display: grid; gap: 22px; }
  .sw.studio .sw-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } /* fourteen industries: two columns on the wall */
  .sw.studio .sw-tabs button { justify-content: flex-start; padding: 8px 12px; font-size: 13px; line-height: 1.25; text-align: left; white-space: normal; }
  .sw.studio .sw-tabs button:not([aria-selected="true"]) { background: rgba(7, 9, 20, .45); }
  /* the studio is a photograph: it does not tilt */
  html:not(.reduced) .crm-hero :is(.stage, .sw).studio { animation: crm-rise 1.1s .3s var(--ease) both; animation-timeline: auto; }
  html.vt-in .crm-hero :is(.stage, .sw).studio { animation: none; }
}

/* ================================================================ without the stock marks (owner, 19.10: «чтобы не было вообще типовых
   следов АИ»): no icon tiles, sparkles, tick lists, eyebrows or light beams — words, rules and the product's own screens carry the page */
.crm-hero-in:has(> .stage, > .sw) > .ch-text > .ch-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.ch-points li { display: block; padding-top: 14px; border-top: 1px solid rgba(222, 227, 255, .18); color: var(--on-dark-2); font-size: 15px; line-height: 1.5; }
.ai-l li { display: block; }
.rule .rule-k { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.tpl-note { display: block; }
.more-ind a { padding: 11px 20px; }
@media (max-width: 760px) { .crm-hero-in:has(> .stage, > .sw) > .ch-text > .ch-points { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* /crm/ below the studio: the tabs, then the window, then the link */
@media (max-width: 1024px) { .sw-side { display: contents; } .sw > .sx-right { order: 2; } .sw-more { order: 3; } }