/* «Доставка и оплата», «О компании», «Контакты» — 14.10.2026; «Доставка» и «О компании» переделаны 21.10.2026.
   Общий слой трёх страниц: сетка, типографика, состояния и движение.
   Без JS и при «уменьшении движения» всё видно сразу в конечном состоянии:
   начальные состояния анимаций включает только класс html.ip-js. */

:root {
  --ip-ink: #17191C;
  --ip-text: #3D434A;
  --ip-muted: #5E656D;
  --ip-line: #E3E5E8;
  --ip-line-warm: #DCDBD5;
  --ip-warm: #F4F3EF;
  --ip-blue: #0B47A8;
  --ip-blue-hover: #083784;
  --ip-blue-bright: #1D58D8;
  --ip-blue-soft: #EEF2F9;
  --ip-sky: #8FB5FF;
  --ip-night: #0E1218;
  --ip-green: #1E7A4C;
  --ip-out: cubic-bezier(.16, 1, .3, 1);
  --ip-inout: cubic-bezier(.65, 0, .35, 1);
}

.ip-body { margin: 0; background: #FFFFFF; color: var(--ip-ink); }
.ip { min-width: 1200px; font: 400 16px/1.55 var(--ui-font); color: var(--ip-ink); background: #FFFFFF; }
.ip *, .ip *::before, .ip *::after { box-sizing: border-box; }
.ip-wrap { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.ip-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ip svg { flex: none; }
.ip-stroke { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Типографика ---------- */

body[data-ui-theme] .ip h1.ip-title {
  margin: 0;
  font: 500 clamp(44px, 3.9vw, 58px)/1.04 var(--ui-font) !important;
  letter-spacing: -0.032em !important;
  color: var(--ip-ink);
}
body[data-ui-theme] .ip h2.ip-h2 {
  margin: 0;
  font-size: 40px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.026em !important;
}
.ip-accent { color: var(--ip-blue); }
.ip-lead { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.6; color: var(--ip-text); }

/* Заголовок появляется построчно из-под маски */
.ip-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ip-line > span { display: block; }
.ip-js .ip-line > span { transform: translateY(108%); transition: transform 1000ms var(--ip-out); transition-delay: calc(var(--i, 0) * 90ms + 80ms); }
.ip-js .is-in .ip-line > span { transform: none; }

/* Мягкое проявление: подъём, прозрачность и расфокус */
.ip-js [data-reveal] { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity 700ms var(--ip-out), transform 1000ms var(--ip-out), filter 700ms var(--ip-out); transition-delay: var(--d, 0ms); }
.ip-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Строки «как в характеристиках»: чёрная линия сверху, тонкие между строками, прорисовка слева направо */
.ip-rows { margin: 0; padding: 0; list-style: none; position: relative; }
.ip-rows::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--ip-ink); transform-origin: 0 50%; }
.ip-row { position: relative; }
.ip-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ip-line-warm); transform-origin: 0 50%; }
.ip-js .ip-rows::before, .ip-js .ip-row::after { transform: scaleX(0); transition: transform 1100ms var(--ip-inout); }
.ip-js .ip-row::after { transition-delay: calc(var(--i, 0) * 110ms + 200ms); }
.ip-js .ip-row > * { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ip-out), transform 800ms var(--ip-out); transition-delay: calc(var(--i, 0) * 110ms + 260ms); }
.ip-js .is-in .ip-rows::before, .ip-js .ip-rows.is-in::before, .ip-js .is-in .ip-row::after, .ip-js .ip-rows.is-in .ip-row::after { transform: none; }
.ip-js .is-in .ip-row > *, .ip-js .ip-rows.is-in .ip-row > * { opacity: 1; transform: none; }

/* Текстовая ссылка со стрелкой */
.ip-more { display: inline-flex; align-items: center; gap: 10px; color: var(--ip-blue); font-weight: 500; text-decoration: none; transition: color 180ms ease, gap 260ms var(--ip-out); }
.ip-more:hover { color: var(--ip-blue-hover); gap: 14px; }

/* Кнопки */
.ip-btn { height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 10px; background: var(--ip-blue); color: #FFFFFF; font: 500 16px/1 var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 200ms ease, gap 260ms var(--ip-out), box-shadow 260ms ease; }
.ip-btn:hover { background: var(--ip-blue-hover); color: #FFFFFF; gap: 16px; box-shadow: 0 14px 28px -18px rgba(11, 71, 168, .9); }
.ip-btn:active { transform: translateY(1px); }

/* ---------- Копирование ---------- */

.ip-copy { position: relative; width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ip-muted); cursor: pointer; opacity: .55; transition: opacity 180ms ease, background 180ms ease, color 180ms ease; }
.ip-copy > svg { grid-area: 1 / 1; transition: transform 320ms var(--ip-out), opacity 200ms ease; }
.ip-copy-ok { opacity: 0; transform: scale(.4); color: var(--ip-green); }
.ip-copy-ok path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 360ms var(--ip-out) 80ms; }
.ip-copy-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 5px 9px; border-radius: 6px; background: var(--ip-ink); color: #FFFFFF; font: 500 12px/1.3 var(--ui-font); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 180ms ease, transform 260ms var(--ip-out); }
:is(.ip-item, .ip-req):hover .ip-copy, .ip-copy:focus-visible { opacity: 1; }
.ip-copy:hover { background: var(--ip-blue-soft); color: var(--ip-blue); }
.ip-copy.is-copied { opacity: 1; }
.ip-copy.is-copied .ip-copy-i { opacity: 0; transform: scale(.4); }
.ip-copy.is-copied .ip-copy-ok { opacity: 1; transform: none; }
.ip-copy.is-copied .ip-copy-ok path { stroke-dashoffset: 0; }
.ip-copy.is-copied .ip-copy-tip { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   Доставка и оплата — 21.10.2026: способы доставки, выбор перевозчика
   с большой кнопкой расчёта, «Как проходит заказ» сценками
   ===================================================================== */

.ip-hero { position: relative; background: radial-gradient(900px 560px at 92% -4%, rgba(29, 88, 216, .09), rgba(29, 88, 216, 0) 70%), var(--ip-warm); }
.dv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 96px; align-items: center; padding-top: 56px; padding-bottom: 88px; }
.dv-copy { display: flex; flex-direction: column; gap: 52px; min-width: 0; }

.ip-terms { max-width: 660px; }
.ip-term { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; padding: 22px 0 24px; }
body[data-ui-theme] .ip .ip-term h3 { margin: 0; font-size: 18px; line-height: 1.4 !important; letter-spacing: -0.01em; }
.ip-term p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ip-text); }
.ip-term a { color: var(--ip-blue); text-decoration: none; transition: color 180ms ease; }
.ip-term a:hover { color: var(--ip-blue-hover); text-decoration: underline; }

/* Расчёт доставки: перевозчик плитками и одна большая кнопка */
.dv-calc { position: relative; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 32px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(23, 25, 28, .06), 0 44px 80px -52px rgba(16, 34, 72, .5), 0 14px 28px -20px rgba(16, 34, 72, .14); }
.dv-calc-head { display: flex; flex-direction: column; gap: 6px; }
body[data-ui-theme] .ip .dv-calc-head h2 { margin: 0; font-size: 26px !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
.dv-calc-head span { font-size: 14px; color: var(--ip-muted); }
.dv-carriers { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dv-carrier { position: relative; display: block; cursor: pointer; }
.dv-carrier input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dv-carrier span { position: relative; height: 58px; padding: 0 16px 0 18px; white-space: nowrap; display: flex; align-items: center; border-radius: 12px; background: var(--ip-warm); box-shadow: inset 0 0 0 1px transparent; font: 500 15.5px/1.2 var(--ui-font); color: var(--ip-ink); transition: background 200ms ease, box-shadow 220ms ease, color 200ms ease; }
.dv-carrier span::after { content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--ip-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; transform: scale(0); transition: transform 320ms var(--ip-out); }
.dv-carrier:hover span { background: #EEEDE8; }
.dv-carrier input:checked + span { background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--ip-blue); color: var(--ip-blue); }
.dv-carrier input:checked + span::after { transform: scale(1); }
.dv-carrier input:focus-visible + span { outline: 2px solid #2F6BDA; outline-offset: 2px; }

.dv-go { position: relative; overflow: hidden; height: 78px; margin-top: 4px; padding: 0 13px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; border-radius: 16px; background: var(--ip-blue); color: #FFFFFF; text-align: left; cursor: pointer; transition: background 200ms ease, box-shadow 260ms ease; }
.dv-go::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); transform: skewX(-18deg); pointer-events: none; }
.dv-go:hover { background: var(--ip-blue-hover); box-shadow: 0 18px 34px -18px rgba(11, 71, 168, .95); }
.dv-go:hover::before { animation: dv-shine 900ms var(--ip-out); }
.dv-go:active { transform: translateY(1px); }
.dv-go-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-go-text b { font: 600 19px/1.1 var(--ui-font); letter-spacing: -0.01em; }
.dv-go-via { display: block; overflow: hidden; font: 400 14px/18px var(--ui-font); color: rgba(255, 255, 255, .74); }
.dv-go-via span { display: block; }
.dv-go-icon { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .13); }
.dv-go-icon svg { transition: transform 420ms var(--ip-out); }
.dv-go-speed { opacity: 0; transition: opacity 200ms ease; }
.dv-go:hover .dv-go-icon svg { transform: translateX(3px); }
.dv-go:hover .dv-go-speed { opacity: .8; }
.dv-calc-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ip-muted); }
@keyframes dv-shine { from { left: -40%; } to { left: 120%; } }

/* Как проходит заказ: тёмная полоса, у каждого шага своя сценка. Шаги проигрываются по очереди, линия ведёт от точки к точке */
.dv-process { position: relative; overflow: hidden; background: var(--ip-night); color: #FFFFFF; scroll-margin-top: 80px; }
.dv-process::before { content: ""; position: absolute; left: 50%; top: -260px; width: 1100px; height: 560px; margin-left: -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 88, 216, .2), rgba(29, 88, 216, 0)); pointer-events: none; }
.dv-process .ip-wrap { position: relative; padding-top: 104px; padding-bottom: 88px; }
body[data-ui-theme] .ip .dv-process h2.ip-h2 { color: #FFFFFF; }

.dv-steps { --scene: 176px; position: relative; margin: 60px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.dv-steps::before, .dv-steps::after { content: ""; position: absolute; left: 7px; top: calc(var(--scene) + 34px); width: calc(75% + 21px); height: 2px; }
.dv-steps::before { background: rgba(255, 255, 255, .12); }
.dv-steps::after { background: linear-gradient(90deg, #1D58D8, #8FB5FF); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: transform 450ms var(--ip-inout); }
.dv-step { position: relative; min-width: 0; }
.dv-scene { position: relative; height: var(--scene); border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 50% 112%, rgba(29, 88, 216, .24), rgba(29, 88, 216, 0) 62%), linear-gradient(160deg, #18202B 0%, #11161E 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: box-shadow 300ms ease; }
.dv-step:hover .dv-scene { box-shadow: inset 0 0 0 1px rgba(143, 181, 255, .28); }
.dv-scene svg { display: block; width: 100%; height: 100%; }
.dv-dot { position: relative; z-index: 1; display: block; width: 14px; height: 14px; margin: 28px 0 24px; border-radius: 50%; background: var(--ip-sky); box-shadow: inset 0 0 0 2px var(--ip-sky), 0 0 0 5px var(--ip-night); transition: background 300ms ease, box-shadow 400ms ease; }
.dv-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--ip-sky); opacity: 0; }
body[data-ui-theme] .ip .dv-step h3 { margin: 0; font-size: 22px; line-height: 1.25 !important; letter-spacing: -0.015em; color: #FFFFFF; }
.dv-step p { margin: 10px 0 0; max-width: 280px; font-size: 15px; line-height: 1.6; color: #AEB4BB; }

/* Сценки: детали рисунка. Без JS и при «уменьшении движения» видно конечное состояние */
.dv-scene .s-paper { fill: #1D2734; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; stroke-linejoin: round; }
.dv-scene :is(.s-line, .s-soft, .s-sky, .s-ink) { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dv-scene .s-line { stroke: rgba(255, 255, 255, .88); }
.dv-scene .s-soft { stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.dv-scene .s-sky { stroke: #8FB5FF; }
.dv-scene .s-thick { stroke-width: 3.2; }
.dv-scene .s-ink { stroke: #0E1218; stroke-width: 2.6; }
.dv-scene .s-box { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.5; }
.dv-scene .s-skyfill { fill: #8FB5FF; }
.dv-scene .s-night { fill: #0E1218; }
.dv-scene .s-title { font: 600 11px/1 var(--ui-font); letter-spacing: .16em; fill: rgba(255, 255, 255, .9); }
.dv-scene .s-sum { font: 600 16px/1 var(--ui-font); fill: #8FB5FF; }
.dv-scene .s-stamp { fill: rgba(143, 181, 255, .1); stroke: #8FB5FF; stroke-width: 2.5; }
.dv-scene .s-stamp-in { fill: none; stroke: #8FB5FF; stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; }
.dv-scene .s-labelbox { fill: #0E1218; stroke: rgba(255, 255, 255, .4); stroke-width: 1.2; }
.dv-scene .s-road { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 2; stroke-dasharray: 10 10; }
.dv-scene .s-tyre { fill: #0E1218; stroke: rgba(255, 255, 255, .85); stroke-width: 2.2; }
.dv-scene :is(.sc1-badge, .sc2-stamp, .sc2-ink, .sc3-lid, .sc3-tape, .sc4-wheel, .sc4-ring) { transform-box: fill-box; transform-origin: center; }
.sc2-stamp { transform: rotate(-12deg); }
.sc2-ink { fill: none; stroke: #8FB5FF; stroke-width: 2; opacity: 0; }
.sc3-flap { fill: #243042; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; transform-box: fill-box; transform: scaleY(0); }
.sc3-flap-l { transform-origin: 0 100%; }
.sc3-flap-r { transform-origin: 100% 100%; }
.sc3-lid { fill: #243042; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.sc3-tape { fill: #8FB5FF; opacity: .92; transform-origin: 50% 0; }
.sc4-speed { opacity: 0; }
.sc4-ring { fill: none; stroke: #8FB5FF; stroke-width: 1.5; opacity: 0; }

/* Движение сценок: анимации стоят на паузе в начальном кадре, класс is-play запускает их */
.ip-js .dv-steps { --p: 0; }
.ip-js .dv-step :is(h3, p) { opacity: .42; transition: opacity 500ms ease; }
.ip-js .dv-step.is-play :is(h3, p) { opacity: 1; }
.ip-js .dv-step .dv-dot { background: var(--ip-night); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .26), 0 0 0 5px var(--ip-night); }
.ip-js .dv-step.is-play .dv-dot { background: var(--ip-sky); box-shadow: inset 0 0 0 2px var(--ip-sky), 0 0 0 5px var(--ip-night); }
.ip-js .dv-step.is-play .dv-dot::after { animation: dv-ripple 900ms var(--ip-out) both; }
.ip-js .sc1-text { stroke-dasharray: 1; animation: dv-draw 340ms var(--ip-out) calc(var(--r) * 230ms) both paused; }
.ip-js .sc1-tick { stroke-dasharray: 1; animation: dv-draw 260ms var(--ip-out) calc(var(--r) * 230ms + 260ms) both paused; }
.ip-js .sc1-badge { animation: dv-pop 440ms var(--ip-out) 980ms both paused; }
.ip-js .sc2-doc { animation: dv-rise 520ms var(--ip-out) both paused; }
.ip-js .sc2-line { stroke-dasharray: 1; animation: dv-draw 360ms var(--ip-out) calc(var(--r) * 110ms + 240ms) both paused; }
.ip-js .sc2-stamp { animation: dv-stamp 480ms cubic-bezier(.5, 0, .2, 1) 760ms both paused; }
.ip-js .sc2-ink { animation: dv-ink 620ms var(--ip-out) 1070ms both paused; }
.ip-js .sc3-part { animation: dv-fall 520ms cubic-bezier(.55, 0, .7, .4) var(--d) both paused; }
.ip-js .sc3-flap-l { animation: dv-flap-l 460ms var(--ip-inout) 560ms both paused; }
.ip-js .sc3-flap-r { animation: dv-flap-r 460ms var(--ip-inout) 560ms both paused; }
.ip-js .sc3-lid { animation: dv-grow-x 220ms var(--ip-out) 960ms both paused; }
.ip-js .sc3-tape { animation: dv-grow-y 280ms var(--ip-out) 1120ms both paused; }
.ip-js .sc3-label { animation: dv-rise 320ms var(--ip-out) 1300ms both paused; }
.ip-js .sc4-truck { animation: dv-drive 1150ms cubic-bezier(.22, .75, .25, 1) both paused; }
.ip-js .sc4-wheel { animation: dv-spin 1150ms cubic-bezier(.22, .75, .25, 1) both paused; }
.ip-js .sc4-speed { animation: dv-speed 1000ms ease both paused; }
.ip-js .sc4-pin { animation: dv-drop 560ms var(--ip-out) 1050ms both paused; }
.ip-js .sc4-ring { animation: dv-ring 700ms var(--ip-out) 1370ms both paused; }
.ip-js .dv-step.is-play .dv-scene * { animation-play-state: running; }

@keyframes dv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dv-pop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes dv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dv-stamp { 0% { opacity: 0; transform: rotate(-42deg) scale(1.9); } 65% { opacity: 1; transform: rotate(-10deg) scale(.9); } 100% { opacity: 1; transform: rotate(-12deg); } }
@keyframes dv-ink { 0% { opacity: 0; transform: scale(.9); } 1% { opacity: .7; } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes dv-fall { 0% { transform: translateY(-74px); } 75% { transform: translateY(4px); } 100% { transform: none; } }
@keyframes dv-flap-l { 0% { transform: rotate(-24deg); } 55% { transform: rotate(0deg) scaleY(1); } 100% { transform: rotate(0deg) scaleY(0); } }
@keyframes dv-flap-r { 0% { transform: rotate(24deg); } 55% { transform: rotate(0deg) scaleY(1); } 100% { transform: rotate(0deg) scaleY(0); } }
@keyframes dv-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes dv-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes dv-drive { from { transform: translateX(-220px); } to { transform: none; } }
@keyframes dv-spin { from { transform: rotate(-900deg); } to { transform: none; } }
@keyframes dv-speed { 0% { opacity: 0; } 25% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; } }
@keyframes dv-drop { 0% { opacity: 0; transform: translateY(-36px); } 55% { opacity: 1; transform: translateY(3px); } 78% { transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes dv-ring { 0% { opacity: 0; transform: scale(.3, .1); } 1% { opacity: .8; } 100% { opacity: 0; transform: scale(1.7, .45); } }
@keyframes dv-ripple { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }

.ip-track { margin-top: 72px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ip-track strong { display: block; font: 500 22px/1.3 var(--ui-font); letter-spacing: -0.015em; }
.ip-track span { display: block; margin-top: 6px; font-size: 15px; color: #AEB4BB; }
.ip-track .ip-btn { background: var(--ip-blue-bright); }
.ip-track .ip-btn:hover { background: #2A67E8; box-shadow: 0 14px 30px -16px rgba(29, 88, 216, .9); }

/* =====================================================================
   О компании — 21.10.2026: первый экран о нас, заводы одной строкой,
   марки лифтов в каталоге
   ===================================================================== */

.ab-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; padding-top: 40px; padding-bottom: 36px; }
.ab-copy { display: flex; flex-direction: column; gap: 30px; }
.ab-actions { display: flex; gap: 12px; margin-top: 4px; }
.ip-btn--ghost { background: transparent; color: var(--ip-ink); box-shadow: inset 0 0 0 1.5px var(--ip-ink); }
.ip-btn--ghost:hover { background: var(--ip-ink); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--ip-ink); }

/* Сертификаты как предметы на стене */
.ip-certs { position: relative; height: 528px; perspective: 1400px; scroll-margin-top: 96px; }
.ip-cert { position: absolute; display: block; padding: 0; border: 0; background: none; cursor: zoom-in; transform: rotate(var(--r)); transform-style: preserve-3d; transition: transform 700ms var(--ip-out), filter 400ms ease; }
.ip-cert-mlz { --r: -2.2deg; left: 4%; top: 6px; width: 47%; z-index: 1; }
.ip-cert-zenit { --r: 1.6deg; right: 0; top: 168px; width: 60%; z-index: 2; }
.ip-cert-card { position: relative; display: block; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ip-out); }
.ip-cert img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 2px rgba(23, 25, 28, .25), 0 26px 40px -24px rgba(23, 25, 28, .55); transition: box-shadow 500ms ease; }
.ip-cert-shine { position: absolute; inset: 0; border-radius: 2px; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .36), rgba(255, 255, 255, 0) 52%); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.ip-cert-tag { position: absolute; left: 16px; bottom: 16px; height: 34px; padding: 0 13px 0 11px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(14, 18, 24, .86); color: #FFFFFF; font: 500 13px/1 var(--ui-font); opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 360ms var(--ip-out); pointer-events: none; }
.ip-cert:is(:hover, :focus-visible) { z-index: 3; transform: rotate(0deg) translateY(-6px) scale(1.02); }
.ip-cert:is(:hover, :focus-visible) img { box-shadow: 0 1px 2px rgba(23, 25, 28, .25), 0 48px 70px -34px rgba(23, 25, 28, .6); }
.ip-cert:is(:hover, :focus-visible) .ip-cert-shine { opacity: 1; }
.ip-cert:is(:hover, :focus-visible) .ip-cert-tag { opacity: 1; transform: none; }
.ip-certs:hover .ip-cert:not(:hover) { filter: saturate(.8) brightness(.97); }
.ip-cert.is-tilting .ip-cert-card { transition: transform 120ms linear; }
.ip-cert.is-open { visibility: hidden; }
/* Появление: сертификаты «вешают» на стену по очереди */
.ip-js .ip-cert { opacity: 0; transform: translateY(-26px) rotate(calc(var(--r) * 2.6)) scale(.97); transition: transform 1200ms var(--ip-out), opacity 700ms ease, filter 400ms ease; }
.ip-js .ip-certs.is-in .ip-cert { opacity: 1; transform: rotate(var(--r)); }
.ip-js .ip-certs.is-in .ip-cert-mlz { transition-delay: 220ms; }
.ip-js .ip-certs.is-in .ip-cert-zenit { transition-delay: 400ms; }
.ip-js .ip-certs.is-in .ip-cert:is(:hover, :focus-visible) { transform: rotate(0deg) translateY(-6px) scale(1.02); transition-delay: 0ms; }
.ip-js .ip-certs.is-in.is-settled .ip-cert { transition: transform 700ms var(--ip-out), filter 400ms ease; }

/* Цифры прокручиваются, как табло этажей: каждая цифра проходит полный круг */
.ip-roll { display: inline-flex; font: 500 92px/1 var(--ui-font); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.ip-roll-d { display: inline-block; height: 1em; overflow: hidden; }
.ip-roll-c { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1900ms cubic-bezier(.2, .75, .12, 1); transition-delay: calc(var(--dl, 0ms) + 250ms); }
.ip-roll-c > span { display: block; height: 1em; }
.ip-roll-s { display: inline-block; width: .26em; }
.is-in .ip-roll-c { transform: translateY(calc(var(--t) * -1em)); }

/* Заводы — одна строка под первым экраном: эмблема, город и год, одна точная цифра */
.ab-plants { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-plants::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ip-line-warm); transform-origin: 0 50%; }
.ab-plant { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 212px 18px; align-items: center; column-gap: 18px; padding: 28px 36px 40px 0; color: var(--ip-ink); text-decoration: none; }
.ab-plant + .ab-plant { padding: 28px 0 40px 40px; }
.ab-plant + .ab-plant::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 40px; width: 1px; background: var(--ip-line-warm); }
.ab-mark { width: 44px; height: 44px; background: var(--ip-blue); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background 200ms ease; }
.ab-mark--mlz { -webkit-mask-image: url("assets/brands/mlz-mark-white.png"); mask-image: url("assets/brands/mlz-mark-white.png"); }
.ab-mark--zenit { -webkit-mask-image: url("assets/logo-zenit.svg"); mask-image: url("assets/logo-zenit.svg"); }
.ab-plant-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ab-plant-name b { font: 500 21px/1.2 var(--ui-font); letter-spacing: -0.015em; transition: color 200ms ease; }
.ab-plant-name span { font-size: 14px; color: var(--ip-muted); }
.ab-plant-fig { display: flex; flex-direction: column; gap: 7px; }
.ab-plant-num { display: inline-flex; align-items: baseline; gap: 7px; }
.ab-plant .ip-roll { font-size: 34px; letter-spacing: -0.035em; color: var(--ip-ink); }
.ab-pre { font: 500 21px/1 var(--ui-font); color: var(--ip-ink); }
.ab-plant-cap { font-size: 13px; line-height: 1.45; color: var(--ip-muted); }
.ab-go { color: var(--ip-blue); opacity: 0; transform: translateX(-8px); transition: opacity 200ms ease, transform 360ms var(--ip-out); }
.ab-plant:hover .ab-plant-name b { color: var(--ip-blue); }
.ab-plant:is(:hover, :focus-visible) .ab-go { opacity: 1; transform: none; }
.ip-js .ab-plants::before { transform: scaleX(0); transition: transform 1100ms var(--ip-inout) 500ms; }
.ip-js .ab-plants.is-in::before { transform: none; }
.ip-js .ab-plant { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ip-out), transform 900ms var(--ip-out); transition-delay: calc(var(--i) * 140ms + 700ms); }
.ip-js .ab-plants.is-in .ab-plant { opacity: 1; transform: none; }
.ip-js .ab-plant .ip-roll-c { transition-delay: calc(var(--dl, 0ms) + var(--i) * 140ms + 800ms); }

/* Марки: тёмная полоса, полосы растут по очереди, числа досчитываются */
.ab-brands { position: relative; overflow: hidden; padding: 112px 0 120px; background: var(--ip-night); color: #FFFFFF; }
.ab-brands::before { content: ""; position: absolute; left: 50%; top: -280px; width: 1200px; height: 600px; margin-left: -600px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 88, 216, .18), rgba(29, 88, 216, 0)); pointer-events: none; }
.ab-brands-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; }
.ab-brands-head { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
body[data-ui-theme] .ip .ab-brands h2.ip-h2 { max-width: 440px; color: #FFFFFF; }
.ab-total { display: flex; flex-direction: column; gap: 14px; }
.ab-total-num { display: inline-flex; align-items: flex-start; }
.ab-brands .ip-roll { font-size: 104px; color: #FFFFFF; }
.ab-plus { margin: 4px 0 0 4px; font: 500 60px/1 var(--ui-font); color: var(--ip-sky); }
.ab-total-cap { font-size: 16px; color: #AEB4BB; }
.ab-bars-cap { margin: 0 0 14px; font-size: 14px; color: #8C939A; }
.ab-bar-list { margin: 0 0 36px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); }
.ab-bar-list li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ab-bar-list a { display: grid; grid-template-columns: 250px minmax(0, 1fr) 64px; align-items: center; column-gap: 28px; padding: 17px 0; color: #FFFFFF; text-decoration: none; transition: opacity 260ms ease; }
.ab-bar-name { display: flex; align-items: baseline; gap: 10px; font: 500 19px/1.3 var(--ui-font); letter-spacing: -0.01em; transition: color 200ms ease; }
.ab-bar-name small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: #8C939A; }
.ab-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.ab-bar i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, #1D58D8, #8FB5FF); clip-path: inset(0 calc(100% - var(--v) * 100%) 0 0 round 3px); transition: filter 200ms ease; }
.ab-bar-num { text-align: right; font: 500 16px/1 var(--ui-font); font-variant-numeric: tabular-nums; color: #C3C8CF; transition: color 200ms ease; }
.ab-bar-list:hover a:not(:hover) { opacity: .5; }
.ab-bar-list a:is(:hover, :focus-visible) .ab-bar-name { color: var(--ip-sky); }
.ab-bar-list a:is(:hover, :focus-visible) .ab-bar-num { color: #FFFFFF; }
.ab-bar-list a:is(:hover, :focus-visible) .ab-bar i { filter: brightness(1.18); }
.ab-bars .ip-more { color: var(--ip-sky); }
.ab-bars .ip-more:hover { color: #FFFFFF; }
.ip-js .ab-brands .ab-bar i { clip-path: inset(0 100% 0 0 round 3px); }
.ip-js .ab-bar-list .ab-bar-num { opacity: 0; transition: opacity 400ms ease calc(var(--i) * 90ms + 300ms), color 200ms ease; }
.ip-js .ab-bar-list.is-in .ab-bar-num { opacity: 1; }
.ip-js .ab-bar-list.is-in .ab-bar i { clip-path: inset(0 calc(100% - var(--v) * 100%) 0 0 round 3px); transition: clip-path 1500ms var(--ip-out) calc(var(--i) * 90ms + 300ms), filter 200ms ease; }

/* Просмотр сертификата */
.ip-lb { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #FFFFFF; overflow: hidden; }
.ip-lb::backdrop { background: transparent; }
.ip-lb-veil { position: absolute; inset: 0; background: rgba(8, 10, 14, .92); }
.ip-lb-bar { position: absolute; left: 32px; right: 32px; top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; z-index: 2; }
.ip-lb-title { font: 500 18px/1.3 var(--ui-font); letter-spacing: -0.01em; }
.ip-lb-actions { display: flex; gap: 8px; }
.ip-lb-btn { height: 40px; min-width: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .04); color: #FFFFFF; font: 500 14px/1 var(--ui-font); cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
.ip-lb-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.ip-lb-stage { position: absolute; left: 32px; right: 32px; top: 88px; bottom: 32px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.ip-lb-stage.is-zoomed { cursor: zoom-out; }
.ip-lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 2px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); transition: transform 420ms var(--ip-out); }
.ip-lb-stage.is-zoomed .ip-lb-img { transform: scale(2.2); }

/* =====================================================================
   Контакты
   ===================================================================== */

.ip-ct-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; padding-top: 48px; padding-bottom: 64px; }
.ip-ct-list { margin: 32px 0 0; }
.ip-rows--soft::before { height: 1px; background: var(--ip-line); }
.ip-rows--soft .ip-row::after { background: var(--ip-line); }
.ip-rows--soft .ip-row:last-child::after { display: none; }
.ip-item { padding: 20px 0 22px; }
.ip-item-label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--ip-muted); }
.ip-item-main { display: flex; align-items: center; gap: 10px; }
.ip-item-main--top { align-items: flex-start; }
.ip-item-main--top .ip-copy { margin-top: -4px; }
.ip-phone { font: 500 34px/1.15 var(--ui-font); letter-spacing: -0.03em; color: var(--ip-ink); text-decoration: none; font-variant-numeric: normal; transition: color 180ms ease; }
.ip-phone:hover { color: var(--ip-blue); }
.ip-mail { font: 500 26px/1.2 var(--ui-font); letter-spacing: -0.02em; color: var(--ip-blue); text-decoration: none; transition: color 180ms ease; }
.ip-mail:hover { color: var(--ip-blue-hover); }
.ip-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ip-muted); }
.ip-max { margin-top: 8px; padding: 4px 8px 4px 4px; margin-left: -4px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: transparent; font: 400 15px/1.3 var(--ui-font); color: var(--ip-text); cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.ip-max img { width: 18px; height: 18px; display: block; border-radius: 5px; }
.ip-max b { font-weight: 500; color: var(--ip-ink); }
.ip-max:hover { background: var(--ip-blue-soft); }
.ip-max-state { font-size: 13px; color: var(--ip-green); opacity: 0; transform: translateX(-4px); transition: opacity 200ms ease, transform 300ms var(--ip-out); }
.ip-max.is-copied .ip-max-state { opacity: 1; transform: none; }
.ip-hours { font: 500 19px/1.4 var(--ui-font); letter-spacing: -0.01em; }
.ip-status { margin-top: 12px; padding: 8px 13px 8px 11px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; background: #F1F2F4; color: #4E555D; font: 500 13.5px/1 var(--ui-font); }
.ip-status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #8A9097; }
.ip-status[data-state="open"] { background: #E4F1E9; color: #1E6B44; }
.ip-status[data-state="open"] i { background: var(--ip-green); animation: ip-live 2400ms ease-out 600ms 3; }
@keyframes ip-live { 0% { box-shadow: 0 0 0 0 rgba(30, 122, 76, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(30, 122, 76, 0); } }
.ip-address { margin: 0; font-style: normal; font-size: 18px; line-height: 1.5; max-width: 420px; }
.ip-route { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* Постоянная высота: карта не должна менять размер после загрузки шрифта, иначе виджет оставляет серую полосу */
.ip-map { position: relative; height: 764px; border-radius: 16px; overflow: hidden; background: #ECEEF0; isolation: isolate; }
.ip-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 600ms ease; }
.ip-map.is-loaded iframe { opacity: 1; }
.ip-map-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; color: var(--ip-muted); font-size: 15px; }
.ip-map-fallback strong { font: 500 20px/1.3 var(--ui-font); color: var(--ip-ink); }
.ip-map-pulse { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none; z-index: 2; }
.ip-map-pulse::before, .ip-map-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(29, 88, 216, .55); opacity: 0; }
.ip-map.is-loaded.is-in .ip-map-pulse::before { animation: ip-ping 1800ms var(--ip-out) 700ms 2 both; }
.ip-map.is-loaded.is-in .ip-map-pulse::after { animation: ip-ping 1800ms var(--ip-out) 1300ms 2 both; }
@keyframes ip-ping { 0% { opacity: .8; transform: scale(.15); } 100% { opacity: 0; transform: scale(1); } }
/* Загруженная карта раскрывается кругом от метки офиса */
.ip-js .ip-map iframe { opacity: 1; clip-path: circle(0% at 50% 50%); transition: clip-path 1600ms cubic-bezier(.6, 0, .25, 1) 120ms; }
.ip-js .ip-map.is-loaded.is-in iframe { clip-path: circle(80% at 50% 50%); }

.ip-reqs { display: flex; align-items: flex-start; gap: 48px; padding: 22px 0 0; border-top: 1.5px solid var(--ip-ink); }
.ip-req--name { max-width: 400px; }
.ip-req .ip-copy { margin: -8px 0; }
.ip-req--name div { font-weight: 500; line-height: 1.4; }
.ip-copy-all { margin-left: auto; align-self: center; height: 42px; padding: 0 16px 0 13px; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 10px; background: var(--ip-blue-soft); color: var(--ip-blue); font: 500 14px/1 var(--ui-font); cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.ip-copy-all:hover { background: #E1E9F7; }
.ip-copy-all-d { display: none; }
.ip-copy-all.is-copied { background: #E4F1E9; color: #1E6B44; }
.ip-copy-all.is-copied .ip-copy-all-t { display: none; }
.ip-copy-all.is-copied .ip-copy-all-d { display: inline; }
.ip-req { display: flex; flex-direction: column; gap: 6px; }
.ip-req > span { font-size: 13px; color: var(--ip-muted); }
.ip-req div { display: flex; align-items: center; gap: 6px; font: 500 17px/1.3 var(--ui-font); font-variant-numeric: tabular-nums; }
.ip-ct-bottom { padding-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
  .ip-status[data-state="open"] i { animation: none; }
}

/* Печать: всё в конечном состоянии, даже то, до чего не докрутили */
@media print {
  .ip-js [data-reveal], .ip-js .ip-row > *, .ip-js .ip-line > span, .ip-js .ip-cert, .ip-js .ab-plant { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ip-js .ab-plants::before { transform: none !important; }
  .ip-js .ab-brands .ab-bar i { clip-path: inset(0 calc(100% - var(--v) * 100%) 0 0 round 3px) !important; }
  .ip-js .ab-bar-list .ab-bar-num { opacity: 1 !important; }
  .ip-js .ip-rows::before, .ip-js .ip-row::after { transform: none !important; }
  .ip-js .dv-scene * { animation: none !important; }
  .ip-js .dv-steps { --p: 1 !important; }
  .ip-js .dv-step :is(h3, p) { opacity: 1 !important; }
  .ip-roll-c { transform: translateY(calc(var(--t) * -1em)) !important; }
}