/* ГЕРОЙ-КИНО — стили сцены героя главной «ЗИП. → сделка» (hero/film.js, film-deal.js).
   Сцена — 1200×600 «единиц», камера масштабирует её целиком, поэтому размеры внутри — в px сцены.
   Токены --site-* — из ../styles.css. Лайм — только заливки от 8 px (Р-19): точка, кнопка,
   бегущие метки, лучшая цена, шаги сделки. */

.hero .hero-media-film {
  position: relative; z-index: 1;            /* над растворением точек .hero-fade */
  margin-top: 48px;
  background: var(--site-quote-bg);
  border: 1px solid var(--site-border); border-radius: 12px;
  overflow: hidden;
}
/* место под кадр — до того, как film.js его построит: иначе секции ниже прыгают (сдвиг вёрстки, 30.09) */
.hero .hero-media:empty { aspect-ratio: 2 / 1; }
@media (max-width: 760px) { .hero .hero-media:empty { aspect-ratio: 1 / 1.1; } }
.film { position: relative; outline: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.film:focus-visible { box-shadow: inset 0 0 0 2px var(--site-primary); }
.film.is-static { cursor: default; }
.film-view {
  position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden;
  background-image: radial-gradient(rgba(26, 26, 26, 0.075) 1px, transparent 1.3px);
  background-size: 14px 14px;
}
/* края сцены мягко уходят в тёплый фон — глубина без рамки */
.film-view::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 50%, rgba(247, 245, 240, 0) 62%, rgba(247, 245, 240, 0.92) 100%);
}
.film-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.film-lines { position: absolute; left: 0; top: 0; overflow: visible; }
.film-layer { position: absolute; inset: 0; }
.film-layer > * { position: absolute; will-change: transform, opacity; }
.film-state {
  position: absolute; top: 12px; left: 14px; z-index: 3;
  padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--site-text-2); background: var(--site-surface); border: 1px solid var(--site-border);
}
.film-state[hidden] { display: none; }
.hero-reduced { margin-top: 12px; font-size: 13px; color: var(--site-text-3); }

/* ---------- линии и бегущие метки ---------- */
.fl-line { fill: none; stroke: #bab5a9; stroke-width: 1.3; stroke-linecap: round; }
.fl-line.is-dash { stroke: #c9c4b8; stroke-dasharray: 4 5; }
.fl-line.is-bad { stroke: #e3bfae; stroke-dasharray: 3 4; }
.fl-run { fill: var(--site-accent); stroke: var(--site-primary); stroke-width: 1; }
.fl-run.is-back { fill: var(--site-primary); stroke: none; }
.fl-run.is-remind { fill: var(--site-ink-blue); stroke: none; }
.fl-run.is-order { fill: var(--site-accent); stroke: var(--site-primary); stroke-width: 1.4; }
.fl-run.is-quiet { fill: #9a968c; stroke: none; }

/* ---------- общее: карточка, агент, узел, курсор ---------- */
.fa-agent {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--site-pill-text);
  background: var(--site-pill-bg); box-shadow: 0 0 0 1px rgba(26, 26, 26, .04);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.fa-agent .agents-mark { width: 14px; height: 14px; }
.fa-agent.is-work { background: var(--site-primary); color: var(--site-on-primary); }
.fa-agent.is-work .agents-mark-ring { fill: var(--site-on-primary); }

.fn-node {
  padding: 10px 12px 10px; border-radius: 12px;
  background: var(--site-surface); border: 1px solid var(--site-border);
  box-shadow: 0 1px 2px rgba(26, 26, 26, .04), 0 10px 26px -14px rgba(26, 26, 26, .2);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fn-top { display: flex; align-items: center; gap: 8px; }
.fn-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #d6d1c5; transition: background-color .3s var(--ease); }
.fn-role { font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--site-primary); white-space: nowrap; }
.fn-tag { margin-left: auto; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--site-pill-text); background: var(--site-pill-bg); white-space: nowrap; }
.fn-sub { margin-top: 4px; min-height: 16px; font-size: 12px; line-height: 1.35; color: var(--site-text-2); white-space: nowrap; }
.fn-note { margin-top: 2px; font-size: 10.5px; color: var(--site-text-3); }
.fn-node.is-cue { border-color: var(--site-primary); box-shadow: 0 1px 2px rgba(26, 26, 26, .05), 0 16px 34px -14px rgba(26, 26, 26, .32); }
.fn-node.is-cue .fn-dot { background: var(--site-accent); box-shadow: 0 0 0 1px rgba(26, 26, 26, .2); }
.fn-node.is-future { background: rgba(255, 255, 255, .38); border: 1px dashed #cdc8ba; box-shadow: none; }
.fn-node.is-future .fn-role { color: var(--site-text-2); }
.fn-node.is-future .fn-dot { background: transparent; box-shadow: inset 0 0 0 1px #b3aea2; }
.fn-node.is-future.is-cue { border-color: #9a968c; background: rgba(255, 255, 255, .6); }
.fn-node.is-future.is-cue .fn-dot { background: #9a968c; box-shadow: none; }
.fn-node.is-bad .fn-dot { background: var(--site-ink-clay); }
.fn-node.is-bad .fn-sub { color: var(--site-ink-clay); }
.fn-node.is-done .fn-sub {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  padding: 2px 8px 2px 6px; border-radius: 6px; color: var(--site-on-primary); background: var(--site-primary);
}
.fn-node.is-done .fn-sub::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--site-accent); }
.fn-node.has-order .fn-sub { display: none; }
.fn-order {
  display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 4px 8px 4px 6px;
  border-radius: 8px; background: var(--site-quote-bg); font-size: 11.5px; white-space: nowrap;
}
.fn-order i { width: 8px; height: 8px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 0 1px rgba(26, 26, 26, .2); }
.fn-order-n { font-family: var(--mono); color: var(--site-primary); }
.fn-order-v { margin-left: auto; font-family: var(--mono); font-weight: 500; color: var(--site-primary); }

.fc-cursor { left: 0; top: 0; z-index: 5; pointer-events: none; }
.fc-cursor svg { display: block; width: 16px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.fc-cursor path { fill: var(--site-primary); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.fc-name {
  position: absolute; left: 13px; top: 17px; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
  color: var(--site-on-primary); background: var(--site-primary);
}
.fc-cursor.is-light path { fill: #5f5b52; }
.fc-cursor.is-light .fc-name { background: #5f5b52; }

/* ---------- лист и разбор листа ---------- */
.fs-sheet {
  padding: 16px 18px 16px; border-radius: 16px;
  background: var(--site-surface); border: 1px solid var(--site-border);
  box-shadow: 0 2px 4px rgba(26, 26, 26, .04), 0 30px 60px -28px rgba(26, 26, 26, .35);
  display: flex; flex-direction: column;
}
.fs-title { font-size: 14px; font-weight: 500; }
.fs-tabs { display: flex; gap: 6px; margin: 10px 0 12px; }
.fs-tabs span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--site-border); font-size: 12px; color: var(--site-text-2); transition: background-color .25s var(--ease), color .25s var(--ease); }
.fs-tabs span.is-on { background: var(--site-primary); border-color: var(--site-primary); color: var(--site-on-primary); }
.fs-tbl { border-radius: 10px; overflow: hidden; border: 1px solid var(--site-table-border); }
.fs-tr { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(calc(var(--cols, 5) - 1), minmax(0, 1fr)); gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--site-table-border); font-size: 13px; font-variant-numeric: tabular-nums; }
.fs-tr:first-child { border-top: 0; }
.fs-th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--site-text-3); background: var(--site-bg); }
.fs-tr span { white-space: nowrap; }
.fs-tr span.is-best { justify-self: start; padding: 1px 6px; margin-left: -6px; border-radius: 5px; font-weight: 600; background: var(--site-accent); }
.fs-foot { margin-top: 8px; font-size: 11.5px; color: var(--site-text-3); }
.fs-btn {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 500;
  color: var(--site-on-primary); background: var(--site-primary);
}
.fs-btn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--site-accent); }
.fs-explain { padding: 10px 14px 12px; border-radius: 12px; background: var(--site-pill-bg); }
.fs-explain-h { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--site-text-2); }
.fs-explain-h .agents-mark { width: 13px; height: 13px; }
.fs-explain-t { margin-top: 5px; min-height: calc(1.4em * 2); font-size: 13.5px; line-height: 1.4; color: var(--site-primary); }

/* ---------- окно ввода и карточка сделки ---------- */
.fa-win {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 18px 14px 22px; border-radius: 18px;
  background: var(--site-surface); border: 1px solid var(--site-border);
  box-shadow: 0 2px 4px rgba(26, 26, 26, .04), 0 28px 64px -28px rgba(26, 26, 26, .38);
}
.fa-win-text { font-size: 17px; line-height: 1.5; color: var(--site-primary); }
.fa-caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; background: var(--site-primary); animation: fa-caret 1s steps(1) infinite; }
@keyframes fa-caret { 50% { opacity: 0; } }
.fa-win-bar { display: flex; align-items: center; justify-content: space-between; }
.fa-win-hint { font-size: 12px; color: var(--site-text-3); }
.fa-send { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #e9e6de; transition: background-color .25s var(--ease); }
.fa-send svg { width: 15px; height: 15px; fill: none; stroke: #9a968c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fa-send.is-ready { background: var(--site-accent); box-shadow: 0 0 0 1px rgba(26, 26, 26, .12); }
.fa-send.is-ready svg { stroke: var(--site-primary); }

.fa-hub-wrap .fa-hub { height: 100%; }
.fa-hub {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; border-radius: 18px; color: var(--site-on-primary);
  background: linear-gradient(180deg, #262626 0%, #151515 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 60px -26px rgba(0, 0, 0, .55);
}
.fa-hub-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.fa-hub-id { font-family: var(--mono); letter-spacing: 0; text-transform: none; font-size: 12px; color: rgba(255, 255, 255, .7); }
.fa-hub-st { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 500; white-space: nowrap; }
.fa-hub-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--site-accent); animation: fa-dot 1.6s ease-in-out infinite; }
@keyframes fa-dot { 50% { opacity: .45; transform: scale(.78); } }
.fa-hub-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fa-hub-seg i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .13); transition: background-color .4s var(--ease); }
.fa-hub-seg i.is-on { background: var(--site-accent); }
.fa-hub-step { font-size: 11.5px; color: rgba(255, 255, 255, .55); }

.fa-cap { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--site-text-3); }
.fa-bubble {
  padding: 8px 12px; border-radius: 12px 12px 12px 4px; white-space: nowrap;
  font-size: 13.5px; color: var(--site-primary);
  background: var(--site-surface); border: 1px solid var(--site-border);
  box-shadow: 0 12px 28px -14px rgba(26, 26, 26, .3);
}

/* ---------- заставка: буквы «ЗИП.» и точка, которая садится в карточку сделки ---------- */
.fd-letter svg { display: block; width: 100%; height: 100%; }
.fd-core { z-index: 2; border-radius: 2px; background: var(--site-accent); box-shadow: 0 0 0 1px rgba(26, 26, 26, .28), 0 12px 26px -8px rgba(26, 26, 26, .4); transition: border-radius .3s var(--ease); }
.fd-core.is-round { border-radius: 50%; }

@media (max-width: 760px) {
  .hero .hero-media-film { margin-top: 32px; }
  .film-view { aspect-ratio: 1 / 1.1; }
}