/* Антон Рыжиков — общий стиль трёх форматов
   Система: белый фон, почти чёрный текст, один акцент (киноварь).
   Подпись сайта: красная полоса «сейчас» на шкале опыта. */
:root {
  color-scheme: light;
  --ground: #ffffff;
  --surface: oklch(0.972 0.003 260);
  --ink: oklch(0.19 0.006 260);
  --ink-2: oklch(0.43 0.008 260);
  --ink-3: oklch(0.62 0.008 260);
  --line: oklch(0.19 0.006 260 / 0.1);
  --accent: oklch(0.54 0.19 33);
  --accent-ink: oklch(0.49 0.18 33);
  --night: oklch(0.17 0.004 260);

  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, serif;
  --settle: cubic-bezier(.22, 1, .36, 1);
  --soft: cubic-bezier(.33, 1, .68, 1);

  --pad: clamp(16px, 5vw, 72px);
  --sec: clamp(44px, 4.5vw, 64px);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.55;
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.print-only { display: none; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }

/* ── Кнопки ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: background-color .2s var(--soft), transform .1s var(--soft);
}
.btn:hover { background: var(--accent-ink); }
.btn:active { transform: scale(.98); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { background: var(--surface); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 0.875rem; }

/* ── Навигация: прозрачная поверх первого экрана ─── */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.topbar__name { font-weight: 500; text-decoration: none; }
.topbar__meta { display: flex; align-items: center; gap: 20px; font-size: 0.875rem; }
.topbar__meta a:not(.btn) { color: var(--ink-2); text-decoration: none; }
.topbar__meta a:not(.btn):hover { color: var(--ink); }

/* ── Первый экран: портрет уходит за верх, правый край и низ ── */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(600px, 100svh, 1080px);
}
.hero__wrap { position: relative; z-index: 2; min-height: inherit; display: flex; align-items: center; }
.hero__copy { width: 52%; padding: 96px 0 56px; }
.eyebrow { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: 24px; }
.eyebrow b { color: var(--ink); font-weight: 500; }
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.03em; max-width: 11em; }
.role { margin-top: 16px; font-size: var(--fs-lead); }
.lead { margin-top: 24px; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.hero__proof { margin-top: 32px; padding-left: 14px; border-left: 2px solid var(--accent); font-size: var(--fs-small); max-width: 28em; }
.hero__proof a { color: var(--ink-2); text-decoration: none; }
.hero__proof a:hover { color: var(--ink); }
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; mix-blend-mode: multiply; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.js .ld { animation: rise .8s var(--settle) both; animation-delay: calc(var(--d, 0) * 70ms); }
.js .hero__media { animation: fade 1.1s var(--soft) both; }
@media (prefers-reduced-motion: reduce) { .js .ld, .js .hero__media { animation: fade .2s linear both; } }

/* ── Секции ─────────────────────────────────────── */
.sec { padding-top: var(--sec); }
.shead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; margin-bottom: 28px; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.025em; max-width: 16em; }
.shead__intro { color: var(--ink-2); max-width: 26em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }
.note { margin-top: 40px; max-width: 40em; color: var(--ink-2); }

/* Профиль: метанавык + шкала опыта */
.feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; padding: 40px 0 56px; border-top: 1px solid var(--ink); }
.feature__text h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
.feature__text p { margin-top: 14px; color: var(--ink-2); }
.gantt__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; padding: 10px 0; }
.gantt__label b { display: block; font-weight: 500; font-size: 0.9375rem; line-height: 1.3; }
.gantt__label span { display: block; font-size: var(--fs-label); color: var(--ink-2); }
.gantt__track { position: relative; height: 10px; background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.gantt__bar { position: absolute; top: 0; height: 10px; border-radius: 2px; background: var(--ink); transform-origin: left center; }
.gantt__bar.is-now { background: linear-gradient(90deg, var(--accent) 60%, transparent); }
.js .gantt__bar.grow { transform: scaleX(0); transition: transform 1s var(--settle); transition-delay: calc(var(--d, 0) * 90ms); }
.js .gantt__bar.grow.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .gantt__bar.grow { transform: none; transition: none; } }
.gantt__axis { padding-top: 6px; }
.gantt__axis .gantt__track { background: none; height: 16px; }
.gantt__axis span { position: absolute; top: 0; font-size: 0.75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.gantt__axis span:nth-child(even) { visibility: hidden; }

.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.meta p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-small); }

/* Профиль: навыки группами */
.skills { column-count: 3; column-gap: 40px; }
.skills section { padding-top: 16px; border-top: 1px solid var(--ink); break-inside: avoid; margin-bottom: 36px; }
.skills ul { margin-top: 10px; }
.skills li { color: var(--ink-2); line-height: 1.4; }
.skills li + li { margin-top: 6px; }

/* Профиль: кейс */
.showcase { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; padding: clamp(32px, 5vw, 64px); background: var(--surface); border-radius: 6px; }
.showcase h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); }
.showcase__text > p:not(.case__label) { margin-top: 14px; color: var(--ink-2); max-width: 34em; }
.showcase .link { display: inline-block; margin-top: 24px; font-weight: 500; color: var(--accent-ink); }
.showcase__quote .quote { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.85rem); }
.showcase__quote figcaption { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-2); }

/* Профиль: матрица навыков × места работы */
.matrix { width: 100%; border-collapse: collapse; }
.matrix thead th { position: sticky; top: 0; z-index: 1; background: var(--ground); font-size: var(--fs-label); font-weight: 400; color: var(--ink-2); padding: 12px 0; text-align: center; border-bottom: 1px solid var(--ink); }
.matrix thead th:first-child { text-align: left; }
.matrix th[scope="row"] { text-align: left; font-weight: 400; padding: 12px 24px 12px 0; width: 52%; }
.matrix .skill { display: block; font-weight: 500; }
.matrix .ex { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.matrix td { text-align: center; border-bottom: 1px solid var(--line); }
.matrix th[scope="row"] { border-bottom: 1px solid var(--line); }
.matrix__group th { text-align: left; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; padding: 40px 0 12px; border-bottom: 1px solid var(--line); }
.matrix tbody:first-of-type .matrix__group th { padding-top: 24px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.dash { display: inline-block; width: 10px; height: 1px; background: var(--line); vertical-align: middle; }
.matrix tr:hover th[scope="row"] .skill { color: var(--accent-ink); }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.duo p { margin-top: 8px; color: var(--ink-2); max-width: 30em; }
#education { padding-top: calc(var(--sec) / 2); }

/* ИИ: сопоставление «из бизнеса → во внедрении» */
.compare__head, .compare__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.compare__head { font-size: var(--fs-label); color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.compare__head span:last-child { color: var(--accent-ink); }
.compare__row { padding: 22px 0; border-bottom: 1px solid var(--line); }
.compare__row p { margin-top: 6px; color: var(--ink-2); }
.compare { border-top: 1px solid var(--line); }
.compare__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); row-gap: 4px; }
.compare__lbl { grid-column: 1; grid-row: 1 / span 2; }
.compare__lbl h3 { margin: 0; }
.compare__from { grid-column: 2; }
.compare__ai { grid-column: 2; font-weight: 500; }
.compare__row p.compare__from, .compare__row p.compare__ai { margin-top: 0; }
.compare__ai { color: var(--ink) !important; }

/* ИИ: услуги плитками */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tiles li { background: var(--surface); border-radius: 6px; padding: 28px 24px 32px; transition: background-color .3s var(--soft); }
.tiles li:hover { background: oklch(0.955 0.004 260); }
.tiles p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-small); }

/* ИИ: шаги — настоящая последовательность */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; position: relative; }
.steps::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: var(--line); }
.steps li { position: relative; }
.steps__n { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--ink); font-size: 0.875rem; font-variant-numeric: tabular-nums; margin-bottom: 20px; }
.steps li:last-child .steps__n { background: var(--accent); color: #fff; box-shadow: none; }
.steps p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-small); }

/* ИИ: почему + кейс */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.why > div { padding: 20px 0; border-top: 1px solid var(--line); }
.why p { margin-top: 6px; color: var(--ink-2); }
.case { background: var(--surface); border-radius: 6px; padding: 32px; }
.case__label { font-size: var(--fs-label); color: var(--accent-ink); margin-bottom: 12px; }
.case > p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-small); }
.case__quote { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--accent); }
.case__quote figcaption { margin-top: 10px; font-size: var(--fs-label); color: var(--ink-2); }
.case .link { display: inline-block; margin-top: 20px; font-size: var(--fs-small); font-weight: 500; color: var(--accent-ink); }

.quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.35; }
.quote::before { content: "«"; } .quote::after { content: "»"; }
:lang(en) .quote::before { content: "\201C"; } :lang(en) .quote::after { content: "\201D"; }

/* Неформальный: колонка для чтения */
.story { max-width: 40rem; margin: 0 auto; }
.story h2 { margin-bottom: 40px; }
.story p { font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; }
.story p + p { margin-top: 14px; }
.story__big { font-size: 1.25rem !important; }
.story__h { margin-top: 72px; }
.sign { font-style: italic; color: var(--ink-2); margin-top: 24px !important; }
/* me: ряд вызовов на линиях */
.dares { list-style: none; border-top: 1px solid var(--ink); }
.dares li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px 64px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dares__q { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.dares__q em { color: var(--accent-ink); white-space: nowrap; }
.dares__out { color: var(--ink-2); max-width: 30em; }
.pull { margin-top: var(--sec); padding: clamp(64px, 9vw, 120px) 0; background: var(--surface); }
.quote--xl { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem); line-height: 1.22; letter-spacing: -0.01em; max-width: 22em; }

/* ── Контакты: тёмная полоса на всю ширину ───────── */
.band { margin-top: var(--sec); background: var(--night); color: #fff; padding: clamp(36px, 4vw, 52px) 0; }
.band__in { display: grid; gap: clamp(32px, 4vw, 48px); }
.band__title { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem); line-height: 1.15; letter-spacing: normal; max-width: 13em; }
.band__intro { margin-top: 16px; color: oklch(1 0 0 / .62); }
.band__label { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.cta { margin-top: var(--sec); }
.cta__in { display: flex; align-items: center; justify-content: space-between; gap: 20px 48px; padding: clamp(28px, 3.6vw, 44px) clamp(24px, 4vw, 56px); background: #fff; border: 1px solid oklch(0.19 0.006 260 / 0.14); border-radius: 18px; box-shadow: 0 1px 2px oklch(0.19 0.006 260 / 0.05), 0 14px 32px -14px oklch(0.19 0.006 260 / 0.22); }
.cta__title { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; max-width: 30em; text-wrap: balance; }
.cta__act { flex: none; }
.cta__btn { height: 48px; padding: 0 26px; font-size: 1rem; }
@media screen and (max-width: 760px) { .cta__in { flex-direction: column; align-items: stretch; } .cta__btn { width: 100%; justify-content: center; } }
.clist { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
@media screen and (min-width: 861px) { .page-me .clist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.clist li { display: grid; grid-template-rows: auto auto; gap: 10px; align-content: start; padding: 22px 0 4px; border-top: 1px solid oklch(1 0 0 / .18); }
.clabel { font-size: var(--fs-small); color: oklch(1 0 0 / .55); }
.cbox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.cval {
  font: inherit; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 500; letter-spacing: normal;
  color: #fff; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  overflow-wrap: anywhere; transition: color .2s var(--soft);
}
.cval:hover { color: oklch(0.72 0.15 33); }
.ccopy { font: inherit; font-size: var(--fs-small); color: oklch(1 0 0 / .6); background: none; border: 1px solid oklch(1 0 0 / .25); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.ccopy:hover { color: #fff; border-color: oklch(1 0 0 / .6); }
.compare__where { font-size: var(--fs-small); color: var(--ink-2); margin: 2px 0 6px; }
.footer { background: var(--night); color: oklch(1 0 0 / .5); font-size: var(--fs-label); }
.footer__in { display: flex; justify-content: space-between; gap: 16px; padding: 20px var(--pad) 28px; border-top: 1px solid oklch(1 0 0 / .1); }
.footer a { color: inherit; text-decoration: none; } .footer a:hover { color: #fff; }

/* ── Адаптив ────────────────────────────────────── */
@media screen and (max-width: 1100px) {
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills { column-count: 2; }
  .band__in, .showcase { grid-template-columns: 1fr; }
}
@media screen and (max-width: 860px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero__wrap { min-height: 0; }
  .hero__copy { width: 100%; padding: 96px 0 40px; }
  .hero:not(.hero--space) .hero__media { order: -1; position: relative; inset: auto; width: 132px; height: 132px; margin: 92px var(--pad) 0; border-radius: 50%; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .hero:not(.hero--space) .hero__media img { mix-blend-mode: normal; object-position: 50% 12%; transform: scale(1.5); transform-origin: 50% 18%; }
  .hero:not(.hero--space) .hero__copy { padding-top: 28px; }
  .feature, .split { grid-template-columns: 1fr; gap: 32px; }
  .gantt__row { grid-template-columns: 1fr; gap: 8px; }
  .gantt__axis > div:first-child { display: none; }
  .gantt__axis span:first-child { transform: none; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px; }
  .steps::before { display: none; }
}
@media screen and (max-width: 640px) {
  .topbar__meta { gap: 14px; }
  .topbar__meta a[download] { display: none; }
  .meta, .duo, .tiles, .steps, .dares li { grid-template-columns: 1fr; }
  .skills { column-count: 1; }
  .clist { grid-template-columns: 1fr; } .clist li { padding: 18px 0; } .clist li:last-child { border-bottom: 1px solid oklch(1 0 0 / .18); }
  .btn--sm { white-space: nowrap; }
  .compare__head { display: none; }
  .compare__row { grid-template-columns: 1fr; gap: 10px; }
  .compare__ai { padding-left: 14px; border-left: 2px solid var(--accent); }
  /* Матрица на телефоне: навык, ниже — где применялся, плашками */
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: auto; }
  .matrix tr:not(.matrix__group) { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .matrix th[scope="row"] { padding: 0; border: 0; width: auto; }
  .matrix td { display: inline-block; border: 0; margin: 8px 6px 0 0; }
  .matrix td.off { display: none; }
  .matrix td.on::after { content: attr(data-l); font-size: 0.75rem; color: var(--ink-2); padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  .matrix td.on .dot { display: none; }
  .btn:not(.btn--sm) { flex: 1 1 auto; }
  .case { padding: 24px; }
}

/* ── Печать / PDF ───────────────────────────────── */
@media print {
  @page { size: A4; margin: 12mm 13mm; }
  :root { --fs-h1: 26pt; --fs-h2: 14pt; --fs-h3: 10.5pt; --fs-lead: 10.5pt; --fs-body: 9.5pt; --fs-small: 8.5pt; --fs-label: 7.5pt; --sec: 7mm; --pad: 0; }
  body { line-height: 1.42; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wrap { max-width: none; }
  .topbar, .actions, .ccopy, .footer, .no-print, .hero__proof { display: none !important; }
  .print-only { display: block; }
  .js .ld, .js .hero__media { animation: none !important; }
  .js .gantt__bar.grow { transform: none !important; transition: none !important; }
  .hero { min-height: 0; border: 0; }
  .hero__wrap { min-height: 0; display: block; }
  .hero__copy { width: auto; margin-right: 46mm; padding: 0; }
  .hero__media { left: auto; width: 38mm; height: 38mm; top: 0; bottom: auto; border-radius: 50%; overflow: hidden; }
  .hero__media img { object-position: 50% 0; transform: none; }
  .lead { margin-top: 3mm; } .role { margin-top: 2mm; } .eyebrow { margin-bottom: 3mm; }
  .hero__contacts { margin-top: 4mm; font-size: var(--fs-small); }
  .hero__contacts span + span::before { content: "  ·  "; white-space: pre; color: var(--ink-3); }
  .shead { margin-bottom: 3mm; }
  .feature { padding: 3mm 0 4mm; gap: 6mm; }
  .gantt__row { padding: 1mm 0; }
  .meta { gap: 4mm; padding-top: 3mm; } .meta li { break-inside: avoid; }
  .matrix thead th { position: static; padding: 1.5mm 0; }
  .matrix th[scope="row"] { padding: 1mm 4mm 1mm 0; }
  .matrix__group th { padding: 3mm 0 1mm; }
  .matrix tr { break-inside: avoid; }
  .dot { width: 6px; height: 6px; }
  .duo { gap: 6mm; padding-top: 3mm; }
  .compare__row { padding: 2mm 0; break-inside: avoid; }
  .tiles { gap: 2mm; } .tiles li { padding: 3mm; break-inside: avoid; }
  .steps { gap: 4mm; } .steps__n { width: 6mm; height: 6mm; margin-bottom: 2mm; }
  .split { gap: 6mm; } .why > div { padding: 2mm 0; } .case { padding: 4mm; break-inside: avoid; }
  .story { max-width: none; } .story h2 { margin-bottom: 3mm; }
  .dares li { padding: 2mm 0; gap: 1mm 8mm; break-inside: avoid; } .dares__q { font-size: 11.5pt; } .dares__out { font-size: 9.5pt; }
  .story p { font-size: 9.5pt; line-height: 1.5; } .story p + p { margin-top: 1.5mm; }
  .pull { margin-top: 5mm; padding: 5mm 0; } .quote--xl { font-size: 13pt; }
  .story__h { margin-top: 5mm; }
  .band { margin-top: 6mm; padding: 5mm 0 0; background: none; color: var(--ink); break-inside: avoid; }
  .band__title { font-size: 14pt; } .band__intro, .clabel { color: var(--ink-2); }
  .band__in { display: block; } .clist { margin-top: 3mm; border-color: var(--line); } .clist li { padding: 1.5mm 0; border-color: var(--line); }
  .skills { column-gap: 5mm; } .skills section { padding-top: 2mm; margin-bottom: 4mm; break-inside: avoid; } .skills li + li { margin-top: 1mm; }
  .showcase { padding: 5mm; gap: 6mm; break-inside: avoid; }
  .cval { color: var(--ink); font-size: 10pt; }
  /* Сессия 13: поток страниц и колонтитул */
  h2, h3, .shead, .eyebrow, .band__head { break-after: avoid; }
  .feature, .gantt__row, .tiles li, .steps li, .why > div, .skills section, .compare__row, .chapter, .case, .quote, .pull { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  .band { break-inside: avoid; }
  .clist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6mm; } .clist li { padding: 2mm 0 0; gap: 1mm; border-bottom: 0; }
  html:lang(en) body { page: en; }
  /* контакты уже в шапке первой страницы и в колонтитуле */
  #contacts { display: none !important; }
  .hero__contacts { display: flex !important; flex-wrap: wrap; gap: 1mm 5mm; }
  .hero__contacts span + span::before { content: none !important; }
  .posts a span[aria-hidden] { display: none; }
  #competencies { break-before: page; margin-top: 0; padding-top: 0; }
  .gantt__row { grid-template-columns: 58mm minmax(0, 1fr); gap: 5mm; }
  .showcase h2 { font-size: 13pt; } .showcase__quote .quote, .case .quote, .quote { font-size: 11.5pt; line-height: 1.35; }
  .showcase { gap: 8mm; }
}
@page {
  @bottom-left { content: "Антон Рыжиков · t.me/bambuck"; font: 7pt "Onest", sans-serif; color: #8a8f98; }
  @bottom-right { content: "стр. " counter(page) " / " counter(pages); font: 7pt "Onest", sans-serif; color: #8a8f98; }
}
@page en {
  @bottom-left { content: "Anton Ryzhikov · t.me/bambuck"; font: 7pt "Onest", sans-serif; color: #8a8f98; }
  @bottom-right { content: "p. " counter(page) " / " counter(pages); font: 7pt "Onest", sans-serif; color: #8a8f98; }
}

/* Матрица: равные столбцы мест работы */
@media (min-width: 641px) {
  .matrix { table-layout: fixed; }
  .matrix thead th:first-child { width: 50%; }
  .matrix thead th:not(:first-child) { width: 10%; }
}

/* ══ me: космос ═══════════════════════════════════
   Своя система: глубокий сине-фиолетовый фон, звёзды, звёздно-золотой акцент.
   Подпись страницы: портрет-луна с орбитами; главы истории — созвездия. */
.page-me {
  color-scheme: dark;
  --ground: oklch(0.15 0.03 278);
  --surface: oklch(0.2 0.035 280);
  --ink: oklch(0.96 0.008 270);
  --ink-2: oklch(0.8 0.02 270);
  --ink-3: oklch(0.64 0.03 270);
  --line: oklch(1 0 0 / 0.13);
  --accent: oklch(0.85 0.12 82);
  --accent-ink: oklch(0.88 0.11 84);
  --night: oklch(0.11 0.025 278);
  background:
    radial-gradient(60vw 50vw at 85% 8%, oklch(0.32 0.09 300 / .45), transparent 70%),
    radial-gradient(50vw 40vw at 0% 55%, oklch(0.3 0.07 230 / .35), transparent 70%),
    var(--ground);
  background-attachment: fixed;
}
.page-me main, .page-me .footer { position: relative; z-index: 1; }
.page-me ::selection { background: var(--accent); color: var(--night); }
.page-me .btn { color: var(--night); }
.page-me .btn:hover { background: oklch(0.92 0.09 86); }
.page-me .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .3); }
.page-me .btn--ghost:hover { background: oklch(1 0 0 / .07); }
.page-me .footer, .page-me .band { background: transparent; }
.page-me .footer__in { border-color: var(--line); }

.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sky svg { width: 100%; height: 100%; }
.sky .tw { animation: tw 5s ease-in-out infinite; animation-delay: var(--t); }
@keyframes tw { 50% { opacity: .15; } }

/* Первый экран: портрет — луна на орбитах */
.hero--space { border-bottom: 0; overflow: visible; }
@media (min-width: 861px) { .hero--space .hero__copy { width: 48%; } }
.page-me main { overflow-x: clip; }
.moon {
  position: absolute; z-index: 1; top: 50%; right: max(var(--pad), calc((100vw - 1280px) / 2 + var(--pad)));
  width: min(34vw, 500px); aspect-ratio: 1; translate: 0 -50%;
}
.moon img {
  position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  box-shadow: 0 0 0 1px oklch(1 0 0 / .5), 0 0 60px 6px oklch(0.85 0.06 270 / .35), 0 0 180px 40px oklch(0.6 0.12 290 / .25);
}
.moon__orbit { position: absolute; inset: -14%; border-radius: 50%; border: 1px solid oklch(1 0 0 / .16); }
.moon__orbit--b { inset: -30%; border-style: dashed; border-color: oklch(1 0 0 / .09); }
.moon__orbit i { position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 3px oklch(0.85 0.12 82 / .6); }
.moon__orbit--b i { width: 5px; height: 5px; left: auto; right: -2.5px; margin-top: -2.5px; background: #fff; }
.js .moon__orbit--a { animation: spin 60s linear infinite; }
.js .moon__orbit--b { animation: spin 140s linear infinite reverse; }
@keyframes spin { to { rotate: 360deg; } }
.js .moon { animation: fade 1.4s var(--soft) both; }

/* Вызовы: тезисы-ссылки на главы */
.dares--space { border-top-color: oklch(1 0 0 / .35); }
.dares--space li { display: block; padding: 0; }
.dares--space a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 48px; align-items: baseline; padding: 26px 0; text-decoration: none; }
.dares--space .dares__q { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); }
.dares__go { font-size: var(--fs-small); color: var(--ink-3); white-space: nowrap; transition: color .2s var(--soft); }
.dares--space a:hover .dares__go { color: var(--accent); }
.dares--space a:hover .dares__q { color: #fff; }

/* Карта созвездий: главы на общей «орбите» */
.chart { position: relative; }
.chart::before { content: ""; position: absolute; top: 60px; bottom: 60px; left: 79px; width: 1px; background: linear-gradient(oklch(1 0 0 / 0), oklch(1 0 0 / .22) 8%, oklch(1 0 0 / .22) 92%, oklch(1 0 0 / 0)); }
.chapter { display: grid; grid-template-columns: 160px minmax(0, 40rem); gap: 0 clamp(32px, 6vw, 96px); padding: 48px 0; scroll-margin-top: 24px; }
.chapter__mark { position: relative; }
.cons { position: sticky; top: 32px; width: 160px; height: 160px; display: block; background: radial-gradient(closest-side, var(--ground) 70%, transparent); }
.cons polyline { fill: none; stroke: oklch(1 0 0 / .35); stroke-width: 1; }
.cons circle { fill: #fff; }
.cons circle:first-of-type { fill: var(--accent); filter: drop-shadow(0 0 4px oklch(0.85 0.12 82 / .9)); }
.chapter__title { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 24px; }
.chapter__body > p:not(.posts) { font-family: var(--serif); font-size: 1.125rem; line-height: 1.72; color: var(--ink-2); }
.chapter__body > p:not(.posts) + p { margin-top: 14px; }
.chapter__body > p:first-of-type { color: var(--ink); }
.chapter__body a:not(.posts a) { color: var(--accent); }
.posts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 28px; }
.posts__l { font-size: var(--fs-label); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.posts a { font-size: var(--fs-small); text-decoration: none; padding: 5px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .22); transition: box-shadow .2s var(--soft), color .2s var(--soft); }
.posts a:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.pull--space { background: none; text-align: center; }
.pull--space .quote--xl { margin: 0 auto; text-shadow: 0 0 40px oklch(0.6 0.12 290 / .6); }
.pull--space .sign { margin-top: 24px; color: var(--ink-3); }

.page-me .cval:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sky .tw, .js .moon__orbit--a, .js .moon__orbit--b { animation: none; }
}
@media screen and (max-width: 860px) {
  .hero--space { flex-direction: column-reverse; }
  .moon { position: relative; top: auto; right: auto; translate: none; width: min(64vw, 340px); margin: 112px auto 8px; }
  .hero--space .hero__copy { padding-top: 40px; }
}
@media screen and (max-width: 640px) {
  .dares--space a { grid-template-columns: 1fr; }
  .chart::before { left: 27px; top: 40px; }
  .chapter { grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: 36px 0; }
  .cons { width: 56px; height: 56px; top: 16px; }
  .chapter__title { font-size: 1.6rem; margin-bottom: 16px; }
  .chapter__body > p:not(.posts) { font-size: 1.0625rem; }
}

/* PDF me — светлый печатный вариант */
@media print {
  .page-me {
    color-scheme: light; background: #fff;
    --ground: #fff; --surface: oklch(0.972 0.003 260); --ink: oklch(0.19 0.006 260); --ink-2: oklch(0.38 0.008 260); --ink-3: oklch(0.55 0.008 260);
    --line: oklch(0.19 0.006 260 / 0.12); --accent: oklch(0.54 0.19 33); --accent-ink: oklch(0.49 0.18 33);
  }
  .sky, .moon__orbit, .chart::before, .dares__go { display: none !important; }
  .js .moon { animation: none !important; }
  .moon { position: absolute; top: 0; right: 0; translate: none; width: 38mm; margin: 0; }
  .moon img { box-shadow: none; }
  .hero--space .hero__copy { margin-right: 46mm; padding: 0; }
  .dares--space { border-top-color: var(--ink); }
  .dares--space a { padding: 2mm 0; display: block; } .dares--space .dares__q { font-size: 11pt; }
  .chapter { grid-template-columns: 14mm minmax(0, 1fr); gap: 0 5mm; padding: 3mm 0; break-inside: avoid; }
  .cons { position: static; width: 14mm; height: 14mm; background: none; }
  .cons polyline { stroke: var(--ink-3); } .cons circle { fill: var(--ink); }
  .chapter__title { font-size: 13pt; margin-bottom: 2mm; }
  .chapter__body > p:not(.posts) { font-size: 9.5pt; line-height: 1.5; }
  .chapter__body > p:not(.posts) + p { margin-top: 1.5mm; }
  .posts { margin-top: 2mm; gap: 1mm 3mm; } .posts a { padding: 0; box-shadow: none; font-size: 8.5pt; color: var(--accent-ink); }
  .posts a::after { content: " " attr(href); color: var(--ink-3); }
  .pull--space { padding: 4mm 0; } .pull--space .quote--xl { text-shadow: none; }
}

.page-me .band { margin-top: 0; }

a, button { transition: color .2s var(--soft), background-color .2s var(--soft), border-color .2s var(--soft), box-shadow .2s var(--soft); }

/* Сессия 16: AI PDF в 2 страницы */
@media print {
  .page-ai .compare__lbl { display: block; }
  .page-ai .compare__where { margin: 0; }
  .page-ai .compare__row { padding: 1.6mm 0; row-gap: 0.8mm; }
  .page-ai .tiles li { padding: 2.6mm 3mm; }
  .page-ai .tiles p { font-size: 8.5pt; line-height: 1.4; }
  .page-ai .note { margin-top: 3mm; font-size: 9pt; }
  .page-ai .steps p { font-size: 8.5pt; }
  .page-ai .why > div { padding: 1.4mm 0; }
  .page-ai .case { padding: 3.5mm; }
  .page-ai .case .quote { font-size: 10.5pt; }
}

/* Сессия 18: имя в верхней полосе убрано на ai/index, мягкий край фото, низкий подвал */
@media screen and (min-width: 861px) {
  .hero:not(.hero--space) .hero__media {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px), linear-gradient(to top, transparent 0, #000 28px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 28px), linear-gradient(to top, transparent 0, #000 28px);
    mask-composite: intersect;
  }
  .page-ai .band__in, .page-cv .band__in { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: start; }
  .page-ai .band__head, .page-cv .band__head { padding-top: 20px; }
  .page-ai .clist, .page-cv .clist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Сессия 19: имя в шапке вернули; на ai строка-eyebrow убрана (в PDF остаётся) */
@media screen { .page-ai .hero .eyebrow { display: none; } }

/* Сессия 19: телефон — центровка, плотнее, круглое фото без зума */
@media screen and (max-width: 640px) {
  .page-ai, .page-cv { --sec: 40px; }
  .page-ai .shead, .page-cv .shead { margin-bottom: 20px; }
  .hero:not(.hero--space) .hero__media { width: 148px; height: 148px; margin: 84px auto 0; }
  .hero:not(.hero--space) .hero__media img { transform: none; object-position: 50% 0; }
  .page-ai .hero__copy, .page-cv .hero__copy { padding: 20px 0 8px; text-align: center; }
  .page-ai .hero h1, .page-cv .hero h1, .page-ai .lead, .page-cv .lead { margin-inline: auto; }
  .page-ai .shead, .page-cv .shead { justify-content: center; text-align: center; }
  .page-ai h2, .page-cv h2 { margin-inline: auto; text-align: center; }
  .page-ai .note, .page-ai .why, .page-ai .case, .page-ai .tiles li,
  .page-cv .feature, .page-cv .meta li, .page-cv .skills section, .page-cv .showcase,
  .band__head, .clist li, .cta__in { text-align: center; }
  .cta__in { flex-direction: column; align-items: center; }
  /* сравнение: стопкой по центру, вывод — мягкой плашкой */
  .compare__row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; text-align: center; }
  .compare__lbl, .compare__from, .compare__ai { grid-column: 1; grid-row: auto; }
  .compare__where { margin: 4px 0 0; }
  .compare__ai { border-left: 0; padding: 12px 16px; margin-top: 6px; background: var(--surface); border-radius: 12px; }
  /* шаги: номер слева на уровне середины текста, блок по центру */
  .steps { max-width: 340px; margin-inline: auto; gap: 22px; }
  .steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; align-items: center; }
  .steps__n { grid-row: 1 / span 2; margin: 0; }
  .steps li h3, .steps li p { grid-column: 2; margin: 0; }
}
@media screen and (max-width: 640px) {
  .case__quote, .showcase__quote { border-left: 0 !important; padding-left: 0 !important; text-align: center; }
}
@media screen and (max-width: 640px) {
  .clist li { justify-items: center; }
  .cbox { justify-content: center; }
  .page-cv .gantt { text-align: left; }
}

/* Сессия 20: кнопка «открыть» у Telegram; телефон — единые разделители и интервалы */
a.ccopy { text-decoration: none; display: inline-flex; align-items: center; }
.band .cval, .band .cval:visited { color: #fff; }
@media screen and (max-width: 640px) {
  /* одна система: секции без линий, внутри списков — тонкие линии, интервал 20px */
  .page-ai .sec, .page-cv .sec { padding-top: 48px; }
  .page-cv .feature { border-top: 0; padding: 0 0 8px; gap: 24px; }
  .skills section { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 18px; }
  .compare { border-top: 1px solid var(--line); }
  .compare__row { padding: 20px 0; }
  .compare__row:last-child, .why > div:last-child { border-bottom: 0; }
  .meta { gap: 20px; }
  .tiles { gap: 12px; }
  .tiles li, .case, .showcase, .cta__in { border-radius: 14px; }
  .cta { margin-top: 48px; }
  /* шаги: номер слева по середине, текст по центру экрана */
  .steps { max-width: none; gap: 18px; }
  .steps li { grid-template-columns: 36px 1fr 36px; text-align: center; }
  /* контакты: без нижней линии */
  .clist li:last-child { border-bottom: 0; }
}
@media screen and (min-width: 861px) {
  .page-ai .band__in, .page-cv .band__in { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); }
  .band .cbox { flex-wrap: nowrap; white-space: nowrap; }
}

/* Тест: цветное фото на ai (квадратное, мало места над головой) */
@media screen and (min-width: 861px) {
  .page-ai .hero__media, .page-cv .hero__media { top: 72px; }
  .page-ai .hero__media img, .page-cv .hero__media img { object-position: 50% 0; }
}
@media screen and (max-width: 860px) {
  .page-ai .hero:not(.hero--space) .hero__media img, .page-cv .hero:not(.hero--space) .hero__media img { transform: scale(1.45); transform-origin: 50% 24%; object-position: 50% 0; }
}
@media print {
  .page-ai .hero__media img, .page-cv .hero__media img { transform: scale(1.18); transform-origin: 50% 0; object-position: 50% 0; mix-blend-mode: multiply; }
  .page-ai .hero__media, .page-cv .hero__media { background: #fff; }
}

/* Сессия 21: разделители и рамка плашки — цвет кнопки, бледно (ai и общая) */
.page-ai .cta__in, .page-cv .cta__in { border-color: oklch(0.54 0.19 33 / 0.32); box-shadow: 0 1px 2px oklch(0.54 0.19 33 / 0.06), 0 14px 32px -14px oklch(0.54 0.19 33 / 0.28); }
@media screen and (max-width: 640px) {
  .page-ai .clist li:last-child, .page-cv .clist li:last-child { border-bottom: 0; }
}

/* Сессия 22: компетенции — ровными рядами; ссылки подсвечиваются цветом кнопки */
.skills { column-count: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; }
@media screen and (max-width: 1100px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 640px) { .skills { grid-template-columns: 1fr; } }
@media print { .skills { column-gap: 5mm; } }
a:not(.btn) { transition: color .15s ease; }
a:not(.btn):not(.ccopy):hover, .topbar__meta a:not(.btn):hover, .band .cval:hover, .footer a:hover { color: var(--accent) !important; }
.ccopy:hover { color: var(--accent); border-color: var(--accent); }

/* Сессия 23: шапка ai как у общей — крупное имя, под ним подзаголовок вдвое меньше; мелкое имя в верхней полосе убрано */
.page-ai .topbar__name, .page-cv .topbar__name { visibility: hidden; }
.page-ai .hero .role, .page-cv .hero .role { margin-top: 18px; font-size: calc(var(--fs-h1) * 0.5); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); max-width: 15em; text-wrap: balance; }
@media screen and (max-width: 640px) { .page-ai .hero .role, .page-cv .hero .role { margin-inline: auto; } }
.page-cv .hero .role { text-wrap: wrap; max-width: none; }

/* Сессия 24: больше акцентов — заголовки разделов, номера шагов, полосы графика цветом кнопки */
.page-ai h3, .page-cv h3, .page-cv .gantt__label b { color: var(--accent); }
.page-ai .cta__title, .page-cv .cta__title, .band__label { color: inherit; }
.steps__n { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; }
.gantt__bar { background: var(--accent); }
@media screen and (max-width: 860px) { .hero:not(.hero--space) .hero__media { box-shadow: none; background: #fff; } }
/* Сессия 25: серый текст — чёрным; цитата цветом кнопки */
.page-ai, .page-cv { --ink-2: var(--ink); }
/* Сессия 26: круг на телефоне — как в PDF (голова целиком); выводы без серой подложки */
@media screen and (max-width: 860px) {
  .page-ai .hero:not(.hero--space) .hero__media img, .page-cv .hero:not(.hero--space) .hero__media img { transform: scale(1.18); transform-origin: 50% 0; object-position: 50% 0; }
}
@media screen and (max-width: 640px) {
  .compare__ai { background: none; padding: 0; margin-top: 4px; border-radius: 0; }
}
.showcase__quote .link { display: inline-block; margin-top: 16px; }
.page-ai .compare__ai { font-style: italic; font-synthesis: style; }

/* Сессия 29: «Позвонить», шаги градиентом, график, подвал без линий, фото-карточка */
/* шаги: №1 белый, дальше насыщенность растёт, последний — полный цвет кнопки */
.page-ai .steps li .steps__n { --k: 0%; background: color-mix(in oklch, var(--accent) var(--k), #fff) !important; color: var(--accent-ink) !important; box-shadow: inset 0 0 0 1px oklch(0.54 0.19 33 / 0.45) !important; font-weight: 500; }
.page-ai .steps li:nth-child(2) .steps__n { --k: 20%; }
.page-ai .steps li:nth-child(3) .steps__n { --k: 40%; }
.page-ai .steps li:nth-child(4) .steps__n { --k: 65%; color: #fff !important; box-shadow: none !important; }
.page-ai .steps li:last-child .steps__n { --k: 100%; color: #fff !important; box-shadow: none !important; }
/* график опыта: названия чёрные, должности курсивом; конец градиента закрывает линию */
.page-cv .gantt__label b { color: var(--ink); }
.page-cv .gantt__label span { font-style: italic; font-synthesis: style; }
.gantt__bar.is-now { background: linear-gradient(90deg, var(--accent) 60%, #fff); }
@media print { .gantt__bar.is-now { background: linear-gradient(90deg, var(--accent) 60%, #fff) !important; } }
/* подвал: заголовок сверху, три колонки под ним, без линий, компактнее */
@media screen {
  .page-ai .band, .page-cv .band { padding: clamp(28px, 3vw, 40px) 0; }
  .page-ai .band__in, .page-cv .band__in { grid-template-columns: 1fr; gap: 18px; }
  .page-ai .band__head, .page-cv .band__head { padding-top: 0; }
  .page-ai .clist li, .page-cv .clist li { border: 0 !important; padding: 0; gap: 6px; }
}
@media screen and (min-width: 861px) { .page-ai .clist, .page-cv .clist { grid-template-columns: repeat(3, max-content); column-gap: clamp(48px, 6vw, 112px); } }
@media screen and (max-width: 860px) { .page-ai .clist, .page-cv .clist { grid-template-columns: 1fr; row-gap: 18px; } }
/* фото hero на полной версии: без растушёвки, скругление, обводка и тень как у плашки .cta */
@media screen and (min-width: 861px) {
  .page-ai .hero:not(.hero--space) .hero__media, .page-cv .hero:not(.hero--space) .hero__media {
    -webkit-mask-image: none; mask-image: none; overflow: hidden; border-radius: 18px;
    border: 1px solid oklch(0.54 0.19 33 / 0.32);
    box-shadow: 0 1px 2px oklch(0.54 0.19 33 / 0.06), 0 14px 32px -14px oklch(0.54 0.19 33 / 0.28);
  }
}
@media screen and (min-width: 861px) {
  .page-ai .hero:not(.hero--space) .hero__media, .page-cv .hero:not(.hero--space) .hero__media { top: 72px; right: clamp(24px, 2.5vw, 48px); bottom: 8px; width: calc(50% - clamp(24px, 2.5vw, 48px) - 32px); }
}
/* s29b: обводка фото только там, где пиджак (низ карточки), над белым фоном её нет */
@media screen and (min-width: 861px) {
  .page-ai .hero:not(.hero--space) .hero__media, .page-cv .hero:not(.hero--space) .hero__media { border: 0; box-shadow: 0 14px 32px -14px oklch(0.54 0.19 33 / 0.28); }
  .page-ai .hero:not(.hero--space) .hero__media::after, .page-cv .hero:not(.hero--space) .hero__media::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px oklch(0.54 0.19 33 / 0.45);
    -webkit-mask-image: linear-gradient(to bottom, transparent 48%, #000 66%); mask-image: linear-gradient(to bottom, transparent 48%, #000 66%);
  }
}
/* s29c: тень фото не обрезается краем hero (overflow hidden): запас снизу 40px, тень ≤ 28px */
@media screen and (min-width: 861px) {
  .page-ai .hero:not(.hero--space) .hero__media, .page-cv .hero:not(.hero--space) .hero__media { bottom: 40px; box-shadow: 0 12px 24px -12px oklch(0.54 0.19 33 / 0.32); }
}
/* s29d: тень и обводка фото — ровно от линии пиджака (--jl/--jr считает site.js); шаги однотонные приглушённые */
@media screen and (min-width: 861px) {
  .page-ai .hero:not(.hero--space) .hero__media, .page-cv .hero:not(.hero--space) .hero__media { --jl: 66%; --jr: 66%; overflow: visible; box-shadow: none; }
  .page-ai .hero:not(.hero--space) .hero__media img, .page-cv .hero:not(.hero--space) .hero__media img { position: relative; border-radius: 18px; }
  .page-ai .hero:not(.hero--space) .hero__media::after, .page-cv .hero:not(.hero--space) .hero__media::after {
    z-index: 2; box-shadow: inset 1px 0 0 0 oklch(0.54 0.19 33 / 0.45), inset -1px 0 0 0 oklch(0.54 0.19 33 / 0.45), inset 0 -1px 0 0 oklch(0.54 0.19 33 / 0.45);
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--jl), #000 var(--jl)), linear-gradient(to bottom, transparent var(--jr), #000 var(--jr));
    -webkit-mask-size: 50% 100%; -webkit-mask-position: 0 0, 100% 0; -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, transparent var(--jl), #000 var(--jl)), linear-gradient(to bottom, transparent var(--jr), #000 var(--jr));
    mask-size: 50% 100%; mask-position: 0 0, 100% 0; mask-repeat: no-repeat;
  }
  /* тень: отдельный слой под фото, начинается на линии пиджака */
  .page-ai .hero:not(.hero--space) .hero__media::before, .page-cv .hero:not(.hero--space) .hero__media::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: min(var(--jl), var(--jr)); z-index: 0; border-radius: 0 0 18px 18px; pointer-events: none;
    box-shadow: 0 12px 22px -10px oklch(0.54 0.19 33 / 0.32);
  }
}
.page-ai .steps li .steps__n, .page-ai .steps li:nth-child(n) .steps__n, .page-ai .steps li:last-child .steps__n { --k: 82% !important; color: #fff !important; box-shadow: none !important; }
@media screen and (min-width: 861px) {
  .page-ai .hero:not(.hero--space) .hero__media::before, .page-cv .hero:not(.hero--space) .hero__media::before { top: calc(max(var(--jl), var(--jr)) + 3%); box-shadow: 0 12px 20px -10px oklch(0.54 0.19 33 / 0.32); }
}

/* ═══ s30 ТЕСТ: телефон без сплошной центровки — только body.m-left (ai-m / index-m) ═══
   Одна левая ось на 20px от края; акценты держат ритм: полоса у выводов и цитат, линия шагов. */
@media screen and (max-width: 640px) {
  .m-left .hero__copy, .m-left .shead, .m-left h2, .m-left .note, .m-left .why, .m-left .case,
  .m-left .tiles li, .m-left .feature, .m-left .meta li, .m-left .skills section, .m-left .showcase,
  .m-left .band__head, .m-left .clist li, .m-left .cta__in, .m-left .compare__row { text-align: left; }
  /* шапка: фото слева по оси текста, имя и подзаголовок с левого края */
  .m-left .hero:not(.hero--space) .hero__media { width: 112px; height: 112px; margin: 80px 0 0 var(--pad); }
  .m-left .hero__copy { padding: 22px 0 8px; }
  .m-left .hero h1, .m-left .lead, .m-left .hero .role { margin-inline: 0; }
  .m-left.page-ai .hero .role { max-width: 17em; }
  .m-left .actions { justify-content: flex-start; }
  /* заголовки разделов: слева, без центровки */
  .m-left .shead { justify-content: flex-start; }
  .m-left h2 { margin-inline: 0; }
  /* сравнение: вывод с тонкой полосой цвета кнопки */
  .m-left .compare__row { gap: 6px; }
  .m-left .compare__ai { border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; margin-top: 6px; }
  /* шаги: номер слева, текст слева, номера связаны тонкой линией */
  .m-left .steps { gap: 0; }
  .m-left .steps li { grid-template-columns: 36px 1fr; column-gap: 16px; align-items: start; text-align: left; padding-bottom: 22px; }
  .m-left .steps li:last-child { padding-bottom: 0; }
  .m-left .steps__n { grid-row: 1 / span 2; }
  .m-left .steps li h3 { padding-top: 6px; margin-bottom: 4px; }
  .m-left .steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; border-radius: 1px; background: oklch(0.54 0.19 33 / 0.22); }
  /* плашка-призыв: текст слева, кнопка во всю ширину */
  .m-left .cta__in { align-items: stretch; }
  .m-left .cta__btn { width: 100%; justify-content: center; }
  /* кейс и цитаты: полоса слева вместо центровки */
  .m-left .case__quote, .m-left .showcase__quote { border-left: 2px solid var(--accent) !important; padding-left: 16px !important; text-align: left; }
  /* подвал: подпись над значением, всё от левого края */
  .m-left .clist li { justify-items: start; }
  .m-left .cbox { justify-content: flex-start; }
}
@media screen and (max-width: 640px) {
  /* полоса — только у цитаты и подписи, ссылка «Смотреть сюжет» ниже без полосы */
  .m-left .showcase__quote { border-left: 0 !important; padding-left: 0 !important; }
  .m-left .showcase__quote .quote, .m-left .showcase__quote figcaption { border-left: 2px solid var(--accent); padding-left: 16px; margin-top: 0; margin-bottom: 0; }
  .m-left .showcase__quote figcaption { padding-top: 12px; }
  .m-left .showcase { gap: 28px; }
}
/* s30b (после ресёрча 16+4 сайтов на 375): имя и фото одной строкой; один акцент на блок; больше воздуха между разделами */
@media screen and (max-width: 640px) {
  .m-left .hero { position: relative; }
  .m-left .hero:not(.hero--space) .hero__media { position: absolute; top: 96px; right: var(--pad); left: auto; width: 96px; height: 96px; margin: 0; z-index: 3; }
  .m-left .hero__copy { padding-top: 96px; }
  .m-left .hero h1 { max-width: calc(100% - 116px); min-height: 96px; display: flex; align-items: center; }
  .m-left .hero .role { margin-top: 20px; }
  /* выводы в «Что я принёс»: без полосы, просто курсив — полоса остаётся только у цитаты */
  .m-left .compare__ai { border-left: 0; padding: 0; margin-top: 6px; }
  /* ритм: разделы дальше друг от друга, внутри плотнее */
  .m-left .sec { padding-top: 72px; }
  .m-left .cta { margin-top: 64px; }
  .m-left .shead { margin-bottom: 24px; }
}
@media screen and (max-width: 640px) { .m-left .hero:not(.hero--space) .hero__copy { padding-top: 96px; } }
@media screen and (max-width: 640px) { .m-left.page-cv .hero .role { text-wrap: balance; } }
/* s30c: пользователь — «большие гапы между блоками не нравятся, они и так акцентированы заголовками» → минимум */
@media screen and (max-width: 640px) {
  .m-left .sec { padding-top: 36px; }
  .m-left .cta { margin-top: 36px; }
  .m-left .shead { margin-bottom: 14px; }
}
@media screen and (max-width: 640px) { .m-left .split { gap: 32px; } }