/* Общий стиль статей-кейсов визитки. Выделен 24.09.2026 из /neurodj/. */
:root{
  --ink:#08080B; --ink-2:#0E0E13; --ink-3:#16161D;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --text:#E8E6E1; --muted:#8A8A93;
  --accent:#FFD60A; --accent-ink:#1A1600;
  --good:#5BE49B; --bad:#FF6B7A;
  --f-display:'Unbounded',system-ui,sans-serif;
  --f-text:'Manrope',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(16px,4vw,64px);
  --maxw:1560px;
  --read:74ch;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink); color:var(--text);
  font-family:var(--f-text); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-inline:var(--pad);
}
.wrap{max-width:var(--maxw); margin:0 auto}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
img{max-width:100%}
.mono{
  font-family:var(--f-text); font-size:13px; font-weight:400; color:var(--muted);
}

/* ── верх ─────────────────────────── */
.topbar{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-block:22px 0}
.topbar a{text-decoration:none}
.topbar a:hover{color:var(--accent)}

.hero{padding-block:clamp(38px,7vw,88px) clamp(28px,4vw,48px)}
.hero .kicker{margin-bottom:18px}
.hero h1{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(32px,6vw,86px); line-height:1.02;
  letter-spacing:-.03em; margin:0 0 clamp(22px,3vw,34px);
  text-wrap:balance; max-width:16ch;
}
.hero h1 mark{background:var(--accent); color:var(--accent-ink); padding:0 .12em}
.hero .lede{font-size:clamp(16px,1.35vw,19px); color:var(--muted); max-width:66ch; margin:0}
.hero .lede b{color:var(--text); font-weight:600}

.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat{padding:26px 22px 26px 0; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--f-display); font-weight:600; font-size:clamp(24px,2.7vw,40px); line-height:1.1; font-variant-numeric:tabular-nums; display:block; margin-bottom:8px}
.stat .k{font-size:14px; color:var(--muted); line-height:1.4}

.shot{margin:clamp(30px,4vw,56px) 0 0}
.shot img{display:block; width:100%; height:auto; border:1px solid var(--line); background:var(--ink-3)}
.shot figcaption{margin-top:12px; display:flex; gap:14px; flex-wrap:wrap; align-items:baseline}
.shot figcaption span:last-child{color:var(--muted); font-size:14px}

/* ── секции ───────────────────────── */
section{padding-block:clamp(46px,6vw,84px); border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,46ch); gap:24px 48px; align-items:end; margin-bottom:clamp(26px,3vw,42px)}
.sec-head h2{font-family:var(--f-display); font-weight:600; font-size:clamp(23px,3.1vw,44px); line-height:1.05; letter-spacing:-.02em; margin:10px 0 0}
.sec-head p{margin:0; color:var(--muted); font-size:15.5px}

.prose{max-width:var(--read)}
.prose p{margin:0 0 1em}
.prose b{font-weight:600}
.prose code, .inline{font-family:var(--f-mono); font-size:.86em; background:var(--ink-3); border:1px solid var(--line); padding:1px 6px; white-space:nowrap}

.two{display:grid; grid-template-columns:minmax(0,var(--read)) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start}

/* ── схема ────────────────────────── */
.diagram{border:1px solid var(--line); background:var(--ink-2); padding:clamp(14px,2vw,28px)}
.diagram svg{display:block; width:100%; height:auto}
.stack{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.stack span{font-family:var(--f-text); font-size:13px; border:1px solid var(--line-2); padding:5px 9px}

/* ── принципы ─────────────────────── */
.principles{border-top:1px solid var(--line)}
.pr{display:grid; grid-template-columns:52px minmax(0,1fr) minmax(0,44ch); gap:14px 40px; padding:26px 0; border-bottom:1px solid var(--line)}
.pr .idx{font-family:var(--f-mono); font-size:11px; color:var(--accent); padding-top:6px; letter-spacing:.12em}
.pr h3{font-family:var(--f-display); font-weight:600; font-size:clamp(17px,1.6vw,21px); margin:0; letter-spacing:-.01em; line-height:1.25}
.pr p{margin:0; color:var(--muted); font-size:15px}

/* ── график ───────────────────────── */
.bars{border:1px solid var(--line); background:var(--ink-2); padding:clamp(18px,2.4vw,32px)}
.bar{display:grid; grid-template-columns:minmax(0,15ch) minmax(0,1fr) 5ch; gap:16px; align-items:center; padding:10px 0}
.bar .lbl{font-size:14.5px; line-height:1.3}
.bar .lbl small{display:block; color:var(--muted); font-size:12.5px}
.bar .track{height:14px; background:var(--ink-3); position:relative}
.bar .fill{position:absolute; inset:0 auto 0 0; background:var(--muted)}
.bar.win .fill{background:var(--accent)}
.bar .val{font-family:var(--f-display); font-weight:600; font-size:18px; text-align:right; font-variant-numeric:tabular-nums}
.bars .note{margin:14px 0 0; color:var(--muted); font-size:13.5px}

.ladder{counter-reset:l; list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.ladder li{counter-increment:l; display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px}
.ladder li::before{content:counter(l,decimal-leading-zero); font-family:var(--f-mono); font-size:11px; color:var(--accent); padding-top:4px}
.ladder li span{color:var(--muted)}

/* ── кейсы с кодом ────────────────── */
.case{display:grid; grid-template-columns:minmax(0,40ch) minmax(0,1fr); gap:clamp(20px,3vw,48px); padding:clamp(28px,3vw,44px) 0; border-bottom:1px solid var(--line)}
.case:first-child{border-top:1px solid var(--line)}
.case .n{font-family:var(--f-mono); font-size:11px; color:var(--accent); letter-spacing:.12em}
.case h3{font-family:var(--f-display); font-weight:600; font-size:clamp(18px,1.7vw,23px); line-height:1.2; margin:8px 0 14px; letter-spacing:-.01em}
.case dl{margin:0; display:grid; gap:10px}
.case dt{font-family:var(--f-text); font-size:13px; color:var(--muted)}
.case dd{margin:2px 0 0; font-size:15px}
.case .result{margin-top:16px; padding:12px 14px; border-left:3px solid var(--accent); background:var(--ink-2); font-size:15px}
.case .result b{font-family:var(--f-display); font-weight:600}

pre{
  margin:0; overflow-x:auto; background:var(--ink-2); border:1px solid var(--line);
  padding:18px 20px; font-family:var(--f-mono); font-size:13px; line-height:1.6; color:var(--text);
  tab-size:4;
}
pre + pre{margin-top:10px}
.code-label{font-family:var(--f-text); font-size:13px; color:var(--muted); margin:0 0 8px; display:flex; gap:10px; flex-wrap:wrap}
.code-label .was{color:var(--bad)}
.code-label .now{color:var(--good)}
.code-block + .code-block{margin-top:16px}
pre .c{color:#6E6E78}
pre .del{color:var(--bad)}
pre .add{color:var(--good)}
pre .s{color:#E9C46A}
pre .k{color:#C9A7FF}

/* ── статус ───────────────────────── */
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:left; padding:14px 16px 14px 0; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--f-text); font-size:13px; color:var(--muted); font-weight:400}
td:first-child{font-weight:600; white-space:nowrap}
td .ok{color:var(--good)} td .todo{color:var(--accent)}
.table-wrap{overflow-x:auto}

/* ── контакт ──────────────────────── */
.contact{background:var(--ink-2); border:1px solid var(--line); padding:clamp(24px,4vw,58px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; margin-block:clamp(20px,3vw,40px) clamp(40px,5vw,70px)}
.contact h2{font-family:var(--f-display); font-weight:800; font-size:clamp(24px,3.6vw,48px); line-height:1.04; letter-spacing:-.03em; margin:0 0 12px}
.contact p{margin:0; color:var(--muted); max-width:52ch; font-size:15.5px}
.tg{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-family:var(--f-display); font-weight:600; font-size:clamp(15px,1.4vw,18px); letter-spacing:-.01em; text-decoration:none; background:var(--accent); color:var(--accent-ink); padding:18px 30px; transition:transform .25s var(--ease)}
.tg:hover{transform:translateY(-3px)}
footer{border-top:1px solid var(--line); padding-block:22px 46px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media (max-width:1100px){
  .sec-head,.two,.case{grid-template-columns:minmax(0,1fr)}
  .sec-head{align-items:start}
  .pr{grid-template-columns:40px minmax(0,1fr)}
  .pr p{grid-column:2}
}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:0; padding:20px 0}
  .stat:nth-child(odd){border-right:1px solid var(--line); padding-right:16px}
  .contact{grid-template-columns:minmax(0,1fr)}
  .bar{grid-template-columns:minmax(0,1fr) 5ch}
  .bar .lbl{grid-column:1 / -1}
  pre{font-size:12px; padding:14px}
  .tg{white-space:normal}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* схемы на телефоне не сжимаются в нечитаемое — листаются вбок */
@media (max-width:760px){.diagram{overflow-x:auto} .diagram svg{min-width:760px}}

/* ── цифры: карточки с воздухом (25.09) ── */
.stats{gap:clamp(10px,1vw,16px); border:0}
.stat,.stat:last-child{padding:clamp(18px,1.8vw,28px) clamp(16px,1.6vw,26px); border:1px solid var(--line); background:var(--ink-2)}
@media (max-width:900px){.stat,.stat:nth-child(odd),.stat:last-child{padding:16px; border:1px solid var(--line)}}