/* Собрано scripts/build-theme.py из prototypes/src/shell.css
   и theme/src/site.css. Руками не править — перезапишется. */

/* ── Схема «Монохром». База тёмная, светлая выводится из неё. ───── */
:root{
  --bg:#0E0F11; --surface:#16181B; --surface-2:#1D2024;
  --text:#E9EBEE; --text-2:#A2A7AD; --text-3:#71767C;
  --line:rgba(233,235,238,.14); --line-soft:rgba(233,235,238,.08);
  --chrome:rgba(14,15,17,.78);
  --accent:#E9EBEE; --accent-text:#0E0F11; --accent-hover:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.85);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 24px 52px -22px rgba(0,0,0,.95);
  --frame:#050607;
  --scrim:rgba(5,6,7,.52);
  --top-h:61px;   /* высота шапки: 36px кнопки + 12px полей сверху и снизу + линия */
  /* Инверсный слой карточек */
  --inv-bg:#F2F4F6; --inv-text:#121417; --inv-text-2:#565C63;
  --inv-line:rgba(18,20,23,.14);
  /* Подсветка кода НА инверсном слое (тёмный код на светлом) */
  --oc-text:#2A2F35; --oc-dim:#8A9098; --oc-str:#7A4FB5; --oc-fn:#2E6FA8;
  --oc-key:#A8690B; --oc-num:#1F7A5C; --oc-ok:#2E8B57;
  /* Терминал — собственный материал, всегда тёмный */
  --code-bg:#08090A; --code-bg-2:#111316; --code-line:rgba(233,235,238,.1);
  --c-prompt:#7FC08A; --c-flag:#D9B75C; --c-str:#B9A0DC;
  --c-num:#7FB6CE; --c-ok:#7FC08A; --c-dim:#6B7076;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F7F8F9; --surface:#FFFFFF; --surface-2:#EDEFF1;
  --text:#121417; --text-2:#4B5158; --text-3:#7C838A;
  --line:rgba(18,20,23,.13); --line-soft:rgba(18,20,23,.07);
  --chrome:rgba(247,248,249,.8);
  --accent:#121417; --accent-text:#F7F8F9; --accent-hover:#000000;
  --shadow:0 1px 2px rgba(18,20,23,.05), 0 10px 28px -14px rgba(18,20,23,.24);
  --shadow-lift:0 2px 4px rgba(18,20,23,.06), 0 20px 44px -20px rgba(18,20,23,.3);
  --frame:#E4E7EA; --scrim:rgba(18,20,23,.24);
  --inv-bg:#121417; --inv-text:#F2F4F6; --inv-text-2:#A2A7AD;
  --inv-line:rgba(242,244,246,.14);
  --oc-text:#E9EBEE; --oc-dim:#6B7076; --oc-str:#B9A0DC; --oc-fn:#8FBCD4;
  --oc-key:#D9B75C; --oc-num:#7FB6CE; --oc-ok:#7FC08A;
}}
:root[data-theme="light"]{
  --bg:#F7F8F9; --surface:#FFFFFF; --surface-2:#EDEFF1;
  --text:#121417; --text-2:#4B5158; --text-3:#7C838A;
  --line:rgba(18,20,23,.13); --line-soft:rgba(18,20,23,.07);
  --chrome:rgba(247,248,249,.8);
  --accent:#121417; --accent-text:#F7F8F9; --accent-hover:#000000;
  --shadow:0 1px 2px rgba(18,20,23,.05), 0 10px 28px -14px rgba(18,20,23,.24);
  --shadow-lift:0 2px 4px rgba(18,20,23,.06), 0 20px 44px -20px rgba(18,20,23,.3);
  --frame:#E4E7EA; --scrim:rgba(18,20,23,.24);
  --inv-bg:#121417; --inv-text:#F2F4F6; --inv-text-2:#A2A7AD;
  --inv-line:rgba(242,244,246,.14);
  --oc-text:#E9EBEE; --oc-dim:#6B7076; --oc-str:#B9A0DC; --oc-fn:#8FBCD4;
  --oc-key:#D9B75C; --oc-num:#7FB6CE; --oc-ok:#7FC08A;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--frame); color:var(--text);
  font:400 16px/1.55 Onest,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; font-optical-sizing:auto}
:focus-visible{outline:2px solid var(--text); outline-offset:3px; border-radius:6px}

/* Плавная смена оформления там, где нет View Transitions */
body,.phone,.top,.bcard,.plan,.form,.term,.menu,.field input,
.icon-btn,.fact,footer{transition:background-color 340ms ease, color 340ms ease,
  border-color 340ms ease}
::view-transition-old(root),::view-transition-new(root){
  animation:none; mix-blend-mode:normal}

.tech{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums}
.tech-w{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums}

.viewport{min-height:100vh; display:flex; flex-direction:column; align-items:center; gap:14px}
/* Пока меню открыто, страница под ним не едет */
body.locked{position:fixed; left:0; right:0; overflow:hidden}
.caption{display:none}
.phone{width:100%; background:var(--bg); overflow:hidden; position:relative}
@media (min-width:760px){
  .viewport{padding:34px 16px 46px}
  .caption{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-3)}
  .phone{max-width:412px; border-radius:30px; box-shadow:var(--shadow-lift);
    border:1px solid var(--line)}
}

/* ── Типографика ─────────────────────────────────────────────────── */
.wrap{padding-inline:20px}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600}
h1{font-size:35px; line-height:1.06; letter-spacing:-.032em; font-weight:700}
h2{font-size:31px; line-height:1.1; letter-spacing:-.032em; font-weight:700}
h3{font-size:18px; line-height:1.26; letter-spacing:-.014em}
p{margin:0}
.lead{font-size:16.5px; line-height:1.5; color:var(--text-2)}
.small{font-size:14.5px; line-height:1.5; color:var(--text-2)}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3)}
section{padding:104px 0 84px}   /* заголовок не должен липнуть к блоку выше */
section+section{border-top:1px solid var(--line-soft)}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:46px}

/* ── Шапка ───────────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:60; display:flex; align-items:center;
  justify-content:space-between; padding:12px 16px 12px 20px; background:var(--chrome);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line-soft)}
.logo-link{display:block; color:var(--text); line-height:0}
.top .logo{display:block; height:17px; width:auto; color:var(--text)}
.tools{display:flex; align-items:center; gap:6px}
.icon-btn{appearance:none; background:transparent; border:1px solid var(--line);
  border-radius:10px; width:36px; height:36px; display:grid; place-items:center;
  cursor:pointer; color:var(--text); padding:0; will-change:transform}
.icon-btn:active{background:var(--surface-2)}
.icon-btn.pressed{transform:scale(.94)}
.icon-btn svg{width:17px; height:17px; display:block}
.bar{stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1), opacity 180ms ease}
.is-open .b1{transform:translateY(5px) rotate(45deg)}
.is-open .b2{opacity:0}
.is-open .b3{transform:translateY(-5px) rotate(-45deg)}

/* ── Слой поверх страницы: меню и чат ───────────────────────────── */
.layer{position:fixed; inset:0; z-index:80; pointer-events:none}
@media (min-width:760px){
  .layer{left:50%; width:412px; margin-left:-206px; top:34px; bottom:46px;
    border-radius:30px; overflow:hidden}
}
.layer > *{pointer-events:auto}

/* Меню на весь экран */
.menu{position:absolute; inset:0; background:var(--bg); display:flex;
  flex-direction:column; padding:62px 20px 22px; overflow-y:auto;
  overscroll-behavior:contain; opacity:0; pointer-events:none;
  transform:scale(1.02); transition:opacity 260ms ease, transform 320ms cubic-bezier(.22,.61,.36,1)}
.menu.on{opacity:1; pointer-events:auto; transform:none}
.menu ul{list-style:none; margin:auto 0; padding:0; display:flex; flex-direction:column; gap:2px}
.menu a{display:flex; align-items:baseline; gap:12px; padding:4px 0; color:var(--text);
  text-decoration:none; font-size:23px; font-weight:600; letter-spacing:-.024em;
  opacity:0; transform:translateY(10px)}
.menu.on a{opacity:1; transform:none;
  transition:opacity 420ms ease var(--d,0ms), transform 420ms cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.menu a i{font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); font-family:"JetBrains Mono",ui-monospace,monospace;}
.menu-close{position:absolute; top:12px; right:16px; opacity:0;
  transition:opacity 220ms ease 100ms}
.menu.on .menu-close{opacity:1}
.menu-foot{display:flex; flex-direction:column; gap:4px; padding-top:18px;
  border-top:1px solid var(--line-soft); font-size:14px; color:var(--text-2)}
.menu-foot a{color:var(--text-2); text-decoration:none; font-size:14px; font-weight:500;
  letter-spacing:0}

/* ── Герой ───────────────────────────────────────────────────────── */
.hero{position:relative; min-height:calc(100vh - var(--top-h));
  min-height:calc(100svh - var(--top-h));
  padding-top:24px; padding-bottom:78px; display:flex; flex-direction:column;
  justify-content:center; gap:13px}
.hero .cta-row{padding-top:26px}
/* skiper39 · CrowdCanvas — толпа Open Peeps по низу первого экрана.
   canvas — заменяемый элемент: при width:auto он берёт размер битмапа,
   поэтому размеры задаём явно. Содержимое героя поверх полотна. */
.crowd{position:absolute; left:0; bottom:0; width:100%; height:100%;
  display:block; pointer-events:none; z-index:0}
.hero:has(.crowd){justify-content:flex-start; padding-bottom:20px}
.hero > :not(canvas){position:relative; z-index:1}
/* На невысоких экранах первый экран поджимается, иначе кнопки
   и толпа уезжают за сгиб */
@media (max-height:780px){
  .hero{padding-top:10px; padding-bottom:64px; gap:10px}
  .hero h1{font-size:30px}
  .hero .lead{font-size:15px}
  .hero .cta-row{padding-top:14px}
  .tabpanel{padding-top:12px; gap:10px}
  .crowd{height:54px}
}
/* Совсем низкие экраны (iPhone SE и подобные): украшение уступает
   место содержимому, толпа прячется */
@media (max-height:700px){
  .hero{padding-bottom:14px; gap:8px}
  .hero h1{font-size:27px}
  .hero .lead{font-size:14.5px}
  .hero .cta-row{padding-top:12px; gap:7px}
  .hero .btn{padding-top:12px; padding-bottom:12px}
  .tabpanel{padding-top:10px; gap:9px}
  .crowd{display:none}
}

/* Внутренние страницы: герой без первого экрана на всю высоту.
   Сюда приходят за содержимым, растягивать шапку незачем. */
.hero-slim{min-height:0; padding-top:46px; padding-bottom:0;
  justify-content:flex-start; gap:14px}
.hero-slim .lead{max-width:40ch}

/* ── Табы: что именно мы держим ──────────────────────────────────
   Подчёркивание переезжает между вкладками — тот же язык, что и у
   ссылок, только линия не появляется, а перемещается. */
.tabs{padding-top:6px}
.tabrow{position:relative; display:flex; gap:2px; margin-left:-12px;
  border-bottom:1px solid var(--line-soft); overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none}
.tabrow::-webkit-scrollbar{display:none}
.tab{appearance:none; border:0; background:transparent; font:inherit; font-size:13px;
  font-weight:500; color:var(--text-3); padding:9px 12px 12px; cursor:pointer;
  white-space:nowrap; transition:color 200ms ease}
.tab:hover{color:var(--text-2)}
.tab.is-on{color:var(--text)}
.tabmark{position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--text); pointer-events:none;
  transition:transform 420ms cubic-bezier(.32,1.22,.5,1),
             width 420ms cubic-bezier(.32,1.22,.5,1)}
.tabpanel{padding-top:15px; display:flex; flex-direction:column; gap:13px}
.tabpanel p{font-size:15px; line-height:1.5; color:var(--text-2); max-width:40ch}
.tabpanel[hidden]{display:none}
.tabpanel.in{animation:tabin 420ms cubic-bezier(.22,.61,.36,1)}
@keyframes tabin{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
.tabfacts{margin:0; display:flex; flex-wrap:wrap; gap:8px}
.tabfacts > div{display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  border:1px solid var(--line); border-radius:11px; padding:7px 11px;
  background:var(--surface); min-width:96px}
.tabfacts dt{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3)}
.tabfacts dd{margin:0; font-size:14px; color:var(--text)}
.hero .lead{max-width:34ch}
.cta-row{display:flex; flex-direction:column; gap:9px; padding-top:8px}
.btn{appearance:none; border:0; font:inherit; font-weight:600; font-size:16px;
  padding:15px 20px; border-radius:13px; text-align:center; text-decoration:none;
  cursor:pointer; touch-action:manipulation; will-change:transform;
  transition:transform 110ms cubic-bezier(.22,.61,.36,1), background-color 140ms ease}
.btn-primary{background:var(--accent); color:var(--accent-text)}
.btn-primary:active{background:var(--accent-hover)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn-ghost:active{background:var(--surface-2)}
.btn.pressed{transform:scale(.972)}

/* ── Терминал ────────────────────────────────────────────────────── */
.term{background:var(--code-bg); border:1px solid var(--code-line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-lift)}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:var(--code-bg-2); border-bottom:1px solid var(--code-line)}
.term-bar i{width:9px; height:9px; border-radius:50%; background:#2A2E33; display:block}
.term-bar span{margin-left:6px; font-size:9.5px; color:var(--c-dim); letter-spacing:.06em}
.term-body{padding:16px 15px 18px; font-size:11px; line-height:2; color:#E9EBEE;
  overflow-x:auto}
.term-body div{white-space:pre; min-height:2em}
.p{color:var(--c-prompt)} .k{color:var(--c-flag)} .s{color:var(--c-str)}
.n{color:var(--c-num)} .ok{color:var(--c-ok)} .c{color:var(--c-dim)}
.caret{display:inline-block; width:6px; height:12px; background:var(--c-prompt);
  vertical-align:-1px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ── Карусели ────────────────────────────────────────────────────── */
.rail{position:relative; margin:0 -20px}
.railview{overflow:hidden; padding:4px 0 2px; touch-action:pan-y; cursor:grab}
.railview.dragging{cursor:grabbing}
.railtrack{display:flex; gap:12px; padding:0 20px; will-change:transform}
.dots{display:flex; gap:7px; padding-top:20px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--line); border:0; padding:0;
  cursor:pointer; transition:width 260ms cubic-bezier(.22,.61,.36,1), background-color 200ms}
.dot[aria-current="true"]{width:20px; border-radius:3px; background:var(--text)}

/* Карточка-баннер: единый стиль для всего, что входит в услугу.
   Код лежит прямо на карточке — без вложенной коробки. */
.bcard{flex:0 0 314px; background:var(--inv-bg); color:var(--inv-text);
  border-radius:22px; padding:22px 20px 20px; display:flex; flex-direction:column;
  gap:11px; min-height:352px}
.bcard .eyebrow{color:var(--inv-text-2)}
.bcard h3{font-size:21px; line-height:1.18; letter-spacing:-.02em; color:var(--inv-text)}
.bcard p{font-size:14px; line-height:1.45; color:var(--inv-text-2)}
.bcode{margin-top:auto; padding-top:16px; border-top:1px solid var(--inv-line);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px; line-height:1.95; color:var(--oc-text); overflow-x:auto}
.bcode div{white-space:pre}
.oc-c{color:var(--oc-dim)} .oc-s{color:var(--oc-str)} .oc-f{color:var(--oc-fn)}
.oc-k{color:var(--oc-key)} .oc-n{color:var(--oc-num)} .oc-ok{color:var(--oc-ok)}
.btags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.btags span{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.04em;
  color:var(--inv-text-2); border:1px solid var(--inv-line); border-radius:6px; padding:4px 7px}

/* Карточка тарифа */
.plan{flex:0 0 268px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:14px}
.plan.featured{border-color:var(--text)}
.plan-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.badge{font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-text); background:var(--accent); border-radius:6px; padding:5px 7px;
  white-space:nowrap}
.price{display:flex; align-items:baseline; gap:6px}
.price .v{font-size:29px; font-weight:600; letter-spacing:-.02em; line-height:1}
.price .u{font-size:10.5px; color:var(--text-3)}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.plan li{display:flex; justify-content:space-between; gap:12px; font-size:14.5px;
  color:var(--text-2); padding-bottom:9px; border-bottom:1px solid var(--line-soft)}
.plan li:last-child{border-bottom:0; padding-bottom:0}
.plan li b{color:var(--text); font-weight:500; white-space:nowrap; font-size:11.5px}
.plans-note{font-size:10.5px; color:var(--text-3); padding-top:18px;
  letter-spacing:.02em}

/* ── Охват услуги: ключ слева, смысл справа ─────────────────────── */
.scope{display:flex; flex-direction:column}
.scope-row{display:grid; grid-template-columns:78px 1fr; gap:14px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line-soft)}
.scope-row:last-child{border-bottom:0}
.scope-key{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.04em;
  color:var(--text-3)}
.scope-row b{font-weight:600; font-size:15.5px; display:block; margin-bottom:3px}
.scope-row p{font-size:14px; line-height:1.45; color:var(--text-2)}

/* ── Боли и шаги ─────────────────────────────────────────────────── */
.pains,.steps{display:flex; flex-direction:column}
.pain,.step{display:flex; gap:15px; padding:18px 0; border-bottom:1px solid var(--line-soft)}
.pain:last-child,.step:last-child{border-bottom:0}
.pain em{font-size:10.5px; color:var(--text-3); font-style:normal; flex:none; padding-top:3px}
.pain p{font-size:15.5px; line-height:1.45}
.steps{counter-reset:s}
.step::before{counter-increment:s; content:"0" counter(s); flex:none; font-size:10.5px;
  color:var(--text-3); padding-top:4px;
  font-family:"JetBrains Mono",ui-monospace,monospace;}
.step h3{margin-bottom:5px; font-size:17px}

/* ── Двери в услуги: четыре входа на главной ─────────────────────
   Не нумеруем: это не последовательность, а равноправные входы. */
.doors{display:flex; flex-direction:column; gap:10px}
.door{display:flex; align-items:flex-start; gap:14px; padding:20px;
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  text-decoration:none; color:var(--text);
  transition:border-color 220ms ease, transform 220ms cubic-bezier(.22,.61,.36,1)}
a.door:hover{border-color:var(--text-3)}
div.door{cursor:default}
a.door:active{transform:scale(.99)}
.door b{display:block; font-size:17.5px; font-weight:600; letter-spacing:-.014em}
.door p{margin:7px 0 0; font-size:14.5px; line-height:1.5; color:var(--text-2)}
.door-tag{display:inline-block; margin-top:11px; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3)}
.door-go{flex:none; width:26px; height:26px; border-radius:50%; margin-top:2px;
  border:1px solid var(--line); position:relative;
  transition:background-color 220ms ease, border-color 220ms ease}
.door-go::before,.door-go::after{content:""; position:absolute; background:currentColor}
.door-go::before{left:8px; top:12px; width:10px; height:1px}
.door-go::after{right:8px; top:9px; width:1px; height:7px;
  transform:rotate(-45deg); transform-origin:100% 0}
.door:hover .door-go{border-color:var(--text-3)}

/* ── Прайс: строка «что» слева, «сколько» справа ─────────────────── */
.price-list{display:flex; flex-direction:column}
.price-row{display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; padding:16px 0; border-top:1px solid var(--line-soft)}
.price-row:last-child{border-bottom:1px solid var(--line-soft)}
.price-row b{display:block; font-size:16px; font-weight:600; letter-spacing:-.01em}
.price-row p{margin:5px 0 0; font-size:13.5px; line-height:1.45; color:var(--text-2)}
.price-val{flex:none; font-size:14px; color:var(--text); white-space:nowrap}

/* ── Форма: поля без коробок, подпись уезжает наверх ─────────────── */
.form{display:flex; flex-direction:column; gap:26px}
.field{position:relative; padding-top:19px}
.field input{font:inherit; font-size:17px; color:var(--text); background:transparent;
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:6px 0 9px;
  width:100%; transition:border-color 220ms ease}
.field input:focus{outline:0; border-bottom-color:var(--text)}
.field label{position:absolute; left:0; top:19px; font-size:17px; color:var(--text-3);
  pointer-events:none; transform-origin:0 0;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1), color 200ms ease}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-21px) scale(.62); color:var(--text-3);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.12em; text-transform:uppercase}
.field .hint{position:absolute; right:0; bottom:9px; font-size:12px; color:var(--text-3);
  opacity:0; transition:opacity 200ms ease}
.field input:focus ~ .hint{opacity:1}
.form .btn{margin-top:4px}
.consent{font-size:12.5px; color:var(--text-3); line-height:1.45}
.consent a{color:var(--text-2)}

/* ── Подвал ──────────────────────────────────────────────────────── */
footer{padding:46px 0 0; border-top:1px solid var(--line-soft)}
.foot-rule{display:flex; align-items:center; gap:0; padding:0 20px}
.foot-rule::before,.foot-rule::after{content:""; height:1px; background:var(--line); flex:1}
.foot-rule i{width:5px; height:5px; background:var(--text-3); transform:rotate(45deg);
  margin:0 10px; display:block}
.foot-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 20px 0}
.foot-row .logo{height:14px; width:auto; color:var(--text); display:block; flex:none}
.foot-copy{font-size:12px; color:var(--text-3); text-align:right; line-height:1.6}
.foot-nav{display:flex; flex-wrap:wrap; gap:9px 16px; padding:26px 20px 0}
.foot-nav a{color:var(--text-2); text-decoration:none; font-size:14px}
.foot-contacts{display:flex; flex-direction:column; gap:5px; padding:24px 20px 0;
  font-size:14px}
.foot-contacts a{color:var(--text); text-decoration:none}
/* Крупная надпись во всю ширину. Видно две трети: нижняя треть уходит
   за край страницы. Процентный отступ считается от ширины контейнера,
   а высота надписи — 23.08% от неё, треть этого и есть -7.7%. */
.bigmark{margin-top:34px; padding:0 16px; overflow:hidden; color:var(--text)}
.bigmark svg{display:block; width:100%; height:auto; margin-bottom:-7.7%}


/* ── skiper40 · CssLink: подчёркивание выезжает слева направо,
   а уходит вправо — линия «уезжает» туда же, откуда пришла ───────── */
.menu a,.menu-foot a,.foot-nav a,.foot-contacts a,.consent a{
  position:relative; text-decoration:none}
.menu a::after,.menu-foot a::after,.foot-nav a::after,
.foot-contacts a::after,.consent a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1)}
.menu a::after{height:2px; bottom:3px}
.menu a:hover::after,.menu a:focus-visible::after,
.menu-foot a:hover::after,.menu-foot a:focus-visible::after,
.foot-nav a:hover::after,.foot-nav a:focus-visible::after,
.foot-contacts a:hover::after,.foot-contacts a:focus-visible::after,
.consent a:hover::after,.consent a:focus-visible::after{
  transform:scaleX(1); transform-origin:0 50%}

/* ── skiper27 · Rolling Text: буквы выкатываются из-под строки.
   Только снизу — страницу листают вниз, и текст едет ей навстречу.
   Стаггер от середины к краям, задержка приходит в --d. ────────── */
/* слово — inline-block, чтобы не рвалось посреди себя; выравнивание
   по верху, иначе базовая линия слова роняет строку заголовка вниз */
.roll .w{display:inline-block; vertical-align:top; white-space:nowrap}
/* i — блок: иначе он встаёт на базовую линию и добавляет в маску
   высоту подстрочника, отчего строки заголовка разъезжаются */
.roll .ch{display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.22em; margin-bottom:-.22em}
.roll .ch > i{display:block; font-style:normal; transform:translateY(115%);
  transition:transform 720ms cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.roll.in .ch > i{transform:none}
@media (prefers-reduced-motion:reduce){
  .roll .ch > i{transform:none; transition:none}
}

.rise{opacity:0}
.rise.in{opacity:1; transition:opacity 520ms cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .rise,.rise.in{opacity:1; transition:none}
  .tabmark{transition:none}
  .tabpanel.in{animation:none}
  .btn,.dot,.icon-btn,.menu a{transition:opacity 180ms ease}
  .btn.pressed,.icon-btn.pressed{transform:none; opacity:.82}
  .caret{animation:none}
  .walking .bob,.walking .arm-swing,.walking .arm-wave,.is-jumping .figure,
  .is-waving .arm-wave,.is-asleep .breathe{animation:none}
  .is-asleep .z1{opacity:1}
  .menu{transition:opacity 200ms ease}
}
@media (prefers-reduced-transparency:reduce){
  .top{background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none}
}

/* ═══════════════════════════════════════════════════════════════════
   Слой сайта поверх макета.

   prototypes/src/shell.css — источник правды по виду и мобильной
   вёрстке; править надо там. Здесь только то, чего в макете быть
   не могло: снятие рамки «телефона», десктоп и страницы, которых
   в прототипах нет — блог, статья, поиск, 404.
   ═══════════════════════════════════════════════════════════════ */

/* ── Рамка предпросмотра снимается ───────────────────────────────
   В макете страница жила внутри «телефона» шириной 412px. На сайте
   этой коробки нет: фон уезжает на body, слой меню растягивается
   на весь экран. */
body{background:var(--bg)}
.viewport,.phone{max-width:none; border:0; border-radius:0; box-shadow:none;
  overflow:visible; padding:0}
@media (min-width:760px){
  .viewport{padding:0}
  .caption{display:none}
  .phone{max-width:none; border:0; border-radius:0; box-shadow:none}
  .layer{left:0; width:100%; margin-left:0; top:0; bottom:0; border-radius:0}
}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent);
  color:var(--accent-text); padding:12px 18px; border-radius:0 0 12px 0; font-weight:600}
.skip:focus{left:0}

/* ── Ширина текста ───────────────────────────────────────────────
   Контейнер один на весь сайт: и в макете, и в статье, и в подвале. */
.wrap{width:100%; margin-inline:auto}
@media (min-width:760px){ .wrap{max-width:1160px; padding-inline:40px} }
@media (min-width:1240px){ .wrap{padding-inline:0} }

/* ── Шапка: на десктопе меню разворачивается в строку ───────────── */
.nav-desk{display:none}
@media (min-width:1000px){
  .top{padding:14px 40px}
  :root{--top-h:69px}
  .top .logo{height:19px}
  /* Кнопка меню остаётся: в строку вынесены не все разделы,
     полный список живёт в меню на весь экран. */
  .nav-desk{display:flex; align-items:center; gap:2px; margin-left:auto; margin-right:14px;
    flex-wrap:nowrap; justify-content:flex-end}
  .nav-desk a{position:relative; color:var(--text-2); text-decoration:none; font-size:14px;
    padding:7px 10px; border-radius:9px; white-space:nowrap;
    transition:color 200ms ease}
  .nav-desk a:hover{color:var(--text)}
  .nav-desk a[aria-current]{color:var(--text)}
  .nav-desk a::after{content:""; position:absolute; left:10px; right:10px; bottom:3px;
    height:1px; background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
    transition:transform 300ms cubic-bezier(.22,.61,.36,1)}
  .nav-desk a:hover::after,.nav-desk a:focus-visible::after,
  .nav-desk a[aria-current]::after{transform:scaleX(1); transform-origin:0 50%}
}
@media (min-width:1240px){ .top{padding-inline:calc((100vw - 1160px)/2)} }

/* ── Типографика на большом экране ──────────────────────────────── */
@media (min-width:760px){
  h1{font-size:56px; letter-spacing:-.036em}
  h2{font-size:40px}
  h3{font-size:20px}
  .lead{font-size:19px; line-height:1.45; max-width:48ch}
  .small{font-size:15.5px}
  section{padding:116px 0 96px}
  .sec-head{flex-direction:row; align-items:flex-end; justify-content:space-between;
    gap:64px; margin-bottom:56px}
  .sec-head h2{flex:1 1 auto; max-width:18ch}
  .sec-head .small{flex:0 1 42ch; padding-bottom:4px}
  .hero .lead,.hero-slim .lead{max-width:48ch}
}
/* ── Первый экран на десктопе ────────────────────────────────────
   В макете герой занимал экран телефона целиком — там это ровно один
   разворот. На мониторе 27 дюймов та же высота превращается в полосу
   пустоты над заголовком, потому что содержимое стоит по центру.
   Поэтому: на десктопе герой прижат к верху, а полную высоту держит
   только главная — и та не выше 780px, чтобы на высоком экране
   следующий блок был виден краем. */
@media (min-width:760px){
  .hero{min-height:0; justify-content:flex-start;
    padding-top:60px; padding-bottom:96px}
  body.home .hero{min-height:min(calc(100svh - var(--top-h)), 780px);
    padding-bottom:120px}
}
@media (min-width:1000px){
  h1{font-size:68px}
  h2{font-size:46px}
  .hero{padding-top:56px; padding-bottom:110px; gap:20px}
  .hero-slim{padding-top:84px; padding-bottom:0; gap:18px}
  /* Заголовок в две-три строки читается как заголовок; растянутый
     на всю ширину — как строка текста, набранная крупно. */
  .hero h1{max-width:15ch}
  .hero-slim h1{max-width:17ch}
  .entry-head h1{max-width:20ch}
}

/* ── Герой: табы и кнопки в строку ──────────────────────────────── */
@media (min-width:760px){
  .cta-row{flex-direction:row; gap:12px; padding-top:22px}
  .btn{padding:16px 30px}
  .tabpanel{padding-top:20px}
  .tabpanel p{font-size:16px; max-width:52ch}
  .tab{font-size:14.5px; padding:10px 14px 14px}
  .tabrow{margin-left:-14px}
  .tabfacts{gap:10px}
  .tabfacts > div{min-width:126px; padding:9px 14px}
  .tabfacts dd{font-size:15px}
  .crowd{height:min(46%, 250px)}
}

/* ── Двери, охват, боли, шаги: одна колонка → сетка ─────────────── */
@media (min-width:760px){
  .doors{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
  .door{padding:26px}
  .doors > *:only-child{grid-column:1 / -1}

  .scope{display:grid; grid-template-columns:repeat(2,1fr); column-gap:64px}
  .scope-row{grid-template-columns:92px 1fr; padding:20px 0}
  .scope-row:last-child{border-bottom:1px solid var(--line-soft)}
  .scope-row:nth-last-child(-n+2){border-bottom:0}
  .scope-row b{font-size:17px}
  .scope-row p{font-size:15px}

  .pains{display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px}
  .pain{border-bottom:0; border-top:1px solid var(--line-soft); padding:22px 0 0;
    flex-direction:column; gap:12px}
  .pain p{font-size:16px}

  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0 32px}
  .step{border-bottom:0; border-top:1px solid var(--line-soft); padding:22px 0 0;
    flex-direction:column; gap:10px}
  .step::before{padding-top:0}

  .price-row{padding:20px 0}
  .price-row b{font-size:17px}
  .price-row p{font-size:14.5px; max-width:70ch}
}
@media (min-width:1000px){
  .doors{grid-template-columns:repeat(2,1fr); gap:16px}
}

/* ── Карусели раскрываются в сетку ──────────────────────────────
   На телефоне карточки листаются пальцем, на десктопе листать нечем
   и незачем: всё помещается разом. Перетаскивание отключается и в JS. */
@media (min-width:760px){
  .rail{margin:0}
  .railview{overflow:visible; cursor:default; padding:0}
  .railtrack{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
    padding:0; transform:none !important}
  .dots{display:none}
  .bcard,.plan{flex:auto; min-height:0}
  .bcard{padding:28px 26px 26px}
  .bcard h3{font-size:23px}
  .bcode{font-size:10.5px}
  .plan{padding:26px}
}
@media (min-width:1000px){
  .railtrack{grid-template-columns:repeat(3,1fr)}
}

/* ── Форма ──────────────────────────────────────────────────────── */
@media (min-width:760px){
  .form{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px;
    max-width:900px; align-items:end}
  .form .btn{grid-column:1; margin-top:8px; justify-self:start; padding-inline:44px}
  .form .consent{grid-column:2 / -1; margin-top:8px; align-self:center; max-width:56ch}
  .form .form-msg{grid-column:1 / -1}
}

/* Ответ формы: одна строка на месте, без всплывашек */
.form-msg{font-size:14.5px; line-height:1.5; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2)}
.form-msg[hidden]{display:none}
.form-msg.ok{border-color:var(--c-ok); color:var(--text)}
.form-msg.err{border-color:#C46A6A}
.form.sending{opacity:.6; pointer-events:none}
.field.bad input{border-bottom-color:#C46A6A}
/* Ловушка для роботов: человек её не видит и не встретит табом */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── Подвал на десктопе ─────────────────────────────────────────── */
@media (min-width:760px){
  footer{padding-top:72px}
  .foot-top{display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start}
  .foot-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 28px;
    padding:0 40px}
  .foot-contacts{padding:0 40px; align-items:flex-start; font-size:15px}
  .foot-rule{padding-inline:40px}
  .foot-row{padding:26px 40px 0}
  .foot-row .logo{height:17px}
  .bigmark{padding-inline:36px; margin-top:44px}
}
@media (min-width:1240px){
  .foot-nav,.foot-contacts,.foot-rule,.foot-row{
    padding-inline:calc((100vw - 1160px)/2)}
  .bigmark{padding-inline:calc((100vw - 1160px)/2 - 4px)}
}

/* ═══ Страницы, которых не было в макетах ═══════════════════════ */

/* ── Хлебные крошки ─────────────────────────────────────────────── */
.crumbs{padding-top:22px; font-size:12px; color:var(--text-3); display:flex;
  flex-wrap:wrap; gap:6px; align-items:baseline}
.crumbs a{color:var(--text-3); text-decoration:none}
.crumbs a:hover{color:var(--text-2)}
.crumbs span[aria-current]{color:var(--text-2)}
.crumbs i{font-style:normal; opacity:.5}
@media (min-width:760px){ .crumbs{padding-top:30px; font-size:12.5px} }

/* ── Лента блога ────────────────────────────────────────────────── */
.cats{display:flex; flex-wrap:wrap; gap:8px; padding-bottom:34px}
.cats a{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.04em; color:var(--text-2); text-decoration:none;
  border:1px solid var(--line); border-radius:9px; padding:7px 11px;
  transition:border-color 200ms ease, color 200ms ease}
.cats a:hover{border-color:var(--text-3); color:var(--text)}
.cats a[aria-current]{background:var(--accent); color:var(--accent-text);
  border-color:var(--accent)}

.posts{display:flex; flex-direction:column}
.post{display:block; padding:24px 0; border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:var(--text)}
.post:first-child{border-top:1px solid var(--line-soft)}
.post-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.post h2,.post h3{font-size:22px; line-height:1.22; letter-spacing:-.02em;
  margin:9px 0 7px; font-weight:600}
.post p{font-size:14.5px; line-height:1.5; color:var(--text-2); max-width:72ch}
.post:hover h2,.post:hover h3{text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px}
@media (min-width:760px){
  .posts{display:grid; grid-template-columns:repeat(2,1fr); column-gap:56px}
  .post{padding:28px 0}
  .post:nth-child(2){border-top:1px solid var(--line-soft)}
  .post h2,.post h3{font-size:25px}
}

/* ── Статья ─────────────────────────────────────────────────────── */
.entry{max-width:none}
.entry-head{display:flex; flex-direction:column; gap:14px; padding-top:38px}
.entry-head h1{font-size:32px; letter-spacing:-.03em}
@media (min-width:760px){
  .entry-head{padding-top:56px; gap:18px}
  .entry-head h1{font-size:48px; max-width:22ch}
}
.prose{font-size:16.5px; line-height:1.68; color:var(--text-2); max-width:none}
.prose > *{max-width:74ch}
.prose h2{font-size:25px; line-height:1.2; color:var(--text); margin:46px 0 14px}
.prose h3{font-size:19px; color:var(--text); margin:32px 0 10px}
.prose p{margin:0 0 18px}
.prose a{color:var(--text); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--text-3); text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:var(--text)}
.prose strong,.prose b{color:var(--text); font-weight:600}
.prose ul,.prose ol{margin:0 0 20px; padding-left:20px; display:flex;
  flex-direction:column; gap:9px}
.prose li::marker{color:var(--text-3)}
.prose blockquote{margin:26px 0; padding:2px 0 2px 20px;
  border-left:2px solid var(--line); color:var(--text); font-size:18px}
.prose code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.86em;
  background:var(--surface-2); border-radius:5px; padding:2px 6px; color:var(--text)}
.prose pre{background:var(--code-bg); border:1px solid var(--code-line);
  border-radius:14px; padding:18px; overflow-x:auto; color:#E9EBEE;
  font-size:12.5px; line-height:1.85; margin:0 0 22px; max-width:100%}
.prose pre code{background:none; padding:0; color:inherit; font-size:inherit}
.prose img{max-width:100%; height:auto; border-radius:14px; display:block}
.prose hr{border:0; border-top:1px solid var(--line-soft); margin:38px 0}
.prose table{width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 22px}
.prose th,.prose td{text-align:left; padding:11px 12px 11px 0;
  border-bottom:1px solid var(--line-soft); vertical-align:top}
.prose th{color:var(--text); font-weight:600; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase}
@media (min-width:760px){ .prose{font-size:17.5px} .prose h2{font-size:30px; margin-top:56px} }
/* Таблица с цифрами на телефоне не влезает и растягивает страницу
   по горизонтали. Пусть прокручивается сама, а не тянет за собой всё. */
@media (max-width:759px){
  .prose table{display:block; overflow-x:auto; white-space:nowrap}
}

/* Подпись автора и соседние статьи */
.entry-foot{display:flex; flex-direction:column; gap:10px; margin-top:52px;
  padding-top:26px; border-top:1px solid var(--line-soft)}
.pager{display:grid; gap:12px; margin-top:16px}
@media (min-width:760px){ .pager{grid-template-columns:1fr 1fr} }
.pager a{display:block; padding:20px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); text-decoration:none; color:var(--text);
  transition:border-color 220ms ease}
.pager a:hover{border-color:var(--text-3)}
.pager em{display:block; font-style:normal;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px}
.pager b{font-size:16px; font-weight:600; line-height:1.3}
.pager .to-next{text-align:right}

/* Постраничная навигация ленты */
.nav-pages{display:flex; gap:8px; flex-wrap:wrap; padding-top:38px}
.nav-pages .page-numbers{display:grid; place-items:center; min-width:38px; height:38px;
  padding:0 12px; border:1px solid var(--line); border-radius:10px; color:var(--text-2);
  text-decoration:none; font-size:14px}
.nav-pages .page-numbers.current{background:var(--accent); color:var(--accent-text);
  border-color:var(--accent)}

/* ── Перелинковка: «читайте также» и смежные услуги ─────────────── */
.linked{display:grid; gap:12px}
@media (min-width:760px){ .linked{grid-template-columns:repeat(3,1fr); gap:16px} }

/* ── 404 и поиск ────────────────────────────────────────────────── */
.blank{display:flex; flex-direction:column; gap:16px;
  padding-top:46px; padding-bottom:76px}
.blank .code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.searchform{display:flex; gap:10px; padding-top:8px; max-width:520px}
.searchform input{font:inherit; font-size:16px; color:var(--text); background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:9px 0; flex:1; border-radius:0}
.searchform input:focus{outline:0; border-bottom-color:var(--text)}

/* ── Печать: без украшений ──────────────────────────────────────── */
@media print{
  .top,.layer,.crowd,.bigmark,.foot-nav,.dots,.cta-row,form{display:none !important}
  body{background:#fff; color:#000}
  .rise,.rise.in{opacity:1}
  .roll .ch > i{transform:none}
}

/* Подсказка «потяните карточки» верна только там, где карточки
   действительно листаются пальцем. С планшета они разложены сеткой. */
@media (min-width:760px){ .touch-hint{display:none} }