/* fundament3 (09.09.2026): порядок блоков главной + навигация по разделам. Тексты не меняются.
   .fd-toc — скрытый список разделов (источник пунктов для пилюли).
   .fd-nav — плавающая «таблетка» внизу по центру: появляется после первого экрана, показывает текущий раздел,
   по нажатию раскрывает список разделов (на телефоне — шторка снизу). Замена липкой полосы по решению владельца. */

.fd-toc { display: none; }   /* список разделов служит источником для пилюли .fd-nav; на странице не показывается (владелец 09.09) */
.fd-toc__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 22px 0 24px; }
.fd-toc__label {
  flex: 0 0 auto;
  margin-right: 10px;
  font-family: 'FD-JB', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey);
}
.fd-toc__in a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(250, 251, 254, 0.1);
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-light);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.fd-toc__in a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-border); }
.fd-toc__in a:hover { color: var(--color-white); border-color: rgba(250, 251, 254, 0.25); }
.fd-toc__in a.fd-toc__cta { color: var(--color-accent); border-color: rgba(245, 192, 74, 0.45); }
.fd-toc__in a.fd-toc__cta::before { background-color: var(--color-accent); }

/* ── плавающая навигация ── */
.fd-nav {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 40;
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.fd-nav.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body.fd-assist-open .fd-nav { opacity: 0; pointer-events: none; }
.fd-nav__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(72vw, 420px);
  height: 46px;
  padding: 0 18px 0 16px;
  border: 1px solid rgba(250, 251, 254, 0.14);
  border-radius: 999px;
  background: rgba(15, 20, 31, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(4, 7, 14, 0.5);
  color: var(--color-white);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.fd-nav__btn:hover, .fd-nav.is-open .fd-nav__btn { border-color: rgba(250, 251, 254, 0.3); background: rgba(26, 34, 54, 0.92); }
.fd-nav__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fd-nav__icon { display: grid; gap: 3px; width: 14px; flex: 0 0 auto; }
.fd-nav__icon i { display: block; height: 1.5px; border-radius: 1px; background: var(--color-light); }
.fd-nav__icon i:nth-child(2) { width: 10px; }
.fd-nav__kicker { font-family: 'FD-JB', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-grey); }
.fd-nav__cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-nav__chev { flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px; border-right: 1.5px solid var(--color-grey); border-bottom: 1.5px solid var(--color-grey); transform: translateY(2px) rotate(-135deg); transition: transform 0.25s ease; }
.fd-nav.is-open .fd-nav__chev { transform: translateY(-2px) rotate(45deg); }
.fd-nav__list {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  min-width: 280px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid rgba(250, 251, 254, 0.12);
  border-radius: 16px;
  background: rgba(15, 20, 31, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(4, 7, 14, 0.55);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.fd-nav.is-open .fd-nav__list { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.22s ease, transform 0.22s ease; }
.fd-nav__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-light);
  text-decoration: none;
  white-space: nowrap;
}
.fd-nav__list a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-border); transition: background-color 0.2s ease, transform 0.2s ease; }
.fd-nav__list a:hover { background: rgba(250, 251, 254, 0.06); color: var(--color-white); }
.fd-nav__list a[aria-current="true"] { color: var(--color-white); }
.fd-nav__list a[aria-current="true"]::before { background: var(--color-accent); transform: scale(1.3); }
.fd-nav__list a.fd-nav__cta { margin-top: 4px; border-top: 1px solid rgba(250, 251, 254, 0.08); border-radius: 0 0 10px 10px; color: var(--color-accent); }
.fd-nav__list a.fd-nav__cta::before { background: var(--color-accent); }

/* якорные переходы: цель встаёт под шапкой (у сайта в style.css свой scroll-padding под старую шапку — здесь перекрывается) */
html { scroll-padding-top: calc(var(--fd-header-h, 64px) + 16px); }
section[id] { scroll-margin-top: 0; }

/* чередование фонов после перестановки (у секций свои фоны, здесь только точечные переопределения) */
section.fd-bg-dark { background-color: var(--color-dark); }
section.fd-bg-black { background-color: var(--color-black); }

@media (max-width: 700px) {
  .fd-toc__in { padding: 18px 0 20px; gap: 6px; }
  .fd-toc__label { flex-basis: 100%; margin: 0 0 4px; }
  .fd-toc__in a { font-size: 13px; padding: 7px 12px; }
  /* область между левым краем экрана и кружком (16px + 56px + 12px); пилюля по её центру, не на всю ширину */
  .fd-nav { left: 0; right: 84px; bottom: 18px; display: flex; justify-content: center; transform: translateY(24px); }
  .fd-nav.is-shown { transform: none; }
  .fd-nav__btn { width: max-content; max-width: calc(100% - 24px); height: 38px; padding: 0 12px 0 11px; gap: 8px; font-size: 13px; }
  .fd-nav__kicker { display: none; }
  .fd-nav__icon { width: 12px; }
  .fd-nav__cur { max-width: 60vw; }
  .fd-nav__list { left: 50%; right: auto; min-width: min(280px, calc(100vw - 100px)); transform: translate(-50%, 8px); }
  .fd-nav.is-open .fd-nav__list { transform: translate(-50%, 0); }
  html { scroll-padding-top: calc(var(--fd-header-h, 64px) + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .fd-nav, .fd-nav__list, .fd-nav__chev, .fd-toc__in a { transition: none; }
}