/* ============================================================
   Editorial Luxury: теплая бумага, контрастная антиква, бронза.
   Cormorant Garamond · Manrope · IBM Plex Mono
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#F5F2EA;
  --paper-2:#EFEBE0;
  --card:#FBF9F3;
  --ink:#1A1712;
  --ink-2:#2F2B22;
  --ink-3:#5F5849;
  --line:rgba(26,23,18,.10);
  --line-2:rgba(26,23,18,.17);
  --bronze:#8B6534;
  --accent:#A9691E;        /* яркий оранжевый на светлом */
  --accent-on-dark:#F0A961; /* яркий оранжевый на темном */
  --ox:#8D3B30;
  --ox-tint:rgba(141,59,48,.08);
  --ox-line:rgba(141,59,48,.25);
  --dark:#171410;
  --dark-2:#221D15;
  --dark-ink:#F0EBDF;
  --dark-ink-2:#A79E8C;
  --dark-line:rgba(240,235,223,.13);
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:400ms;
  --font-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
body.dark {
  --paper:#171410;
  --paper-2:#221D15;
  --card:#1D1914;
  --ink:#F0EBDF;
  --ink-2:#D8D1C4;
  --ink-3:#999182;
  --line:rgba(240,235,223,.12);
  --line-2:rgba(240,235,223,.22);
  --bronze:#C59B63;
  --accent:#F0A961;
  --ox:#E55C4F;
  --ox-tint:rgba(229,92,79,.08);
  --ox-line:rgba(229,92,79,.25);
}
body.dark .sidebar {
  background:rgba(34,29,21,.55);
}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(139,101,52,.22)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}

/* зерно бумаги */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
@media(max-width:767px){.wrap{padding:0 20px}}

/* ============ Сайдбар слева ============ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:252px;z-index:50;
  display:flex;flex-direction:column;
  padding:36px 26px 28px;
  background:rgba(239,235,224,.55);
  border-right:1px solid var(--line);
}
.sidebar > a {
  align-self: center;
}
.sb__mark{
  width:80px;height:80px;border-radius:50%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);
  border:1px solid var(--line-2);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.sb__mark img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform .5s var(--ease);
}
.sidebar>a:hover .sb__mark{transform:scale(1.05);border-color:var(--bronze)}
.sidebar>a:hover .sb__mark img{transform:scale(1.08)}
.sb__name{
  margin-top:16px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  text-align:center;
  width:100%;
}
.sb__role{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.menu{position:relative;display:flex;flex-direction:column;gap:2px;margin-top:36px}
.menu__bubble{
  position:absolute;left:0;right:0;top:0;height:0;z-index:0;opacity:0;
  background:var(--ink);border-radius:12px;
  box-shadow:0 10px 24px -14px rgba(26,23,18,.55);
  transition:top .6s cubic-bezier(.3,1.25,.35,1),height .45s var(--ease),opacity .35s var(--ease);
}
.menu a{
  position:relative;z-index:1;
  padding:10px 14px;border-radius:12px;
  font-size:14px;font-weight:600;color:var(--ink-2);
  transition:color .45s var(--ease),background .45s var(--ease);
}
.menu a:hover{color:var(--ink);background:rgba(26,23,18,.05)}
.menu a.is-active{color:var(--paper);background:transparent}
.sb__foot{margin-top:auto;display:flex;gap:10px;width:100%}
.sb__foot a{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.sb__foot a:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.sb__foot svg{width:17px;height:17px;fill:currentColor}
.content{margin-left:252px}

/* мобильная шапка */
.mhead{
  display:none;position:fixed;top:0;left:0;right:0;z-index:60;
  align-items:center;justify-content:space-between;
  padding:11px 20px;
  background:rgba(245,242,234,.78);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.mhead__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.mhead__mark{
  width:40px;height:40px;border-radius:50%;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
}
.mhead__mark img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
}
.burger{
  width:36px;height:36px;border:0;border-radius:999px;background:transparent;
  cursor:pointer;position:relative;flex:0 0 auto;
}
.burger span{
  position:absolute;left:9px;right:9px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .5s var(--ease),opacity .3s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
body.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:860px){
  .sidebar{display:none}
  .content{margin-left:0}
  .mhead{display:flex}
}

/* мобильное меню: полноэкранная вуаль */
.veil{
  position:fixed;inset:0;z-index:55;
  background:rgba(23,20,16,.88);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility 0s .6s;
  display:flex;align-items:center;justify-content:center;
}
body.menu-open .veil{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.veil nav{display:flex;flex-direction:column;gap:6px;text-align:center}
.veil a{
  font-family:var(--font-display);font-size:clamp(2rem,8vw,3rem);font-weight:600;
  color:var(--dark-ink);line-height:1.25;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .4s;
}
.veil a:hover,.veil a.is-active{color:var(--bronze)}
body.menu-open .veil a{opacity:1;transform:none}
body.menu-open .veil a:nth-child(1){transition-delay:.08s}
body.menu-open .veil a:nth-child(2){transition-delay:.13s}
body.menu-open .veil a:nth-child(3){transition-delay:.18s}
body.menu-open .veil a:nth-child(4){transition-delay:.23s}
body.menu-open .veil a:nth-child(5){transition-delay:.28s}
body.menu-open .veil a:nth-child(6){transition-delay:.33s}
body.menu-open{overflow:hidden}

/* ============ Типографика ============ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  /* капс сидит оптически низко: снизу на 1px меньше */
  padding:7px 14px 5px;border-radius:999px;
  border:1px solid rgba(169,105,30,.28);
  background:rgba(169,105,30,.07);
}
body.dark .eyebrow{
  color:var(--accent-on-dark);
  border-color:rgba(240,169,97,.30);
  background:rgba(240,169,97,.09);
}
/* на темной полосе бейдж всегда светлый, в любой теме */
.dark-band .eyebrow{
  color:var(--accent-on-dark);
  border-color:rgba(240,169,97,.30);
  background:rgba(240,169,97,.09);
}
h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,3.8vw,2.5rem);line-height:1.15;letter-spacing:-.01em;
  max-width:20ch;
}
.t-section{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.4rem,2.8vw,1.9rem);line-height:1.2;letter-spacing:-.005em;
}
.lead{font-size:14.5px;color:var(--ink-2);max-width:56ch;font-weight:500;line-height:1.55}
.tiny{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.tiny.is-live{color:var(--bronze);font-weight:600}

/* ============ Секции и ритм ============ */
.page{display:none}
.page.is-current{display:block;animation:pg .5s var(--ease)}
@keyframes pg{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sec{padding:14px 0}
.sec--first{padding-top:54px}
.sec--last{padding-bottom:36px}
@media(min-width:768px){.sec{padding:20px 0}.sec--first{padding-top:64px}}
.sec__head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:44px}
.sec__head > div{align-self:stretch}
.sec__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ============ Hero Layout (Split) ============ */
.hero{position:relative}
.hero-tight h1,.hero-tight .lead{max-width:34ch}
.hero-tight .lead{max-width:62ch}

/* ============ Кнопки: пилюля с вложенной стрелкой ============ */
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  border-radius:999px;padding:9px 10px 9px 22px;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
  background:var(--ink);color:var(--paper);
  transition:transform .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease);
  border:1px solid var(--ink);cursor:pointer;
}
.btn:active{transform:scale(.97)}
.btn__ic{
  width:30px;height:30px;border-radius:999px;flex:0 0 auto;
  background:rgba(245,242,234,.14);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.btn__ic svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn:hover .btn__ic{transform:translate(2px,-1.5px);background:rgba(245,242,234,.24)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost .btn__ic{background:rgba(26,23,18,.06)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--ghost:hover .btn__ic{background:rgba(26,23,18,.12)}


/* ============ Карточки: двойной кант ============ */
.shell {
  background: rgba(139, 101, 52, .03);
  border: 1px solid rgba(139, 101, 52, .08);
  border-radius: 26px; padding: 6px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease), background .6s var(--ease);
}
.shell:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -34px rgba(139, 101, 52, .22);
  border-color: var(--bronze);
  background: rgba(139, 101, 52, .06);
}
body.dark .shell {
  background: rgba(240, 235, 223, .015);
  border: 1px solid rgba(240, 235, 223, .07);
}
body.dark .shell:hover {
  border-color: var(--bronze);
  background: rgba(240, 235, 223, .04);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .6);
}
.core{
  background:var(--card);border-radius:20px;padding:26px 26px 24px;height:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  display:flex;flex-direction:column;gap:12px;
}
.kicker{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.core h3{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.18;letter-spacing:-.005em}
.core p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.core .spacer{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.chip {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: -.01em;
  padding: 5px 11px; border-radius: 8px; white-space: nowrap;
  border: 1px solid rgba(139, 101, 52, .18);
  background: rgba(139, 101, 52, .05);
  color: var(--ink-2);
  transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
body.dark .chip {
  border-color: rgba(240, 235, 223, .16);
  background: rgba(240, 235, 223, .04);
}
.chip--ox{color:var(--ox);border-color:var(--ox-line);background:var(--ox-tint)}
.card-link{font-size:13px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:7px;margin-top:6px}
.card-link svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.shell:hover .card-link svg{transform:translate(2px,-1.5px)}

.grid2{display:grid;gap:16px}
.grid3{display:grid;gap:16px}
@media(min-width:768px){
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr 1fr 1fr}
}

/* ============ Факты в hero (Редизайн) ============ */
.facts {
  margin-top: 72px;
  display: grid;
  border-top: 1px solid var(--line-2);
  padding-top: 40px;
  gap: 36px;
}
@media (min-width: 768px) {
  .facts { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  /* колонки без коробок: между ними только тонкая линия */
  .fact { padding: 8px 36px 0; }
  .fact + .fact { border-left: 1px solid var(--line); }
  .fact:first-child { padding-left: 0; }
  .fact:last-child { padding-right: 0; }
}
.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* большая полупрозрачная иконка: воздух вместо рамки */
.fact__icon {
  width: 40px; height: 40px;
  color: var(--bronze);
  opacity: .45;
  margin-bottom: 6px;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.fact__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.fact:hover .fact__icon { opacity: .9; transform: translateY(-3px); }
.fact__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 500;
}
.fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
}
/* ============ Темные полосы ============ */
.dark-band{
  background:var(--paper-2);color:var(--ink);
  border:1px solid rgba(169,105,30,.22);
  border-radius:34px;overflow:hidden;position:relative;
  padding:clamp(52px,7vw,92px) clamp(26px,6vw,84px);
}
/* тонкий акцентный луч сверху: карточка не сливается с фоном */
.dark-band::before{
  content:"";position:absolute;top:0;left:clamp(26px,6vw,84px);right:40%;height:2px;
  background:linear-gradient(to right,var(--accent),transparent);
}
.dark-band .quote{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.9rem,4.4vw,3.3rem);line-height:1.16;letter-spacing:-.01em;
  max-width:24ch;
}
.dark-band .sub{margin-top:22px;color:var(--ink-3);font-size:15.5px;max-width:52ch;font-weight:500}
.dark-band .actions{margin-top:36px}

/* ============ Списки ============ */
.checks{list-style:none;display:grid;gap:0}
.checks li{
  padding:16px 0 16px 34px;position:relative;
  font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--line);line-height:1.55;
  transition:transform .4s var(--ease), color .4s var(--ease);
}
.checks li:last-child{border-bottom:0}
.checks li::before{
  content:"";position:absolute;left:4px;top:24px;width:14px;height:1.5px;background:var(--bronze);
}
.checks li strong{color:var(--ink);font-weight:700;transition:color .4s var(--ease)}
.checks li:hover {
  transform:translateX(6px);
  color:var(--ink);
}
.checks li:hover strong {
  color:var(--bronze);
}
@media(min-width:768px){.checks--2{grid-template-columns:1fr 1fr;column-gap:56px}
.checks--2 li:nth-last-child(2){border-bottom:0}}

/* ============ Таймлайн ============ */
.timeline{display:grid;gap:0;border-top:1px solid var(--line-2)}
.tl{
  display:grid;gap:6px;padding:26px 0;border-bottom:1px solid var(--line);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
@media(min-width:768px){.tl{grid-template-columns:180px 1fr;gap:32px}}
.tl__date{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em;padding-top:5px}
.tl__role{font-family:var(--font-display);font-size:1.45rem;font-weight:600;letter-spacing:-.005em;line-height:1.2;transition:color .4s var(--ease)}
.tl__text{font-size:14.5px;color:var(--ink-2);max-width:60ch;margin-top:4px}
.tl:hover {
  transform:translateX(8px);
  border-bottom-color:var(--bronze);
}
.tl:hover .tl__role {
  color:var(--bronze);
}

/* ============ Заметки ============ */
.note{
  border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  font-size:14.5px;color:var(--ink-2);background:rgba(255,255,255,.45);line-height:1.6;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
body.dark .note {
  background:rgba(255,255,255,.03);
}
.note strong{color:var(--ink);transition:color .4s var(--ease)}
.note:hover {
  transform:translateY(-3px);
  border-color:var(--bronze);
  background:var(--card);
  box-shadow:0 15px 30px -15px rgba(139,101,52,.15);
}
body.dark .note:hover {
  box-shadow:0 15px 30px -15px rgba(0,0,0,.5);
}
.note--ox{
  border-color:var(--ox-line);background:var(--ox-tint);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.note--ox:hover {
  transform:translateY(-3px);
  border-color:var(--ox);
  box-shadow:0 15px 30px -15px rgba(229,92,79,.15);
}
.stack{display:grid;gap:14px}
.cols{display:grid;gap:16px}
@media(min-width:900px){.cols{grid-template-columns:1.25fr 1fr;gap:36px}}

/* большая цитата на бумаге */
.paper-quote{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.3;letter-spacing:-.005em;
  color:var(--ink);max-width:30ch;
  padding-left:26px;border-left:2px solid var(--bronze);
}

/* ============ Форма ============ */
.field{display:grid;gap:7px;margin-bottom:16px}
.field span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:14px;
  padding:13px 16px;outline:none;width:100%;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bronze)}
.field ::placeholder{color:var(--ink-3);opacity:.8}

/* ============ Контактные плитки ============ */
.contact-tile .core{gap:8px}
.contact-tile .mono{font-family:var(--font-mono);font-size:13px;color:var(--ink-2);letter-spacing:-.01em}

/* ============ Футер ============ */
.footer{border-top:1px solid var(--line);padding:34px 0 46px;margin-top:20px}
.footer .wrap{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;align-items:baseline}
.footer div{font-size:12.5px;color:var(--ink-3)}
.footer .disc{flex-basis:100%;max-width:70ch}

/* ============ Появление при прокрутке ============ */
.rv{opacity:0;transform:translateY(22px);filter:blur(5px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)}
.rv.rv-in{opacity:1;transform:none;filter:none}
.grid2>.rv:nth-child(2),.grid3>.rv:nth-child(2){transition-delay:.08s}
.grid3>.rv:nth-child(3){transition-delay:.16s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
  .page.is-current{animation:none}
}

/* ============ Переключатель тем ============ */
.theme-toggle-btn, .theme-toggle-btn-mob {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.theme-toggle-btn {
  margin-left: auto;
}
.theme-toggle-btn:hover, .theme-toggle-btn-mob:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.theme-toggle-btn svg, .theme-toggle-btn-mob svg {
  width: 17px;
  height: 17px;
}
body.dark .photo-light-img {
  display: none !important;
}
body.dark .photo-dark-img {
  display: block !important;
}
/* ============ Текстовые акценты ============ */
.accent-highlight {
  color: var(--bronze);
  font-weight: 700;
}
span.accent-highlight {
  font-weight: 600;
}

/* ============ Карусель кейсов на Главной ============ */
/* ============================================================
   Типографика: переносы, висячие строки, цифры
   ============================================================ */

/* заголовки не оставляют одинокое слово на последней строке */
h1, h2, h3, .t-section, .post__title, .quote, .nextprev strong {
  text-wrap: balance;
}
/* абзацы: браузер сам выравнивает хвост, не оставляя сироту */
p, .lead, .post__sum, .sub {
  text-wrap: pretty;
}
/* длинные русские слова переносятся, а не рвут сетку */
.article__body p,
.article__body li,
.post__sum {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}
/* цифры в таблицах и метриках стоят строго в колонку */
.calc table, .post__num, .article__fact, .mono, .fact__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   Блог: список разборов
   ============================================================ */

.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}
.filter {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  /* капс сидит оптически низко: снизу на 1px меньше */
  padding: 9px 16px 7px;
  border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--ink-3); background: transparent; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.filter:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }
.filter.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.post {
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
/* бронзовая полоса слева проявляется на наведении */
.post::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--bronze);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.post:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 20px 36px -24px rgba(26, 23, 18, .4);
}
.post:hover::before { transform: scaleY(1); }
body.dark .post:hover { box-shadow: 0 20px 36px -20px rgba(0, 0, 0, .65); }
.post:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.post__meta {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.post__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.2; letter-spacing: -.01em;
  margin: 12px 0 8px;
}
.post__sum {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-3);
}
.post__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.post__num {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: var(--ox);
}
.post__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--bronze);
}
.post__go svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  /* иконка выравнивается по высоте строчной, а не по строке */
  transform: translateY(-1px);
  transition: transform var(--dur-base) var(--ease-out);
}
.post:hover .post__go svg { transform: translate(3px, -3px); }

/* ============================================================
   Блог: страница разбора
   ============================================================ */

.article { max-width: 720px; }

.article__crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.article__crumb:hover { color: var(--bronze); }
.article__crumb svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateY(-1px);
  transition: transform var(--dur-base) var(--ease-out);
}
.article__crumb:hover svg { transform: translate(-3px, 3px); }

.article h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.06; letter-spacing: -.022em;
  margin: 24px 0 0;
}
.article__facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px;
}
.article__fact {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .05em;
  padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--ink-3);
}
.article__fact--loss {
  border-color: var(--ox-line); background: var(--ox-tint);
  color: var(--ox); font-weight: 500;
}

.article__body { margin-top: 48px; }
.article__body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.16; letter-spacing: -.012em;
  margin: 48px 0 16px;
}
.article__body h2:first-child { margin-top: 0; }
.article__body p {
  margin: 0 0 20px;
  font-size: 16.5px; line-height: 1.72; color: var(--ink-2);
}
.article__body strong { color: var(--ink); font-weight: 700; }
.article__body em { font-style: italic; color: var(--ink-3); }

.article__body ul { margin: 0 0 24px; padding: 0; list-style: none; }
.article__body ul li {
  position: relative; padding-left: 24px; margin-bottom: 12px;
  font-size: 16px; line-height: 1.68; color: var(--ink-2);
}
/* маркер вынесен в поле: край текста остается ровным */
.article__body ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bronze); opacity: .8;
}
.article__body ul li strong { color: var(--ink); }

/* --- счетная выкладка --- */
.calc {
  background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--bronze);
  border-radius: 0 16px 16px 0;
  padding: 24px;
  margin: 32px 0;
}
.calc__cap {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 16px;
}
.calc table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.calc td {
  padding: 8px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-2); line-height: 1.5;
}
.calc td:last-child {
  text-align: right; padding-left: 16px;
  font-family: var(--font-mono); font-size: 13.5px;
  white-space: nowrap;
}
.calc tr:last-child td {
  border-bottom: none; padding-top: 12px;
  font-weight: 700; color: var(--ink);
}
.calc tr:last-child td:last-child { color: var(--ox); }
.calc__note {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
}

.article__src {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}

/* --- соседние разборы --- */
.nextprev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.nextprev a {
  background: var(--card);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 24px;
  transition: border-color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.nextprev a:hover {
  border-color: var(--line-2); transform: translateY(-3px);
  box-shadow: 0 16px 30px -24px rgba(26, 23, 18, .4);
}
body.dark .nextprev a:hover { box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .6); }
.nextprev span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.nextprev strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; line-height: 1.24; color: var(--ink);
}
.nextprev a:last-child { text-align: right; }

@media (max-width: 720px) {
  .nextprev { grid-template-columns: 1fr; }
  .nextprev a:last-child { text-align: left; }
  .calc { padding: 20px; margin: 24px 0; }
  .article__body h2 { margin-top: 40px; }
}

/* --- полоса прочитанного --- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; background: transparent; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 0%;
  background: var(--bronze);
  transform-origin: 0 50%;
  transition: width var(--dur-fast) linear;
}

@media (prefers-reduced-motion: reduce) {
  .post, .post::before, .post__go svg, .nextprev a,
  .filter, .article__crumb svg, .progress__bar {
    transition: none !important;
  }
}

/* карточки списка появляются волной по три в ряд */
.posts > .rv:nth-child(3n+2) { transition-delay: 70ms; }
.posts > .rv:nth-child(3n)   { transition-delay: 140ms; }

/* счетная выкладка проявляется мягче остального текста */
.calc.rv { transform: translateY(14px); filter: none; }

@media (prefers-reduced-motion: reduce) {
  .posts > .rv { transition-delay: 0ms !important; }
}

/* пустая шапка таблицы нужна разметке, но не нужна глазу */
.calc thead { display: none; }

/* в темной теме блок призыва сливался с фоном: приподнимаем его */
body.dark .dark-band { border-color: rgba(240, 169, 97, .2); }

/* ============================================================
   Hero: график живет фоном под заголовком
   ============================================================ */

.hero { position: relative; }

.hero-canvas {
  position: absolute;
  top: -56px; left: -28px; right: -28px;
  height: clamp(320px, 35vw, 480px);
  z-index: 0;
  pointer-events: none;
  opacity: .78;
  /* слева растворяется, чтобы не спорить с текстом */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 36%, rgba(0,0,0,.55) 60%, #000 82%),
    linear-gradient(to bottom, #000 58%, transparent 96%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 36%, rgba(0,0,0,.55) 60%, #000 82%),
    linear-gradient(to bottom, #000 58%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  will-change: transform;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.hero-canvas .hero-art { width: 100%; height: 100%; }
/* на темной бумаге график читается сам по себе, приглушаем */
body.dark .hero-canvas { opacity: .52; }

/* текст поверх графика */
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
/* крупная антиква: главный акцент страницы */
.hero-inner h1 {
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 17ch;
}
.hero-inner .lead { max-width: 58ch; }

/* --- отрисовка: линии проводятся, а не появляются --- */
@keyframes heroDraw   { to { stroke-dashoffset: 0; } }
@keyframes heroFade   { to { opacity: 1; } }
@keyframes heroRise   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes heroWave   { to { transform: scale(3.2); opacity: 0; } }
@keyframes heroPop    { from { transform: scale(0); } to { transform: scale(1); } }

.hero-grid  { opacity: 0; animation: heroFade 900ms var(--ease-out) 200ms forwards; }
.hero-axis  { opacity: 0; animation: heroFade 900ms var(--ease-out) 300ms forwards; }

.hero-cost {
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: heroDraw 1400ms var(--ease-out) 450ms forwards;
}
.hero-rev {
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: heroDraw 1800ms var(--ease-out) 650ms forwards;
}
.hero-profit { opacity: 0; animation: heroFade 1200ms var(--ease-out) 1900ms forwards; }

.hero-bar {
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: heroRise 700ms var(--ease-out) forwards;
}
.hero-bar:nth-child(1)  { animation-delay: 700ms; }
.hero-bar:nth-child(2)  { animation-delay: 760ms; }
.hero-bar:nth-child(3)  { animation-delay: 820ms; }
.hero-bar:nth-child(4)  { animation-delay: 880ms; }
.hero-bar:nth-child(5)  { animation-delay: 940ms; }
.hero-bar:nth-child(6)  { animation-delay: 1000ms; }
.hero-bar:nth-child(7)  { animation-delay: 1060ms; }
.hero-bar:nth-child(8)  { animation-delay: 1120ms; }
.hero-bar:nth-child(9)  { animation-delay: 1180ms; }
.hero-bar:nth-child(10) { animation-delay: 1240ms; }
.hero-bar:nth-child(11) { animation-delay: 1300ms; }
.hero-bar:nth-child(12) { animation-delay: 1360ms; }
.hero-bar:nth-child(13) { animation-delay: 1420ms; }

/* точка ставится там, где линии сошлись, и волна расходится один раз */
.hero-point {
  opacity: 0;
  transform-origin: 690px 293px;
  animation: heroFade 400ms linear 1750ms forwards,
             heroPop 600ms var(--ease-spring) 1750ms backwards;
}
.hero-point__wave {
  transform-origin: 690px 293px;
  animation: heroWave 1600ms var(--ease-out) 2100ms forwards;
}
.hero-labels { opacity: 0; animation: heroFade 900ms var(--ease-out) 2300ms forwards; }

@media (max-width: 900px) {
  .hero-canvas {
    opacity: .3;
    height: clamp(360px, 78vw, 520px);
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
  }
  .hero-inner h1 { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid, .hero-axis, .hero-cost, .hero-rev,
  .hero-profit, .hero-bar, .hero-point, .hero-labels {
    animation: none !important;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
  .hero-point__wave { display: none; }
  .hero-canvas { transition: none; }
}

/* --- акцентное слово в заголовке: курсив и штрих от руки --- */
.mark {
  position: relative;
  font-style: italic;
  font-weight: 500;
  /* курсивное начертание оптически уже прямого, добавляем воздух */
  padding-right: .06em;
}
.mark__line {
  position: absolute;
  /* курсив уводит хвост последней буквы вправо, штрих догоняет */
  left: -.01em; right: -.13em; bottom: -.17em;
  width: auto; height: .22em;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.mark__line path {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: heroDraw 900ms var(--ease-out) 900ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .mark__line path { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   Контакты: каналы связи, форма заявки, условия
   ============================================================ */

.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

.channel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 20px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
/* цвет бренда проступает пятном из-под логотипа, а не заливает карточку */
.channel::before {
  content: "";
  position: absolute; top: -40px; left: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand, var(--bronze)) 0%, transparent 70%);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.channel:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 20px 40px -26px rgba(26, 23, 18, .45);
}
.channel:hover::before { opacity: .12; transform: scale(1); }
body.dark .channel:hover { box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .7); }
.channel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* логотипы живут без подложки: они сами по себе законченные фигуры */
.channel__logo {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  transition: transform var(--dur-base) var(--ease-out);
}
.channel__logo img { width: 46px; height: 46px; }
/* буква Gmail шире круга Telegram, уравниваем оптическую массу */
.channel__logo--mail img { width: 42px; height: 42px; }
.channel:hover .channel__logo { transform: scale(1.06); }


.channel__body { display: flex; flex-direction: column; min-width: 0; }
.channel__kick {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.channel__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1.1; letter-spacing: -.01em;
  margin: 8px 0 6px;
}
.channel__desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.channel__addr {
  margin-top: 16px;
  font-size: 13px; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.channel__go {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.channel__go svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.channel:hover .channel__go {
  transform: translate(2px, -2px);
  color: var(--accent); border-color: var(--accent);
}

/* --- форма заявки --- */
.lead { max-width: 720px; }
.lead-note { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin-bottom: 28px; max-width: 52ch; }
.lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .lead__grid { grid-template-columns: 1fr; } }

/* honeypot: не display:none, иначе часть ботов его распознает */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lead__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; margin-top: 8px; }
.lead__foot .tiny { margin: 0; max-width: 34ch; }

/* кнопка с логотипом Telegram: канал доставки виден до нажатия */
.btn--tg { padding-left: 8px; }
.btn__tg {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
}
.btn__tg img { width: 32px; height: 32px; }

/* --- подтверждение --- */
.lead__done {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 24px; padding: 20px 24px;
  border: 1px solid rgba(34, 158, 217, .32);
  background: rgba(34, 158, 217, .07);
  border-radius: 16px;
}
.lead__done strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.lead__done p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.lead__done code {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 500;
  color: var(--accent); letter-spacing: .04em;
}

/* --- форма и условия рядом: читаешь правила, не отрываясь от полей --- */
.lead-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 64px;
  align-items: start;
}
.lead-layout .lead { max-width: none; }

/* три шага: номер в кружке, соединённые вертикальной линией */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 28px 40px;
}
.steps li:last-child { padding-bottom: 0; }
/* кружок с номером */
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--paper);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--accent);
  z-index: 1;
}
/* линия тянется от кружка к следующему шагу */
.steps li::after {
  content: "";
  position: absolute; left: 13px; top: 26px; bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom, var(--line-2), var(--line));
}
.steps li:last-child::after { display: none; }
.steps strong {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.steps span {
  display: block;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
}
.terms__note {
  margin: 28px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}

@media (max-width: 1000px) {
  .lead-layout { grid-template-columns: 1fr; gap: 40px; }
  .terms { padding-top: 32px; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .channel, .channel::before, .channel__logo, .channel__go { transition: none !important; }
  }

.tiny.is-bad { color: var(--ox); font-weight: 600; }

/* атрибут hidden должен побеждать любой display у компонента */
[hidden] { display: none !important; }


/* флаги вместо аббревиатур: крупнее текста и ровно по строке */
.flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.25em;
  line-height: 1;
  vertical-align: -.14em;
  margin: 0 .14em;
}

/* иконка Telegram в блоке подтверждения вместо галочки */
.lead__logo { flex: none; width: 34px; height: 34px; }
.lead__logo img { width: 34px; height: 34px; }
.lead__done .btn { margin-top: 16px; }

/* ============================================================
   Обо мне: путь как линия времени
   ============================================================ */

.career {
  list-style: none; margin: 0; padding: 0;
  max-width: 760px;
  position: relative;
}
/* сама линия: идет за номерами сверху вниз */
.career::before {
  content: "";
  position: absolute; left: 27px; top: 16px; bottom: 16px;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--line-2) 0%, var(--line-2) 78%, var(--accent) 100%);
}
.career__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding-bottom: 44px;
}
.career__item:last-child { padding-bottom: 0; }

/* крупный номер в кружке прячет линию под собой */
.career__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.career__item:hover .career__num {
  border-color: var(--accent); color: var(--accent);
  transform: scale(1.07);
}

.career__body { padding-top: 4px; }
.career__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.career__body h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 10px;
}
.career__body p {
  margin: 0;
  font-size: 15.5px; line-height: 1.68; color: var(--ink-3);
  max-width: 58ch;
}

/* текущая ступень: залитый номер и живая карточка */
.career__item--now .career__num {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}
.career__item--now .career__body {
  background: var(--card);
  border: 1px solid rgba(169, 105, 30, .28);
  border-radius: 18px;
  padding: 22px 24px;
  margin-top: -18px;
}
body.dark .career__item--now .career__body { border-color: rgba(240, 169, 97, .3); }
.career__item--now .career__body p { color: var(--ink-2); }

@media (max-width: 640px) {
  .career::before { left: 19px; }
  .career__item { grid-template-columns: 40px 1fr; gap: 18px; }
  .career__num { width: 40px; height: 40px; font-size: 12.5px; }
  .career__item--now .career__body { margin-top: -8px; padding: 18px; }
}

/* --- квалификация: одна строка пилюль --- */
.quals { max-width: 760px; }
.quals__cap {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.quals__row { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .career__num { transition: none; }
}


/* карточка-приглашение в сетке услуг: пунктирная, зовет written */
.shell--invite { border-style: dashed; border-color: rgba(169, 105, 30, .35); background: transparent; }
.shell--invite .core { background: transparent; }
body.dark .shell--invite { border-color: rgba(240, 169, 97, .3); }

/* ============================================================
   Книга Excel: визуал стандарта финмодели
   ============================================================ */

.workbook {
  border: 1px solid var(--line-2);
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 28px 56px -40px rgba(26, 23, 18, .5);
}
body.dark .workbook { box-shadow: 0 28px 56px -36px rgba(0, 0, 0, .7); }
.workbook__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
/* светофор macOS */
.workbook__dot { width: 12px; height: 12px; border-radius: 50%; }
.workbook__dot:nth-child(1) { background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.workbook__dot:nth-child(2) { background: #FEBC2E; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.workbook__dot:nth-child(3) { background: #28C840; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.workbook__name {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px; color: var(--ink-3);
}
.workbook__tabs {
  display: flex; flex-wrap: wrap;
  align-items: flex-end;
  padding: 14px 18px 0;
  gap: 6px;
}
.workbook__tab {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .02em;
  color: var(--ink-3);
  padding: 8px 18px 10px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--paper);
  white-space: nowrap;
}
/* строка формул: как в настоящем Excel, меняется вместе с листом */
.workbook__fx {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.workbook__fx-label {
  font-family: var(--font-mono); font-size: 12px; font-style: italic;
  color: var(--ink-3);
  flex: none;
}
.workbook__fx code {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--bronze);
  overflow-wrap: anywhere;
}
/* активный лист залит как пункт меню в сайдбаре */
.workbook__tab.is-on {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  border-color: var(--ink);
}
.workbook__tab.is-on:hover { color: var(--paper); }

/* --- книга: вкладки живые, под ними описание листа --- */
.workbook__tab {
  cursor: pointer;
  font-family: var(--font-mono);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.workbook__tab:hover { color: var(--ink); }
.workbook__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.workbook__body {
  padding: 24px 26px 28px;
  border-top: 1px solid var(--line);
  margin-top: 0;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.workbook__body:not(.is-in) { opacity: 0; transform: translateY(6px); transition: none; }
.workbook__body strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.workbook__body p {
  margin: 0;
  font-size: 15.5px; line-height: 1.7;
  color: var(--ink-2);
  max-width: 62ch;
}

/* --- hero финмоделей: подсказка про вводные справа --- */
.svc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 56px;
  align-items: center;
}
/* карточка-предупреждение: в языке полосы «Принцип», с лучом сверху */
.hint {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid rgba(169, 105, 30, .22);
  border-radius: 20px;
  padding: 28px 28px 26px;
}
.hint::before {
  content: "";
  position: absolute; top: 0; left: 28px; right: 35%;
  height: 2px;
  background: linear-gradient(to right, var(--accent), transparent);
}
body.dark .hint { border-color: rgba(240, 169, 97, .24); }
.hint__tag {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .14em;
  color: var(--accent);
}
.hint__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px; line-height: 1.28;
  margin: 14px 0 12px;
}
.hint__title .mark { font-weight: 500; }
.hint__text {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.65;
  color: var(--ink-3);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.hint .card-link { display: inline-flex; }
@media (max-width: 980px) {
  .svc-hero { grid-template-columns: 1fr; gap: 32px; }
  .svc-hero aside { max-width: 520px; }
}

/* --- выравнивание по ширине: ровный правый край у текстовых абзацев --- */
.lead, .note, .checks li, .workbook__body p, .career__body p,
.article__body p, .post__sum, .terms p, .fact span,
.channel__desc, .steps span, .core p, .dark-band .sub, .lead-note {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}

/* колонки одной высоты: заметки справа распределяются до низа списка */
.cols--stretch { align-items: stretch; }
.cols--stretch .stack { justify-content: space-between; height: 100%; }
.cols--stretch .checks li:first-child { padding-top: 0; }

/* ============================================================
   Цепочка услуг: где эта ступень в общем пути
   ============================================================ */

.flow-top { padding-top: 26px; }
.flow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.flow__label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}
.flow__chain { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.flow__step {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .02em;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.flow__step:hover { color: var(--ink); border-color: var(--ink-3); }
.flow__step.is-here {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink); font-weight: 500;
}
.flow__arr { color: var(--ink-3); font-size: 12px; }
.flow__cap {
  font-size: 12px; line-height: 1.5;
  color: var(--ink-3);
  margin-left: auto;
  text-align: right;
}
@media (max-width: 980px) {
  .flow__cap { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* цепочка на месте плашки-заголовка страницы */
.flow--eyebrow { border-bottom: none; padding: 0; gap: 8px 14px; }

.hint__links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ============================================================
   Услуги на главной: оглавление-реестр вместо карточек
   ============================================================ */

.svcindex { border-top: 1px solid var(--line-2); }
.svcrow {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 20px;
  padding: 20px 8px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-base) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
.svcrow:hover { background: var(--card); padding-left: 20px; }
.svcrow__num {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
.svcrow:hover .svcrow__num { color: var(--accent); }
.svcrow__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svcrow__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 25px); line-height: 1.15;
  letter-spacing: -.01em;
}
.svcrow__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.svcrow__tag {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.svcrow__go {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink-3);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.svcrow__go svg {
  width: 11px; height: 11px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.svcrow:hover .svcrow__go {
  transform: translate(2px, -2px);
  color: var(--accent); border-color: var(--accent);
}
/* последняя строка: приглашение, пунктир слева от номера */
.svcrow:last-child .svcrow__num { color: var(--accent); }
@media (max-width: 760px) {
  .svcrow { grid-template-columns: 40px minmax(0, 1fr) 32px; }
  .svcrow__tag { display: none; }
}

/* ============================================================
   Карусель разборов: прокрутка со стрелками по бокам
   ============================================================ */

.caro { position: relative; }
.caro .posts {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 16px;
  padding: 4px 4px 20px;
  margin: 0 -4px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.caro .posts::-webkit-scrollbar { display: none; }
.caro .post {
  flex: 0 0 min(360px, 82vw);
  scroll-snap-align: start;
}
.caro__btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(26, 23, 18, .4);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.caro__btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.caro__btn:hover { color: var(--accent); border-color: var(--accent); }
.caro__btn--prev { left: -14px; }
.caro__btn--next { right: -14px; }
.caro__btn.is-off { opacity: 0; pointer-events: none; }
body.dark .caro__btn { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.fact__link { margin-top: 14px; font-size: 13px; }

/* переносы слов — только там, где без них не выжить: на узких экранах */
@media (min-width: 761px) {
  .lead, .checks li, .core p, .post__sum, .steps span,
  .channel__desc, .fact span, .lead-note {
    hyphens: manual; -webkit-hyphens: manual;
  }
}

/* мобильная дисциплина: ничто не распирает страницу вширь */
html, body { overflow-x: hidden; overflow-x: clip; }
@media (max-width: 760px) {
  .caro__btn--prev { left: 4px; }
  .caro__btn--next { right: 4px; }
  .hero-canvas { left: 0; right: 0; }
  .caro .posts { margin: 0; padding-left: 0; padding-right: 0; }
}