/* Общие стили сайта. Вёрстка плотная: мелкие отступы, узкие блоки, без «воздуха»
   ради красоты. Крупной остаётся только высота касания у ссылок и кнопок (44px),
   иначе на телефоне мимо них промахиваются.

   Оформление повторяет методические PDF владельца, чтобы сайт и материалы
   читались как одно целое: фиолетовая шапка с золотой чертой, фиолетовые
   заголовки с золотым подчёркиванием, номера в кружках, тёмные панели,
   лавандовые подложки. */
:root {
  --ink: #241a3d;
  --muted: #6b6180;
  --line: #e3dcee;
  --bg: #fdf9f4;
  --card: #fff;
  --accent: #5b3e8e;
  --accent-dark: #47306f;
  --deep: #2f2050;
  --gold: #c9a24b;
  --accent-soft: #f2ecf8;
  --max: 880px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* ── шапка: фиолетовая полоса с золотой чертой снизу, как верх страницы в методичках ── */
header.top {
  background: var(--accent); border-bottom: 3px solid var(--gold);
  position: sticky; top: 0; z-index: 20;
}
/* Мелкий узор поверх цвета шапки — тот же мотив, что на «VIP», но вчетверо
   мельче и без чёрной подложки: лежит прозрачным слоем прямо на цвете, у
   каждой страницы он свой (зелёный, гранат, тёмно-фиолетовый, чёрный).
   Рисунок задан здесь же, картинку грузить не нужно. */
header.top::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .17;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M60 16c0 14-14 18-14 30 0 10 14 12 14 24 0-12 14-14 14-24 0-12-14-16-14-30z'/%3E%3Cpath d='M60 31c0 8-7 10-7 15s7 7 7 13c0-6 7-8 7-13s-7-7-7-15z'/%3E%3Cpath d='M46 46c-12-4-22 4-20 14 1 7 10 9 14 3'/%3E%3Cpath d='M74 46c12-4 22 4 20 14-1 7-10 9-14 3'/%3E%3Cpath d='M60 84c-7 7-17 5-21 12'/%3E%3Cpath d='M60 84c7 7 17 5 21 12'/%3E%3Cpath d='M60 100c0 5-4 7-4 11 0 3 4 4 4 8 0-4 4-5 4-8 0-4-4-6-4-11z'/%3E%3Cpath d='M0 60c6 0 9-4 9-9 0 5 3 9 9 9-6 0-9 4-9 9 0-5-3-9-9-9z'/%3E%3Cpath d='M120 60c-6 0-9-4-9-9 0 5-3 9-9 9 6 0 9 4 9 9 0-5 3-9 9-9z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M60 16c0 14-14 18-14 30 0 10 14 12 14 24 0-12 14-14 14-24 0-12-14-16-14-30z'/%3E%3Cpath d='M60 31c0 8-7 10-7 15s7 7 7 13c0-6 7-8 7-13s-7-7-7-15z'/%3E%3Cpath d='M46 46c-12-4-22 4-20 14 1 7 10 9 14 3'/%3E%3Cpath d='M74 46c12-4 22 4 20 14-1 7-10 9-14 3'/%3E%3Cpath d='M60 84c-7 7-17 5-21 12'/%3E%3Cpath d='M60 84c7 7 17 5 21 12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
}
/* Содержимое шапки — поверх узора. */
.top .wrap { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.brand {
  font-weight: 800; font-size: 16px; text-decoration: none; color: #fff;
  display: flex; align-items: center; min-height: 44px; white-space: nowrap;
  letter-spacing: .06em;
  /* flex схлопывает пробел между текстом и <span>, без gap слова слипаются */
  gap: .34em;
}
.brand span { color: var(--gold); }
nav.main { margin-left: auto; display: flex; gap: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
nav.main::-webkit-scrollbar { display: none; }
nav.main a {
  color: #ddd0ef; text-decoration: none; font-size: 14.5px; white-space: nowrap;
  display: flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent;
}
nav.main a:hover { color: #fff; }
nav.main a[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: var(--gold); }
@media (max-width: 700px) {
  .top .wrap { flex-direction: column; align-items: stretch; gap: 0; }
  /* На телефоне меню переносится на вторую строку. Было горизонтальной
     прокруткой со скрытым ползунком: два последних пункта — «Запросы»
     и «Диагностика» — уезжали за край, и человек их не видел. */
  nav.main { margin-left: 0; gap: 8px 16px; flex-wrap: wrap; overflow-x: visible; border-top: 1px solid rgba(255,255,255,.18); padding-bottom: 4px; }
  nav.main a { min-height: 38px; }
  /* Три слова в одну строку на телефон не влезают в прежнем кегле. */
  .brand { font-size: 14px; letter-spacing: .03em; gap: .3em; }
}
@media (max-width: 380px) { .brand { font-size: 12.5px; letter-spacing: .02em; } }

/* ── содержимое ── */
main { padding: 18px 0 28px; }

/* Надзаголовок: мелкие разрядистые прописные над h1 — прямая цитата из методичек. */
.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 6px;
}
h1 { font-size: 25px; line-height: 1.2; margin: 0 0 6px; color: var(--accent); }
.sub { color: var(--muted); font-size: 15px; margin: 0 0 14px; }

/* Заголовок блока: фиолетовый текст и короткая золотая черта под ним. */
h2 {
  font-size: 16.5px; line-height: 1.3; margin: 0 0 8px; color: var(--accent);
  display: flex; align-items: center; gap: 9px; padding-bottom: 7px;
  border-bottom: 2px solid var(--gold); border-image: linear-gradient(90deg, var(--gold) 52px, var(--line) 52px) 1;
}
p { margin: 0 0 8px; max-width: 72ch; }

/* Блок страницы. Компактная карточка со светлой фиолетовой рамкой. */
.blk {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; margin: 0 0 9px;
}
/* Номер блока — кружок, как нумерация вопросов в методичках. */
.blk .num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0;
}
/* Внутри блока строка идёт во всю ширину: узкая колонка съедала половину
   карточки и оставляла пустое поле справа. */
.blk p, .blk .hint, .blk li, .panel p, .panel .hint, .panel li { max-width: none; }
.blk .hint { color: var(--muted); font-size: 14px; margin: 2px 0 0; }

/* Сертификат в углу блока «что остаётся на руках». Рисунок декоративный,
   поэтому текст блока просто отступает от него справа. */
.blk.with-cert { position: relative; }
.cert {
  position: absolute; right: 18px; bottom: 14px; width: 128px; height: auto;
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 760px) { .blk.with-cert p { padding-right: 160px; } }
@media (max-width: 759px) {
  .cert { position: static; display: block; width: 118px; margin: 12px auto 2px; }
}

/* Тёмная панель — для главного по деньгам. В методичках так выделен разворот
   «три акта»: тёмно-фиолетовый фон, золотые кружки, светлый текст. */
.panel { background: var(--deep); border-radius: 10px; padding: 14px 16px; margin: 0 0 9px; color: #efe9fa; }
.panel h2 { color: #fff; border-image: linear-gradient(90deg, var(--gold) 52px, rgba(255,255,255,.18) 52px) 1; }
.panel .num { background: var(--gold); color: var(--deep); }
.panel .hint { color: #c5b9df; }
.panel b { color: #fff; }
.panel .btn { background: var(--gold); color: var(--deep); }
.panel .btn:hover { background: #d9b45f; }

/* Списки внутри блоков. Отступ слева небольшой, между пунктами минимальный:
   перечни здесь длинные, обычные списочные отступы растянули бы страницу вдвое. */
.lst { margin: 6px 0 0; padding-left: 20px; }
.lst li { margin: 0 0 5px; }
.lst li:last-child { margin-bottom: 0; }
.lst li::marker { color: var(--gold); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px; border-radius: 8px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 15.5px; font-weight: 600; border: 0; cursor: pointer;
}
.btn:hover { background: var(--accent-dark); }
/* Капсула и контурная капсула — общие для всех страниц. */
.btn.pill { border-radius: 999px; padding: 12px 28px; font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.btn.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn.ghost:hover { background: var(--accent); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 0; }

/* Лавандовая подложка с разрядистой меткой — «заметка практику» из методичек. */
.note {
  background: var(--accent-soft); border: 1px solid #ddd0ef; border-radius: 10px;
  padding: 11px 13px; margin: 0 0 12px; color: #4b3a6b; font-size: 14px;
}
.note b {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 3px;
}

/* Подвал: поверх цвета — мелкий повторяющийся узор владельца (генограмма).
   Картинка лежит у него на Диске: скачать её в репозиторий из рабочей среды
   нельзя, googleusercontent закрыт сетевой политикой. soft-light оставляет от
   снимка только рисунок — цвет подвала остаётся наш. isolation держит наложение
   внутри подвала, чтобы оно не цепляло страницу под ним. */
footer.bottom {
  position: relative; isolation: isolate; overflow: hidden;
  border-top: 3px solid var(--gold); background: var(--accent); color: #d8cbef;
  padding: 11px 0 13px; margin-top: 22px; font-size: 13px;
}
footer.bottom::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("https://lh3.googleusercontent.com/d/1MY4b3HFHSIoMivJcfp4MyXBDqsz5vJfm=w400");
  background-size: 76px auto; background-repeat: repeat;
  mix-blend-mode: soft-light; opacity: .5;
}
/* Знак посередине, копирайт слева и на одном уровне с нижним словом знака. */
footer.bottom .wrap {
  position: relative; z-index: 1; text-align: center;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
}

/* Знак в подвале: слово сверху, золотая черта с ромбом, слово снизу.
   Засечки и разрядка — как на титулах методичек. */
.brandmark { grid-column: 2; padding: 0; }
.bm-k {
  display: block; font-family: var(--ttl, "Lora"), Georgia, serif; font-weight: 700;
  font-size: clamp(13px, 2vw, 16px); letter-spacing: .17em; color: #fff; text-transform: uppercase;
  padding-left: .17em; line-height: 1.25;
}
.bm-line {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 3px 0 3px; color: var(--gold); font-size: 8px; line-height: 1;
}
.bm-line i { display: block; height: 1px; width: min(70px, 18vw); background: linear-gradient(90deg, transparent, var(--gold)); }
.bm-line i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.bm-s {
  display: block; font-family: var(--ttl, "Lora"), Georgia, serif; font-weight: 700;
  font-size: clamp(9px, 1.5vw, 10.5px); letter-spacing: .3em; color: var(--gold);
  text-transform: uppercase; padding-left: .3em; line-height: 1.3;
}
/* Копирайт — у левого края, в одну строку с нижним словом знака. */
.bm-c { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; font-size: 12.5px; line-height: 1.3; }
@media (max-width: 640px) {
  footer.bottom .wrap { grid-template-columns: 1fr; justify-items: center; gap: 5px; }
  .bm-c { grid-column: 1; grid-row: 2; justify-self: center; }
  .brandmark { grid-column: 1; grid-row: 1; }
}