/* Лендинг futurecrm.ru — один визуальный язык с промо-роликом (promo/video): Inter, индиго, почти белый фон,
   окна приложения с сайдбаром как в продукте. Размеры внутри окон — в em от ширины окна (container query). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #141414; --body: #3f3f3a; --muted: #6f6f6a; --faint: #a3a3a0;
  --line: #ecebe6; --line2: #f0efea; --paper: #fafaf8; --soft: #f4f3ef; --white: #fff;
  --indigo: #6366f1; --indigo-deep: #4f46e5; --indigo-soft: #eef0fe; --indigo-line: #c7cbfb; --night: #1e1b4b;
  --green: #16a34a; --green-soft: #dcfce7; --green-ink: #15803d;
  --amber-soft: #fef7e6; --amber-line: #fde9b8; --orange-soft: #fff1e6; --blue-soft: #e8f0fe; --red: #ef4444;
  --shadow-card: 0 1px 2px rgba(20,20,40,.04), 0 12px 40px -12px rgba(30,27,75,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 76px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- кнопки и общие элементы ---------- */
.btn { border: 0; border-radius: 999px; height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, transform .15s ease, box-shadow .45s ease, color .45s ease; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-light { background: #fff; color: var(--night); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.btn-light:hover { transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.24); font-weight: 600; }
.btn-ghost:hover { background: rgba(255,255,255,.18); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo-deep);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.eyebrow .ico { font-size: 14px; }
.sh { text-align: center; max-width: 820px; margin: 0 auto 44px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sh h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.sh h2 span { color: var(--indigo); }
.sh p { font-size: clamp(15.5px, 1.25vw, 18px); color: var(--muted); max-width: 640px; text-wrap: pretty; }
.block { padding-block: 96px; }

/* ---------- шапка ---------- */
.nav { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.nav .wrap { height: var(--nav-h); display: flex; align-items: center; gap: 22px; }
.nav .logo img { display: block; height: 30px; width: auto; transition: filter .45s ease; }
.nav .sp { flex: 1; }
.nav .login { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); transition: color .45s ease, opacity .15s; }
.nav .login:hover { opacity: .65; }
.nav .nav-cta { height: 40px; padding: 0; max-width: 0; margin-left: -22px; overflow: hidden; font-size: 14.5px; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), max-width .45s var(--ease), padding .45s var(--ease), margin .45s var(--ease), background .15s; }
.nav.is-cta .nav-cta { opacity: 1; max-width: 280px; padding: 0 18px; margin-left: 0; pointer-events: auto; }
.nav.is-scrolled { background: rgba(250,250,248,.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(20,20,40,.06); }
.hot .nav .logo img { filter: brightness(0) invert(1); }
.hot .nav .login { color: #fff; }

/* ---------- первый экран ---------- */
.hero { position: relative; min-height: max(560px, 100svh); display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--nav-h) 24px 0; overflow: hidden; }
.hero .center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; position: relative; z-index: 1; padding-bottom: 20px; }
.hero .mark { width: clamp(48px, 7vh, 64px); height: auto; margin-bottom: clamp(14px, 2.6vh, 22px); transition: filter .45s ease; }
.hero h1 { font-size: clamp(32px, min(4.5vw, 7.4vh), 60px); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; margin: 0 0 clamp(26px, 4.5vh, 38px); max-width: 1060px; transition: color .45s ease; }
.hero .line { display: inline-flex; align-items: center; gap: .22em; vertical-align: top; white-space: nowrap; justify-content: center; }
.hero .chip { display: inline-flex; position: relative; width: .92em; height: .92em; border-radius: .26em; background: var(--indigo-soft); color: var(--indigo); flex: none; transform: translateY(.02em); transition: background-color .45s ease, color .45s ease; }
.hero .chip svg { position: absolute; left: 50%; top: 50%; width: .54em; height: .54em; transform: translate(-50%, -50%); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero .chip svg.enter, .hero .chip svg.leave { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
.hero .rot { display: inline-block; position: relative; color: var(--indigo); white-space: nowrap; vertical-align: top; transition: width .7s var(--ease), color .45s ease; }
.hero .rot .w { display: inline-block; white-space: nowrap; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero .rot .w.abs { position: absolute; left: 0; top: 0; }
.hero .rot .w.enter { opacity: 0; transform: translateY(.45em); }
.hero .rot .w.leave { opacity: 0; transform: translateY(-.45em); }
.hero .tail { margin-left: .06em; white-space: nowrap; }
.hero .scroll { flex: none; position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #9a9a94; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0 0 20px; animation: bounce 2.4s ease-in-out infinite; transition: color .45s ease; }
.hero .scroll:hover { color: var(--ink); }
.hero .scroll .ico { font-size: 22px; stroke-width: 1.8; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 900px) { .hero .line { flex-wrap: wrap; white-space: normal; } }
@media (max-width: 600px) {
  .hero h1 { font-size: 30px; line-height: 1.2; max-width: 340px; }
  .hero h1 br { display: none; }
  .hero .line { display: inline; }
  .hero .chip { display: inline-flex; vertical-align: -.1em; margin: 0 .1em; transform: none; }
  .hero .btn { width: 100%; max-width: 340px; }
}
/* наведение на главную кнопку: индиговая аврора на весь экран, контент в белый */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .55s ease; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 60%, #4f46e5 0%, #3730a3 55%, #1e1b4b 100%); }
.aurora::before { content: ""; position: absolute; inset: -20%; filter: blur(40px); animation: drift 9s ease-in-out infinite alternate;
  background: radial-gradient(38% 42% at 28% 32%, rgba(165,180,252,.85), transparent 70%), radial-gradient(34% 38% at 72% 70%, rgba(129,140,248,.8), transparent 70%), radial-gradient(30% 34% at 60% 25%, rgba(196,181,253,.6), transparent 70%); }
.aurora::after { content: ""; position: absolute; left: 50%; top: 52%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(199,210,254,.18) 30%, transparent 62%); animation: pulse 1.9s ease-in-out infinite; }
@keyframes drift { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(4%,-3%) rotate(6deg); } 100% { transform: translate(-4%,3%) rotate(-5deg); } }
@keyframes pulse { 0%, 100% { transform: translate(-50%,-50%) scale(.85); opacity: .55; } 50% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; } }
.hot .aurora { opacity: 1; }
.hot .hero h1, .hot .hero .tail { color: #fff; }
.hot .hero .rot { color: #e0e7ff; }
.hot .hero .chip { background: rgba(255,255,255,.16); color: #fff; }
.hot .hero .mark { filter: brightness(0) invert(1); }
.hot .hero .scroll { color: rgba(255,255,255,.75); }
.hot .hero .btn-dark { background: #fff; color: var(--ink); box-shadow: 0 0 0 8px rgba(255,255,255,.14), 0 18px 50px rgba(30,27,75,.45); }

/* ---------- ролик ---------- */
.video { padding: 28px 24px 96px; text-align: center; }
.video .sh { margin-bottom: 30px; }
.video .stage { position: relative; max-width: max(640px, min(1120px, calc((100vh - 250px) * 1.7778 + 20px))); margin: 0 auto; }
.video .glow { position: absolute; left: 6%; right: 6%; top: 14%; bottom: -6%; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .75;
  background: radial-gradient(40% 50% at 30% 60%, rgba(129,140,248,.55), transparent 70%), radial-gradient(40% 50% at 72% 45%, rgba(196,181,253,.5), transparent 70%); }
.video .frame { position: relative; z-index: 1; padding: 10px; border-radius: 30px; background: rgba(255,255,255,.72); border: 1px solid rgba(20,20,40,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 80px -24px rgba(49,46,129,.35), 0 10px 30px rgba(30,27,75,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.video .screen { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #f6f7f3; isolation: isolate; cursor: pointer; }
.video .screen.is-playing { cursor: default; }
.video video, .video .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.video .main { opacity: 0; transition: opacity .5s ease; background: #000; }
.video .is-playing .main { opacity: 1; }
.video .preview, .video .poster { transition: opacity .5s ease, transform 1.2s var(--ease); }
.video .screen:not(.is-playing):hover .preview { transform: scale(1.015); }
.video .veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .45s ease;
  background: radial-gradient(50% 55% at 50% 50%, rgba(30,27,75,.26), rgba(30,27,75,.06) 70%), linear-gradient(to top, rgba(30,27,75,.28), rgba(30,27,75,0) 40%); }
.video .is-loading .veil, .video .is-playing .veil, .video .is-playing .preview, .video .is-playing .poster { opacity: 0; pointer-events: none; }
.video .play { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0; background: #fff; color: var(--indigo-deep); cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 50px rgba(30,27,75,.35); transition: transform .25s var(--ease); }
.video .play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }
.video .play::before, .video .play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: ring 2.6s var(--ease) infinite; pointer-events: none; }
.video .play::after { animation-delay: 1.3s; }
.video .screen:hover .play { transform: scale(1.07); }
.video .play:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 4px; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.video .label { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(20,18,50,.42); color: #fff; font-size: 14.5px; font-weight: 500;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); }
.video .label .ico { font-size: 16px; }
.video .label b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }
.video .end { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; opacity: 0; pointer-events: none; transition: opacity .5s ease;
  background: rgba(30,27,75,.62); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); color: #fff; }
.video .is-ended .end { opacity: 1; pointer-events: auto; }
.video .end h3 { font-size: clamp(22px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.video .end .acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- окно приложения (как в ролике) ---------- */
.win { container-type: inline-size; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid rgba(20,20,40,.06);
  box-shadow: 0 30px 70px -28px rgba(49,46,129,.35), 0 8px 24px rgba(30,27,75,.07); }
.win .bar { height: 30px; background: #f6f6f3; border-bottom: 1px solid #eeede8; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.win .bar i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; flex: none; }
.win .bar i:nth-child(2) { background: #fbbf24; }
.win .bar i:nth-child(3) { background: #34d399; }
.win .url { margin: 0 auto; background: #ecebe6; border-radius: 6px; padding: 2px 34px; color: #8a8a84; font-size: 11px; transform: translateX(-20px); white-space: nowrap; }
.app { font-size: clamp(7.5px, 1.52cqw, 12px); display: grid; grid-template-columns: 13.5em minmax(0, 1fr); aspect-ratio: 16 / 10.4; color: var(--ink); line-height: 1.35; }
.app .side { border-right: 1px solid var(--line2); padding: 1.4em .8em 1em; display: flex; flex-direction: column; gap: .15em; color: var(--body); background: #fff; }
.app .side .logo { height: 1.35em; width: auto; align-self: flex-start; margin: 0 0 1.3em .8em; }
.app .nav-i { display: flex; align-items: center; gap: .75em; height: 2.35em; padding: 0 .8em; border-radius: .75em; font-size: 1.05em; font-weight: 500; white-space: nowrap; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.app .nav-i .ico { font-size: 1.1em; opacity: .55; transition: opacity .35s; }
.app .nav-i.on { background: var(--indigo); color: #fff; font-weight: 600; box-shadow: 0 .45em 1.1em rgba(99,102,241,.35); }
.app .nav-i.on .ico { opacity: 1; }
.app .user { margin-top: auto; display: flex; align-items: center; gap: .65em; padding: .9em .6em 0; border-top: 1px solid var(--line2); font-size: .95em; line-height: 1.2; }
.app .user small { display: block; color: #8a8a84; font-size: .9em; }
.app .main { position: relative; overflow: hidden; background: #f7f7f4; min-width: 0; }
.app .main.white { background: #fff; }

/* экраны внутри окна */
.scr { position: absolute; inset: 0; padding: 2em 2.2em; display: flex; flex-direction: column; gap: 1.4em; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.scr.cur { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.scr.single { position: relative; height: 100%; opacity: 1; visibility: visible; }
.scr .a { opacity: 0; transform: translateY(.9em); transition: opacity .45s ease var(--d, 0s), transform .55s cubic-bezier(.2,.8,.3,1.15) var(--d, 0s); }
.scr.on .a { opacity: 1; transform: none; }
.scr.dark { background: #111118; color: #fff; }
.row { display: flex; align-items: center; gap: .8em; min-width: 0; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.ttl { font-size: 1.75em; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mut { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: .45em; border-radius: 99px; padding: .3em .85em; font-size: 1em; font-weight: 500; background: #efeee9; color: var(--body); white-space: nowrap; }
.pill .ico { font-size: 1.05em; }
.pill.indigo { background: var(--indigo-soft); color: var(--indigo-deep); }
.pill.green { background: var(--green-soft); color: var(--green-ink); }
.pill.amber { background: #fef3c7; color: #92400e; }
.card { background: #fff; border-radius: 1.3em; box-shadow: 0 .15em 1em rgba(30,27,75,.07); padding: 1.3em 1.5em; }
.av { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; font-size: 1em; font-weight: 700; flex: none; background: #e0e7ff; color: var(--indigo-deep); }
.av.sm { width: 2em; height: 2em; font-size: .85em; }
.av.lg { width: 3.2em; height: 3.2em; font-size: 1.25em; }
.av.k { background: var(--green-soft); color: var(--green-ink); }
.av.o { background: #fce7f3; color: #be185d; }
.av.ai { background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; position: relative; }
.av.ai::after { content: ""; position: absolute; right: -.1em; bottom: -.1em; width: .75em; height: .75em; border-radius: 50%; background: #34d399; border: .15em solid #fff; }
.av.ai.g { background: linear-gradient(135deg, #fb7185, #e11d48); }
.ok { width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.ok .ico { font-size: .85em; stroke-width: 3; }
.toast { position: absolute; left: 50%; bottom: 1.8em; transform: translate(-50%, 1em); opacity: 0; background: var(--ink); color: #fff; border-radius: 1em; padding: .8em 1.2em; display: flex; align-items: center; gap: .7em;
  font-size: 1.05em; font-weight: 500; white-space: nowrap; box-shadow: 0 1em 2.5em rgba(0,0,0,.25); transition: opacity .45s ease var(--d, 0s), transform .55s cubic-bezier(.2,.8,.3,1.2) var(--d, 0s); }
.scr.on .toast { opacity: 1; transform: translate(-50%, 0); }
.toast .dot { width: .8em; height: .8em; border-radius: 50%; background: #34d399; }

/* канбан сделок */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; }
.board .col-h { font-size: 1.15em; font-weight: 600; margin-bottom: .8em; }
.board .col-h span { font-weight: 400; color: var(--muted); font-size: .9em; }
.deal { background: #fff; border-radius: 1.1em; box-shadow: 0 .15em .7em rgba(30,27,75,.07); padding: .95em 1.1em; margin-bottom: .9em; position: relative; }
.deal b { display: block; font-size: 1.1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal em { display: block; font-style: normal; color: var(--muted); margin-top: .15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal .sum { display: block; margin-top: .55em; font-size: 1.1em; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deal.blue { background: var(--blue-soft); } .deal.orange { background: var(--orange-soft); } .deal.amber { background: var(--amber-soft); }
.deal.new { outline: .18em solid var(--indigo); box-shadow: 0 0 0 .55em rgba(99,102,241,.15), 0 .7em 1.6em rgba(30,27,75,.12); }
.deal .av { position: absolute; right: .8em; top: .8em; }
.deal.new b { padding-right: 2.4em; }
.form { position: absolute; right: 2.4em; top: 5.2em; width: 26em; background: #fff; border-radius: 1.4em; border: 1px solid var(--line); box-shadow: 0 2em 4.5em rgba(30,27,75,.22); overflow: hidden; z-index: 2; }
.form .fh { display: flex; align-items: center; gap: .6em; padding: .8em 1.1em; background: var(--soft); color: var(--muted); font-size: 1em; }
.form .fb { padding: 1.1em 1.3em 1.3em; display: flex; flex-direction: column; gap: .5em; font-size: 1.1em; }
.form label { color: var(--muted); font-size: .85em; }
.form .in { border: 1px solid var(--line); border-radius: .7em; padding: .5em .8em; }
.form .send { align-self: flex-start; margin-top: .35em; background: var(--indigo); color: #fff; border-radius: .7em; padding: .6em 1.2em; font-weight: 600; animation: press 3.2s ease-in-out infinite; }
@keyframes press { 0%, 55%, 100% { transform: scale(1); } 62% { transform: scale(.94); background: var(--indigo-deep); } }

/* чаты */
.chats { position: absolute; inset: 0; display: grid; grid-template-columns: 19em minmax(0, 1fr); background: #fff; }
.chats .list { border-right: 1px solid var(--line); background: var(--paper); padding: 1.6em 1em; display: flex; flex-direction: column; gap: .3em; }
.chats .list h4 { margin: 0 .5em .7em; font-size: 1.45em; font-weight: 600; }
.chats .it { display: flex; align-items: center; gap: .8em; padding: .7em .7em; border-radius: .9em; }
.chats .it.on { background: var(--indigo-soft); }
.chats .it b { display: block; font-size: 1.05em; font-weight: 600; white-space: nowrap; }
.chats .it small { color: var(--muted); font-size: .9em; }
.chats .conv { position: relative; display: flex; flex-direction: column; min-width: 0; }
.chats .head { display: flex; align-items: center; gap: .9em; padding: 1.3em 1.8em; border-bottom: 1px solid var(--line); }
.chats .head .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chats .msgs { flex: 1; padding: 1.3em 1.8em; display: flex; flex-direction: column; gap: .8em; min-height: 0; }
.chats .msgs > * { flex: none; }
.msg { max-width: 72%; padding: .8em 1.15em; font-size: 1.15em; line-height: 1.45; border-radius: 1.3em 1.3em 1.3em .45em; background: var(--soft); align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--indigo-soft); border-radius: 1.3em 1.3em .45em 1.3em; }
.callcard { align-self: flex-end; display: flex; align-items: center; gap: .9em; padding: .85em 1em; border-radius: 1.15em; background: #fff; border: 1px solid var(--line); box-shadow: 0 .45em 1.3em rgba(30,27,75,.08); }
.callcard .ph { width: 2.8em; height: 2.8em; border-radius: .85em; background: var(--green-soft); color: var(--green-ink); display: grid; place-items: center; font-size: 1.1em; }
.callcard b { display: block; font-size: 1.05em; white-space: nowrap; }
.callcard small { color: var(--muted); }
.callcard .join { background: var(--ink); color: #fff; border-radius: .7em; padding: .5em .9em; font-weight: 600; white-space: nowrap; }
.composer { margin: 0 1.8em 1.6em; height: 4em; border-radius: 1.3em; border: .12em solid var(--line); display: flex; align-items: center; padding: 0 .6em 0 1.3em; color: var(--faint); font-size: 1.1em; gap: .8em; }
.composer .go { margin-left: auto; width: 2.6em; height: 2.6em; border-radius: 50%; background: #d6d6d0; color: #fff; display: grid; place-items: center; }

/* звонок */
.call-top { display: flex; align-items: center; gap: .9em; color: #fff; }
.call-top b { font-size: 1.3em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec { display: inline-flex; align-items: center; gap: .5em; background: rgba(239,68,68,.16); color: #fca5a5; border-radius: 99px; padding: .3em .75em; font-weight: 600; white-space: nowrap; }
.rec i { width: .6em; height: .6em; border-radius: 50%; background: var(--red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.tiles { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; min-height: 0; }
.tile { position: relative; border-radius: 1.3em; background: #1c1c26; display: grid; place-items: center; }
.tile .av { width: 5.5em; height: 5.5em; font-size: 2em; }
.tile .who { position: absolute; left: 1em; right: 1em; bottom: .9em; font-size: 1.05em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .who span { color: #a1a1aa; font-weight: 400; }
.tile.talk { animation: talk 1.2s ease-in-out infinite; }
@keyframes talk { 0%, 100% { box-shadow: 0 0 0 .2em rgba(34,197,94,.75); } 50% { box-shadow: 0 0 0 .4em rgba(34,197,94,.45); } }
.subs { border-radius: 1em; background: rgba(255,255,255,.06); padding: .8em 1.2em; display: flex; align-items: center; gap: 1em; color: #e4e4e7; font-size: 1.15em; }
.subs b { color: #c7d2fe; }
.subs small { margin-left: auto; color: #a1a1aa; font-size: .8em; white-space: nowrap; }
.ctrls { display: flex; justify-content: center; gap: .9em; }
.ctrls span { width: 3.2em; height: 3.2em; border-radius: 50%; background: #2a2a36; color: #e4e4e7; display: grid; place-items: center; font-size: 1.1em; }
.ctrls span.end { width: 4em; border-radius: 1.6em; background: var(--red); color: #fff; }

/* итоги звонка и КП */
.kp { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 1.4em; flex: 1; min-height: 0; }
.tasklist .t { display: flex; align-items: center; gap: .8em; padding: .75em 0; border-top: 1px solid var(--line2); font-size: 1.05em; }
.tasklist .t span.n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasklist .t small { display: none; }
.doc > .row:first-child { flex-wrap: wrap; row-gap: .5em; }
.doc > .row:first-child b { white-space: nowrap; flex: 1 0 auto; }
.doc { border-radius: 1.3em 1.3em 0 0; margin-bottom: -2em; }
.doc h5 { margin: 1.1em 0 .3em; font-size: 1.7em; font-weight: 700; letter-spacing: -.02em; }
.lines { display: flex; flex-direction: column; gap: .75em; margin: 1.2em 0; }
.lines i { display: block; height: .8em; border-radius: .4em; background: #ebeae5; }
.lines i.hl { background: #e0e7ff; }
.sent { display: flex; align-items: center; gap: .7em; background: var(--indigo-soft); color: var(--indigo-deep); border-radius: .9em; padding: .7em 1em; font-weight: 600; }

/* задачи в работе */
.kan { position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; min-height: 0; }
.kan .c { border-radius: 1.2em; background: #efeee9; padding: 1em; font-weight: 600; font-size: 1.1em; }
.kan .c.done { background: #f0fdf4; color: var(--green-ink); }
.kan .cards { position: absolute; left: 0; top: 3.4em; width: calc((100% - 2.4em) / 3); padding: 0 .7em; display: flex; flex-direction: column; gap: .8em; }
.wk { background: #fff; border-radius: .95em; box-shadow: 0 .3em .9em rgba(30,27,75,.10); padding: .7em .8em; display: flex; align-items: center; gap: .6em; font-size: .98em;
  transition: transform .8s cubic-bezier(.65,0,.35,1) var(--d, 0s); }
.wk .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk .cb { width: 1.35em; height: 1.35em; border-radius: 50%; border: .12em solid #d4d4ce; flex: none; display: grid; place-items: center; transition: background .3s ease calc(var(--d, 0s) + .7s), border-color .3s ease calc(var(--d, 0s) + .7s); }
.wk .cb .ico { font-size: .8em; color: #fff; stroke-width: 3; opacity: 0; transition: opacity .3s ease calc(var(--d, 0s) + .7s); }
.scr.on .wk { transform: translateX(calc(200% + 5.2em)); }
.scr.on .wk .cb { background: var(--green); border-color: var(--green); }
.scr.on .wk .cb .ico { opacity: 1; }

/* акт */
.act { border-radius: 1.3em 1.3em 0 0; margin-bottom: -2em; flex: 1; padding: 1.8em 2.2em; }
.tbl { margin-top: 1.4em; border: 1px solid var(--line); border-radius: 1em; overflow: hidden; font-size: 1.1em; }
.tbl div { display: flex; justify-content: space-between; gap: 1em; padding: .75em 1.1em; border-top: 1px solid var(--line2); }
.tbl div:first-child { border-top: 0; background: var(--paper); color: var(--muted); font-size: .9em; }
.tbl div:last-child { font-weight: 700; border-top-color: var(--line); }
.tbl span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.send-btn { position: absolute; right: 2.2em; bottom: 6.5em; border-radius: 1em; padding: .9em 1.5em; font-weight: 600; font-size: 1.1em; display: flex; align-items: center; gap: .6em;
  background: var(--indigo); color: #fff; box-shadow: 0 .6em 1.5em rgba(99,102,241,.35); transition: background .3s ease 1.1s, color .3s ease 1.1s, box-shadow .3s ease 1.1s; }
.send-btn .b { display: none; }
.scr.on .send-btn { background: var(--green-soft); color: var(--green-ink); box-shadow: none; }
.scr.on .send-btn .a1 { display: none; }
.scr.on .send-btn .b { display: inline; }

/* задача с ИИ-сотрудником */
.task { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.3em; flex: 1; min-height: 0; }
.feed { border-radius: 1.3em 1.3em 0 0; margin-bottom: -2em; display: flex; flex-direction: column; gap: 1.2em; font-size: 1.05em; }
.feed .desc { color: var(--body); line-height: 1.5; padding-bottom: 1em; border-bottom: 1px solid var(--line2); }
.cm { display: flex; gap: .8em; align-items: flex-start; }
.cm .hd { display: flex; align-items: center; gap: .5em; font-size: .92em; }
.cm .hd .pill { font-size: .8em; padding: .1em .55em; }
.cm p { margin-top: .3em; line-height: 1.45; }
.files { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .6em; }
.file { display: inline-flex; align-items: center; gap: .45em; border: 1px solid var(--line); background: var(--paper); border-radius: .75em; padding: .35em .7em; font-size: .92em; white-space: nowrap; }
.file .ico { color: var(--green-ink); }
.file.img .ico { color: var(--indigo); }
.props { display: flex; flex-direction: column; gap: 1em; }
.props .card { display: flex; flex-direction: column; gap: .9em; font-size: 1.02em; }
.props small { color: var(--muted); display: block; margin-bottom: .35em; }
.stat { background: var(--ink); color: #fff; border-radius: 1.3em; padding: 1.2em 1.4em; }
.stat .k { font-size: .82em; color: #a5b4fc; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.stat b { display: block; font-size: 2.1em; font-weight: 700; letter-spacing: -.02em; margin-top: .25em; font-variant-numeric: tabular-nums; }
.stat span { color: #d4d4d8; font-size: .95em; }

/* знания */
.kn-head { display: flex; align-items: center; gap: .9em; padding-bottom: .9em; border-bottom: 1px solid var(--line); margin: 0 -2.2em; padding-inline: 2.2em; }
.kn-body { display: flex; flex-direction: column; gap: .75em; padding: 0 3em; flex: 1; min-height: 0; margin-top: -.3em; }
.q { align-self: flex-end; max-width: 80%; background: var(--indigo-soft); border-radius: 1.5em 1.5em .45em 1.5em; padding: .75em 1.15em; font-size: 1.1em; line-height: 1.45; }
.srcs { display: flex; gap: 1.2em; flex-wrap: wrap; color: var(--body); font-size: 1.02em; }
.srcs span { display: inline-flex; align-items: center; gap: .45em; }
.srcs .ok { width: 1.2em; height: 1.2em; }
.ev { display: flex; gap: 1.1em; }
.ev .d { width: 6.3em; flex: none; font-weight: 700; color: var(--indigo-deep); font-size: 1.05em; padding-top: .1em; }
.ev .x { flex: 1; min-width: 0; border-left: .15em solid var(--indigo-soft); padding-left: 1.1em; }
.ev .x p { font-size: 1.08em; line-height: 1.4; }
.ev .tags { display: flex; gap: .5em; margin-top: .4em; flex-wrap: wrap; }
.ev .tags .pill { font-size: .92em; background: var(--soft); }
.ev .tags .pill.hot { background: var(--indigo); color: #fff; }
.player { background: var(--ink); color: #fff; border-radius: 1.3em; padding: .9em 1.3em; margin-left: 7.4em; }
.player .wave { display: flex; align-items: center; gap: .2em; height: 1.8em; margin-top: .55em; }
.player .wave i { flex: 1; border-radius: .15em; background: #3f3f46; }
.player .wave i.p { background: #818cf8; }
.player p { margin-top: .5em; color: #e4e4e7; font-size: 1.02em; }
.player p b { color: #c7d2fe; }

/* контроль */
.ctl { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.3em; flex: 1; min-height: 0; }
.ctl .card h6 { margin: 0 0 .6em; font-size: 1.2em; font-weight: 600; }
.rule { display: flex; align-items: center; gap: .7em; padding: .45em 0; font-size: 1.05em; color: var(--body); }
.acc-row { display: flex; align-items: center; justify-content: space-between; padding: .45em 0; font-size: 1.05em; color: var(--body); }
.tg { width: 2.9em; height: 1.65em; border-radius: 1em; background: var(--indigo); position: relative; flex: none; }
.tg::after { content: ""; position: absolute; top: .22em; left: 1.47em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; }
.tg.off { background: #d6d6d0; }
.tg.off::after { left: .22em; }
.log { border-radius: 1.3em 1.3em 0 0; margin-bottom: -2em; position: relative; display: flex; flex-direction: column; }
.log .lr { display: flex; gap: .9em; padding: .55em .8em; border-radius: .8em; font-size: 1.05em; }
.log .lr time { font-family: ui-monospace, Menlo, monospace; color: var(--muted); width: 3.3em; flex: none; }
.log .lr.new { background: var(--green-soft); color: var(--green-ink); font-weight: 600; }
.log .lr.new time { color: var(--green-ink); }
.log .lr.new[hidden] { display: none; }
.ask { position: absolute; left: 1.4em; right: 1.4em; bottom: 3.4em; background: #fff; border-radius: 1.3em; padding: 1.1em 1.3em; box-shadow: 0 0 0 .22em rgba(245,158,11,.45), 0 1.3em 3em rgba(30,27,75,.2); animation: askpulse 1.8s ease-in-out infinite; }
@keyframes askpulse { 50% { box-shadow: 0 0 0 .4em rgba(245,158,11,.3), 0 1.3em 3em rgba(30,27,75,.2); } }
.ask p { font-size: 1.1em; line-height: 1.45; }
.ask .acts { display: flex; gap: .7em; margin-top: .9em; }
.ask button { white-space: nowrap; font-size: 1.05em; height: 2.9em; padding: 0 1.3em; border-radius: .9em; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font-weight: 500; }
.ask button.yes { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.ask button.yes:hover { background: #000; }
.ask.done { animation: none; box-shadow: 0 0 0 .18em var(--green), 0 1.3em 3em rgba(30,27,75,.2); }
.ask.done button.yes { background: var(--green); border-color: var(--green); }
.ask.done button.no { opacity: .4; pointer-events: none; }

/* ---------- стопка из четырёх блоков ---------- */
.stack { display: flex; flex-direction: column; gap: 40px; }
.sc { position: sticky; top: calc(var(--nav-h) + 16px + var(--i) * 14px); background: #fff; border-radius: 32px; border: 1px solid rgba(20,20,40,.06); box-shadow: var(--shadow-card);
  padding: 44px; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 44px; align-items: center; transform-origin: 50% 0; will-change: transform; }
.sc .txt { display: flex; flex-direction: column; gap: 18px; align-self: stretch; justify-content: center; }
.sc h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.sc .txt > p { font-size: 16.5px; color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.sc ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--body); }
.sc ul li { display: flex; gap: 10px; align-items: flex-start; }
.sc ul li .ico { color: var(--indigo); font-size: 18px; margin-top: 2px; stroke-width: 2.4; }
.sc .eyebrow { align-self: flex-start; }
.shade { position: absolute; inset: 0; border-radius: inherit; background: var(--paper); opacity: 0; pointer-events: none; z-index: 5; }
/* шаги пути клиента */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.steps button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 15.5px; font-weight: 500; text-align: left; cursor: pointer; position: relative; overflow: hidden; transition: background .25s, color .25s; }
.steps button:hover { background: var(--soft); color: var(--ink); }
.steps .sn { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--muted); display: grid; place-items: center; flex: none; transition: background .3s, color .3s; }
.steps .sn .ico { font-size: 14px; }
.steps .done .sn { background: var(--green); color: #fff; }
.steps .done button { color: var(--body); }
.steps .cur button { background: var(--indigo-soft); color: var(--ink); font-weight: 600; }
.steps .cur .sn { background: var(--indigo); color: #fff; }
.steps .prog { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(99,102,241,.18); overflow: hidden; opacity: 0; }
.steps .prog i { display: block; height: 100%; width: 0; background: var(--indigo); }
.steps .cur .prog { opacity: 1; }
.steps .cur .prog i { animation: prog var(--step-ms, 3600ms) linear forwards; }
.steps.paused .cur .prog i { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
.steps button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* ---------- ИИ-сотрудники: шесть ролей, всё видно сразу ---------- */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rcard { background: #fff; border: 1px solid rgba(20,20,40,.06); border-radius: 26px; box-shadow: var(--shadow-card); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .5s ease calc(var(--k) * 70ms), translate .6s var(--ease) calc(var(--k) * 70ms); }
.rcard:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20,20,40,.04), 0 18px 48px -14px rgba(30,27,75,.2); }
.js .rgrid:not(.on) .rcard { opacity: 0; translate: 0 18px; }
.rtop { display: flex; align-items: center; gap: 12px; }
.rtop h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.rcard .ri { width: 44px; height: 44px; border-radius: 14px; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; font-size: 20px; flex: none; }
.rcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; color: var(--body); }
.rcard li { display: flex; align-items: center; gap: 9px; }
.rcard li .ico { color: var(--indigo); font-size: 16px; stroke-width: 2.4; }
.rcard .res { margin-top: auto; display: flex; align-items: center; gap: 11px; background: var(--paper); border: 1px solid var(--line2); border-radius: 16px; padding: 11px 12px; }
.rcard .rf { width: 36px; height: 36px; border-radius: 11px; background: #fff; border: 1px solid var(--line); color: var(--indigo-deep); display: grid; place-items: center; font-size: 17px; flex: none; }
.rcard .res b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard .res small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard .done { flex: none; font-size: 12.5px; font-weight: 600; color: var(--green-ink); background: var(--green-soft); border-radius: 99px; padding: 3px 9px; }
.more { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; color: var(--muted); font-size: 15px; }
.more span.p { border: 1px solid #e7e5df; border-radius: 99px; padding: 5px 12px; background: #fff; color: var(--body); font-size: 14px; }
.facts { margin: 0 auto 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.facts span { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; background: #fff; border: 1px solid #e7e5df; padding: 8px 16px; font-size: 15px; font-weight: 500; color: var(--body); }
.facts .ico { color: var(--indigo); font-size: 17px; }
.facts b { color: var(--ink); font-weight: 600; }

/* ---------- модули ---------- */
.mods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line2); border: 1px solid rgba(20,20,40,.06); border-radius: 28px; box-shadow: var(--shadow-card); overflow: hidden; }
.mod { padding: 24px 22px 22px; background: #fff; display: flex; flex-direction: column; gap: 14px; transition: background .2s; }
.mod:hover { background: #fbfaf7; }
.mod .mi { width: 42px; height: 42px; border-radius: 13px; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; font-size: 20px; }
.mod b { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.mod p { font-size: 14px; line-height: 1.45; color: #75756f; margin-top: 5px; }

/* ---------- финальный призыв ---------- */
.cta { padding: 40px 24px 72px; }
.cta .box { position: relative; max-width: 1200px; margin: 0 auto; border-radius: 32px; overflow: hidden; padding: 96px 40px 100px; text-align: center; color: #fff;
  background: radial-gradient(120% 120% at 50% 110%, #4f46e5 0%, #3730a3 45%, #1e1b4b 100%); }
.cta .box::before { content: ""; position: absolute; inset: -30%; filter: blur(40px); animation: drift 12s ease-in-out infinite alternate;
  background: radial-gradient(35% 40% at 25% 30%, rgba(165,180,252,.7), transparent 70%), radial-gradient(30% 36% at 78% 65%, rgba(129,140,248,.7), transparent 70%), radial-gradient(28% 30% at 60% 15%, rgba(196,181,253,.5), transparent 70%); }
.cta .box > * { position: relative; }
.cta .tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 13px; font-weight: 500; margin-bottom: 26px; }
.cta .tag i { width: 7px; height: 7px; border-radius: 50%; background: #a5b4fc; box-shadow: 0 0 0 4px rgba(165,180,252,.25); }
.cta h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; margin: 0 auto 18px; max-width: 820px; text-wrap: balance; }
.cta p { font-size: clamp(15px, 1.25vw, 18px); color: rgba(255,255,255,.78); margin: 0 auto 34px; max-width: 560px; }
.cta .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .btn { height: 52px; padding: 0 28px; }
.cta .note { margin-top: 24px; font-size: 13px; color: rgba(255,255,255,.55); }

/* ---------- подвал ---------- */
.foot { padding: 8px 24px 40px; }
.foot .in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0 34px; border-top: 1px solid var(--line); }
.foot .brand img { height: 28px; width: auto; display: block; }
.foot .brand p { margin-top: 14px; color: var(--muted); font-size: 14.5px; max-width: 30ch; }
.foot h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.foot a { text-decoration: none; color: var(--body); }
.foot a:hover { color: var(--indigo-deep); }
.foot .copy { max-width: 1200px; margin: 0 auto; color: var(--faint); font-size: 13.5px; }

/* ---------- модалка раннего доступа ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(20,20,40,.45); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal .box { background: var(--paper); border-radius: 24px; max-width: 460px; width: 100%; padding: 40px 36px 34px; text-align: center; position: relative; box-shadow: 0 30px 80px rgba(30,27,75,.35); }
.modal h3 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.modal .lead { font-size: 15px; color: #75756f; margin-bottom: 24px; line-height: 1.55; }
.modal input[type=email] { width: 100%; border: 1px solid #e4e2dc; border-radius: 999px; padding: 14px 22px; font: inherit; font-size: 15px; outline: none; background: #fff; color: var(--ink); margin-bottom: 12px; }
.modal input[type=email]:focus { border-color: var(--indigo); }
.modal .submit { width: 100%; border: 0; border-radius: 999px; padding: 15px 22px; font-size: 15px; font-weight: 600; background: var(--indigo); color: #fff; cursor: pointer; }
.modal .submit:hover { background: var(--indigo-deep); }
.modal .submit:disabled { opacity: .7; cursor: default; }
.modal .consent { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 12.5px; color: #8a8a84; line-height: 1.45; margin: 4px 4px 16px; }
.modal .consent input { margin-top: 2px; accent-color: var(--indigo); flex: none; }
.modal .consent a { color: var(--body); }
.modal .x { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: #9c9c95; font-size: 26px; line-height: 1; padding: 6px; cursor: pointer; }
.modal .x:hover { color: var(--ink); }
.modal .okmsg { display: none; font-size: 15px; font-weight: 600; color: #3d5410; background: #eff9dc; border: 1px solid #d3ec9c; border-radius: 16px; padding: 14px 22px; }
.modal .err { display: none; font-size: 13.5px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 14px; padding: 10px 16px; margin-top: 12px; }

/* ---------- адаптив ---------- */
@container (max-width: 560px) {
  .app { grid-template-columns: 4.2em minmax(0, 1fr); font-size: clamp(7px, 2.3cqw, 11px); aspect-ratio: 4 / 3.6; }
  .app .side { padding-inline: .6em; align-items: center; }
  .app .side .logo, .app .nav-i span, .app .user span { display: none; }
  .app .nav-i { width: 2.8em; justify-content: center; padding: 0; }
  .app .user { padding-inline: 0; border-top: 0; }
  .scr { padding: 1.4em 1.4em; gap: 1em; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board > div:nth-child(3) { display: none; }
  .form { right: 1.2em; left: 1.2em; width: auto; }
  .chats { grid-template-columns: minmax(0, 1fr); }
  .chats .list { display: none; }
  .tiles .tile:nth-child(3) { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp, .task, .ctl { grid-template-columns: minmax(0, 1fr); }
  .kp .doc, .task .props, .ctl > div:first-child { display: none; }
  .kan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kan .c:nth-child(2) { display: none; }
  .kan .cards { width: calc((100% - 1.2em) / 2); }
  .scr.on .wk { transform: translateX(calc(100% + 2.6em)); }
  .kn-body { padding: 0; }
  .player { margin-left: 0; }
  .ev .d { width: 5em; }
  .pill.hide-sm, .ttl + .pill.hide-sm { display: none; }
}
@media (max-width: 1000px) {
  .sc { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 28px; transform: none !important; }
  .shade { display: none; }
  .stack { gap: 20px; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot .in { grid-template-columns: 1fr 1fr; }
  .foot .brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --nav-h: 64px; }
  .wrap { padding-inline: 16px; }
  .nav .wrap { gap: 14px; }
  .nav .logo img { height: 26px; }
  .nav .nav-cta { height: 36px; font-size: 13.5px; margin-left: -14px; }
  .nav.is-cta .nav-cta { padding: 0 14px; margin-left: 0; }
  .nav .nav-cta .long { display: none; }
  .block { padding-block: 64px; }
  .sh { margin-bottom: 30px; }
  .video { padding: 8px 16px 56px; }
  .video .sh { margin-bottom: 22px; }
  .video .frame { padding: 6px; border-radius: 20px; }
  .video .screen { border-radius: 15px; }
  .video .play { width: 64px; height: 64px; }
  .video .play svg { width: 24px; height: 24px; margin-left: 3px; }
  .video .veil { gap: 12px; }
  .video .label { font-size: 12.5px; padding: 6px 12px; gap: 7px; }
  .video .end { gap: 14px; }
  .video .end .btn { height: 42px; padding: 0 16px; font-size: 14px; }
  .sc { padding: 22px 18px; border-radius: 24px; }
  .sc h3 { font-size: 26px; }
  .steps button { font-size: 15px; padding: 8px 10px; }
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .mod:last-child { grid-column: 1 / -1; }
  .rgrid { grid-template-columns: minmax(0, 1fr); }
  .rcard { padding: 20px 18px 16px; border-radius: 22px; }
  .mod { padding: 18px 16px; gap: 10px; }
  .mod .mi { width: 36px; height: 36px; font-size: 17px; border-radius: 11px; }
  .mod b { font-size: 15px; }
  .mod p { font-size: 13px; }
  .cta { padding: 24px 16px 48px; }
  .cta .box { padding: 56px 22px 60px; border-radius: 24px; }
  .cta .btn { width: 100%; max-width: 340px; }
  .foot { padding-inline: 16px; }
  .modal .box { padding: 36px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora::before, .aurora::after, .cta .box::before, .hero .scroll, .video .play::before, .video .play::after, .rec i, .tile.talk, .ask, .form .send { animation: none; }
  .rcard { transition: none; }
  .video .preview { display: none; }
  .scr .a, .toast, .wk, .wk .cb, .wk .cb .ico, .send-btn { transition: none; }
  .steps .cur .prog i { animation: none; width: 100%; }
}

/* ---------- политика и согласие ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + 40px) 24px 80px; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 10px; }
.legal .upd { color: var(--muted); font-size: 14.5px; margin-bottom: 36px; }
.legal h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 34px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--body); }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 22px; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.legal .fill { background: #fef3c7; color: #92400e; border-radius: 6px; padding: 0 6px; font-weight: 500; }
.legal .draft { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 14px; padding: 12px 16px; font-size: 14.5px; margin-bottom: 28px; }
.nav.solid { background: rgba(250,250,248,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(20,20,40,.06); }