/* ═══════════════════════════════════════════════════════════
   ukved.ru — ГЛАВНАЯ, версия 2 (05.09.2026)
   Собрана ПОСЛЕ прогона версии 1 через Pre-Flight Check навыка
   taste-skill. Версия 1 проваливала 10 жёстких правил; ниже
   помечено, что именно исправлено и почему.

   DESIGN READ: посадочная B2B-услуг для владельцев МСБ и главбухов,
   покупающих 1С-аутсорсинг. Язык сдержанно-технический премиум.
   ДИЛЫ: DESIGN_VARIANCE 7 · MOTION_INTENSITY 5 · VISUAL_DENSITY 4.

   ЧТО ИСПРАВЛЕНО против v1:
   1. НАСТОЯЩИЕ ИЗОБРАЖЕНИЯ вместо нуля картинок. Взяты боевые
      фотонные рендеры /upload/servery-fon/web_foton/ (уже живут
      на 17 страницах, все отдают 200). Один визуальный язык.
   2. СНЯТЫ фальшивые интерфейсы из <div> (стеклянная панель с
      mac-точками и «терминал»). Навык: «#1 LLM-design Tell».
   3. СНЯТЫ рукописные SVG-иконки. Их работу делают изображения.
   4. EYEBROW: было 7 на 8 секций, стало 3 на 10 (правило ≤ n/3).
   5. Градиент на тексте — ТОЛЬКО в H1. Было на каждом H2.
   6. СНЯТЫ декоративные цветные точки (статус-строка, mac-точки,
      пульс в eyebrow). Осталось 0.
   7. Средняя точка «·» — максимум одна в строке.
   8. HERO: ровно 4 текстовых элемента. Строка доверия вынесена
      ПОД hero отдельной секцией (правило «trust-strip не в hero»).
   9. Направления — асимметричное бенто с картинками, не три
      равные колонки.
   10. Тема ЗАПЕРТА светлой. Тёмной полосы v1 больше нет: правило
      Page Theme Lock плюс «светлая тема обязательна» из DESIGN.md.

   СОЗНАТЕЛЬНЫЕ ОТСТУПЛЕНИЯ ОТ НАВЫКА (названы, не умолчаны):
   • Тире «—» навык запрещает полностью, но правило писано для
     английского. В русском это ГРАММАТИКА («Час — то, чем мы
     считаем»). Оставлены только грамматические, декоративных нет.
   • Inter и индиго #6C3CF7 навык считает AI-дефолтом. Здесь это
     БРЕНД, зафиксированный в ukved.ru/DESIGN.md 01.07.2026.
     Навык даёт на это явный override.

   ЗАЛИВКА (DESIGN.md §6): литералы вместо var(), префикс lpx-*,
   инлайн-<script> НЕТ, разметка .lpx-tcard + .lpx-price читается
   глобальным сборщиком контекста заявки.
   ═══════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#FFFFFF;color:#0F1629;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
[id]{scroll-margin-top:88px}
:focus-visible{outline:2px solid #3761E9;outline-offset:3px;border-radius:4px}
.lpx-skip{position:absolute;left:-9999px;top:0;background:#3761E9;color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:99}
.lpx-skip:focus{left:0}

.lpx-wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
.lpx-section{padding-block:104px}
/* ── разделитель между разделами: тонкая линия того же тона, что уже
   стоит у полос доверия и логотипов (rgba(15,22,41,.07)).
   Общий селектор «~», а не «+»: между разделами стоит тёмная полоса
   .lpx-actionbar, и соседство разрывается — при «+» раздел «Двенадцать
   направлений» оставался без линии (замерено на бою). Над первым
   разделом линии нет по построению: слева от него нет .lpx-s. */
.lpx-s ~ .lpx-s{border-top:1px solid rgba(15,22,41,.07)}

.lpx-tint{background:#F8F9FC}

/* Одна шкала скругления на страницу: 18px карточки, 12px кнопки,
   10px поля. Смешанные системы навык считает сломанным дизайном. */
.lpx-h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.12;color:#0F1629;margin-bottom:18px;max-width:20ch}
.lpx-lead{font-size:1.0938rem;color:#5A6280;max-width:62ch;line-height:1.68}
.lpx-head{margin-bottom:52px}
/* eyebrow остался ровно в трёх местах на странице */
.lpx-eyebrow2{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2A4BB8;
  margin-bottom:14px;display:block}

/* ─── nav: одна строка, высота 68 ──────────────────────────── */
.lpx-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(15,22,41,.07)}
.lpx-nav-inner{display:flex;align-items:center;gap:30px;height:68px}
.lpx-logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.04em;color:#0F1629}
.lpx-nav-links{display:flex;gap:28px;margin-left:auto}
.lpx-nav-link{font-size:.9375rem;font-weight:500;color:#5A6280;transition:color .15s}
.lpx-nav-link:hover{color:#0F1629}
.lpx-nav-cta{background:#0F1629;color:#fff;font-weight:600;font-size:.9375rem;padding:10px 20px;border-radius:12px;
  transition:transform .16s,background .16s}
.lpx-nav-cta:hover{transform:translateY(-1px);background:#1D2740}
.lpx-nav-cta:active{transform:translateY(1px)}
.lpx-burger{display:none;margin-left:auto;background:none;border:1px solid rgba(15,22,41,.12);
  border-radius:12px;width:44px;height:44px;cursor:pointer;font-size:1.2rem;color:#0F1629}

/* ─── HERO: асимметричный сплит, настоящий рендер справа ───── */
.lpx-hero{position:relative;overflow:hidden;background:linear-gradient(168deg,#F2F5FF 0%,#FBFCFE 58%,#F3F9FB 100%);
  padding-block:54px 60px}
.lpx-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lpx-mesh::before{content:'';position:absolute;width:780px;height:780px;top:-200px;left:-140px;
  background:radial-gradient(ellipse at 45% 45%,rgba(55,97,233,.16) 0%,transparent 70%);border-radius:50%}
.lpx-mesh::after{content:'';position:absolute;width:620px;height:620px;bottom:-240px;right:-120px;
  background:radial-gradient(ellipse at 55% 45%,rgba(14,165,199,.14) 0%,transparent 70%);border-radius:50%}
.lpx-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.lpx-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#2A4BB8;margin-bottom:22px}
@media (max-width:720px){.lpx-eyebrow{margin-bottom:12px}}
/* text-wrap:balance выравнивает строки заголовка по длине — без него
   во второй строке оставалось одно слово «трёх» (висячая строка).
   max-width страхует на браузерах без поддержки balance. */
.lpx-h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.05rem,3.9vw,2.95rem);font-weight:800;
  line-height:1.07;letter-spacing:-.045em;color:#0F1629;margin-bottom:22px;
  text-wrap:balance;max-width:17ch}
/* градиент на тексте ровно один раз на всю страницу */
.lpx-h1 em{font-style:normal;background:linear-gradient(120deg,#3761E9 0%,#6C3CF7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lpx-sub{font-size:1.125rem;color:#5A6280;max-width:46ch;margin-bottom:34px;line-height:1.62}
.lpx-ctas{display:flex;flex-wrap:wrap;gap:12px}
.lpx-btn-primary{display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FA6127 0%,#E84E10 100%);color:#fff;font-weight:700;font-size:1.1875rem;
  padding:15px 32px;border-radius:12px;box-shadow:0 10px 28px rgba(250,97,39,.30);border:none;cursor:pointer;
  transition:transform .16s,box-shadow .16s;min-height:52px;font-family:'Inter',sans-serif;white-space:nowrap}
.lpx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(250,97,39,.36)}
.lpx-btn-primary:active{transform:translateY(1px) scale(.99)}
.lpx-btn-ghost{display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;
  border:1px solid rgba(15,22,41,.12);color:#0F1629;font-weight:600;font-size:1rem;padding:15px 26px;
  border-radius:12px;min-height:52px;transition:transform .16s,box-shadow .16s;white-space:nowrap}
.lpx-btn-ghost:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,22,41,.09)}
.lpx-btn-ghost:active{transform:translateY(1px) scale(.99)}
.lpx-hero-art{position:relative}
.lpx-hero-art{display:flex;justify-content:center;align-items:center}

/* ─── строка доверия: ВЫНЕСЕНА ИЗ HERO отдельной секцией ───── */
.lpx-trust{background:#FFFFFF}
.lpx-trust-h{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#2A4BB8;padding-top:34px}
.lpx-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-block:22px 34px}
/* 🔴 В моноширинном шрифте ЗАПЯТАЯ занимает целую ячейку и «99,9%»
   читается как «99 , 9%». word-spacing не помогает — он про пробелы.
   Лечится letter-spacing: моноячейки сжимаются им, а не им одним. */
.lpx-trust-v{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:1.25rem;color:#0F1629;
  letter-spacing:-.085em;word-spacing:-.24em;line-height:1.1}
.lpx-trust-l{font-size:.875rem;color:#5A6280;margin-top:7px}

/* ─── зеркало: две колонки, тема остаётся светлой ──────────── */
.lpx-sym{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(15,22,41,.09);
  border-radius:18px;overflow:hidden;margin-bottom:30px}
.lpx-sym-col{padding:34px 36px;background:#FFFFFF}
.lpx-sym-col+.lpx-sym-col{border-left:1px solid rgba(15,22,41,.09);background:#FDF8F5}
.lpx-sym-k{font-size:.8125rem;font-weight:600;color:#5A6280;margin-bottom:16px}
.lpx-sym-h{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.375rem;color:#0F1629;
  margin-bottom:12px;letter-spacing:-.02em}
.lpx-sym-col p{font-size:.9688rem;color:#5A6280}
.lpx-sym-out{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.3vw,1.6rem);
  line-height:1.35;letter-spacing:-.025em;color:#0F1629;max-width:32ch}

/* ─── строка действия ──────────────────────────────────────── */
.lpx-actionbar{background:#0F1629;color:#FFFFFF}
.lpx-actionbar-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-block:26px;flex-wrap:wrap}
.lpx-actionbar-txt{font-size:1.0625rem;font-weight:500;max-width:62ch;color:#D7DEEF}
.lpx-actionbar-tel{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:1.25rem;
  color:#FFFFFF;white-space:nowrap;word-spacing:-.24em}

/* ─── БЕНТО направлений: 1 крупный + 2, с картинками ───────── */
/* ─── стена логотипов ──────────────────────────────────────── */
.lpx-logos{padding-block:38px 42px;background:#FFFFFF}
.lpx-logos-h{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#5A6280;margin-bottom:26px}
.lpx-logos-row{display:flex;flex-wrap:wrap;align-items:center;gap:26px 46px}
/* 🔴 Обесцвечивание СНЯТО: у «Оригитеи» фирменный знак — оранжевая
   плашка с белым текстом, в сером она читается как сломанный
   прямоугольник. Приём, который ломает знак одного клиента из семи,
   не стоит своей опрятности. Настоящие цвета, лёгкая приглушка. */
.lpx-logos-row img{height:38px;width:auto;object-fit:contain;
  opacity:.9;transition:opacity .2s}
.lpx-logos-row img:hover{opacity:1}

/* ─── внедрения ────────────────────────────────────────────── */
.lpx-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lpx-case{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid rgba(15,22,41,.09);
  border-radius:18px;padding:28px;transition:transform .18s,box-shadow .18s,border-color .18s}
.lpx-case:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(15,22,41,.10);
  border-color:rgba(55,97,233,.28)}
.lpx-case h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1875rem;
  color:#0F1629;letter-spacing:-.02em;margin-bottom:11px}
.lpx-case p{font-size:.9375rem;color:#5A6280;line-height:1.6;margin-bottom:20px;flex:1}
.lpx-case-go{font-weight:600;font-size:.9375rem;color:#2A4BB8;margin-top:auto}

/* ценовой якорь в первом экране */
.lpx-sub b{color:#0F1629;font-weight:700;white-space:nowrap}

/* ─── ДВИЖЕНИЕ БЕЗ JS: CSS scroll-driven animations ─────────
   Инлайн-<script> на боевом Битриксе режет WAF, поэтому обычный
   scroll-reveal на IntersectionObserver сюда не поставить.
   🔑 opacity:0 задаётся ТОЛЬКО внутри @supports — где поддержки
   нет, блок просто виден. Ловушка «навсегда невидимый блок»
   исключена конструкцией, а не проверкой. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .lpx-rv{animation:lpxReveal linear both;animation-timeline:view();
      animation-range:entry 0% entry 48%}
    @keyframes lpxReveal{from{opacity:0;translate:0 20px}to{opacity:1;translate:none}}
  }
}

@media (max-width:1040px){ .lpx-cases{grid-template-columns:1fr} }
@media (max-width:720px){ .lpx-logos-row{gap:20px 30px} .lpx-logos-row img{height:30px} }

/* ─── ОРБИТА РАЗДЕЛОВ вокруг фигуры ─────────────────────────
   Вращение на ЧИСТОМ CSS: инлайн-<script> режет WAF Битрикса.
   🔑 Кольцо крутится СВОЙСТВОМ rotate, а не transform: transform у
   элементов орбиты уже занят расстановкой по окружности, и два
   правила на одно свойство молча затирают друг друга.
   Каждая подпись крутится ОБРАТНО с той же скоростью — поэтому
   текст всегда стоит ровно и читается.
   Мотив движения (навык требует его назвать): услуги вращаются
   вокруг ОДНОГО человека — это и есть мысль страницы «один
   подрядчик, а не трое». */
.lpx-orb{position:relative;width:556px;height:556px;
  display:grid;place-items:center}
.lpx-orb-ring{position:absolute;inset:0;animation:lpxOrb 60s linear infinite}
.lpx-orb-i{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  transform:rotate(calc(var(--i) * 51.4286deg)) translateY(-218px)
            rotate(calc(var(--i) * -51.4286deg))}
.lpx-orb-c{display:flex;flex-direction:column;align-items:center;gap:7px;
  animation:lpxOrbBack 60s linear infinite}
.lpx-orb-ic{width:52px;height:52px;border-radius:16px;background:#FFFFFF;display:grid;place-items:center;
  color:#2A4BB8;box-shadow:0 8px 22px rgba(15,22,41,.13)}
.lpx-orb-ic svg{width:26px;height:26px}
.lpx-orb-c b{font-size:11.5px;font-weight:600;color:#3D465F;text-align:center;line-height:1.25;
  max-width:104px;letter-spacing:-.01em}
/* 🔴 pointer-events:none — фигура перехватывала клик у элемента орбиты,
   проходящего ЗА ней (замер elementFromPoint: «Кузница Сварога» недоступна).
   Картинка не интерактивна, ловить клики ей незачем. */
.lpx-orb img{pointer-events:none;position:relative;z-index:2;max-height:none;height:396px;width:auto;
  filter:drop-shadow(0 22px 40px rgba(15,22,41,.20))}
/* след орбиты — тонкое кольцо, чтобы движение читалось как круг */
.lpx-orb::before{content:'';position:absolute;left:50%;top:50%;width:436px;height:436px;
  margin:-218px 0 0 -218px;border-radius:50%;
  border:1px dashed rgba(55,97,233,.20)}
@keyframes lpxOrb{from{rotate:0deg}to{rotate:360deg}}
@keyframes lpxOrbBack{from{rotate:0deg}to{rotate:-360deg}}

/* ─── орбита: наведение и клик ──────────────────────────────
   🔑 Подъём делаем свойством scale, а НЕ transform: у подписи
   rotate занят обратным вращением, а индивидуальные свойства
   складываются как translate → rotate → scale → transform.
   translateY в transform повернулся бы вместе с кольцом и уехал
   вбок; scale от поворота не зависит.
   🔑 Вращение ВСТАЁТ при наведении и при фокусе с клавиатуры:
   по движущейся цели попасть нельзя. Кольцо и обратное вращение
   останавливаются вместе, иначе подписи разъедутся. */
.lpx-orb-c{text-decoration:none;color:inherit;cursor:pointer;
  transition:scale .18s ease}
.lpx-orb-c .lpx-orb-ic{transition:box-shadow .18s,background .18s,color .18s,outline-color .18s;
  outline:2px solid transparent;outline-offset:0}
.lpx-orb-c b{transition:color .18s}
.lpx-orb-c:hover,.lpx-orb-c:focus-visible{scale:1.09}
.lpx-orb-c:hover .lpx-orb-ic,.lpx-orb-c:focus-visible .lpx-orb-ic{
  background:#FFFFFF;color:#1D3894;outline-color:rgba(55,97,233,.34);
  box-shadow:0 14px 32px rgba(15,22,41,.20)}
.lpx-orb-c:hover b,.lpx-orb-c:focus-visible b{color:#0F1629}
.lpx-orb-c:active{scale:1.03}
.lpx-orb:hover .lpx-orb-ring,.lpx-orb:hover .lpx-orb-c,
.lpx-orb:focus-within .lpx-orb-ring,.lpx-orb:focus-within .lpx-orb-c{
  animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .lpx-orb-ring,.lpx-orb-c{animation:none}
}

/* ─── сетка двенадцати направлений ─────────────────────────── */
.lpx-dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lpx-d{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid rgba(15,22,41,.09);
  border-radius:18px;padding:24px 24px 22px;transition:transform .18s,box-shadow .18s,border-color .18s}
.lpx-d:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(15,22,41,.10);border-color:rgba(55,97,233,.28)}
.lpx-d:active{transform:translateY(-1px)}
/* полоса визуала одной высоты у ВСЕХ карточек — иначе смесь иконок
   и картинки читается как разнобой, а не как иерархия */
.lpx-d-vis{display:flex;align-items:center;margin-bottom:16px}
.lpx-d-vis svg{width:44px;height:44px;padding:9px;border-radius:13px;
  background:rgba(55,97,233,.09);color:#2A4BB8;box-sizing:content-box}
/* 🔴 Картинку из сетки СНЯЛИ намеренно: единственная фотография
   стояла на карточке сервера и перетягивала взгляд туда же, то есть
   возвращала «однобоко» на визуальном уровне при равном тексте.
   Настоящий рендер сервера остаётся в hero. */
.lpx-d h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.0625rem;
  color:#0F1629;letter-spacing:-.02em;margin-bottom:9px}
.lpx-d p{font-size:.9063rem;color:#5A6280;line-height:1.55;margin-bottom:18px;flex:1}
.lpx-d-foot{margin-top:auto}
.lpx-d-price{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:1.0625rem;
  color:#0F1629;letter-spacing:-.045em;word-spacing:-.24em}
.lpx-d-note{font-size:.8125rem;color:#5A6280;margin-top:4px}
.lpx-card--lead .lpx-card-art img{filter:none}
.lpx-card-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.lpx-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.3125rem;color:#0F1629;
  letter-spacing:-.025em;margin-bottom:11px}
.lpx-card--lead h3{font-size:1.75rem}
.lpx-card p{font-size:.9688rem;color:#5A6280;margin-bottom:20px;flex:1}
.lpx-card-price{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:1.3125rem;
  color:#0F1629;letter-spacing:-.04em;word-spacing:-.24em;margin-bottom:6px}
.lpx-card-note{font-size:.8125rem;color:#5A6280;margin-bottom:20px}
.lpx-card-link{font-weight:600;font-size:.9375rem;color:#2A4BB8;margin-top:auto}
.lpx-card-link:hover{color:#1D3894}

/* ─── ловушка: редакционное заявление, без карточек ────────── */
.lpx-trap-q{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.16;letter-spacing:-.035em;color:#0F1629;max-width:22ch;margin-bottom:26px}
.lpx-trap-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.lpx-trap-a{font-size:1.0938rem;color:#5A6280;line-height:1.7}
.lpx-trap-a strong{color:#0F1629;font-weight:600}

/* ─── тарифы ───────────────────────────────────────────────── */
.lpx-tariffs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.lpx-tcard{position:relative;background:#FFFFFF;border:1px solid rgba(15,22,41,.09);border-radius:18px;
  padding:34px 30px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.lpx-tcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(15,22,41,.10)}
.lpx-tcard--popular{border-color:#0F1629;box-shadow:0 24px 54px rgba(15,22,41,.13)}
.lpx-ribbon{position:absolute;top:-1px;right:22px;background:#0F1629;color:#fff;font-size:.6875rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:0 0 10px 10px}
.lpx-tcard-kind{font-size:.8125rem;font-weight:600;color:#5A6280;margin-bottom:9px}
.lpx-tcard h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.5rem;color:#0F1629;
  letter-spacing:-.03em;margin-bottom:9px}
.lpx-tcard-for{font-size:.9063rem;color:#5A6280;margin-bottom:26px;min-height:46px}
.lpx-price{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:2.15rem;color:#0F1629;
  letter-spacing:-.06em;line-height:1.05;word-spacing:-.24em}
.lpx-price-unit{font-size:.875rem;color:#5A6280;margin-top:8px;margin-bottom:26px;min-height:44px}
.lpx-tlist{list-style:none;margin-bottom:28px;flex:1}
.lpx-tlist li{display:flex;justify-content:space-between;gap:14px;font-size:.9375rem;color:#5A6280;
  padding-block:11px;border-top:1px solid rgba(15,22,41,.07)}
.lpx-tlist li:first-child{border-top:none;padding-top:0}
.lpx-tlist b{font-family:'JetBrains Mono',ui-monospace,monospace;color:#0F1629;font-weight:700;font-size:.875rem;
  white-space:nowrap;word-spacing:-.24em}
.lpx-btn-tariff{display:block;text-align:center;background:#0F1629;color:#fff;font-weight:700;font-size:1rem;
  padding:14px 22px;border-radius:12px;border:none;cursor:pointer;transition:transform .16s,background .16s;
  width:100%;font-family:'Inter',sans-serif}
.lpx-btn-tariff:hover{transform:translateY(-2px);background:#1D2740}
.lpx-btn-tariff:active{transform:translateY(1px) scale(.99)}
.lpx-btn-tariff--outline{background:transparent;color:#0F1629;border:1px solid rgba(15,22,41,.18)}
.lpx-btn-tariff--outline:hover{background:#F8F9FC}
.lpx-tnote{margin-top:28px;font-size:.875rem;color:#5A6280;text-align:center}

/* ─── лестница вниз: вертикальный ряд, без карточной сетки ─── */
.lpx-ladder{max-width:820px;border-left:2px solid rgba(15,22,41,.10);padding-left:34px}
.lpx-rung{padding-block:22px}
.lpx-rung h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1875rem;color:#0F1629;
  margin-bottom:8px;letter-spacing:-.02em}
.lpx-rung h4 span{font-family:'JetBrains Mono',ui-monospace,monospace;color:#2A4BB8;word-spacing:-.24em}
.lpx-rung p{font-size:.9688rem;color:#5A6280;max-width:60ch}
.lpx-cut{font-size:.9063rem;font-weight:600;color:#C2410C;padding-block:6px}

/* ─── FAQ ──────────────────────────────────────────────────── */
.lpx-faq{max-width:900px}
.lpx-faq-item{border-top:1px solid rgba(15,22,41,.09)}
.lpx-faq-item:last-child{border-bottom:1px solid rgba(15,22,41,.09)}
.lpx-faq-item summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;
  justify-content:space-between;gap:22px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:1.0938rem;color:#0F1629}
.lpx-faq-item summary::-webkit-details-marker{display:none}
.lpx-faq-sign{flex-shrink:0;font-size:1.4rem;color:#5A6280;line-height:1;transition:transform .22s}
.lpx-faq-item[open] .lpx-faq-sign{transform:rotate(45deg)}
.lpx-faq-body{padding-bottom:26px;font-size:.9688rem;color:#5A6280;max-width:70ch}

/* ─── финал + форма ────────────────────────────────────────── */
.lpx-final{position:relative;overflow:hidden;background:linear-gradient(168deg,#F2F5FF 0%,#FBFCFE 58%,#F3F9FB 100%);
  padding-block:104px}
.lpx-final-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:start}
.lpx-imperative{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.18;letter-spacing:-.035em;color:#0F1629;margin-bottom:20px;max-width:18ch}
.lpx-form{background:#FFFFFF;border:1px solid rgba(15,22,41,.09);border-radius:18px;padding:34px;
  box-shadow:0 26px 60px rgba(15,22,41,.10)}
.lpx-form h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.375rem;color:#0F1629;margin-bottom:8px}
.lpx-form-sub{font-size:.9063rem;color:#5A6280;margin-bottom:26px}
.lpx-field{margin-bottom:16px}
.lpx-field label{display:block;font-size:.8125rem;font-weight:600;color:#3D465F;margin-bottom:7px}
.lpx-field input,.lpx-field textarea{width:100%;border:1px solid rgba(15,22,41,.16);border-radius:10px;
  padding:12px 15px;font-family:'Inter',sans-serif;font-size:.9375rem;color:#0F1629;background:#FFFFFF;
  transition:border-color .15s,box-shadow .15s}
.lpx-field input::placeholder,.lpx-field textarea::placeholder{color:#6B7490}
.lpx-field input:focus,.lpx-field textarea:focus{border-color:#3761E9;box-shadow:0 0 0 3px rgba(55,97,233,.14);outline:none}
.lpx-field textarea{min-height:88px;resize:vertical}
.lpx-help{font-size:.75rem;color:#5A6280;margin-top:6px}
.lpx-consent{display:flex;gap:11px;align-items:flex-start;font-size:.8125rem;color:#5A6280;margin-block:18px 22px}
.lpx-consent input{margin-top:3px;flex-shrink:0}
.lpx-consent a{color:#2A4BB8;text-decoration:underline}
.lpx-form-micro{font-size:.8125rem;color:#5A6280;text-align:center;margin-top:16px}

/* ─── хвост и подвал ───────────────────────────────────────── */
.lpx-tail{border-top:1px solid rgba(15,22,41,.07);padding-block:52px;background:#F8F9FC}
.lpx-tail-h{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5A6280;margin-bottom:20px}
.lpx-tail-links{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 26px}
.lpx-tail-links a{font-size:.8438rem;color:#5A6280}
.lpx-tail-links a:hover{color:#0F1629}
.lpx-footer{border-top:1px solid rgba(15,22,41,.07);padding-block:34px;font-size:.875rem;color:#5A6280;background:#F8F9FC}
.lpx-footer-grid{display:flex;flex-wrap:wrap;gap:18px 44px;align-items:center;justify-content:space-between}
.lpx-footer a{color:#5A6280;text-decoration:underline}

/* ─── адаптив: явный коллапс для каждой многоколоночной сетки ─ */
@media (max-width:1040px){
  .lpx-hero-inner,.lpx-final-inner,.lpx-trap-grid{grid-template-columns:1fr;gap:44px}
  .lpx-dgrid{grid-template-columns:repeat(2,1fr)}
  .lpx-tariffs{grid-template-columns:1fr}
  .lpx-trust-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .lpx-tail-links{grid-template-columns:repeat(2,1fr)}
  .lpx-sym{grid-template-columns:1fr}
  .lpx-sym-col+.lpx-sym-col{border-left:none;border-top:1px solid rgba(15,22,41,.09)}
  .lpx-h2,.lpx-trap-q,.lpx-imperative,.lpx-sym-out{max-width:none}
}
@media (max-width:720px){
  .lpx-nav-links{display:none}
  .lpx-burger{display:block}
  /* 🔴 Замер на настоящих 390x844: стрелочные ссылки давали 19-24 px,
     телефон под формой 16 px. Пальцем это не цель. Поднимаем ПЛОЩАДЬ
     касания отступами, кегль текста при этом не трогаем. */
  .lpx-card-link{display:inline-block;padding-block:12px}
  .lpx-form-micro a,.lpx-footer a,.lpx-tail-links a{display:inline-block;padding-block:11px}
  .lpx-logo{display:inline-block;padding-block:6px}
  /* 🔴 На 390 px «Получить расчёт» в шапке ломалось на две строки —
     навык считает перенос подписи CTA прямым провалом. Сужаем сам
     элемент, а не режем слово. */
  .lpx-nav-inner{gap:12px}
  .lpx-nav-cta{font-size:.8438rem;padding:10px 14px;white-space:nowrap}
  .lpx-logo{font-size:1.2rem}
  .lpx-actionbar-tel{display:inline-block;padding-block:8px}
  /* 🪤 .lpx-consent a НЕ трогаем: inline-block на ссылке внутри
     переносящейся строки ломает строчный бокс и делает цель НИЖЕ
     (замер: 37 -> 29 px). Юр-ссылки внутри предложения остаются
     29-37 px — это принятая граница, а не недосмотр. */
  .lpx-section,.lpx-final{padding-block:64px}
  .lpx-hero{padding-block:56px 64px}
  .lpx-trust-grid{grid-template-columns:1fr;gap:20px}
  /* 🔴 Прежнее правило (max-height:150px) писалось под ШИРОКИЙ рендер
     сервера. У высокой фигуры оно даёт 53x150 — человечка не разглядеть.
     Поэтому на телефоне фигура встаёт РЯДОМ с текстом, а не под ним:
     так она читаема и не съедает вертикаль, а ответ «что вы получаете»
     остаётся в первом экране. */
  /* 🔴 Орбита 556 px в экран 390 не влезает — 41 элемент уходил за
     край и обрезался. На телефоне: одна колонка, орбита ужата,
     иконки и подписи мельче. Рядом с текстом её не поставить:
     тогда и текст, и круг становятся нечитаемы. */
  .lpx-hero-inner{grid-template-columns:1fr;gap:4px}
  .lpx-hero-art{padding-right:0}
  .lpx-orb{width:266px;height:266px}
  .lpx-orb-i{transform:rotate(calc(var(--i) * 51.4286deg)) translateY(-98px)
            rotate(calc(var(--i) * -51.4286deg))}
  .lpx-orb::before{width:196px;height:196px;margin:-98px 0 0 -98px}
  .lpx-orb-i{width:82px;height:82px;margin:-41px 0 0 -41px}
  .lpx-orb-ic{width:40px;height:40px;border-radius:13px}
  .lpx-orb-ic svg{width:20px;height:20px}
  .lpx-orb-c b{font-size:9.5px;max-width:82px;line-height:1.2}
  .lpx-orb img{height:158px}
  .lpx-h1{font-size:1.62rem;max-width:none;margin-bottom:14px}
  .lpx-sub{font-size:.9688rem;margin-bottom:14px}
  .lpx-hero{padding-block:18px 16px}
  /* три кнопки в столбик съели бы вертикаль и вытолкнули ответ
     «что вы получаете» за сгиб: два первичных ставим в ряд */
  .lpx-ctas{flex-direction:row;flex-wrap:wrap;gap:10px}
  .lpx-ctas .lpx-btn-primary{flex:1 1 45%;padding-inline:12px;font-size:1.0625rem}
  .lpx-ctas .lpx-btn-ghost{flex:1 1 100%}
  .lpx-dgrid{grid-template-columns:1fr;gap:14px}
  .lpx-tail-links{grid-template-columns:1fr}
  .lpx-actionbar-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .lpx-ctas .lpx-btn-primary,.lpx-ctas .lpx-btn-ghost{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── ДАТА ПУБЛИКАЦИИ в карточке блока «Наши внедрения» (06.09.2026) ──
   Разметку добавили в шаблон компонента project-list: у Aspro переменная
   $bActiveDate вычислялась, но не выводилась нигде, поэтому даты не было
   при SHOW_DATE=Y. Здесь только ПОЛОЖЕНИЕ.
   Замер 06.09: .project-list__item-content — position:absolute, padding
   24px (моб.) и 38px 0 35px 38px (с 992px); .project-list__item-additional-text
   резервирует справа 46px (моб.) и 133px (с 992px) — в эту полосу дата и встаёт.
   На узком экране полосы в 46px для «4 августа 2026» не хватает, поэтому там
   дата уходит вверх-вправо, где место есть. */
.PROJECTS .project-list__item-date{position:absolute;right:20px;top:20px;z-index:2;
  text-align:right;line-height:18px;white-space:nowrap;pointer-events:none}
@media screen and (min-width:992px){
  .PROJECTS .project-list__item-date{right:38px;top:auto;bottom:35px;
    /* 🔴 ширина не произвольная: полоса справа = 133px (резерв заголовка) − 38px
       (отступ карточки) = 95px. При 110px «15 декабря 2025» наезжало на длинный
       заголовок — замер по бою поймал ровно один такой случай. 90px с переносом. */
    max-width:90px;white-space:normal;line-height:20px}
}