/* «Қойма» — фулфилмент. Синий «как небо над складом», крафт коробок, язык накладных и адресных ячеек.
   Шрифты: Jura (заголовки, цифры), Finlandica (текст), Ubuntu Sans Mono (адреса, этикетки). */
:root {
  --navy: #071334; --navy2: #0C1E52; --navy3: #050E27; --cob: #2448FF; --cob2: #1A35C9; --sky: #9DB4FF; --ice: #E9EEFF;
  --kraft: #C99660; --kraft-l: #E2B987; --kraft-d: #7A5328;
  --paper: #EEF1F6; --white: #fff; --ink: #0A1430; --muted: #4A5573; --line: #CDD5E3; --soft: #E3E8F1;
  --bg: var(--paper); --fg: var(--ink); --accent: var(--cob); --accent-ink: #fff; --bad: #C8341F; --ok: #13804A;
  --radius: 6px; --radius-btn: 3px; --wrap: 1320px; --pad: 40px; --top: 76px;
  --font-body: 'Finlandica', system-ui, sans-serif; --font-head: 'Jura', 'Finlandica', sans-serif; --font-mono: 'Ubuntu Sans Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1); --ease2: cubic-bezier(.7, 0, .2, 1);
  --step-0: 17px;
}
html { background: var(--navy); }
body { font-size: 17px; line-height: 1.55; }
::selection { background: var(--cob); color: #fff; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--cob); outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); }

/* ——— переходы между страницами: страница уезжает вверх, новая поднимается, как секционные ворота ——— */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
::view-transition-group(root) { animation-duration: .8s; }
::view-transition-old(root) { animation: vt-old .6s var(--ease2) both; }
::view-transition-new(root) { animation: vt-new .8s var(--ease2) both; }
::view-transition-group(top) { animation: none; }
::view-transition-old(top) { animation: none; display: none; }
::view-transition-new(top) { animation: none; }
@keyframes vt-old { to { transform: translateY(-8vh) scale(.97); filter: brightness(.45); } }
@keyframes vt-new { from { clip-path: inset(100% 0 0 0); transform: translateY(6vh); } to { clip-path: inset(0); transform: none; } }

/* ——— прелоадер: коробка собирается из развёртки ——— */
.pl { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 45%, #10267a 0%, var(--navy) 70%); color: #fff; cursor: pointer;
  animation: pl-auto .45s ease 2.5s forwards; }
.pl::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(157,180,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(157,180,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 80%); }
.pl-skip .pl { display: none; }
.pl.is-out { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; animation: none; }
.pl.is-out .pl__stage { transform: scale(.94) translateY(-12px); transition: transform .5s var(--ease); }
@keyframes pl-auto { to { opacity: 0; visibility: hidden; } }
.pl__stage { position: relative; display: grid; justify-items: center; gap: 10px; }
.pl__scene { width: 220px; height: 190px; perspective: 900px; display: grid; place-items: center; }
.pl__cube { position: relative; width: 0; height: 0; transform-style: preserve-3d; transform: translateY(18px) rotateX(58deg) rotateZ(45deg); animation: pl-spin 1.4s var(--ease) both; }
@keyframes pl-spin { from { transform: translateY(18px) rotateX(58deg) rotateZ(10deg) scale(.9); } to { transform: translateY(18px) rotateX(58deg) rotateZ(45deg); } }
.pf { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; transform-style: preserve-3d; backface-visibility: visible;
  background: linear-gradient(135deg, var(--kraft-l), var(--kraft)); box-shadow: inset 0 0 0 1px rgba(90,55,20,.35); }
.pf--base { background: #8a5b2c; }
.pf--s { transform-origin: 50% 0; top: 40px; animation: pf-s .42s var(--ease) .1s both; background: linear-gradient(180deg, var(--kraft), #a87643); }
.pf--e { transform-origin: 0 50%; left: 40px; animation: pf-e .42s var(--ease) .2s both; background: linear-gradient(90deg, #b9864f, #94622f); }
.pf--w { transform-origin: 100% 50%; left: -120px; animation: pf-w .42s var(--ease) .3s both; }
.pf--n { transform-origin: 50% 100%; top: -120px; animation: pf-n .42s var(--ease) .4s both; }
.pf--lid { left: 0; top: -80px; transform-origin: 50% 100%; animation: pf-lid .45s var(--ease) .62s both; background: linear-gradient(135deg, #f0cc9b, var(--kraft-l)); }
.pf--lid i { position: absolute; left: 34px; top: 0; bottom: 0; width: 12px; background: var(--cob); transform: scaleY(0); transform-origin: 50% 100%; animation: pf-tape .3s var(--ease) .95s both; }
@keyframes pf-s { from { transform: rotateX(0); } to { transform: rotateX(90deg); } }
@keyframes pf-e { from { transform: rotateY(0); } to { transform: rotateY(-90deg); } }
@keyframes pf-w { from { transform: rotateY(0); } to { transform: rotateY(90deg); } }
@keyframes pf-n { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes pf-lid { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes pf-tape { to { transform: none; } }
.pl__word { font: 600 44px/1 var(--font-head); letter-spacing: .02em; animation: pl-up .6s var(--ease) .75s both; }
.pl__meta { font: 400 12px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sky); animation: pl-up .6s var(--ease) .85s both; }
.pl__bar { width: 160px; height: 2px; background: rgba(157,180,255,.2); margin-top: 12px; overflow: hidden; }
.pl__bar i { display: block; height: 100%; background: var(--sky); transform-origin: 0 50%; animation: pl-bar 1.25s linear both; }
@keyframes pl-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes pl-bar { from { transform: scaleX(0); } }

/* ——— шапка ——— */
.top { background: var(--navy); color: #fff; transition: background .3s, box-shadow .3s; }
.top.is-scrolled { background: rgba(7,19,52,.86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(157,180,255,.14); }
.top__in { display: flex; align-items: center; gap: 22px; height: var(--top); width: min(1400px, 100% - 2 * var(--pad)); margin-inline: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: none; }
.mark { width: 34px; height: 34px; }
.logo__w { font: 600 25px/1 var(--font-head); letter-spacing: .01em; }
.logo__s { font: 400 10px/1.25 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); padding-left: 10px; border-left: 1px solid rgba(157,180,255,.3); }
.nav { margin-left: 18px; }
.nav ul { list-style: none; padding: 0; display: flex; gap: 2px; }
.nav li { position: relative; }
.nav a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; color: rgba(255,255,255,.76); text-decoration: none; font-size: 15px; font-weight: 500; position: relative; transition: color .2s; }
.nav a:hover, .nav a.is-on { color: #fff; }
.nav > ul > li > a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.nav > ul > li > a:hover::after, .nav > ul > li > a.is-on::after { transform: none; }
.nav__car { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
.nav__dd:hover .nav__car, .nav__dd:focus-within .nav__car { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 10px); left: -24px; width: 780px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; padding: 14px; background: #fff; color: var(--ink); border-radius: 8px; box-shadow: 0 30px 80px rgba(5,14,39,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .35s var(--ease), visibility .25s; }
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__dd:hover .mega, .nav__dd:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav .mega a { color: var(--ink); }
.mega__i { display: grid !important; grid-template-columns: 34px 1fr; align-items: baseline; padding: 12px !important; border-radius: 5px; gap: 2px 0 !important; }
.mega__i:hover, .mega__i.is-on { background: var(--paper); }
.mega__i b { font: 500 12px/1 var(--font-mono); color: var(--cob); }
.mega__i span { font: 500 17px/1.2 var(--font-head); }
.mega__i small { grid-column: 2; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.35; }
.mega__side { display: grid; gap: 6px; align-content: start; }
.mega__seg { justify-content: space-between; padding: 14px !important; border: 1px solid var(--line); border-radius: 5px; font-family: var(--font-head); font-size: 15px !important; }
.mega__seg:hover { border-color: var(--cob); }
.mega__calc { display: grid !important; gap: 4px !important; padding: 16px !important; border-radius: 5px; background: var(--cob); color: #fff !important; position: relative; }
.mega__calc small { font: 400 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.mega__calc span { font: 500 18px/1.2 var(--font-head); padding-right: 30px; }
.mega__calc .ico { position: absolute; right: 14px; bottom: 16px; }
.top__tel { margin-left: auto; color: #fff; text-decoration: none; font: 500 15px/1 var(--font-head); letter-spacing: .02em; white-space: nowrap; }
.top__calc { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 3px; background: var(--cob); color: #fff; text-decoration: none; font: 500 14px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; transition: background .2s; flex: none; }
.top__calc:hover, .top__calc.is-on { background: #fff; color: var(--navy); }
.top__dot { width: 8px; height: 8px; border-radius: 50%; background: #3BE08A; box-shadow: 0 0 0 0 rgba(59,224,138,.6); animation: dot 2s infinite; }
@keyframes dot { 70% { box-shadow: 0 0 0 8px rgba(59,224,138,0); } 100% { box-shadow: 0 0 0 0 rgba(59,224,138,0); } }
.burger { display: none; width: 46px; height: 46px; border: 1px solid rgba(157,180,255,.3); border-radius: 3px; background: none; position: relative; flex: none; }
.burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; transition: transform .3s; }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 26px; right: 18px; }

/* мобильное меню */
.mnav { background: var(--navy); color: #fff; width: min(460px, 100%); padding: 18px 22px 30px; }
.mnav .logo__w { font-size: 22px; }
.mnav__x { color: #fff; }
.mnav__list li a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; font: 500 26px/1.15 var(--font-head); border-bottom: 1px solid rgba(157,180,255,.14); color: #fff; }
.mnav__list li a[aria-current] { color: var(--sky); }
.mnav__list small { font: 400 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--sky); width: 38px; flex: none; }
.mnav__k { margin: 22px 0 10px; font: 400 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.mnav__svc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mnav__svc a { display: block; padding: 8px 12px; border: 1px solid rgba(157,180,255,.3); border-radius: 3px; text-decoration: none; font-size: 15px; }
.mnav__tel { font: 500 20px/1 var(--font-head); text-decoration: none; }
.mnav__h { font-size: 14px; color: rgba(255,255,255,.6); margin: 0; }

/* ——— кнопки ——— */
.btn { gap: 12px; min-height: 54px; padding: 0 24px; font: 500 15px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius-btn); position: relative; overflow: hidden; isolation: isolate; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: translateY(101%); transition: transform .45s var(--ease); }
.btn:hover { filter: none; }
.btn:hover::before { transform: none; }
.btn .ico { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light::before { background: var(--cob); }
.btn--light:hover { color: #fff; border-color: var(--cob); }
.btn--line { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--line::before { background: #fff; }
.btn--line:hover { color: var(--navy); border-color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: #fff; background: transparent; }
.btn--sm { min-height: 46px; padding: 0 18px; font-size: 13px; }
.btn[data-magnet] { will-change: transform; }

/* ——— общие элементы ——— */
.addr { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 400 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.addr b { font-weight: 500; background: var(--ink); color: var(--paper); padding: 5px 8px 4px; border-radius: 2px; letter-spacing: .08em; }
.addr::after { content: ''; flex: 1; height: 1px; background: var(--line); max-width: 220px; }
.addr--inv { color: var(--sky); }
.addr--inv b { background: #fff; color: var(--navy); }
.addr--inv::after { background: rgba(157,180,255,.3); }
.note { margin: 18px 0 0; font: 400 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.note::before { content: '* '; }
.note--inv { color: rgba(157,180,255,.8); }
.sec { padding: clamp(80px, 9vw, 140px) 0; position: relative; }
.sh { margin-bottom: clamp(36px, 4vw, 60px); }
.sh__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px 60px; align-items: end; }
.sh__t { font-size: clamp(32px, 3.9vw, 58px); line-height: 1.04; letter-spacing: -.02em; max-width: 18ch; }
.sh__lead { margin: 0; color: var(--muted); font-size: 18px; max-width: 46ch; }
.sh__link { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.2 var(--font-head); letter-spacing: .03em; color: var(--cob); text-decoration: none; justify-self: end; }
.sh__link .ico { transition: transform .3s var(--ease); }
.sh__link:hover .ico { transform: translateX(4px); }
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 0 26px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .ico { color: var(--cob); margin-top: 3px; }
.ticks--lg li { font-size: 19px; padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
.ticks--lg { gap: 0; margin: 26px 0 32px; }
.frame { position: relative; overflow: hidden; border-radius: 4px; background: var(--navy2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame img.par { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); will-change: transform; }
.barcode { display: block; fill: currentColor; }
.barcode--s { width: 120px; height: 22px; }
.barcode--xs { display: inline-block; width: 70px; height: 12px; vertical-align: middle; }

/* появления */
.w { display: inline-block; }
html.js [data-split] .w { opacity: 0; transform: translateY(.5em) rotate(3deg); transform-origin: 0 100%; transition: opacity .6s ease, transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 42ms); }
html.js [data-split].in .w { opacity: 1; transform: none; }
html.js [data-in] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-in].in { opacity: 1; transform: none; }

/* ——— изометрия ——— */
.iso { width: 100%; height: auto; overflow: visible; }
.iso-float { animation: iso-float 4s ease-in-out infinite; }
@keyframes iso-float { 50% { transform: translateY(-10px); } }
.iso-hl polygon { animation: iso-hl 2.4s ease-in-out infinite; }
@keyframes iso-hl { 50% { opacity: .6; } }
.iso-path { animation: iso-dash 1.2s linear infinite; }
@keyframes iso-dash { to { stroke-dashoffset: -26; } }
.iso-scan { animation: iso-hl 1.2s steps(2) infinite; }
.iso-speed line { animation: iso-speed 1.1s linear infinite; }
.iso-speed line:nth-child(2) { animation-delay: -.4s; } .iso-speed line:nth-child(3) { animation-delay: -.8s; }
@keyframes iso-speed { 0% { opacity: 0; transform: translateX(30px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-40px); } }
.iso-loop { transform-box: fill-box; transform-origin: 50% 50%; animation: iso-loop 9s linear infinite; }
@keyframes iso-loop { to { transform: rotate(360deg); } }
.iso-flap { transform-box: fill-box; transform-origin: 0 100%; animation: iso-flap 3s ease-in-out infinite; }
@keyframes iso-flap { 50% { transform: skewY(-6deg); } }

/* ——— главный экран ——— */
.hero { position: relative; min-height: max(660px, calc(100svh - var(--top))); display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: clip;
  background: radial-gradient(90% 80% at 78% 38%, #1d44de 0%, #0f2775 38%, var(--navy) 78%); }
.hero__cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.hero__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,19,52,.92) 0%, rgba(7,19,52,.55) 34%, rgba(7,19,52,0) 58%), linear-gradient(0deg, rgba(7,19,52,.85) 0%, rgba(7,19,52,0) 30%); }
.hero__grid { position: relative; z-index: 2; padding-top: clamp(40px, 8vh, 96px); pointer-events: none; }
.hero__txt { max-width: 680px; pointer-events: auto; }
.hero__t { font-size: clamp(44px, 5.6vw, 90px); line-height: 1; letter-spacing: -.035em; font-weight: 600; }
.hero__lead { font-size: 19px; color: rgba(255,255,255,.8); max-width: 50ch; margin: 28px 0 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats { position: relative; z-index: 2; padding: 0 0 34px; pointer-events: none; }
.hero__stats dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin: 0; max-width: 900px; }
.hero__stats dl > div { border-top: 1px solid rgba(157,180,255,.35); padding-top: 14px; }
.hero__stats dt { font: 500 clamp(26px, 2.4vw, 36px)/1 var(--font-head); letter-spacing: -.01em; }
.hero__stats dd { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.66); max-width: 22ch; }
.hero__stats .note { margin-top: 14px; }
.hero__hint { position: absolute; right: 40px; bottom: 36px; z-index: 2; margin: 0; font: 400 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); opacity: .8; pointer-events: none; }
.hero__hint::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border: 1px solid var(--sky); vertical-align: 1px; animation: dot2 1.6s infinite; }
@keyframes dot2 { 50% { background: var(--sky); } }

/* ——— скотч ——— */
.tapes { position: relative; height: 150px; overflow: clip; background: var(--paper); }
.tapes--alt { background: var(--white); }
.tape { position: absolute; left: -4%; width: 108%; height: 52px; display: flex; align-items: center; overflow: hidden; }
.tape--a { top: 34px; transform: rotate(-2.2deg); color: #4A2F12; background: linear-gradient(180deg, #e3b57d, #d4a167 55%, #c99660); box-shadow: 0 10px 24px rgba(122,83,40,.18); }
.tape--a::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px); pointer-events: none; }
.tape--b { top: 76px; transform: rotate(1.6deg); color: #fff; background: var(--cob); height: 44px; }
.tape__run { display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.tape__run i { font: 600 21px/1 var(--font-head); font-style: normal; letter-spacing: .1em; padding: 0 20px; }
.tape--b .tape__run i { font: 500 14px/1 var(--font-mono); letter-spacing: .22em; }
.tape__run b { font-size: 13px; opacity: .55; }

/* ——— манифест ——— */
.manifest__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px 70px; align-items: end; }
.manifest__grid > .addr { grid-column: 1 / -1; }
.manifest__t { align-self: start; margin: 0; font: 500 clamp(26px, 3.1vw, 48px)/1.2 var(--font-head); letter-spacing: -.015em; }
.fw { display: inline-block; opacity: .16; transition: opacity .35s ease, color .35s; }
.fw.on { opacity: 1; }
.fw.hl { color: var(--cob); }
.manifest__fig { margin: 0; }
.manifest__fig .frame { aspect-ratio: 4 / 5; }
.manifest__fig figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* ——— большие цифры ——— */
.nums { padding-top: 0; }
.nums__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.nums__row > div { padding: 26px 24px 0 0; border-right: 1px solid var(--line); margin-right: 24px; }
.nums__row > div:last-child { border-right: 0; }
.nums dt { font: 500 clamp(46px, 5.6vw, 92px)/1 var(--font-head); letter-spacing: -.04em; color: var(--cob); }
.nums dt small { font-size: .32em; letter-spacing: 0; margin-left: 6px; color: var(--ink); }
.nums dd { margin: 12px 0 0; color: var(--muted); max-width: 24ch; }

/* ——— услуги-панель ——— */
.svc__box { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 12px; padding: 12px; background: var(--navy); border-radius: 10px; box-shadow: 0 40px 90px rgba(7,19,52,.25); }
.svc__tabs { display: flex; flex-direction: column; gap: 6px; }
.svc__tab { display: grid; grid-template-columns: 36px 1fr; gap: 3px 0; text-align: left; padding: 15px 16px; border: 1px solid rgba(157,180,255,.12); border-radius: 6px; background: rgba(255,255,255,.03); color: #fff; transition: background .25s, border-color .25s; }
.svc__tab:hover { border-color: rgba(157,180,255,.4); }
.svc__tab b { font: 500 12px/1.6 var(--font-mono); color: var(--sky); }
.svc__tab span { font: 500 19px/1.2 var(--font-head); }
.svc__tab small { grid-column: 2; font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.35; }
.svc__tab[aria-selected="true"] { background: var(--cob); border-color: var(--cob); }
.svc__tab[aria-selected="true"] b, .svc__tab[aria-selected="true"] small { color: rgba(255,255,255,.85); }
.svc__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border-radius: 6px; overflow: hidden; min-height: 520px; animation: panel-in .6s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateX(16px); } }
.svc__img { position: relative; overflow: hidden; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; animation: img-in 1.2s var(--ease); }
@keyframes img-in { from { transform: scale(1.12); clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.svc__n { position: absolute; left: 22px; bottom: 6px; font: 600 130px/1 var(--font-head); color: #fff; letter-spacing: -.05em; opacity: .92; text-shadow: 0 10px 40px rgba(7,19,52,.4); }
.svc__body { padding: 40px 38px; display: flex; flex-direction: column; }
.svc__t { font-size: 32px; margin-bottom: 14px; }
.svc__body > p { color: var(--muted); }
.svc__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.svc__price { margin: 0; font: 500 22px/1.1 var(--font-head); }
.svc__price small { display: block; font: 400 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* ——— конвейер (путь заказа) ——— */
.belt { position: relative; height: 620vh; background: var(--navy); color: #fff; }
.belt__sticky { position: sticky; top: var(--top); height: calc(100svh - var(--top)); overflow: hidden;
  background: radial-gradient(70% 70% at 62% 55%, #12308f 0%, var(--navy) 72%); }
.belt__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.belt__head { position: relative; z-index: 2; padding-top: 36px; }
.belt__t { font-size: clamp(28px, 2.9vw, 44px); line-height: 1.06; max-width: 17ch; letter-spacing: -.02em; }
.belt__steps { list-style: none; padding: 0; margin: 0; position: absolute; z-index: 3; right: max(var(--pad), (100% - var(--wrap)) / 2); top: 36px; width: min(410px, 100% - 2 * var(--pad)); height: 300px; }
.bstep { position: absolute; left: 0; right: 0; top: 0; padding: 24px 26px; border: 1px solid rgba(157,180,255,.24); border-radius: 8px; background: rgba(7,19,52,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .45s ease, transform .6s var(--ease), visibility .45s; }
.bstep.is-on { opacity: 1; visibility: visible; transform: none; }
.bstep__n { margin: 0 0 6px; font: 500 54px/1 var(--font-head); color: var(--sky); letter-spacing: -.03em; }
.bstep__n small { font-size: 16px; color: rgba(157,180,255,.6); margin-left: 4px; }
.bstep__t { font-size: 30px; margin-bottom: 10px; }
.bstep__p { color: rgba(255,255,255,.78); font-size: 16px; }
.bstep__m { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(157,180,255,.3); font: 400 13px/1.4 var(--font-mono); color: var(--sky); }
.bstep__m b { color: #fff; font-weight: 500; margin-right: 6px; }
.belt__rail { position: absolute; z-index: 2; left: max(var(--pad), (100% - var(--wrap)) / 2); bottom: 48px; width: min(380px, 30%); height: 2px; background: rgba(157,180,255,.18); }
.belt__fill { position: absolute; inset: 0; background: var(--sky); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.belt__tick { position: absolute; top: -4px; left: calc(var(--i) / 5 * 100%); width: 10px; height: 10px; margin-left: -5px; background: var(--navy); border: 2px solid rgba(157,180,255,.5); transition: background .3s, border-color .3s; }
.belt__tick em { position: absolute; left: -3px; bottom: 16px; font: 400 11px/1 var(--font-mono); font-style: normal; color: rgba(157,180,255,.6); }
.belt__tick.is-on { background: var(--sky); border-color: var(--sky); }
.belt__tick.is-on em { color: #fff; }
.belt__hint { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); font: 400 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sky); transition: opacity .4s; white-space: nowrap; }
.belt.is-moving .belt__hint { opacity: 0; }
.belt__note { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; z-index: 2; }

/* ——— мини-калькулятор ——— */
.mini { background: #fff; }
.mini__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.mini__grid .sh__row { grid-template-columns: 1fr; }
.mini__card { padding: 34px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); }
.mini__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.mini__row label { font-weight: 500; }
.mini__row output { font: 500 34px/1 var(--font-head); color: var(--cob); }
.mini__sizes { border: 0; padding: 0; margin: 24px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mini__sizes legend { font-weight: 500; margin-bottom: 10px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font-size: 14px; transition: background .2s, color .2s, border-color .2s; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--cob); outline-offset: 2px; }
.mini__out { display: grid; grid-template-columns: 1.1fr 1.2fr .8fr; gap: 14px; padding: 20px 0; margin-bottom: 18px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.mini__out small { display: block; font: 400 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mini__out b { font: 500 26px/1 var(--font-head); white-space: nowrap; }

/* ползунок */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 10px 0 0; cursor: pointer; --v: 50%; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cob) var(--v), var(--line) var(--v)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cob) var(--v), var(--line) var(--v)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 3px; background: #fff; border: 2px solid var(--cob); box-shadow: 0 4px 12px rgba(36,72,255,.3); transition: transform .2s; }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 3px; background: #fff; border: 2px solid var(--cob); }
.range:active::-webkit-slider-thumb { transform: scale(1.15) rotate(45deg); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--cob); outline-offset: 3px; }

/* ——— склад-превью ——— */
.store__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.store__ph { aspect-ratio: 3 / 4; }
.store__tag { position: absolute; left: 18px; top: 18px; padding: 8px 10px; background: #fff; color: var(--ink); font: 500 13px/1 var(--font-mono); letter-spacing: .1em; border-radius: 2px; }
.store__txt > p { color: var(--muted); font-size: 18px; max-width: 48ch; margin: 24px 0; }
.specs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--ink); }
.specs > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.specs > div:nth-child(odd) { padding-right: 20px; }
.specs dt { font: 400 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 8px 0 0; font: 500 22px/1.1 var(--font-head); }
.store__txt .btn { margin-top: 28px; }

/* ——— провода интеграций ——— */
.wires-sec { background: var(--white); overflow: clip; }
.wires { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: 90px; align-items: center; }
.wires__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires__svg path { fill: none; stroke: var(--line); stroke-width: 1.5; }
.wires__svg path.on { stroke: var(--cob); stroke-dasharray: 4 6; animation: iso-dash 1s linear infinite; }
.wires__svg circle { fill: var(--cob); }
.wires__col { list-style: none; padding: 0; display: grid; gap: 14px; position: relative; z-index: 1; }
.wnode { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; transition: border-color .3s, transform .4s var(--ease); }
.wnode:hover { border-color: var(--cob); transform: translateY(-3px); }
.wnode b { display: block; font: 500 19px/1.2 var(--font-head); }
.wnode small { color: var(--muted); font-size: 14px; }
.wires__col--r .wnode { background: var(--navy); color: #fff; border-color: var(--navy); }
.wires__col--r .wnode small { color: rgba(255,255,255,.65); }
.wires__hub { position: relative; z-index: 1; text-align: center; }
.wires__hub .iso { width: 150px; margin: 0 auto 12px; animation: iso-float 5s ease-in-out infinite; }
.wires__hub p { margin: 0; }
.wires__hub b { display: block; font: 600 26px/1 var(--font-head); }
.wires__hub small { font: 400 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* ——— для кого ——— */
.who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.who__card { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.who__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(7,19,52,.12); }
.who__img { aspect-ratio: 16 / 9; overflow: hidden; }
.who__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.who__card:hover .who__img img { transform: scale(1.06); }
.who__body { padding: 30px; display: flex; flex-direction: column; }
.who__k { font: 400 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cob); }
.who__t { font-size: 28px; margin: 4px 0 16px; }
.who__body ul { padding: 0 0 0 18px; color: var(--muted); margin-bottom: 22px; }
.who__body li { margin-bottom: 4px; }
.who__go { margin-top: auto; display: inline-flex; gap: 10px; align-items: center; font: 500 15px/1 var(--font-head); color: var(--cob); }

/* ——— тарифы ——— */
.tar { background: var(--white); }
.tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tcard { display: flex; flex-direction: column; padding: 0; background: #fff; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.tcard__head { padding: 22px 24px 18px; border-bottom: 2px solid var(--ink); }
.tcard__k { margin: 0 0 12px; font: 400 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tcard__t { font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.tcard__r { margin: 10px 0 0; font-weight: 500; }
.tcard__who { padding: 18px 24px 0; color: var(--muted); font-size: 15px; margin: 0; }
.tcard__dl { margin: 14px 24px; display: grid; }
.tcard__dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.tcard__dl dt { color: var(--muted); font-size: 15px; }
.tcard__dl dd { margin: 0; font: 500 17px/1.3 var(--font-head); white-space: nowrap; }
.tcard__ul { list-style: none; padding: 4px 24px 0; margin: 0 0 20px; display: grid; gap: 8px; font-size: 15px; }
.tcard__ul li { display: flex; gap: 8px; }
.tcard__ul .ico { color: var(--cob); width: 16px; height: 16px; margin-top: 3px; }
.tcard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 24px; border-top: 2px solid var(--ink); }
.tcard__a { display: inline-flex; gap: 8px; align-items: center; font: 500 14px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--cob); text-decoration: none; }
.tcard--hit { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-14px); box-shadow: 0 30px 70px rgba(7,19,52,.3); }
.tcard--hit .tcard__head, .tcard--hit .tcard__foot { border-color: rgba(157,180,255,.3); }
.tcard--hit .tcard__k { color: var(--sky); }
.tcard--hit .tcard__who, .tcard--hit .tcard__dl dt { color: rgba(255,255,255,.66); }
.tcard--hit .tcard__dl > div { border-color: rgba(157,180,255,.22); }
.tcard--hit .tcard__a, .tcard--hit .tcard__ul .ico { color: var(--sky); }

/* ——— вопросы ——— */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 80px; }
.faq-grid .sh__row { grid-template-columns: 1fr; }
.faq summary { font: 500 20px/1.3 var(--font-head); letter-spacing: -.005em; }
.faq summary::after { font-family: var(--font-body); color: var(--cob); }
.faq details > div { font-size: 17px; }
.faq details:first-child { border-top-color: var(--ink); }

/* ——— заявка ——— */
.cta { background: var(--navy); color: #fff; padding: clamp(80px, 9vw, 130px) 0; overflow: clip; position: relative; }
.cta::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(157,180,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(157,180,255,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, #000, transparent 70%); pointer-events: none; }
.cta__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 60px; align-items: center; }
.cta__t { font-size: clamp(34px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -.025em; max-width: 14ch; }
.cta__p { margin: 24px 0; color: rgba(255,255,255,.75); font-size: 18px; max-width: 48ch; }
.cta__list { list-style: none; padding: 0; display: grid; gap: 10px; margin-bottom: 26px; }
.cta__list li { display: flex; gap: 10px; }
.cta__list .ico { color: var(--sky); }
.cta__alt { color: rgba(255,255,255,.7); }
.cta__alt a { color: #fff; }
.cta__card { background: #fff; color: var(--ink); border-radius: 8px; padding: 0 30px 26px; box-shadow: 0 40px 90px rgba(0,0,0,.3); }
.cta__lbl { display: flex; justify-content: space-between; align-items: center; margin: 0 -30px 24px; padding: 14px 30px; border-bottom: 2px solid var(--ink); font: 500 12px/1 var(--font-mono); letter-spacing: .16em; }
.lead { gap: 14px 16px; }
.field span { font-size: 14px; color: var(--muted); }
.field input, .field textarea { border-color: var(--line); background: var(--paper); border-radius: 3px; transition: border-color .2s, background .2s; }
.field input:focus, .field textarea:focus { border-color: var(--cob); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(36,72,255,.15); }
.modal__box { border-radius: 8px; border-top: 6px solid var(--cob); }
.modal__k { font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.modal__t { font-family: var(--font-head); }

/* ——— подвал-накладная ——— */
.foot { background: var(--navy3); color: #fff; padding: 80px 0 0; overflow: clip; }
.wb { background: #fff; color: var(--ink); border: 2px solid #fff; border-radius: 6px; overflow: hidden; }
.wb__head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 16px 24px; background: var(--ink); color: #fff; }
.wb__logo { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/1 var(--font-head); }
.wb__logo .mark { width: 30px; height: 30px; }
.wb__type, .wb__no { font: 400 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.wb__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wb__c { padding: 22px 24px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.wb__c:nth-child(1) { grid-column: span 2; } .wb__c:nth-child(2) { grid-column: span 2; } .wb__c:nth-child(3) { grid-column: span 2; border-right: 0; }
.wb__c:nth-child(4), .wb__c:nth-child(5) { grid-column: span 2; } .wb__c:nth-child(6) { grid-column: span 2; border-right: 0; }
.wb__k { margin: 0 0 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wb__v { margin: 0; font: 500 18px/1.35 var(--font-head); }
.wb__c ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.wb__c a { text-decoration: none; }
.wb__c a:hover { color: var(--cob); text-decoration: underline; }
.wb__c--bar { display: flex; flex-direction: column; justify-content: center; }
.wb__c--bar .barcode { width: 100%; height: 58px; }
.wb__code { margin: 8px 0 0; font: 400 13px/1 var(--font-mono); letter-spacing: .3em; text-align: center; }
.wb__h { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.wb__foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 24px; font-size: 14px; color: var(--muted); }
.wb__foot p { margin: 0; }
.foot__big { margin-top: 40px; font: 600 clamp(90px, 23vw, 360px)/.86 var(--font-head); letter-spacing: -.04em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(157,180,255,.28); user-select: none; white-space: nowrap; }
.foot__dev { border-top: 1px solid rgba(157,180,255,.16); padding: 18px 0 22px; }
.foot__dev .wrap { display: flex; justify-content: center; }
.foot__dev a { display: inline-flex; align-items: center; gap: 8px; color: var(--sky); text-decoration: none; font: 500 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; transition: color .2s; }
.foot__dev a:hover { color: #fff; }
.foot__dev .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.foot__dev a:hover .ico { transform: translate(2px, -2px); }

/* ——— шапка внутренних страниц ——— */
.phero { position: relative; color: #fff; background: radial-gradient(80% 90% at 80% 30%, #163cc4 0%, #0d2266 40%, var(--navy) 80%); overflow: clip; padding: 6px 0 clamp(64px, 7vw, 104px); }
.phero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(157,180,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(157,180,255,.07) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 90% at 80% 40%, #000, transparent 75%); pointer-events: none; }
.phero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.phero .crumbs { color: rgba(255,255,255,.55); padding-bottom: 34px; }
.phero .crumbs a:hover { color: #fff; }
.phero__t { font-size: clamp(38px, 4.8vw, 76px); line-height: 1; letter-spacing: -.03em; max-width: 16ch; }
.phero__lead { margin: 26px 0 0; font-size: 19px; color: rgba(255,255,255,.78); max-width: 52ch; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.phero__art { justify-self: center; width: min(100%, 520px); filter: drop-shadow(0 40px 60px rgba(0,0,0,.35)); }
.phero__art .iso { max-height: 440px; }
/* фото в шапке страницы: рамка сканера и наклейка-этикетка */
.phph { position: relative; margin: 34px 14px 0 auto; width: min(100%, 400px); }
.phero__art:has(.phph) { filter: none; justify-self: end; }
.phph__frame { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 4px; background: var(--navy2); box-shadow: 0 40px 80px rgba(0,0,0,.35); }
.phph__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.phph__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,19,52,0) 55%, rgba(7,19,52,.45)); pointer-events: none; }
.phph__scan { position: absolute; inset: -14px; pointer-events: none; }
.phph__scan i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--sky); }
.phph__scan i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .phph__scan i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.phph__scan i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .phph__scan i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.phph__lbl { position: absolute; left: -34px; bottom: 34px; display: grid; gap: 6px; padding: 12px 14px 10px; background: #fff; color: var(--ink); border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.3); transform: rotate(-4deg); }
.phph__lbl::before { content: ''; position: absolute; left: 50%; top: -9px; width: 54px; height: 18px; margin-left: -27px; background: rgba(226,185,135,.85); transform: rotate(3deg); }
.phph__code { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--cob); }
.phph__tag { font: 600 17px/1.1 var(--font-head); max-width: 170px; }
html.js .phero__art[data-in] .phph__frame { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease) .1s; }
html.js .phero__art[data-in] .phph__frame img { transform: scale(1.18); transition: transform 1.8s var(--ease) .1s; }
html.js .phero__art[data-in].in .phph__frame { clip-path: inset(0); }
html.js .phero__art[data-in].in .phph__frame img { transform: scale(1.02); }
html.js .phero__art[data-in] .phph__scan i { opacity: 0; transition: opacity .4s ease .9s, transform .8s var(--ease) .9s; }
html.js .phero__art[data-in] .phph__scan i:nth-child(1) { transform: translate(14px, 14px); } html.js .phero__art[data-in] .phph__scan i:nth-child(2) { transform: translate(-14px, 14px); }
html.js .phero__art[data-in] .phph__scan i:nth-child(3) { transform: translate(14px, -14px); } html.js .phero__art[data-in] .phph__scan i:nth-child(4) { transform: translate(-14px, -14px); }
html.js .phero__art[data-in].in .phph__scan i { opacity: 1; transform: none; }
html.js .phero__art[data-in] .phph__lbl { opacity: 0; transform: rotate(-10deg) translateY(20px); transition: opacity .5s ease 1.1s, transform .9s var(--ease) 1.1s; }
html.js .phero__art[data-in].in .phph__lbl { opacity: 1; transform: rotate(-4deg); }
.phero--calc .phero__grid { grid-template-columns: 1fr; }
.phero--calc .phero__t { max-width: 20ch; }

/* шаги */
.steps { list-style: none; padding: 0; margin: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; }
.steps__line { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--line); }
.steps__line i { position: absolute; inset: 0; background: var(--cob); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.steps__i { position: relative; }
.steps__n { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 3px; background: var(--paper); border: 2px solid var(--ink); font: 500 14px/1 var(--font-mono); transition: background .4s, color .4s, border-color .4s; }
.steps__i.lit .steps__n { background: var(--cob); color: #fff; border-color: var(--cob); }
.steps__i h3 { font-size: 22px; margin-bottom: 10px; }
.steps__i p { color: var(--muted); font-size: 16px; }

/* фото-полоса */
.band { padding: 0; height: min(78vh, 720px); min-height: 440px; color: #fff; overflow: hidden; }
.band__ph { position: absolute; inset: 0; border-radius: 0; }
.band__ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,19,52,.9) 0%, rgba(7,19,52,.25) 60%, rgba(7,19,52,.1) 100%); }
.band__in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 50px; }
.band__sla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 900px; margin: 0; }
.band__sla > div { border-top: 1px solid rgba(255,255,255,.4); padding-top: 16px; }
.band__sla dt { font: 500 clamp(40px, 5vw, 78px)/1 var(--font-head); letter-spacing: -.03em; }
.band__sla dd { margin: 10px 0 0; color: rgba(255,255,255,.75); }

.inc__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; }
.inc__grid .sh__row { grid-template-columns: 1fr; }
.inc__list { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--ink); }
.inc__list li { display: flex; gap: 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--ink); font: 500 clamp(19px, 1.7vw, 24px)/1.3 var(--font-head); }
.inc__list span { font: 400 12px/1 var(--font-mono); color: var(--cob); flex: none; width: 24px; }

.price { background: var(--white); }
.price__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 60px; align-items: center; }
.price__card { border: 2px solid var(--ink); border-radius: 6px; padding: 0 28px 24px; background: #fff; }
.price__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 -28px 8px; padding: 16px 28px; background: var(--ink); color: #fff; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.price__head p { margin: 0; }
.price__head .barcode { color: #fff; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { padding: 16px 0; border-bottom: 1px dashed var(--line); text-align: left; font-weight: 400; vertical-align: baseline; }
.ptable td { text-align: right; font: 500 18px/1.3 var(--font-head); padding-left: 16px; }
.price__side p { color: var(--muted); margin: 18px 0 26px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pn { background: var(--white); }
.pn__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.pn__a { display: grid; gap: 8px; padding: 34px 0; text-decoration: none; transition: background .3s, color .3s, padding .4s var(--ease); }
.pn__a small { font: 400 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pn__a span { font: 500 clamp(24px, 2.6vw, 38px)/1.1 var(--font-head); letter-spacing: -.02em; }
.pn__a--next { text-align: right; border-left: 1px solid var(--line); }
.pn__a:hover span { color: var(--cob); }

/* было → стало */
.pains__list { list-style: none; padding: 0; margin: 0; }
.pains__i { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px minmax(0, 1.2fr); gap: 20px; align-items: center; padding: 26px 0; border-top: 1px solid var(--ink); }
.pains__i:last-child { border-bottom: 1px solid var(--ink); }
.pains__n { font: 400 13px/1 var(--font-mono); color: var(--muted); }
.pains__a { margin: 0; font: 500 clamp(19px, 1.8vw, 26px)/1.25 var(--font-head); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(36,72,255,.6); text-decoration-thickness: 2px; }
.pains__ar { color: var(--cob); }
.pains__ar .ico { width: 30px; height: 30px; }
.pains__b { margin: 0; font-size: 18px; }
.split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.split__ph { aspect-ratio: 4 / 3.4; }

/* карточки */
.xgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.xcard { position: relative; padding: 28px 26px; background: #fff; border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); border-radius: 4px 0 4px 4px; transition: border-color .3s, transform .5s var(--ease); }
.xcard::after { content: ''; position: absolute; right: 0; top: 0; width: 22px; height: 22px; background: linear-gradient(225deg, transparent 50%, var(--kraft-l) 50%); }
.xcard:hover { transform: translateY(-4px); border-color: var(--cob); }
.xcard h3 { font-size: 22px; margin-bottom: 10px; }
.xcard p { color: var(--muted); font-size: 16px; }
.xcard__p { margin: 18px 0 0; font: 500 13px/1 var(--font-mono) !important; color: var(--cob) !important; letter-spacing: .06em; }
.slist-sec { padding-top: 40px; }
.slist { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--ink); }
.slist__a { display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1.4fr) 200px 40px; gap: 24px; align-items: center; padding: 30px 0; border-top: 1px solid var(--ink); text-decoration: none; position: relative; transition: padding .5s var(--ease), color .3s; }
.slist__a::before { content: ''; position: absolute; inset: 0; background: var(--navy); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); z-index: -1; }
.slist li { position: relative; isolation: isolate; }
.slist__a:hover { color: #fff; padding-left: 24px; padding-right: 24px; }
.slist__a:hover::before { transform: none; }
.slist__n { font: 400 13px/1 var(--font-mono); color: var(--cob); }
.slist__a:hover .slist__n, .slist__a:hover .slist__s { color: var(--sky); }
.slist__t { font: 500 clamp(28px, 3.4vw, 50px)/1 var(--font-head); letter-spacing: -.025em; }
.slist__s { color: var(--muted); }
.slist__p { font: 500 17px/1.2 var(--font-head); text-align: right; }
.slist__go .ico { width: 30px; height: 30px; }
.slist__float { position: fixed; left: 0; top: 0; z-index: 40; width: 280px; aspect-ratio: 3 / 2; pointer-events: none; opacity: 0; border-radius: 4px; overflow: hidden; transition: opacity .3s; box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.slist__float.on { opacity: 1; }
.slist__float img { width: 100%; height: 100%; object-fit: cover; }
.extra { background: var(--white); }

/* подключение */
.onb__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.onb__i { padding: 22px 20px 0 0; position: relative; }
.onb__d { margin: 0 0 18px; font: 500 13px/1 var(--font-mono); letter-spacing: .1em; color: var(--cob); text-transform: uppercase; }
.onb__i h3 { font-size: 22px; margin-bottom: 8px; }
.onb__i p { color: var(--muted); font-size: 16px; }
.onb__bar { display: block; height: 8px; margin-top: 18px; background: var(--cob); border-radius: 1px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--ease) calc(var(--k) * .12s + .2s); }
.onb__i.in .onb__bar { transform: none; }

/* сутки склада */
.day { background: var(--white); }
.day__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; }
.day__grid .sh__row { grid-template-columns: 1fr; }
.day__wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: center; }
.dial { width: 100%; height: auto; overflow: visible; }
.dial__ring { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.dial__tick { stroke: var(--ink); stroke-width: 1.5; }
.dial__arc { fill: none; stroke: var(--sky); stroke-width: 12; }
.dial__arc--hot { stroke: var(--cob); stroke-width: 14; }
.dial__lbl { font: 500 14px var(--font-mono); text-anchor: middle; fill: var(--muted); }
.dial__hand { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(var(--rot, 0deg)); transition: transform 1.6s var(--ease); }
.dial__hand line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dial__hand circle { fill: #3BE08A; stroke: var(--ink); stroke-width: 2; }
.dial__c { fill: var(--ink); }
.day__list { list-style: none; padding: 0; margin: 0; }
.day__list li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); transition: color .3s; }
.day__list b { font: 500 18px/1.3 var(--font-head); color: var(--cob); }
.day__list li.now { background: linear-gradient(90deg, rgba(36,72,255,.08), transparent); }
.day__list li.now b::after { content: ' ●'; color: #3BE08A; font-size: 12px; vertical-align: 2px; }

/* тарифы — все ставки */
.rtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.rtabs [role="tab"] { min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 3px; background: transparent; font: 500 14px/1 var(--font-head); letter-spacing: .04em; }
.rtabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
.rpanel { max-width: 860px; animation: panel-in .5s var(--ease); }
.ptable--wide { margin-bottom: 20px; }
.sizes__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.szcard { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.szcard .sizebox { width: 100px; height: 100px; margin-bottom: 10px; }
.szcard h3 { font-size: 26px; }
.szcard h3 span { display: block; font: 500 14px/1.3 var(--font-body); color: var(--muted); letter-spacing: 0; }
.szcard__d { margin: 8px 0 4px; font: 500 14px/1.3 var(--font-mono); }
.szcard__e { color: var(--muted); font-size: 14px; min-height: 3em; }
.szcard dl { margin: 12px 0 0; }
.szcard dl > div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.szcard dd { margin: 0; font-family: var(--font-head); }

/* склад: схема */
.plan__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.plan__svg { width: 100%; height: auto; overflow: visible; }
.pz { cursor: pointer; transition: transform .45s var(--ease); }
.pz__t { fill: #E6ECF8; stroke: #fff; stroke-width: 1.5; transition: fill .3s; }
.pz__l { fill: #C2CDE5; transition: fill .3s; }
.pz__r { fill: #A6B5D6; transition: fill .3s; }
.pz__dot { fill: var(--ink); transition: fill .3s; }
.pz__n { font: 500 13px var(--font-mono); fill: #fff; text-anchor: middle; pointer-events: none; }
.pz.on { transform: translateY(-10px); }
.pz.on .pz__t { fill: #6F8BFF; } .pz.on .pz__l { fill: var(--cob); } .pz.on .pz__r { fill: var(--cob2); }
.pz.on .pz__dot { fill: #fff; } .pz.on .pz__n { fill: var(--ink); }
.plan__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.plan__list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 10px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .3s; outline-offset: -2px; }
.plan__list li.on { background: #fff; }
.plan__list h3 { font-size: 19px; margin-bottom: 4px; }
.plan__list p { margin: 0; font-size: 15px; color: var(--muted); }
.plan__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font: 500 13px/1 var(--font-mono); }
.plan__list li.on .plan__n { background: var(--cob); }
.gal { padding-top: 0; }
.gal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.gal__grid figure { margin: 0; }
.gal__a { grid-column: 1 / 8; aspect-ratio: 16 / 10; }
.gal__b { grid-column: 8 / 13; grid-row: span 2; }
.gal__c { grid-column: 1 / 4; aspect-ratio: 1; }
.gal__d { grid-column: 4 / 8; aspect-ratio: 4 / 3; }
.cond { background: var(--white); }
.cond__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.cond__grid > div { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--line); }
.cond__grid dt { font: 500 clamp(28px, 2.6vw, 38px)/1.05 var(--font-head); color: var(--cob); letter-spacing: -.02em; }
.cond__grid dd { margin: 10px 0 0; color: var(--muted); max-width: 30ch; }

/* интеграции: код */
.api { background: var(--white); }
.api__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; }
.api__grid .sh__row { grid-template-columns: 1fr; }
.code { background: var(--navy); color: var(--sky); border-radius: 8px; overflow: hidden; }
.code__tabs { display: flex; border-bottom: 1px solid rgba(157,180,255,.2); }
.code__tabs [role="tab"] { padding: 14px 20px; border: 0; background: none; color: rgba(255,255,255,.6); font: 500 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.code__tabs [role="tab"][aria-selected="true"] { color: #fff; border-bottom-color: var(--sky); }
.code pre { margin: 0; padding: 24px; font: 400 14px/1.6 var(--font-mono); overflow-x: auto; animation: panel-in .4s var(--ease); }
.code pre b { color: #3BE08A; font-weight: 500; }
.code pre i { color: rgba(157,180,255,.7); font-style: normal; }
.code__note { margin: 0; padding: 0 24px 18px; font: 400 12px/1 var(--font-mono); color: rgba(157,180,255,.6); }

/* кейсы */
.fbar { align-items: center; margin-bottom: 30px; }
.fbtn { border-color: var(--ink); font: 500 14px/1 var(--font-head); letter-spacing: .03em; background: transparent; }
.fbar__count { margin-left: auto; font: 400 13px/1 var(--font-mono); color: var(--muted); }
.cases__list { display: grid; gap: 18px; }
.case { display: grid; grid-template-columns: 380px minmax(0, 1fr); background: #fff; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.case__label { padding: 28px; border-right: 2px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; gap: 14px; }
.case__k { margin: 0; font: 400 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cob); }
.case__t { font-size: 30px; line-height: 1.08; }
.case__label .barcode { width: 160px; height: 30px; }
.case__dl { margin: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.case__dl > div { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.case__dl dt { font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.case__dl dd { margin: 6px 0 0; font: 500 19px/1.2 var(--font-head); }
.case__body { padding: 28px 34px; }
.case__body h3 { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.case__body p { margin-bottom: 20px; font-size: 17px; }

/* команда и менеджер в заявке */
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tm__ph { aspect-ratio: 4 / 5; margin-bottom: 16px; }
.tm__ph img { transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.85); }
.tm:hover .tm__ph img { transform: scale(1.05); filter: none; }
.tm__code { position: absolute; left: 12px; top: 12px; padding: 6px 8px; background: #fff; color: var(--ink); font: 500 11px/1 var(--font-mono); letter-spacing: .12em; border-radius: 2px; }
.tm__n { font-size: 26px; }
.tm__r { margin: 6px 0 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cob); }
.tm__t { color: var(--muted); font-size: 16px; margin: 0; }
.cta__mgr { display: flex; gap: 14px; align-items: center; margin: 0 0 22px; padding: 12px 14px; border: 1px solid rgba(157,180,255,.22); border-radius: 6px; max-width: 470px; }
.cta__mgr img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--sky); }
.cta__mgr p { margin: 0; font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.4; }
.cta__mgr b { color: #fff; }
.cta__mgr small { display: block; margin-top: 4px; font: 400 11px/1.3 var(--font-mono); color: rgba(157,180,255,.75); }
/* контакты */
.ct__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.ct__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct__c { display: grid; gap: 8px; align-content: start; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; transition: border-color .3s; }
a.ct__c:hover { border-color: var(--cob); }
.ct__c small { font: 400 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ct__c b { font: 500 20px/1.25 var(--font-head); }
.map { width: 100%; height: auto; border-radius: 8px; display: block; }
.map__bg { fill: #E1E7F2; }
.map__road { fill: none; stroke: #fff; stroke-width: 14; }
.map__road--big { stroke-width: 26; stroke: #F7F9FD; }
.map__road--s { stroke-width: 9; }
.map__blk rect { fill: #CBD4E6; }
.map__pin rect { fill: var(--navy); } .map__pin path { fill: var(--navy); }
.map__pin text { font: 600 20px var(--font-head); fill: #fff; text-anchor: middle; }
.map__pin .map__s { font: 400 11px var(--font-mono); fill: var(--sky); letter-spacing: .1em; }
.map__dot { fill: var(--cob); stroke: #fff; stroke-width: 3; animation: iso-hl 1.6s infinite; }
.map__lbl { font: 400 12px var(--font-mono); fill: var(--muted); }
.arrive { background: var(--white); }
.steps--plain .steps__n { background: #fff; }

/* ——— калькулятор ——— */
.calc { padding: 60px 0 100px; }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 36px; align-items: start; }
.cblock { border: 0; margin: 0 0 16px; padding: 28px 30px; background: #fff; border-radius: 8px; border: 1px solid var(--line); min-width: 0; }
.cblock legend { float: left; width: 100%; padding: 0; margin: 0 0 22px; display: flex; align-items: center; gap: 12px; font: 500 24px/1.1 var(--font-head); }
.cblock legend b { font: 500 12px/1 var(--font-mono); padding: 6px 8px; background: var(--ink); color: #fff; border-radius: 2px; }
.cblock legend + * { clear: both; }
.cf { margin-bottom: 20px; }
.cf:last-child { margin-bottom: 0; }
.cf__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cf__row label { font-weight: 500; }
.cf__num { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cf__num input { width: 104px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font: 500 18px/1 var(--font-head); text-align: right; }
.cf__num input:focus { outline: none; border-color: var(--cob); background: #fff; }
.cf__num span { font-size: 14px; color: var(--muted); width: 26px; }
.cf__hint { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.ctariff { margin-top: 6px; padding: 16px; background: var(--paper); border-radius: 6px; }
.ctariff__bar { position: relative; height: 34px; border-bottom: 2px solid var(--ink); }
.ctariff__bar span { position: absolute; left: calc(var(--x) * 100%); bottom: 6px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-left: 8px; border-left: 1px solid var(--ink); height: 20px; display: flex; align-items: flex-end; }
.ctariff__bar i { position: absolute; left: 0; bottom: -7px; width: 0; height: 12px; transition: transform .5s var(--ease); pointer-events: none; }
.ctariff__bar i::before { content: ''; position: absolute; left: -6px; top: 0; width: 12px; height: 12px; background: var(--cob); transform: rotate(45deg); }
.ctariff p { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.ctariff p b { color: var(--ink); }
.opts { display: grid; gap: 10px; }
.opts--size { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.opt__b { display: grid; gap: 4px; height: 100%; padding: 14px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; transition: border-color .25s, background .25s, transform .3s var(--ease); }
.opts--size .opt__b { justify-items: center; text-align: center; }
.opt__b .sizebox { width: 70px; height: 70px; transition: transform .5s var(--ease); }
.opt__b b { font: 500 15px/1.2 var(--font-head); }
.opt__b small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.opt:hover .opt__b { border-color: var(--sky); }
.opt input:checked + .opt__b { border-color: var(--cob); background: var(--ice); box-shadow: inset 0 0 0 1px var(--cob); }
.opt input:checked + .opt__b .sizebox { transform: translateY(-4px) scale(1.06); }
.opt input:focus-visible + .opt__b { outline: 2px solid var(--cob); outline-offset: 2px; }
.opt--row .opt__b { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 14px 16px; }
.opt--row .opt__b small { grid-column: 1; }
.opt--row .opt__b em { grid-column: 2; grid-row: 1 / 3; font: 500 16px/1 var(--font-head); font-style: normal; }
.opts--dlv { grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
.checks { display: grid; gap: 10px; margin-top: 6px; }
.chk { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 16px; }
.chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cob); flex: none; }
.chk em { font-style: normal; color: var(--muted); font-size: 14px; margin-left: 4px; }
.calc__res { position: sticky; top: calc(var(--top) + 18px); }
.res { padding: 0 24px 22px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; }
.res__head { display: flex; justify-content: space-between; align-items: center; margin: 0 -24px 18px; padding: 14px 24px; background: var(--ink); color: #fff; }
.res__head p { margin: 0; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.res__head .barcode { color: var(--sky); }
.res__tariff { padding: 6px 10px; background: var(--cob); border-radius: 2px; font: 500 13px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.res__k { margin: 0 0 6px; font: 400 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.res__total { margin: 0; font: 500 clamp(40px, 3.6vw, 54px)/1 var(--font-head); letter-spacing: -.03em; white-space: nowrap; }
.res__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; padding: 16px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.res__v { margin: 0; font: 500 24px/1 var(--font-head); color: var(--cob); white-space: nowrap; }
.stack { position: relative; height: 16px; border-radius: 2px; background: var(--soft); overflow: hidden; margin-bottom: 8px; }
.stack i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transition: transform .7s var(--ease); }
.res__tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.res__tbl th, .res__tbl td { padding: 8px 0; border-bottom: 1px solid var(--soft); text-align: left; font-weight: 400; }
.res__tbl th span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.res__tbl td { text-align: right; font-family: var(--font-head); white-space: nowrap; }
.res__tbl td small { color: var(--muted); font: 400 12px/1 var(--font-mono); margin-left: 8px; display: inline-block; width: 34px; }
.res__tbl tr.is-min th { color: var(--muted); font-style: italic; }
.res__rack { margin: 16px -24px; padding: 14px 24px; background: var(--navy); color: #fff; }
.rackcv { display: block; width: 100%; height: 190px; }
.res__vol { margin: 6px 0 0; font: 400 13px/1.4 var(--font-mono); color: var(--sky); }
.res__btns { display: grid; gap: 10px; }
.res__btns .btn { font-size: 13px; }
.cbar { display: none; }
.how { background: var(--white); }
.how__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.how__list li { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--line); }
.how__list b { font: 500 18px/1.2 var(--font-head); }
.how__list span { color: var(--muted); font-size: 16px; }

/* 404 и источники */
.cr-list a { white-space: nowrap; }
.cr-list li > span { line-height: 1.7; }
.phero--404 { min-height: 70vh; padding-top: 60px; }
.crumbs + .page-title { font-family: var(--font-head); }
body[data-page="credits"] main { padding-bottom: 80px; }
body[data-page="credits"] .page-title { font-size: clamp(36px, 5vw, 64px); }

/* курсор-сканер */
.scan { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .3s; }
.scan.on { opacity: 1; }
.scan i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 2px solid var(--cob); will-change: transform; }
.scan i:nth-child(1) { border-right: 0; border-bottom: 0; } .scan i:nth-child(2) { border-left: 0; border-bottom: 0; }
.scan i:nth-child(3) { border-right: 0; border-top: 0; } .scan i:nth-child(4) { border-left: 0; border-top: 0; }
.scan b { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--cob); border-radius: 50%; will-change: transform; }
.scan.inv i { border-color: #fff; } .scan.inv b { background: #fff; }
@media (hover: hover) and (pointer: fine) { html.has-scan, html.has-scan a, html.has-scan button, html.has-scan label { cursor: none; } html.has-scan input, html.has-scan textarea { cursor: text; } }

/* ——— адаптив ——— */
@media (max-width: 1280px) {
  .top__tel { display: none; }
  .nav { margin-left: auto; }
  .nav a { padding: 10px 9px; font-size: 14.5px; }
  .calc__grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .opts--size { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: block; }
  .top__calc { margin-left: auto; }
  .svc__box { grid-template-columns: 1fr; }
  .svc__tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .svc__tabs::-webkit-scrollbar { display: none; }
  .svc__tab { flex: 0 0 210px; scroll-snap-align: start; }
  .wires { grid-template-columns: 1fr 200px 1fr; gap: 50px; }
  .tcards { grid-template-columns: 1fr; max-width: 640px; }
  .tcard--hit { transform: none; }
  .sizes__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day__wrap { grid-template-columns: 1fr; justify-items: center; }
  .dial { max-width: 340px; }
  .day__list { width: 100%; }
  .calc__grid { grid-template-columns: 1fr; }
  .calc__res { position: static; }
  .res { max-width: 640px; }
  .onb__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 900px) {
  :root { --pad: 24px; }
  .sh__row, .manifest__grid, .mini__grid, .store__grid, .faq-grid, .cta__grid, .phero__grid, .inc__grid, .price__grid, .split__grid, .day__grid, .plan__grid, .api__grid, .ct__grid { grid-template-columns: 1fr; }
  .sh__link { justify-self: start; }
  .manifest__fig { max-width: 340px; }
  .phero__art { width: min(100%, 420px); }
  .phph { margin: 10px auto 0 34px; }
  .who__grid { grid-template-columns: 1fr; }
  .xgrid { grid-template-columns: 1fr 1fr; }
  .nums__row { grid-template-columns: 1fr 1fr; }
  .nums__row > div:nth-child(2) { border-right: 0; }
  .nums__row > div:nth-child(n+3) { margin-top: 26px; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps__line { display: none; }
  .slist__a { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .slist__s, .slist__go { display: none; }
  .case { grid-template-columns: 1fr; }
  .case__label { border-right: 0; border-bottom: 2px solid var(--ink); }
  .wb__grid { grid-template-columns: 1fr 1fr; }
  .wb__c { grid-column: auto !important; border-right: 1px solid var(--ink) !important; }
  .wb__c:nth-child(even) { border-right: 0 !important; }
  .wb__c--bar { order: 9; grid-column: 1 / -1 !important; border-right: 0 !important; }
  .gal__a { grid-column: 1 / -1; } .gal__b { grid-column: 1 / 7; grid-row: auto; aspect-ratio: 3 / 4; } .gal__c { grid-column: 7 / 13; aspect-ratio: 3 / 4; } .gal__d { grid-column: 1 / -1; }
  .cond__grid { grid-template-columns: 1fr 1fr; }
  .team__grid { grid-template-columns: 1fr 1fr; }
  .how__list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --pad: 16px; --top: 64px; }
  body { font-size: 16px; }
  .logo__s { display: none; }
  .top__calc { height: 40px; padding: 0 12px; font-size: 12px; }
  .top__in { gap: 10px; }
  .burger { width: 42px; height: 42px; }
  .burger i:first-child { top: 15px; } .burger i:last-child { top: 24px; }
  .sec { padding: 72px 0; }
  .sh__t { font-size: clamp(30px, 8.4vw, 40px); }
  .sh__lead { font-size: 16px; }
  /* главный экран: текст, затем живой склад, затем цифры */
  .hero { min-height: 0; justify-content: flex-start; }
  .hero__cv { position: relative; order: 2; height: 330px; margin-top: 8px; }
  .hero__veil { display: none; }
  .hero__grid { order: 1; padding-top: 34px; }
  .hero__t { font-size: clamp(36px, 10.6vw, 46px); }
  .hero__lead { font-size: 17px; margin: 20px 0 24px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__stats { order: 3; padding-bottom: 28px; }
  .hero__stats dl { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .hero__hint { display: none; }
  .tapes { height: 112px; }
  .tape { height: 40px; } .tape--a { top: 22px; } .tape--b { top: 58px; height: 34px; }
  .tape__run i { font-size: 16px; padding: 0 14px; }
  .manifest__t { font-size: 25px; }
  .nums dt { font-size: 46px; }
  .svc__panel { grid-template-columns: 1fr; min-height: 0; }
  .svc__img { height: 230px; }
  .svc__n { font-size: 90px; }
  .svc__body { padding: 24px 20px; }
  .svc__t { font-size: 25px; }
  .svc__tab { flex-basis: 180px; padding: 12px 14px; }
  .svc__tab small { display: none; }
  /* конвейер на телефоне: сцена сверху, карточка шага снизу, камера едет за посылкой */
  .belt { height: 560vh; }
  .belt__head { padding-top: 18px; }
  .belt__t { font-size: 22px; max-width: 20ch; }
  .belt__head .addr { margin-bottom: 10px; }
  .belt__steps { left: 16px; right: 16px; width: auto; top: auto; bottom: 18px; height: 236px; }
  .bstep { top: auto; bottom: 0; }
  .bstep { padding: 16px 18px; }
  .bstep__n { font-size: 34px; }
  .bstep__t { font-size: 23px; margin-bottom: 6px; }
  .bstep__p { font-size: 15px; margin-bottom: 0; }
  .bstep__m { margin-top: 10px; padding-top: 8px; font-size: 12px; }
  .belt__rail { display: none; }
  .belt__hint, .belt__note { display: none; }
  .mini__card { padding: 22px 18px; }
  .mini__out { grid-template-columns: 1fr 1fr; }
  .mini__out > div:last-child { grid-column: 1 / -1; }
  .mini__out b { font-size: 24px; }
  .specs dd { font-size: 19px; }
  .wires { grid-template-columns: 1fr; gap: 46px; }
  .wires__col--l { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wires__col--r { grid-template-columns: 1fr; }
  .wnode { padding: 14px; }
  .wnode b { font-size: 16px; }
  .wnode small { font-size: 13px; display: block; line-height: 1.3; }
  .wires__hub .iso { width: 110px; }
  .who__body { padding: 22px 18px; }
  .who__t { font-size: 24px; }
  .tcard__t { font-size: 36px; }
  .faq summary { font-size: 18px; }
  .cta__card { padding: 0 18px 20px; }
  .cta__lbl { margin: 0 -18px 18px; padding: 12px 18px; }
  .foot { padding-top: 50px; }
  .wb__head { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .wb__type { display: none; }
  .wb__no { font-size: 10px; letter-spacing: .1em; }
  .wb__c { padding: 18px 16px; }
  .wb__v { font-size: 16px; }
  .wb__grid { grid-template-columns: 1fr; }
  .wb__c { border-right: 0 !important; }
  .wb__foot { padding: 14px 16px; }
  .phero .crumbs { padding-bottom: 22px; }
  .phero__t { font-size: clamp(32px, 9.2vw, 42px); }
  .phero__lead { font-size: 17px; }
  .phero__cta .btn { flex: 1 1 100%; }
  .phero__art { width: min(100%, 330px); margin-top: 8px; }
  .phero__art:has(.phph) { width: 100%; justify-self: stretch; margin-top: 18px; }
  .phph { width: auto; margin: 0 8px; }
  .phero__grid { gap: 20px; }
  .phph__frame { aspect-ratio: 4 / 3; }
  .phph__scan { inset: -8px; }
  .phph__scan i { width: 16px; height: 16px; }
  .phph__lbl { left: 10px; bottom: -18px; padding: 10px 12px 8px; }
  .phph__tag { font-size: 15px; }
  .phero { padding-bottom: 72px; }
  .foot__dev { padding: 16px 0 90px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps__i { display: grid; grid-template-columns: 46px 1fr; gap: 0 18px; padding-bottom: 22px; }
  .steps__i .steps__n { grid-row: span 2; margin: 0; }
  .steps__i h3 { font-size: 20px; margin-bottom: 4px; }
  .band { height: 72vh; min-height: 460px; }
  .band__sla { grid-template-columns: 1fr; gap: 18px; }
  .pains__i { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; }
  .pains__ar { display: none; }
  .pains__b { grid-column: 2; }
  .xgrid { grid-template-columns: 1fr; }
  .slist__a { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 22px 0; }
  .slist__t { font-size: 28px; }
  .slist__p { font-size: 14px; max-width: 110px; }
  .slist__float { display: none; }
  .pn__a span { font-size: 20px; }
  .onb__list { grid-template-columns: 1fr; }
  .onb__i { padding-right: 0; }
  .sizes__row { grid-template-columns: 1fr 1fr; }
  .szcard { padding: 14px; }
  .szcard .sizebox { width: 70px; height: 70px; }
  .gal__grid { gap: 8px; }
  .cond__grid { grid-template-columns: 1fr; }
  .case__label, .case__body { padding: 20px 18px; }
  .case__t { font-size: 24px; }
  .ct__cards { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tm__n { font-size: 21px; }
  .tm__t { font-size: 14px; }
  .fbar__count { width: 100%; margin: 6px 0 0; }
  .calc { padding: 32px 0 120px; }
  .cblock { padding: 22px 16px; }
  .cblock legend { font-size: 21px; }
  .cf__row { align-items: flex-start; }
  .cf__row label { font-size: 15px; }
  .cf__num input { width: 88px; font-size: 16px; }
  .opts--size { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .opt__b { padding: 10px 6px; }
  .opts--size .opt__b small:not(.opt__ex) { font-size: 11px; }
  .opt__ex { display: none; }
  .opt__b .sizebox { width: 54px; height: 54px; }
  .opt__b b { font-size: 13px; }
  .opts--dlv { grid-template-columns: 1fr; }
  .res { padding: 0 16px 18px; }
  .res__head, .res__rack { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .cbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--navy); color: #fff; border-radius: 8px; box-shadow: 0 20px 40px rgba(7,19,52,.35); transform: translateY(140%); transition: transform .45s var(--ease); }
  .cbar.on { transform: none; }
  .cbar small { display: block; font: 400 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 4px; }
  .cbar b { font: 500 18px/1 var(--font-head); white-space: nowrap; }
  .cbar__go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--cob); border-radius: 4px; color: #fff; text-decoration: none; font: 500 12px/1 var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
  .cbar__go .ico { width: 14px; height: 14px; }
  .foot__big { margin-top: 30px; }
  .dial { max-width: 290px; }
}

/* ——— без движения: всё видно сразу, конвейер — обычный список ——— */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .pl { display: none; }
  html.js [data-split] .w, html.js [data-in] { opacity: 1; transform: none; }
  .belt { height: auto; }
  .belt__sticky { position: relative; top: 0; height: auto; padding-bottom: 40px; }
  .belt__cv { position: relative; height: 46vh; }
  .belt__steps { position: relative; left: auto; bottom: auto; height: auto; width: min(var(--wrap), 100% - 2 * var(--pad)); margin: 20px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .bstep { position: relative; opacity: 1; visibility: visible; transform: none; }
  .belt__rail, .belt__hint { display: none; }
  .fw { opacity: 1; }
  .iso-float, .iso-hl polygon, .iso-path, .iso-loop, .iso-flap, .iso-speed line { animation: none; }
  html.js .phero__art[data-in] .phph__frame, html.js .phero__art[data-in] .phph__lbl, html.js .phero__art[data-in] .phph__scan i { clip-path: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) { .belt__steps { grid-template-columns: 1fr; } }