/* «Включи систему» — страница «О создателе» (about.html).
   Подключать после brand-tokens.css и styles.css: оттуда берутся токены,
   шапка (.nav), футер (.foot), кнопка (.cta) и кейфреймы wf / scanY / dotPulse. */

@keyframes flow { to { stroke-dashoffset: -18; } }

/* ---------- общее ---------- */
.ab-wrap { max-width: 87.5rem; margin: 0 auto; padding: 0 4rem; }
.ab-sec { padding: 6rem 0; }
.ab-h1, .ab-h2, .ab-h3, .ab-h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; text-transform: none; text-wrap: pretty; }
.ab-h1 { font-size: 2.9375rem; line-height: 1.14; }
.ab-h2 { font-size: 2.5rem; line-height: 1.16; }
.ab-h2--b { font-size: 2rem; line-height: 1.2; }
.ab-h3 { font-size: 1.5rem; line-height: 1.25; }
.ab-h4 { font-size: 1.1875rem; line-height: 1.3; }
.ab-kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; }
.ab-kicker--light { color: var(--cta); }
.ab-kicker--dark { color: var(--holo); }

/* уголки-брекеты: <div class="br"><i></i><i></i><i></i><i></i> … ; .br--2 — только верх-лево и низ-право */
.br { position: relative; }
.br > i { position: absolute; z-index: 3; width: var(--br, 0.625rem); height: var(--br, 0.625rem); border: 0 solid var(--brc, var(--line-holo-light)); pointer-events: none; }
.br > i:nth-of-type(1) { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.br > i:nth-of-type(2) { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.br > i:nth-of-type(3) { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.br > i:nth-of-type(4) { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.br--2 > i:nth-of-type(2) { bottom: -1px; right: -1px; top: auto; border-top-width: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* reveal при скролле */
[data-rv] { opacity: 0; transform: translateY(1.125rem); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-rv].on { opacity: 1; transform: none; }

/* фото, которого ещё нет в assets/about/: слот с именем файла вместо пустого места */
.ph.is-missing img, .arc__item.is-missing img, .sch__photo.is-missing img { display: none; }
.ph.is-missing .ph__frame, .arc__item.is-missing .arc__frame, .sch__photo.is-missing .sch__frame {
  border: 1px dashed rgba(15, 111, 216, 0.45);
  background: rgba(15, 111, 216, 0.04);
  display: flex; align-items: center; justify-content: center;
}
.arc__item.is-missing .arc__frame { border-color: rgba(94, 200, 248, 0.35); background: rgba(94, 200, 248, 0.04); aspect-ratio: 4 / 3; }
.is-missing [data-file]::after {
  content: attr(data-file);
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9AAABE; padding: 0.5rem; text-align: center; word-break: break-all;
}
.arc__item.is-missing [data-file]::after { color: #5E7796; }

/* ==================== 1. HERO ==================== */
.ab-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #04070E 0%, #0B1220 50%, #0C1526 100%);
  color: var(--text);
}
.ab-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 200, 248, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 200, 248, 0.045) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 45%, #000 0%, transparent 100%);
          mask-image: radial-gradient(60% 70% at 70% 45%, #000 0%, transparent 100%);
}
.ab-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(47.5rem 47.5rem at 100% 0%, rgba(74, 180, 235, 0.14), transparent 62%),
    radial-gradient(40rem 40rem at 0% 100%, rgba(74, 180, 235, 0.06), transparent 62%);
}
.ab-hero > .nav { position: relative; z-index: 6; }
/* без переноса: на 901–68.75rem портрет ужимается (до 16.25rem), а не падает под текст */
.ab-hero__wrap { position: relative; z-index: 2; padding-top: 3.5rem; padding-bottom: 6rem; display: flex; gap: 4rem; align-items: center; flex-wrap: nowrap; }
.ab-hero__text { flex: 1 1 32.5rem; min-width: 0; }

.ab-hero__kicker { display: flex; align-items: center; gap: 0.875rem; }
.ab-hero__kicker .ab-kicker { color: var(--holo); }
.ab-hero__kicker i { display: block; width: 2.75rem; height: 1px; background: rgba(94, 200, 248, 0.4); }
.ab-hero__years { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mono-dim); white-space: nowrap; }

.ab-hero .ab-h1 { margin-top: 1.125rem; color: #EDF3FB; }
.ab-hero__lead { margin: 1.25rem 0 0; max-width: 38.75rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-dim); text-wrap: pretty; }
.ab-hero__lead strong { font-weight: 500; color: #EDF3FB; }

/* табло фактов: только линии, без заливки */
.facts {
  margin: 2.25rem 0 0; padding: 0; list-style: none;
  max-width: 45rem; display: flex; flex-wrap: wrap;
  border-top: 1px solid #1C2A44; border-left: 1px solid #1C2A44;
  border-radius: 0.625rem; overflow: hidden;
}
.facts li { flex: 1 1 10rem; padding: 1.125rem 1.25rem 1rem; border-right: 1px solid #1C2A44; border-bottom: 1px solid #1C2A44; }
.facts b { display: block; font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--holo); }
.facts span { display: block; margin-top: 0.375rem; font-size: 0.7812rem; line-height: 1.4; color: #8FA2BE; }

/* портрет */
.pt { position: relative; flex: 0 1 25rem; min-width: 16.25rem; max-width: 25rem; margin: 0; --br: 1rem; --brc: var(--holo-bracket); }
.pt::before { content: ''; position: absolute; inset: -2.5rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(94, 200, 248, 0.16), transparent); pointer-events: none; }
.pt__frame { position: relative; border-radius: 0.75rem; overflow: hidden; background: #101B2E; aspect-ratio: 4 / 5; }
.pt__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.04); }
.pt__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 18, 32, 0) 45%, rgba(11, 18, 32, 0.72) 100%); pointer-events: none; }
.pt__scan { position: absolute; left: 0; right: 0; top: 0; height: 7.5rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(94, 200, 248, 0) 0%, rgba(94, 200, 248, 0.14) 50%, rgba(94, 200, 248, 0) 100%);
  animation: scanY 9s linear infinite; }
.pt__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.875rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pt__name { color: #D6EEFD; }
.pt__role { display: flex; align-items: center; gap: 0.4375rem; color: var(--holo-bright); white-space: nowrap; }
.pt__role i { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--holo-bright); animation: dotPulse 2.4s ease-in-out infinite; }
.pt.is-missing .pt__frame { border: 1px dashed rgba(94, 200, 248, 0.35); }
.pt.is-missing img { display: none; }
.pt.is-missing .pt__frame::after { content: attr(data-file); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: #5E7796; }

/* ==================== 2. ТАЙМЛАЙН ==================== */
.tl { background: var(--concrete); color: var(--text-dark-2); }
.tl .ab-h2 { color: var(--text-dark); }
.tl .ab-h2 span { color: var(--cta); }
.tl__sub { margin: 1.125rem 0 0; max-width: 45rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-dark-2); text-wrap: pretty; }

.tl__list { position: relative; margin-top: 3.5rem; padding-left: 9rem; }
.tl__line { position: absolute; left: 7rem; top: 0; bottom: 0; width: 2px; height: 100%; overflow: visible; }
.tl__line line { stroke: rgba(15, 111, 216, 0.4); stroke-width: 1.5; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; animation: flow 1.6s linear infinite; }

.ms { position: relative; padding-bottom: 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px solid #E4EAF2; }
.ms:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.ms__side { position: absolute; left: -9rem; top: 0; width: 5.5rem; text-align: right; }
.ms__year { display: block; font-family: var(--font-mono); font-size: 1.625rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--cta); white-space: nowrap; }
.ms__year--word { font-size: 1.0625rem; letter-spacing: 0; padding-top: 0.3125rem; }
.ms__tag { display: block; margin-top: 0.375rem; font-family: var(--font-mono); font-size: 0.5625rem; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: #9AAABE; }
.ms__node { position: absolute; left: -2.4375rem; top: 0.4375rem; width: 0.8125rem; height: 0.8125rem; box-sizing: border-box; border: 1.5px solid var(--cta); border-radius: 50%; background: var(--concrete); }
.ms__node::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.25rem; height: 0.25rem; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--cta); }
.ms--now .ms__node { background: var(--cta); box-shadow: 0 0 0 0.25rem rgba(15, 111, 216, 0.14); }
.ms--now .ms__node::after { background: #FFFFFF; }

.ms .ab-h3 { color: var(--text-dark); }
.ms p { margin: 0.875rem 0 0; max-width: 51.25rem; font-size: 1rem; line-height: 1.62; color: var(--text-dark-2); text-wrap: pretty; }
.ms blockquote { margin: 1.5rem 0 0; max-width: 51.25rem; padding: 2px 0 2px 1.25rem; border-left: 2px solid var(--cta); font-size: 1.1875rem; line-height: 1.5; font-weight: 500; color: var(--text-dark); text-wrap: pretty; }

/* фото в вехе — всегда под текстом */
.ph { margin: 1.5rem 0 0; }
.ph--single { width: var(--w, 21.25rem); max-width: 100%; }
.ph__frame { position: relative; border-radius: 0.5rem; overflow: hidden; background: #E9EEF4; }
.ph--single .ph__frame { height: var(--h, 16.25rem); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph figcaption { margin-top: 0.625rem; font-size: 0.7812rem; line-height: 1.45; color: #66788F; text-wrap: pretty; }
.ph-grid { margin-top: 1.5rem; max-width: var(--max, none); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 14.375rem), 100%), 1fr)); gap: 1rem; }
.ph-grid .ph { margin: 0; }
.ph-grid .ph__frame { height: var(--h, 16.875rem); }

/* ==================== 3. ФОТОАРХИВ ==================== */
.arc { background: #0B1220; color: var(--text); }
.arc .ab-h2 { margin-top: 0.875rem; color: #EDF3FB; }
.arc__sub { margin: 0.875rem 0 0; max-width: 45rem; font-size: 1.0312rem; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }
.arc__grid { margin-top: 2.75rem; columns: 4; column-gap: 1rem; }
.arc__item { margin: 0 0 1rem; break-inside: avoid; -webkit-column-break-inside: avoid; }
.arc__frame { position: relative; border-radius: 0.5rem; overflow: hidden; border: 1px solid #16233A; background: #101B2E; --br: 0.5625rem; --brc: var(--holo-bracket); }
.arc__frame img { width: 100%; height: auto; transition: transform .5s ease, filter .5s ease; }
.arc__item:hover img { transform: scale(1.02); filter: saturate(1.08); }
.arc__item figcaption { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.5938rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mono-dim); }
.arc__item figcaption::before { content: ''; flex: none; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--holo); }

/* ==================== 4. ШКОЛА И ПРИЗНАНИЕ ==================== */
.sch { background: var(--surface); color: var(--text-dark-2); }
.sch .ab-h2 { color: var(--text-dark); }
.sch__grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.sch__card { border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.5rem; display: flex; gap: 1.5rem; align-items: flex-start; background: var(--surface); --br: 0.625rem; }
.sch__text { flex: 1 1 13.75rem; min-width: 0; }
.sch__label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: #9AAABE; }
.sch__card .ab-h4 { margin-top: 0.625rem; color: var(--text-dark); }
.sch__card p { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.58; color: var(--text-dark-2); text-wrap: pretty; }
.sch__photo { flex: 0 1 11.25rem; min-width: 9.375rem; margin: 0; }
.sch__frame { position: relative; height: 11.875rem; border-radius: 0.5rem; overflow: hidden; background: #E9EEF4; }
.sch__frame img { width: 100%; height: 100%; object-fit: cover; }
.sch__frame--slot { border: 1px dashed rgba(15, 111, 216, 0.45); background: rgba(15, 111, 216, 0.03); display: flex; align-items: center; justify-content: center; }
.sch__frame--slot span { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9AAABE; text-align: center; padding: 0.5rem; }
.sch__photo figcaption { margin-top: 0.5rem; font-size: 0.7812rem; line-height: 1.4; color: #66788F; }

/* ==================== 5. ЭТАП → МОДУЛЬ ==================== */
.map { background: var(--concrete); color: var(--text-dark-2); }
.map .ab-h2 { margin-top: 0.875rem; color: var(--text-dark); }
.map .ab-h2 span { color: var(--cta); }
.map__grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21.25rem, 100%), 1fr)); gap: 1.5rem; }
.mc { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.375rem 1.5rem; --br: 0.625rem; }
.mc__ghost { position: absolute; right: 0.875rem; top: -0.375rem; font-family: var(--font-mono); font-size: 4.5rem; font-weight: 700; line-height: 1; color: rgba(15, 111, 216, 0.07); pointer-events: none; }
.mc__label { position: relative; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: #9AAABE; }
.mc__was { position: relative; margin: 0.75rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--text-dark-2); }
.mc__link { position: relative; margin: 0.875rem 0; display: flex; align-items: center; gap: 0.625rem; }
.mc__link::before { content: ''; flex: none; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--cta); }
.mc__link i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(15, 111, 216, 0.45) 0 0.1875rem, transparent 0.1875rem 0.5625rem); }
.mc__link span { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cta); }
.mc .ab-h4 { position: relative; font-size: 1.0312rem; line-height: 1.35; color: var(--text-dark); }
.mc__text { position: relative; margin: 0.5rem 0 0; font-size: 0.9062rem; line-height: 1.55; color: var(--text-dark-2); text-wrap: pretty; }

/* ==================== 6. МИССИЯ + CTA ==================== */
.mis { background: var(--surface); }
.mis__plate { position: relative; overflow: hidden; border-radius: 1rem; background: #04060D; padding: 4.5rem 4rem; --br: 0.875rem; --brc: var(--holo-bracket); }
.mis__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.mis__veil { position: absolute; inset: 0; pointer-events: none; }
.mis__veil--tint { background: rgba(13, 32, 66, 0.4); }
.mis__veil--left { background: linear-gradient(90deg, rgba(4,7,14,0.94) 0%, rgba(4,7,14,0.84) 36%, rgba(4,7,14,0.3) 70%, rgba(4,7,14,0.12) 100%); }
.mis__veil--bottom { background: linear-gradient(180deg, rgba(4,7,14,0.35) 0%, rgba(4,7,14,0) 40%, rgba(4,7,14,0.45) 100%); }
.mis__veil--glow { background: radial-gradient(32.5rem 32.5rem at 0% 50%, rgba(94, 200, 248, 0.12), transparent 65%); }
.mis__content { position: relative; z-index: 2; max-width: 47.5rem; }
.mis__wave { display: flex; align-items: center; gap: 0.1875rem; height: 1.375rem; }
.mis__wave b { display: block; width: 0.15rem; border-radius: 1.2px; background: var(--holo); transform-origin: center; animation: wf 1.1s ease-in-out infinite alternate; }
.mis__wave b:nth-child(2) { animation-delay: .09s; }
.mis__wave b:nth-child(3) { animation-delay: .18s; }
.mis__wave b:nth-child(4) { animation-delay: .27s; }
.mis__wave b:nth-child(5) { animation-delay: .36s; }
.mis .ab-h2 { margin-top: 1.125rem; color: #EDF3FB; }
.mis__text { margin: 1.125rem 0 0; font-size: 1.125rem; line-height: 1.55; color: #C9D8EA; text-wrap: pretty; }
.mis__action { margin-top: 1.875rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.mis__action .cta { padding: 1.0625rem 2.125rem; }
.mis__note { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8FA6C4; }

/* ==================== АДАПТИВ ==================== */
@media (max-width: 1400px) {
  .ab-wrap { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (max-width: 1200px) {
  .facts li { flex: 1 1 45%; }   /* 2×2 вместо «три в ряд и один снизу» */
}
@media (max-width: 1100px) {
  .arc__grid { columns: 3; }
  .ab-h1 { font-size: 2.5rem; }
}
@media (max-width: 900px) {
  .ab-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  .ab-sec { padding: 4rem 0; }
  .ab-h1 { font-size: 2.125rem; }
  .ab-h2 { font-size: 2rem; }
  .ab-h2--b { font-size: 1.6875rem; }
  .ab-h3 { font-size: 1.375rem; }

  .ab-hero__wrap { flex-direction: column; align-items: stretch; gap: 2.5rem; padding-top: 1.75rem; padding-bottom: 4rem; }
  .ab-hero__text { flex: none; }
  .facts li { flex: 1 1 45%; }
  .pt { flex: none; width: 100%; max-width: 25rem; margin: 0 auto; }   /* на планшете портрет по центру, а не прижат влево с пустотой справа */

  .tl__list { margin-top: 2.5rem; padding-left: 0; }
  .tl__line, .ms__node { display: none; }
  .ms__side { position: static; width: auto; text-align: left; display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; }
  .ms__tag { margin-top: 0; }
  .ph--single { width: 100%; }

  .sch__grid { grid-template-columns: minmax(0, 1fr); }
  .sch__card { flex-direction: column; }
  .sch__text { flex: none; }   /* в столбике flex-basis 13.75rem становился высотой и давал пустоту перед фото */
  .sch__photo { flex: none; width: 100%; max-width: 22.5rem; }
  .mc { padding: 1.25rem; }
  .mis__plate { padding: 3rem 1.5rem; }
  .mis__text { font-size: 1.0312rem; }
  .mis__action .cta { min-height: 2.75rem; }
}
@media (max-width: 760px) {
  .arc__grid { columns: 2; }
  .mis__action { flex-direction: column; align-items: stretch; }
  .mis__action .cta { text-align: center; }
  .ab-hero__kicker { flex-wrap: wrap; gap: 0.625rem; }
}

/* ==================== БЕЗ АНИМАЦИЙ ==================== */
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1; transform: none; transition: none; }
  .pt__scan { display: none; }
  .tl__line line, .pt__role i, .mis__wave b { animation: none; }
  .arc__frame img { transition: none; }
}