/* ==========================================================
   Sitimlab — вариант «микс»: сущность за холодным стеклом.
   Один язык — «стекло и свет»: интерфейс выгравирован на стекле,
   цвет раздела живёт только в свете сущности, акцент — янтарь.
   Курсор — источник света над стеклом; контурная карта продолжается гравировкой на стекле.
   1) БАЗА — простая читаемая версия (без .fx): так же выглядит страница
      без JS, по ?plain / #plain и по кнопке.
   2) .fx — оформление; .fx.motion — ещё и движение.
   --c1/--c2/--bg подмешивает сущность (формат "r g b").
   ========================================================== */

:root {
  /* цвет */
  --bg-0: #0b0a0c;                         /* фон за стеклом */
  --ink: #161a22;                          /* текст */
  --ink-2: #444a57;                        /* второстепенный: темнее — стекло прозрачнее (≥ 4.5:1) */
  --amber: #f2a33a;                        /* единственный акцент */
  --amber-rgb: 242 163 58;
  --amber-hi: #f7b85e;                     /* кнопка при наведении */
  --amber-light: #fff3dc;                 /* блик на янтарной точке логотипа */
  --amber-ink: #6f4006;                    /* янтарь для мелкого текста на светлом стекле (≥ 4.5:1) */
  --on-dark: #eef0f4;                      /* текст на тёмном */
  --on-dark-2: rgba(238, 240, 244, .68);
  --line: rgba(22, 26, 34, .12);           /* рамки на светлом стекле */
  --line-2: rgba(22, 26, 34, .28);
  --line-dark: rgba(255, 255, 255, .14);   /* рамки на тёмном */
  /* материалы */
  --glass: rgba(246, 248, 251, .64);       /* лист стекла: холодно-белый */
  /* матовость стекла рисует сама сцена (js/gl.js): под листом сущность считается в крошечном буфере
     и растягивается — размытие ~6 px; там же фон обесцвечен (не желтит) и приподнят по контрасту
     и яркости — тёмное за стеклом не делает лист серым, текст держит контраст.
     Здесь стекло — обычная полупрозрачная заливка, без размытия того, что под ним */
  --glass-tint: .05;                       /* заливка раздела цветом сущности: 5 % */
  --glass-card: rgba(255, 255, 255, .55);  /* стекло на стекле */
  --glass-dark: rgba(14, 13, 18, .74);     /* тонированный участок «Риски» */
  --glass-card-dark: rgba(255, 255, 255, .06);
  --glass-bar: rgba(246, 248, 251, .76);   /* шапка */
  /* форма */
  --radius: 16px;
  --pill: 999px;
  --hi: inset 0 1px 0 rgba(255, 255, 255, .6);
  --shadow: 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-dark: 0 18px 40px rgba(0, 0, 0, .3);
  --glow: 0 0 24px rgb(var(--amber-rgb) / .45);
  /* шрифты */
  --f-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --f-text: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  /* простая версия */
  --plain-ink: #111;
  --plain-ink-2: #555;
  --plain-link: #0b4fb3;
  --plain-line: #ddd;
  --plain-bg: #fff;
  --plain-soft: #f4f4f4;
  --plain-border: #ccc;
  --plain-border-2: #888;
  /* живой цвет сущности */
  --c1: 242 163 58;
  --c2: 255 240 208;
  --bg: 12 9 5;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 18px/1.6 var(--f-text); color: var(--plain-ink); background: var(--plain-bg); }
a { color: var(--plain-link); }
:focus-visible { outline: 3px solid var(--plain-link); outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--plain-bg); color: var(--plain-ink); padding: 10px 14px; border: 2px solid var(--plain-ink); }
.skip:focus { top: 8px; }

/* ---------- БАЗА (простая версия) ---------- */
#gl, #blob, #etch, .glare, .stage-hint, .top, .guide, .guide-shade, .window, .kicker, .num, .drag-hint, .row-ctl, .stats, .ticker { display: none; }
.station svg { display: none; }
.stage, main > section, .foot { max-width: 52rem; margin: 0 auto; padding: 28px 20px; }
.stage { border-bottom: 1px solid var(--plain-line); }
.stage-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.stage-logo { margin: 0; font-weight: 700; font-size: 22px; }
.wordmark { display: block; height: 1em; width: auto; color: inherit; }
.stage-logo .wordmark { height: 30px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage-sub { margin: 0; color: var(--plain-ink-2); font-size: 16px; }
.plain-toggle { font: inherit; font-size: 15px; padding: 6px 12px; border: 1px solid var(--plain-ink-2); background: var(--plain-soft); color: var(--plain-ink); border-radius: 6px; cursor: pointer; }
.stations { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 16px; }
.offer { margin-top: 18px; }
.offer-title { margin: 0 0 8px; font-size: 26px; font-weight: 700; line-height: 1.2; }
.offer-sub { margin: 0 0 14px; color: var(--plain-ink-2); }
.offer-cta { margin: 0 0 10px; }
.offer-fact { margin: 0; font-size: 14px; color: var(--plain-ink-2); }
main > section { border-bottom: 1px solid var(--plain-line); }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
.brand { display: block; font-size: 16px; font-weight: 700; color: var(--plain-ink-2); margin-bottom: 6px; }
h2 { font-size: 26px; line-height: 1.25; margin: 0 0 16px; }
h3 { font-size: 20px; line-height: 1.3; margin: 0 0 6px; }
.btn { display: inline-block; font: 600 16px/1.2 var(--f-text); padding: 12px 18px; background: var(--plain-link); color: var(--plain-bg); text-decoration: none; border: 0; border-radius: 6px; cursor: pointer; }
.brief { margin: 18px 0 0; font-size: 16px; }
.brief div { margin-bottom: 6px; }
.brief dt { display: inline; font-weight: 700; }
.brief dt::after { content: ": "; }
.brief dd { display: inline; margin: 0; }
.tangle { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.tg { border: 1px solid var(--plain-border-2); border-radius: 99px; padding: 2px 12px; font-size: 16px; }
.dict { font-family: var(--f-mono); }
.dict-head { font-size: 26px; }
.dict-tr, .dict-lang { font-size: 16px; font-weight: 400; color: var(--plain-ink-2); }
.dict-senses span { margin-right: 1em; }
.strands, .track, .rail-steps { padding-left: 1.4rem; }
.strands li, .row-in li, .track li, .rail-steps li { margin-bottom: 18px; }
.rail-steps h3 { margin: 0 0 4px; font-size: 1.05em; }
.rail-line, .hub-ring, .hub-window, .hub-dot { display: none; }
.hub-list { padding-left: 1.4rem; }
.hub-list li { margin-bottom: 18px; }
.hub-cap { margin: 0 0 18px; }
.row-in { list-style: none; padding: 0; }
.card { border: 1px solid var(--plain-border); border-radius: 8px; padding: 14px 16px; }
.card-no { margin: 0; color: var(--plain-ink-2); font-size: 14px; }
.facts { margin: 8px 0 0; padding-left: 1.2rem; }
.step .n { font-weight: 700; margin-right: 6px; }
.step .n::after { content: "."; }
.step p { display: inline; }
.risk-list { padding-left: 1.2rem; }
.form { display: grid; gap: 14px; max-width: 34rem; border: 1px solid var(--plain-border); border-radius: 8px; padding: 18px; }
.field { display: grid; gap: 4px; font-size: 16px; }
.field input, .field textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--plain-border-2); border-radius: 6px; width: 100%; background: var(--plain-bg); color: var(--plain-ink); }
.field [aria-invalid="true"] { border: 2px solid var(--plain-ink); }
.two { display: grid; gap: 14px; }
.form-status { margin: 0; min-height: 1.4em; font-size: 16px; }
.contacts { padding-left: 1.2rem; }
.contacts span { font-weight: 700; }
.foot { display: flex; justify-content: space-between; font-size: 15px; color: var(--plain-ink-2); padding-left: 0; padding-right: 0; }
.foot p { margin: 0; }

/* ==========================================================
   ОФОРМЛЕНИЕ (.fx)
   ========================================================== */
.fx { scroll-padding-top: 76px; }
.fx.motion { scroll-behavior: smooth; }
.fx body { color: var(--ink); background: var(--bg-0); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
.fx a { color: var(--ink); text-decoration-color: var(--amber); text-underline-offset: 3px; }
.fx :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; box-shadow: 0 0 0 5px rgb(var(--amber-rgb) / .25); }

/* ---------- сцена ---------- */
.fx #gl { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* гравировка карты: поверх стекла, под шапкой; рисует только там, где лист стекла */
.fx #etch { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.fx body.noetch #etch, .fx:not(.q-high) #etch { display: none; }
/* запасная сущность без WebGL2 */
.fx body.nogl #gl { display: none; }
.fx body.nogl { background: rgb(var(--bg)); }
/* фон — отдельным неподвижным слоем: при прокрутке он не перерисовывается */
.fx body.nogl::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgb(var(--c2) / .14), transparent 30%),
    repeating-radial-gradient(circle at 46% 44%, transparent 0 26px, rgb(var(--c1) / .10) 26px 27px, transparent 27px 52px, rgb(var(--c1) / .2) 52px 53.5px),
    radial-gradient(ellipse at 50% 40%, rgb(var(--c1) / .16), transparent 70%);
}
/* простая версия без WebGL2 (html.still + body.nogl): фон — картинка вместо CSS-колец, сущность — маленькая */
.fx.still body.nogl::before { background: var(--bg-0) url(../img/bg-static-desktop.webp) center / cover no-repeat; }
@media (max-width: 760px) { .fx.still body.nogl::before { background-image: url(../img/bg-static-mobile.webp); } }
.fx.still #etch { display: none; }
.fx.still body.nogl #blob { --s: clamp(36px, 5.5vmin, 56px); box-shadow: 0 0 60px 6px rgb(var(--c1) / .35), inset -6px -8px 20px rgb(0 0 0 / .45); }
.fx body.nogl #blob {
  display: block; position: fixed; z-index: 1; left: 50%; top: 50%;
  --s: min(40vmin, 360px);
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:
    radial-gradient(circle at 34% 30%, rgb(var(--c2)) 0, rgb(var(--c2) / 0) 34%),
    radial-gradient(circle at 60% 70%, rgb(var(--c1)) 0, rgb(var(--c1) / .65) 45%, rgb(var(--bg)) 100%);
  box-shadow: 0 0 120px 10px rgb(var(--c1) / .35), inset -18px -24px 60px rgb(0 0 0 / .45);
  will-change: transform;
}

/* ---------- бегущая строка: голос сущности ---------- */
.fx .ticker {
  display: flex; align-items: center; gap: .6em; min-width: 0; margin: 0;
  font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: lowercase; white-space: nowrap;
}
.fx .tk-p { flex: none; color: var(--amber); }
/* окно строки: type.js выводит столько целых слов с конца, сколько помещается, — без обрыва на середине слова */
.fx .tk-win { display: flex; justify-content: flex-start; min-width: 0; flex: 1; overflow: hidden; }
.fx .tk-t { flex: none; }
.fx .tk-c { flex: none; color: var(--amber); }
.fx.motion .tk-c, .fx.typing .tk-c { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- экран 1 ---------- */
.fx .stage {
  --cover: 0;
  --R: min(34vmin, 360px);                 /* запасной радиус кольца; точный считает entity.js от min(ширина, высота) с местом под подписи */
  --kx: 1.3; --ky: 1.02;                   /* кольцо — эллипс: растяжение по осям */
  position: sticky; top: 0; z-index: 2; max-width: none; margin: 0; padding: 0;
  height: 100vh; height: 100svh; overflow: hidden; border: 0; color: var(--on-dark);
}
.fx .stage-bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 16px 28px;
  padding: clamp(16px, 2.4vw, 32px);
  padding-inline: max(clamp(16px, 2.4vw, 32px), calc((100% - var(--col-w)) / 2));
}
/* логотип и «Простая версия» не гаснут, пока не выехала шапка; дальше — сменяются ею
   (иначе просвечивают сквозь прозрачный низ заявки) */
.fx body.covered .stage-bar { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.fx .stage-brand { flex: none; }
.fx .stage-logo { line-height: 0; color: var(--on-dark); filter: drop-shadow(0 0 22px rgb(var(--amber-rgb) / .28)); }
.fx .stage-logo .wordmark { height: clamp(28px, 3.2vw, 44px); }
.fx .stage-sub { margin-top: 10px; color: var(--on-dark-2); font: 400 11px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.fx .ticker-stage {
  flex: 1 1 0; max-width: 34rem; align-self: center; justify-content: center;
  font-size: clamp(12px, 1.05vw, 14px); color: rgb(var(--c2));
  text-shadow: 0 0 14px rgb(var(--c1) / .7), 0 0 2px rgb(var(--bg) / .9);
}
.fx .ticker-stage .tk-win { flex: 0 1 auto; }
.fx .plain-toggle {
  flex: none; font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px; min-height: 36px; border-radius: var(--pill); cursor: pointer; white-space: nowrap;
  background: transparent; color: inherit; border: 1px solid currentColor;
  transition: background .2s, color .2s, border-color .2s;
}
.fx .stage .plain-toggle { color: var(--on-dark); border-color: rgba(238, 240, 244, .45); background: rgb(var(--bg) / .35); }
.fx .stage .plain-toggle:hover { background: rgba(238, 240, 244, .12); border-color: var(--on-dark); }

.fx .dial { position: absolute; inset: 0; will-change: transform; }
.fx .stations { display: block; position: absolute; inset: 0; margin: 0; opacity: calc(1 - var(--cover) * 2); }
.fx .stage.away .stations { visibility: hidden; pointer-events: none; }
.fx .station {
  position: absolute; left: calc(50% + var(--cx) * var(--R) * var(--kx)); top: calc(50% + var(--cy) * var(--R) * var(--ky));
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  color: var(--on-dark); text-decoration: none;
}
.fx .station svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.st-halo, .st-orbit { transform-box: fill-box; transform-origin: center; }
.fx .st-halo { opacity: .55; transform: scale(.7); transition: transform .3s, fill .3s, opacity .3s; }
.fx .st-orbit { stroke-dasharray: 1.5 4.5; opacity: .7; }
.fx.motion .st-orbit { animation: orbit 16s linear infinite; }
.fx .st-core { fill: currentColor; stroke: none; }
@keyframes orbit { to { transform: rotate(-360deg); } }
.fx .st-name {
  position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 600 clamp(15px, 1.5vw, 20px)/1.1 var(--f-display); letter-spacing: -.01em;
  text-shadow: 0 0 18px rgb(var(--bg) / .9), 0 0 4px rgb(var(--bg) / .8);
  transition: color .2s;
}
.fx .s-r .st-name { left: calc(100% + 2px); }
.fx .s-l .st-name { right: calc(100% + 2px); text-align: right; }
/* верхняя станция подписана сбоку — над ней живёт бегущая строка */
.fx .s-t .st-name { left: calc(100% + 2px); }
.fx .s-b .st-name { left: 50%; top: calc(100% + 2px); transform: translateX(-50%); }
.fx .station:hover, .fx .station:focus-visible { color: rgb(var(--c2)); outline: none; box-shadow: none; }
.fx .station:hover .st-halo, .fx .station:focus-visible .st-halo { transform: scale(1.1); fill: rgb(var(--c1) / .3); opacity: 1; }
.fx .station:hover .st-orbit { animation-duration: 2.6s; }
.fx .station:focus-visible .st-name { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 5px; }

/* ---------- предложение на заставке ----------
   Широкий экран — левый нижний угол, «обложкой»; узкий и портрет — по центру под кольцом.
   Кольцо станций обходит этот блок: entity.js читает --offer-below и прямоугольник блока. */
.fx .stage { --offer-below: 0; --pad-stage: clamp(16px, 2.4vw, 32px); }
/* на широком экране края заставки и шапки — по той же центральной колонке, что и содержимое стекла */
.fx { --col-w: 1180px; }
.fx .offer {
  position: absolute; z-index: 2; left: max(var(--pad-stage), calc((100% - var(--col-w)) / 2)); bottom: clamp(20px, 5vh, 52px);
  width: min(32rem, 34vw); opacity: calc(1 - var(--cover) * 2);
}
.fx .offer::before {
  content: ""; position: absolute; inset: -48px -72px -40px -48px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--bg) / .62), transparent);
}
.fx .stage.away .offer { visibility: hidden; pointer-events: none; }
.fx .offer-title {
  margin: 0 0 14px; color: var(--on-dark); text-wrap: balance;
  font: 600 clamp(26px, 2.5vw, 40px)/1.08 var(--f-display); letter-spacing: -.025em;
  text-shadow: 0 0 30px rgb(var(--bg) / .9), 0 0 4px rgb(var(--bg) / .8);
}
.fx .offer-sub {
  margin: 0 0 20px; max-width: 26em; color: var(--on-dark-2);
  font: 400 clamp(14px, 1.05vw, 16px)/1.5 var(--f-text); text-shadow: 0 0 12px rgb(var(--bg) / .9);
}
.fx .offer-cta { margin: 0 0 14px; }
.fx .offer-fact { margin: 0; color: var(--on-dark-2); font: 400 11px/1.5 var(--f-mono); letter-spacing: .08em; }
.fx .offer-fact span { color: var(--amber); }
/* раскладка «текст под кольцом»: на узком и портретном экране — всегда (--offer-below),
   на широком entity.js включает её классом .offer-below, если так кольцо выходит крупнее */
@media (max-width: 1100px), (max-aspect-ratio: 6/5) {
  .fx .stage { --offer-below: 1; }
}
.fx .stage.offer-below .offer { left: var(--pad-stage); right: var(--pad-stage); width: auto; bottom: clamp(16px, 3vh, 32px); text-align: center; }
.fx .stage.offer-below .offer::before { inset: -36px -24px -24px; }
.fx .stage.offer-below .offer-title { font-size: clamp(22px, 4.6vw, 34px); max-width: 18em; margin-inline: auto; }
.fx .stage.offer-below .offer-sub { margin-inline: auto; }
.fx .stage.offer-below .stage-hint { display: none; }
@media (max-width: 430px) {
  .fx .offer-title { margin-bottom: 10px; }
  .fx .offer-sub { margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
}

.fx .stage-hint {
  display: block; position: absolute; right: max(clamp(16px, 2.4vw, 32px), calc((100% - var(--col-w)) / 2)); bottom: clamp(14px, 3vh, 30px); margin: 0; text-align: center;
  font: 400 11px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-2); opacity: calc(1 - var(--cover) * 2.5);
}
.fx .stage-hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--amber), transparent); }

/* ---------- шапка ---------- */
.fx .top {
  display: flex; position: fixed; inset: 0 0 auto 0; z-index: 6; height: 60px;
  align-items: center; gap: 20px;
  padding: 0 max(clamp(12px, 2.6vw, 36px), calc((100% - var(--col-w)) / 2));
  background: var(--glass-bar); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  transform: translateY(-105%); transition: transform .35s ease; visibility: hidden;
}
.fx body.covered .top { transform: none; visibility: visible; }
/* нижний уровень качества (программная графика): шапка — плотная заливка без размытия */
.fx.q-low .top { background: rgba(246, 248, 251, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx .logo { flex: none; display: flex; align-items: center; gap: 10px; font: 600 17px/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.fx .logo .wordmark { height: 20px; color: var(--ink); }
/* кнопка карты страницы (узкий экран; на широком карта — колонкой слева от стекла) */
.fx .guide-btn {
  flex: 0 1 auto; min-width: 0; display: none; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; cursor: pointer;
  font: 400 12px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  background: rgba(255, 255, 255, .45); border: 1px solid var(--line-2); border-radius: var(--pill);
  transition: background .2s, border-color .2s;
}
.fx .guide-btn:hover { background: rgba(255, 255, 255, .8); border-color: var(--ink); }
.fx .gb-n { flex: none; color: var(--amber-ink); font-weight: 600; }
.fx .gb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx .gb-ar { flex: none; font-size: 14px; line-height: .6; transition: transform .25s; }
.fx .guide-btn[aria-expanded="true"] .gb-ar { transform: rotate(180deg); }
/* полоска прочитанного по нижнему краю шапки: --gp ставит guide.js */
.fx .top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%;
  transform: scaleX(var(--gp, 0)); background: linear-gradient(90deg, rgb(var(--amber-rgb) / .5), var(--amber)); box-shadow: 0 0 8px rgb(var(--amber-rgb) / .6);
}
/* бегущая строка в шапке — всегда вторым рядом: в одном ряду с навигацией и кнопками ей тесно */
.fx { scroll-padding-top: 104px; }
.fx .top { height: auto; flex-wrap: wrap; row-gap: 0; padding-top: 10px; padding-bottom: 0; }
.fx .logo { order: 1; height: 40px; }
.fx .guide-btn { order: 2; }
.fx .top-actions { order: 3; margin-left: auto; }
.fx .top .ticker { order: 4; flex: 1 1 100%; height: 30px; border-top: 1px solid var(--line); color: var(--ink-2); }
.fx.motion body.covered .top .ticker { animation: drop .5s ease both; }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
.fx .top-actions { flex: none; display: flex; gap: 10px; align-items: center; }
.fx .top .plain-toggle { color: var(--ink); border-color: var(--line-2); }
.fx .top .plain-toggle:hover { border-color: var(--ink); background: rgba(255, 255, 255, .6); }

/* ---------- карта страницы («На этой странице», js/guide.js) ----------
   Широкий экран: тихая колонка у левого края листа — без подложки, мелкий серый текст,
   только названия разделов. Станции заставки при закрытии стекла слетают сюда точками.
   Раздел на экране чуть темнее, пройденный путь — бледная пастельная линия.
   Над тёмным стеклом («Риски», низ заявки) строки светлеют (класс .dk ставит guide.js).
   Узкий экран: тот же список — лист снизу по кнопке в шапке. */
.fx .guide {
  --dot: 12px;
  --g-ink: rgb(68 74 87 / .72);            /* текст: серый, тише основного */
  --g-ink-on: rgb(22 26 34 / .9);
  --g-dot: rgb(68 74 87 / .38);
  --g-past: rgb(var(--amber-rgb) / .38);   /* пройденное: бледный янтарь */
  display: block; position: fixed; z-index: 5; top: 132px; left: calc(clamp(8px, 2vw, 32px) + 22px); width: 172px;
  max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 0; visibility: hidden; transition: visibility 0s .4s;
}
.fx .guide::-webkit-scrollbar { display: none; }
.fx .guide-top, .fx .g-track, .fx .g-txt, .fx .g-dot { opacity: 0; transition: opacity .4s; }
.fx .guide.shown { visibility: visible; transition: none; }
.fx .guide.shown .guide-top, .fx .guide.shown .g-track, .fx .guide.shown .g-txt, .fx .guide.shown .g-dot { opacity: 1; }
.fx .guide.shown .g-txt { transition-delay: .25s; }

.fx .guide-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.fx .guide-head { margin: 0; font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g-ink); opacity: .8; transition: color .3s; }
.fx .guide-top.dk .guide-head { color: rgb(238 240 244 / .6); }
.fx .guide-close { display: none; }

.fx .guide-body { position: relative; }
/* линия пути: от первой точки до последней (top / height ставит guide.js); пройденное — бледной заливкой */
.fx .g-track { position: absolute; left: calc(var(--dot) / 2 - .5px); top: 0; width: 1px; height: 0; background: rgb(128 132 144 / .28); pointer-events: none; }
.fx .g-fill { position: absolute; left: 0; top: 0; width: 1px; height: var(--gf, 0px); background: var(--g-past); }
.fx .g-bead { display: none; }

.fx .guide-list { list-style: none; margin: 0; padding: 0; }
.fx .guide-list > li { position: relative; margin: 0; }
.fx .guide-list > li > a { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; color: inherit; text-decoration: none; }
.fx .g-dot { position: relative; z-index: 1; display: block; width: var(--dot); height: var(--dot); color: var(--g-dot); }
.fx .g-dot svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.fx .g-halo { fill: none; stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(.5); transition: transform .3s, stroke .3s; }
.fx .g-orbit, .fx .g-check { display: none; }
.fx .g-core { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(1.2); transition: fill .3s; }
.fx .guide-list > li.done .g-dot { color: var(--g-past); }
.fx .guide-list > li.on .g-dot { color: rgb(var(--amber-rgb) / .75); }
.fx .guide-list > li.on .g-halo { stroke: rgb(var(--amber-rgb) / .35); transform: scale(1); }

.fx .g-txt { display: block; min-width: 0; }
.fx .g-t { display: flex; gap: 6px; align-items: baseline; font: 400 12.5px/1.25 var(--f-text); color: var(--g-ink); transition: color .3s; }
.fx .g-n { flex: none; font: 400 9.5px/1 var(--f-mono); letter-spacing: .04em; opacity: .7; }
.fx .guide-list > li.on .g-t { color: var(--g-ink-on); font-weight: 500; }
.fx .guide-list > li > a:hover .g-t { color: var(--g-ink-on); }
/* над тёмным стеклом */
.fx .guide-list > li.dk { --g-ink: rgb(238 240 244 / .55); --g-ink-on: rgb(238 240 244 / .9); --g-dot: rgb(238 240 244 / .35); }

/* широкий экран: текст стекла отступает от колонки ровно настолько, чтобы её не задеть */
@media (min-width: 1280px) {
  .fx .glass .pane { --pad-l: max(var(--pad-in), 236px); }  /* .glass — сильнее базового .fx .pane ниже по файлу */
}
/* узкий экран: лист снизу по кнопке в шапке */
@media (max-width: 1279px) {
  .fx .guide-btn { display: flex; }
  .fx .guide {
    --dot: 14px; width: auto; top: auto; left: 0; right: 0; bottom: 0; z-index: 8; max-height: min(78vh, 640px); max-height: min(78svh, 640px);
    padding: 18px max(16px, calc((100% - 560px) / 2)) calc(18px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
  }
  .fx .guide::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius) var(--radius) 0 0;
    background: rgba(246, 248, 251, .97); border: 1px solid var(--line); border-bottom: 0; box-shadow: var(--shadow);
  }
  .fx .guide.open { visibility: visible; transform: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .fx .guide-top, .fx .g-track, .fx .g-txt, .fx .g-dot { opacity: 1; }
  .fx .guide-top { margin-bottom: 14px; }
  .fx .guide-head { font-size: 11px; }
  .fx .guide-close {
    display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -6px -6px 0; cursor: pointer;
    font: 400 22px/1 var(--f-text); color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 50%;
  }
  .fx .guide-list > li > a { padding-block: 10px; gap: 12px; }
  .fx .g-t { font-size: 16px; gap: 8px; }
  .fx .g-n { font-size: 11px; }
  .fx .guide-shade { display: block; position: fixed; inset: 0; z-index: 7; background: rgb(var(--bg) / .55); opacity: 0; transition: opacity .3s; }
  .fx .guide-shade.on { opacity: 1; }
  .fx .guide-shade[hidden] { display: none; }
}

/* ---------- кнопки ---------- */
.fx .btn {
  font: 600 14px/1.2 var(--f-display); letter-spacing: .01em; padding: 15px 26px;
  color: var(--ink); background: var(--amber); border: 0; border-radius: var(--pill); box-shadow: none;
  transition: background .2s, box-shadow .25s;
}
.fx .btn:hover, .fx .btn:focus-visible { background: var(--amber-hi); box-shadow: var(--glow); }
.fx .btn:disabled { opacity: .6; cursor: progress; }
.fx .btn-small { padding: 11px 18px; font-size: 12px; white-space: nowrap; }

/* ---------- стекло ---------- */
.fx .glass {
  --pad-x: clamp(18px, 5vw, 96px);
  --col: 1180px;                           /* колонка содержимого: на широком экране стоит по центру листа */
  container-type: inline-size;             /* 100cqw ниже — ширина листа */
  position: relative; z-index: 3; display: block; overflow-x: clip;
  margin: 0 clamp(8px, 2vw, 32px);
}
.fx .sheet {
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(rgb(var(--c1) / var(--glass-tint)), rgb(var(--c1) / var(--glass-tint))), var(--glass);
  box-shadow: var(--hi), 0 -20px 60px rgb(var(--c1) / .14);
}
.fx .pane {
  /* поле слева и справа: не меньше --pad-x, а на широком экране — столько, чтобы колонка встала по центру */
  --pad-in: max(var(--pad-x), calc((100cqw - var(--col)) / 2));
  --pad-l: var(--pad-in); --pad-r: var(--pad-in);
  position: relative; max-width: none; margin: 0; border: 0;
  padding: clamp(70px, 11vh, 130px) var(--pad-r) clamp(70px, 11vh, 130px) var(--pad-l);
}
.fx .pane > * { max-width: var(--col); }

/* тонированный участок: риски — пауза */
.fx .pane.risks { background: var(--glass-dark); color: var(--on-dark); }
/* финал: стекло почти окно — размытие уходит сверху вниз */
.fx .pane.contact {
  z-index: 0;
  background: linear-gradient(rgba(246, 248, 251, .6), rgba(246, 248, 251, .08) 42%, rgba(246, 248, 251, .04));
  border-radius: 0 0 var(--radius) var(--radius); padding-bottom: 28px;
}
/* размытие у заявки (сверху матово, к низу — окно: 6 % — 40 % — 60 %) тоже рисует сцена, по той же маске */
/* без WebGL (нижний уровень, запасная сущность на CSS) — простое плотное стекло */
.fx body.nogl .sheet { background: rgba(246, 248, 251, .9); }
.fx body.nogl .pane.risks { background: rgba(20, 19, 26, .94); }
.fx body.nogl .pane.contact { background: linear-gradient(rgba(246, 248, 251, .9), rgba(246, 248, 251, .3) 40%, rgba(246, 248, 251, .12)); }
.fx body.nogl .contact-left { background: rgba(246, 248, 251, .9); }

/* ---------- общие компоненты: стекло на стекле ---------- */
.fx .card, .fx .step, .fx .tag, .fx .stats li, .fx .form, .fx .contact-left, .fx .foot, .fx .tg {
  background: var(--glass-card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--hi), var(--shadow);
}
.fx .sec-head { margin-bottom: clamp(26px, 5vh, 56px); }
.fx .kicker { display: block; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--amber-ink); margin: 0 0 14px; }
.fx h2 { font: 600 clamp(28px, 1rem + 2.8vw, 56px)/1.06 var(--f-display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.fx h3 { font: 600 clamp(16px, 1.6vw, 21px)/1.25 var(--f-display); letter-spacing: -.01em; margin: 0 0 10px; }
.fx .sec-head h2::after { content: ""; display: block; height: 2px; margin-top: 18px; width: min(220px, 60%); border-radius: 2px; background: linear-gradient(90deg, var(--amber), rgb(var(--amber-rgb) / 0)); box-shadow: 0 0 10px rgb(var(--amber-rgb) / .5); }

/* ---------- заголовок, три строки, бирки ---------- */
.fx .pane.intro { padding-top: clamp(56px, 9vh, 110px); }
.fx h1 { font: 600 clamp(2.2rem, 1.1rem + 3vw, 4.4rem)/1.08 var(--f-display); letter-spacing: -.025em; margin: 0 0 clamp(22px, 4vh, 44px); max-width: 17.5em; text-wrap: balance; }
.fx .brand { display: flex; align-items: center; gap: 12px; font: 600 12px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: clamp(14px, 2.4vh, 24px); }
.fx .brand::after { content: ""; width: 54px; height: 2px; background: var(--amber); box-shadow: 0 0 8px rgb(var(--amber-rgb) / .6); }
.fx h1 em { font-style: normal; background: linear-gradient(transparent 84%, rgb(var(--amber-rgb) / .85) 84% 92%, transparent 92%); }
.fx .intro-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.fx .lede { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; max-width: 40rem; margin: 0 0 clamp(18px, 3vh, 30px); color: var(--ink-2); }
.fx .hero-cta { margin: 0; }
.fx .brief { margin: clamp(26px, 4.5vh, 44px) 0 0; padding: 0; border-top: 1px solid var(--line); font: 400 13px/1.45 var(--f-mono); }
.fx .brief div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 4px 14px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fx .brief dt { color: var(--amber-ink); font-weight: 600; letter-spacing: .04em; }
.fx .brief dt::before { content: "> "; color: var(--amber); }
.fx .brief dt::after { content: none; }
.fx .brief dd { color: var(--ink); }
.fx .tangle { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.6em, 1fr)); gap: 10px; margin: 0; padding: 4px 0 0; font: 600 13px/1 var(--f-mono); }
.fx .tg {
  --d: 0s; position: relative; min-width: 0; white-space: nowrap;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
  padding: 13px 14px 13px 32px; font-size: inherit;
}
.fx .tg::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 3px rgb(var(--amber-rgb) / .18);
}
.fx.motion .tg::before { animation: signal 4.8s ease-in-out infinite; animation-delay: var(--d); }
.fx .tg:nth-child(2) { --d: .6s; } .fx .tg:nth-child(3) { --d: 1.2s; } .fx .tg:nth-child(4) { --d: 1.8s; }
.fx .tg:nth-child(5) { --d: 2.4s; } .fx .tg:nth-child(6) { --d: 3s; } .fx .tg:nth-child(7) { --d: 3.6s; } .fx .tg:nth-child(8) { --d: 4.2s; }
@keyframes signal { 0%, 22%, 100% { box-shadow: 0 0 0 3px rgb(var(--amber-rgb) / .18); } 8% { box-shadow: 0 0 0 3px rgb(var(--amber-rgb) / .5), 0 0 14px 2px rgb(var(--amber-rgb) / .9); } }

/* ---------- Ситим: словарная статья ---------- */
.fx .pane.name { padding-top: clamp(40px, 7vh, 80px); }
.fx .dict { font-family: var(--f-mono); color: var(--ink); }
.fx .dict-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em 1.1em; margin: 0 0 .5em; font: 400 clamp(15px, 1.6vw, 22px)/1 var(--f-mono); letter-spacing: 0; }
.fx .dict-word { font: 600 clamp(52px, 9vw, 128px)/.95 var(--f-mono); letter-spacing: -.04em; text-shadow: 0 0 28px rgb(var(--c1) / .35); }
.fx .dict-tr { color: var(--ink-2); font-size: 1em; }
.fx .dict-lang { color: var(--amber-ink); font-style: italic; font-size: 1em; }
.fx .dict-senses { display: flex; flex-wrap: wrap; gap: .4em 2.4em; margin: 0 0 .9em; padding-left: 2ch; font: 400 clamp(17px, 2vw, 28px)/1.3 var(--f-mono); }
.fx .dict-use { margin: 0; max-width: 44ch; font: 400 clamp(15px, 1.5vw, 20px)/1.5 var(--f-mono); color: var(--ink-2); }
.fx .dict-arrow { color: var(--amber); font-weight: 600; }
.fx .dict .nz { color: var(--amber-ink); opacity: .55; }
.fx .name-text { display: none; }

/* ---------- что делаем ---------- */
.fx .strands { list-style: none; padding: 0; margin: 0; }
.fx .strands li { position: relative; display: grid; grid-template-columns: clamp(60px, 10vw, 140px) 1fr; align-items: start; padding: 24px 12px 30px 0; margin: 0; border-top: 1px solid var(--line-2); border-radius: 0 0 var(--radius) var(--radius); transition: background .3s; }
.fx .strands li:nth-child(odd) { margin-right: clamp(0px, 12vw, 190px); }
.fx .strands li:nth-child(even) { margin-left: clamp(0px, 10vw, 150px); }
.fx .num { display: block; font: 300 clamp(48px, 7.5vw, 104px)/.85 var(--f-mono); color: rgb(var(--amber-rgb) / .4); transition: color .25s, text-shadow .25s; }
.fx .strands li:hover .num { color: var(--amber); text-shadow: 0 0 22px rgb(var(--amber-rgb) / .6); }
.fx .strands p { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; }

/* ---------- сделано: стеклянные карточки, ряд тянется вбок ---------- */
.fx .done { overflow: hidden; }
.fx .drag-hint { display: block; font: 400 12px/1.4 var(--f-mono); letter-spacing: .04em; margin: 18px 0 0; color: var(--ink-2); }
.fx .done > .row { max-width: none; }
/* ряд выходит под края листа; свой индикатор вместо полосы прокрутки */
.fx .row {
  overflow-x: auto; overflow-y: hidden; margin: 0 calc(var(--pad-r) * -1) 0 calc(var(--pad-l) * -1); padding: 0 0 18px;
  scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--pad-x) * 1.4), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--pad-x) * 1.4), transparent);
}
.fx .row::-webkit-scrollbar { display: none; }
.fx .row.at-end { -webkit-mask-image: none; mask-image: none; }
.fx .row.dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.fx .row:focus-visible { outline-offset: -4px; box-shadow: none; }
.fx .row-in { display: flex; gap: 22px; width: max-content; padding: 34px var(--pad-r) 0 var(--pad-l); margin: 0; list-style: none; }
.fx .row-in .card { scroll-snap-align: start; scroll-margin-left: var(--pad-l); }
.fx .done > .row-ctl { display: flex; align-items: center; gap: 14px; margin-top: 8px; max-width: none; }
.fx .row-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  font: 400 18px/1 var(--f-mono); color: var(--ink); background: var(--glass-card);
  border: 1px solid var(--line-2); border-radius: 50%; transition: background .2s, box-shadow .25s, opacity .2s;
}
.fx .row-btn:hover { background: var(--amber); box-shadow: var(--glow); }
.fx .row-btn:disabled { opacity: .35; cursor: default; background: transparent; box-shadow: none; }
.fx .row-bar { position: relative; flex: 1 1 auto; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fx .row-bar i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: inherit; background: var(--amber); box-shadow: 0 0 8px rgb(var(--amber-rgb) / .7); will-change: transform; }
.fx .row-count { flex: none; margin: 0; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.fx .row-count b { font-weight: 600; color: var(--ink); }
.fx .card { position: relative; width: clamp(250px, 25vw, 320px); flex: none; margin: 0; padding: 22px 20px 20px; }
.fx .card-no { display: block; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--amber-ink); margin: 0 0 12px; transition: color .25s, text-shadow .25s; }
.fx .card:hover .card-no, .fx .card:focus-within .card-no { color: var(--amber); text-shadow: 0 0 14px rgb(var(--amber-rgb) / .7); }
.fx .card .facts strong { transition: background .25s, box-shadow .25s; }
.fx .card:hover .facts strong { background: rgb(var(--amber-rgb) / .38); box-shadow: 0 0 12px rgb(var(--amber-rgb) / .45); }
.fx .card h3 { font-size: clamp(16px, 1.45vw, 18px); }
.fx .card p { font-size: 15px; line-height: 1.45; margin: 0 0 12px; }
.fx .facts { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); font: 400 13px/1.45 var(--f-mono); }
.fx .facts li { padding-left: 16px; position: relative; margin-bottom: 5px; }
.fx .facts li::before { content: "→"; position: absolute; left: 0; color: var(--amber-ink); }
.fx .facts strong { background: rgb(var(--amber-rgb) / .2); border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* ---------- как работаем ---------- */
.fx .track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.fx .step { position: relative; margin: 0; padding: 22px 22px 24px; }
.fx .step .n { display: block; font: 300 clamp(36px, 4vw, 54px)/1 var(--f-mono); color: rgb(var(--amber-rgb) / .4); margin: 0 0 12px; transition: color .25s, text-shadow .25s; }
.fx .step:hover .n, .fx .step:focus-within .n { color: var(--amber); text-shadow: 0 0 22px rgb(var(--amber-rgb) / .6); }
.fx .step .n::after { content: none; }
.fx .step p { display: block; margin: 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; }

/* ---------- кто мы ---------- */
.fx .founder-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.fx .tag { padding: clamp(24px, 3.2vw, 42px); }
.fx .tag p { margin: 0 0 1em; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; }
.fx .tag p:last-child { margin-bottom: 0; }
.fx .tag .who { font: 600 clamp(18px, 1.9vw, 24px)/1.3 var(--f-display); letter-spacing: -.01em; }
.fx .stats { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.fx .stats li { padding: 16px 20px 14px; font: 400 13px/1.4 var(--f-mono); color: var(--ink-2); }
.fx .stats strong { display: block; font: 400 clamp(26px, 3vw, 38px)/1.1 var(--f-mono); letter-spacing: -.03em; color: var(--ink); transition: color .25s, text-shadow .25s; }
/* цифры — содержание, поэтому загораются тёмным янтарём со свечением: текст остаётся читаемым */
.fx .stats li:hover strong { color: var(--amber-ink); text-shadow: 0 0 20px rgb(var(--amber-rgb) / .7); }

/* ---------- риски ---------- */
.fx .risks .kicker { color: var(--amber-hi); }  /* светлее: на тёмном и под тёплым бликом держит ≥ 4.5:1 */
.fx .risk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fx .risk-list li {
  position: relative; padding: 46px 20px 24px; min-height: 180px; color: var(--on-dark);
  background: var(--glass-card-dark); border: 1px solid var(--line-dark); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-dark);
}
.fx .risk-list li::before { content: ""; position: absolute; left: 20px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c1)); box-shadow: 0 0 12px 2px rgb(var(--c1) / .7); transition: transform .25s, box-shadow .25s; }
.fx .risk-list li:hover::before { transform: scale(1.8); box-shadow: 0 0 22px 6px rgb(var(--c1) / .9); }
.fx .risk-list p { margin: 0; font: 400 clamp(15px, 1.2vw, 17px)/1.5 var(--f-text); color: rgb(238 240 244 / .8); }
/* заголовок карточки — своей строкой, шрифтом заголовков, с отступом до текста (аудит сайта: сливались) */
.fx .risk-list p strong { display: block; margin: 0 0 10px; font: 600 clamp(15px, 1.2vw, 17px)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--on-dark); }
.fx .risk-list p br { display: none; }

/* ---------- заявка ---------- */
.fx .contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: stretch; }
.fx .contact-left {
  padding: clamp(22px, 3vw, 40px);
  background: rgba(246, 248, 251, .72);
}
.fx .window { display: block; min-height: 420px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.fx .next { font: 500 clamp(18px, 1.9vw, 24px)/1.4 var(--f-text); margin: 0 0 22px; max-width: 30em; }
/* форма — без своей карточки: на главной она внутри карточки «Следующего шага», в окне — прямо в окне */
.fx .form { max-width: none; gap: 18px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.fx .field-hint { margin: -6px 0 0; padding: 10px 12px; font: 400 13px/1.45 var(--f-text); color: var(--ink); background: rgb(var(--amber-rgb) / .14); border-left: 2px solid var(--amber); border-radius: 4px; }
.fx .field-hint[hidden] { display: none; }
.fx .field span { font: 600 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.fx .field input, .fx .field textarea { font: 500 17px/1.4 var(--f-text); padding: 10px 2px 8px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; resize: vertical; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.fx .field input::placeholder, .fx .field textarea::placeholder { color: rgba(22, 26, 34, .45); }
.fx .field input:focus, .fx .field textarea:focus { outline: none; box-shadow: 0 1px 0 var(--amber), 0 6px 14px -10px rgb(var(--amber-rgb) / .9); border-bottom-color: var(--amber); }
.fx .field [aria-invalid="true"] { border-bottom: 2px solid var(--amber-ink); }
.fx .two { grid-template-columns: minmax(0, 1fr); }  /* имя и контакт — друг под другом: подсказки полей не обрезаются */
.fx .btn-send { justify-self: start; }
.fx .form-status { font: 400 13px/1.5 var(--f-mono); color: var(--ink-2); }
.fx .form-status:empty { display: none; }
.fx .form-status.shown { padding: 12px 14px; background: var(--ink); color: var(--on-dark); border-radius: var(--radius); }
/* заявка принята (S-13): поля и кнопка убраны, на их месте — крупное сообщение, повторно не отправить */
.form.sent > :not(.form-status) { display: none; }
.form.sent .form-status { font-size: 18px; }
.fx .form.sent .form-status.shown { padding: 18px 20px; font: 500 17px/1.45 var(--f-text); background: var(--ink); border-left: 3px solid var(--amber); }
.fx .contacts { list-style: none; margin: 22px 0 0; padding: 0; font: 400 15px/1 var(--f-mono); }
.fx .contacts li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.fx .contacts span { width: 90px; flex: none; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--amber-ink); padding-top: 2px; }
.fx .contacts a { color: inherit; }
.fx .foot { max-width: none; margin: 40px 0 0; padding: 18px 20px; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink); background: rgba(246, 248, 251, .8); }

/* ---------- свет от курсора на стекле (light.js) ---------- */
/* слои, в которых лежит блик: свой контекст наложения (блик под текстом) и обрезка по краю */
.fx .sheet, .fx .pane.risks { isolation: isolate; }
.fx .sheet, .fx .pane.risks, .fx .pane.contact { contain: paint; }
.fx .glare {
  --gs: min(120vmax, 1150px);
  --gc: 255 248 236;                      /* нейтрально-белый с лёгкой теплотой янтаря */
  --ga: .26;
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: var(--gs); height: var(--gs); margin: calc(var(--gs) / -2) 0 0 calc(var(--gs) / -2);
  border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgb(var(--gc) / var(--ga)), rgb(var(--gc) / calc(var(--ga) * .4)) 42%, rgb(var(--gc) / 0));
}
.lightfx .glare { display: block; }
.fx .risks > .glare { --gc: 255 190 112; --ga: .13; }  /* на тёмном — теплее и заметнее (светлый текст держит ≥ 4.5:1) */
.fx .contact > .glare { --ga: .18; }
/* кромки ловят свет: полоска на ближней к курсору части рамки и еле заметный блик по поверхности */
html.lightfx .catch {
  --lc: 255 247 232; --ls: .2;            /* цвет света; сила блика по поверхности */
  position: relative;
  background-image: radial-gradient(circle 320px at var(--mx, -999px) var(--my, -999px), rgb(var(--lc) / calc(var(--li, 0) * var(--ls))), rgb(var(--lc) / 0));
}
html.lightfx .catch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(circle 230px at var(--mx, -999px) var(--my, -999px), rgb(var(--lc) / var(--li, 0)), rgb(var(--lc) / 0) 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.lightfx .risks .catch { --lc: 255 206 140; --ls: .07; }

/* ==========================================================
   ДВИЖЕНИЕ — только если не просили меньше анимации
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================
   АДАПТИВ
   ========================================================== */
@media (max-width: 1180px) {
}
@media (max-width: 1100px) {
  /* узкое окно: бегущая строка на первом экране — отдельной строкой под логотипом */
  .fx .stage-bar { flex-wrap: wrap; row-gap: 14px; }
  .fx .ticker-stage { order: 3; flex: 1 1 100%; max-width: none; justify-content: flex-start; align-self: auto; }
  .fx .ticker-stage .tk-win { flex: 1 1 auto; }
  .fx .risk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx .track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx .intro-row { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .fx { scroll-padding-top: 96px; }
  /* телефон: стекло на всю ширину */
  .fx .glass { margin: 0; --pad-x: 16px; }
  .fx .pane { --pad-l: var(--pad-in); --pad-r: var(--pad-in); padding: 56px var(--pad-in); }
  .fx .pane.intro { padding-top: 44px; }
  .fx h1 { font-size: clamp(1.8rem, 7.6vw, 2.2rem); } /* на телефоне нижняя граница 2,2rem дала бы 7–8 строк */
  .fx .sheet { border-radius: var(--radius) var(--radius) 0 0; }
  .fx .pane.contact { border-radius: 0; }
  .fx .intro-row, .fx .founder-grid, .fx .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .fx .tangle { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 11.5px; gap: 8px; }
  .fx .tg { padding: 11px 10px 11px 26px; overflow: hidden; text-overflow: ellipsis; }
  .fx .tg::before { left: 11px; }
  .fx .brief div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fx .strands li { grid-template-columns: 50px 1fr; }
  .fx .strands li:nth-child(n) { margin-left: 0; margin-right: 0; }
  .fx .track, .fx .risk-list { grid-template-columns: minmax(0, 1fr); }
  .fx .risk-list li { min-height: 0; }
  .fx .two { grid-template-columns: minmax(0, 1fr); }
  .fx .window { order: -1; min-height: 44vh; min-height: 44svh; }
  .fx .contact-left { padding: 18px 14px; }
  .fx .form { padding: 0; }
    .fx .card { width: 78vw; max-width: 300px; }
  .fx .dict-senses { padding-left: 0; gap: .3em 1.4em; }
  /* шапка в две строки: логотип и кнопки; кнопка карты страницы и бегущая строка */
  .fx .top { height: auto; flex-wrap: wrap; gap: 0 10px; padding: 8px 12px 0; }
  .fx .logo { font-size: 15px; order: 1; height: 38px; }
  .fx .top-actions { order: 2; margin-left: auto; gap: 8px; }
  .fx .guide-btn { order: 3; height: 30px; margin: 1px 0; font-size: 11px; }
  .fx .top .ticker { order: 4; flex: 1 1 0; height: 32px; font-size: 11px; border-top: 0; }
  .fx .plain-toggle { font-size: 10px; padding: 8px 10px; min-height: 34px; }
  .fx .btn-small { padding: 10px 12px; font-size: 11px; }
  .fx .contacts li { flex-wrap: wrap; }
  /* первый экран: бегущая строка своей строкой над сущностью; подписи станций под точками */
  .fx .stage { --R: min(33vw, 30vh); --kx: 1.12; --ky: 1.3; }
  .fx .stage-bar { flex-wrap: wrap; }
  /* подпись под логотипом — и на телефоне (аудит сайта): гость сразу видит, чем занимается студия */
  .fx .stage-brand { flex: 1 1 0; min-width: 0; }
  .fx .stage-sub { margin-top: 8px; font-size: 10px; letter-spacing: .1em; }
  .fx .ticker-stage { order: 3; flex: 1 1 100%; max-width: none; font-size: 12px; }
  .fx .station { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .fx .station::after { content: ""; position: absolute; inset: -6px -14px -30px; }
  .fx .s-t::after { inset: -30px -14px -6px; }
  .fx .st-name, .fx .s-l .st-name, .fx .s-r .st-name, .fx .s-b .st-name { left: 50%; right: auto; top: calc(100% - 4px); bottom: auto; transform: translateX(-50%); text-align: center; font-size: 13px; }
  .fx .s-t .st-name { top: auto; bottom: calc(100% - 4px); }
  .fx .s-l .st-name { transform: translateX(-38%); }
  .fx .s-r .st-name { transform: translateX(-62%); }
}
@media (max-width: 430px) {
  .fx .top .logo { font-size: 0; gap: 0; }
  .fx .top .logo .wordmark { height: 18px; }
  .fx .top-actions { gap: 6px; }
  .fx .top .plain-toggle { font-size: 9.5px; padding: 8px 8px; letter-spacing: .02em; }
  .fx .top .btn-small { padding: 10px 11px; font-size: 10.5px; }
}
@media print {
  #gl, #etch, #blob, .glare, .top, .guide, .guide-shade, .stage-hint, .ticker, .row-ctl { display: none !important; }
}

/* Списки записей сайта (/blog/, /cases/, /tools/): простая вёрстка в стиле статей, добавлено вместе с модулем site */
.entry-list { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 20px; }
.entry-list h2 { margin: 0 0 6px; font-size: 1.15em; }
.entry-list p { margin: 0; }

/* ADR-035: ссылка «Новости» в шапке списка блога */
.page .head-link { display: inline-block; margin-top: 14px; font-size: 16px; }
.page .head-link::after { content: " →"; }
.fx .page .head-link { font: 400 14px/1.45 var(--f-mono); color: var(--amber-ink); }
.fx .page .head-link:hover, .fx .page .head-link:focus-visible { color: var(--amber); }

/* Тело записи: загруженные картинки, код и таблицы не шире экрана (SITE-04) */
main > section img { max-width: 100%; height: auto; }
main > section pre { overflow-x: auto; }
main > section table { display: block; max-width: 100%; overflow-x: auto; }
/* Кейсы (SITE-06): карточка главной — ссылка целиком, «Все кейсы», картинки записей и списков */
main img { border-radius: 8px; }
.entry-list li { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.entry-list li > div { flex: 1 1 260px; min-width: 0; }
.entry-cover { flex: 0 0 200px; max-width: 100%; }
.entry-cover img { display: block; width: 100%; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .card h3 a:focus-visible { text-decoration: underline; }
.card-more { margin: 10px 0 0; font-size: 14px; }
.card-more::after { content: " →"; }
.done-all { margin: 18px 0 0; }
.done-empty { margin: 18px 0 0; }
.fx .card { display: flex; flex-direction: column; }
.fx .card h3 a { cursor: pointer; }
.fx .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fx .card h3 a:focus-visible { outline: none; text-decoration: none; }
.fx .card:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; }
.fx .card:hover h3 a { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.fx .card p.card-more { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 400 13px/1.45 var(--f-mono); color: var(--amber-ink); transition: color .25s; }
.fx .card:hover p.card-more, .fx .card:focus-within p.card-more { color: var(--amber); }
.fx .done-all { margin: 28px 0 0; }

/* SITE-10: «Бесплатные инструменты» после «Что уже сделано», статьи блога в «Кто мы», ссылки подвала */
.tool-list { list-style: none; padding: 0; }
.tool-list li { margin-bottom: 18px; }
.tools-lede { margin: 0 0 12px; color: var(--plain-ink-2); }
.brief-text::before { content: " — "; }
.brief-all { margin: 12px 0 0; font-size: 16px; }
.brief-all a::after { content: " →"; }
.foot-nav a + a { margin-left: 14px; }
.fx .pane.tools { padding-top: 0; }
.fx .tools-lede { max-width: 40rem; margin: 18px 0 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: var(--ink-2); }
.fx .tool-list { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }
.fx .tool-list li { margin: 0; }
.fx .tool-list .card { width: clamp(280px, 30vw, 380px); }
.fx .brief-all { margin: 14px 0 0; font: 400 13px/1.45 var(--f-mono); }
.fx .brief-all a { color: var(--amber-ink); }
.fx .foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fx .foot-nav a + a { margin-left: 0; }
@media (max-width: 760px) {
  .fx .tool-list .card { width: 100%; max-width: none; }
  .fx .foot { flex-wrap: wrap; gap: 12px 18px; line-height: 1.4; }
}

/* ---------- разделы сайта (SITE-10): «Кейсы / Статьи / Инструменты» в шапке и на первом экране ---------- */
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fx .site-nav { flex-wrap: nowrap; gap: 4px; }
.fx .site-nav a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--pill);
  font: 400 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s;
}
.fx .top-nav { order: 2; }
.fx .top-nav a { color: var(--ink); }
.fx .top-nav a:hover, .fx .top-nav a:focus-visible { background: rgba(255, 255, 255, .6); border-color: var(--line-2); }
.fx .top-nav a[aria-current] { border-color: var(--line-2); background: rgba(255, 255, 255, .45); }
.fx .top-nav a[aria-current]::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgb(var(--amber-rgb) / .7); }
.fx .guide-btn { order: 3; }
.fx .top-actions { order: 4; }
.fx .top .ticker { order: 5; }
.fx .stage-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.fx .stage-nav a { color: var(--on-dark); }
.fx .stage-nav a:hover, .fx .stage-nav a:focus-visible { border-color: rgb(var(--c2) / .5); background: rgb(255 255 255 / .08); }
@media (max-width: 1100px) {
  .fx .stage-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
}
@media (max-width: 760px) {
  /* телефон: логотип и кнопки — первый ряд, разделы — второй, карта страницы и строка — третий */
  .fx .top-actions { order: 2; }
  .fx .top-nav { order: 3; flex: 1 1 100%; margin: 2px -12px 0; padding: 0 6px; border-top: 1px solid var(--line); }
  .fx .top-nav a { height: 32px; padding: 0 9px; font-size: 11px; }
  .fx .guide-btn { order: 4; }
  .fx .top .ticker { order: 5; }
  .fx .stage-nav { display: none; }
  .fx.inner .top .ticker { flex: 1 1 100%; }  /* без кнопки карты страницы строка — своим рядом */  /* на телефоне первый экран тесный: разделы — в шапке */
}

/* ---------- внутренние страницы (html.inner): каркас главной, сразу со стекла ---------- */
.fx.inner .stage { height: 0; }
.fx.inner .stage-bar, .fx.inner .offer, .fx.inner .stage-hint { display: none; }
.fx.inner .top { transform: none; visibility: visible; transition: none; }
/* зазор над стеклом — как по бокам; --top-h (высота шапки) ставит js/page.js */
.fx.inner .glass { margin-top: calc(var(--top-h, 81px) + clamp(8px, 2vw, 32px)); margin-bottom: clamp(8px, 2vw, 32px); }
.fx.inner .sheet { border-radius: var(--radius); }
.fx .pane.end { padding-top: 0; padding-bottom: clamp(20px, 3vh, 32px); }
.fx .pane.end .foot { margin: 0; }
@media (max-width: 760px) { .fx.inner .glass { margin-top: var(--top-h, 120px); margin-bottom: 0; } .fx.inner .sheet { border-radius: 0; } }
.fx .pane.page { padding-top: clamp(40px, 7vh, 80px); }
.fx .pane.more { padding-top: 0; }
.fx .page .sec-head h1 { font: 600 clamp(28px, 1rem + 2.8vw, 56px)/1.06 var(--f-display); letter-spacing: -.02em; margin: 0; max-width: 22em; }
.fx .page .sec-head h1::after { content: ""; display: block; height: 2px; margin-top: 18px; width: min(220px, 60%); border-radius: 2px; background: linear-gradient(90deg, var(--amber), rgb(var(--amber-rgb) / 0)); box-shadow: 0 0 10px rgb(var(--amber-rgb) / .5); }
.fx .page .kicker time { color: var(--ink-2); font-weight: 400; }
.fx .page .kicker time::before { content: "· "; color: var(--amber); }
.fx .byline { margin: 0 0 clamp(24px, 4vh, 40px); padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 13px/1.45 var(--f-mono); }
.fx .byline::before { content: "> "; color: var(--amber); }

/* «← Назад» и раздел */
.crumbs { margin: 0 0 18px; }
.crumbs .section { margin-left: 14px; }
.fx .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 clamp(28px, 5vh, 52px); font: 400 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.fx .crumbs .back {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 12px;
  color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .5); border: 1px solid var(--line-2); border-radius: var(--pill);
  transition: background .2s, border-color .2s, box-shadow .25s;
}
.fx .crumbs .back span { color: var(--amber-ink); font-size: 15px; letter-spacing: 0; transition: transform .2s; }
.fx .crumbs .back:hover, .fx .crumbs .back:focus-visible { background: var(--amber); border-color: var(--amber); box-shadow: var(--glow); }
.fx .crumbs .back:hover span { color: var(--ink); transform: translateX(-3px); }
.fx .crumbs .section { margin: 0; color: var(--amber-ink); font-weight: 600; text-decoration: none; }
.fx .crumbs .section::before { content: "/ "; color: var(--ink-2); font-weight: 400; }

/* обложка записи и текст */
.cover img, .entry-cover img { max-width: 100%; height: auto; }
.fx .cover { margin: 0 0 clamp(28px, 5vh, 56px); }
.fx .cover img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
/* текст записи — на ширину рабочей зоны главной; абзацы чуть уже, чтобы строку было удобно читать */
.fx .prose { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; }
.fx .prose p, .fx .prose ul, .fx .prose ol, .fx .prose blockquote, .fx .page .lede, .fx .byline { max-width: 56rem; }
.fx .prose > :first-child { margin-top: 0; }
.fx .prose p, .fx .prose ul, .fx .prose ol, .fx .prose blockquote, .fx .prose table, .fx .prose pre { margin: 0 0 1.1em; }
.fx .prose h2 { font: 600 clamp(22px, 1rem + 1.2vw, 32px)/1.15 var(--f-display); letter-spacing: -.015em; margin: 1.9em 0 .7em; }
.fx .prose h2::after { content: ""; display: block; height: 2px; margin-top: 14px; width: min(160px, 50%); border-radius: 2px; background: linear-gradient(90deg, var(--amber), rgb(var(--amber-rgb) / 0)); box-shadow: 0 0 10px rgb(var(--amber-rgb) / .5); }
.fx .prose h3 { font: 600 clamp(17px, 1.4vw, 20px)/1.3 var(--f-display); margin: 1.8em 0 .6em; }
.fx .prose h4 { font: 600 13px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); margin: 1.6em 0 .6em; }
.fx .prose ul, .fx .prose ol { padding-left: 1.3em; }
.fx .prose li { margin: 0 0 .45em; }
.fx .prose li::marker { color: var(--amber-ink); font-family: var(--f-mono); }
.fx .prose strong { font-weight: 500; background: linear-gradient(transparent 62%, rgb(var(--amber-rgb) / .3) 62%); }
.fx .prose blockquote { padding: 4px 0 4px 18px; border-left: 2px solid var(--amber); color: var(--ink-2); }
.fx .prose code { font: 400 .86em/1.4 var(--f-mono); padding: .1em .35em; background: rgba(22, 26, 34, .06); border-radius: 4px; }
.fx .prose pre { padding: 14px 16px; background: #14131a; color: var(--on-dark); border-radius: 10px; overflow-x: auto; }
.fx .prose pre code { padding: 0; background: none; color: inherit; }
.fx .prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.fx .prose th, .fx .prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.fx .prose th { font: 600 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); }
.fx .prose img { max-width: 100%; height: auto; border-radius: 10px; }
.fx .prose hr { border: 0; height: 1px; background: var(--line); margin: 2em 0; }
.fx .page-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(32px, 6vh, 56px) 0 0; }
.fx .page-cta-top { margin: 0 0 clamp(28px, 5vh, 48px); }
.fx .btn-ghost { background: transparent; border: 1px solid var(--line-2); padding: 14px 25px; }
.fx .btn-ghost:hover, .fx .btn-ghost:focus-visible { background: rgba(255, 255, 255, .7); border-color: var(--ink); }

/* карточки с обложкой: «Ещё кейсы» и списки разделов */
.fx .entry-cover { display: block; flex: none; max-width: none; margin: -10px -8px 16px; }
.fx .entry-cover img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: rgba(22, 26, 34, .08); }
.fx .entry-list { margin-top: clamp(24px, 4vh, 40px); }
/* карточки внутренних страниц — сетка «Как работаем» главной: три колонки на всю рабочую зону */
.fx .page .tool-list, .fx .more .tool-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.fx .page .tool-list .card, .fx .more .tool-list .card { width: auto; max-width: none; }
@media (max-width: 1100px) { .fx .page .tool-list, .fx .more .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fx .page .tool-list, .fx .more .tool-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- окно заявки (js/lead.js) ---------- */
.lead { max-width: 40rem; }
.lead-close { font-size: 22px; }
.fx .lead {
  width: min(560px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
  background: rgba(246, 248, 251, .97); box-shadow: var(--shadow); overflow: auto; overscroll-behavior: contain;
}
.fx .lead::backdrop { background: rgb(11 10 12 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fx .lead-box { padding: clamp(18px, 3vw, 30px); }
.fx .lead-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fx .lead-title { margin: 0; font: 600 clamp(22px, 1rem + 1.4vw, 32px)/1.1 var(--f-display); letter-spacing: -.015em; }
.fx .lead-close {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin: -4px -6px 0 0; cursor: pointer;
  font: 400 24px/1 var(--f-text); color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 50%;
}
.fx .lead-close:hover, .fx .lead-close:focus-visible { background: rgba(255, 255, 255, .8); border-color: var(--ink); }
.fx .lead-next { margin: 12px 0 26px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.fx .lead .form { margin: 0; }
.fx.lead-open, .fx.lead-open body { overflow: hidden; }

/* согласие на обработку персональных данных под формой */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.fx .consent { font: 400 13.5px/1.45 var(--f-text); color: var(--ink-2); cursor: pointer; }
.fx .consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--amber-ink); }
.fx .consent[aria-invalid="true"], .fx .consent:has(input[aria-invalid="true"]) { color: var(--ink); }
.fx .consent:has(input[aria-invalid="true"]) input { outline: 2px solid var(--amber-ink); outline-offset: 2px; }

/* ---------- SITE-11 (2026-10-20): новые разделы главной на прежних компонентах ---------- */
/* подзаголовок внутри раздела («Какую работу можно снять с команды») */
.sub-head { margin: 28px 0 8px; font-size: 20px; }
.fx .sub-head { margin: clamp(36px, 6vh, 64px) 0 10px; font: 600 clamp(20px, 2vw, 26px)/1.25 var(--f-display); letter-spacing: -.01em; }
.fx .scheme-note { margin-top: clamp(18px, 3vh, 30px); }
.fx .lede + .track { margin-top: 6px; }
/* карточки направлений: заголовок и три строки «сейчас / после / эффект» */
.fx .where-list .card { width: clamp(280px, 30vw, 400px); }
.fx .where-list .card p { margin: 0 0 8px; }
.fx .where-list .card p strong { color: var(--amber-ink); font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.fx .where-other, .fx .safety-tool, .fx .compare-note { margin: clamp(22px, 4vh, 40px) 0 0; }
.fx .risks .safety-tool { color: var(--on-dark); max-width: none; }  /* одной строкой (владелец 2026-10-20) */
.fx .risks .safety-tool a { color: var(--amber-hi); }
/* сравнение: две карточки рядом — «Когда хватит» и «Когда нужен процесс» (янтарная рамка); строки — вариант
   мелким моно и текст; подсетка держит строки обеих карточек на одном уровне; ≤ 760px — друг под другом */
.compare-card { margin-bottom: 18px; }
.compare-k { display: block; font-weight: 700; }
.fx .compare-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--n, 6), auto); gap: 0 22px; }
.fx .compare-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; margin: 0; padding: 22px 24px 6px; background: var(--glass-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--hi), var(--shadow); }
.fx .compare-card.is-us { border-color: rgb(var(--amber-rgb) / .7); box-shadow: var(--hi), var(--shadow), 0 0 0 3px rgb(var(--amber-rgb) / .12); }
.fx .compare-card h3 { margin: 0 0 12px; font: 600 clamp(18px, 1.6vw, 22px)/1.25 var(--f-display); letter-spacing: -.01em; }
.fx .compare-row { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.fx .compare-k { margin-bottom: 4px; color: var(--amber-ink); font: 600 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.fx .compare-row p { margin: 0; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.45; color: var(--ink); }
@media (max-width: 760px) {
  .fx .compare-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .fx .compare-card { grid-row: auto; grid-template-rows: none; }
}
/* первые шаги — лента: линия с точками, названия шагов (жирное начало блока), описание всплывает
   при наведении/фокусе; заголовок раздела меньше обычного (раздел менее значимый) */
.lane { padding-left: 1.4rem; }
.lane li { margin-bottom: 12px; }
.lane .n { font-weight: 700; margin-right: 6px; }
.lane .n::after { content: "."; }
.lane p { display: inline; }
.fx .h-lesser { font-size: clamp(24px, 2.6vw, 34px); }
.fx .lane { list-style: none; margin: 0; padding: 22px 0 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 14px; }
.fx .lane::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; border-radius: 1px; background: rgb(var(--amber-rgb) / .25); }
.fx .lane li { position: relative; margin: 0; min-height: 86px; padding: 24px 6px 0 0; outline: none; }
.fx .lane li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--glass); border: 2px solid rgb(var(--amber-rgb) / .7); box-sizing: border-box; transition: background .25s, box-shadow .25s, transform .25s; }
.fx .lane li:hover::before, .fx .lane li:focus-within::before, .fx .lane li:focus::before { background: var(--amber); border-color: var(--amber); transform: scale(1.4); box-shadow: 0 0 0 4px rgb(var(--amber-rgb) / .18), var(--glow); }
.fx .lane .n { display: inline-block; margin: 0 8px 0 0; font: 300 14px/1 var(--f-mono); color: var(--amber-ink); }
.fx .lane .n::after { content: none; }
/* блок шага: жирный заголовок, под ним описание — всегда (аудит сайта, 2026-10-30: раньше описание
   всплывало только при наведении, на ПК его не видели). Шесть шагов — в три колонки, два ряда;
   у каждого ряда своя линия с точками (линия нарисована фоном шага) */
.fx .lane { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4vh, 40px) 0; padding-top: 0; }
.fx .lane::before { content: none; }
.fx .lane li { min-height: 0; padding: 26px clamp(18px, 2.4vw, 36px) 0 0; background: linear-gradient(rgb(var(--amber-rgb) / .25), rgb(var(--amber-rgb) / .25)) 0 5px / 100% 2px no-repeat; }
.fx .lane li:nth-child(3n) { background-size: calc(100% - clamp(18px, 2.4vw, 36px)) 2px; }
.fx .lane p { display: block; margin: 0; max-width: 34em; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.5; color: var(--ink-2); }
.fx .lane p strong { display: block; margin: 0 0 6px; font: 600 clamp(14px, 1.15vw, 17px)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.fx .audit-line { margin: clamp(14px, 2vh, 22px) 0 0; max-width: none; font-size: clamp(14px, 1.15vw, 16px); }
.fx .audit-line strong { color: var(--ink); }
/* частые вопросы — аккордеон в две колонки: вопрос — строка с «+», ответ раскрывается по нажатию */
.faq-item { margin-bottom: 10px; }
.faq-item summary { font-weight: 700; cursor: pointer; }
.fx .faq-acc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; }
.fx .faq-item { margin: 0; border-top: 1px solid var(--line-2); }
.fx .faq-col > .faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.fx .faq-item summary { position: relative; list-style: none; padding: 14px 34px 14px 0; font: 600 clamp(15px, 1.2vw, 17px)/1.35 var(--f-text); color: var(--ink); cursor: pointer; transition: color .2s; }
.fx .faq-item summary::-webkit-details-marker { display: none; }
.fx .faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font: 300 24px/1 var(--f-mono); color: var(--amber); transition: transform .25s; }
.fx .faq-item[open] summary::after { transform: rotate(45deg); }
.fx .faq-item summary:hover, .fx .faq-item[open] summary { color: var(--amber-ink); }
.fx .faq-item summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.fx .faq-a { padding: 0 34px 16px 0; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) {
  .fx .faq-acc { grid-template-columns: minmax(0, 1fr); }
  .fx .faq-col:first-child > .faq-item:last-child { border-bottom: 0; }
}
@media (max-width: 1000px) {
  .fx .lane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx .lane li:nth-child(3n) { background-size: 100% 2px; }
  .fx .lane li:nth-child(2n) { background-size: calc(100% - clamp(18px, 2.4vw, 36px)) 2px; }
}
@media (max-width: 760px) {
  .fx .lane { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 0 26px; }
  .fx .lane::before { content: ""; left: 5px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .fx .lane li, .fx .lane li:nth-child(n) { min-height: 0; padding: 0 0 16px; background: none; }
  .fx .lane li::before { left: -26px; top: 4px; }
  .fx .lane p { font-size: 15px; line-height: 1.45; color: var(--ink); }
  .fx .lane p strong { display: inline; margin: 0; }
}

/* ---------- SITE-11, рельс (2026-10-20, вариант А владельца): «Как ИИ-агенты работают с документами» ----------
   Шесть шагов в ряд; между цифрами и заголовками — янтарный рельс, по нему едет точка-документ.
   Положение точки (--rp, px) и подсветку шага (li.on / li.past) ставит js/rail.js: по прокрутке
   раздела и по наведению. --ry — высота рельса от верха шага (цифра + отступ). Без движения
   (.rail-still) точка стоит на первом шаге, все шаги одной яркости. ≤ 760px рельс вертикальный. */
.fx .rail { --ry: calc(clamp(30px, 3vw, 44px) + 18px); --rp: 0px; position: relative; margin-top: clamp(26px, 4vh, 44px); }
.fx .rail-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(14px, 1.6vw, 24px); }
.fx .rail-steps li { position: relative; margin: 0; padding: 0; }
.fx .rail-steps .num { font: 300 clamp(30px, 3vw, 44px)/1 var(--f-mono); color: rgb(var(--amber-rgb) / .4); margin: 0 0 36px; transition: color .3s, text-shadow .3s; }
.fx .rail-steps h3 { margin: 0 0 8px; font: 600 clamp(13px, 1.12vw, 16px)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink-2); hyphens: auto; overflow-wrap: anywhere; transition: color .3s; }
.fx .rail-steps p { margin: 0; max-width: 24ch; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.5; color: var(--ink-2); }
/* метка станции на рельсе у каждого шага */
.fx .rail-steps li::after { content: ""; position: absolute; left: 0; top: calc(var(--ry) - 4px); width: 10px; height: 10px; border-radius: 50%; background: var(--glass); border: 2px solid rgb(var(--amber-rgb) / .45); box-sizing: border-box; transition: background .3s, border-color .3s, box-shadow .3s; }
.fx .rail-steps li.past::after { border-color: var(--amber); }
.fx .rail-steps li.on::after { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px rgb(var(--amber-rgb) / .18); }
.fx .rail-steps li.on .num { color: var(--amber); text-shadow: 0 0 22px rgb(var(--amber-rgb) / .6); }
.fx .rail-steps li.on h3 { color: var(--ink); }
.fx .rail-steps li.past .num { color: rgb(var(--amber-rgb) / .62); }
/* рельс: бледная линия на всю ширину, пройденная часть янтарная, точка-документ */
.fx .rail-line { display: block; position: absolute; left: 0; right: 0; top: var(--ry); height: 2px; border-radius: 1px; background: rgb(var(--amber-rgb) / .2); pointer-events: none; }
.fx .rail-line::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--rp); background: linear-gradient(90deg, rgb(var(--amber-rgb) / .35), var(--amber)); border-radius: 1px; }
.fx .rail-dot { position: absolute; left: var(--rp); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--amber); box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .6); }
.fx .rail-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--amber-light); opacity: .9; }
.fx .rail-still .rail-steps li.on .num, .fx .rail-still .rail-steps li.past .num { color: rgb(var(--amber-rgb) / .4); text-shadow: none; }
.fx .rail-still .rail-steps li.on h3 { color: var(--ink-2); }
.fx .rail-still .rail-steps li::after { background: var(--glass); border-color: rgb(var(--amber-rgb) / .45); box-shadow: none; }
.fx .rail-still .rail-line::before, .fx .rail-still .rail-dot { display: none; }
@media (max-width: 1100px) {
  .fx .rail-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(14px, 1.6vw, 24px); }
  .fx .rail-steps p { max-width: none; }
  /* в два ряда рельс не проходит — остаются метки у шагов */
  .fx .rail-line { display: none; }
}
@media (max-width: 760px) {
  .fx .rail { --ry: 0px; padding-left: 0; }
  .fx .rail-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fx .rail-steps li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 18px; padding-left: 30px; }
  .fx .rail-steps .num { grid-row: 1 / 3; margin: 0; font-size: 30px; line-height: 1; }
  .fx .rail-steps li::after { left: 0; top: 10px; }
  .fx .rail-line { display: block; left: 4px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .fx .rail-line::before { width: 100%; height: var(--rp); background: linear-gradient(180deg, rgb(var(--amber-rgb) / .35), var(--amber)); }
  .fx .rail-dot { left: 50%; top: var(--rp); }
  .fx .rail-still .rail-line::before, .fx .rail-still .rail-dot { display: none; }
}

/* ---------- ступица «Какую работу можно снять с команды» (2026-10-20, по слову владельца) ----------
   Лист стекла разрезан: первая часть — путь документа, вторая — всё остальное; между ними раздел
   .pane.hub со своей заливкой, в которой круглое «протёртое» место (--hx, --hy, --hr ставит js/hub.js):
   белая заливка сходит к центру до пятой части, матовость и гравировка — в шейдерах (gl.js, map.js) —
   так же плавно. В него перелетает сущность. Вокруг кольцо, на нём шесть точек, у пяти — карточки
   модулей, у нижней — «Нет вашей задачи?» с кнопкой; пунктирные спицы от окна к точкам.
   Окно — насколько позволяют карточки: радиус 14vw (140–230 px). ≤ 1000px — окно сверху, карточки столбиком. */
.fx .sheet.sheet-2 { border-radius: 0; box-shadow: none; }
.fx .pane.hub {
  --hx: -9999px; --hy: -9999px; --hr: 0px;
  --wr: clamp(140px, 14vw, 230px);           /* радиус окна */
  --rr: calc(var(--wr) + 52px);              /* радиус кольца */
  --cw: clamp(196px, 15vw, 236px);           /* ширина карточки */
  isolation: isolate; contain: paint; padding-top: 0; padding-bottom: 0; /* отступы — у соседних разделов листа */
  background:
    radial-gradient(circle at var(--hx) var(--hy), transparent calc(var(--hr) * .5), rgb(var(--c1) / var(--glass-tint)) var(--hr)),
    radial-gradient(circle at var(--hx) var(--hy), rgba(246, 248, 251, .14) calc(var(--hr) * .45), var(--glass) var(--hr));
}
.fx body.nogl .pane.hub { background: radial-gradient(circle at var(--hx) var(--hy), rgba(246, 248, 251, .2) calc(var(--hr) * .45), rgba(246, 248, 251, .9) var(--hr)); }
.fx .pane.hub .sub-head { margin-top: 0; }
.fx .hub-wrap { position: relative; height: calc(var(--rr) * 2 + 400px); margin-top: clamp(10px, 2vh, 24px); }
.fx .hub-window, .fx .hub-ring { display: block; position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.fx .hub-window { width: calc(var(--wr) * 2); height: calc(var(--wr) * 2); margin: calc(var(--wr) * -1) 0 0 calc(var(--wr) * -1); }
.fx .hub-ring { width: calc(var(--rr) * 2); height: calc(var(--rr) * 2); margin: calc(var(--rr) * -1) 0 0 calc(var(--rr) * -1); border: 1px solid rgb(var(--amber-rgb) / .35); }
/* подпись окна: ярлык у нижней кромки, внутри круга */
.fx .hub-cap { position: absolute; left: 50%; top: calc(50% + var(--wr) - 44px); transform: translateX(-50%); z-index: 1; margin: 0; padding: 8px 14px; width: max-content; max-width: calc(var(--wr) * 2 - 36px); text-align: center; font: 400 12.5px/1.3 var(--f-text); color: var(--ink); background: rgba(246, 248, 251, .9); border: 1px solid rgba(255, 255, 255, .6); border-radius: 14px; box-shadow: var(--hi), var(--shadow); }
.fx .hub-cap strong { display: block; margin-bottom: 3px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); }
/* модули: точка на кольце, спица от окна к точке, карточка рядом */
.fx .hub-list { list-style: none; margin: 0; padding: 0; }
.fx .hub-item { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.fx .hub-item p { position: absolute; width: var(--cw); margin: 0; padding: 16px 18px 17px; pointer-events: auto; font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--glass-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--hi), var(--shadow); transition: border-color .25s, box-shadow .25s; }
.fx .hub-item p strong { display: block; margin-bottom: 6px; font: 600 clamp(16px, 1.25vw, 18px)/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.fx .hub-item:hover p, .fx .hub-item:focus-within p { border-color: rgb(var(--amber-rgb) / .6); box-shadow: var(--hi), var(--shadow), 0 0 0 3px rgb(var(--amber-rgb) / .12); }
.fx .hub-dot, .fx .hub-item::before { display: block; position: absolute; pointer-events: none; }
/* точка и спица считаются от центра обёртки: сдвиг точки задаёт --dx/--dy (доли радиуса кольца), спица — угол --ang */
.fx .hub-dot { left: calc(50% + var(--rr) * var(--dx)); top: calc(50% + var(--rr) * var(--dy)); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--glass); border: 2px solid rgb(var(--amber-rgb) / .7); box-sizing: border-box; transition: background .25s, box-shadow .25s, transform .25s; }
.fx .hub-item::before { content: ""; left: 50%; top: 50%; width: calc(var(--rr) - var(--wr)); height: 0; border-top: 1px dashed rgb(var(--amber-rgb) / .45); transform-origin: 0 50%; transform: rotate(var(--ang)) translateX(var(--wr)); }
.fx .hub-item:hover .hub-dot, .fx .hub-item:focus-within .hub-dot { background: var(--amber); border-color: var(--amber); transform: scale(1.5); box-shadow: 0 0 0 5px rgb(var(--amber-rgb) / .18), var(--glow); }
.fx .hub-item:hover::before, .fx .hub-item:focus-within::before { border-top-style: solid; border-top-color: var(--amber); }
/* шесть мест на кольце (сверху, по часовой): точка, спица и карточка */
.fx .hub-item.h1 { --dx: 0; --dy: -1; --ang: -90deg; }
.fx .hub-item.h2 { --dx: .866; --dy: -.5; --ang: -30deg; }
.fx .hub-item.h3 { --dx: .866; --dy: .5; --ang: 30deg; }
.fx .hub-item.h4 { --dx: 0; --dy: 1; --ang: 90deg; }
.fx .hub-item.h5 { --dx: -.866; --dy: .5; --ang: 150deg; }
.fx .hub-item.h6 { --dx: -.866; --dy: -.5; --ang: 210deg; }
.fx .hub-item.h1 p, .fx .hub-item.h4 p { width: clamp(260px, 22vw, 320px); }
.fx .hub-item.h1 p { left: 50%; bottom: calc(50% + var(--rr) + 16px); transform: translateX(-50%); text-align: center; }
.fx .hub-item.h4 p { left: 50%; top: calc(50% + var(--rr) + 16px); transform: translateX(-50%); text-align: center; }
.fx .hub-item.h2 p, .fx .hub-item.h3 p { left: calc(50% + var(--rr) * .866 + 16px); transform: translateY(-50%); }
.fx .hub-item.h5 p, .fx .hub-item.h6 p { right: calc(50% + var(--rr) * .866 + 16px); transform: translateY(-50%); }
.fx .hub-item.h2 p, .fx .hub-item.h6 p { top: calc(50% - var(--rr) * .5); }
.fx .hub-item.h3 p, .fx .hub-item.h5 p { top: calc(50% + var(--rr) * .5); }
/* своя задача: строго внизу, строка и кнопка по центру */
.fx .hub-ask .btn { display: inline-block; margin-top: 12px; }
@media (max-width: 1000px) {
  .fx .pane.hub { --wr: clamp(110px, 42vw, 180px); }
  .fx .hub-wrap { height: auto; padding-top: calc(var(--wr) * 2 + 30px); }
  .fx .hub-ring, .fx .hub-item::before { display: none; }
  .fx .hub-window { top: var(--wr); }
  .fx .hub-cap { top: calc(var(--wr) * 2 - 44px); }
  .fx .hub-list { position: relative; padding-left: 30px; margin-top: 28px; }
  .fx .hub-list::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; border-left: 1px dashed rgb(var(--amber-rgb) / .45); }
  .fx .hub-item { position: relative; inset: auto; margin: 0 0 16px; pointer-events: auto; }
  /* .hub-list в селекторе — чтобы перебить сдвиги и ширины ПК у .hub-item.hN p (S-12: на телефоне карточки уезжали влево) */
  .fx .hub-list .hub-item p { position: static; width: auto; transform: none; text-align: left; }
  .fx .hub-dot { left: -30px; top: 20px; margin: 0; }
}

/* ==========================================================
   Аудит сайта (2026-10-30): переносы, шапка телефона, первый экран телефона, «С чего начать»,
   заявка, места под доказательства, подвал
   ========================================================== */
/* переносы: русские слова переносятся по слогам (lang="ru" у <html>), а слово, которое всё равно не
   влезает, ломается внутри себя и не вылезает из карточки. Крупные заголовки (h1, h2) по слогам не
   переносятся — только запасной разрыв */
body { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h1, h2, .offer-title, .lead-title, .btn, .site-nav, .ticker, .kicker, .card-no { hyphens: manual; -webkit-hyphens: manual; }
.fx .rail-steps h3 { overflow-wrap: break-word; }
/* шаги пути документа: шесть колонок узкие — заголовок шага чуть мельче, чтобы «Обезличивание» встало целиком */
.fx .rail-steps h3 { font-size: clamp(13px, 1.02vw, 15px); }
.fx .rail-steps { column-gap: clamp(12px, 1.4vw, 22px); }
/* карточки ступицы: «конспектировать» не влезал в карточку — заголовок мельче, карточка чуть шире */
.fx .pane.hub { --cw: clamp(206px, 16vw, 248px); }
.fx .hub-item p strong { font-size: clamp(15px, 1.15vw, 17px); }

/* базовая (простая) версия: окно заявки видно, только если в нём есть доказательство */
.window:has(.window-proof) { display: block; }

/* ---------- первый экран: строка-доказательство под подзаголовком (блок hero.proof) ----------
   как «факты» брендбука: JetBrains Mono 13 px, стрелка янтарём; на тёмной сцене — светлый текст */
.offer-proof { margin: 0 0 14px; font-size: 15px; }
.fx .offer-proof { margin: -6px 0 20px; max-width: 32em; font: 400 13px/1.45 var(--f-mono); color: var(--on-dark); text-shadow: 0 0 12px rgb(var(--bg) / .9); }
.fx .offer-proof::before { content: "→ "; color: var(--amber); }
.fx .offer-proof strong, .fx .offer-proof b { color: var(--amber); font-weight: 600; }
.fx .stage.offer-below .offer-proof { margin-inline: auto; }

/* ---------- заявка: заголовок на всю ширину над карточкой и окном ---------- */
.fx .contact-head { grid-column: 1 / -1; margin-bottom: 0; }
.fx .contact-head h2 { max-width: 20em; }
/* доказательство в окне (блок contact.proof): плашка тёмного стекла у нижнего края окна */
.fx .window { position: relative; }
.fx .window-proof {
  position: absolute; left: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); margin: 0;
  padding: 16px 18px; font: 400 15px/1.5 var(--f-text); color: var(--on-dark);
  background: var(--glass-dark); border: 1px solid var(--line-dark); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-dark);
}
.fx .window-proof a { color: var(--amber-hi); }
.fx .window-proof strong, .fx .window-proof b { color: var(--amber-hi); font-weight: 600; }

/* ---------- подвал: вторая строка — политика, почта, канал, реквизиты ---------- */
.foot { flex-wrap: wrap; gap: 8px 18px; }
.foot-meta { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fx .foot { row-gap: 12px; }
.fx .foot-meta { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--line); line-height: 1.4; color: var(--ink-2); }
.fx .foot-legal { color: var(--ink-2); }

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  /* «С чего начать»: карточки на всю ширину (было 78 % ширины, справа пусто) */
  .fx .where-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fx .where-list .card { width: auto; max-width: none; }

  /* шапка — два ряда вместо трёх (было ~145 px из 844): первый — логотип, карта страницы, «Обсудить»;
     второй, тонкий, — разделы сайта и «Отключить анимацию». Бегущая строка в шапке телефона не
     показывается: она есть на первом экране, а в шапке отнимала ряд. Стекло плотнее: текст листа
     под шапкой не просвечивает */
  .fx { scroll-padding-top: 92px; }
  .fx .top {
    gap: 0 8px; padding: 6px 12px 0;
    background: rgba(246, 248, 251, .96);
    -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  }
  /* разрыв ряда и тонкая линия между рядами на всю ширину шапки */
  .fx .top::before { content: ""; order: 4; flex: 0 0 calc(100% + 24px); height: 1px; margin: 0 -12px; background: var(--line); }
  .fx .top-actions { display: contents; }
  .fx .top .logo { order: 1; height: 40px; }
  .fx .guide-btn { order: 2; flex: 1 1 0; min-width: 0; max-width: max-content; height: 32px; margin: 0; }
  .fx .top .btn-cta { order: 3; margin-left: auto; }
  .fx .top-nav { order: 5; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border-top: 0; overflow-x: auto; scrollbar-width: none; }
  .fx .top-nav::-webkit-scrollbar { display: none; }
  .fx .top .plain-toggle { order: 6; flex: none; align-self: center; min-height: 26px; padding: 5px 9px; font-size: 9.5px; letter-spacing: .02em; }
  .fx .top .ticker { display: none; }
  .fx.inner .glass { margin-top: var(--top-h, 84px); }

  /* «Заявка»: окно, заголовок, карточка формы */
  .fx .contact-head { order: 0; }
  .fx .window-proof { font-size: 14px; padding: 14px 16px; }
}
@media (max-width: 430px) {
  /* узкий телефон: в кнопке карты страницы — только название раздела, без счёта «02 / 08» */
  .fx .guide-btn { padding: 0 10px 0 11px; gap: 6px; font-size: 10.5px; letter-spacing: .03em; }
  .fx .guide-btn .gb-n { display: none; }
  .fx .guide-btn .gb-t { letter-spacing: .01em; }
  .fx .top .btn-cta { padding: 10px 10px; font-size: 10px; }
}
@media (max-width: 400px) {
  .fx .top-nav a { padding: 0 6px; font-size: 10.5px; letter-spacing: .05em; }
}