@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/font-1.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/font-2.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JBMono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/font-3.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JBMono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/font-4.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}

:root{
  --paper:#F3F1EA; --card:#FAF9F5; --ink:#11181F; --muted:#5A636C; --rule:#DAD6CB;
  --accent:#BF3F1A; --accent-ink:#FFFFFF; --accent-text:#BF3F1A;
  --dir-dev:#2C5D7C; --dir-an:#A86A12; --dir-ai:#3E7A5A; --dir-psy:#A2466A; --blend:multiply; --link:#1F4A66;
  --night:#0D151C; --night-2:#132029; --night-ink:#ECEAE3; --night-muted:#8E9BA5; --night-rule:#233340;
  --chart-line:#A9D0E8; --chart-band:rgba(120,176,212,.16); --chart-grid:rgba(236,234,227,.07);
  --pend-fg:#7A4A00; --pend-bg:#FCEFD2; --pend-rule:#D9A441;
  --sans:"Onest","Segoe UI",sans-serif; --mono:"JBMono","Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0F151A; --card:#151D23; --ink:#E9E7E0; --muted:#98A2AB; --rule:#26323B; --link:#9CC6E0;
        --pend-fg:#F1C66E; --pend-bg:#33290F; --pend-rule:#8A6A22; --accent-text:#F0663A;
        --dir-dev:#7FB2D3; --dir-an:#E0A64A; --dir-ai:#7DC29C; --dir-psy:#E08AAE; --blend:screen}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);font-feature-settings:"ss01"}
a{color:var(--link);text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:76rem;margin:0 auto;padding:0 16px}
@media (min-width:760px){.wrap{padding:0 40px}}
.mono{font-family:var(--mono)}


/* header */
.site-head{position:relative;z-index:2;border-bottom:1px solid var(--rule);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.mark{font:600 19px/1 var(--sans);letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:flex;gap:8px;align-items:baseline}
.mark .mono{font-size:11px;font-weight:500;letter-spacing:.1em;padding:3px 5px;border:1px solid currentColor;border-radius:3px;opacity:.7}
.nav{display:flex;gap:6px 26px;flex-wrap:wrap;font-size:15px}
.nav a{color:var(--ink);text-decoration:none;opacity:.8}
.nav a:hover{opacity:1}
body[data-page="home"] .site-head{background:var(--night);border-color:var(--night-rule)}
body[data-page="home"] .mark,body[data-page="home"] .nav a{color:var(--night-ink)}
/* два сайта в одном макете: шапка и подвал по сайту страницы */
body[data-site="lib"] [data-for="main"],body:not([data-site="lib"]) [data-for="lib"]{display:none}
@media (max-width:520px){.nav{gap:4px 16px;font-size:14px}}


/* hero */
.hero{background:var(--night);color:var(--night-ink);overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60rem 30rem at 85% 10%,rgba(84,140,178,.18),transparent 60%),
  radial-gradient(40rem 24rem at 0% 100%,rgba(217,72,31,.10),transparent 60%);pointer-events:none}
.hero-grid{position:relative;display:grid;gap:40px;padding-top:72px;padding-bottom:84px;align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;padding-top:104px;padding-bottom:120px}}
.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted);margin:0 0 22px}
.hero h1{font:600 clamp(48px,8.4vw,104px)/.95 var(--sans);letter-spacing:-.045em;margin:0 0 26px}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:#C9CFD3;max-width:34em;margin:0 0 34px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;font:600 15px/1 var(--sans);padding:15px 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;border:1px solid var(--accent);transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--night-ink);border-color:var(--night-rule)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.hero-fig{margin:0;background:linear-gradient(180deg,var(--night-2),rgba(19,32,41,.4));border:1px solid var(--night-rule);border-radius:18px;padding:18px 16px 10px}
.chart{display:block;width:100%;height:auto}
.chart .grid{stroke:var(--chart-grid);stroke-width:1}
.chart .band{fill:var(--chart-band)}
.chart .ln{fill:none;stroke:var(--chart-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--accent)}
.chart .halo{fill:var(--accent);opacity:.22}
.chart .tick{stroke:var(--accent);stroke-width:1;stroke-dasharray:2 3}
.chart .lbl{fill:#F3B7A5;font:500 11px var(--mono)}
.chart .ax{fill:var(--night-muted);font:400 10.5px var(--mono)}
.chart .rev{transform-origin:0 0}

@media (prefers-reduced-motion:no-preference){
  .chart .rev{animation:rev 1.6s cubic-bezier(.4,.1,.2,1) .2s both}
  .chart .band{animation:fade 1.2s ease .1s both}
  .chart .an{animation:fade .5s ease both;animation-delay:var(--d)}
  .chart .halo{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-in-out 2.4s infinite}
  .hero-text>*{animation:up .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-text>*:nth-child(2){animation-delay:.08s}
  .hero-text>*:nth-child(3){animation-delay:.16s}
  .hero-text>*:nth-child(4){animation-delay:.24s}
  @keyframes rev{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.22}50%{transform:scale(1.7);opacity:0}}
}

/* blocks */
.block{padding:88px 0 0}
.sec-num{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.block h2{font:600 clamp(30px,4vw,48px)/1.05 var(--sans);letter-spacing:-.03em;margin:0}
.svc-head{display:grid;gap:18px;margin-bottom:40px}
@media (min-width:900px){.svc-head{grid-template-columns:1fr 1fr;gap:56px;align-items:end}}
.svc-head p{margin:0;color:var(--muted);font-size:18px;max-width:32em}
.caps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
@media (min-width:640px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.caps{grid-template-columns:repeat(3,1fr)}}
.caps li{background:var(--card);padding:26px 24px 28px;transition:background .2s}
.caps li:hover{background:var(--paper)}
.ic{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.caps h4{font:600 18px/1.25 var(--sans);letter-spacing:-.01em;margin:0 0 8px}
.caps p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.note{margin:22px 0 0;color:var(--muted);font-size:15.5px;padding-left:14px;border-left:2px solid var(--accent)}
.svc2{margin-top:72px;display:grid;gap:14px;padding:36px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:900px){.svc2{grid-template-columns:1fr 1fr;gap:56px;align-items:end}}
.svc2 .sec-num{margin-bottom:14px}
.svc2 p{margin:0;font-size:18px;color:var(--muted);max-width:32em}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:28px;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{border-top:2px solid var(--ink);padding-top:18px}
.steps span{font:500 13px/1 var(--mono);color:var(--accent-text)}
.steps h4{font:600 19px/1.25 var(--sans);margin:12px 0 8px;letter-spacing:-.01em}
.steps p{margin:0;color:var(--muted);font-size:15.5px}

.contact{display:grid;gap:26px;padding-bottom:96px;align-items:end}
@media (min-width:900px){.contact{grid-template-columns:1fr auto}}
.contact p{color:var(--muted);font-size:18px;margin:14px 0 0;max-width:30em}
.mail{font:600 clamp(20px,2.6vw,30px)/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:6px;justify-self:start;word-break:break-all}

/* documents */
.docs-wrap .page{padding:48px 0 80px}
.doc-grid{display:grid;gap:32px}
@media (min-width:980px){.doc-grid{grid-template-columns:15rem minmax(0,1fr);gap:64px}}
.toc{font-size:14px}
@media (min-width:980px){.toc{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto}}
.toc p{margin:0 0 10px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--rule)}
.toc li a{display:block;padding:3px 0 3px 12px;color:var(--ink);text-decoration:none;opacity:.8}
.toc li a:hover{opacity:1;color:var(--accent-text)}
.doc{max-width:68ch}
.doc h1{font:600 clamp(28px,3.6vw,42px)/1.1 var(--sans);letter-spacing:-.03em;margin:0 0 14px}
.edition{font:400 13px/1.5 var(--mono);color:var(--muted);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:4px 16px}
.draft{background:var(--pend-bg);color:var(--pend-fg);border:1px solid var(--pend-rule);border-radius:8px;padding:10px 14px;font-size:14px;margin:0 0 28px}
.doc h2{font:600 13px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:38px 0 12px;padding-top:16px;border-top:1px solid var(--rule)}
.doc p{margin:0 0 10px}
.doc p.c{position:relative;padding-left:3.1rem}
.doc .n{position:absolute;left:0;top:.15em;color:var(--muted);font:400 13.5px/1.6 var(--mono)}
.doc ul{margin:0 0 12px 3.1rem;padding-left:1.1em}
.doc li{margin:3px 0}
@media (max-width:560px){.doc p.c{padding-left:2.6rem}.doc ul{margin-left:1rem}}
.summary{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 22px;margin:0 0 28px}
.summary h2{border:0;margin:0 0 8px;padding:0}
.summary ul{margin:0;padding-left:1.1em}
.req{width:100%;border-collapse:collapse;max-width:52rem}
.req th,.req td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--rule)}
.req th{font-weight:400;color:var(--muted);width:40%;padding-right:20px;font-size:15px}
.req td{font:400 15px/1.5 var(--mono);word-break:break-word}
.req td.txt{font:400 16px/1.5 var(--sans)}
@media (max-width:560px){.req th,.req td{display:block;width:100%;padding:0}.req th{padding-top:12px}.req td{padding-bottom:12px}}
.panel{max-width:34rem;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:24px}
.panel label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.panel input{width:100%;font:inherit;padding:11px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink)}
.panel .btn,.preview .btn{margin-top:14px}
.preview .btn.ghost{color:var(--ink);border-color:var(--rule)}
.preview{margin-top:28px;max-width:34rem;border:1px dashed var(--pend-rule);border-radius:14px;padding:18px 22px}
.preview .tag{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pend-fg)}
.preview dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:12px 0}
.preview dt{color:var(--muted);font-size:15px}
.preview dd{margin:0}

mark.pend{background:var(--pend-bg);color:inherit;border-bottom:1.5px dashed var(--pend-rule);padding:0 2px;border-radius:2px}
mark.pend::after{content:attr(data-wait);font:600 10.5px/1.3 var(--mono);color:var(--pend-fg);margin-left:6px}

/* footer */
.site-foot{border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.site-foot .wrap{display:grid;gap:18px 40px;padding-top:30px;padding-bottom:34px}
@media (min-width:900px){.site-foot .wrap{grid-template-columns:auto 1fr auto;align-items:start}}
.site-foot p{margin:0 0 4px}
.f-name{color:var(--ink);font-weight:600}
.site-foot a{color:var(--muted)}
.f-docs{display:flex;flex-wrap:wrap;gap:6px 22px}
@media (min-width:900px){.f-docs{justify-content:center}}
.f-copy{font-family:var(--mono);font-size:12px}
@media print{.site-head,.site-foot,.toc{display:none}}

/* library.ip-katkov.ru — витрина */
.lib-hero .wrap{position:relative;padding-top:72px;padding-bottom:76px}
@media (min-width:980px){.lib-hero .wrap{padding-top:100px;padding-bottom:104px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{font:500 13px/1 var(--mono);padding:9px 13px;border:1px solid var(--night-rule);border-radius:999px;color:var(--night-ink)}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.filter li{font:500 13px/1 var(--mono);padding:9px 13px;border:1px solid var(--rule);border-radius:999px;color:var(--muted)}
.filter li.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cards{display:grid;gap:16px}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px}
.card.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
@media (min-width:1100px){.card.feat{grid-column:span 2}}
.card .cat{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.card h3{font:600 22px/1.2 var(--sans);letter-spacing:-.015em;margin:0}
.card.feat h3{font-size:clamp(24px,2.6vw,32px)}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.card .price{color:var(--ink);font:600 26px/1.1 var(--sans);letter-spacing:-.01em;margin-top:auto;padding-top:8px}
.card .price span{font:400 15px var(--sans);color:var(--muted)}
.card .btn{align-self:flex-start;margin-top:6px}
.badge{align-self:flex-start;font:600 12px/1 var(--sans);padding:7px 11px;border-radius:999px}
.badge.soon{background:var(--accent);color:var(--accent-ink)}
.badge.arch{border:1px solid var(--rule);color:var(--muted)}
.card.arch h3{color:var(--muted)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--rule)}
#library>.wrap{padding-bottom:96px} /* зазор перед подвалом, как у главной */

/* главная: «с 2014 года» — год и шкала */
.since-grid{display:grid;gap:20px 56px;align-items:end}
@media (min-width:900px){.since-grid{grid-template-columns:auto minmax(0,1fr)}}
.since-year{font:600 clamp(104px,17vw,232px)/.78 var(--sans);letter-spacing:-.065em;margin:0;color:var(--ink)}
.since-year span{color:var(--accent-text)}
.since-grid h2{margin:0 0 14px}
.since-grid div p{margin:0;color:var(--muted);font-size:18px;max-width:34em}
.ruler{list-style:none;margin:56px 0 0;padding:0;display:flex;justify-content:space-between;border-top:2px solid var(--ink)}
.ruler li{position:relative;width:0;padding-top:16px;font:500 12px/1.3 var(--mono);color:var(--muted);white-space:nowrap}
.ruler li::before{content:"";position:absolute;top:-2px;left:0;width:1px;height:10px;background:var(--ink)}
.ruler li span{display:inline-block;transform:translateX(-50%)}
.ruler li:first-child span{transform:none}
.ruler li:last-child span{transform:translateX(-100%)}
.ruler li:first-child::before,.ruler li:last-child::before{width:2px;height:18px;background:var(--accent)}
.ruler li:last-child::before{left:-2px}
.ruler li:first-child,.ruler li:last-child{color:var(--ink)}
@media (max-width:760px){.ruler li.minor span{visibility:hidden}}

/* главная: услуги строками */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.svc-list li{display:grid;gap:6px 48px;padding:22px 0 24px;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.svc-list li{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:baseline}}
.svc-list h4{font:600 20px/1.25 var(--sans);letter-spacing:-.01em;margin:0}
.svc-list p{margin:0;color:var(--muted);font-size:16.5px}

/* библиотека: светлый экран и цвета направлений */
.hero.lib-hero{background:var(--paper);color:var(--ink)}
.hero.lib-hero::before{display:none}
.lib-hero .kicker{color:var(--muted)}
.lib-hero .lead{color:var(--muted)}
.lib-grid{display:grid;gap:32px;align-items:center}
@media (min-width:980px){.lib-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}}
.lib-art{width:100%;max-width:420px;justify-self:center}
.lib-art circle{mix-blend-mode:var(--blend)}
.chips li,.filter li{display:inline-flex;align-items:center;gap:8px}
.chips li{border-color:var(--rule);color:var(--ink)}
.chips li::before,.filter li[style]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.card{padding:0 0 26px;overflow:hidden}
.card>:not(.cover){margin-left:24px;margin-right:24px}
.cover{display:block;width:100%;height:auto;aspect-ratio:16/9;background:color-mix(in srgb,var(--c) 12%,var(--card));border-bottom:1px solid var(--rule);margin-bottom:8px}
.card.feat .cover{aspect-ratio:21/9}
.cover .f{fill:var(--c)}
.cover .s{fill:none;stroke:var(--c);stroke-width:2}
.card.arch .cover{filter:grayscale(.85);opacity:.7}