/* Главная AeroPlanner. Стили перенесены с сайта-образца владельца (НЕВА АЭРО, drone.html) без изменений;
   цвета, шрифты и размеры лежат в /static/ds/tokens.css; отличия AeroPlanner собраны в конце файла. */
/*  DESIGN READ: B2B-лендинг промышленных БАС. Структура и механика — дизайн-система
    Integrated Biosciences, палитра повёрнута из зелени в синеву при той же светлоте,
    поэтому весь расчёт контраста остаётся в силе. Тёмный холст #222830,
    иерархия только размером и трекингом, акцент только на микроповерхностях.
    DESIGN_VARIANCE 4 / MOTION_INTENSITY 2 / VISUAL_DENSITY 3
    SHAPE LOCK: кнопки 8px, навигация 12px, карточки 20px, крупные карточки 40px, теги 9999px.
    COLOR LOCK: зелёный акцент (--lime) только 40x40 стрелки, точки 6px, активная пилюля, панель 01.
    ELEVATION LOCK: теней нет вообще. Глубина только контрастом поверхностей и волосяной линией 1px.
    WEIGHT LOCK: Benzin для дисплейной шкалы, Onest для текста и меток. Только вес 400. */

/* Aspekta не распространяется свободно; берём подстановку, названную самой дизайн-системой. */


*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x держим на html: на body он делает body контейнером прокрутки,
   и точки прилипания отвязываются от настоящего скроллера. */
/* scroll-behavior не задаём: всю плавность считаем сами в scrollAnim,
   иначе браузерная анимация дерётся с нашей за позицию прокрутки.
   overflow-x держим на html, а не на body: на body он делает body
   контейнером прокрутки и ломает работу со скроллером. */
html{background:var(--paper);overflow-x:hidden}
body{background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:400;
  font-size:var(--t-body);line-height:1.3;letter-spacing:-0.001em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--paper);color:var(--ink);
  padding:12px 20px;border-radius:0 0 var(--r-buttons) 0;font-family:var(--mono);font-size:var(--t-caption)}
.skip:focus{left:0}
.wrap{width:100%;max-width:1600px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.num{font-variant-numeric:tabular-nums}

/* ─── Полосы. Ритм: тёмная, тёмная, светлая. Разделителей между полосами нет. */
.band{padding-block:var(--section)}
.band-dark{background:var(--ink);color:var(--paper)}
.band-light{background:var(--bone);color:var(--ink)}

/* ─── Типографика. Один вес, иерархия размером и трекингом. */
.t-hero{font-size:var(--t-hero);line-height:1;letter-spacing:-0.03em}
.t-display-xl{font-size:var(--t-display-xl);line-height:1;letter-spacing:-0.02em}
.t-display{font-size:var(--t-display);line-height:1.1;letter-spacing:-0.02em}
.t-heading-lg{font-size:var(--t-heading-lg);line-height:1.1;letter-spacing:-0.012em}
.t-heading-sm{font-size:var(--t-heading-sm);line-height:1.2;letter-spacing:-0.006em}
.t-subheading{font-size:var(--t-subheading);line-height:1.2;letter-spacing:-0.006em}
.t-body-lg{font-size:var(--t-body-lg);line-height:1.3;letter-spacing:-0.006em}
.t-body{font-size:var(--t-body);line-height:1.3;letter-spacing:-0.001em}
/* Дисплейная шкала набрана фирменным Benzin, текст и метки — Onest. */
.t-hero,.t-display-xl,.t-display,.t-heading-lg,.t-heading-sm,.t-subheading,
.spec b,.own-price,.panel h3{font-family:var(--disp)}

h1,h2,h3,h4{font-weight:400;letter-spacing:inherit}
/* Приглушённый подзаголовок раздела: голос исследователя, а не объявление. */
.muted{color:var(--graphite)}
.band-dark .muted{color:var(--on-dark-mute)}
.lede{max-width:34ch}
.measure{max-width:62ch}

/* ─── Моноширинная метка. Только служебный текст: навигация, счётчики, теги, даты, кнопки. */
.mono{font-family:var(--mono);font-size:var(--t-caption);line-height:1.23;letter-spacing:0.015em}
.mono-up{font-family:var(--mono);font-size:var(--t-caption);line-height:1.23;letter-spacing:0.05em;text-transform:uppercase}

/* ─── Счётчик раздела 01 / 09. */
.counter{display:inline-flex;justify-self:start;align-items:center;gap:var(--spacing-8,8px);
  border:1px solid var(--graphite);border-radius:var(--r-tags);
  padding:6px 14px;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--graphite)}
.band-dark .counter{border-color:var(--graphite);color:var(--on-dark-mute)}
.band-light .counter{border-color:var(--lichen);color:var(--graphite)}

/* ─── Тег публикации: точка 6px лаймом плюс моно-метка. Единственный цветовой классификатор. */
.tag{display:inline-flex;justify-self:start;align-items:center;gap:8px;font-family:var(--mono);
  font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--graphite);
  background:var(--tissue);border-radius:var(--r-buttons);padding:6px 10px}
.band-dark .tag{color:var(--paper);background:var(--ink)}
.band-dark .tag::before{background:var(--lime)}
.tag::before{content:"";width:23px;height:12px;background:var(--lime-deep);flex:0 0 auto;
  -webkit-mask:url('/static/landing/mark.svg') center/contain no-repeat;mask:url('/static/landing/mark.svg') center/contain no-repeat}

/* ─── Волосяная линия. Только горизонтальная, только 1px. */
.rule{height:1px;border:0;background:var(--graphite)}
.band-light .rule{background:var(--lichen)}

/* ─── Кнопки. Заливка всегда противоположна поверхности. Лайм фоном кнопки не бывает. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:14px;letter-spacing:0.015em;
  padding:10px 16px;border-radius:var(--r-buttons);border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-fill{background:var(--paper);color:var(--ink)}
.band-light .btn-fill{background:var(--ink);color:var(--paper)}
.btn-fill:hover{background:var(--lime);color:var(--ink)}
.btn-ghost{background:transparent;border-color:var(--graphite);color:var(--paper)}
.band-light .btn-ghost{border-color:var(--graphite);color:var(--ink)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.band-light .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* ─── Стрелка 40x40. Единственная фигура, залитая лаймом. */
.arrow{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-buttons);
  background:var(--lime);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease)}
.arrow svg{width:16px;height:16px;display:block}
a:hover>.arrow,.arrow:hover{transform:translateX(3px)}

/* ─── Индикатор прогресса чтения: система разрешает лайм на прогрессе. */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(var(--read,0));transform-origin:0 50%;background:var(--lime);
  pointer-events:none}

/* ─── Вход секции: единственное движение в системе, короткое и без смещения по X. */
.rv{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.anim .rv{opacity:0;transform:translateY(10px)}
.anim .rv.in{opacity:1;transform:none}
.no-anim .rv{opacity:1 !important;transform:none !important;transition:none !important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ─── КАНТ СТРАНИЦЫ. Вверху вокруг кадра виден тонкий белый кант — это сама
   страница, проглядывающая по краям. При первом же скролле кант схлопывается,
   и кадр встаёт вровень с краями окна. Замерено по записи: кант 8px и радиус
   20px в кадре шириной 1100, то есть примерно 11px и 28px в натуре. */
:root{
  --ring:clamp(5px,0.75vw,11px);
  --r-card:clamp(16px,1.9vw,28px);
}
body{background:var(--paper)}
.shell{padding:0}
/* Кант живёт в padding подложки: замкнут по всем четырём сторонам вокруг
   первого экрана и схлопывается в ноль на первых 60px прокрутки. */
html{--pad-x:clamp(20px,3.1vw,47px);
     --ring-now:calc(var(--ring) * (1 - var(--peel,0)))}
.shell,.frame{padding:0;background:transparent}
.frame-in{border-radius:0;overflow:visible;background:transparent}

/* ─── ПОДЛОЖКА ХИРО. Видео закреплено к окну: контент страницы едет поверх и
   закрывает его снизу — на записи верх кадра стоит на месте, а низ уходит под
   светлую секцию. Белый кант обрамляет подложку со всех сторон. */
.stage{position:fixed;inset:0;z-index:0;background:var(--paper);padding:var(--ring-now)}
.stage.gone{visibility:hidden}
.stage-in{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ink);
  border-radius:calc(var(--r-card) * (1 - var(--peel,0)))}
.stage-in>video{width:100%;height:100%;object-fit:cover;display:block}
/* Видео тезисов лежит поверх видео первого экрана и проявляется, пока первый
   экран уезжает вверх. Вуаль остаётся над обоими. */
.stage-in>.stage-alt{position:absolute;inset:0;opacity:var(--alt,0)}
/* Плоская вуаль цветом холста. Её глубина ведётся прокруткой: на первом экране
   кадр почти чистый, чтобы был виден борт, и темнеет только под тезисами,
   где поверх кадра идёт длинный текст. Замерено по кадрам самого видео. */
.stage-in::after{content:"";position:absolute;inset:0;background:var(--ink);
  opacity:var(--veil,0.56);pointer-events:none}

/* Слои текста и вся страница едут над подложкой. */
.pin{position:relative;z-index:2}

/* По половине экрана на тезис: целого экрана на каждый было слишком много. */
main,footer{position:relative;z-index:2}
main{background:var(--bone)}

/* ─── Первый экран. Размеры с записи при 1512×956: заголовок 89px на 157px
   от верха, подпись и действие на 42px от низа, боковые поля 47px. */
.pin-intro{height:100svh;display:flex;flex-direction:column;
  padding:clamp(96px,10.4vw,157px) var(--pad-x) clamp(24px,2.8vw,42px)}
/* Единственное место с жирным начертанием: заголовок первого экрана. */
.pin-intro h1{font-family:var(--disp);font-weight:700;font-size:clamp(38px,5.9vw,89px);
  line-height:1.1;letter-spacing:-0.02em;max-width:12ch;color:var(--paper)}
.intro-foot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,56px);align-items:end}
.intro-foot p{max-width:28ch;color:var(--paper);font-family:var(--disp);
  font-size:clamp(14px,1.26vw,19px);line-height:1.3;letter-spacing:-0.005em}
.intro-actions{display:flex;align-items:center;gap:6px}
/* Все отдельные кнопки набраны Benzin Medium, как логотип и «Связаться».
   Benzin широкий сам по себе, поэтому разрядка 0.015em, а не 0.05em. */
.btn-dark{display:inline-flex;align-items:center;height:40px;white-space:nowrap;font-family:var(--disp);font-weight:500;
  font-size:var(--t-caption);letter-spacing:0.015em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border-radius:var(--r-buttons);padding:0 17px;
  transition:background .2s var(--ease)}
.btn-dark:hover{background:var(--void)}
/* Пара «кнопка + стрелка»: правый край кнопки и левый край стрелки скошены
   параллельно, между ними диагональный шов. Снято с кропов записи. */
/* Пара «кнопка + стрелка». Наклон 12° и зазор 6px сняты с записи. Обе фигуры
   скошены целиком: смежные края идут параллельно, а скругления остаются
   круглыми. Через clip-path углы срезались бы в острые пики. Содержимое
   возвращаем в вертикаль обратным скосом. */
.pair,.intro-actions{gap:6px}
.pair>.btn-dark,.pair>.arrow,
.intro-actions>.btn-dark,.intro-actions>.arrow{transform:skewX(-12deg);border-radius:12px;height:44px}
/* По записи фигуры пары крупнее одиночных стрелок: 44-46px против 40. */
.pair>.arrow,.intro-actions>.arrow{width:44px}
.pair>.btn-dark,.intro-actions>.btn-dark{padding:0 20px}
.pair>.btn-dark>span,.intro-actions>.btn-dark>span,
.pair>.arrow>svg,.intro-actions>.arrow>svg{display:block;transform:skewX(12deg)}
/* Скос обязан сохраняться при наведении, иначе фигура распрямляется рывком. */
.pair>.arrow:hover,.intro-actions>.arrow:hover{transform:skewX(-12deg) translateX(3px)}
/* Прописные Benzin сидят выше середины строки на 0.093 кегля: опускаем
   надпись на эту величину, чтобы она стояла по центру кнопки. */
.pair>.btn-dark>span,.intro-actions>.btn-dark>span{transform:skewX(12deg) translateY(0.093em)}
@media(max-width:760px){.intro-foot{grid-template-columns:1fr;align-items:start;gap:18px}
  .pin-intro h1{max-width:none}}

/* ─── Навигация: фиксирована к окну, 34px сверху и 47px по бокам при 1512.
   Логотип получает белую пилюлю только после скролла. */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:flex-start;gap:16px;
  padding:clamp(20px,2.25vw,34px) var(--pad-x);pointer-events:none}
.site-nav>*{pointer-events:auto}
/* Пилюля логотипа: белая заливка и тёмный текст всегда, без смены состояний. */
/* Название набрано Benzin Medium. У Benzin прописные сидят в строке на 1,3px
   выше середины, поэтому верхний отступ больше нижнего: так буквы стоят ровно
   по центру плашки, по ~14px сверху и снизу, как и по бокам. Высота прежняя. */
/* Надпись графитовая, а не чёрная: акцент в плашке отдан знаку. */
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--graphite);
  font-family:var(--disp);font-weight:500;font-size:14px;letter-spacing:0.015em;white-space:nowrap;
  padding:11.3px 14px 8.7px;border-radius:var(--r-nav);background:var(--paper)}
/* Фирменный знак вместо точки. 27×14, пропорция знака 1.92 сохранена.
   Через маску, а не картинкой: цвет берётся из акцента и меняется с палитрой.
   Цвет на глаз совпадает со стрелками и активным пунктом меню. */
.brand::before{content:"";width:27px;height:14px;background:var(--lime-mark);flex:0 0 auto;
  transform:translateY(-1.3px);
  -webkit-mask:url('/static/landing/mark.svg') center/contain no-repeat;mask:url('/static/landing/mark.svg') center/contain no-repeat}
.nav-group{margin-left:auto;display:flex;align-items:center;gap:6px;
  background:var(--paper);border-radius:var(--r-nav);padding:4px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--graphite);padding:8px 13px;border-radius:var(--r-buttons);
  transition:background .2s var(--ease),color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{background:var(--lime);color:var(--ink)}
/* «Связаться» набрана Benzin Medium, как кнопка первого экрана и логотип.
   Отступы сверху и снизу неравные на 0.093 кегля: так прописные Benzin
   стоят по центру, а высота кнопки прежняя. */
.nav-cta{display:inline-flex;align-items:center;font-family:var(--disp);font-weight:500;font-size:var(--t-caption);
  letter-spacing:0.015em;text-transform:uppercase;background:var(--ink);color:var(--paper);
  border-radius:var(--r-buttons);padding:calc(10px + 0.093em) 15px calc(10px - 0.093em);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.nav-cta:hover{background:var(--lime);color:var(--ink)}
.burger{display:none;width:38px;height:38px;border-radius:var(--r-buttons);
  background:var(--paper);color:var(--ink);align-items:center;justify-content:center}
.burger span{display:block;width:14px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:14px;height:1px;background:currentColor}
.burger span::before{top:-4px}.burger span::after{top:4px}
/* Шесть пунктов меню: до 1060px между логотипом и меню становится тесно,
   поэтому ниже этой ширины меню сворачивается в кнопку. */
@media(max-width:1060px){.nav-links{display:none}.burger{display:flex}.nav-group{background:transparent;padding:0}}
/* Benzin шире Onest: на телефоне «Связаться» набираем на кегль меньше
   и сближаем шапку, иначе кнопка меню уезжает за правый край. */
@media(max-width:430px){.site-nav{gap:8px}.nav-cta{font-size:12px;padding-inline:11px}}
/* Самые узкие телефоны (360-385): плашку логотипа уменьшаем целиком, вместе
   с отступами, чтобы пропорции внутри белой зоны остались прежними. */
@media(max-width:385px){.site-nav .brand{zoom:.9;margin-top:2px}.nav-cta{font-size:11px;padding-inline:9px}
  /* Кнопки в Benzin на самых узких экранах: кегль и поля чуть меньше,
     чтобы «Отправить заявку» и «Подробнее о компании» шли в одну строку. */
  .pair>.btn-dark,.intro-actions>.btn-dark{font-size:12px;padding:0 14px}}

/* ─── Блок тезисов. Реперы с записи: тег 126px от верха, линия 184, счётчик 226,
   тезис 236 сверху и 537px слева (35,5% ширины), кегль 48. */
.rail{position:sticky;top:0;height:100svh;padding:clamp(80px,8.3vw,126px) var(--pad-x) 0;
  pointer-events:none}
.rail-tag{display:inline-flex;align-items:center;gap:8px;background:var(--ink);
  border-radius:var(--r-buttons);padding:7px 12px;white-space:nowrap;
  font-family:var(--mono);font-size:12px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--paper)}
.rail-tag::before{content:"";width:23px;height:12px;background:var(--lime);flex:0 0 auto;
  -webkit-mask:url('/static/landing/mark.svg') center/contain no-repeat;mask:url('/static/landing/mark.svg') center/contain no-repeat}
/* Линия идёт от края карточки и растёт непрерывно с прокруткой. */
.rail-line{margin-top:clamp(18px,1.9vw,29px);height:1px;background:var(--paper);opacity:.55;
  margin-left:calc(-1 * var(--pad-x));width:calc((100% + var(--pad-x) * 2) * var(--line,0))}
.rail-body{margin-top:clamp(20px,2.7vw,41px);display:grid;
  grid-template-columns:minmax(0,30%) minmax(0,1fr);gap:20px;align-items:start}
.rail-count{display:inline-flex;justify-self:start;align-items:center;gap:6px;
  border:1px solid var(--on-dark-mute);border-radius:var(--r-tags);padding:5px 13px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.015em;color:var(--paper)}
.rail-count b{font-weight:400}
.rail-count i{font-style:normal;color:var(--on-dark-faint)}
.rail-steps{position:relative;display:grid;overflow:hidden}
/* Каждый тезис ведётся скриптом от прокрутки: без CSS-transition, чтобы не отставал. */
.rail-step{grid-area:1/1;color:var(--paper);
  font-family:var(--disp);font-size:clamp(20px,2.5vw,38px);line-height:1.15;letter-spacing:-0.012em;
  opacity:var(--o,0);transform:translateY(var(--y,0px));will-change:transform,opacity}
.rail-step:first-child{--o:1}
@media(max-width:860px){.rail-body{grid-template-columns:1fr;gap:14px}}

/* ─── Светлая секция после хиро: тот же правый столбец, что у тезисов. */
.col-r{display:grid;grid-template-columns:minmax(0,33%) minmax(0,1fr);gap:20px;padding:0 var(--pad-x)}
.col-r>div{border-top:1px solid var(--lichen);padding-top:clamp(28px,3.8vw,57px)}
/* ─── Снимок борта сверху. Геометрию сняли с присланного примера подгонкой
   силуэта: поворот −37,5°, ширина 79,5vw, вылет за левый край 24,3vw, верх на
   6,07vw выше волосяной линии (совпадение площадей 82%). Фон фотографии
   выровнен до чистого белого, поэтому multiply кладёт её на холст секции без
   шва и оставляет родную тень снимка нетронутой: рисовать тень средствами CSS
   не требуется и нельзя — она часть кадра. */
.col-r{position:relative}
.tech-shot{position:absolute;left:-26.3vw;top:-6.07vw;width:79.5vw;height:auto;
  transform:rotate(-37.5deg);transform-origin:50% 50%;
  mix-blend-mode:multiply;pointer-events:none;user-select:none;z-index:1}
/* Крыло проходит поверх метки раздела, как в примере, но под заголовком. */
/* Ячейка пустая и нужна только для колонки сетки. Линию с неё снимаем:
   она проходила прямо по крылу. Селектор с родителем — иначе правило
   .col-r>div перебивает его по весу. */
/* Подпись встаёт ровно на уровень снятой линии и набрана её же цветом.
   z-index выше снимка: иначе крыло закрывает подпись целиком. */
.col-r>.col-tag{z-index:2;border-top:0;padding-top:0;position:relative}
.col-mark{position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:var(--t-caption);
  line-height:1.23;letter-spacing:0.05em;color:var(--lichen);white-space:nowrap;
  /* Абсолютное позиционирование, а не строка в потоке: у строки свой
     межстрочный интервал, он сдвигал подпись на несколько пикселей вниз.
     top:0 — это уровень линии справа, translateY(-50%) сажает на неё середину. */
  transform:translateY(-50%)}
.col-copy{position:relative;z-index:2}
/* Заголовок тут длиннее, чем дисплейные в остальных секциях, поэтому кегль
   ниже: на прежних 72px он рассыпался на семь строк по одному слову. */
.col-r h2{font-family:var(--disp);font-size:clamp(27px,3.2vw,46px);line-height:1.13;letter-spacing:-0.017em;max-width:1000px}
.col-r p{margin-top:clamp(22px,2.8vw,42px);max-width:730px;color:var(--graphite)}
.col-r .pair{margin-top:clamp(26px,3vw,46px)}
@media(max-width:860px){
  .col-r{grid-template-columns:1fr}
  /* На узком экране снимок уходит наверх отдельным кадром, иначе он ложится
     прямо под заголовок и мешает читать. */
  .tech-shot{position:static;width:150%;max-width:none;margin:0 0 clamp(8px,3vw,20px) -34%;
    transform:rotate(-24deg);display:block}
  .col-r{display:flex;flex-direction:column}
  /* На узком экране линии слева нет, поэтому подпись просто встаёт строкой
     над заголовком, без абсолютного позиционирования. */
  .col-r>.col-tag{display:block;order:2;position:static;border-top:0;padding:0}
  .col-mark{position:static;transform:none;display:block;
    margin-bottom:clamp(10px,2.4vw,16px)}
  .col-copy{order:3}
  .tech-shot{order:1}
}

/* ─── Посимвольная подсветка по скроллу: подпись сайта.
   Символ гаснет до приглушённого и загорается по мере прохода. */
.lit i,.lit w{font-style:normal;color:var(--dim,rgba(255,255,255,.34));transition:color .18s linear}
.lit i.hot,.lit w.hot{color:var(--hot,#fff)}
.band-light .lit{--dim:var(--lichen);--hot:var(--ink)}

/* ─── Пословное раскрытие. Снято с записи: каждое слово закрыто плашкой цвета
   самого слова; плашка схлопывается к нижнему краю до тонкого подчёркивания
   и исчезает, слова идут по очереди. Цвет слова задаёт подсветка. */
.reveal w{display:inline-block;position:relative;white-space:nowrap}
.reveal w s{text-decoration:none;display:inline-block}
.reveal w::after{content:"";position:absolute;left:0;right:0;top:.08em;bottom:0;
  background:currentColor;transform-origin:50% 100%;transform:scaleY(1)}
.reveal.on w::after{animation:unblock .34s var(--ease) both;animation-delay:calc(var(--w,0) * 110ms)}
@keyframes unblock{0%{transform:scaleY(1)}55%{transform:scaleY(.09)}100%{transform:scaleY(0)}}
.no-anim .reveal w::after{display:none}
@media(prefers-reduced-motion:reduce){.reveal w::after{display:none}}

/* ─── Раздел «О компании»: фото слева, текст справа в две колонки. */
.about{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.about-img{border-radius:var(--r-cards);overflow:hidden;border:1px solid var(--lichen);
  aspect-ratio:4/3;background:var(--ink)}
.about-img img,.about-img video{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.about{grid-template-columns:1fr}}

/* ─── Ньюсрум: своя скруглённая полоса поверх светлого холста. */
.news{background:var(--frost);border-radius:var(--r-large) var(--r-large) 0 0;
  padding:clamp(40px,4.8vw,72px) 0 clamp(60px,7.7vw,116px)}
.news-card{position:relative;background:var(--paper);border:1px solid var(--lichen);
  border-radius:var(--r-cards);padding:clamp(16px,2vw,30px);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(24px,9.4vw,142px);align-items:start}
.news-img{border-radius:var(--r-img);overflow:hidden;background:var(--ink);aspect-ratio:1.42}
.news-img img{width:100%;height:100%;object-fit:cover}
.news-body{padding:clamp(16px,2.3vw,35px) clamp(4px,1vw,16px) clamp(8px,1.4vw,22px) 0}
.news-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.news-body h3{margin-top:clamp(28px,3.4vw,52px);font-family:var(--disp);
  font-size:var(--t-heading-sm);line-height:1.2;letter-spacing:-0.006em;color:var(--ink)}
.news-body p{margin-top:clamp(16px,1.9vw,28px);color:var(--graphite);max-width:52ch}
.news-more{display:inline-block;margin-top:clamp(28px,3.3vw,50px);
  font-family:var(--mono);font-size:var(--t-caption);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--ink)}
.news-card .arrow{position:absolute;right:0;bottom:0;border-radius:var(--r-buttons) 0 var(--r-cards) 0}
@media(max-width:860px){.news-card{grid-template-columns:1fr}.news-body{padding:0}}

/* ─── Полоса из трёх панелей встык: лайм, чернила, тёплый нейтральный.
   Снято с записи: панели без зазоров, номер моно в правом верхнем углу,
   линейная иконка сверху, заголовок и описание прижаты к низу. */
.panels{display:grid;grid-template-columns:repeat(3,1fr)}
/* Снято с записи: панель раскрывается слева направо за ~0,45с, следующая с задержкой ~0,22с,
   содержимое проявляется уже после раскрытия. */
.anim .panel{clip-path:inset(0 100% 0 0)}
.anim .panels.on .panel{animation:wipe .45s var(--ease) both;animation-delay:calc(var(--i,0) * .22s)}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.anim .panel>*{opacity:0;transition:opacity .35s var(--ease)}
.anim .panels.on .panel>*{opacity:1;transition-delay:calc(var(--i,0) * .22s + .3s)}
.panel{padding:clamp(24px,2.6vw,36px);min-height:clamp(280px,32vw,400px);
  display:flex;flex-direction:column;position:relative}
.panel:nth-child(1){background:var(--lime);color:var(--ink)}
.panel:nth-child(2){background:var(--ink);color:var(--paper)}
.panel:nth-child(3){background:var(--tissue);color:var(--ink)}
.panel .no{position:absolute;top:clamp(24px,2.6vw,36px);right:clamp(24px,2.6vw,36px);
  font-family:var(--mono);font-size:12px;letter-spacing:0.015em;opacity:.6}
.panel svg{width:clamp(58px,6vw,86px);height:clamp(58px,6vw,86px);display:block}
.panel .p-b{margin-top:auto}
.panel h3{font-size:var(--t-subheading);line-height:1.2;letter-spacing:-0.006em}
.panel p{margin-top:10px;font-size:16px;line-height:1.4;letter-spacing:-0.001em;max-width:34ch;opacity:.86}
@media(max-width:860px){.panels{grid-template-columns:1fr}
  .panel{min-height:0;padding-block:clamp(28px,6vw,40px)}}


.head-row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
/* Зазор задан выше, в блоке пары «кнопка + стрелка». */
.pair{display:inline-flex;align-items:center}

/* ─── Шапка раздела: счётчик, затем заголовок, затем приглушённый подзаголовок. */
.head{display:grid;gap:var(--spacing-24,24px);margin-bottom:clamp(44px,6vw,72px)}
.head h2{max-width:18ch}
.head p{max-width:56ch}
.head-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end}
@media(max-width:860px){.head-split{grid-template-columns:1fr;align-items:start}}

/* ─── Числовые плитки. Разделение только волосяными линиями, без карточек. */
/* Панели упираются в следующую секцию: нижний отступ тут дал бы светлую
   полосу между цветными плитками и снимком. */
#tech{padding-bottom:0}

/* ─── Снимок фоном всей секции, содержимое поверх. */
#board,#platform{position:relative;overflow:hidden;isolation:isolate}
/* Высота фона постоянная и равна раскрытому состоянию секции: при cover любое
   изменение высоты контейнера меняет масштаб кадра, и снимок «наезжал» при
   раскрытии характеристик. Пока список закрыт, низ снимка просто подрезан
   секцией, а масштаб не трогается вовсе. Значение считает JS; 100% — запасной
   вариант, если он не отработал. */
.board-bg{position:absolute;top:0;left:0;right:0;
  height:var(--board-bg-h,100%);min-height:100%;z-index:0}
.board-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* Вуаль посчитана по самому снимку: 95-й перцентиль яркости в полосах кадра
   0,43–0,61, то есть светло везде и спрятать текст негде. Без затемнения белый
   даёт 1,6:1. При 0,84 белый выходит на 6,3:1, приглушённый — на 4,6:1. */
.board-bg::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.84}
#board>.wrap,#platform>.wrap{position:relative;z-index:1}
/* Приглушённый текст на видео поднят с .62 до .78: на .62 он не дотягивал
   до нормы даже под этой вуалью. */
#board{--on-dark-mute:rgba(255,255,255,.78)}
.specs{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--graphite)}
.spec{padding:var(--spacing-40,40px) var(--spacing-24,24px) var(--spacing-40,40px) 0;
  border-bottom:1px solid var(--graphite)}
.spec+.spec{border-left:1px solid var(--graphite);padding-left:var(--spacing-24,24px)}
.spec b{display:block;font-weight:400;font-size:var(--t-display);line-height:1.1;
  letter-spacing:-0.02em;color:var(--paper)}
.spec b i{font-style:normal;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--on-dark-mute);margin-left:8px;vertical-align:middle}
.spec p{margin-top:var(--spacing-16,16px);color:var(--on-dark-mute);max-width:26ch}
@media(max-width:900px){
  .specs{grid-template-columns:repeat(2,1fr)}
  .spec:nth-child(odd)+.spec{border-left:1px solid var(--graphite)}
  .spec:nth-child(odd){padding-left:0;border-left:0}
}
@media(max-width:520px){
  .specs{grid-template-columns:1fr}
  .spec,.spec+.spec{border-left:0;padding-left:0}
}

/* ─── Раскрывающийся блок характеристик. */
.more{margin-top:var(--spacing-40,40px)}
/* Benzin, как остальные кнопки. Верхний отступ больше нижнего на 0.093
   кегля, чтобы буквы стояли по центру; плюс возвращаем на место обратным сдвигом. */
.more summary{list-style:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--disp);font-weight:500;font-size:var(--t-caption);letter-spacing:0.015em;
  color:var(--on-dark-mute);border:1px solid var(--graphite);border-radius:var(--r-buttons);
  padding:calc(10px + 0.093em) 16px calc(10px - 0.093em);transition:color .2s var(--ease),border-color .2s var(--ease)}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--paper);border-color:var(--lime)}
.more summary::after{content:"+";font-family:var(--mono);transform:translateY(-0.093em)}
.more[open] summary::after{content:"–"}
/* Раскрытие идёт плавно. При мгновенном изменении высоты дёргалась вся секция:
   контент под ней скакал, а фоновый снимок разом переобрезался под новую
   высоту. Анимируем grid-template-rows — это единственный способ довести
   высоту от нуля до авто без знания конечного размера. */
.more-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.more[open] .more-fold{grid-template-rows:1fr}
.more.closing .more-fold{grid-template-rows:0fr}
.more-fold>div{overflow:hidden;min-height:0}
@media(prefers-reduced-motion:reduce){.more-fold{transition:none}}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,64px);margin-top:var(--spacing-24,24px)}
.more-grid>div{display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--graphite)}
.more-grid span:first-child{font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--on-dark-mute)}
.more-grid span:last-child{text-align:right;color:var(--paper)}
@media(max-width:760px){.more-grid{grid-template-columns:1fr}}

/* ─── Карточки технологий. Плоские, только контур. */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-20,20px)}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
.card{border:1px solid var(--graphite);border-radius:var(--r-cards);
  padding:var(--card-pad);background:transparent;display:grid;gap:var(--spacing-16,16px);
  align-content:start;transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--lime)}
.card h3{color:var(--paper)}
.card p{color:var(--on-dark-mute)}
.band-light .card{border-color:var(--lichen);background:var(--paper)}
.band-light .card h3{color:var(--ink)}
.band-light .card p{color:var(--graphite)}
.band-light .card:hover{border-color:var(--graphite)}

/* ─── Платформа: тёплая альтернативная поверхность на светлой полосе. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  border:1px solid var(--lichen);border-radius:var(--r-large);
  padding:var(--card-pad);background:var(--tissue)}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split h2{color:var(--ink)}
.split p{color:var(--graphite)}

/* ─── Отрасли: открытый список с видимым расчётом. Две истории тут решают.
   Первая: аккордеон убран, потому что сравнивать пять цифр через пять кликов
   невозможно. Вторая: сумма без арифметики не работает. Закупщику и главному
   инженеру мало увидеть «8-18 млн»; им это число нести к финансовому директору,
   и там спросят, откуда оно. Поэтому в каждой строке видны два множителя и
   результат: расчёт проверяется в уме за пару секунд.
   Акцентом на всю секцию набрана ровно одна вещь — итоговая сумма. */
.ind{border-top:1px solid var(--lichen)}
.ind-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,3.4vw,56px);align-items:start;
  padding:clamp(24px,2.6vw,36px) 0;border-bottom:1px solid var(--lichen);color:var(--ink)}
/* Название — подпись к строке, а не заголовок: крупной тут должна быть сумма,
   иначе взгляд цепляется за отрасль, которую человек и так про себя знает. */
.ind-row .t{display:block;min-width:0}
.ind-row .n{display:block;font-family:var(--disp);font-size:var(--t-subheading);
  line-height:1.2;letter-spacing:-0.006em;transition:color .2s var(--ease)}
.ind-row .w{display:block;margin-top:10px;font-size:var(--t-body);line-height:1.45;color:var(--graphite);max-width:46ch}
.ind-row .a{display:block;margin-top:8px;font-family:var(--mono);font-size:var(--t-caption);
  line-height:1.5;letter-spacing:0.015em;color:var(--graphite);max-width:46ch}
/* Расчёт: два исходных числа и итог под волосяной линией. */
.ind-sum{display:grid;gap:7px;min-width:clamp(230px,23vw,320px)}
.ind-sum .l{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.ind-sum .l i{font-style:normal;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--graphite)}
.ind-sum .l b{font-weight:400;font-family:var(--mono);font-size:14px;
  color:var(--ink);white-space:nowrap}
.ind-sum .l.r{margin-top:5px;padding-top:12px;border-top:1px solid var(--lichen);align-items:baseline}
.ind-sum .l.r i{color:var(--ink)}
.ind-sum .l.r b{font-family:var(--disp);font-size:clamp(24px,1.95vw,28px);
  line-height:1.05;letter-spacing:-0.012em;color:var(--lime-deep)}
.ind-row:hover .n{color:var(--lime-deep)}
@media(max-width:860px){
  .ind-row{grid-template-columns:1fr;gap:18px}
  .ind-sum{min-width:0}
}
/* Снятие возражения «откуда цифры» и один призыв на весь блок. */
.ind-foot{margin-top:clamp(28px,3.4vw,46px);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:end}
@media(max-width:860px){.ind-foot{grid-template-columns:1fr;align-items:start}}
.ind-cta-note{margin-top:10px;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--graphite)}
.ind-note{margin-top:var(--spacing-24,24px);max-width:64ch;
  font-size:var(--t-caption);line-height:1.55;color:var(--graphite)}

/* ─── Модели владения: строка цены и описания, разделены линией. */
.own{border-top:1px solid var(--lichen)}
.own-row{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(16px,4vw,56px);padding:var(--spacing-40,40px) 0;
  border-bottom:1px solid var(--lichen);align-items:start}
.own-price{font-size:var(--t-heading-lg);line-height:1.1;letter-spacing:-0.012em;color:var(--ink)}
.own-price em{display:block;font-style:normal;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--graphite);margin-top:8px}
.own-b h3{color:var(--ink)}
.own-b p{margin-top:var(--spacing-12,12px);color:var(--graphite);max-width:52ch}
@media(max-width:760px){.own-row{grid-template-columns:1fr}}

/* ─── Шаги пилота. */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-20,20px)}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}}
.step{border:1px solid var(--graphite);border-radius:var(--r-cards);
  padding:var(--card-pad);display:grid;gap:var(--spacing-16,16px);align-content:start}
.step .n{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:0.015em;color:var(--on-dark-mute)}
.step h3{color:var(--paper)}
/* Заголовки карточек: кегль следует за шириной карточки, чтобы самый длинный,
   «Маршрут на вашем объекте», всегда шёл в две строки. Benzin широкий:
   «на вашем объекте» занимает 11.9em, 8.1% ширины карточки дают запас 4%. */
.step{container-type:inline-size}
.step h3{font-size:min(var(--t-heading-sm),8.1cqi)}
/* Отступ сверху меньше обычного: у пилотной программы и платформы
   заголовок начинается ближе к краю блока. */
#pilot,#platform{padding-top:clamp(48px,5vw,72px)}
/* «О компании» компактнее сверху и снизу. */
#about{padding-block:clamp(48px,5vw,72px)}
.step p{color:var(--on-dark-mute)}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:var(--spacing-40,40px);
  font-family:var(--mono);font-size:var(--t-caption);letter-spacing:0.015em;color:var(--on-dark-mute)}
.status::before{content:"";width:23px;height:12px;background:var(--lime);flex:0 0 auto;
  -webkit-mask:url('/static/landing/mark.svg') center/contain no-repeat;mask:url('/static/landing/mark.svg') center/contain no-repeat}

/* ─── Доказательная база: нумерованные строки на волосяных линиях. */
.facts{border-top:1px solid var(--graphite)}
.fact{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:var(--spacing-24,24px) 0;border-bottom:1px solid var(--graphite);align-items:baseline}
.fact b{font-weight:400;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--on-dark-faint)}
.fact span{color:var(--on-dark-mute);max-width:76ch}
@media(max-width:520px){.fact{grid-template-columns:1fr;gap:8px}}

/* ─── Короткие ответы. */
.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--lichen)}
.q{padding:var(--spacing-40,40px) 0;border-bottom:1px solid var(--lichen)}
.q h3{color:var(--ink)}
.q p{margin-top:var(--spacing-12,12px);color:var(--graphite);max-width:56ch}
@media(max-width:860px){.q-grid{grid-template-columns:1fr}}

/* ─── Заявка в два столбца. Раньше блок шёл одной колонкой и не помещался
   в экран: заголовок хиро-кеглем съедал четверть высоты, а карточка начиналась
   ниже сгиба, так что форму и обещание, ради которого её заполняют, нельзя было
   увидеть одновременно. Теперь они стоят рядом, и весь блок влезает целиком. */
#contact{padding-block:clamp(56px,6vw,86px)}
.lead-split{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4.4vw,72px);align-items:start}
.lead-copy{margin-bottom:0;gap:var(--spacing-20,20px)}
/* Заголовок заявки набран Benzin, как заголовки остальных разделов. */
.lead-copy h2{font-family:var(--disp);font-size:var(--t-heading-lg);line-height:1.1;letter-spacing:-0.02em;max-width:15ch}
.lead-split .form-card,.lead-split .ok{margin-top:0}
@media(max-width:860px){
  .lead-split{grid-template-columns:1fr;gap:clamp(24px,4vw,34px);align-items:start}
}

/* ─── Заявка. Три поля вместо пяти: для ответного звонка хватает имени,
   контакта и отрасли. Отрасль выбирается одним нажатием, а не из списка;
   если человек пришёл из блока отраслей, она уже отмечена. Компанию
   и подробности уточним в разговоре. */
.form-card{margin-top:clamp(40px,6vw,64px);background:var(--paper);
  border:1px solid var(--lichen);border-radius:var(--r-large);padding:var(--card-pad)}
.chips{border:0;margin:0 0 clamp(28px,3vw,40px);padding:0;min-width:0}
.chips legend{padding:0;margin-bottom:14px;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--graphite)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;height:40px;padding:0 15px;
  border:1px solid var(--lichen);border-radius:var(--r-buttons);font-size:15px;color:var(--ink);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.chip:hover span{border-color:var(--ink)}
/* Выбранная отрасль красится как активный пункт меню. */
.chip input:checked+span{background:var(--lime);border-color:var(--lime)}
.chip input:focus-visible+span{outline:2px solid var(--lime-deep);outline-offset:2px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,34px) var(--spacing-24,24px)}
.f{display:grid;gap:8px}
.f.full{grid-column:1/-1}
.f label{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:0.015em;color:var(--graphite)}
.f label i{font-style:normal;margin-left:6px}
.f input,.f textarea{width:100%;font:inherit;font-size:var(--t-body);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--lichen);
  border-radius:0;padding:10px 0;transition:border-color .2s var(--ease)}
/* Поле задачи растёт по тексту, начиная с одной строки. */
.f textarea{resize:none;overflow:hidden;min-height:0;line-height:1.45}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ink)}
.f input.bad,.f textarea.bad{border-bottom-color:var(--ink)}
.f-err{margin-top:16px;font-family:var(--mono);font-size:var(--t-caption);
  letter-spacing:0.015em;color:var(--ink)}
.submit{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3vw,40px)}
/* Кнопка отправки собрана той же парой «кнопка + стрелка», что и по всему сайту. */
.send{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;flex:0 0 auto}
.send:hover>.btn-dark{background:var(--void)}
.send:hover>.arrow{transform:skewX(-12deg) translateX(3px)}
.send:active{transform:translateY(1px)}
.priv{font-size:var(--t-caption);line-height:1.5;letter-spacing:-0.02em;color:var(--graphite);max-width:44ch;margin:0}
@media(max-width:760px){.fields{grid-template-columns:1fr}
  .submit{flex-direction:column;align-items:flex-start}}
.ok{margin-top:clamp(40px,6vw,64px);background:var(--paper);border:1px solid var(--lichen);
  border-radius:var(--r-large);padding:var(--card-pad)}
.ok h3{color:var(--ink)}
.ok p{margin-top:var(--spacing-12,12px);color:var(--graphite)}

/* ─── Футер. Чистый чёрный: система отводит его только для финала страницы.
   Три колонки: о компании с кнопкой заявки, разделы, документы. Кнопка меню
   на телефоне ведёт сюда же, поэтому список разделов здесь полный. */
footer{background:var(--void);color:var(--paper);padding-block:clamp(56px,6vw,88px) clamp(28px,3vw,40px)}
.f-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px)}
.f-brand{display:grid;gap:var(--spacing-20,20px);justify-items:start;align-content:start}
.f-brand p{max-width:36ch;color:var(--on-dark-mute);line-height:1.45}
/* Тёмная кнопка на чёрном не видна: в футере она светлая. */
footer .btn-dark{background:var(--paper);color:var(--ink)}
footer .btn-dark:hover{background:var(--lime)}
.f-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.f-h{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:0.05em;text-transform:uppercase;
  color:var(--on-dark-faint);margin-bottom:4px}
.f-col a,.f-link{font:inherit;font-size:15px;line-height:1.35;color:var(--on-dark-mute);
  background:none;border:0;padding:0;cursor:pointer;text-align:left;transition:color .2s var(--ease)}
.f-col a:hover,.f-link:hover{color:var(--paper)}
.f-bot{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;
  margin-top:clamp(40px,6vw,64px);padding-top:var(--spacing-24,24px);
  border-top:1px solid var(--graphite);
  font-family:var(--mono);font-size:var(--t-caption);letter-spacing:0.015em;color:var(--on-dark-faint)}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}

/* ─── Баннер cookie. Метрика подключается только после явной галочки:
   по умолчанию она снята. Баннер появляется при каждом заходе, выбор
   хранится в браузере и подставляется в галочку. */
.cookie{position:fixed;left:var(--pad-x);bottom:clamp(16px,2vw,24px);z-index:70;
  width:min(420px,calc(100vw - 2 * var(--pad-x)));
  display:grid;gap:14px;justify-items:start;
  background:var(--paper);color:var(--ink);border:1px solid var(--lichen);border-radius:var(--r-cards);
  padding:20px 22px;box-shadow:0 18px 50px rgba(34,40,48,.18)}
.cookie[hidden]{display:none}
.cookie p{font-size:14px;line-height:1.45;color:var(--graphite)}
.cookie a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.4;color:var(--ink)}
.check input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cookie .btn-dark{border:0;cursor:pointer}
.cookie .btn-dark>span{display:block;transform:translateY(0.093em)}
/* Согласие в форме: отдельная галочка, без неё заявка не уходит. */
.agree{margin-top:clamp(24px,2.6vw,32px);max-width:60ch}
.agree span{color:var(--graphite)}
.agree input.bad{outline:2px solid var(--ink);outline-offset:2px}

/* ═══ Дополнения AeroPlanner. Всё выше перенесено с сайта-образца без изменений. */
:root{color-scheme:light}
[hidden]{display:none !important}
/* Знак AeroPlanner уже знака образца: пропорция 1,53 вместо 1,92. */
.brand::before{width:22px}
.tag::before,.rail-tag::before,.status::before{width:18px}
/* В образце это задано атрибутами style, а сайт их запрещает. */
#tech{position:relative;overflow:clip}
.gap-panels{height:clamp(60px,8vw,122px)}
.panel:nth-child(1){--i:0}.panel:nth-child(2){--i:1}.panel:nth-child(3){--i:2}
.head-split h2{margin-top:var(--spacing-24,24px)}
.about{margin-top:clamp(28px,4vw,56px)}
.about .pair{margin-top:clamp(22px,3vw,38px)}
#team{padding-block:clamp(48px,5vw,72px)}
#faq{padding-bottom:0}
#request{padding-block:clamp(56px,6vw,86px)}
.news .q-grid{margin-top:clamp(26px,3.6vw,48px)}
@media(min-width:861px){.news .q:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:860px){.news .q:last-child{border-bottom:0}}
.pin-intro h1{max-width:13ch}
/* Фото владельца: первый экран, фон тёмных полос «Результат» и «Демо», блок «Для всей команды». */
.photo{background-image:url('/static/landing/photo.webp');background-size:cover;background-position:center;background-repeat:no-repeat}
/* Пока на первом экране нет светлого видео, кнопка на тёмном холсте светлая, как в подвале. */
.pin .pair>.btn-dark,.band-dark .pair>.btn-dark{background:var(--paper);color:var(--ink)}
.pin .pair>.btn-dark:hover,.band-dark .pair>.btn-dark:hover{background:var(--lime)}
/* Второе действие первого экрана: контурная кнопка той же формы, что пара. */
.btn-line{display:inline-flex;align-items:center;height:44px;white-space:nowrap;font-family:var(--disp);font-weight:500;
  font-size:var(--t-caption);letter-spacing:.015em;text-transform:uppercase;color:var(--paper);
  border:1px solid var(--on-dark-mute);border-radius:12px;padding:0 20px;transform:skewX(-12deg);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-line>span{display:block;transform:skewX(12deg) translateY(.093em)}
.btn-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.intro-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px 14px}
@media(max-width:760px){.intro-actions{justify-content:flex-start}}
@media(max-width:385px){.btn-line{font-size:12px;padding:0 14px}}
[aria-busy=true]{opacity:.6;pointer-events:none}
/* Меню: вход в кабинет и короткая подпись кнопки на телефоне. */
.nav-login{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.05em;text-transform:uppercase;
  color:var(--graphite);padding:8px 13px;border-radius:var(--r-buttons);transition:color .2s var(--ease)}
.nav-login:hover{color:var(--ink)}
.cta-short{display:none}
@media(max-width:1140px){.nav-links{display:none}.burger{display:flex}.nav-group{background:transparent;padding:0}.nav-login{display:none}}
@media(max-width:560px){.cta-long{display:none}.cta-short{display:inline}}
/* Заявка: два поля. Приманка для роботов убрана с глаз. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok .pair{margin-top:clamp(20px,2.4vw,32px)}
/* Подвал: четыре колонки, добавлены контакты. */
.f-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1.15fr) minmax(0,.95fr)}
.f-col span:not(.f-h){font-size:15px;line-height:1.35;color:var(--on-dark-mute)}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
/* Короткое сообщение внизу экрана. */
.site-note{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;max-width:min(520px,calc(100vw - 40px));
  background:var(--ink);color:var(--paper);border:1px solid var(--graphite);border-radius:var(--r-nav);padding:12px 16px;
  font-size:14px;line-height:1.4}
/* На узком экране белой плашки меню нет: кнопка заявки светлая, как кнопка меню, чтобы не теряться на тёмном. */
@media(max-width:1140px){.nav-cta{background:var(--paper);color:var(--ink)}}

/* ═══ 13.11.2026: правки владельца. */

/* Ноутбук с кабинетом в пустой левой колонке блока «Карта хозяйства по снимкам».
   Колонка шире прежней трети, иначе карта на экране ноутбука мелкая. Верх ноутбука
   на уровне заголовка справа: тот же отступ, что у правой колонки от линии. */
.col-r{grid-template-columns:minmax(0,44%) minmax(0,1fr);column-gap:clamp(24px,3.4vw,64px)}
.tech-mac{display:block;width:100%;height:auto;margin-top:clamp(28px,3.8vw,57px);
  user-select:none;-webkit-user-drag:none}
@media(max-width:860px){
  .col-r{column-gap:0}
  .tech-mac{margin:0 0 clamp(18px,4vw,28px)}
}

/* Три панели: заголовки на одной высоте, как бы ни отличалась длина текста.
   Панели делят ряды общей сетки: иконка, свободное место, текст. */
@media(min-width:861px){
  .panels{grid-template-rows:auto 1fr auto;min-height:clamp(280px,32vw,400px)}
  .panel{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;min-height:0}
  .panel svg{grid-row:1}
  .panel .p-b{grid-row:3;margin-top:0;align-self:start}
}

/* «Для всей команды»: роли строками на линиях, у всех строк общий левый край.
   Заголовок на уровне верха фото, кнопка на уровне его низа. */
.about{align-items:stretch}
/* Фото не шире своей колонки: высота по строке, но не ниже 4:3 (распорка ::before). */
.about-img{aspect-ratio:auto;width:100%;justify-self:stretch}
.about-img::before{content:"";display:block;padding-top:75%}
.about-copy{display:flex;flex-direction:column;align-items:flex-start}
.roles{width:100%;margin:clamp(24px,3.2vw,44px) 0 clamp(24px,3vw,38px);border-bottom:1px solid var(--lichen)}
.roles>div{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:6px 24px;
  padding:clamp(14px,1.4vw,20px) 0;border-top:1px solid var(--lichen);align-items:baseline}
.roles dt{font-family:var(--mono);font-size:var(--t-caption);line-height:1.4;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink)}
.roles dd{margin:0;color:var(--graphite);max-width:60ch}
.about .pair{margin-top:auto}
@media(max-width:560px){.roles>div{grid-template-columns:1fr}}

/* Поддержка Фонда содействия инновациям: логотипы и текст из условий гранта. */
.support{padding-block:clamp(40px,5vw,64px) clamp(48px,6vw,80px)}
.support-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;
  border-top:1px solid var(--lichen);padding-top:clamp(32px,4vw,48px)}
.support-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,40px)}
.support-logos img{display:block;height:clamp(72px,7vw,100px);width:auto}
/* Логотип Фонда прислан на белом фоне: multiply растворяет белое в цвете полосы,
   сам знак не перекрашивается (официальный логотип менять нельзя). */
.support-logos .fund{mix-blend-mode:multiply}
.support p{max-width:70ch;color:var(--graphite);line-height:1.5}
@media(max-width:760px){.support-in{grid-template-columns:1fr}}


/* Согласие на cookie: две равные по силе кнопки, отказ не прячется. */
.cookie{width:min(460px,calc(100vw - 2 * var(--pad-x)))}
.cookie-act{display:flex;flex-wrap:wrap;gap:8px}
.btn-out{display:inline-flex;align-items:center;height:40px;white-space:nowrap;font-family:var(--disp);font-weight:500;
  font-size:var(--t-caption);letter-spacing:0.015em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--graphite);border-radius:var(--r-buttons);padding:0 16px;
  transition:background .2s var(--ease),color .2s var(--ease)}
.btn-out:hover{background:var(--ink);color:var(--paper)}
.btn-out>span{display:block;transform:translateY(0.093em)}
@media(max-width:430px){.cookie-act>button{flex:1 1 100%;justify-content:center}}