/* velox.kg — общие стили SEO-посадочных. Шрифты: /fonts/fonts.css (Archivo + IBM Plex Mono). */
:root{
  --bg:#0A101C; --bg-tint:#0E1626; --surface:#131C30; --surface-hover:#1A2540;
  --ink:#EEF3FB; --ink-soft:#C3CDDD; --muted:#8C9BB5;
  --accent:#5E8BFF; --accent-bright:#7FA3FF; --accent-solid:#2E5BFF; --accent-solid-hover:#4A73FF;
  --deep:#060B14; --line:rgba(140,155,181,.2); --line-strong:rgba(140,155,181,.38);
  --pad:clamp(1.25rem,5vw,4.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 100;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-bright);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* header */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.8rem var(--pad);background:rgba(10,16,28,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.hdr__mark{display:flex;align-items:baseline;gap:.6rem;font-weight:800;font-size:1.05rem;
  font-variation-settings:'wdth' 118;color:var(--ink)}
.hdr__mark b{color:var(--accent-bright)}
.hdr__mark span{font-family:'IBM Plex Mono',monospace;font-size:.64rem;font-weight:400;
  letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.btn{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.6rem 1.1rem;border:1.5px solid var(--accent);color:var(--accent-bright);
  background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff;text-decoration:none}
.btn--solid{background:var(--accent-solid);color:#fff;border-color:var(--accent-solid)}
.btn--solid:hover{background:var(--accent-solid-hover);border-color:var(--accent-solid-hover)}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
main{display:block}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted);
  padding:1rem var(--pad) 0;max-width:1080px;margin:0 auto}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-bright)}
.crumbs span{color:var(--ink-soft)}

/* hero */
.hero{padding:2.4rem 0 2rem;border-bottom:1px solid var(--line)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.04;font-weight:800;
  font-variation-settings:'wdth' 110;letter-spacing:-.02em;margin:.7rem 0 0;max-width:20ch;color:var(--ink)}
.hero__lede{margin-top:1.1rem;max-width:62ch;color:var(--ink-soft);font-size:clamp(1rem,1.9vw,1.15rem)}
.hero__lede p{margin-top:.6rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* content sections */
.sec{padding:2.4rem 0;border-bottom:1px solid var(--line)}
.sec h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;font-variation-settings:'wdth' 106;
  letter-spacing:-.015em;margin-bottom:.9rem;color:var(--ink);max-width:26ch}
.sec p{max-width:70ch;color:var(--ink-soft);margin-bottom:.9rem}
.sec p:last-child{margin-bottom:0}
.list{list-style:none;display:grid;gap:.6rem;margin:.6rem 0 0;max-width:70ch}
.list li{position:relative;padding-left:1.5rem;color:var(--ink-soft)}
.list li::before{content:"";position:absolute;left:0;top:.6rem;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}

/* related links */
.related{display:grid;gap:.7rem;margin-top:.4rem}
@media(min-width:640px){.related{grid-template-columns:repeat(2,1fr)}}
.related a{display:block;padding:.9rem 1.1rem;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);font-weight:600;transition:background .2s}
.related a:hover{background:var(--surface-hover);text-decoration:none}
.related a::after{content:" →";color:var(--accent-bright)}

/* faq */
.faq{margin-top:.4rem;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;padding:1.25rem 0;font-size:1.05rem;font-weight:700;font-variation-settings:'wdth' 104;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--accent-bright);
  font-size:1.1rem;flex-shrink:0;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--accent-bright)}
.faq__a{padding:0 0 1.25rem;color:var(--ink-soft);max-width:70ch;line-height:1.6}

/* CTA form */
.cta{padding:2.6rem 0}
.cta__box{border:1px solid var(--line-strong);background:var(--surface);padding:clamp(1.3rem,4vw,2.2rem)}
.cta__box h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;font-variation-settings:'wdth' 106;margin-bottom:.5rem}
.cta__box p{color:var(--ink-soft);max-width:60ch;margin-bottom:1.4rem}
.form{display:grid;gap:.9rem;max-width:640px}
@media(min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{background:var(--bg-tint);border:1.5px solid var(--line-strong);color:var(--ink);
  padding:.75rem .85rem;font-family:'Archivo',sans-serif;font-size:.95rem;border-radius:0}
.field textarea{min-height:100px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form__note{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);line-height:1.6}
.alt{margin-top:1rem;font-size:.92rem;color:var(--ink-soft)}
.alt a{font-weight:600}

/* footer */
.ftr{padding:2rem var(--pad);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);background:var(--deep);
  border-top:1px solid var(--line)}
.ftr a{color:var(--muted)}
.ftr a:hover{color:var(--accent-bright)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.001ms!important}}

/* футер-каталог: навигация ко всем страницам с любой страницы */
.fcat{max-width:1080px;margin:0 auto;padding:2.4rem var(--pad);display:grid;gap:1.4rem 2rem;
  grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);background:var(--bg-tint)}
@media(min-width:760px){.fcat{grid-template-columns:repeat(5,1fr)}}
.fcat b{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.7rem;font-weight:600}
.fcat a{display:block;color:var(--ink-soft);font-size:.88rem;padding:.22rem 0}
.fcat a:hover{color:var(--accent-bright);text-decoration:none}


/* --- навигация в шапке + мобильное меню (добавлено 25.08: у посадочных не было
   навигации вообще — только каталог в подвале) --- */
.hdr__nav{display:none;gap:1.4rem;margin:0 auto}
.hdr__nav a{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:color .2s}
.hdr__nav a:hover{color:var(--accent-bright);text-decoration:none}
@media(min-width:960px){.hdr__nav{display:flex}}
.hdr__right{display:flex;align-items:center;gap:.6rem}
.hdr__burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:0 0 auto;padding:0;background:transparent;border:1px solid var(--line-strong);border-radius:7px;
  color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.hdr__burger:hover{border-color:var(--accent);color:var(--accent-bright)}
.hdr__burger i{position:relative;display:block;width:17px;height:1.5px;background:currentColor;transition:background .2s}
.hdr__burger i::before,.hdr__burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
  background:currentColor;transition:transform .25s}
.hdr__burger i::before{top:-6px}
.hdr__burger i::after{top:6px}
.hdr__burger[aria-expanded="true"] i{background:transparent}
.hdr__burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
@media(min-width:960px){.hdr__burger{display:none}}
.hdr__menu{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
  padding:.3rem var(--pad) 1.1rem;background:rgba(10,16,28,.98);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hdr__menu.is-open{display:flex}
.hdr__menu b{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;font-weight:400;
  text-transform:uppercase;color:var(--muted);padding:1rem .2rem .3rem}
.hdr__menu a{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.06em;
  color:var(--ink-soft);padding:.75rem .2rem;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s}
.hdr__menu a:last-child{border-bottom:0}
.hdr__menu a:hover,.hdr__menu a:focus-visible{color:var(--accent-bright);text-decoration:none}
@media(min-width:960px){.hdr__menu,.hdr__menu.is-open{display:none}}
@media(max-width:560px){.hdr__mark span{display:none}.hdr{gap:.5rem}}


/* === VELOX DYN landing v1 === */
/* === velox.kg · липкая мобильная панель действий (только <760px) === */
.mbar{display:none}

@media (max-width:759.98px){
  /* z-index:40 — НИЖЕ .hdr (z-index:50). Мобильное меню шапки (#hdr-menu)
     лежит внутри стекового контекста .hdr; на низких вьюпортах (ландшафт
     телефона: ширина <760px, высота <450px) его max-height:72vh доходит до
     низа экрана. При z-index:60 панель перекрывала бы хвост открытого меню.
     40 всё ещё выше обычного контента (z-index у него не задан). */
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(14,22,38,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--line-strong);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(115%);visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s}
  /* will-change держим только пока панель на экране, иначе композитный слой
     висит на каждой мобильной посадочной при скрытой панели */
  .mbar[data-on="1"]{transform:none;visibility:visible;will-change:transform;
    transition:transform .22s ease, visibility 0s linear 0s}
  /* чат velox-chat.js открыт — панель уступает место диалогу */
  body.vx-chat-open .mbar[data-on="1"]{transform:translateY(115%);visibility:hidden;
    transition:transform .18s ease, visibility 0s linear .18s}

  /* Фиксированная полоса закрывает низ вьюпорта: без этого элемент, доскролленный
     браузером при переходе по Tab, окажется ПОД панелью (WCAG 2.4.11).
     scroll-padding-top намеренно НЕ задаём — сложился бы с scroll-margin-top у #zayavka. */
  html{scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom))}

  .mbar__i{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:56px;padding:.4rem .35rem;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:clamp(.66rem,2.6vw,.7rem);letter-spacing:.06em;text-transform:uppercase;
    white-space:nowrap;color:var(--ink-soft);text-decoration:none;
    border-right:1px solid var(--line);-webkit-tap-highlight-color:transparent}
  .mbar__i:last-child{border-right:0}
  /* панель живёт только на тач-экранах: :hover тут залипает после тапа и
     показывает ложно «нажатую» кнопку. Отдаём hover только указателю с мышью. */
  @media (hover:hover){
    .mbar__i:hover{background:var(--surface-hover);color:var(--ink);text-decoration:none}
    .mbar__i--cta:hover{background:var(--accent-solid-hover);color:#fff}
  }
  .mbar__i:active{background:var(--surface-hover);color:var(--ink);text-decoration:none}
  .mbar__i:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-3px}
  .mbar__i svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mbar__i--cta{background:var(--accent-solid);color:#fff;border-right:0}
  .mbar__i--cta:active{background:var(--accent-solid-hover);color:#fff}

  /* панель не должна закрывать подвал: продлеваем его собственную тёмную подложку.
     Правило статическое — высота резервируется сразу, нулевой CLS. */
  .ftr{padding-bottom:calc(2rem + 56px + env(safe-area-inset-bottom))}

  /* круглая кнопка чата (velox-chat.js) поднимается над панелью */
  body.mbar-on .vx-btn{bottom:calc(56px + env(safe-area-inset-bottom) + 14px)}

  /* якорь к форме с поправкой на липкую шапку (шапка с бургером ≈70px) */
  #zayavka{scroll-margin-top:76px}
}

@media (max-width:359.98px){.mbar__i svg{display:none}}

@media (max-width:759.98px) and (prefers-reduced-motion:reduce){
  .mbar,.mbar[data-on="1"],body.vx-chat-open .mbar[data-on="1"]{transition:none}
}

@media print{.mbar{display:none!important}}

/* === velox.kg · оглавление посадочной («На этой странице») === */
/* Слот фиксированной высоты: место под блок зарезервировано ДО работы JS → нулевой CLS.
   Сам блок позиционируется абсолютно и при раскрытии ложится поверх контента.
   ВНИМАНИЕ: правило вида .ptoc:empty{display:none} здесь сознательно НЕ ставится —
   оно вернуло бы сдвиг макета (+56px) на любом кадре, отрисованном до выполнения
   скрипта в конце body. Разменяно в пользу нулевого CLS. */
.ptoc{position:relative;max-width:1080px;margin:1.5rem auto 0;padding:0 var(--pad);height:56px}
.ptoc[data-empty="1"]{display:none}
.ptoc__box{position:absolute;top:0;left:var(--pad);right:var(--pad);z-index:20;
  border:1px solid var(--line-strong);background:var(--bg-tint);padding:0 1rem}
.ptoc[data-open="1"] .ptoc__box{padding-bottom:.7rem;max-height:min(70vh,520px);
  overflow-y:auto;overscroll-behavior:contain}

.ptoc__ttl,.ptoc__tgl{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ptoc__ttl{display:none;margin:0 0 .5rem}
.ptoc__tgl{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;min-height:54px;padding:0;margin:0;
  background:transparent;border:0;color:var(--muted);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.ptoc__tgl::after{content:"+";font-size:1.05rem;line-height:1;color:var(--accent-bright);
  flex:0 0 auto;transition:transform .2s}
.ptoc[data-open="1"] .ptoc__tgl{color:var(--ink-soft)}
.ptoc[data-open="1"] .ptoc__tgl::after{transform:rotate(45deg)}

.ptoc__list{list-style:none;display:none;counter-reset:ptoc;margin:0;padding:0 0 .2rem}
.ptoc[data-open="1"] .ptoc__list{display:block}
.ptoc__list li{counter-increment:ptoc}
.ptoc__list a{display:flex;align-items:baseline;gap:.7rem;
  min-height:44px;padding:.45rem 0 .45rem .7rem;margin-left:-.7rem;
  border-left:2px solid transparent;
  color:var(--ink-soft);font-size:.92rem;line-height:1.45;text-decoration:none;
  transition:color .18s,border-color .18s}
.ptoc__list a::before{content:counter(ptoc,decimal-leading-zero);flex:0 0 auto;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.66rem;color:var(--muted);
  transition:color .18s}
.ptoc__list a:hover{color:var(--ink);text-decoration:none}
.ptoc__list a.is-cur{color:var(--accent-bright);border-left-color:var(--accent)}
.ptoc__list a.is-cur::before{color:var(--accent)}

/* поправка на липкую шапку при переходе по якорю (html{scroll-behavior:smooth} уже есть).
   Шапка с бургером: padding .8rem×2 + кнопка 44px + бордер ≈ 71px — 76px её перекрывают. */
.ptoc-target{scroll-margin-top:76px}

/* Широкий десктоп: боковая липкая колонка в левом поле, слот в потоке схлопывается.
   1460px — минимум, при котором 200px колонки помещаются левее текстовой колонки
   (max-width 1080 + --pad 72) и не наезжают на текст.
   z-index:40 < .hdr{z-index:50}: шапка и её меню всегда выше оглавления. */
@media (min-width:1460px){
  .ptoc{height:0;margin:0;padding:0}
  .ptoc__box{position:fixed;top:104px;left:max(1rem,calc(50vw - 692px));right:auto;
    width:200px;max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
    z-index:40;background:transparent;border:0;border-left:1px solid var(--line-strong);
    padding:.2rem 0 .2rem 1rem}
  .ptoc[data-open="1"] .ptoc__box{padding-bottom:.2rem;max-height:calc(100vh - 150px)}
  .ptoc__ttl{display:block}
  .ptoc__tgl{display:none}
  .ptoc__list,.ptoc[data-open="0"] .ptoc__list{display:block}
  .ptoc__list a{font-size:.86rem;min-height:0;padding-top:.35rem;padding-bottom:.35rem}
}

@media print{.ptoc{display:none!important}}