/* ============================================================
   SOLVO — боевой CSS брендбука
   Подключать в любую новую страницу и не изобретать заново.

   Источник правды: Solvo-Brandbook.html (17 разделов).
   Здесь то же самое, но в виде готового кода.

   ВАЖНО про анимации: в самом брендбуке они демонстрационные —
   крутятся infinite и в конце гаснут, потому что это витрина.
   Здесь они переписаны под боевое применение: проигрываются
   ОДИН РАЗ при появлении блока. Правило §09 — «ничего не
   крутится просто так» и «одна анимация на экран».
   ============================================================ */

/* ── 1. ТОКЕНЫ. На странице живёт ровно одна тема (§02) ────── */

body.theme-yellow {           /* основная: блогеры, эксперты, контент */
  --ink:#15120B;        --ink-soft:#5A5346;
  --paper:#FFFFFF;      --paper-warm:#FBF8F1;
  --accent:#FFCB05;     --accent-deep:#E0AF00;
  --cta-text:#15120B;   --cta-hover:#FFD52E;
  --marker:#FFE24D;     --sepia:#9A6A1A;
  --accent-soft:#FFF6D6; --accent-soft-line:#F4DE8A;
  --dark:#15120B;       --pop:#FFCB05;
  --ph-border:#D9CFB8;  --ph-text:#A99B7C;
  --alarm:#D7261E;      --hair:#ECE5D6;
  --shadow:0 18px 40px -18px rgba(21,18,11,.22);
  --grid-line:rgba(21,18,11,.07); --dot:rgba(21,18,11,.09); --glow:rgba(255,203,5,.30);
}

body.theme-sky {              /* B2B, консалтинг, услуги для бизнеса */
  --ink:#0E1F33;        --ink-soft:#4C5E73;
  --paper:#FFFFFF;      --paper-warm:#F1F7FE;
  --accent:#2E8FF5;     --accent-deep:#1668CC;
  --cta-text:#FFFFFF;   --cta-hover:#1F84F0;
  --marker:#C7E4FF;     --sepia:#2F76C2;
  --accent-soft:#EAF4FF; --accent-soft-line:#BFDDFB;
  --dark:#0E1F33;       --pop:#6FB6FF;
  --ph-border:#C5D6EA;  --ph-text:#8AA0B8;
  --alarm:#E0341F;      --hair:#E1ECF7;
  --shadow:0 18px 40px -18px rgba(14,31,51,.20);
  --grid-line:rgba(46,143,245,.10); --dot:rgba(46,143,245,.16); --glow:rgba(46,143,245,.16);
}

body.theme-navy {             /* деньги, юридические и медицинские темы */
  --ink:#0A1428;        --ink-soft:#48566E;
  --paper:#FFFFFF;      --paper-warm:#EEF2FB;
  --accent:#1E40AF;     --accent-deep:#142A73;
  --cta-text:#FFFFFF;   --cta-hover:#2A4EC2;
  --marker:#CBD8FF;     --sepia:#2D49A8;
  --accent-soft:#EAEEFB; --accent-soft-line:#C3CEF1;
  --dark:#0A1428;       --pop:#8AB4FF;
  --ph-border:#C3CEEC;  --ph-text:#8895B5;
  --alarm:#DA3320;      --hair:#E3E8F5;
  --shadow:0 18px 40px -18px rgba(10,20,40,.22);
  --grid-line:rgba(30,64,175,.10); --dot:rgba(30,64,175,.16); --glow:rgba(30,64,175,.14);
}

/* Тёмная тема — плашки уходят в фиолетовый, акцент жёлтый (§07) */
body.is-dark {
  --ink:#F3ECFF;        --ink-soft:#B7ADD4;
  --paper:#1D1240;      --paper-warm:#12101C;
  --hair:rgba(243,236,255,.14); --sepia:#9C8FC4; --dark:#0C0A16;
  --accent-soft:#33205E; --accent-soft-line:rgba(255,226,77,.34);
  --ph-border:#4A356F;  --ph-text:#9C8FC4;
  --shadow:0 20px 44px -26px rgba(0,0,0,.8);
  --grid-line:rgba(255,226,77,.07); --dot:rgba(255,226,77,.10); --glow:rgba(255,226,77,.16);
  background:var(--paper-warm);
}
body.is-dark.theme-yellow { --accent:#FFE24D; --accent-deep:#C7A400; --cta-text:#15120B; --marker:#FFE24D; }

/* ── 2. ОСНОВА И ТИПОГРАФИКА (§03) ────────────────────────── */

*,*::before,*::after { box-sizing:border-box }

body {
  margin:0; background:var(--paper-warm); color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; font-weight:500;
  -webkit-font-smoothing:antialiased;
}

/* Заголовки — всегда 800 с отрицательным трекингом */
h1 { font-size:clamp(29px,6vw,46px); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0 0 14px }
h2 { font-size:clamp(24px,4.4vw,34px); font-weight:800; line-height:1.14; letter-spacing:-.015em; margin:0 0 14px }
h3 { font-size:clamp(20px,3.2vw,26px); font-weight:800; line-height:1.16; letter-spacing:-.02em; margin:0 0 12px }

/* Надзаголовок над h2 */
.eyebrow { font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sepia); margin:0 0 14px }

/* Лид-абзац: не шире 32em, иначе строка тяжело читается */
.lede { font-size:19px; color:var(--ink-soft); line-height:1.62; max-width:32em; margin:0 0 12px }

/* Курсивный акцент в заголовке — только Fraunces italic, никогда в абзаце и кнопке (§04) */
.it { font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:600; color:var(--accent-deep) }

/* Маркер смыслов: ОДНА подсветка на абзац, на цифру или вывод (§04) */
.mk { font-weight:800; background:linear-gradient(transparent 54%,var(--marker) 54%);
  padding:0 .1em; border-radius:2px }

/* ── 3. КОМПОНЕНТЫ (§05) ──────────────────────────────────── */

/* Кнопка: нижняя кромка на 6px темнее — её хочется нажать */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--accent); color:var(--cta-text);
  font-weight:800; font-size:19px; letter-spacing:-.01em;
  padding:19px 26px; border:0; border-radius:16px; cursor:pointer;
  text-decoration:none;
  box-shadow:0 6px 0 var(--accent-deep), var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover  { background:var(--cta-hover); transform:translateY(-2px); box-shadow:0 8px 0 var(--accent-deep), var(--shadow) }
.btn:active { transform:translateY(4px);  box-shadow:0 3px 0 var(--accent-deep), var(--shadow) }
/* Под кнопкой всегда сноска, снимающая страх */
.btn-note { font-size:13.5px; color:var(--ink-soft); margin:13px 0 0; line-height:1.5 }

.card { background:var(--paper); border:1px solid var(--hair); border-radius:18px; padding:22px;
  box-shadow:0 10px 26px -22px rgba(21,18,11,.3) }

/* Тезис — разделяет смысловые части */
.thesis { font-size:24px; font-weight:800; line-height:1.3; letter-spacing:-.01em;
  margin:0; padding-left:18px; border-left:5px solid var(--accent); max-width:30em }

/* Плашки-заметки: нейтральная / акцентная / цитата */
.note        { background:var(--paper-warm); border:1px solid var(--hair); border-radius:16px; padding:20px 22px; font-weight:600; line-height:1.55 }
.note--accent{ background:var(--accent-soft); border-color:var(--accent-soft-line) }
.note--quote { background:var(--paper); border-left:5px solid var(--accent); border-radius:0 14px 14px 0 }
.note .lbl   { display:block; font-size:12.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sepia); margin-bottom:8px }

/* Большая цифра — один факт, крупно */
.bignum { text-align:center; padding:26px 18px; background:var(--dark); color:#fff; border-radius:18px }
.bignum b { display:block; font-size:clamp(44px,11vw,72px); font-weight:800; line-height:1; letter-spacing:-.03em }
.bignum b i { font-style:normal; color:var(--accent) }
.bignum p { font-size:15px; color:#C7CCD6; font-weight:600; margin:8px 0 0 }

/* Номерная плашка — один способ нумеровать всё */
.num { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:13px;
  background:var(--dark); color:var(--accent); font-weight:800; font-size:16px }
.num--done { background:var(--accent-soft); border:1px solid var(--accent-soft-line); color:var(--sepia) }
.num--next { background:var(--paper-warm); border:1px solid var(--hair); color:var(--ph-text) }

/* Фактуры фона: сетка 26px, точки 22px, свечение. Две подряд не ставим (§06) */
.bg-grid { background-color:var(--paper);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:26px 26px }
.bg-dots { background-color:var(--paper); background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:22px 22px }
.bg-glow { background-color:var(--paper-warm);
  background-image:radial-gradient(680px 400px at 78% 4%,var(--glow),transparent 68%) }

/* Скриншот-пруф: чужие цвета глушим, чтобы не спорили с акцентом (§14) */
.proof img { display:block; width:100%; border-radius:11px; filter:saturate(.45) }
.proof figcaption { font-size:11.5px; color:var(--ph-text); font-weight:700; margin:9px 0 0 }

/* Портрет: квадрат, белое поле, тонкий контур (§18) */
.avatar { display:block; width:210px; height:210px; border-radius:20px; object-fit:cover;
  border:7px solid var(--paper); box-shadow:0 0 0 2px var(--ph-border), var(--shadow) }
@media(max-width:520px){ .avatar{ width:170px; height:170px; border-width:6px; border-radius:16px } }

/* 10.09.2026 – компоненты страницы продажи инфопродукта
   (наряд lendingi-standart/08, черновики из 03-dizayn-i-mehaniki.md,
   разбор лендинга Сердитова против брендбука, одобрено Олегом) */

/* Лента-разделитель: якорь ритма на длинной странице.
   Два состояния поверх одного акцента, не три цвета «температуры» —
   стоп-лист §17 запрещает второй акцентный цвет. */
.band{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 22px;margin:0 0 28px;border-radius:14px;
  background:var(--paper-warm);border:1px solid var(--hair);
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--sepia)}
.band--dark{background:var(--dark);border-color:var(--dark);color:#fff}
.band--accent{background:var(--accent);border-color:var(--accent-deep);color:var(--cta-text)}

/* Бейдж-метка: «ДЕНЬ N», «БОНУС» — один стиль, различие только в тексте */
.tag{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;margin:0 0 12px;
  background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:10px;
  font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--sepia)}

/* Рамка-улика для пруфа с числом: не десатурируем — цифру должны прочитать.
   Обратная логика к .proof (та глушит цвет чужого скрина, чтобы не спорил
   с акцентом) — применять по месту, не вместо .proof. */
.proof--evidence{position:relative;padding:6px;background:var(--paper);
  border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow)}
.proof--evidence img{display:block;width:100%;border-radius:9px;filter:none}

/* Тарифная сетка: один список строк на все тарифы, недоступное — зачёркнуто */
.tariff-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  align-items:stretch;margin:28px 0}
.tariff-card{display:flex;flex-direction:column;gap:16px;padding:26px 24px;
  background:var(--paper);border:1px solid var(--hair);border-radius:20px;
  box-shadow:0 10px 26px -22px rgba(21,18,11,.3)}
.tariff-card h3{margin:0;font-size:22px}
.tariff-card .t-period{font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ph-text)}
.tariff-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px;flex:1}
.tariff-list li{position:relative;padding-left:26px;font-weight:600;font-size:14.5px;line-height:1.4}
.tariff-list li::before{content:"";position:absolute;left:0;top:.3em;width:14px;height:14px;
  border-radius:4px;border:2px solid var(--ink);background:var(--accent)}
.tariff-list li.is-off{color:var(--ph-text);text-decoration:line-through}
.tariff-list li.is-off::before{background:var(--paper-warm);border-color:var(--ph-border)}
.tariff-card .t-price{font-family:'Unbounded',sans-serif;font-size:clamp(30px,4vw,38px);
  font-weight:800;letter-spacing:-.02em;margin:10px 0 0}
.tariff-card .t-note{font-size:13px;color:var(--ink-soft);margin:0}

/* Премиум-карточка: верхний тариф отличается всем, не подписью «топ».
   Наклон бейджа мягче принятого у конкурентов — 6°, наш тон спокойнее. */
.tariff-card--premium{position:relative;background:var(--dark);border-color:var(--dark);color:#fff}
.tariff-card--premium .t-period,.tariff-card--premium .t-note{color:#C7CCD6}
.tariff-card--premium .tariff-list li{color:#EFEAE0}
.tariff-card--premium .tariff-list li.is-off{color:#7A7568}
.tariff-card--premium .t-price{color:var(--accent)}
.tariff-badge{position:absolute;top:-12px;right:18px;padding:7px 14px;border-radius:999px;
  background:var(--accent);color:var(--cta-text);font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;transform:rotate(6deg);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}

/* Таймер-чип: используется только с честным таймером — см. KAK-STROIT-STRANICU.md,
   «фиксированная дата, одна на всех, без localStorage» */
.countdown{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;
  background:var(--dark);color:#fff;border-radius:999px;font-weight:700;font-size:13.5px}
.countdown .dot{width:8px;height:8px;border-radius:50%;background:var(--alarm);flex:none}
.countdown b{font-family:'Unbounded',sans-serif;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--accent)}

/* Инлайн-ошибка поля формы: видно, какое именно поле не прошло проверку,
   не общий тултип браузера */
.fld input.is-invalid{border-color:var(--alarm);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--alarm) 14%,transparent)}
.fld-error{margin:4px 0 0;font-size:12.5px;font-weight:700;color:var(--alarm);line-height:1.3}

/* ── 4. ДВИЖЕНИЕ (§09) ────────────────────────────────────────
   Правило скорости: отклик на палец 0.12s, смена состояния 0.25s,
   появление блока 0.6s. Дольше 0.6s воспринимается как «тормозит».

   Как включить: на элемент вешаем класс анимации, он ждёт класс
   .is-in. Его добавляет наблюдатель (код — в KAK-STROIT-STRANICU.md).
   Без .is-in элемент просто стоит на месте — это правильно.
   ─────────────────────────────────────────────────────────── */

@keyframes solvo-rise   { from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes solvo-stamp  { 0%{ transform:scale(1.9) rotate(-26deg); opacity:0 }
                          55%{ transform:scale(.93) rotate(-7deg); opacity:1 }
                          75%{ transform:scale(1.04) rotate(-7deg) }
                          100%{ transform:scale(1) rotate(-7deg); opacity:1 } }
@keyframes solvo-marker { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes solvo-bar    { from{ width:20% } to{ width:var(--bar,100%) } }
@keyframes solvo-draw   { from{ stroke-dashoffset:300 } to{ stroke-dashoffset:0 } }
@keyframes solvo-node   { from{ transform:scale(.2); opacity:0 } to{ transform:scale(1); opacity:1 } }
@keyframes solvo-sticky { from{ transform:translateY(120%) } to{ transform:translateY(0) } }
/* Пульс точки — единственная зацикленная анимация: это индикатор,
   он обязан жить постоянно (прелоадер, «свободно 3 места») */
@keyframes solvo-dot    { 0%{ transform:scale(1); opacity:.85 } 70%,100%{ transform:scale(2.6); opacity:0 } }

.a-rise, .a-stamp, .a-node { opacity:0 }
.a-rise.is-in   { animation:solvo-rise   .6s cubic-bezier(.16,1,.3,1) both }
.a-stamp.is-in  { animation:solvo-stamp  .42s cubic-bezier(.2,1.5,.4,1) both }
.a-node.is-in   { animation:solvo-node   .12s ease-out both }
.a-marker       { transform:scaleX(0); transform-origin:left }
.a-marker.is-in { animation:solvo-marker .34s cubic-bezier(.65,0,.35,1) both }
.a-bar.is-in    { animation:solvo-bar    1.2s ease-out both }
.a-draw.is-in   { animation:solvo-draw   .7s ease-in-out both }
.a-sticky.is-in { animation:solvo-sticky .28s cubic-bezier(.16,1,.3,1) both }
.a-dot          { animation:solvo-dot 2s ease-out infinite }

/* Каскад для соседних карточек: максимум три подряд, шаг 80ms */
.a-rise:nth-child(2){ animation-delay:.08s } .a-rise:nth-child(3){ animation-delay:.16s }

/* Уважение к пользователю: выключил анимации в системе — их нет,
   но содержимое остаётся на месте, а не прячется навсегда */
@media (prefers-reduced-motion: reduce) {
  *{ animation:none !important; transition:none !important }
  .a-rise,.a-stamp,.a-node{ opacity:1 }
  .a-marker{ transform:scaleX(1) }
}