/* ==========================================================================
   Главная: герой-рентген, маршрут тем, метод
   ========================================================================== */

/* ---------- герой ---------- */
.hero { position: relative; padding: 64px 0 40px; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -66px 0 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 30%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 60% 30%, #000 25%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; inset: -66px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 38%), var(--glow), transparent 65%);
  transition: background .2s;
}

.hero__title {
  margin: 26px 0 0; font: 600 clamp(42px, 8.9vw, 128px)/.9 var(--f-display); letter-spacing: -.05em; color: var(--text);
}
.hero__title .l { display: block; }

/* «насквозь» — по слову ходит рентгеновская полоса и показывает спектр внутри */
.xray {
  position: relative; display: inline-block; --scan: -30%;
  color: transparent;
  background: linear-gradient(90deg,
    var(--text) var(--scan), transparent var(--scan),
    transparent calc(var(--scan) + 24%), var(--text) calc(var(--scan) + 24%));
  -webkit-background-clip: text; background-clip: text;
  animation: scan 7s cubic-bezier(.65, 0, .35, 1) infinite;
}
.xray::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  color: transparent;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .38) 0 1px, transparent 1px 4px), var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: linear-gradient(90deg, transparent var(--scan), #000 var(--scan), #000 calc(var(--scan) + 24%), transparent calc(var(--scan) + 24%));
  mask-image: linear-gradient(90deg, transparent var(--scan), #000 var(--scan), #000 calc(var(--scan) + 24%), transparent calc(var(--scan) + 24%));
}
.xray__beam {
  position: absolute; top: -6%; bottom: -10%; width: 2px; left: calc(var(--scan) + 24%); pointer-events: none;
  background: linear-gradient(transparent, var(--text) 18%, var(--text) 82%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in oklab, var(--text) 45%, transparent);
  opacity: 0;
  animation: beam 7s linear infinite;
}
@keyframes beam {
  0%, 2% { opacity: 0; } 5%, 29% { opacity: .9; } 33%, 58% { opacity: 0; } 61%, 86% { opacity: .9; } 90%, 100% { opacity: 0; }
}
.xray__beam::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 90px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 9%, transparent));
}
@keyframes scan {
  0% { --scan: -30%; }
  42% { --scan: 106%; }
  50% { --scan: 106%; }
  92% { --scan: -30%; }
  100% { --scan: -30%; }
}
@media (prefers-reduced-motion: reduce) {
  .xray { --scan: 38%; animation: none; }
}

.hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; margin-top: 46px; align-items: start; }
.hero__lede { margin: 6px 0 0; max-width: 540px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.hero__lede strong { color: var(--text); font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__resume { margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.hero__resume b { font-weight: 500; color: var(--text); }
.final p b { font-weight: 500; color: var(--text); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 48px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.stat { background: var(--bg); padding: 20px 22px 18px; }
.stat b { display: block; font: 600 clamp(28px, 3vw, 38px)/1 var(--f-display); letter-spacing: -.04em; color: var(--text); }
.stat span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
.stat--live b { display: flex; align-items: center; gap: 10px; }
.stat--live b::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px var(--glow); animation: pulse 2.2s infinite; }

/* стек слоёв — разрез одного запроса */
.stack { position: relative; margin-top: -24px; }
.stack svg { display: block; width: 100%; height: auto; overflow: visible; }
.stack__ticker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px auto; width: fit-content; max-width: 100%;
  padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg-1) 80%, transparent);
  font: 500 12.5px/1.2 var(--f-mono); color: var(--text-2); white-space: nowrap; overflow: hidden;
}
.stack__ticker .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tick, var(--text)); box-shadow: 0 0 10px var(--tick, var(--text)); transition: background .3s, box-shadow .3s; }
.stack__ticker .step { color: var(--text-4); flex: none; }
.stack__ticker .msg { overflow: hidden; text-overflow: ellipsis; color: var(--text); }

.plate path.face { fill: color-mix(in oklab, var(--bg) 80%, transparent); stroke: var(--line-2); stroke-width: 1; transition: stroke .35s, fill .35s; }
.plate path.inner { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; transition: stroke .35s; }
.plate .ticks line { stroke: var(--line-3); stroke-width: 1; }
.plate.is-active path.face { stroke: var(--pc); fill: color-mix(in oklab, var(--pc) 9%, var(--bg)); }
.plate.is-active path.inner { stroke: color-mix(in oklab, var(--pc) 45%, transparent); }
.plate.is-hover path.face { stroke: var(--line-3); }
.lbl { cursor: default; }
.lbl text { font-family: var(--f-text); transition: fill .3s; }
.lbl .k { font-size: 15px; font-weight: 500; fill: var(--text-3); }
.lbl .s { font-size: 11.5px; font-family: var(--f-mono); fill: var(--text-4); }
.lbl .i { font-size: 11px; font-family: var(--f-mono); fill: var(--text-4); }
.lbl line { stroke: var(--line-2); transition: stroke .3s; }
.lbl.is-active .k { fill: var(--text); }
.lbl.is-active .s { fill: var(--text-2); }
.lbl.is-active line { stroke: var(--pc); }
.lbl.is-active .i { fill: var(--pc); }
.axis { stroke: var(--line-2); stroke-dasharray: 2 6; }
.beam { stroke-width: 2; stroke-linecap: round; }
.ripple { fill: none; stroke-width: 1.5; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .stack { margin-top: 12px; max-width: 640px; }
  .stack__ticker { margin-left: 0; }
}

/* ---------- маршрут ---------- */
.route { padding: 130px 0 40px; }
.route__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; }
.h-sec { margin: 18px 0 0; font: 600 clamp(44px, 7vw, 96px)/.92 var(--f-display); letter-spacing: -.05em; color: var(--text); }
.route__lede { margin: 22px 0 0; max-width: 600px; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; font: 500 12px var(--f-mono); color: var(--text-3); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--lock-2); }
.legend .ready i { border-color: var(--text); background: var(--text); }
.legend .wip i { border-color: var(--text); background: linear-gradient(90deg, var(--text) 50%, transparent 50%); }

.spectrum { margin: 48px 0 0; }
.spectrum__bar { display: grid; grid-template-columns: repeat(var(--n, 19), minmax(0, 1fr)); gap: 4px; }
.spectrum__bar i { height: 6px; border-radius: 3px; background: var(--bg-3); transition: background .5s; }
.spectrum__bar i.on { background: var(--c); box-shadow: 0 0 14px -2px var(--c-glow); }
.spectrum__bar i.half { background: linear-gradient(90deg, var(--c) var(--f), var(--bg-3) var(--f)); }
.spectrum__ends { display: flex; justify-content: space-between; margin-top: 12px; font: 500 11.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); }

.route__list { position: relative; margin-top: 30px; padding-left: 56px; }
.route__list::before { content: ""; position: absolute; left: 19px; top: 34px; bottom: 30px; width: 1px; background: linear-gradient(var(--line-2) 85%, transparent); }

.act { position: relative; }

.topic {
  position: relative; display: grid; color: inherit; text-decoration: none;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "num name side" ". info ticks";
  column-gap: 22px; row-gap: 12px; padding: 26px 0 28px; border-top: 1px solid var(--line);
}
.topic::before {
  content: ""; position: absolute; inset: 0 -20px; z-index: -1; border-radius: 18px; opacity: 0;
  background: radial-gradient(700px 200px at 30% 50%, var(--c-soft), transparent 70%);
  transition: opacity .5s;
}
.topic__node {
  position: absolute; left: -42px; top: calc(26px + var(--name-size, 96px) * .42); width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--lock-2); transition: transform .4s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.topic__num { grid-area: num; align-self: start; padding-top: calc(var(--name-size, 96px) * .3); font: 500 13px var(--f-mono); color: var(--text-4); display: flex; flex-direction: column; gap: 14px; }
.topic__ic { width: 22px; height: 22px; color: var(--text-4); }
.topic__ic svg { width: 100%; height: 100%; display: block; }
.topic__name {
  grid-area: name; justify-self: start; margin: 0; max-width: 100%;
  font: 600 var(--name-size, clamp(30px, 8vw, 104px))/1 var(--f-display); letter-spacing: -.05em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.2px var(--lock);
  background: linear-gradient(90deg, var(--c, var(--text)) var(--fill, 0%), transparent var(--fill, 0%));
  -webkit-background-clip: text; background-clip: text;
  padding: .06em .02em .1em 0;
  transition: -webkit-text-stroke-color .35s, transform .5s var(--ease);
}
.topic__side { grid-area: side; display: flex; align-items: center; gap: 14px; align-self: start; padding-top: calc(var(--name-size, 96px) * .3); }
.topic__arrow {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--c-line); color: var(--c); transition: background .35s, color .35s, transform .5s var(--ease);
}
.topic__arrow svg { width: 20px; height: 20px; }
.topic__info { grid-area: info; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; max-width: 760px; }
.topic__desc { color: var(--text-4); font-size: 15.5px; line-height: 1.5; transition: color .3s; }
.topic__meta { font: 500 12px var(--f-mono); color: var(--text-4); white-space: nowrap; }
/* вся карточка — ссылка на тему; палочки поверх неё — ссылки на главы */
.topic__link { position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.topic__link:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.ticks { grid-area: ticks; position: relative; z-index: 2; display: flex; align-self: center; justify-self: end; margin: 0 -2px; }
.tick { display: flex; align-items: center; justify-content: center; width: 9px; height: 26px; border-radius: 3px; }
.tick::before { content: ""; width: 5px; height: 16px; border-radius: 2px; background: var(--bg-3); transition: background .2s, transform .25s var(--ease), box-shadow .25s; }
.tick.is-ready::before { background: var(--c-line); }
.tick.is-done::before { background: var(--c); }
.tick.is-hot::before { transform: scaleY(1.35); }
.tick.is-ready.is-hot::before { background: var(--c); box-shadow: 0 0 12px -2px var(--c-glow); }
.tick:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.ticks__tip {
  position: absolute; right: 2px; bottom: calc(100% + 6px); white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-1);
  font: 500 12px/1.2 var(--f-mono); color: var(--text-2); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s;
}
.ticks__tip b { color: var(--c); font-weight: 600; }
.ticks.has-tip .ticks__tip { opacity: 1; transform: none; }

/* состояния */
.topic.is-soon:hover .topic__name { -webkit-text-stroke-color: var(--lock-2); }
.topic.is-soon:hover .topic__node { border-color: var(--text-3); }
.topic.is-soon .chip { color: var(--text-4); border-color: var(--line); }

.topic.is-open .topic__name { -webkit-text-stroke-color: var(--c); }
.topic.is-open .topic__desc { color: var(--text-2); }
.topic.is-open .topic__meta { color: var(--text-3); }
.topic.is-open .topic__num { color: var(--c); }
.topic.is-open .topic__ic { color: var(--c); }
.topic.is-open .topic__node { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 5px var(--c-soft), 0 0 18px var(--c-glow); }
.topic.is-ready .topic__name {
  -webkit-text-stroke-width: 0;
  background: linear-gradient(100deg, var(--c), var(--c2) 70%);
  -webkit-background-clip: text; background-clip: text;
}
.topic.is-open:hover::before { opacity: 1; }
.topic.is-open:hover .topic__name { transform: translateX(10px); }
.topic.is-open:hover .topic__arrow { background: var(--c); color: #0a0a0a; transform: translateX(4px); }
.topic.is-open:hover .topic__node { transform: scale(1.35); }

/* моно-тема (пролог): белая вместо цвета */
.topic.mono-hue.is-ready .topic__name { background: linear-gradient(100deg, var(--text), var(--text-2)); -webkit-background-clip: text; background-clip: text; }
.topic.mono-hue .topic__arrow { border-color: var(--line-3); color: var(--text); }
.topic.mono-hue:hover .topic__arrow { background: var(--text); color: var(--bg); }
.topic.mono-hue .topic__node { box-shadow: 0 0 0 5px var(--glow); }

@media (max-width: 760px) {
  .route { padding-top: 96px; }
  .route__head { grid-template-columns: 1fr; }
  .route__list { padding-left: 30px; }
  .route__list::before { left: 7px; }
  .topic {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "num side" "name name" "info info" "ticks ticks";
    row-gap: 10px; padding: 22px 0 24px;
  }
  .topic__num { padding-top: 0; flex-direction: row; align-items: center; gap: 12px; }
  .topic__side { padding-top: 0; }
  .topic__node { left: -28px; top: 30px; }
  .topic__arrow { width: 42px; height: 42px; }
  .ticks { justify-self: start; flex-wrap: wrap; }
  .ticks__tip { right: auto; left: 2px; }
  .topic::before { inset: 0 -10px; }
}

/* ---------- метод ---------- */
.method { padding: 140px 0 0; }
.method__head { max-width: 760px; }
.method__lede { margin: 22px 0 0; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 56px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.card { position: relative; background: var(--bg); padding: 28px 26px 30px; display: flex; flex-direction: column; min-height: 330px; }
.card__art { height: 120px; margin: 0 0 28px; color: var(--text-3); }
.card__art svg { width: 100%; height: 100%; overflow: visible; }
.card__n { font: 500 12px var(--f-mono); color: var(--text-4); letter-spacing: .12em; }
.card h3 { margin: 10px 0 0; font: 600 21px/1.15 var(--f-display); letter-spacing: -.02em; color: var(--text); }
.card p { margin: 12px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 1040px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .card { min-height: 0; } }

/* ---------- финальный призыв ---------- */
.final { position: relative; margin-top: 140px; padding: 72px 56px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-1); isolation: isolate; }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background:
    radial-gradient(500px 300px at 100% 0%, color-mix(in oklab, var(--text) 8%, transparent), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px;
}
.final__spectrum { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--spectrum); opacity: .8; }
.final h2 { margin: 0; max-width: 16ch; font: 600 clamp(34px, 5vw, 64px)/1 var(--f-display); letter-spacing: -.045em; color: var(--text); }
.final p { margin: 20px 0 0; max-width: 560px; color: var(--text-2); font-size: 18px; }
.final .hero__cta { margin-top: 34px; }
@media (max-width: 640px) { .final { padding: 44px 24px; } }