@charset "utf-8";
/* розлив.рф — инженерный портал «Линии розлива и упаковки».
   Визуальная концепция у директора ещё открыта: всё цветовое — в токенах ниже, меняется в одном месте. */

[data-site="rozliv"] {
  --c-brand: #0b3a40;
  --c-primary: #0e6b75;
  --c-primary-hover: #12808b;
  --c-accent: #e3a008;
  --c-deep: #08262b;
  --c-deep-2: #0d343a;
  --c-soft: #f1f5f5;
  --c-line-dark: rgb(255 255 255 / 14%);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

/* шапка */
[data-site="rozliv"] .logo { flex-direction: row; align-items: center; gap: var(--sp-3); }
.logo__mark { width: 34px; height: 34px; border-radius: 8px; background: var(--c-primary); position: relative; flex: none; }
.logo__mark::before, .logo__mark::after { content: ""; position: absolute; background: #fff; border-radius: 2px; }
.logo__mark::before { left: 9px; top: 7px; width: 6px; height: 20px; }          /* бутылка */
.logo__mark::after { left: 18px; top: 16px; width: 9px; height: 3px; box-shadow: 0 6px 0 #fff; } /* лента */
.logo__words { display: flex; flex-direction: column; }
[data-site="rozliv"] .logo__name { color: var(--c-brand); letter-spacing: .06em; }
@media (min-width: 961px) {
  /* в одну строку шапки подпись под логотипом не помещается рядом с меню, телефоном и кнопкой:
     на десктопе её роль играет строка над заголовком первого экрана */
  [data-site="rozliv"] .logo { flex: none; }
  [data-site="rozliv"] .logo__tag { display: none; }
  [data-site="rozliv"] .site-nav ul { flex-wrap: nowrap; gap: var(--sp-1) var(--sp-4); }
  [data-site="rozliv"] .site-nav a { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  [data-site="rozliv"] .site-nav ul { gap: var(--sp-1) var(--sp-3); }
  [data-site="rozliv"] .site-nav a { font-size: .9rem; }
}
[data-site="rozliv"] .site-nav a[aria-current] { color: var(--c-primary); border-bottom-color: var(--c-accent); }

.btn--accent { background: var(--c-accent); color: #1b1404; }
.btn--accent:hover { background: #f0b11d; color: #1b1404; }
.btn--ghost-light { border: 1px solid rgb(255 255 255 / 45%); color: #fff; background: transparent; }
.btn--ghost-light:hover { background: rgb(255 255 255 / 10%); color: #fff; border-color: #fff; }
.rz-h { position: relative; padding-bottom: var(--sp-4); margin-bottom: 0; font-weight: 600; }
.rz-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--c-accent); }
.rz-h--light { color: #fff; }
.section--soft { background: var(--c-soft); }
.section-lead { color: var(--c-muted); max-width: 80ch; margin: var(--sp-4) 0 var(--sp-6); }

/* ---------- первый экран со схемой линии ---------- */
.rz-hero {
  position: relative; color: #fff; padding: var(--sp-7) 0 var(--sp-6); overflow: hidden;
  background:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(1200px 500px at 80% -10%, #135d66 0%, transparent 60%),
    var(--c-deep);
}
.rz-kicker { display: inline-block; font: 600 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-4); }
.rz-hero h1 { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); margin-bottom: var(--sp-4); max-width: 16ch; }
.rz-hero__lead { max-width: 64ch; font-size: var(--fs-2); color: rgb(255 255 255 / 80%); }
.rz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* первый экран: текст слева, человек справа — на светящемся круге, вокруг цифры компании */
.rz-hero__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-6); align-items: end; }
.rz-hero__top > .rz-hero__head:only-child { grid-column: 1 / -1; }
.rz-hero__figure { position: relative; align-self: stretch; min-height: 360px; display: grid; place-items: end center;
  margin-bottom: calc(-1 * var(--sp-7)); animation: figIn .9s cubic-bezier(.2, .7, .2, 1) both .15s; }
@keyframes figIn { from { opacity: 0; transform: translateY(30px); } }
.rz-hero__figure::before { content: ""; position: absolute; left: 50%; bottom: 8%; width: min(400px, 92%); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgb(95 196 207 / 45%), rgb(14 107 117 / 25%) 45%, transparent 70%); filter: blur(2px); }
.rz-hero__figure img { position: relative; width: auto; max-width: 100%; max-height: 430px; height: auto; object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  filter: drop-shadow(0 20px 40px rgb(0 0 0 / 35%)); }
.rz-orbit { position: absolute; left: 50%; bottom: 4%; width: min(460px, 100%); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  border: 1px dashed rgb(255 255 255 / 22%); animation: orbit 40s linear infinite; }
.rz-orbit--2 { width: min(330px, 74%); bottom: 14%; border: 1px solid rgb(227 160 8 / 30%); border-left-color: transparent; border-bottom-color: transparent; animation-duration: 14s; animation-direction: reverse; }
@keyframes orbit { to { rotate: 360deg; } }
.rz-float { position: absolute; z-index: 2; display: grid; gap: 2px; max-width: 190px; padding: 10px 14px; border-radius: 12px;
  background: rgb(8 38 43 / 62%); border: 1px solid rgb(255 255 255 / 16%); backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 30%); font-size: .78rem; line-height: 1.3; color: rgb(255 255 255 / 75%);
  animation: bob 6s ease-in-out infinite; }
.rz-float b { font: 700 1.15rem/1.1 var(--mono); color: var(--c-accent); }
.rz-float--1 { left: 0; top: 18%; }
.rz-float--2 { right: 0; top: 42%; animation-delay: -2s; padding-left: 26px; }
.rz-float--3 { left: 6%; bottom: 12%; animation-delay: -4s; }
.rz-float__led { position: absolute; left: 11px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; animation: led 2.4s ease-out infinite; }
@keyframes bob { 50% { translate: 0 -8px; } }
@media (max-width: 1100px) { .rz-float--3 { display: none; } }
@media (max-width: 900px) {
  .rz-hero__top { grid-template-columns: 1fr; }
  .rz-hero__figure { display: none; }   /* на телефоне первым идёт конвейер */
}

/* схема: SVG-трубопровод + узлы-ссылки поверх, координаты в % от рамки 1200×420 */
.line-map { position: relative; margin: var(--sp-7) 0 0; aspect-ratio: 1200 / 420; }
.line-map__pipes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: rgb(255 255 255 / 55%); }
.pipe path { fill: none; stroke: rgb(255 255 255 / 30%); stroke-width: 3; stroke-linecap: round; }
.pipe--main path { stroke: rgb(255 255 255 / 40%); stroke-width: 5; }
.pipe--product path { stroke: #5fc4cf; }
/* бегущий поток по трубам */
.pipe path { stroke-dasharray: 10 12; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -44; } }

/* лента под машинами: ролики идут 12 единиц за 0,2 с = 60 ед/с, как груз (views.BELT_SPEED) */
.belt-band, .belt-rollers { fill: none; stroke-width: 9; stroke-linejoin: round; }
.belt-band { stroke: rgb(255 255 255 / 9%); stroke-linecap: round; }
.belt-rollers { stroke: rgb(255 255 255 / 34%); stroke-dasharray: 1.5 10.5; animation: belt .2s linear infinite; }
@keyframes belt { to { stroke-dashoffset: -12; } }
.belt-link { fill: none; stroke: rgb(255 255 255 / 28%); stroke-width: 2; stroke-dasharray: 3 4; }
.cargo, .tare { pointer-events: none; }
.tare--pet { --tare: #9fe3ec; }
.tare--glass { --tare: #e0a866; }
/* что делают машины: капля розлива, луч инспекции, жар термотоннеля, плёнка обмотчика */
.fx-drop { fill: #8fe0e8; }
.fx-beam { animation: beam 1.1s ease-in-out infinite alternate; }
@keyframes beam { from { opacity: .15; } to { opacity: .85; } }
.fx-heat { fill: var(--c-accent); filter: blur(5px); animation: heat 1.8s ease-in-out infinite alternate; }
@keyframes heat { from { opacity: .12; } to { opacity: .5; } }
.fx-film { fill: none; stroke: #dff8fc; stroke-width: 1.4; stroke-dasharray: 22 12; opacity: .7; animation: film 1s linear infinite; }
@keyframes film { to { stroke-dashoffset: -68; } }
.rz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.line-map__in, .line-map__out { position: absolute; transform: translate(0, -50%); font-size: .8rem; line-height: 1.35; color: rgb(255 255 255 / 70%); max-width: 210px; }
.line-map__in b, .line-map__out b { display: block; color: #fff; font-size: .92rem; }
.line-map__out { transform: translateY(-50%); text-align: right; }
.line-map__out b { white-space: nowrap; }
.line-map__in--tare { transform: translate(-50%, -50%); font: 600 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent); }
.node {
  position: absolute; transform: translate(-50%, -50%); width: 11%; min-width: 92px; padding: 10px 10px 9px;
  display: grid; gap: 4px; text-align: center; text-decoration: none; color: #fff;
  background: var(--c-deep-2); border: 1px solid rgb(255 255 255 / 22%); border-radius: 10px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 25%); transition: border-color .2s, background .2s, transform .2s;
}
.node__name { font-weight: 600; font-size: clamp(.72rem, .55rem + .45vw, .92rem); line-height: 1.2; hyphens: manual; }
.node__count { font: 500 .7rem/1 var(--mono); color: var(--c-accent); }
.node:hover, .node:focus-visible, .node.is-active { background: #145b63; border-color: var(--c-accent); color: #fff; transform: translate(-50%, -50%) scale(1.05); }
/* индикатор машины: зелёный «в работе» — есть позиции в каталоге; пустой контур — подбираем под задачу */
.node__led { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; animation: led 2.4s ease-out infinite; }
.node--empty .node__led { background: transparent; border: 1px solid rgb(255 255 255 / 45%); animation: none; }
@keyframes led { 0% { box-shadow: 0 0 0 0 rgb(61 220 132 / 60%); } 70%, 100% { box-shadow: 0 0 0 6px rgb(61 220 132 / 0%); } }
/* автоэкскурсия по участкам: полоска показывает, когда переключится следующий */
.node.is-touring::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--c-accent); transform-origin: left; animation: tour var(--tour, 5s) linear forwards; }
@keyframes tour { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.node--empty { border-style: dashed; background: rgb(255 255 255 / 4%); }
.node--empty .node__count { color: rgb(255 255 255 / 55%); }
.node--air, .node--convey { width: 9%; }
.node--air { background: #1c3e2b; }

.line-panel { margin-top: var(--sp-5); border-top: 1px solid var(--c-line-dark); padding-top: var(--sp-5); min-height: 180px; }
.line-panel__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sp-6); align-items: start; animation: panelIn .35s var(--ease, ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
.line-panel h2 { color: #fff; font-size: var(--fs-3); margin-bottom: var(--sp-2); }
.line-panel p { color: rgb(255 255 255 / 75%); }
.line-panel__machines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.line-panel__machines a { display: grid; gap: var(--sp-2); text-decoration: none; color: #fff; font-size: .82rem; line-height: 1.3; }
.line-panel__machines img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px; transition: transform .25s; }
.line-panel__machines a:hover img { transform: translateY(-3px); }
.line-panel__machines small { display: block; margin-top: 2px; color: rgb(255 255 255 / 65%); font-size: .74rem; }
.line-panel__none { grid-column: 1 / -1; color: rgb(255 255 255 / 65%); border: 1px dashed rgb(255 255 255 / 25%); border-radius: 10px; padding: var(--sp-5); }
.link-more--light { color: #8fe0e8; }
/* ---------- телефон: вертикальный конвейер ---------- */
.lv { display: none; }
@media (max-width: 900px) {
  .line-map, .line-panel { display: none; }
  .lv { display: block; margin-top: var(--sp-6); --belt-x: 24px; --belt-w: 18px; --pad: 58px; --ride: 2.6s; }

  /* вход: напиток по трубе и пустая тара сходятся у розлива */
  /* труба и лоток тары доходят ровно до машины розлива (её верх — 12px от начала ленты) */
  .lv-feed { position: relative; display: grid; gap: var(--sp-3); padding: 0 0 calc(var(--sp-6) + 12px) var(--pad); margin-bottom: -12px; overflow: hidden; }
  .lv-feed__product, .lv-feed__tare { position: relative; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--c-line-dark); }
  .lv-feed__product b { display: block; color: #fff; }
  .lv-feed__product small { color: rgb(255 255 255 / 62%); font-size: .8rem; }
  .lv-feed__product::before, .lv-feed__tare::before {
    content: ""; position: absolute; top: 50%; left: calc(var(--x) - var(--pad)); width: calc(var(--pad) - var(--x) - 1px);
    height: 12px; border-top: 3px solid var(--c); border-left: 3px solid var(--c); border-top-left-radius: 10px; }
  .lv-feed__product::after, .lv-feed__tare::after {
    content: ""; position: absolute; top: calc(50% + 10px); left: calc(var(--x) - var(--pad)); width: 3px; height: 600px;
    background: repeating-linear-gradient(to bottom, var(--c) 0 7px, transparent 7px 14px); animation: lv-pipe .45s linear infinite; }
  /* линии толщиной 3px: --x — их левый край. Тара приходит в центр ленты, напиток — левее, в край машины розлива */
  .lv-feed__product { --x: calc(var(--belt-x) - 12px); --c: #5fc4cf; }
  .lv-feed__tare { --x: calc(var(--belt-x) - 1.5px); --c: rgb(227 160 8 / 75%); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  @keyframes lv-pipe { from { background-position: 0 0; } to { background-position: 0 14px; } }
  .lv-feed__label { width: 100%; font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
  .lv-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 25%); color: #fff; text-decoration: none; font-size: .85rem; }
  .lv-chip em, .lv-st em, .lv-support em { font: 500 .72rem/1 var(--mono); font-style: normal; color: var(--c-accent); white-space: nowrap; }
  .lv-chip.is-empty { border-style: dashed; }
  .lv-chip.is-empty em { color: rgb(255 255 255 / 55%); }
  .lv-feed__bottles { position: absolute; left: calc(var(--x) - var(--pad) - 5.5px); top: calc(50% + 6px); width: 12px; height: 90px; }
  .lv-feed__bottles .lv-item { animation-duration: 1.8s; }
  .lv-feed__bottles .lv-item + .lv-item { animation-delay: -.9s; }

  /* лента: ролики бегут вниз */
  .lv-line { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--pad); }
  .lv-line::before {
    content: ""; position: absolute; left: calc(var(--belt-x) - var(--belt-w) / 2); width: var(--belt-w); top: 40px; bottom: 14px;   /* лента начинается под розливом */
    border-radius: 6px; border: 1px solid rgb(255 255 255 / 16%);
    background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 30%) 0 2px, transparent 2px 12px) 0 0 / 100% 12px, rgb(255 255 255 / 6%);
    animation: lv-belt .3s linear infinite; }
  @keyframes lv-belt { to { background-position: 0 12px, 0 0; } }

  /* машины на ленте и карточки участков */
  .lv-st { position: relative; padding-bottom: 76px; }
  .lv-st::before {
    content: ""; position: absolute; z-index: 1; left: calc(var(--belt-x) - var(--pad) - 17px); top: 12px; width: 34px; height: 28px;
    border-radius: 7px; background: var(--c-deep-2); border: 1.5px solid var(--c-accent);
    box-shadow: 0 4px 14px rgb(0 0 0 / 40%), inset 0 -7px 0 rgb(255 255 255 / 7%); }
  .lv-st::after {
    content: ""; position: absolute; z-index: 2; left: calc(var(--belt-x) - var(--pad) + 7px); top: 17px; width: 5px; height: 5px;
    border-radius: 50%; background: #3ddc84; animation: led 2.4s ease-out infinite; }
  .lv-st.is-empty::before { border-style: dashed; border-color: rgb(255 255 255 / 45%); }
  .lv-st.is-empty::after { background: transparent; box-shadow: none; border: 1px solid rgb(255 255 255 / 45%); animation: none; }
  .lv-st--inspect::before { background: linear-gradient(to bottom, transparent 40%, rgb(143 224 232 / 55%) 50%, transparent 60%) 0 0 / 100% 200%, var(--c-deep-2);
    animation: lv-scan 1.6s ease-in-out infinite alternate; }
  @keyframes lv-scan { from { background-position: 0 0, 0 0; } to { background-position: 0 100%, 0 0; } }
  .lv-st--pack::before { box-shadow: 0 4px 14px rgb(0 0 0 / 40%), 0 0 16px rgb(227 160 8 / 35%); }
  .lv-card { position: relative; display: grid; gap: 4px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--c-line-dark);
    background: rgb(255 255 255 / 4%); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
  .lv-card::before { content: ""; position: absolute; top: 25px; left: calc(var(--belt-x) + 17px - var(--pad) - 1px); width: calc(var(--pad) - var(--belt-x) - 17px);
    border-top: 1px dashed rgb(255 255 255 / 35%); }
  .lv-card:active, .lv-card:hover { border-color: var(--c-accent); background: rgb(255 255 255 / 8%); }
  .lv-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
  .lv-card__head b { font-weight: 600; line-height: 1.25; }
  .lv-st.is-empty .lv-card { border-style: dashed; }
  .lv-st.is-empty em { color: rgb(255 255 255 / 55%); }
  .lv-card__info { font-size: .8rem; line-height: 1.4; color: rgb(255 255 255 / 62%);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* груз едет вниз от машины к следующей и меняется по дороге */
  .lv-carry { position: absolute; left: calc(var(--belt-x) - var(--pad) - 20px); width: 40px; top: 40px; bottom: 0; pointer-events: none; }
  .lv-item { position: absolute; left: 50%; top: 0; translate: -50% 0; opacity: 0; overflow: visible; animation: lv-ride var(--ride) linear infinite; --drink: #6fd3e0; }
  .lv-item + .lv-item { animation-delay: calc(var(--ride) / -3); --drink: #e3a008; }
  .lv-item + .lv-item + .lv-item { animation-delay: calc(var(--ride) / -1.5); --drink: #ff8a3d; }
  .lv-item--big + .lv-item--big { animation-delay: calc(var(--ride) / -2); }   /* упаковки и паллеты — по две на отрезке */
  .lv-item--bottle, .lv-item--full, .lv-item--label { width: 11px; height: 26px; }
  .lv-item--pack { width: 28px; height: 21px; }
  .lv-item--pallet, .lv-item--wrapped { width: 30px; height: 27px; }
  @keyframes lv-ride { 0% { top: -4px; opacity: 0; } 12%, 78% { opacity: 1; } 100% { top: calc(100% - 22px); opacity: 0; } }

  .lv-end { position: relative; padding: 6px 0 0; }
  .lv-end::before { content: ""; position: absolute; left: calc(var(--belt-x) - var(--pad) - 17px); top: 4px; width: 34px; height: 28px; border-radius: 4px;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / 22%) 0 2px, transparent 2px 7px), var(--c-deep-2); border: 1.5px solid rgb(255 255 255 / 45%); }
  .lv-end b { display: block; color: #fff; }
  .lv-end small { color: rgb(255 255 255 / 60%); font-size: .8rem; }
  .lv-support { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding-left: var(--pad); }
  .lv-support a { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 7%); color: #fff; text-decoration: none; font-size: .82rem; }
}

/* ---------- мотивы ---------- */
.motives { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* значок слева, текст справа от него */
.motive { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-content: start; gap: var(--sp-1) var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-5); border-radius: 12px; border: 1px solid var(--c-line); text-decoration: none; color: var(--c-text); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.motive:hover { border-color: var(--c-primary); box-shadow: var(--shadow); transform: translateY(-3px); }
/* значок мотива: плитка с рисунком по смыслу; при наведении рисунок «оживает» */
.motive__icon { display: grid; place-items: center; width: 52px; height: 52px; grid-row: 1 / span 3; border-radius: 14px;
  color: var(--c-primary); background: linear-gradient(135deg, rgb(14 107 117 / 12%), rgb(227 160 8 / 12%)); transition: background .25s, color .25s; }
.motive__icon svg { width: 28px; height: 28px; overflow: visible; }
.motive:hover .motive__icon { background: var(--c-primary); color: #fff; }
.mi-bar { transform-box: fill-box; transform-origin: bottom; }
.motive:hover .mi-bar { animation: mi-grow .7s cubic-bezier(.2, .7, .2, 1) both; }
.motive:hover .mi-bar:nth-child(2) { animation-delay: .08s; }
.motive:hover .mi-bar:nth-child(3) { animation-delay: .16s; }
@keyframes mi-grow { from { transform: scaleY(.2); } }
.motive:hover .mi-from { animation: mi-out .8s ease both; }
.motive:hover .mi-to { animation: mi-in .8s ease both; }
@keyframes mi-out { 50% { transform: translateY(-3px); opacity: .35; } }
@keyframes mi-in { from { transform: translateX(-4px); opacity: .2; } }
.mi-spin { transform-box: view-box; transform-origin: 12px 12px; }
.motive:hover .mi-spin { animation: mi-spin 1.2s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes mi-spin { to { transform: rotate(360deg); } }
.motive > :not(.motive__icon) { grid-column: 2; }
.motive b { font-size: var(--fs-2); line-height: 1.3; align-self: center; }
.motive > span:not(.motive__icon) { color: var(--c-muted); font-size: .95rem; }
.motive small { padding-top: var(--sp-2); color: var(--c-primary); font-size: .82rem; }
@media (max-width: 860px) { .motives { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .motive { grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); padding: var(--sp-4); }
  .motive__icon { width: 40px; height: 40px; border-radius: 11px; }
  .motive__icon svg { width: 22px; height: 22px; }
}

/* ---------- участки ---------- */
.stage-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.stage-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: 12px; text-decoration: none; color: var(--c-text); transition: border-color .2s, box-shadow .2s, transform .2s; }
.stage-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow); transform: translateY(-3px); }
.stage-card__img { height: 130px; display: grid; place-items: center; border-radius: 8px; background: var(--c-soft); overflow: hidden; }
.stage-card__img img { max-height: 120px; max-width: 92%; object-fit: contain; transition: transform .4s; }
.stage-card:hover .stage-card__img img { transform: scale(1.06); }
.stage-card b { line-height: 1.3; }
.stage-card small { color: var(--c-primary); font-size: .82rem; }
.stage-card--empty { border-style: dashed; background: transparent; }
.stage-card--empty .stage-card__img { background: repeating-linear-gradient(45deg, transparent 0 8px, rgb(14 107 117 / 6%) 8px 16px); }
.stage-card--empty small { color: var(--c-muted); }
@media (max-width: 640px) {
  /* лента карточек вместо столбца: страница не растягивается, листается пальцем */
  .rz-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3);
              margin-inline: calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px) var(--sp-3); scrollbar-width: thin; }
  .rz-strip > * { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .stage-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .stage-card { padding: var(--sp-3); }
  .stage-card__img { height: 90px; }
  .stage-card__img img { max-height: 84px; }
  .stage-card b { font-size: .92rem; }
}
.air-note { display: grid; gap: var(--sp-1); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-left: 4px solid #2e8b57; background: #fff; border-radius: 0 10px 10px 0; text-decoration: none; color: var(--c-text); }
.air-note span { color: var(--c-muted); font-size: .92rem; }
.air-note:hover b { color: var(--c-primary); }

/* ---------- проекты, сервис, компания ---------- */
.section--deep { background: var(--c-deep); color: var(--c-dark-text); }
.rz-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
@media (max-width: 860px) { .rz-two { grid-template-columns: 1fr; gap: var(--sp-6); } }
.rz-links { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; }
.rz-links a { display: flex; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); color: var(--c-text); text-decoration: none; }
.rz-links a::after { content: "\2192"; color: var(--c-primary); }
.rz-links a:hover { color: var(--c-primary); }
.rz-facts { list-style: none; padding: 0; margin: var(--sp-5) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.rz-facts li { display: grid; gap: 2px; padding: var(--sp-4); border-radius: 10px; background: var(--c-soft); }
.rz-facts b { font: 700 clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem)/1 var(--mono); color: var(--c-primary); }
.rz-facts span { color: var(--c-muted); font-size: .88rem; }
.rz-partners { border-top: 1px solid var(--c-line); }

/* ---------- внутренние страницы ---------- */
.rz-page-head { padding: var(--sp-6) 0; background: var(--c-deep); color: #fff; margin-bottom: var(--sp-6); }
.rz-page-head h1 { color: #fff; font-size: var(--fs-4); margin: var(--sp-2) 0; }
.rz-page-head p { color: rgb(255 255 255 / 78%); max-width: 72ch; margin: 0; }
.rz-page-head .crumbs { padding: 0; }
.rz-page-head .crumbs a, .rz-page-head .crumbs { color: rgb(255 255 255 / 60%); }
.stage-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.stage-nav a { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 25%); color: #fff; text-decoration: none; font-size: .82rem; }
.stage-nav a:hover { border-color: var(--c-accent); }
.stage-nav a.is-empty { opacity: .55; border-style: dashed; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.chips a { padding: 4px 12px; border-radius: 999px; background: var(--c-soft); color: var(--c-text); text-decoration: none; font-size: .85rem; }
.chips a:hover { background: var(--c-primary); color: #fff; }
.honest { padding: var(--sp-6); border: 1px dashed var(--c-line); border-radius: 12px; color: var(--c-muted); }
.honest b { display: block; color: var(--c-text); margin-bottom: var(--sp-2); }
.own-group { margin-bottom: var(--sp-7); }
.own-group h2 { font-size: var(--fs-3); }

@media (prefers-reduced-motion: reduce) {
  .pipe path, .belt-rollers, .line-panel__item, .fx-beam, .fx-heat, .fx-film, .node__led, .node.is-touring::after,
  .lv *, .lv *::before, .lv *::after, .rz-hero__figure, .rz-orbit, .rz-float, .rz-float__led { animation: none !important; }
  .lv-item { opacity: 1; top: 30%; }
  .lv-item + .lv-item { display: none; }
}