/* KAR SYSTEM — первый экран в графите (вариант для согласования).
   Подключается после style.css: меняет только цвет первого экрана и вход; второй экран и меню не трогает. */
:root{--line-d:rgba(230,227,224,.16)}
.s1-pin,.s1{background:var(--graphite)}
.s1{color:var(--sand);z-index:3}           /* фиксированная сцена внутри экрана остаётся над вторым экраном, когда панель уходит вниз */
.s1 .hdr{border-bottom-color:var(--line-d)}
.s1 .hdr-logo{border-right-color:var(--line-d)}
.s1 .btn{border-color:rgba(230,227,224,.45)}
.s1 .btn-line{color:var(--sand)}
.s1 .btn-line:hover{background:var(--sand);color:var(--graphite)}
.s1 .btn-fill{background:var(--mint);border-color:var(--mint);color:var(--graphite)}
.s1 .btn-fill:hover{background:#96F7C6}
.s1 .btn-menu{color:var(--sand);border-color:rgba(230,227,224,.45)}
.s1 .btn-menu .ico{border-left-color:rgba(230,227,224,.45)}
.s1 .btn-menu:hover{background:rgba(230,227,224,.07)}
.s1-text{border-right-color:var(--line-d)}
.s1-tag{color:var(--mint)}
.s1-lead{color:var(--sand)}
.s1-flow{border-top-color:var(--line-d)}
.s1-flow p{color:var(--grey)}
.s1-flow .mono{color:var(--grey)}
/* чертёжное поле на графите: та же миллиметровка, светлыми линиями на минимальной прозрачности */
.s1-stage{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23E6E3E0' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23E6E3E0' stroke-opacity='.05' stroke-width='.8' stroke-dasharray='2 2'/%3E%3C/svg%3E")}
/* вход: без заливки экрана — графитовая подложка просто растворяется после щелчка знака */
.intro{-webkit-mask-image:none;mask-image:none;transition:opacity .5s}
.intro.fade{opacity:0}
@media (max-width:720px){
  .s1-text{border-bottom-color:var(--line-d)}
}

/* правки: логотип в шапке — только KAR; одна кнопка «Связаться» в фирменном цвете; тексты — компактной парой под заголовком */
.s1 .hdr-logo svg{height:16px}
.hdr-logo svg .sign-hit{cursor:pointer}
.s1-text{justify-content:flex-start}
.s1-lead{font:500 clamp(16px,1.2vw,19px)/1.45 var(--f-text);max-width:34ch}
.s1-def{margin:14px 0 0;font:400 clamp(14px,1vw,16px)/1.5 var(--f-text);color:var(--grey);max-width:36ch}
body.pre .s1-def{opacity:0}
.s1-def{transition:opacity .6s}
.menu .btn-fill{background:var(--mint);border-color:var(--mint);color:var(--graphite)}

/* заголовок встаёт на первую линию чертёжной сетки справа (шаг сетки 100px от верха поля) */
.s1-text{padding-top:100px}
/* определение системы — моноширинный мятный «набор», как терминал: печатается и набирается снова с начала */
.s1-def{font:400 clamp(13px,.95vw,15px)/1.6 var(--f-mono);letter-spacing:.01em;color:var(--mint);min-height:4.8em}
.s1-def .caret{display:inline-block;width:.6em;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--mint);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (max-width:720px){ .s1-text{padding-top:clamp(28px,5vh,64px)} }

/* курсор: мятная стрелка — угловой элемент знака KAR — и тонкий световой след за ней (только мышь) */
@media (pointer:fine){
  html.kc, html.kc *{cursor:none!important}
}
.kcur{position:fixed;left:0;top:0;width:19px;height:18px;z-index:1000;pointer-events:none;will-change:transform;opacity:0;transition:opacity .2s}
.kcur svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .2s cubic-bezier(.2,.7,.2,1);transform-origin:0 0}
.kcur path{fill:var(--mint);transition:fill .2s}
.kcur.hot svg{transform:scale(1.35)}
.kcur.dark path{fill:var(--graphite)}
.ktrail{position:fixed;inset:0;z-index:999;pointer-events:none}

/* первый экран — около 70% высоты окна: снизу всегда виден следующий экран, система читается как отдельная плашка.
   Без «прилипания»: сборка в панель идёт по времени и по прокрутке. */
.s1-pin{height:auto}
.s1{position:relative;height:72vh;min-height:600px}
/* типографика крупнее, с ясной иерархией: заголовок → утверждение → определение (моно) → подпись */
.s1-title svg{max-width:620px}
.s1-tag{font-size:15px;margin:20px 0 34px}
.s1-lead{font:500 clamp(18px,1.5vw,24px)/1.4 var(--f-text);max-width:30ch}
.s1-def{font-size:clamp(14px,1.08vw,17px);margin-top:18px;max-width:40ch}
:root{--split:clamp(360px,41vw,680px)}

/* ============ ЭКРАН 2 — правки ============ */
/* KAR CONSTRUCTION: построчное раскрытие мятной плашкой */
.s2-title{opacity:1!important;transform:none!important;color:#000}
.s2-title .wl{position:relative;display:block;width:max-content}
.s2-title .tx{opacity:0}
.s2-title .bar{position:absolute;left:-.05em;right:-.05em;top:.04em;bottom:.02em;background:var(--mint);transform:scaleX(0);transform-origin:left}
/* подпись под заголовком — моноширинная, мятная */
.s2-desc{font-family:var(--f-mono);color:var(--mint)}
/* виды работ — «печатная машинка», чёрный текст, мятный курсор */
.s2-scope{font-family:var(--f-mono);color:#000;min-height:3.2em}
.s2-scope .caret{display:inline-block;width:.6em;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--mint);animation:caret 1s steps(1) infinite}
/* подпись под KAR CONSTRUCTION — тем же шрифтом и размером, что «Connect to the System» под KAR SYSTEM */
.s2-desc{font:400 15px var(--f-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--mint);margin:20px 0 34px}
/* миллиметровка под фотографией — тёмные линии, как на чертеже: фото лежит на листе проекта (до вертикальной направляющей) */
.s2-grid::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(-1 * var(--pad));top:-40px;bottom:-40px;width:calc(55% + 10px + var(--pad));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23221F20' stroke-opacity='.14' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23221F20' stroke-opacity='.09' stroke-width='.8' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  background-position:-1px -1px}
.s2-photo,.s2-text{position:relative;z-index:1}
@media (max-width:1100px){ .s2-grid::before{width:calc(100% + 2 * var(--pad));bottom:auto;height:calc(60vh + 80px)} }

/* объекты: квадратные салатовые макеты без подписей; при наведении — крупные «пиксели» реального фото */
.cells{border:0;gap:12px}
.cell.pix{padding:0;border:0;aspect-ratio:1;background:var(--mint);overflow:hidden;cursor:none}
.cell.pix canvas{display:block;width:100%;height:100%}
.cell.pix svg{width:78%;margin:22% auto 0;display:block}
.cell.pix .srf{fill:transparent}
.cell.pix:hover .srf{fill:transparent}
/* набираемые строки на обоих экранах — один размер, интерлиньяж и разрядка (как на первом экране) */
.s2-scope{font-size:clamp(14px,1.08vw,17px);line-height:1.6;letter-spacing:.01em}

/* ============ ЭКРАН 3 — ЧТО МЫ ДЕЛАЕМ ============ */
.s3{position:relative;background:var(--graphite);color:var(--sand);padding:120px var(--pad) 170px}
.s3-head{display:grid;gap:22px;margin-bottom:56px}
.s3-kicker{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.18em;color:var(--mint)}
.s3-title{margin:0;font:600 clamp(24px,2.3vw,38px)/1.2 var(--f-text);max-width:34ch}
.s3-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,80px);align-items:stretch}
/* перечень с тонкими разделителями */
.s3-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.s3-item{position:relative;border-bottom:1px solid var(--line-d)}
.s3-item::before,.s3-list::before{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line-d);transform-origin:left;transform:scaleX(var(--d,1))}
.s3-btn{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:6px;row-gap:8px;width:100%;padding:26px 0;background:none;border:0;color:inherit;text-align:left;cursor:none;font:inherit}
.s3-num{grid-row:1/3;font-size:15px;color:var(--grey);padding-top:8px;transition:color .3s}
.s3-name{font:700 clamp(26px,2.6vw,42px)/1 var(--f-head);letter-spacing:.01em;text-transform:uppercase;color:var(--grey);transition:color .3s}
.s3-sub{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--steel);transition:color .3s}
.s3-btn:hover .s3-name{color:#B9F5D2}
.s3-item.open .s3-name{color:var(--sand)}
.s3-item.open .s3-num,.s3-item.open .s3-sub{color:var(--mint)}
/* раскрытие — плавная высота через grid-rows */
.s3-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.s3-body>div{overflow:hidden;padding-left:62px}
.s3-item.open .s3-body{grid-template-rows:1fr}
.s3-body p{margin:0 0 18px;font:500 clamp(15px,1.1vw,17px)/1.55 var(--f-text);color:var(--sand);max-width:44ch}
.s3-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px;font-size:clamp(13px,.95vw,15px);color:var(--grey)}
.s3-points li{position:relative;padding-left:22px}
.s3-points li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:var(--mint);
  clip-path:polygon(0 0,57% 0,85% 30%,15% 30%,15% 100%,0 70%)}   /* угловой элемент знака */
/* иллюстрация на чертёжном поле */
.s3-art{position:relative;min-height:560px;border:1px solid var(--line-d);background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23E6E3E0' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23E6E3E0' stroke-opacity='.045' stroke-width='.8' stroke-dasharray='2 2'/%3E%3C/svg%3E");background-position:-1px -1px}
.s3-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.s3-art .ln{fill:none;stroke:var(--sand);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.s3-art .dim{opacity:.38}
.s3-art .dash{stroke-dasharray:5 4}
.s3-art .dot{stroke-dasharray:1.5 4}
.s3-art .fm{fill:rgba(121,239,179,.2);stroke:var(--mint)}
.s3-art .fs{fill:var(--mint);stroke:var(--mint)}
.s3-art .fd{fill:#292627}
.s3-art .lm{stroke:var(--mint)}
.s3-art text{font:400 10.5px var(--f-mono);fill:var(--grey);letter-spacing:.06em}
.s3-art .cap{fill:var(--mint)}
/* общая плашка */
.s3-plate{margin-top:56px;display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,80px);align-items:center;padding:30px 32px;border:1px solid var(--line-d);background:#292627;position:relative}
.s3-plate::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;background:var(--mint)}
.s3-plate-title{margin:0;font:700 clamp(18px,1.5vw,24px)/1.2 var(--f-head);text-transform:uppercase;letter-spacing:.01em}
.s3-plate-text{margin:0;font:500 clamp(15px,1.1vw,17px)/1.55 var(--f-text);color:var(--grey);max-width:56ch}
/* появление */
.s3 .s3-head>*,.s3-btn,.s3-plate{transition:opacity .7s,transform .7s}
.s3:not(.in) .s3-head>*,.s3:not(.in) .s3-btn,.s3:not(.in) .s3-plate{opacity:0;transform:translateY(12px)}
.s3.in .s3-item:nth-child(2) .s3-btn{transition-delay:.1s}.s3.in .s3-item:nth-child(3) .s3-btn{transition-delay:.2s}.s3.in .s3-plate{transition-delay:.35s}
@media (max-width:900px){
  .s3-head,.s3-grid,.s3-plate{grid-template-columns:1fr}
  .s3-grid>.s3-art{display:none}
  .s3-item .s3-art{display:block;min-height:0;aspect-ratio:760/620;margin:0 0 28px}
  .s3-body>div{padding-left:0}
  .s3{padding-bottom:140px}
}
/* разделители прорисовываются слева направо при появлении блока */
.s3-list{position:relative;border-top:0}
.s3-item{border-bottom:0}
.s3-list::before{top:0}
.s3-item::before{content:none}
.s3-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-d);transform-origin:left;transform:scaleX(var(--d,0));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.s3-list::before{transform:scaleX(var(--d,0));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.s3-item::after,.s3-list::before{transform:none}}

/* --- экран 3, версия 2: иконка + название услуги; лист состава работ --- */
.s3-btn{grid-template-columns:1fr;row-gap:12px}
.s3-svc{display:flex;align-items:center;gap:12px;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--steel);transition:color .3s}
.s3 .ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.s3-item.open .s3-svc{color:var(--mint)}
.s3-btn:hover .s3-svc{color:#B9F5D2}
.s3-body>div{padding-left:0}
.s3-body p{margin-bottom:28px}
/* линия прогресса под открытым пунктом — как в SiteAssist */
.s3-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left;z-index:1}
.s3-item:not(.open) .s3-prog{opacity:0}
/* правая часть — лист «Состав услуг и работ»: светлая бумага с чёрной пунктирной миллиметровкой */
.s3-art{background:none;border:0;min-height:0;display:flex}
.s3-sheet{flex:1;position:relative;color:var(--graphite);padding:34px 40px 30px;background-color:var(--sand);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23221F20' stroke-opacity='.14' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23221F20' stroke-opacity='.09' stroke-width='.8' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  background-position:-1px -1px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.s3-sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mint)}
.sh-head{padding-bottom:22px;border-bottom:1px solid var(--graphite);margin-bottom:6px}
.sh-kick{margin:0 0 14px;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--steel)}
.sh-title{display:flex;align-items:center;gap:14px;margin:0;min-height:1.3em;font:700 clamp(18px,1.5vw,24px)/1.2 var(--f-head);text-transform:uppercase;letter-spacing:.01em}
.sh-title .ico{width:28px;height:28px;color:var(--graphite)}
.sh-title .caret{display:inline-block;width:.5em;height:.9em;background:var(--mint);animation:caret 1s steps(1) infinite;margin-left:-6px}
.sh-list{list-style:none;margin:0;padding:0}
.sh-list li{display:grid;grid-template-columns:34px 30px 1fr;gap:14px;align-items:start;padding:16px 0;border-bottom:0;background:linear-gradient(90deg,#3FD98C 55%,transparent 0) bottom left/9px 1.5px repeat-x}
.sh-n{font-size:13px;color:var(--steel);padding-top:3px}
.sh-list .ico{width:22px;height:22px;color:var(--graphite)}
.sh-list b{display:block;font:600 16px/1.3 var(--f-text);margin-bottom:5px}
.sh-list span{display:block;font:400 clamp(13px,.95vw,15px)/1.5 var(--f-mono);color:#4A4647}
.sh-foot{margin:18px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--steel)}
@media (max-width:900px){ .s3-sheet{padding:24px 20px} .s3-item .s3-art{aspect-ratio:auto;margin:0 0 28px} }
.s3-art .s3-sheet svg{position:static;inset:auto;overflow:visible}
.s3-art .sh-list svg{width:22px;height:22px}
.s3-art .sh-title svg{width:28px;height:28px}

/* --- КОМПЛЕКТУЕМ: ноутбук с процессом закупки --- */
.sh-wait{margin:22px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--steel)}
.lap{margin:26px auto 0;width:100%;max-width:820px}
.lap-scr{position:relative;border:10px solid #1B1819;border-bottom-width:14px;border-radius:16px 16px 4px 4px;background:#1B1819;overflow:hidden;box-shadow:0 0 0 1px #3A3637}
.lap-base{height:14px;margin:0 -5%;background:linear-gradient(#CFCBC7,#A9A5A1);border-radius:0 0 14px 14px;position:relative}
.lap-base::before{content:"";position:absolute;left:42%;right:42%;top:0;height:5px;background:#9D9995;border-radius:0 0 6px 6px}
.lap-in{position:absolute;left:0;top:0;width:760px;height:452px;transform-origin:0 0;background:#F6F5F3;color:var(--graphite);font:500 13px var(--f-text);overflow:hidden}
.lap-in .ico{width:16px;height:16px;flex:none;color:var(--graphite)}
.ui-top{display:flex;align-items:center;gap:14px;height:38px;padding:0 16px;border-bottom:1px solid #E2DFDB;background:#fff}
.ui-top b{font:600 13px var(--f-text)}
.ui-dots{display:flex;gap:6px}.ui-dots i{width:9px;height:9px;border-radius:50%;background:#DDD9D5}
.ui-kar{margin-left:auto;font-size:10px;letter-spacing:.16em;color:var(--steel)}
.ui-steps{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid #E2DFDB}
.ui-steps span{display:flex;align-items:center;gap:7px;flex:1;font:500 11px var(--f-text);color:#A09C98;padding-top:8px;border-top:2px solid #E2DFDB}
.ui-steps span i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor}
.ui-steps .done{color:var(--graphite);border-top-color:var(--mint)}.ui-steps .done i{background:var(--mint);border-color:#3FD98C}
.ui-steps .act{color:var(--graphite);border-top-color:var(--graphite)}
.sk{display:inline-block;height:8px;border-radius:4px;background:#E3E0DC;vertical-align:middle}
.sk.dk{background:#C9C5C1}
.ok{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--mint);position:relative;flex:none}
.ok::after{content:"";position:absolute;left:4px;top:3px;width:4px;height:6px;border:solid var(--graphite);border-width:0 1.6px 1.6px 0;transform:rotate(40deg)}
/* финал */
.ui-final{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;padding:22px 20px}
.uf-k{margin:0 0 8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.uf-big{margin:0 0 18px;font:700 22px/1.15 var(--f-head);text-transform:uppercase}
.uf-docs{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:11.5px}
.uf-docs li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #E2DFDB;border-radius:8px}
.uf-r{background:#fff;border:1px solid #E2DFDB;border-radius:10px;padding:8px 14px}
.uf-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #EFEDEA;font-size:12px}
.uf-row span{flex:1}
.uf-sum{display:flex;justify-content:space-between;align-items:center;padding:12px 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
/* чертёж */
.ui-plan{position:relative;padding:14px 20px}
.ui-plan svg{width:100%;height:300px}
.ui-plan .pl{fill:none;stroke:var(--graphite);stroke-width:2.2}
.ui-plan .pm{fill:rgba(121,239,179,.25);stroke:#3FD98C;stroke-width:1.6;fill-opacity:0}
.ui-plan .pm.d{fill-opacity:1}
.sc-plan .pm{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.4s .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ui-tags{position:absolute;right:28px;top:26px;display:grid;gap:8px;font-size:11px}
.ui-tags span{background:#fff;border:1px solid #3FD98C;padding:6px 10px;border-radius:6px;opacity:0;animation:pop .4s forwards}
.ui-tags span:nth-child(1){animation-delay:.8s}.ui-tags span:nth-child(2){animation-delay:1.1s}.ui-tags span:nth-child(3){animation-delay:1.4s}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ведомость */
.ui-tbl{margin:14px 16px;background:#fff;border:1px solid #E2DFDB;border-radius:8px;overflow:hidden}
.ui-tbl .th,.ui-tbl .tr{display:grid;grid-template-columns:2.2fr .7fr 1fr 1fr 1fr;align-items:center;padding:0 14px;height:40px;border-bottom:1px solid #EFEDEA}
.ui-tbl .th{height:32px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);background:#FAF9F7}
.ui-tbl .tr span:first-child{display:flex;align-items:center;gap:8px;font-size:12px}
.ui-tbl .tr{opacity:0;animation:pop .35s forwards;animation-delay:calc(var(--i) * .28s + .2s)}
.ui-tbl .ph{display:block;width:30px;height:22px;border-radius:4px;background:linear-gradient(135deg,#CFE9DB,#B9DCC8)}
.ui-tbl .lk{font-size:11px;color:#2FB874}
/* поставщики */
.ui-vend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px 16px}
.vc{position:relative;background:#fff;border:1px solid #E2DFDB;border-radius:10px;padding:16px;opacity:0;animation:pop .4s forwards;animation-delay:calc(var(--i) * .25s + .1s)}
.vc p{margin:0 0 14px;font-size:12px;letter-spacing:.06em}
.vm{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #EFEDEA;font-size:11.5px;color:var(--steel)}
.vm .st{letter-spacing:2px;color:var(--graphite);font-size:10px}
.vc.win{animation:pop .4s forwards,win .5s 1.6s forwards}
@keyframes win{to{border-color:#3FD98C;box-shadow:0 0 0 3px rgba(121,239,179,.35)}}
.vc em{position:absolute;left:16px;right:16px;bottom:-12px;text-align:center;font-style:normal;font-size:10px;letter-spacing:.1em;background:var(--mint);padding:5px;border-radius:5px;opacity:0;animation:pop .3s 1.9s forwards}
/* заказ */
.ui-order{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;padding:18px 24px}
.pdf{background:#fff;border:1px solid #E2DFDB;box-shadow:0 10px 24px -14px rgba(0,0,0,.25);padding:18px;display:grid;gap:10px;animation:pop .4s forwards}
.pdf p{margin:0 0 4px;font-size:10px;letter-spacing:.16em}
.pdf .pr{display:flex;justify-content:space-between;padding-top:8px;border-top:1px dashed #DAD6D2}
.pdf .tot{border-top:1.5px solid var(--graphite)}
.send{display:grid;gap:14px;justify-items:start}
.btn-send{font:600 14px var(--f-text);padding:14px 22px;border:0;border-radius:8px;background:var(--graphite);color:#fff;transition:transform .15s,background .3s}
.clicked .btn-send{transform:scale(.94);background:#3FD98C;color:var(--graphite)}
.sent{margin:0;font-size:11.5px;color:#2FB874;opacity:0;transition:opacity .4s .3s}
.clicked .sent{opacity:1}
/* поставка */
.ui-ship{padding:26px 24px}
.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:28px}
.track .tr-line{position:absolute;left:12%;right:12%;top:7px;height:2px;background:#E2DFDB}
.track .tr-line::after{content:"";position:absolute;inset:0;background:#3FD98C;transform-origin:left;transform:scaleX(0);animation:fillx 1.8s .2s forwards}
@keyframes fillx{to{transform:scaleX(1)}}
.track span{position:relative;display:grid;justify-items:center;gap:10px;font-size:11.5px}
.track span i{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #CFCBC7;animation:dot .3s forwards;animation-delay:calc(var(--i) * .5s + .3s)}
@keyframes dot{to{background:var(--mint);border-color:#3FD98C}}
.ship-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.doc{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E2DFDB;border-radius:8px;padding:14px;font-size:12px;opacity:0;animation:pop .35s forwards;animation-delay:calc(var(--i) * .3s + 1.6s)}
.doc b{flex:1;font-weight:600}

/* --- РЕАЛИЗУЕМ: реализованный объект, поверх — его белый чертёж; при наведении чертёж становится мятным --- */
/* ВРЕМЕННОЕ изображение (img/services/build-photo.jpg, чужой референс) — заменить фото объекта KAR */
.bld{position:relative;margin:26px 0 0;overflow:hidden;width:100%;height:clamp(360px,38vw,600px);background:#1B1819}
.bld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.bld .bld-ln{opacity:0;transition:opacity .6s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.bld:hover .bld-ln,.bld:focus .bld-ln,.bld.on .bld-ln{opacity:1}
.bld:hover img,.bld:focus img{transform:scale(1.02)}
.bld figcaption{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);background:rgba(34,31,32,.7);padding:5px 8px;transition:opacity .3s}
.bld:hover figcaption{opacity:0}
/* заголовок блока 3 — тем же стилем, что «Люди, инженерные решения…» на первом экране */
.s3-title{font:500 clamp(18px,1.5vw,24px)/1.4 var(--f-text);max-width:34ch}

/* --- плашка-схема входа: под ключ или с любого этапа --- */
.s3-plate{grid-template-columns:minmax(260px,4fr) 7fr auto;gap:clamp(24px,3vw,56px);padding:34px 32px}
.en-kick{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--mint)}
.en-cap{margin:0;min-height:2.6em;font:500 clamp(17px,1.35vw,22px)/1.3 var(--f-text);color:var(--sand);transition:opacity .3s}
.route{position:relative;height:96px;display:flex;align-items:center;justify-content:space-between}
.rt-line,.rt-fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line-d)}
.rt-fill{background:var(--mint);right:auto;width:0;box-shadow:0 0 10px rgba(121,239,179,.5)}
.rt-n{position:relative;z-index:1;padding:12px 18px;border:1px solid rgba(230,227,224,.22);background:#292627;
      font:400 13px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--grey);cursor:none;transition:color .35s,border-color .35s,background .35s}
.rt-n.on{color:var(--graphite);background:var(--mint);border-color:var(--mint)}
.rt-n.dim{opacity:.45}
.rt-arrow{position:absolute;z-index:2;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;overflow:visible;opacity:0}
.rt-arrow path{fill:var(--mint)}
.en-cta{background:var(--mint);border-color:var(--mint);color:var(--graphite);white-space:nowrap}
.en-cta:hover{background:#96F7C6}
@media (max-width:1100px){ .s3-plate{grid-template-columns:1fr} .en-cta{justify-self:start} }
@media (max-width:560px){ .rt-n{padding:10px 8px;font-size:10.5px;letter-spacing:.06em} }

/* --- плашка, версия 2: этапы слева направо, кнопки как в soft-touch панели --- */
.s3-plate{display:block;padding:30px 32px 34px}
.en-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.en-top .en-kick{margin:0}
.s3-plate .route{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:start;gap:18px;height:auto}
.st{display:grid;gap:10px;cursor:none}
.st .sec{display:flex;align-items:center;justify-content:center;min-height:72px;border-radius:14px;
  background:linear-gradient(180deg,#373334,#2D2A2B);border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.45);
  color:var(--grey);font:600 15px var(--f-text);letter-spacing:.14em;text-transform:uppercase;transition:background .6s,color .6s,opacity .5s,box-shadow .6s}
.st.on .sec{background:linear-gradient(180deg,#E8FCE2,#D3F5C7);color:var(--graphite);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(218,248,208,.4)}
.st[data-i="2"].on .sec{background:linear-gradient(180deg,#96F7C6,#6FE7AA);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 26px -8px rgba(121,239,179,.55)}
.st.dim .sec{opacity:.4}
.st-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);text-align:center;transition:color .5s}
.st.on .st-tag{color:var(--mint)}
.st-cap{margin:6px 0 0;min-height:2.8em;font:500 clamp(15px,1.15vw,18px)/1.4 var(--f-text);color:var(--sand);opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.st.in .st-cap{opacity:1;transform:none}
.rt-ar{width:22px;height:22px;margin-top:25px;justify-self:center;transform:rotate(135deg);overflow:visible;opacity:.35;transition:opacity .5s}
.rt-ar path{fill:var(--grey);transition:fill .5s}
.rt-ar.on{opacity:1}.rt-ar.on path{fill:var(--mint)}
.rt-ar.dim{opacity:.15}
@media (max-width:900px){
  .en-top{flex-direction:column;align-items:flex-start}
  .s3-plate .route{grid-template-columns:1fr;gap:10px}
  .rt-ar{transform:rotate(-135deg);margin:0}
  .st-cap{min-height:0}
}

/* --- два пути работы, компактно: подписи слева, одна кнопка-переключатель справа --- */
.s3-plate{display:grid;grid-template-columns:minmax(220px,4fr) 8fr;gap:clamp(24px,3vw,56px);align-items:center;padding:22px 28px;margin-top:40px}
.en-lbl p{margin:0;font:700 clamp(15px,1.15vw,19px)/1.3 var(--f-head);text-transform:uppercase;letter-spacing:.01em;color:var(--steel);transition:color .5s}
.en-lbl .lb-one{margin-top:4px}
.mode-all .lb-all{color:var(--mint)}
.mode-one .lb-one{color:var(--salad)}
.sw{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:54px;border:1.5px solid var(--mint);border-radius:14px;overflow:hidden;transition:border-color .5s}
.mode-one .sw{border-color:var(--salad)}
.sw-all{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 14px var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
  background:linear-gradient(180deg,#96F7C6,#6FE7AA);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:opacity .5s,transform .5s}
.mode-one .sw-all{opacity:0;transform:scaleX(.96)}
.sw-sec{position:relative;display:flex;align-items:center;justify-content:center;font:600 13px var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,background .45s,color .45s;cursor:none}
.sw-sec+.sw-sec::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:rgba(218,248,208,.35)}
.sw-sec.in{opacity:1;transform:none}
.sw-sec.on{background:linear-gradient(180deg,#E8FCE2,#D3F5C7);color:var(--graphite)}
.sw-cap{margin:10px 0 0;font-size:13px;letter-spacing:.04em;color:var(--grey);transition:opacity .25s}
@media (max-width:900px){ .s3-plate{grid-template-columns:1fr} .sw{height:auto;grid-template-columns:1fr} .sw-sec{min-height:44px} .sw-sec+.sw-sec::before{left:10px;right:10px;top:0;bottom:auto;width:auto;height:1px} }
/* отдельная услуга — три самостоятельные кнопки; подпись встаёт под активную кнопку, по её левому краю */
.sw{gap:10px;overflow:visible}
.mode-one .sw{border-color:transparent}
.sw-sec{border:1.5px solid rgba(218,248,208,.55);border-radius:12px}
.sw-sec+.sw-sec::before{content:none}
.sw-sec.on{border-color:#D3F5C7}
.sw-all{border-radius:12px}
.sw-cap{transition:opacity .25s,padding-left .45s cubic-bezier(.2,.7,.2,1)}
@media (max-width:900px){ .sw{gap:8px} .sw-cap{padding-left:0!important} }
.sw-cap{white-space:nowrap}

/* лист «Проектные и инженерные решения» — компактнее за счёт отступов */
.s3-sheet{padding:26px 34px 20px}
.sh-head{padding-bottom:14px;margin-bottom:2px}
.sh-kick{margin-bottom:10px}
.sh-list li{padding:10px 0;gap:12px}
.sh-list b{margin-bottom:2px}
.sh-list span{line-height:1.4}
/* экран 2: подпись под заголовком — графитом; подписи карточек объектов — чёрная плашка */
.s2-desc{color:var(--graphite)}
.cell.pix{position:relative}
.pix-cap{position:absolute;left:10px;bottom:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);background:rgba(34,31,32,.82);padding:5px 8px;pointer-events:none}
/* «Реализуем»: мятная разметка и координаты под курсором */
.bld{cursor:crosshair}
.bld .cross{position:absolute;background:rgba(121,239,179,.85);opacity:0;transition:opacity .25s;pointer-events:none;z-index:2}
.bld .cross-x{left:0;right:0;height:1px}.bld .cross-y{top:0;bottom:0;width:1px}
.bld .xy{position:absolute;right:14px;bottom:12px;font-size:11px;color:var(--graphite);background:var(--mint);padding:4px 7px;opacity:0;transition:opacity .25s;z-index:2}
.bld:hover .cross,.bld:hover .xy{opacity:1}
.bld .xy{left:auto;width:auto}
.pix-cap{font-size:9.5px;letter-spacing:.1em;padding:4px 7px;background:#000;white-space:nowrap;left:8px;bottom:8px}
.sw-sec{transition:opacity .35s,background .45s,color .45s,border-color .45s;transform:none}
.cell .pix-cap{font:400 9px/1 var(--f-mono);letter-spacing:.14em;padding:6px 9px;background:#000;color:#fff;white-space:nowrap;left:8px;bottom:8px}
/* подписи объектов — под изображением чёрным; при наведении — белым на чёрной плашке */
.cell.pix{aspect-ratio:auto;overflow:visible;background:none}
.cell.pix canvas{width:100%;height:auto;aspect-ratio:1;background:var(--mint)}
.cell .pix-cap{position:static;display:inline-block;margin-top:8px;font:400 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:transparent;padding:6px 8px;margin-left:-8px;transition:background .25s,color .25s}
.cell.pix:hover .pix-cap,.cell.pix:focus .pix-cap,.cell.pix.on .pix-cap{background:#000;color:#fff}
/* карточки объектов строго одинаковые: колонки не растягиваются от длины подписи */
.cells{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.cell.pix canvas{display:block}
.cell .pix-cap{max-width:calc(100% + 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .pix-cap{font-size:clamp(9.5px,.72vw,11px);letter-spacing:.08em}

/* шапка закреплена: KAR, меню и «Связаться» всегда на месте */
.s1 .hdr{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(34,31,32,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* раскрывающееся меню — компактнее; внизу контакты и языки */
.menu-head{padding:24px 32px 30px}
.menu-head svg{height:11px}
.menu-list a{padding:15px 32px;font:700 clamp(20px,1.8vw,26px)/1 var(--f-head)}
.menu-list a:hover{padding-left:38px}
.menu-meta{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--graphite)}
.mm-contacts{list-style:none;margin:0;padding:22px 32px;display:grid;gap:12px;border-right:1px solid var(--graphite)}
.mm-contacts a{display:flex;align-items:center;gap:10px;font:500 15px var(--f-text)}
.mm-contacts a:hover{color:#2FB874}
.mm-contacts svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.mm-lang{margin:0;padding:22px 32px;align-self:end;display:flex;gap:10px;font-size:14px;letter-spacing:.06em}
.mm-lang b{font-weight:500}
.mm-lang a{color:var(--steel)}.mm-lang a:hover{color:var(--graphite)}
.mm-lang i{font-style:normal;color:var(--steel)}
.menu-foot{margin-top:0}
.s1 .hdr{background:var(--graphite)}

/* система в правой области после сборки: белая линия → цвет при наведении */
.still{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s,visibility 0s 1.2s;cursor:none}
.still.show{opacity:1;visibility:visible;transition:opacity 1.2s}
.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s}
.still .still-c{opacity:0}
.still:hover .still-c,.still.on .still-c{opacity:1}
.still:hover .still-ln,.still.on .still-ln{opacity:0}
@media (max-width:720px){ .still{display:none} }
/* меню — по высоте содержимого */
.menu{bottom:auto;max-height:calc(100vh - 24px);overflow:auto}
.menu-meta{margin-top:24px}
/* меню: без лишней линии после последнего пункта, чуть больше воздуха */
.menu-list a:last-child{border-bottom:0}
.menu-meta{margin-top:56px}
.s3-title{max-width:46ch}
/* меню по высоте — до низа тёмного первого экрана */
.menu{height:calc(max(600px,72vh) - 12px)}
.menu-meta{margin-top:auto}

/* ============ ЭКРАН 4 — КАК МЫ РАБОТАЕМ (workflow) ============ */
.s4{position:relative;background-color:var(--sand);color:var(--graphite);padding:110px var(--pad) 150px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23221F20' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23221F20' stroke-opacity='.05' stroke-width='.8' stroke-dasharray='2 2'/%3E%3C/svg%3E")}
.s4-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,80px);align-items:end;margin-bottom:64px}
/* перекидной счётчик */
.dd{display:flex;align-items:flex-end;gap:16px}
.dd-g{display:grid;gap:8px}
.dd-l{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.dd-dash{width:22px;height:3px;background:var(--graphite);margin-bottom:38px}
.flip{display:flex;gap:4px}
.flip i{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(48px,4.4vw,68px);height:clamp(70px,6.4vw,96px);border-radius:8px;
  background:linear-gradient(180deg,#373334 0 49.5%,#2B2829 50.5%);color:var(--sand);font:700 clamp(40px,3.8vw,60px)/1 var(--f-head);font-style:normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px -8px rgba(0,0,0,.5);overflow:hidden}
.flip i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.flip i.go{animation:flp .18s ease-in}
@keyframes flp{0%{transform:rotateX(0)}50%{transform:rotateX(70deg);filter:brightness(.7)}100%{transform:rotateX(0)}}
.flip.done i{color:var(--mint)}
.dd-cap{margin:16px 0 8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.dd-note{margin:0;font-size:14px;line-height:1.5;color:var(--steel);max-width:40ch}
.s4-kick{margin:0 0 14px;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite)}
.s4-title{margin:0 0 18px;font:700 clamp(24px,2.4vw,40px)/1.15 var(--f-head);text-transform:uppercase;letter-spacing:.01em}
.s4-title .wl{position:relative;display:block;width:max-content;max-width:100%}
.s4-title .tx{opacity:0}
.s4-title .bar{position:absolute;inset:.02em -.05em;background:var(--mint);transform:scaleX(0);transform-origin:left}
.s4-lead{margin:0;font:500 clamp(16px,1.2vw,19px)/1.5 var(--f-text);max-width:52ch;color:#3B3738}
/* доска workflow */
.wf{position:relative}
.wf-cols{display:grid;grid-template-columns:1fr 2fr 1fr;gap:12px}
.wf-st{position:relative;display:flex;flex-direction:column;background:#F4F3F1;border:1px solid rgba(34,31,32,.16);border-radius:14px;padding:20px 22px;
  box-shadow:0 14px 30px -24px rgba(0,0,0,.4);transition:border-color .5s,box-shadow .5s,opacity .5s}
.wf-st header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.wf-ph{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.wf-status{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:20px;border:1px solid rgba(34,31,32,.25);color:var(--steel);transition:all .4s}
.wf-st h3{margin:0 0 10px;font:700 clamp(15px,1.15vw,18px)/1.2 var(--f-head);text-transform:uppercase}
.wf-st p{margin:0 0 16px;font-size:14px;line-height:1.5;color:#4A4647}
.wf-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.wf-sub div{display:grid;gap:6px;padding:12px;border-radius:10px;background:#fff;border:1px solid rgba(34,31,32,.1);transition:background .4s,border-color .4s}
.wf-sub b{font:600 13px var(--f-text);text-transform:uppercase;letter-spacing:.08em}
.wf-sub span{font-size:13px;line-height:1.45;color:#4A4647}
.wf-st footer{margin-top:auto;display:grid;gap:4px;padding-top:12px;border-top:1px dashed rgba(34,31,32,.3)}
.wf-st footer span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.wf-st footer b{font:600 14px var(--f-text)}
.wf-st.st-act{border-color:var(--graphite);box-shadow:0 18px 36px -22px rgba(0,0,0,.5)}
.wf-st.st-act .wf-status{background:var(--graphite);color:var(--mint);border-color:var(--graphite)}
.wf-st.st-ok .wf-status{background:var(--mint);color:var(--graphite);border-color:var(--mint)}
.wf-st.st-ok footer b::before{content:"✓ ";color:#2FB874}
.wf-sub div.st-act{background:#E8FCE2;border-color:#9FE7BF}
/* метка «сейчас» */
.wf-now{position:absolute;top:-28px;bottom:-12px;left:0;width:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.wf-now::before{content:"";position:absolute;top:22px;bottom:0;left:0;border-left:1.5px dashed var(--graphite)}
.wf-now span{position:absolute;top:0;left:0;transform:translateX(-50%);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--graphite);color:var(--mint);padding:4px 7px;border-radius:4px}
.wf.run .wf-now{opacity:1}
/* дорожки KAR */
.wf-lanes{display:grid;grid-template-columns:1fr 2fr 1fr;column-gap:12px;row-gap:8px;margin-top:14px}
.wf-lanes .ln{position:relative;display:flex;align-items:center;gap:14px;min-height:46px;padding:0 16px;border-radius:12px;font-size:13px;overflow:hidden}
.ln-name{font:600 12px var(--f-text);letter-spacing:.14em;white-space:nowrap}
.ln-desc{font-size:12px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-wv{grid-column:1/-1;background:var(--graphite);color:var(--sand);min-height:58px;padding-right:0}
.ln-wv .ln-name{color:var(--mint);position:relative;z-index:1}
.ln-wv .ln-desc{color:var(--grey);position:relative;z-index:1}
.ln-track,.ln-fill{position:absolute;left:0;right:0;bottom:9px;height:2px;background:rgba(230,227,224,.15)}
.ln-fill{right:auto;width:0;background:var(--mint);box-shadow:0 0 8px rgba(121,239,179,.6)}
.ln-pt{position:absolute;bottom:14px;left:var(--x);transform:translateX(-50%);font:400 9.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);opacity:0;transition:opacity .4s,color .4s}
.ln-pt::after{content:"";position:absolute;left:50%;bottom:-8px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--graphite);border:1.5px solid var(--grey)}
.ln-pt.on{color:var(--mint);opacity:1}.ln-pt.on::after{background:var(--mint);border-color:var(--mint)}
.ln-wv .ln-desc{display:none}
.ln-en{grid-column:2/3;margin-right:66%;background:#fff;border:1px solid rgba(34,31,32,.14)}
.ln-su{grid-column:2/3;margin-left:33.5%;margin-right:33%;background:#fff;border:1px solid rgba(34,31,32,.14)}
.ln-en,.ln-su{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:8px 12px;margin-top:0}
.ln-en .ln-desc,.ln-su .ln-desc{font-size:10.5px;white-space:normal}
.ln-en{grid-row:2}.ln-su{grid-row:2}
.ln-co{grid-column:1/-1;background:linear-gradient(180deg,#96F7C6,#6FE7AA);color:var(--graphite);justify-content:space-between}
.ln-co .ln-desc{color:var(--graphite);white-space:normal;font-size:13px}
.ln-en,.ln-su,.ln-co{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.ln.on{opacity:1;transform:none}
/* появление */
.s4 .s4-days,.s4 .s4-kick,.s4 .s4-lead,.wf-st{transition:opacity .7s,transform .7s}
.s4:not(.in) .s4-days,.s4:not(.in) .s4-kick,.s4:not(.in) .s4-lead,.s4:not(.in) .wf-st{opacity:0;transform:translateY(12px)}
.s4.in .wf-st:nth-child(2){transition-delay:.1s}.s4.in .wf-st:nth-child(3){transition-delay:.2s}
@media (max-width:1000px){
  .s4-top{grid-template-columns:1fr}
  .wf-cols,.wf-lanes{grid-template-columns:1fr}
  .wf-sub{grid-template-columns:1fr}
  .ln-en,.ln-su{grid-column:1;grid-row:auto;margin:0}
  .wf-now{display:none}
}
@media (prefers-reduced-motion:reduce){ .s4-title .tx{opacity:1} .ln{opacity:1;transform:none} }
.flip i{width:clamp(44px,3.6vw,60px);height:clamp(64px,5.2vw,86px);font-size:clamp(36px,3.1vw,52px)}
.s4-title{font-size:clamp(20px,1.9vw,32px)}
.s4-title .wl{width:fit-content}
.ln-wv{align-items:flex-start;padding-top:12px;min-height:70px}
.ln-pt{bottom:16px}

/* --- экран 4, версия 2 --- */
/* подсказка к сроку */
.dd-cap{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:none}
.dd-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid currentColor;font:600 10px var(--f-text);font-style:normal;letter-spacing:0}
.dd-tip{position:absolute;left:0;top:calc(100% + 10px);z-index:5;width:max-content;max-width:340px;padding:12px 14px;border-radius:10px;background:var(--mint);color:var(--graphite);
  font:500 14px/1.45 var(--f-text);letter-spacing:0;text-transform:none;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 12px 26px -14px rgba(0,0,0,.4)}
.dd-cap:hover .dd-tip,.dd-cap:focus .dd-tip{opacity:1;transform:none}
/* чек-листы */
.wf-ck{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.wf-ck li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:14px;line-height:1.4;color:#3B3738}
.cb{position:relative;display:inline-block;width:16px;height:16px;margin-top:1px;border:1.5px solid rgba(34,31,32,.45);border-radius:3px;background:#fff;flex:none;transition:background .3s,border-color .3s}
.cb::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid var(--graphite);border-width:0 2px 2px 0;transform:rotate(40deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cb.on{background:var(--mint);border-color:#3FD98C}
.cb.on::after{transform:rotate(40deg) scale(1)}
/* три услуги внутри «в процессе» — в цветах кнопок услуг */
.wf-sub b{display:flex;align-items:center;gap:8px;font:600 12.5px var(--f-text);letter-spacing:.1em}
.wf-sub div{border-top:3px solid var(--salad)}
.wf-sub .sv-co{border-top-color:var(--mint)}
.wf-sub div.st-act{background:#E8FCE2;border-color:#9FE7BF;border-top-color:#9FE7BF}
.wf-sub .sv-co.st-act{background:#D9FBE9;border-top-color:var(--mint)}
/* KAR SYSTEM — увеличенная панель */
.ksys{display:grid;grid-template-columns:minmax(220px,1fr) 4fr;gap:12px;margin-top:16px;padding:12px;border-radius:26px;
  background:linear-gradient(180deg,#302C2D,#262324);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 60px -30px rgba(0,0,0,.7)}
.ks-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:18px;background:linear-gradient(180deg,#1D1A1B,#211E1F);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55);padding:22px}
.ks-brand svg{width:100%;max-width:200px;display:block;overflow:visible}
.ks-brand span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.ks-wv{position:relative;border-radius:18px;padding:16px 18px 18px;border:1.5px solid var(--mint);
  box-shadow:0 0 0 1px rgba(121,239,179,.15),0 0 22px rgba(121,239,179,.28),inset 0 0 18px rgba(121,239,179,.08)}
.ks-wv-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ks-wv-h b{font:600 13px var(--f-text);letter-spacing:.16em;color:var(--mint)}
.ks-wv-h span{font-size:13px;color:var(--grey)}
.ks-track{position:relative;height:38px;margin:4px 0 12px}
.ks-track .ln-track,.ks-track .ln-fill{bottom:6px}
.ks-track .ln-pt{bottom:12px}
.ks-btns{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:10px}
.sb{position:relative;display:grid;gap:6px;align-content:center;min-height:84px;padding:14px 18px;border-radius:14px;
  background:linear-gradient(180deg,#373334,#2D2A2B);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  color:var(--grey);transition:background .6s,color .6s,opacity .5s,transform .5s}
.sb b{font:600 12.5px var(--f-text);letter-spacing:.14em}
.sb span{font-size:12.5px;line-height:1.4;color:inherit;opacity:.85}
.sb.on{background:linear-gradient(180deg,#E8FCE2,#D3F5C7);color:var(--graphite)}
.sb-co{background:linear-gradient(180deg,#96F7C6,#6FE7AA);color:var(--graphite);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 26px -10px rgba(121,239,179,.6)}
.sb-co .cn{position:absolute;width:20px;height:20px;overflow:visible}
.sb-co .cn path{fill:var(--graphite)}
.cn-tl{left:8px;top:8px}.cn-br{right:8px;bottom:8px}
.sb-co b,.sb-co span{padding-left:22px}
.ksys .sb-en,.ksys .sb-su{opacity:.55}
.ksys .sb-en.on,.ksys .sb-su.on{opacity:1}
@media (max-width:1000px){ .ksys{grid-template-columns:1fr} .ks-btns{grid-template-columns:1fr} }
.sb.sb-co{background:linear-gradient(180deg,#96F7C6,#6FE7AA);color:var(--graphite)}

/* --- экран 4, версия 3 --- */
/* выше и компактнее сверху; место под подсказкой срока */
.s4{padding-top:70px}
.s4-top{margin-bottom:112px}
/* шкала WorkVision: белый пунктир, мятные точки, подписи справа от точки */
.ks-track .ln-track{height:0;background:none;border-top:1.5px dashed rgba(230,227,224,.75)}
.ks-track .ln-fill{height:0;background:none;box-shadow:none;border-top:1.5px dashed #fff}
.ks-track .ln-pt{transform:none;padding-left:12px;bottom:0;line-height:1;color:var(--sand)}
.ks-track .ln-pt::after{left:-4px;bottom:auto;top:50%;margin:-4px 0 0;width:8px;height:8px;background:var(--graphite);border:1.5px solid var(--mint)}
.ks-track .ln-pt.on::after{background:var(--mint)}
.ks-track .ln-pt{bottom:1px}
/* живая неоновая обводка WorkVision: пульс + бегущий свет по контуру */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.ks-wv{border-color:rgba(121,239,179,.55);animation:wvglow 2.8s ease-in-out infinite}
.ks-wv::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 72%,rgba(218,248,208,.9) 80%,#79EFB3 84%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:wvrun 4.5s linear infinite;filter:drop-shadow(0 0 6px #79EFB3)}
@keyframes wvrun{to{--a:360deg}}
@keyframes wvglow{0%,100%{box-shadow:0 0 0 1px rgba(121,239,179,.12),0 0 16px rgba(121,239,179,.22),inset 0 0 14px rgba(121,239,179,.06)}
  50%{box-shadow:0 0 0 1px rgba(121,239,179,.3),0 0 30px rgba(121,239,179,.45),inset 0 0 22px rgba(121,239,179,.12)}}
/* чек-листы: чёрные квадраты, белые галочки, одна строка мелким шрифтом */
.cb{background:var(--graphite);border-color:var(--graphite)}
.cb::after{border-color:#fff}
.cb.on{background:var(--graphite);border-color:var(--graphite)}
.wf-ck{gap:7px}
.wf-ck li{grid-template-columns:16px 1fr;gap:9px;font-size:12.5px;line-height:1.3;white-space:nowrap}
.wf-ck .cb{width:14px;height:14px}
.wf-ck .cb::after{left:3.5px;top:.5px;width:3.5px;height:7px}
.wf-ck li{overflow:hidden;text-overflow:ellipsis}
/* результат «на выходе» — отдельная плашка */
.wf-st footer{border-top:0;margin-top:auto;padding:10px 12px;border-radius:10px;background:#E8FCE2;border-left:3px solid var(--mint)}
.wf-st footer b::before{content:none!important}
.wf-st.st-ok footer{background:linear-gradient(180deg,#96F7C6,#6FE7AA);border-left-color:#2FB874}
/* карточка «оживает» при наведении */
.wf-st:hover{animation:thud .55s cubic-bezier(.3,.7,.3,1)}
@keyframes thud{0%{transform:none}35%{transform:translateY(-6px) scale(1.025);box-shadow:0 26px 40px -20px rgba(0,0,0,.45)}70%{transform:scale(.995)}100%{transform:none}}
.ks-track .ln-pt{background:#262324;padding:2px 6px 2px 12px;bottom:-7px}
.wf-ck li{font-size:12px}

/* --- экран 4, версия 4 --- */
.s4-top{align-items:start}
.s4-kick{margin-top:0;line-height:1}
.dd-l{line-height:1}
/* галочки снова мятные */
.cb,.cb.on{background:var(--mint);border-color:#3FD98C}
.cb::after{border-color:var(--graphite)}
.cb:not(.on){background:#fff;border-color:rgba(34,31,32,.35)}
/* шкала: тонкий мятный пунктир длинными штрихами, точки на линии, подписи над линией */
.ks-track{height:40px}
.ks-track .ln-track,.ks-track .ln-fill{border:0;height:1px;bottom:8px;
  background:repeating-linear-gradient(90deg,rgba(121,239,179,.45) 0 12px,transparent 12px 20px)}
.ks-track .ln-fill{background:repeating-linear-gradient(90deg,#79EFB3 0 12px,transparent 12px 20px);box-shadow:none}
.ks-track .ln-pt{background:none;padding:0;bottom:16px;transform:none;color:var(--sand)}
.ks-track .ln-pt::after{left:0;top:auto;bottom:-12.5px;margin:0 0 0 -4.5px;width:9px;height:9px;border:0;background:rgba(121,239,179,.45)}
.ks-track .ln-pt.on::after{background:var(--mint);box-shadow:0 0 6px rgba(121,239,179,.7)}
/* неоновая обводка толще */
.ks-wv{border-width:2.5px}
.ks-wv::before{inset:-2.5px;padding:3px}
/* касание вместо прыжка */
.wf-st:hover{animation:touch .4s cubic-bezier(.3,.7,.3,1)}
@keyframes touch{0%{transform:none}40%{transform:scale(.985)}100%{transform:none}}
/* результаты — одинаковая высота, в одну строку */
.wf-st footer{min-height:58px;justify-content:center}
.wf-st footer b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* «в процессе» — тексты услуг мельче, как чек-листы */
.wf-sub span{font-size:12px;line-height:1.4}
.wf-st footer{justify-content:normal;align-content:center}

/* --- экран 4, версия 5 --- */
.s4-top{margin-bottom:28px}
/* услуги внутри «в процессе» — кнопки в цветах панели */
.wf-sub b{gap:8px;letter-spacing:0}
.wf-sub .pill{font:600 10.5px var(--f-text);font-style:normal;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:7px;color:var(--graphite);
  background:linear-gradient(180deg,#E8FCE2,#D3F5C7);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(159,231,191,.7)}
.wf-sub .sv-co .pill{background:linear-gradient(180deg,#96F7C6,#6FE7AA);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px #6FE7AA}
.wf-sub div{border-top:1px solid rgba(34,31,32,.1)}
/* подсказки при наведении (белое окно) */
.tipw{position:relative;cursor:none}
.tipw .tip{position:absolute;left:0;bottom:calc(100% + 10px);z-index:6;width:max-content;max-width:300px;padding:10px 12px;border-radius:9px;background:#fff;color:var(--graphite);
  font:500 13px/1.4 var(--f-text);letter-spacing:0;text-transform:none;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.tipw:hover .tip,.tipw:focus .tip{opacity:1;transform:none}
.ks-wv-h b.tipw .tip{bottom:auto;top:calc(100% + 8px)}
/* кнопки панели — ниже, без описаний */
.sb{min-height:54px;padding:10px 16px;align-content:center}
.sb-co b{padding-left:24px}
.sb-co .cn{width:16px;height:16px}
.cn-tl{left:7px;top:7px}.cn-br{right:7px;bottom:7px}
.ks-wv{padding-top:14px}
/* шкала: частый мелкий пунктир, спокойный; подписи мятные */
.ks-track .ln-track{background:repeating-linear-gradient(90deg,rgba(121,239,179,.28) 0 4px,transparent 4px 9px)}
.ks-track .ln-fill{background:repeating-linear-gradient(90deg,rgba(121,239,179,.75) 0 4px,transparent 4px 9px)}
.ks-track .ln-pt{color:rgba(121,239,179,.55)}
.ks-track .ln-pt.on{color:var(--mint)}
.s3{padding-bottom:72px}
/* подсказки — цвета своей кнопки, моноширинный шрифт, текст набирается машинкой */
.tipw .tip{font:400 12.5px/1.5 var(--f-mono);background:linear-gradient(180deg,#E8FCE2,#D3F5C7);min-height:1.5em}
.sb-co.tipw .tip,.ks-wv-h .tipw .tip{background:linear-gradient(180deg,#96F7C6,#6FE7AA)}
.tipw .tip .caret{display:inline-block;width:.55em;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--graphite);animation:caret 1s steps(1) infinite}
.ksys .sb-en,.ksys .sb-su{opacity:1}
.sb-co .tip{padding-left:12px}.sb-co .tip span{padding-left:0}

/* ============ ЭКРАН 5 — КОНТАКТЫ (подвал) ============ */
.s5{background:var(--graphite);color:var(--sand);padding:72px var(--pad) 130px}
.s5-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:44px;border-bottom:1px solid var(--line-d)}
.s5-kick{margin:0 0 14px;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.s5-title{margin:0 0 12px;font:700 clamp(26px,2.6vw,42px)/1.05 var(--f-head);text-transform:uppercase;letter-spacing:.01em}
.s5-lead{margin:0;font:500 clamp(15px,1.1vw,17px)/1.5 var(--f-text);color:var(--grey)}
.s5-btn{background:var(--mint);border-color:var(--mint);color:var(--graphite);min-width:220px}
.s5-btn:hover{background:#96F7C6}
.s5-grid{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line-d)}
.s5-col{display:flex;flex-direction:column;gap:10px;padding:28px 24px 30px 0}
.s5-col+.s5-col{padding-left:24px;border-left:1px solid var(--line-d)}
.s5-h{margin:0 0 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.s5-col a{display:flex;align-items:center;gap:10px;width:max-content;font:500 15px var(--f-text);color:var(--sand);transition:color .2s}
.s5-col a:hover{color:var(--mint)}
.s5-col svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.s5-ext i{font-style:normal;color:var(--mint);font-size:13px}
.s5-lang p.mono{margin:0;display:flex;gap:10px;font-size:14px;letter-spacing:.06em}
.s5-lang b{font-weight:500;color:var(--mint)}
.s5-lang a{display:inline;color:var(--grey)}
.s5-lang i{font-style:normal;color:var(--steel)}
.s5-bottom{display:flex;align-items:center;gap:28px;padding-top:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.s5-logo{height:13px;width:auto}
.s5-bottom span:last-child{margin-left:auto}
@media (max-width:900px){
  .s5-cta{flex-direction:column;align-items:flex-start}
  .s5-grid{grid-template-columns:1fr 1fr}
  .s5-col:nth-child(3){padding-left:0;border-left:0}
  .s5-bottom{flex-wrap:wrap}
}
.s4{padding-bottom:80px}
.s5-lang p.s5-h{display:block;font-size:11px;letter-spacing:.16em;margin:0 0 6px}
/* подвал: две колонки, без нижней строки; панель внизу экрана прячется */
.s5{padding-bottom:64px}
.s5-grid{grid-template-columns:1fr 1fr;border-bottom:0}
.sys3d,.sys3d-labels{transition:opacity .4s}
body.at-footer .sys3d,body.at-footer .sys3d-labels{opacity:0!important;pointer-events:none}
.s5-copy{margin:0;padding-top:20px;border-top:1px solid var(--line-d);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ ================= */
@media (max-width:720px){
  :root{--pad:20px}
  .sys3d-labels{display:none}
  .s1 .hdr{height:var(--hdr)}
  .s1 .hdr-logo svg{height:13px}
  /* первый экран: тексты, под ними — система целиком в цвете (статично) */
  .s1{height:auto;min-height:0}
  .s1-text{padding:36px var(--pad) 28px;border-bottom:0}
  .s1-title svg{max-width:100%}
  .s1-stage{min-height:0;padding:8px var(--pad) 28px}
  .still{display:block;position:relative;inset:auto;opacity:1;visibility:visible;height:auto!important;top:auto!important}
  .still img{position:static;width:100%;height:auto}
  .still .still-ln{display:none}
  .still .still-c{opacity:1}
  /* экран 2 */
  .s2{padding:64px var(--pad) 80px}
  .s2-photo{min-height:52vh}
  .cells{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cell .pix-cap{font-size:8.5px;letter-spacing:.04em;white-space:normal;line-height:1.3}
  /* экран 3 */
  .s3{padding:64px var(--pad) 56px}
  .s3-name{font-size:28px}
  .s3-svc{font-size:11px;letter-spacing:.08em}
  .s3-sheet{padding:20px 16px}
  .sh-title{font-size:16px}
  .sh-list li{grid-template-columns:24px 22px 1fr;gap:8px}
  .lap{margin-top:16px}
  .bld{height:300px}
  .s3-plate{display:grid;grid-template-columns:1fr;gap:16px;padding:20px}
  .sw{grid-template-columns:1fr;height:auto;gap:8px}
  .sw-all{position:relative;min-height:48px}
  .mode-one .sw-all{display:none}
  .sw-sec{min-height:44px;opacity:1;transform:none}
  .mode-all .sw-sec{display:none}
  .sw-cap{white-space:normal;padding-left:0!important}
  /* экран 4 */
  .s4{padding:56px var(--pad) 64px}
  .s4-top{grid-template-columns:1fr;gap:28px;margin-bottom:28px}
  .flip i{width:38px;height:56px;font-size:30px;border-radius:6px}
  .dd{gap:10px}.dd-dash{width:14px;margin-bottom:26px}
  .s4-title .wl{width:auto}
  .wf-cols,.ks-btns{grid-template-columns:1fr}
  .wf-sub{grid-template-columns:1fr}
  .wf-ck li{white-space:normal}
  .wf-st footer b{white-space:normal}
  .ksys{grid-template-columns:1fr;padding:10px;border-radius:20px}
  .ks-brand{padding:18px}
  .ks-track .ln-pt{font-size:0;padding:0}
  .tipw .tip{max-width:240px}
  /* подвал */
  .s5{padding:56px var(--pad) 48px}
  .s5-btn{min-width:0;width:100%}
  .s5-grid{grid-template-columns:1fr}
  .s5-col+.s5-col{padding-left:0;border-left:0;border-top:1px solid var(--line-d)}
}
.s3-sheet .sh-title{color:var(--graphite);margin:0;font-size:inherit}
.s3-sheet .sh-title{font:700 clamp(16px,1.5vw,24px)/1.2 var(--f-head)}
.s3-sheet .sh-kick{color:var(--steel);margin:0 0 10px;font-size:12px;max-width:none}
@media (max-width:720px){ .sys3d{display:none} }
@media (max-width:720px){ .cell.pix{display:block;border-top:0} }
.wf.drag .wf-now{transition:none}.wf.drag{cursor:none}