/* ═══════════════════════════════ INFO GUIDE ════════════════════════════════
   about / delivery / returns / warranty. Namespace `.ig-*` отдельный от
   04-pages/info.css — тот остаётся у privacy.html и how_to_order.html.
   Цвет по формуле 90/8/2: violet появляется один раз, в .ig-callout.
   ============================================================ */

.ig {
  --ig-rail: 1180px;
  /* общая ширина «оглавление + текст» */
  --ig-read: var(--container-read);
  /* рейл чтения проекта (00-settings/spacing.css), не свой отдельный */
  --ig-anchor-offset: 96px;
  /* высота липкой шапки + воздух, для scroll-margin */

  padding: 6.5rem 0 5rem;
  min-height: 70vh;
  min-height: 70dvh;
  position: relative;
}

/* Две световые массы, привязанные к прокрутке (scroll-timeline, без JS).
   Без поддержки таймлайна fill:both оставляет первый кадр — статичную вуаль */
.ig::before,
.ig::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.ig::before {
  width: 96vw;
  height: 96vw;
  max-width: 1400px;
  max-height: 1400px;
  top: -40vw;
  left: 50%;
  transform: translate(-50%, 0);
  background: radial-gradient(closest-side, var(--cyan-a10), transparent);
}

.ig::after {
  width: 88vw;
  height: 88vw;
  max-width: 1200px;
  max-height: 1200px;
  bottom: -34vw;
  left: 2%;
  opacity: .4;
  background: radial-gradient(closest-side, var(--violet-a16), transparent);
}


@keyframes igVeilCold {
  from { transform: translate(-50%, 0) scale(1); opacity: 1; }
  to   { transform: translate(-14%, 26vh) scale(1.22); opacity: .45; }
}

@keyframes igVeilWarm {
  from { transform: translate(0, 6vh) scale(.85); opacity: .3; }
  to   { transform: translate(46vw, -30vh) scale(1.25); opacity: .9; }
}

@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    .ig::before,
    .ig::after {
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    .ig::before { animation-name: igVeilCold; }
    .ig::after  { animation-name: igVeilWarm; }
  }
}

.ig-inner {
  max-width: var(--ig-rail);
  margin: 0 auto;
  padding: 0 var(--sp-3);
  position: relative;
  z-index: 1;
}

/* ── HERO ─────────────────────────────────────────────────────────────── */

.ig-hero {
  max-width: 34ch;
  /* заголовок держит короткую строку даже на широком экране */
  margin-bottom: var(--sp-6);
}

.ig-hero--wide {
  max-width: none;
}


.ig-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-200);
  margin: 0 0 var(--sp-2);
}

.ig-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--cyan-a40);
}

.ig-title {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--text-hi);
  margin: 0;
  text-wrap: balance;
}

.ig-lede {
  max-width: var(--ig-read);
  margin: var(--sp-3) 0 0;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.62;
  color: var(--text-soft);
  text-wrap: pretty;
}

.ig-lede strong {
  color: var(--text-hi);
  font-weight: 600;
}

/* Вопрос вместо описания: держится вплотную к имени бренда и звучит тише его */
.ig-lede--ask {
  margin-top: var(--sp-1);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--text-dim);
}

/* Быстрые факты под лидом — не «дашборд», а три-четыре опорные строки,
   которые отвечают на вопрос до чтения всей страницы. */
.ig-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.ig-quick li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .86rem;
  color: var(--text);
}

.ig-quick b {
  color: var(--text-hi);
  font-weight: 600;
}

.ig-quick .ic {
  width: 17px;
  height: 17px;
  color: var(--cyan);
  flex-shrink: 0;
  stroke-width: 1.7;
}

/* ── СЕТКА: ОГЛАВЛЕНИЕ ‖ ЧТЕНИЕ ──────────────────────────────────────── */

.ig-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

.ig-toc {
  position: sticky;
  top: calc(var(--nav-h-compact) + var(--sp-3));
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-2);
  border-left: 1px solid var(--line);
}

.ig-toc-title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--sp-2);
}

.ig-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ig-toc a {
  display: block;
  padding: 7px 0;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .18s var(--ease-standard, ease);
}

.ig-toc a:hover,
.ig-toc a:focus-visible {
  color: var(--text-hi);
}

/* Текущий раздел: метка на рейле оглавления, класс ставит info-guide.js */
.ig-toc a.is-current {
  position: relative;
  color: var(--text-hi);
  font-weight: 600;
}

.ig-toc a.is-current::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-2) * -1 - 1px);
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--cyan);
}

.ig-main {
  min-width: 0;
}

/* ── СЕКЦИЯ ───────────────────────────────────────────────────────────── */

/* Каждый раздел — своя панель со свечением; оттенок и его угол чередуются,
   поэтому при прокрутке подложка меняется, а не повторяется */
.ig-sec {
  --ig-tint: var(--cyan-a10);
  --ig-tint-at: 0% 0%;

  scroll-margin-top: var(--ig-anchor-offset);
  margin-bottom: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at var(--ig-tint-at), var(--ig-tint), transparent 58%),
    var(--glass);
}

.ig-sec:nth-of-type(4n + 2) {
  --ig-tint: var(--violet-a10);
  --ig-tint-at: 100% 0%;
}

.ig-sec:nth-of-type(4n + 3) {
  --ig-tint: var(--azure-200-a10);
  --ig-tint-at: 0% 100%;
}

.ig-sec:nth-of-type(4n + 4) {
  --ig-tint: var(--blue-a10);
  --ig-tint-at: 100% 100%;
}

.ig-sec-head {
  margin-bottom: var(--sp-4);
  text-align: center;
}

.ig-h2 {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text-hi);
  margin: 0;
  text-wrap: balance;
}

.ig-h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-hi);
  margin: 0 0 8px;
}

/* ── ТЕКСТ ────────────────────────────────────────────────────────────── */

.ig-p {
  max-width: var(--ig-read);
  margin: 0 0 var(--sp-2);
  font-size: .97rem;
  line-height: 1.75;
  color: var(--text-soft);
  text-wrap: pretty;
}

.ig-p:last-child {
  margin-bottom: 0;
}

.ig-p strong {
  color: var(--text-hi);
  font-weight: 600;
}

/* Ссылки без подчёркивания: различаются цветом, на наведении светлеют */
.ig-p a,
.ig-li a,
.ig-note a,
.ig-facts a,
.ig-col a {
  color: var(--cyan-200);
  text-decoration: none;
  transition: color .18s;
}

.ig-p a:hover,
.ig-li a:hover,
.ig-note a:hover,
.ig-facts a:hover,
.ig-col a:hover {
  color: var(--cyan-100);
}

/* Список с фирменным маркером вместо браузерного диска */
.ig-list {
  max-width: var(--ig-read);
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
}

.ig-list:last-child {
  margin-bottom: 0;
}

.ig-li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.ig-li:last-child {
  margin-bottom: 0;
}

.ig-li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--cyan-a40);
}

.ig-li strong {
  color: var(--text-hi);
  font-weight: 600;
}

/* Список «что покрывается / что не покрывается» — знак вместо маркера */
.ig-list--yes .ig-li::before,
.ig-list--no .ig-li::before {
  border: none;
  border-radius: 0;
  top: .52em;
  width: 11px;
  height: 11px;
  background: currentcolor;
  -webkit-mask: var(--ig-mark) center / contain no-repeat;
  mask: var(--ig-mark) center / contain no-repeat;
}

.ig-list--yes .ig-li::before {
  --ig-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color: var(--success);
}

.ig-list--no .ig-li::before {
  --ig-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  color: var(--steel);
}

/* ── КАРТОЧКИ ─────────────────────────────────────────────────────────── */

.ig-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--sp-2);
}

.ig-grid:last-child {
  margin-bottom: 0;
}

.ig-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Карточка лежит внутри подсвеченной секции — фон плотнее, иначе теряется */
.ig-card {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--bg-a55);
  transition: border-color .2s, background .2s;
}

.ig-card:hover {
  border-color: var(--cyan-a18);
  background: var(--glass-2);
}

.ig-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a25);
  color: var(--cyan);
  margin: 0 auto var(--sp-2);
}

.ig-card-icon .ic {
  width: 28px;
  height: 28px;
  stroke-width: 2.4;
}

.ig-card .ig-p,
.ig-card .ig-list {
  max-width: none;
}

.ig-card .ig-p {
  font-size: .92rem;
  line-height: 1.65;
}

/* ── ТАБЛИЦА ФАКТОВ (dl) ──────────────────────────────────────────────── */

.ig-facts {
  margin: 0 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.ig-facts:last-child {
  margin-bottom: 0;
}

.ig-facts-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.ig-facts-row:last-child {
  border-bottom: none;
}

.ig-facts dt {
  font-size: .82rem;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--text-dim);
  margin: 0;
}

.ig-facts dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text);
}

.ig-facts dd b {
  color: var(--text-hi);
  font-weight: 600;
}

.ig-facts dd .ig-sub {
  display: block;
  margin-top: 5px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ── СЦЕНАРИЙ (шаги) ──────────────────────────────────────────────────── */

.ig-steps {
  counter-reset: ig-step;
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.ig-steps:last-child {
  margin-bottom: 0;
}

.ig-step {
  counter-increment: ig-step;
  position: relative;
  padding: 0 0 var(--sp-4) calc(var(--sp-5) + 8px);
}

.ig-step:last-child {
  padding-bottom: 0;
}

/* Кружок с номером */
.ig-step::before {
  content: counter(ig-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--cyan-a25);
  background: var(--cyan-a10);
  color: var(--cyan-100);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
}

/* Соединительная линия между шагами */
.ig-step::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan-a25), var(--line));
}

.ig-step:last-child::after {
  display: none;
}

/* padding, а не margin: внешний отступ схлопывается с li и сбивает номер */
.ig-step-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-hi);
  margin: 0 0 10px;
  padding-top: 6px;
}

.ig-step .ig-p,
.ig-step .ig-list {
  max-width: none;
}

.ig-step .ig-p {
  font-size: .94rem;
}

/* ── ПРИМЕЧАНИЯ И ПРЕДУПРЕЖДЕНИЯ ─────────────────────────────────────── */

.ig-note {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  max-width: var(--ig-read);
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--pure-white-a03);
  font-size: .93rem;
  line-height: 1.65;
  color: var(--text-soft);
}

.ig-note:last-child {
  margin-bottom: 0;
}

/* Цвет несёт плитка иконки, а не полоса у края.
   Спрайт рисует контур мелко внутри viewBox 64 — отсюда малый padding и жирнее штрих */
.ig-note .ic {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 3px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--pure-white-a04);
  color: var(--text-dim);
  stroke-width: 2.4;
}

/* Ведущая мысль занимает свою строку, пояснение начинается со следующей */
.ig-note b {
  display: block;
  margin-bottom: 6px;
  color: var(--text-hi);
  font-weight: 600;
}

.ig-note p {
  margin: 0;
}

.ig-note p + p {
  margin-top: 8px;
}

.ig-note--info {
  border-color: var(--cyan-a18);
  background: var(--cyan-a04);
}

.ig-note--info .ic {
  border-color: var(--cyan-a25);
  background: var(--cyan-a10);
  color: var(--cyan);
}

.ig-note--warn {
  border-color: var(--warning-a25);
  background: var(--warning-a10);
}

.ig-note--warn .ic {
  border-color: var(--warning-a25);
  background: var(--warning-a10);
  color: var(--warning);
}

.ig-note--ok {
  border-color: var(--success-a22);
  background: var(--success-a10);
}

.ig-note--ok .ic {
  border-color: var(--success-a30);
  background: var(--success-a16);
  color: var(--success);
}

/* ── СРАВНИТЕЛЬНЫЕ КОЛОНКИ (возврат ‖ обмен ‖ брак) ──────────────────── */

.ig-compare {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: var(--sp-2);
}

.ig-compare:last-child {
  margin-bottom: 0;
}

.ig-col {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--glass);
}

.ig-col-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a25);
  color: var(--cyan-200);
}

.ig-col--alt .ig-col-tag {
  background: var(--blue-a10);
  border-color: var(--blue-a25);
  color: var(--blue-100);
}

.ig-col--hot .ig-col-tag {
  background: var(--warning-a10);
  border-color: var(--warning-a25);
  color: var(--warning);
}

.ig-col dl {
  margin: 0;
}

.ig-col dt {
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--text-faint);
  margin: 0 0 3px;
}

.ig-col dd {
  margin: 0 0 var(--sp-2);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.ig-col dd:last-child {
  margin-bottom: 0;
}

/* ── ДЕЙСТВИЕ ─────────────────────────────────────────────────────────── */

.ig-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  margin: var(--sp-4) 0;
}

.ig-actions:last-child {
  margin-bottom: 0;
}

.ig-actions + .ig-p {
  margin-top: 0;
}

.ig-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--h-btn-sm);
  padding: 0 20px;
  border-radius: var(--r-button);
  border: 1px solid var(--glass-line);
  background: var(--pure-white-a04);
  color: var(--text-hi);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}

.ig-btn:hover {
  background: var(--pure-white-a07);
  border-color: var(--pure-white-a20);
}

.ig-btn .ic {
  width: 16px;
  height: 16px;
  opacity: .8;
}

.ig-btn--primary {
  background: var(--grad-cta);
  border-color: transparent;
  color: var(--cta-ink);
  font-weight: 600;
  box-shadow: var(--shadow-cta);
}

.ig-btn--primary:hover {
  background: var(--cyan-200);
  box-shadow: var(--shadow-cta-hover);
}

.ig-btn--primary .ic {
  opacity: 1;
}

/* ── КАРТА НАПРАВЛЕНИЙ ────────────────────────────────────────────────── */
/* Светится только работающий узел; остальные обозначены и приглушены */

.ig-map {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: var(--ig-read);
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background:
    radial-gradient(60% 60% at 47% 47%, var(--cyan-a06), transparent 70%),
    var(--bg-a55);
}

/* Дальний план: три световых пятна, которые медленно расходятся и сходятся.
   Растянуты за края панели, чтобы при дрейфе не показывался их собственный край */
.ig-map::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36% 42% at 34% 36%, var(--cyan-a08), transparent 66%),
    radial-gradient(42% 38% at 68% 68%, var(--pure-white-a04), transparent 70%),
    radial-gradient(30% 34% at 58% 22%, var(--cyan-a05), transparent 72%);
}

/* Виньетка: пыль и связи растворяются у краёв, а не упираются в рамку */
.ig-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(74% 74% at 50% 47%, transparent 52%, var(--bg-a60) 100%);
}

.ig-map-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Пыль дальнего плана: живёт отдельно от карты и ни на что не указывает */
.ig-map-dust circle {
  fill: var(--pure-white-a80);
  opacity: .16;
}

.ig-map-dust circle:nth-child(3n+1) {
  fill: var(--cyan-200);
}

.ig-map-lines path {
  fill: none;
  stroke: var(--pure-white-a12);
  stroke-width: 1;
}

/* Комета: шлейф и искра делят одну голову. Штрих рисуется ВПЕРЁД от смещения,
   поэтому у шлейфа dashoffset больше ровно на разницу длин (26-11=15) -
   тогда головы совпадают, а хвост тянется назад, а не забегает вперёд */
.ig-map-trails path,
.ig-map-pulses path {
  fill: none;
  stroke: var(--cyan);
  stroke-linecap: round;
  opacity: 0;
}

.ig-map-trails path {
  stroke-width: 7;
  stroke-dasharray: 26 100;
  stroke-dashoffset: 26;
}

/* pathLength=100 нормирует длину пути, поэтому короткие и длинные связи
   гаснут в одной и той же точке своего маршрута, а не по общему таймеру */
.ig-map-pulses path {
  stroke-width: 1.5;
  stroke-dasharray: 11 100;
  stroke-dashoffset: 11;
}

/* Узлы вне фокуса: видно, что там что-то есть, но не разглядеть.
   Дальние размыты сильнее ближних - этим и читается расстояние */
.ig-map-nodes-glow circle {
  fill: var(--pure-white-a18);
  filter: blur(6px);
}

.ig-map-nodes circle {
  fill: var(--pure-white-a38);
  filter: blur(2.4px);
}

.ig-map-nodes circle:nth-child(2) { filter: blur(1.7px); }
.ig-map-nodes circle:nth-child(6) { filter: blur(2.1px); }
.ig-map-nodes circle:nth-child(4) { filter: blur(3.1px); }

/* Гало ядра на градиенте: у плоской заливки виден резкий край */
.ig-map-glow-in  { stop-color: var(--cyan); stop-opacity: .40; }
.ig-map-glow-mid { stop-color: var(--cyan); stop-opacity: .12; }
.ig-map-glow-out { stop-color: var(--cyan); stop-opacity: 0; }

.ig-map-halo {
  fill: url(#igMapGlow);
}

.ig-map-halo--wide {
  opacity: .38;
}

/* Кольцо уходит от ядра наружу и растворяется: то же движение, что у импульсов,
   но по всем направлениям сразу */
.ig-map-ring {
  fill: none;
  stroke: var(--cyan-a30);
  stroke-width: 1;
  transform-origin: 320px 178px;
  opacity: 0;
}

.ig-map-dot {
  fill: var(--cyan);
}

@media (prefers-reduced-motion: no-preference) {
  .ig-map::before {
    animation: igMapDrift 52s ease-in-out infinite alternate;
  }

  .ig-map-dust {
    animation: igDustDrift 64s ease-in-out infinite alternate;
  }

  .ig-map-dust circle {
    animation: igDustFlicker 6s ease-in-out infinite;
  }

  .ig-map-dust circle:nth-child(4n+1) { animation-duration: 5.2s; animation-delay: .4s; }
  .ig-map-dust circle:nth-child(4n+2) { animation-duration: 7.1s; animation-delay: 1.9s; }
  .ig-map-dust circle:nth-child(4n+3) { animation-duration: 8.4s; animation-delay: 3.2s; }
  .ig-map-dust circle:nth-child(4n+4) { animation-duration: 6.3s; animation-delay: 2.5s; }

  .ig-map-halo {
    animation: igCorePulse 3.4s var(--ease-gentle, ease-in-out) infinite;
    transform-origin: 320px 178px;
  }

  .ig-map-halo--wide {
    animation: igCoreHaloWide 7.2s var(--ease-gentle, ease-in-out) infinite;
  }

  .ig-map-ring {
    animation: igCoreRing 7s ease-out infinite;
  }

  .ig-map-ring--late {
    animation-delay: 3.5s;
  }

  .ig-map-trails path {
    animation: igMapTrail 5.4s var(--ease-gentle, ease-in-out) infinite;
  }

  .ig-map-pulses path {
    animation: igMapPulse 5.4s var(--ease-gentle, ease-in-out) infinite;
  }

  /* Разные периоды и сдвиги: одинаковый ритм читался бы как машинный.
     Шлейф и искра одной ветки идут по общему таймингу */
  .ig-map-trails path:nth-child(1),
  .ig-map-pulses path:nth-child(1) { animation-duration: 5.4s; animation-delay: 0s; }
  .ig-map-trails path:nth-child(2),
  .ig-map-pulses path:nth-child(2) { animation-duration: 4.6s; animation-delay: 1.7s; }
  .ig-map-trails path:nth-child(3),
  .ig-map-pulses path:nth-child(3) { animation-duration: 6.1s; animation-delay: .8s; }
  .ig-map-trails path:nth-child(4),
  .ig-map-pulses path:nth-child(4) { animation-duration: 5.9s; animation-delay: 2.6s; }
  .ig-map-trails path:nth-child(5),
  .ig-map-pulses path:nth-child(5) { animation-duration: 4.9s; animation-delay: 3.4s; }
  .ig-map-trails path:nth-child(6),
  .ig-map-pulses path:nth-child(6) { animation-duration: 6.4s; animation-delay: 1.2s; }
}

@keyframes igMapDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}

@keyframes igDustDrift {
  from { transform: translate(-5px, 3px); }
  to   { transform: translate(6px, -4px); }
}

@keyframes igDustFlicker {
  0%, 100% { opacity: .09; }
  50%      { opacity: .32; }
}

@keyframes igCorePulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.18); opacity: .45; }
}

@keyframes igCoreHaloWide {
  0%, 100% { transform: scale(1);    opacity: .34; }
  50%      { transform: scale(1.16); opacity: .14; }
}

@keyframes igCoreRing {
  0%   { transform: scale(.4);  opacity: 0; }
  14%  { opacity: .5; }
  100% { transform: scale(3.2); opacity: 0; }
}

@keyframes igMapTrail {
  0%   { stroke-dashoffset: 26;  opacity: 0; }
  12%  { opacity: .16; }
  55%  { opacity: .1; }
  78%  { opacity: 0; }
  100% { stroke-dashoffset: -85; opacity: 0; }
}

@keyframes igMapPulse {
  0%   { stroke-dashoffset: 11;   opacity: 0; }
  10%  { opacity: .85; }
  55%  { opacity: .5; }
  78%  { opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}


@media (max-width: 620px) {
  .ig-map {
    padding: var(--sp-2);
  }

  /* На узком экране пыли вдвое меньше: сцена та же, анимируемых элементов меньше */
  .ig-map-dust circle:nth-child(2n) {
    display: none;
  }
}

/* ── ФИНАЛЬНЫЙ АКЦЕНТ ────────────────────────────────────────────────── */
/* Единственное место на странице, где появляется горячий акцент (violet) —
   те самые 2% из формулы 90/8/2. */

.ig-callout {
  position: relative;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--violet-a25);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--violet-a10), transparent 58%),
    var(--glass);
  overflow: hidden;
}

.ig-callout .ig-p {
  max-width: var(--ig-read);
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--text);
}

.ig-callout .ig-h2 {
  margin-bottom: var(--sp-3);
  text-align: center;
}

.ig-signrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--pure-white-a06);
}

.ig-sign {
  margin: 0;
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--text-dim);
}

.ig-sign b {
  color: var(--text-soft);
  font-weight: 600;
}

/* Отметка утверждения: типографская печать, без имитации подписи */
.ig-seal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--violet-a25);
  border-radius: var(--r-md);
  background: var(--violet-a06);
}

.ig-seal .ic {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 2px;
  flex-shrink: 0;
  border: 1px solid var(--violet-a25);
  border-radius: 50%;
  color: var(--violet-200);
  stroke-width: 2.4;
}

.ig-seal-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ig-seal-label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet-200);
}

.ig-seal-who {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-hi);
}

@media (max-width: 520px) {
  .ig-signrow {
    justify-content: flex-start;
  }
}

/* ── КОНТАКТЫ ─────────────────────────────────────────────────────────── */

.ig-contacts {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
}

.ig-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--bg-a55);
}

.ig-contact .ic {
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 8px;
  flex-shrink: 0;
  border: 1px solid var(--cyan-a25);
  border-radius: var(--r-sm);
  background: var(--cyan-a10);
  color: var(--cyan);
  stroke-width: 1.7;
}

.ig-contact-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ig-contact-value {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-hi);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ig-contacts-lede {
  margin-bottom: var(--sp-3);
}

a.ig-contact-value:hover {
  color: var(--cyan-100);
}

.ig-contact-note {
  display: block;
  margin-top: 4px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ── МЕЛОЧИ ───────────────────────────────────────────────────────────── */

.ig-meta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.ig-meta a {
  color: var(--cyan-200);
  text-decoration: none;
}

.ig-meta a:hover {
  color: var(--text-soft);
}

/* Ссылки-переходы между четырьмя страницами — общий подвал системы */
.ig-siblings {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: var(--sp-4);
}

.ig-sibling {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--glass);
  text-decoration: none;
  transition: border-color .2s, background .2s;
}

.ig-sibling:hover {
  border-color: var(--cyan-a18);
  background: var(--glass-2);
}

.ig-sibling-title {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 4px;
}

.ig-sibling-text {
  display: block;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ── АДАПТИВНОСТЬ ─────────────────────────────────────────────────────── */

/* Оглавление уезжает над текстом: на планшете липкая колонка съедает
   слишком много ширины, а колонка чтения становится уже комфортной. */
@media (max-width: 1080px) {
  .ig-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .ig-toc {
    position: static;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--glass);
  }

  .ig-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 var(--sp-3);
  }

  /* Карточное оглавление — основная навигация, нужна полная тап-зона */
  .ig-toc a {
    align-items: center;
    min-height: var(--tap-min);
    padding: 6px 0;
  }

  /* Рейла нет — метка текущего раздела становится точкой внутри карточки */
  .ig-toc a.is-current::before {
    left: -12px;
    top: 50%;
    bottom: auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translateY(-50%);
  }

  .ig-toc a::before {
    padding-top: 0;
  }
}

@media (max-width: 760px) {
  .ig {
    padding: 5.5rem 0 4rem;
  }

  .ig-hero {
    max-width: none;
  }

  .ig-inner {
    padding: 0 var(--sp-2);
  }

  .ig-sec {
    padding: var(--sp-3);
    border-radius: var(--r-panel);
  }

  .ig-facts-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    padding: var(--sp-2);
  }

  .ig-card {
    padding: var(--sp-2);
  }

  .ig-callout {
    padding: var(--sp-3);
  }

  .ig-step {
    padding-left: calc(var(--sp-4) + 10px);
  }

  .ig-step::before {
    width: 30px;
    height: 30px;
    font-size: .75rem;
  }

  .ig-step::after {
    left: 15px;
    top: 36px;
  }

  /* На тач-экране кнопка обязана держать полную тап-зону */
  .ig-btn {
    min-height: var(--tap-min);
  }
}

@media (max-width: 420px) {
  .ig-quick {
    flex-direction: column;
    align-items: stretch;
  }

  .ig-quick li {
    justify-content: flex-start;
  }

  .ig-actions .ig-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Печать: страница остаётся документом — без вуали, стекла и липкой колонки */
@media print {
  .ig::before,
  .ig-toc,
  .ig-actions,
  .ig-siblings {
    display: none;
  }

  .ig-body {
    grid-template-columns: minmax(0, 1fr);
  }
}