/* /automatic и /automatic/analytic — история «контур компании» (build_contour_2.py, story.js, contour.js).
   Сцена — во весь экран за текстом; слайд — целиком между шапкой и панелью тура. Циан Automatic, холодный графит. */
@font-face{font-family:'Neue Machina';src:url('/assets/fonts/NeueMachina-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Neue Machina';src:url('/assets/fonts/NeueMachina-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Neue Machina';src:url('/assets/fonts/NeueMachina-Bold.ttf') format('truetype');font-weight:600 700;font-display:swap}
:root{--bg:#24272A;--ink:#F2F3F1;--muted:#B1B3B2;--dim:#76787C;--line:rgba(255,255,255,.14);--acc:#99FFFF;--amber:#E0B040;--coral:#FF7878;
  --pad:clamp(20px,4.6vw,88px);--hdr:84px;--bar:76px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html.ct-html{background:var(--bg);scroll-behavior:auto}
body.ct-body{margin:0;background:var(--bg);color:var(--ink);font-family:'Neue Machina',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.ct-body a{color:inherit}
.ct{position:relative;overflow-x:clip}

/* сцена */
.ct-stage{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 90% at 70% 45%,#2c3538 0,#262b2e 38%,var(--bg) 72%);overflow:hidden}
.ct-gl{position:absolute;inset:0}
.ct-gl canvas{display:block;width:100%!important;height:100%!important}
.ct-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#24272Af7 0,#24272Ae0 24%,#24272A80 36%,#24272A00 50%),linear-gradient(180deg,#24272A99 0,#24272A00 18%,#24272A00 80%,#24272Acc 100%)}

/* ракурсы Process · App · Analytic */
.ct-views{position:absolute;z-index:3;top:calc(var(--hdr) + 22px);right:var(--pad);display:flex;border:1px solid var(--line);background:#1f2225cc;backdrop-filter:blur(6px)}
.ct-views a{padding:10px 16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .2s,background .2s}
.ct-views a+a{border-left:1px solid var(--line)}
.ct-views a:hover{color:var(--acc)}
.ct-views a[aria-current]{color:#1e2124;background:var(--acc)}
.ct-acts{position:absolute;z-index:3;top:calc(var(--hdr) + 26px);left:var(--pad);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ct-acts span{display:none}
.ct-acts span.on{display:inline-flex;align-items:center;gap:10px}
.ct-acts span.on:before{content:"";width:28px;height:1px;background:var(--acc)}

/* настоящие экраны — окно в рамке поверх сцены */
.ct-screen{position:absolute;z-index:2;right:var(--pad);bottom:calc(var(--bar) + 22px);width:min(31vw,540px);margin:0;padding:0;
  background:#1d2023;border:1px solid #ffffff2a;box-shadow:0 30px 80px #0009;opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);
  transition:opacity .7s var(--ease),transform .9s var(--ease),visibility 0s .7s}
.ct-screen.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease) .1s,transform .6s var(--ease) .1s,visibility 0s}
.ct-screen img{display:block;width:100%;height:auto;max-height:calc(100svh - var(--hdr) - var(--bar) - 190px);object-fit:cover;object-position:top}
.ct-screen--app{width:min(22vw,340px)}
.ct-screen--strip{width:min(40vw,640px)}
.ct-screen figcaption{padding:9px 12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid #ffffff1a}
.ct-screen .fm{position:absolute;width:12px;height:12px;pointer-events:none}
.ct-screen .fm.tl{left:-1px;top:-1px;background:var(--acc);clip-path:polygon(0 0,100% 0,0 100%)}
.ct-screen .fm.br{right:-1px;bottom:-1px;border-right:1px solid var(--acc);border-bottom:1px solid var(--acc)}

/* главы-слайды */
.ct-ch{position:relative;z-index:1;height:100vh;height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + 20px) var(--pad) calc(var(--bar) + 20px);pointer-events:none}
/* текст главы читаем сразу (владелец 25.10, «3-6 — делаем»): проявление за 0,25 с, лёгкий сдвиг; обложка видна до скрипта */
.ct-copy{width:min(520px,38vw);pointer-events:auto;opacity:.18;transform:translateY(8px);transition:opacity .25s var(--ease),transform .35s var(--ease)}
.ct-ch.on .ct-copy,.ct-ch--intro .ct-copy{opacity:1;transform:none}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow:before{content:"";width:40px;height:1px;background:var(--acc)}
.ct h1,.ct h2{margin:0 0 20px;font-weight:400;letter-spacing:-.02em;line-height:1.02}
.ct h1{font-size:clamp(40px,5.4vw,84px)}
.ct h2{font-size:clamp(30px,3.3vw,54px)}
.ct h1 em,.ct h2 em{font-style:normal;color:var(--acc)}
.ct p{margin:0 0 14px;font-size:clamp(15px,1.12vw,18px);line-height:1.5;color:#e1e3e1}
.ct p.lead{font-size:clamp(16px,1.3vw,21px)}
.ct p.note{font-size:13px;color:var(--muted)}
.ct-status{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.ct-status li{display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:1.4;color:var(--muted)}
.ct-status b{flex:none;font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:4px 7px;border:1px solid currentColor}
.ct-status li[data-s=ok] b{color:var(--acc)}
.ct-status li[data-s=dev] b{color:var(--amber)}
.ct-status li[data-s=plan] b{color:#9aa2a6}
.ct-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ct-btn{display:inline-flex;align-items:center;gap:14px;min-height:46px;padding:0 20px;border:1px solid #ffffff55;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.ct-btn:hover{border-color:var(--acc);color:var(--acc)}
.ct-btn.solid{background:var(--acc);border-color:var(--acc);color:#1e2124!important}
.ct-btn.solid:hover{background:#c8ffff}
.ct-btn i{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.ct-seg{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.ct-seg button{min-height:40px;padding:0 14px;border:1px solid #ffffff38;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:all .2s}
.ct-seg button:hover{color:var(--acc);border-color:var(--acc)}
.ct-seg button[aria-pressed=true]{color:#1e2124;background:var(--acc);border-color:var(--acc)}
.ct-segtext{min-height:3em}

/* панель тура — общий вид site-tourbar.css, здесь только место */
.ct-bar{z-index:30}
.ct-bar .arrow{transform:rotate(135deg)}
.ct-bar.last .arrow{transform:rotate(-45deg)}
.axm-footer{position:relative;z-index:2;background:var(--bg)}

/* ноутбук 1024–1280: колонка текста шире, экран меньше */
@media (max-width:1280px){.ct-copy{width:min(470px,42vw)}.ct-screen{width:min(32vw,420px)}.ct-screen--app{width:min(22vw,280px)}}
@media (max-height:800px) and (min-width:761px){.ct h2{font-size:clamp(28px,2.9vw,44px);margin-bottom:14px}.ct p{font-size:15px;line-height:1.45}.eyebrow{margin-bottom:14px}.ct-btns{margin-top:14px}}

/* телефон: сцена — полоса под шапкой, текст ниже; слайд листается целиком */
@media (max-width:760px){
  :root{--hdr:64px;--bar:60px;--strip:min(38svh,330px)}
  html.ct-html{scroll-snap-type:y mandatory}
  .ct-ch{scroll-snap-align:start;scroll-snap-stop:always;align-items:flex-start;padding:calc(var(--hdr) + var(--strip) + 14px) 18px calc(var(--bar) + 12px)}
  .axm-footer{scroll-snap-align:end}
  .ct-stage{bottom:auto;top:var(--hdr);height:var(--strip)}
  .ct-stage:after{background:linear-gradient(180deg,#24272A66 0,#24272A00 20%,#24272A00 72%,#24272A 100%)}
  .ct-copy{width:100%;opacity:1;transform:none}
  .ct h1{font-size:34px}.ct h2{font-size:27px;margin-bottom:12px}
  .ct p{font-size:14.5px;line-height:1.45;margin-bottom:10px}.ct p.lead{font-size:15px}.ct p.note{font-size:12px}
  .eyebrow{margin-bottom:12px;font-size:10px}
  .ct-views{top:10px;right:12px}.ct-views a{padding:8px 10px;font-size:9px}
  .ct-acts{display:none}
  .ct-screen{right:12px;bottom:10px;width:46vw}.ct-screen--app{width:36vw}.ct-screen--strip{width:62vw}
  .ct-screen img{max-height:calc(var(--strip) - 70px)}
  .ct-screen figcaption{display:none}
  .ct-status{margin-top:10px;gap:5px}.ct-status li{font-size:12px}
  .ct-btns{margin-top:12px;gap:8px}.ct-btn{min-height:42px;padding:0 14px;font-size:10px}
  .ct-seg button{min-height:36px;font-size:11px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){.ct-copy,.ct-screen{transition:none}}
/* ?ctdebug — проверка в скрытой панели: без переходов (там они не доигрываются) */
html.ct-debug *{transition:none!important}
/* Process · Analytic · App уже есть в шапке — второй переключатель над сценой не показываем (переходы по ракурсам — те же ссылки) */
.ct-views{display:none}
/* лента глав в панели: компактнее, край тает — обрубленное слово не читается, активная глава прокручивается в середину (story.js) */
.ct-bar .chapter-nav{gap:14px}
.ct-bar .chapter-nav.over{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 40px),transparent);padding-left:22px;padding-right:40px}
/* телефон: в главах с настоящим экраном главное — экран кабинета (владелец 25.10: «с телефона… тесно») */
@media (max-width:760px){.ct-screen{width:74vw}.ct-screen--app{width:60vw}.ct-screen--strip{width:calc(100% - 24px)}}
/* v4 (28.10): экран продукта — главный герой главы; по клику — во весь экран */
.ct-screen--hero{width:min(46vw,720px)}
.ct-screen.on{cursor:zoom-in}
@media (max-width:1280px){.ct-screen--hero{width:min(45vw,560px)}}
@media (max-width:760px){.ct-screen--hero{width:calc(100% - 24px)}}
.ct-lb{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:28px;background:#14171acc;backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s;cursor:zoom-out}
.ct-lb.on{opacity:1;visibility:visible;transition:opacity .25s}
.ct-lb img{max-width:min(1400px,100%);max-height:100%;border:1px solid #ffffff2a;box-shadow:0 30px 80px #000a}
/* телефон: экран продукта — нижняя половина полосы (верх кадра, целиком — по нажатию), 3D — над ним */
@media (max-width:760px){.ct-screen img{max-height:calc(var(--strip) * .5)}.ct-screen--app img{max-height:calc(var(--strip) * .54)}}