/* sq-theme.css — светлый вид Satori Quantum для всего сайта aipepden.store (спека 174, фаза 3).

   Как устроено:
   1. Токены --sq-* — цвета и шрифты рабочего места /app/ (agents/_lib/ui-kit/tokens.mjs): светлая тема по умолчанию,
      тёмная — по настройке устройства (prefers-color-scheme) или вручную (data-theme="dark" | "light" на <html>).
   2. Старые страницы хранят цвета в своих переменных (--bg, --accent, --text-primary …) — они переопределены здесь
      значениями токенов, поэтому страницы перекрашиваются без правки их файлов.
   3. Цвета, зашитые в правила страниц не через переменные, добиваются точечно ниже («Старые страницы»).
   4. Новые блоки главной и разбора — классы с префиксом sq-.
   Подключается шапкой в конце <head> каждой страницы (после всех её стилей). Файлы страниц ради цвета не правились. */

/* ── 1. Токены ─────────────────────────────────────────────────────────────── */
:root:root {
  color-scheme: light;
  --sq-bg: #F4F7F8; --sq-side: #F8FAFB; --sq-panel: #FFFFFF; --sq-soft: #EDF2F4; --sq-line: #E1E8EB; --sq-line-2: #D3DCE1;
  --sq-ink: #1D2930; --sq-ink-2: #3C4A52; --sq-ink-3: #56656D; --sq-ink-4: #5E6E76; --sq-deco: #8A989F;
  --sq-teal: #0E6B76; --sq-teal-2: #0A5560; --sq-teal-soft: #E3F0F1; --sq-on-teal: #FFFFFF;
  --sq-lamp: #F0AE36; --sq-lamp-soft: #FDF3E1;
  --sq-ok: #22603C; --sq-ok-bg: #E5F2EA; --sq-warn: #94450B; --sq-warn-bg: #FDF0E1; --sq-bad: #A3281B; --sq-bad-bg: #FCE9E7;
  --sq-shadow: 0 16px 40px -22px rgba(29, 41, 48, .35);
  --sq-f-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --sq-f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    color-scheme: dark;
    --sq-bg: #0F171C; --sq-side: #131D23; --sq-panel: #18242B; --sq-soft: #1E2C33; --sq-line: #2A3A43; --sq-line-2: #34474F;
    --sq-ink: #E6EDF0; --sq-ink-2: #C9D4D9; --sq-ink-3: #9AAAB2; --sq-ink-4: #93A3AB; --sq-deco: #6F8590;
    --sq-teal: #3BA7B3; --sq-teal-2: #52B9C4; --sq-teal-soft: #16343A; --sq-on-teal: #06191C;
    --sq-lamp: #F4B547; --sq-lamp-soft: #3A2C12;
    --sq-ok: #7FD0A0; --sq-ok-bg: #16301F; --sq-warn: #F0B56A; --sq-warn-bg: #3A2A12; --sq-bad: #F29A8E; --sq-bad-bg: #3B1D19;
    --sq-shadow: 0 16px 40px -22px rgba(0, 0, 0, .6);
  }
}
:root:root[data-theme="dark"] {
  color-scheme: dark;
  --sq-bg: #0F171C; --sq-side: #131D23; --sq-panel: #18242B; --sq-soft: #1E2C33; --sq-line: #2A3A43; --sq-line-2: #34474F;
  --sq-ink: #E6EDF0; --sq-ink-2: #C9D4D9; --sq-ink-3: #9AAAB2; --sq-ink-4: #93A3AB; --sq-deco: #6F8590;
  --sq-teal: #3BA7B3; --sq-teal-2: #52B9C4; --sq-teal-soft: #16343A; --sq-on-teal: #06191C;
  --sq-lamp: #F4B547; --sq-lamp-soft: #3A2C12;
  --sq-ok: #7FD0A0; --sq-ok-bg: #16301F; --sq-warn: #F0B56A; --sq-warn-bg: #3A2A12; --sq-bad: #F29A8E; --sq-bad-bg: #3B1D19;
  --sq-shadow: 0 16px 40px -22px rgba(0, 0, 0, .6);
}

/* Старые имена переменных → токены (страницы называют их по-разному, смысл один) */
:root:root {
  --bg: var(--sq-bg); --bg2: var(--sq-panel); --bg3: var(--sq-soft); --bg-card: var(--sq-panel); --bg-input: var(--sq-soft);
  --surface: var(--sq-panel); --surface-2: var(--sq-soft);
  --border: var(--sq-line); --border-color: var(--sq-line); --line: var(--sq-line);
  --accent: var(--sq-teal); --accent-dim: var(--sq-teal-2); --accent-h: var(--sq-teal-2); --accent-ink: var(--sq-on-teal); --on-accent: var(--sq-on-teal);
  --accent-cyan: var(--sq-teal); --accent-violet: var(--sq-teal);
  --text: var(--sq-ink); --text-primary: var(--sq-ink); --text-secondary: var(--sq-ink-2); --text-muted: var(--sq-ink-3); --text-dim: var(--sq-ink-4); --muted: var(--sq-ink-3);
  --green-pos: var(--sq-ok); --green: var(--sq-ok); --red-neg: var(--sq-bad); --red: var(--sq-bad); --red-live: var(--sq-bad); --danger: var(--sq-bad);
  --yellow-warn: var(--sq-warn); --yellow: var(--sq-warn);
  --font-head: var(--sq-f-display); --font-body: var(--sq-f-body);
}

/* ── 2. Основа ─────────────────────────────────────────────────────────────── */
html:root body {
  background: var(--sq-bg);
  color: var(--sq-ink);
  font-family: var(--sq-f-body);
  -webkit-font-smoothing: antialiased;
}
html:root body::before {
  /* мягкий свет вместо цветных пятен тёмной темы */
  background:
    radial-gradient(540px 540px at 7% 3%, color-mix(in srgb, var(--sq-lamp) 14%, transparent), transparent 62%),
    radial-gradient(620px 620px at 93% 18%, color-mix(in srgb, var(--sq-teal) 9%, transparent), transparent 62%);
}
html:root body :focus-visible { outline-color: color-mix(in srgb, var(--sq-teal) 55%, transparent); }
html:root body ::selection { background: color-mix(in srgb, var(--sq-teal) 25%, transparent); }

/* ── 3. Новые блоки (главная и разбор) ─────────────────────────────────────── */
.sq-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.sq-vh { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sq-eyebrow { display: inline-block; font: 600 12px/1.3 var(--sq-f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--sq-teal); }
.sq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px;
  font: 600 15px/1 var(--sq-f-body); padding: 14px 20px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s, border-color .18s;
}
.sq-btn-main { background: var(--sq-teal); color: var(--sq-on-teal); }
.sq-btn-main:hover { background: var(--sq-teal-2); }
.sq-btn-main:disabled { opacity: .6; cursor: default; }
.sq-btn-ghost { background: var(--sq-panel); border-color: var(--sq-line); color: var(--sq-ink); }
.sq-btn-ghost:hover { border-color: var(--sq-teal); color: var(--sq-teal); }
.sq-btn:focus-visible, .sq-scan input:focus-visible { outline: 3px solid color-mix(in srgb, var(--sq-teal) 40%, transparent); outline-offset: 2px; }

.sq-hero { position: relative; overflow: hidden; padding-block: 56px 48px; z-index: 1; }
.sq-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.sq-hero-grid > div { min-width: 0; }
.sq-hero .hero-h1 {
  font-family: var(--sq-f-display); font-weight: 500; letter-spacing: -.015em; text-wrap: balance;
  font-size: clamp(30px, 4.2vw, 50px); line-height: 1.1; margin: 14px 0 16px; color: var(--sq-ink);
}
.sq-hero .hero-h1 em { display: block; margin-top: 6px; font-style: normal; font-size: 1em; color: var(--sq-teal); text-shadow: none; }
.sq-slogan { font: 500 clamp(18px, 2vw, 22px)/1.35 var(--sq-f-display); letter-spacing: -.01em; color: var(--sq-ink); margin: 0 0 12px; }
.sq-lead { font-size: 17px; line-height: 1.6; color: var(--sq-ink-3); max-width: 54ch; margin: 0; }
.sq-scan {
  margin-top: 26px; background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 14px; padding: 8px;
  display: flex; gap: 8px; max-width: 560px; position: relative;
  box-shadow: 0 8px 30px -18px color-mix(in srgb, var(--sq-teal) 60%, transparent);
}
.sq-scan input[type="text"] { flex: 1; min-width: 0; border: 0; background: transparent; font: 16px var(--sq-f-body); color: var(--sq-ink); padding: 10px 12px; outline: none; }
.sq-scan input::placeholder { color: var(--sq-ink-3); }
.sq-fallback { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sq-hint { font-size: 13px; line-height: 1.5; color: var(--sq-ink-3); margin: 10px 0 0; max-width: 560px; }
.sq-err { font-size: 14px; line-height: 1.5; color: var(--sq-bad); background: var(--sq-bad-bg); border-radius: 10px; padding: 10px 14px; margin: 12px 0 0; max-width: 560px; }
.sq-contacts { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 18px 0 0; font-size: 14px; color: var(--sq-ink-3); }
.sq-contacts a { color: var(--sq-ink-2); text-decoration: none; border-bottom: 1px solid var(--sq-line-2); }
.sq-contacts a:hover { color: var(--sq-teal); border-color: var(--sq-teal); }

.sq-lamp { position: relative; aspect-ratio: 1; max-width: 400px; width: 100%; justify-self: center; }
.sq-lamp i { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
.sq-lamp i:nth-child(1) { width: 100%; height: 100%; opacity: .35; }
.sq-lamp i:nth-child(2) { width: 76%; height: 76%; opacity: .55; }
.sq-lamp i:nth-child(3) { width: 52%; height: 52%; opacity: .8; }
.sq-lamp b { position: absolute; inset: 0; margin: auto; width: 22%; height: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFD27A, var(--sq-lamp) 60%); box-shadow: 0 0 60px 18px color-mix(in srgb, var(--sq-lamp) 35%, transparent); }
.sq-lamp span { position: absolute; font: 600 12px/1.2 var(--sq-f-body); color: var(--sq-ink-3); background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.sq-lamp .l1 { top: 6%; left: 50%; transform: translateX(-50%); }
.sq-lamp .l2 { bottom: 18%; left: -2%; }
.sq-lamp .l3 { bottom: 18%; right: -2%; }
@media (prefers-reduced-motion: no-preference) {
  .sq-lamp i { animation: sq-breathe 6s ease-in-out infinite; }
  .sq-lamp i:nth-child(2) { animation-delay: .6s; }
  .sq-lamp i:nth-child(3) { animation-delay: 1.2s; }
  @keyframes sq-breathe { 50% { transform: scale(1.035); } }
}

.sq-sec { position: relative; z-index: 1; padding-block: 48px; }
.sq-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; max-width: 720px; }
.sq-head h2 { font: 500 clamp(24px, 3.2vw, 34px)/1.2 var(--sq-f-display); letter-spacing: -.015em; text-wrap: balance; margin: 0; color: var(--sq-ink); }
.sq-head p { color: var(--sq-ink-3); font-size: 17px; line-height: 1.55; margin: 0; }
.sq-steps, .sq-idea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sq-step { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sq-step .k { font: 600 13px/1.3 var(--sq-f-display); color: var(--sq-teal); }
.sq-step h3 { font: 500 18px/1.3 var(--sq-f-display); letter-spacing: -.01em; margin: 0; color: var(--sq-ink); }
.sq-step p { color: var(--sq-ink-3); font-size: 15px; line-height: 1.55; margin: 0; }
.sq-idea .sq-step { background: transparent; border-style: dashed; }

.sq-demo { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 16px; overflow: hidden; }
.sq-demo-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sq-line); flex-wrap: wrap; }
.sq-demo-top .sq-ico { width: 32px; height: 32px; border-radius: 8px; background: #7A4FC1; display: grid; place-items: center; flex: none; }
.sq-demo-top .sq-ico svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.sq-demo-top b { font: 600 15px/1.3 var(--sq-f-display); color: var(--sq-ink); }
.sq-pill { display: inline-flex; align-items: center; font: 600 12px/1.4 var(--sq-f-body); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sq-pill.ok { background: var(--sq-ok-bg); color: var(--sq-ok); }
.sq-pill.warn { background: var(--sq-warn-bg); color: var(--sq-warn); }
.sq-pill.bad { background: var(--sq-bad-bg); color: var(--sq-bad); }
.sq-pill.lamp { background: var(--sq-lamp-soft); color: var(--sq-warn); }
.sq-pill.soft { background: var(--sq-soft); color: var(--sq-ink-3); }
.sq-demo-top .sq-pill.lamp { margin-left: auto; }
.sq-demo-body { padding: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sq-card { border: 1px solid var(--sq-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--sq-bg); }
.sq-card .t { font-size: 13px; line-height: 1.35; color: var(--sq-ink-3); }
.sq-card b { font: 600 24px/1.1 var(--sq-f-display); font-variant-numeric: tabular-nums; color: var(--sq-ink); }
.sq-card small { font-size: 12px; line-height: 1.4; color: var(--sq-ink-3); }
.sq-card.is-done b { color: var(--sq-ink); }
.sq-demo-foot { border-top: 1px solid var(--sq-line); padding: 16px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sq-demo-foot p { flex: 1; min-width: 240px; font-size: 15px; line-height: 1.5; margin: 0; color: var(--sq-ink); }
.sq-progress { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sq-progress[hidden], .sq-demo-body[hidden], .sq-demo-foot[hidden], .sq-fallback[hidden], .sq-scan[hidden], .sq-hint[hidden], .sq-err[hidden], .sq-queue[hidden] { display: none; }
.sq-pstep { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--sq-ink-3); }
.sq-pstep .m { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sq-line-2); flex: none; }
.sq-pstep.done { color: var(--sq-ink); }
.sq-pstep.done .m { background: var(--sq-teal); border-color: var(--sq-teal); }
.sq-pstep.fail .m { background: var(--sq-warn-bg); border-color: var(--sq-warn); }
.sq-pstep.fail { color: var(--sq-warn); }
.sq-pstep.now { color: var(--sq-ink); }
.sq-pstep.now .m { border-color: var(--sq-lamp); border-top-color: transparent; animation: sq-spin 1s linear infinite; }
@keyframes sq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sq-pstep.now .m { animation: none; border-top-color: var(--sq-lamp); } }
.sq-queue { padding: 0 18px 18px; display: grid; gap: 10px; max-width: 520px; }
.sq-queue input[type="text"] { border: 1px solid var(--sq-line-2); background: var(--sq-bg); color: var(--sq-ink); border-radius: 10px; font: 15px var(--sq-f-body); padding: 11px 12px; }
.sq-queue label { font-size: 13px; line-height: 1.45; color: var(--sq-ink-3); display: flex; gap: 8px; align-items: flex-start; }

.sq-depts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sq-dept { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.sq-dept h3 { font: 500 16px/1.3 var(--sq-f-display); letter-spacing: -.01em; margin: 0; display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--sq-ink); }
.sq-dept p { font-size: 14px; line-height: 1.5; color: var(--sq-ink-3); margin: 0; }
.sq-cta { background: var(--sq-teal); color: var(--sq-on-teal); border-radius: 20px; padding: 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.sq-cta h2 { font: 500 clamp(22px, 3vw, 30px)/1.2 var(--sq-f-display); letter-spacing: -.015em; margin: 0; color: var(--sq-on-teal); }
.sq-cta p { opacity: .88; margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--sq-on-teal); }
.sq-cta .sq-btn { background: var(--sq-panel); color: var(--sq-ink); }
.sq-cta .sq-btn:hover { background: var(--sq-soft); }

@media (max-width: 860px) {
  .sq-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .sq-lamp { max-width: 260px; }
  .sq-steps, .sq-idea { grid-template-columns: 1fr; }
  .sq-demo-body { grid-template-columns: repeat(2, 1fr); }
  .sq-cta { grid-template-columns: 1fr; padding: 28px; }
  .sq-hero { padding-block: 36px 32px; }
}
@media (max-width: 420px) { .sq-demo-body { grid-template-columns: 1fr; } .sq-scan { flex-direction: column; } }

/* ── 3б. Внутренние страницы по макету (Отдел Директа, Как мы работаем и цены, Команда) ──
   Лампа (оранжевый свет) — один раз на странице: .sq-insight, .sq-price или .sq-human. */
.sq-crumbs { font-size: 14px; line-height: 1.5; color: var(--sq-ink-3); padding-top: 20px; }
.sq-crumbs a { color: var(--sq-ink-3); text-decoration: none; }
.sq-crumbs a:hover { color: var(--sq-teal); }
.sq-page-hero { position: relative; z-index: 1; padding-block: 40px 36px; }
.sq-page-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.sq-page-grid > div { min-width: 0; }
.sq-page-hero h1 { font: 500 clamp(30px, 4.6vw, 50px)/1.1 var(--sq-f-display); letter-spacing: -.015em; text-wrap: balance; margin: 14px 0 18px; color: var(--sq-ink); }
.sq-page-hero h1 em { font-style: normal; color: var(--sq-teal); }
.sq-page-hero .sq-lead { font-size: 18px; max-width: 60ch; }
.sq-field-l { display: block; font-size: 13px; font-weight: 600; margin: 28px 0 -18px; color: var(--sq-ink); }
.sq-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.sq-rhythm { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 16px; padding: 6px 20px; display: flex; flex-direction: column; }
.sq-rhythm > div { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--sq-line); font-size: 15px; line-height: 1.55; color: var(--sq-ink); }
.sq-rhythm > div:first-child { border-top: 0; }
.sq-rhythm span { font: 600 12px/1.3 var(--sq-f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--sq-teal); padding-top: 2px; }
.sq-rhythm p { margin: 0; min-width: 0; }
.sq-glow { width: 44px; height: 44px; border-radius: 50%; flex: none; margin: 2px; background: radial-gradient(circle at 40% 35%, #FFD27A, var(--sq-lamp) 62%); box-shadow: 0 0 26px 7px color-mix(in srgb, var(--sq-lamp) 35%, transparent); }
.sq-insight, .sq-price, .sq-human { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.sq-insight { align-items: center; }
.sq-insight h2, .sq-insight h3 { font: 500 18px/1.3 var(--sq-f-display); margin: 0; color: var(--sq-ink); }
.sq-insight p, .sq-price p { color: var(--sq-ink-3); margin: 8px 0 0; font-size: 16px; line-height: 1.6; max-width: 66ch; }
.sq-price h2 { font: 500 clamp(22px, 3vw, 30px)/1.2 var(--sq-f-display); letter-spacing: -.015em; margin: 0; color: var(--sq-ink); }
.sq-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sq-pill.teal { background: var(--sq-teal-soft); color: var(--sq-teal); }
.sq-pill.you { background: var(--sq-warn-bg); color: var(--sq-warn); }
.sq-steps.two { grid-template-columns: repeat(2, 1fr); }
.sq-steps.four { grid-template-columns: repeat(4, 1fr); }
.sq-step ul { margin: 0; padding-left: 18px; color: var(--sq-ink-3); font-size: 15px; line-height: 1.55; }
.sq-demo-body.three { grid-template-columns: repeat(3, 1fr); }
.sq-card h3 { margin: 0; font: 600 13px/1.2 var(--sq-f-body); text-transform: uppercase; letter-spacing: .07em; color: var(--sq-ink-3); }
.sq-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--sq-ink); }
.sq-card li { padding-left: 16px; position: relative; }
.sq-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sq-teal); }
.sq-card .sq-pill { align-self: flex-start; }
.sq-demo-foot.note { font-size: 14px; color: var(--sq-ink-3); }
.sq-dept a { font-size: 14px; font-weight: 600; text-decoration: none; margin-top: 4px; color: var(--sq-teal); }
.sq-dept .sq-price-tag { font-size: 13px; color: var(--sq-ink-3); margin-top: auto; padding-top: 6px; }
.sq-faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.sq-faq details { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 12px; }
.sq-faq summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--sq-ink); }
.sq-faq summary::-webkit-details-marker { display: none; }
.sq-faq summary::after { content: "+"; font-size: 20px; color: var(--sq-teal); line-height: 1; flex: none; }
.sq-faq details[open] summary::after { content: "\2212"; }
.sq-faq summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--sq-teal) 40%, transparent); outline-offset: 2px; border-radius: 12px; }
.sq-faq details p { padding: 0 18px 16px; margin: 0; color: var(--sq-ink-3); line-height: 1.6; }
.sq-people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sq-person { background: var(--sq-panel); border: 1px solid var(--sq-line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sq-person > header { display: flex; align-items: center; gap: 14px; }
.sq-ava { width: 48px; height: 48px; border-radius: 12px; background: var(--sq-teal); color: var(--sq-on-teal); display: grid; place-items: center; font: 600 20px var(--sq-f-display); flex: none; }
.sq-person h3 { font: 500 19px/1.25 var(--sq-f-display); margin: 0; color: var(--sq-ink); }
/* html:root body … — перебивает «article a» раздела 4.2 (карточка — <article>) */
html:root body .sq-person h3 a { color: var(--sq-ink); text-decoration: none; }
html:root body .sq-person h3 a:hover { color: var(--sq-teal); }
html:root body .sq-person a.sq-more { color: var(--sq-teal); }
.sq-person > header > div > span { font-size: 13px; color: var(--sq-ink-3); }
.sq-person dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sq-person dt { font: 600 12px/1.3 var(--sq-f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--sq-teal); margin-bottom: 2px; }
.sq-person dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sq-ink-3); }
.sq-person .sq-more { font-size: 14px; font-weight: 600; color: var(--sq-teal); text-decoration: none; margin-top: auto; }
.sq-human h2, .sq-human h3 { font: 500 20px/1.3 var(--sq-f-display); margin: 0; color: var(--sq-ink); }
.sq-human .role { font-size: 13px; color: var(--sq-ink-3); margin: 4px 0 0; }
.sq-human p { margin: 12px 0 0; max-width: 66ch; line-height: 1.6; color: var(--sq-ink-2); }
.sq-human q { display: block; margin-top: 14px; font: 500 18px/1.45 var(--sq-f-body); quotes: none; color: var(--sq-ink); }
.sq-prose { max-width: 72ch; }
.sq-prose :is(p, li) { color: var(--sq-ink-2); font-size: 16px; line-height: 1.65; }
.sq-prose h2 { font: 500 clamp(22px, 3vw, 30px)/1.2 var(--sq-f-display); margin: 32px 0 12px; color: var(--sq-ink); }
.sq-prose h3 { font: 500 18px/1.3 var(--sq-f-display); margin: 22px 0 8px; color: var(--sq-ink); }
@media (max-width: 900px) {
  .sq-page-grid { grid-template-columns: 1fr; }
  .sq-steps.two, .sq-steps.four, .sq-demo-body.three, .sq-people { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sq-page-hero { padding-block: 28px 24px; }
  .sq-insight, .sq-price, .sq-human { grid-template-columns: 1fr; }
  .sq-rhythm > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ── 3а. Переопределения, выведенные из самих страниц (цвета правил → токены); ручные правила раздела 4 идут после и главнее ── */
/* BEGIN derived (scripts/site174/theme-derive.mjs) — не править руками, пересобирается */
html:root body .ap-grid-bg { background-image: linear-gradient(color-mix(in srgb, var(--sq-ink) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--sq-ink) 3%, transparent) 1px, transparent 1px); }
html:root body .ap-eyebrow { background: color-mix(in srgb, var(--sq-teal) 7%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .ap-btn-primary { box-shadow: 0 8px 30px color-mix(in srgb, var(--sq-teal) 17%, transparent); }
html:root body .ap-btn-primary:hover { box-shadow: 0 12px 40px color-mix(in srgb, var(--sq-teal) 25%, transparent); }
html:root body .ap-chip { background: color-mix(in srgb, var(--sq-ink) 3%, transparent); }
html:root body .ap-bar-track { background: color-mix(in srgb, var(--sq-ink) 4%, transparent); }
html:root body .ap-result-card { background: linear-gradient(150deg, color-mix(in srgb, var(--sq-teal) 8%, transparent), rgba(181,132,255,.06)); border: 1px solid color-mix(in srgb, var(--sq-teal) 26%, transparent); }
html:root body .ap-final::before { background: radial-gradient(ellipse 60% 80% at 50% 40%, color-mix(in srgb, var(--sq-teal) 10%, transparent), transparent 70%); }
html:root body .ap-audit-faq h3 { color: var(--sq-ink); }
html:root body .btn-cta { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .btn-cta:hover { background: var(--sq-teal); }
html:root body .breadcrumb a { color: var(--sq-ink-3); }
html:root body .lead { color: var(--sq-ink-2); border-left: 3px solid var(--sq-teal); }
html:root body .faq { border-top: 1px solid var(--sq-line); }
html:root body .cta-block { background: linear-gradient(135deg, var(--sq-panel) 0%, var(--sq-teal-soft) 100%); border: 1px solid var(--sq-line); }
html:root body .cta-block p { color: var(--sq-ink-3); }
html:root body .cta-block .lead-form input { background: var(--sq-bg); border: 1px solid color-mix(in srgb, var(--sq-ink) 13%, transparent); color: var(--sq-ink); }
html:root body .cta-block .lead-form input:focus { border-color: var(--sq-teal); }
html:root body .cta-block .lead-form button { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .cta-block .lead-form button:hover:not(:disabled) { background: var(--sq-teal); }
html:root body .cta-block .lead-form-note { color: var(--sq-ink-3); }
html:root body .cta-block .lead-form-note a { color: var(--sq-teal); }
html:root body .cta-block .lead-success-ic { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .cta-block .lead-success h3 { color: var(--sq-ink); }
html:root body .cta-block .lead-success p { color: var(--sq-ink-3); }
html:root body .btn-primary { color: var(--sq-on-teal); }
html:root body .form-input { background: var(--bg, var(--sq-bg)); border: 1px solid var(--border, var(--sq-line)); color: var(--text-primary, var(--sq-ink)); }
html:root body .form-input:focus { border-color: var(--accent, var(--sq-teal)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-teal) 6%, transparent); }
html:root body .form-success p { color: var(--text-secondary, var(--sq-ink-3)); }
html:root body .faq-item { border-bottom: 1px solid var(--border, var(--sq-line)); }
html:root body .faq-question { color: var(--text-primary, var(--sq-ink)); }
html:root body .faq-question:hover { color: var(--accent, var(--sq-teal)); }
html:root body .faq-answer { color: var(--text-secondary, var(--sq-ink-3)); }
html:root body .form-input { border: 1px solid color-mix(in srgb, var(--sq-ink) 14%, transparent); background: color-mix(in srgb, var(--sq-ink) 4%, transparent); color: var(--sq-ink); }
html:root body .form-input:focus { border-color: var(--sq-teal); }
html:root body .form-input::placeholder { color: var(--sq-ink-3); }
html:root body select.form-input option { background: var(--sq-panel); color: var(--sq-ink); }
html:root body .form-note { color: var(--sq-ink-3); }
html:root body .form-note a { color: var(--sq-ink-3); }
html:root body .article-tag { color: var(--sq-teal); background: color-mix(in srgb, var(--sq-teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); }
html:root body .article-body { color: var(--sq-ink); }
html:root body .article-body h2 { color: var(--sq-ink); }
html:root body .article-body h3 { color: var(--sq-ink); }
html:root body .article-body li { color: var(--sq-ink-2); }
html:root body .article-body strong { color: var(--sq-ink); }
html:root body .article-body a { color: var(--sq-teal); border-bottom: 1px solid color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .article-body a:hover { border-color: var(--sq-teal); }
html:root body .highlight-box { background: color-mix(in srgb, var(--sq-teal) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); border-left: 3px solid var(--sq-teal); }
html:root body .highlight-box p { color: var(--sq-ink); }
html:root body .task-card h4 { color: var(--sq-teal); }
html:root body .task-card li { color: var(--sq-ink-2); }
html:root body .faq-item:hover { border-color: color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .faq-question { color: var(--sq-ink); }
html:root body .faq-question::before { background: color-mix(in srgb, var(--sq-teal) 15%, transparent); color: var(--sq-teal); }
html:root body .internal-link-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 48%, transparent); box-shadow: 0 4px 20px color-mix(in srgb, var(--sq-teal) 6%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--sq-teal) 48%, transparent); }
html:root body .internal-link-card .link-info strong { color: var(--sq-ink); }
html:root body .breadcrumb a:hover { color: var(--sq-teal); }
html:root body .author-block { border-left: 3px solid var(--sq-teal); }
html:root body .author-avatar-letter { border: 2px solid color-mix(in srgb, var(--sq-ink) 14%, transparent); }
html:root body .author-bio strong { color: var(--sq-ink); }
html:root body .author-bio .author-role { color: var(--sq-teal); }
html:root body .author-bio p { color: var(--sq-ink-2); }
html:root body .author-bio a { color: var(--sq-teal); border-bottom: 1px solid color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .author-bio a:hover { border-color: var(--sq-teal); }
html:root body .mat-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 54%, transparent); }
html:root body .btn-primary:hover { background: var(--sq-teal); }
html:root body .final-cta::before { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sq-teal) 8%, transparent) 0%, transparent 70%); }
html:root body .models-table td { border-bottom: 1px solid var(--sq-line); }
html:root body .models-table tr:hover td { background: color-mix(in srgb, var(--sq-ink) 2%, transparent); }
html:root body .savings-item { background: color-mix(in srgb, var(--sq-bg) 20%, transparent); }
html:root body .tokens-row { border-bottom: 1px solid var(--sq-line); }
html:root body .cat-btn.active { color: var(--sq-on-teal); }
html:root body .hero::before { background: radial-gradient(600px 400px at 85% 10%, color-mix(in srgb, var(--sq-teal) 8%, transparent), transparent 60%),
        radial-gradient(500px 400px at 10% 90%, rgba(69, 224, 255, .05), transparent 60%); }
html:root body .card:hover { border-color: var(--sq-line-2); }
html:root body dt .abbr { color: var(--sq-teal); }
html:root body .toc { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .toc strong { color: var(--sq-ink); }
html:root body .cta-block { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .badge.working { border-color: color-mix(in srgb, var(--sq-teal) 48%, transparent); }
html:root body .case-card { background: var(--surface, var(--sq-panel)); border: 1px solid var(--border, var(--sq-line)); }
html:root body .case-result { border-top: 1px solid var(--border, var(--sq-line)); color: var(--accent, var(--sq-teal)); }
html:root body .faq-icon { color: var(--accent, var(--sq-teal)); }
html:root body .hero-h1 em { text-shadow: 0 0 44px color-mix(in srgb, var(--sq-teal) 24%, transparent); }
html:root body .hero-photo { background: var(--sq-bg); }
html:root body .hero-photo::before { background: linear-gradient(to top,
          color-mix(in srgb, var(--sq-bg) 60%, transparent) 0%,
          color-mix(in srgb, var(--sq-bg) 15%, transparent) 30%,
          transparent 55%); }
html:root body .hero-photo::after { background: radial-gradient(
        ellipse at 65% 40%,
        transparent 60%,
        color-mix(in srgb, var(--sq-bg) 30%, transparent) 100%
      ); }
html:root body .team-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 48%, transparent); }
html:root body .team-card-cta { border: 1px solid color-mix(in srgb, var(--sq-teal) 36%, transparent); background: color-mix(in srgb, var(--sq-teal) 3%, transparent); }
html:root body .step-num { color: var(--sq-on-teal); }
html:root body .price-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .price-card-featured { border-color: color-mix(in srgb, var(--sq-teal) 48%, transparent); background: color-mix(in srgb, var(--sq-teal) 4%, transparent); }
html:root body .price-card-badge { color: var(--sq-on-teal); }
html:root body .compare-table .compare-us td { background: color-mix(in srgb, var(--sq-teal) 5%, transparent); }
html:root body .compare-table td.compare-yes { background: color-mix(in srgb, var(--sq-teal) 5%, transparent); }
html:root body .addon-item:hover { border-color: color-mix(in srgb, var(--sq-teal) 42%, transparent); }
html:root body .addon-item[open] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sq-teal) 15%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--sq-teal) 9%, transparent); }
html:root body .addon-executor { background: color-mix(in srgb, var(--sq-teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .discount-pill { background: color-mix(in srgb, var(--sq-teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); }
html:root body .founder-photo-wrap::after { background: linear-gradient(to top, color-mix(in srgb, var(--sq-bg) 80%, transparent), transparent); }
html:root body .founder-photo-tag { background: color-mix(in srgb, var(--sq-bg) 85%, transparent); }
html:root body .founder-quote { background: color-mix(in srgb, var(--sq-teal) 4%, transparent); }
html:root body .audit-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .audit-card--accent { border-color: color-mix(in srgb, var(--sq-teal) 24%, transparent); background: color-mix(in srgb, var(--sq-teal) 3%, transparent); }
html:root body .audit-find { background: color-mix(in srgb, var(--sq-ink) 3%, transparent); }
html:root body .audit-ai-callout { background: color-mix(in srgb, var(--sq-teal) 5%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 26%, transparent); }
html:root body .audit-ai-cta { color: var(--sq-on-teal); }
html:root body .how-steps::before { background: linear-gradient(to bottom, var(--accent) 0%, color-mix(in srgb, var(--sq-teal) 10%, transparent) 100%); }
html:root body .how-step:hover { border-color: color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .how-step--accent { border-color: color-mix(in srgb, var(--sq-teal) 30%, transparent); background: color-mix(in srgb, var(--sq-teal) 3%, transparent); }
html:root body .anna-demo { background: linear-gradient(180deg, var(--sq-bg) 0%, var(--sq-bg) 100%); border-top: 1px solid color-mix(in srgb, var(--sq-teal) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--sq-teal) 10%, transparent); }
html:root body .demo-chat { background: var(--sq-panel); border: 1px solid color-mix(in srgb, var(--sq-teal) 18%, transparent); }
html:root body .demo-chat-header { background: linear-gradient(135deg, var(--sq-panel), var(--sq-panel)); border-bottom: 1px solid color-mix(in srgb, var(--sq-ink) 5%, transparent); }
html:root body .demo-chat-tg-link { border: 1px solid color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .demo-chat-tg-link:hover { background: color-mix(in srgb, var(--sq-teal) 10%, transparent); }
html:root body .demo-msg.client { background: color-mix(in srgb, var(--sq-ink) 4%, transparent); }
html:root body .demo-msg.anna { background: color-mix(in srgb, var(--sq-teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); }
html:root body .demo-msg-typing { background: color-mix(in srgb, var(--sq-teal) 5%, transparent); }
html:root body .demo-chat-footer { background: var(--sq-panel); border-top: 1px solid color-mix(in srgb, var(--sq-ink) 5%, transparent); }
html:root body .demo-label-tag { background: color-mix(in srgb, var(--sq-teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .anna-banner { background: linear-gradient(180deg, var(--sq-bg) 0%, var(--sq-panel) 100%); border-top: 1px solid color-mix(in srgb, var(--sq-teal) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--sq-teal) 12%, transparent); color: var(--sq-ink); }
html:root body .anna-banner::before { background: radial-gradient(circle, color-mix(in srgb, var(--sq-teal) 8%, transparent), transparent 70%); }
html:root body .anna-banner__eyebrow { color: var(--sq-teal); }
html:root body .anna-banner__title { color: var(--sq-ink); }
html:root body .anna-banner__title em { color: var(--sq-teal); }
html:root body .anna-banner__desc { color: var(--sq-ink-2); }
html:root body .anna-banner__source { background: color-mix(in srgb, var(--sq-ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--sq-ink) 7%, transparent); color: var(--sq-ink-2); }
html:root body .anna-banner__cta { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .team-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 54%, transparent); }
html:root body .trust-block { background: var(--sq-bg); border-top: 1px solid color-mix(in srgb, var(--sq-teal) 10%, transparent); }
html:root body .trust-card { background: var(--sq-panel); border: 1px solid color-mix(in srgb, var(--sq-teal) 10%, transparent); }
html:root body .trust-card-link { border-bottom: 1px dashed color-mix(in srgb, var(--sq-teal) 48%, transparent); }
html:root body .guarantees-list li { border-bottom: 1px solid color-mix(in srgb, var(--sq-ink) 5%, transparent); }
html:root body .services-nav-card { background: color-mix(in srgb, var(--sq-ink) 2%, transparent); border: 1px solid color-mix(in srgb, var(--sq-ink) 7%, transparent); }
html:root body .services-nav-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 54%, transparent); background: color-mix(in srgb, var(--sq-ink) 4%, transparent); }
html:root body .services-nav-card strong { color: var(--sq-ink); }
html:root body .services-nav-card span { color: var(--sq-ink-3); }
html:root body .roi-calc input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sq-teal) 12%, transparent); }
html:root body .lead-form input { color: var(--sq-ink); }
html:root body .lead-form button { color: var(--sq-on-teal); }
html:root body .lead-form button:hover:not(:disabled) { background: var(--sq-teal); }
html:root body .lead-success { background: color-mix(in srgb, var(--sq-teal) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .lead-success-ic { color: var(--sq-on-teal); }
html:root body .lead-success a.btn-primary { color: var(--sq-on-teal); }
html:root body .aipepden-cookie { background: var(--sq-bg); border: 1px solid color-mix(in srgb, var(--sq-teal) 42%, transparent); }
html:root body .aipepden-cookie__text { color: var(--sq-ink); }
html:root body .aipepden-cookie__text a { color: var(--sq-teal); }
html:root body .aipepden-cookie__btn--primary { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .aipepden-cookie__btn--secondary { background: color-mix(in srgb, var(--sq-ink) 6%, transparent); color: var(--sq-ink); }
html:root body .kd-hero-visual-roas { background: color-mix(in srgb, var(--sq-teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .problem-card-icon { background: color-mix(in srgb, var(--sq-teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .loop-node--accent { border-color: color-mix(in srgb, var(--sq-teal) 42%, transparent); background: color-mix(in srgb, var(--sq-teal) 6%, transparent); }
html:root body .audit-card { border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); background-color: color-mix(in srgb, var(--sq-teal) 3%, transparent); }
html:root body .pricing-card.featured { background: color-mix(in srgb, var(--sq-teal) 6%, transparent); border-color: color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .pricing-card.featured .pricing-cta { color: var(--sq-on-teal); }
html:root body .emp-hero::before { background: radial-gradient(circle, color-mix(in srgb, var(--sq-teal) 5%, transparent) 0%, transparent 65%); }
html:root body .emp-avatar { background: color-mix(in srgb, var(--sq-teal) 12%, transparent); }
html:root body .emp-price-card { border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); }
html:root body .emp-price-compare { background: color-mix(in srgb, var(--sq-ink) 2%, transparent); }
html:root body .emp-cta { color: var(--sq-on-teal); }
html:root body .emp-mobile-cta-inner { border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); }
html:root body .skill-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .offer-banner { background: color-mix(in srgb, var(--sq-teal) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .offer-banner-label { color: var(--sq-on-teal); }
html:root body .pricing-cta-group .btn-primary { color: var(--sq-on-teal); }
html:root body .pricing-cta-group .btn-primary:hover { background: var(--sq-teal); }
html:root body .final-cta-group .btn-primary { color: var(--sq-on-teal); }
html:root body .final-cta-group .btn-primary:hover { background: var(--sq-teal); }
html:root body .case-badge { background: color-mix(in srgb, var(--sq-teal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .ctr-track { background: color-mix(in srgb, var(--sq-ink) 5%, transparent); }
html:root body .ctr-fill--before { background: color-mix(in srgb, var(--sq-teal) 25%, transparent); }
html:root body .ctr-fill--market { background: color-mix(in srgb, var(--sq-teal) 12%, transparent); }
html:root body .hub-cta-card { border: 1px solid color-mix(in srgb, var(--sq-teal) 36%, transparent); background: color-mix(in srgb, var(--sq-teal) 3%, transparent); }
html:root body .case-badge { color: var(--sq-on-teal); }
html:root body .case-stat-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .case-bar-track { background: color-mix(in srgb, var(--sq-ink) 3%, transparent); }
html:root body .case-bar-before { background: color-mix(in srgb, var(--sq-ink) 10%, transparent); color: var(--sq-ink-3); }
html:root body .case-bar-after { background: linear-gradient(90deg, color-mix(in srgb, var(--sq-teal) 55%, transparent), color-mix(in srgb, var(--sq-teal) 35%, transparent)); color: var(--sq-teal); }
html:root body .case-avg-row { background: color-mix(in srgb, var(--sq-teal) 5%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 22%, transparent); }
html:root body .case-avg-val { color: var(--sq-ink); }
html:root body .contact-card { background: var(--sq-panel); border: 1px solid var(--sq-line-2); }
html:root body .contact-card .value { color: var(--sq-ink); }
html:root body .hours-block { background: var(--sq-panel); border: 1px solid var(--sq-line-2); }
html:root body .hours-row { border-bottom: 1px solid var(--sq-line); color: var(--sq-ink-2); }
html:root body .hours-row .day { color: var(--sq-ink-3); }
html:root body .hours-row .time { color: var(--sq-ink); }
html:root body .contact-form { background: var(--sq-panel); border: 1px solid var(--sq-line-2); }
html:root body .form-group label { color: var(--sq-ink-3); }
html:root body .form-group input, html:root body .form-group textarea { background: var(--sq-bg); border: 1px solid var(--sq-line-2); color: var(--sq-ink); }
html:root body .hero-tag { background: color-mix(in srgb, var(--sq-teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 24%, transparent); }
html:root body .case-card:not(.case-wip):hover { border-color: color-mix(in srgb, var(--sq-teal) 34%, transparent); }
html:root body .tag-complex { background: color-mix(in srgb, var(--sq-teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 22%, transparent); }
html:root body .tag-wip { border: 1px solid color-mix(in srgb, var(--sq-ink) 5%, transparent); }
html:root body .btn-main { color: var(--sq-on-teal); }
html:root body .price-box { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .price-box .price-num { color: var(--sq-teal); }
html:root body .price-box .price-period { color: var(--sq-ink-3); }
html:root body .aip-proof { border: 1px solid color-mix(in srgb, var(--sq-teal) 34%, transparent); background: color-mix(in srgb, var(--sq-teal) 4%, transparent); }
html:root body .aip-proof-label { color: var(--sq-teal); }
html:root body .aip-proof-text { color: var(--sq-ink-2); }
html:root body .aip-proof-text strong { color: var(--sq-ink); }
html:root body .aip-proof-link { color: var(--sq-teal); }
html:root body .case-box { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .case-box .case-stat-val { color: var(--sq-teal); }
html:root body .case-box .case-stat-label { color: var(--sq-ink-3); }
html:root body .hero-label { background: var(--sq-teal-soft); color: var(--sq-teal); border: 1px solid var(--sq-line); }
html:root body .hero h1 { color: var(--sq-ink); }
html:root body .hero h1 em { color: var(--sq-teal); }
html:root body .hero-sub { color: var(--sq-ink-3); }
html:root body .btn-ghost { border: 1px solid var(--sq-line-2); color: var(--sq-ink-2); }
html:root body .btn-ghost:hover { color: var(--sq-ink); }
html:root body .hero-stat { border-top: 1px solid var(--sq-line); }
html:root body .hero-stat-item .num { color: var(--sq-teal); }
html:root body .section-title { color: var(--sq-ink); }
html:root body .why-card { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .why-card h3 { color: var(--sq-ink); }
html:root body .why-card p { color: var(--sq-ink-3); }
html:root body .checklist-step { border-bottom: 1px solid var(--sq-line); }
html:root body .step-num { background: var(--sq-teal-soft); border: 1px solid var(--sq-line); color: var(--sq-teal); }
html:root body .step-body h3 { color: var(--sq-ink); }
html:root body .step-body p { color: var(--sq-ink-3); }
html:root body .step-tag { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .step-tag.high { background: var(--sq-panel); }
html:root body .step-tag.med { background: var(--sq-panel); border-color: var(--sq-line); }
html:root body .step-tag.ok { background: var(--sq-teal-soft); border-color: var(--sq-line); }
html:root body .pricing-card { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .pricing-card .price-main { color: var(--sq-teal); }
html:root body .price-breakdown { background: var(--sq-bg); }
html:root body .price-breakdown td { color: var(--sq-ink-3); }
html:root body .price-breakdown td:last-child { color: var(--sq-ink-3); }
html:root body .price-breakdown tr.total td { color: var(--sq-ink); border-top: 1px solid var(--sq-line); }
html:root body .price-includes li { color: var(--sq-ink-2); }
html:root body .deliverable-card { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .deliverable-card h4 { color: var(--sq-ink); }
html:root body .cta-block h2 { color: var(--sq-ink); }
html:root body .faq-item { border-bottom: 1px solid var(--sq-line); }
html:root body .faq-q { color: var(--sq-ink); }
html:root body .faq-q::after { color: var(--sq-teal); }
html:root body .faq-a { color: var(--sq-ink-3); }
html:root body .package-item { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .package-item h3 { color: var(--sq-teal); }
html:root body .package-item p { color: var(--sq-ink-3); }
html:root body .checklist li::before { color: var(--sq-teal); }
html:root body .block-card { background: var(--sq-panel); border: 1px solid var(--sq-line); }
html:root body .block-card .block-num { color: var(--sq-teal); }
html:root body .block-card h3 { color: var(--sq-ink); }
html:root body .block-card p { color: var(--sq-ink-3); }
html:root body .priority-table th { background: var(--sq-panel); color: var(--sq-ink-3); border-bottom: 1px solid var(--sq-line); }
html:root body .priority-table td { border-bottom: 1px solid var(--sq-line); color: var(--sq-ink-2); }
html:root body .badge-yellow { background: var(--sq-panel); }
html:root body .badge-green { background: var(--sq-teal-soft); color: var(--sq-teal); }
html:root body .compare-block { background: var(--sq-bg); border: 1px solid var(--sq-line); }
html:root body .compare-block th { border-bottom: 1px solid var(--sq-line); }
html:root body .compare-block td { border-bottom: 1px solid var(--sq-line); color: var(--sq-ink-2); }
html:root body .yes { color: var(--sq-teal); }
html:root body .compare-table th { background: var(--sq-panel); color: var(--sq-ink-3); border-bottom: 1px solid var(--sq-line); }
html:root body .compare-table td { border-bottom: 1px solid var(--sq-line); color: var(--sq-ink-2); }
html:root body .btn-add { background: color-mix(in srgb, var(--sq-teal) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--sq-teal) 48%, transparent); }
html:root body .btn-add:hover { background: color-mix(in srgb, var(--sq-teal) 20%, transparent); }
html:root body .results-table th { background: color-mix(in srgb, var(--sq-teal) 10%, transparent); }
html:root body .results-table td { border-top: 1px solid color-mix(in srgb, var(--sq-ink) 4%, transparent); }
html:root body .btn-copy { background: color-mix(in srgb, var(--sq-teal) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sq-teal) 36%, transparent); }
html:root body .btn-copy:hover { background: color-mix(in srgb, var(--sq-teal) 30%, transparent); }
html:root body .notice { background: var(--sq-panel); color: var(--sq-ink-2); }
html:root body .service-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 54%, transparent); }
/* END derived */

/* ── 4. Старые страницы: цвета, зашитые в правила не через переменные ───────────
   Селекторы начинаются с html:root body — это перебивает правила страниц, объявленные после нашего файла
   (стили внутри <body>, вставки шапки и форм). Только цвета и фон; вёрстку не трогаем. */

/* 4.1 Заголовки старых блоков: тяжёлый Fraunces 800 заменён лёгким Unbounded 500, как в рабочем месте */
html:root body :is(h1, h2, h3, h4) { font-weight: 500; letter-spacing: -.015em; }
html:root body .section-h2 { font-size: clamp(26px, 3.3vw, 38px); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
html:root body .section-label::before { background: var(--sq-teal); }

/* 4.2 Статьи и хабы (/seo/*, /blog/*): тёмные цвета в элементных правилах */
html:root body article h1 { color: var(--sq-ink); font-family: var(--sq-f-display); }
html:root body article h2 { color: var(--sq-ink); font-family: var(--sq-f-display); }
html:root body article h3 { color: var(--sq-ink-2); font-family: var(--sq-f-display); }
html:root body article :is(p, ul, ol, li) { color: var(--sq-ink-2); }
html:root body article strong { color: var(--sq-ink); }
html:root body article a { color: var(--sq-teal); }
html:root body article a:hover { color: var(--sq-teal-2); }
html:root body article .lead { color: var(--sq-ink-3); border-left-color: var(--sq-teal); }
html:root body .breadcrumb { color: var(--sq-ink-3); }
html:root body .breadcrumb a { color: var(--sq-ink-3); }
html:root body .faq { border-top-color: var(--sq-line); }
html:root body article .btn-cta, html:root body .btn-cta { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body article .btn-cta:hover, html:root body .btn-cta:hover { background: var(--sq-teal-2); color: var(--sq-on-teal); text-decoration: none; }
html:root body .cta-block { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 28%, var(--sq-line)); }
html:root body .cta-block h2 { color: var(--sq-ink); }
html:root body .cta-block :is(p, .lead-form-note) { color: var(--sq-ink-3); }
html:root body .cta-block .lead-form input { background: var(--sq-panel); border-color: var(--sq-line-2); color: var(--sq-ink); }
html:root body .cta-block .lead-form input::placeholder { color: var(--sq-ink-3); }
html:root body .cta-block .lead-form input:focus { border-color: var(--sq-teal); }
html:root body .cta-block .lead-form input.field-error { border-color: var(--sq-bad); }
html:root body .cta-block .lead-form button { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .cta-block .lead-form button:hover:not(:disabled) { background: var(--sq-teal-2); }
html:root body .cta-block .lead-form-note a { color: var(--sq-teal); }
html:root body .cta-block .lead-form-err { color: var(--sq-bad); }
html:root body .cta-block .lead-success-ic { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .cta-block .lead-success h3 { color: var(--sq-ink); }
html:root body .cta-block .lead-success p { color: var(--sq-ink-3); }
html:root body footer { border-top-color: var(--sq-line); color: var(--sq-ink-3); }
html:root body footer a { color: var(--sq-ink-3); }
html:root body footer a:hover { color: var(--sq-teal); }
html:root body .aip-services { border-top-color: var(--sq-line); }
html:root body .aip-services-title { color: var(--sq-teal); }
html:root body .aip-services-list a { color: var(--sq-ink-3); }
html:root body .aip-services-list a:hover { color: var(--sq-ink); }

/* 4.3 Главная: блоки с зашитым тёмным фоном — в светлую тему */
html:root body .anna-demo { background: var(--sq-soft); border-color: var(--sq-line); }
html:root body .demo-chat { background: var(--sq-panel); border-color: var(--sq-line); box-shadow: var(--sq-shadow); }
html:root body .demo-chat-header { background: var(--sq-panel); border-bottom-color: var(--sq-line); }
html:root body .demo-chat-avatar { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .demo-chat-status { color: var(--sq-ok); }
html:root body .demo-chat-status::before { background: var(--sq-ok); }
html:root body .demo-chat-tg-link { border-color: var(--sq-line-2); color: var(--sq-teal); }
html:root body .demo-chat-tg-link:hover { background: var(--sq-teal-soft); }
html:root body .demo-msg.client { background: var(--sq-soft); }
html:root body .demo-msg.anna { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); }
html:root body .demo-msg-typing { background: var(--sq-soft); }
html:root body .demo-chat-footer { background: var(--sq-soft); border-top-color: var(--sq-line); }
html:root body .demo-label-tag { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 30%, var(--sq-line)); color: var(--sq-teal); }
html:root body .anna-banner { background: var(--sq-soft); border-color: var(--sq-line); color: var(--sq-ink); }
html:root body .anna-banner::before { background: radial-gradient(circle, color-mix(in srgb, var(--sq-lamp) 16%, transparent), transparent 70%); }
html:root body .anna-banner__eyebrow { color: var(--sq-teal); }
html:root body .anna-banner__title { color: var(--sq-ink); }
html:root body .anna-banner__title em { color: var(--sq-teal); }
html:root body .anna-banner__desc { color: var(--sq-ink-3); }
html:root body .anna-banner__source { background: var(--sq-panel); border-color: var(--sq-line); color: var(--sq-ink-2); }
html:root body .anna-banner__cta { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .trust-block { background: var(--sq-bg); border-top-color: var(--sq-line); }
html:root body .trust-card { background: var(--sq-panel); border-color: var(--sq-line); }
html:root body .trust-card-link { border-bottom-color: color-mix(in srgb, var(--sq-teal) 50%, transparent); }
html:root body .aipepden-cookie { background: var(--sq-panel); border-color: var(--sq-line-2); box-shadow: var(--sq-shadow); }
html:root body .aipepden-cookie__text { color: var(--sq-ink-2); }
html:root body .aipepden-cookie__text a { color: var(--sq-teal); }
html:root body .aipepden-cookie__btn--primary { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .aipepden-cookie__btn--secondary { background: var(--sq-soft); color: var(--sq-ink-2); }
html:root body .btn-primary { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .btn-primary:hover { background: var(--sq-teal-2); }
html:root body .btn-ghost { color: var(--sq-ink); border-color: var(--sq-line-2); }
html:root body .btn-ghost:hover { border-color: var(--sq-teal); color: var(--sq-teal); }

/* 4.4 Окно заявки (css/lead-modal.css) */
html:root body .lead-modal__backdrop { background: rgba(15, 23, 28, .55); }
html:root body .lead-modal__box { background: var(--sq-panel); border-color: var(--sq-line); box-shadow: var(--sq-shadow); color: var(--sq-ink); }
html:root body .lead-modal__title { font-family: var(--sq-f-display); font-weight: 500; color: var(--sq-ink); }
html:root body .lead-modal__sub { color: var(--sq-ink-3); }
html:root body .lead-modal__close { color: var(--sq-ink-3); }
html:root body .lead-modal__close:hover { color: var(--sq-ink); }
html:root body .lead-modal__input { background: var(--sq-bg); border-color: var(--sq-line-2); color: var(--sq-ink); }
html:root body .lead-modal__input::placeholder { color: var(--sq-ink-3); }
html:root body .lead-modal__input:focus { border-color: var(--sq-teal); }
html:root body .lead-modal__submit { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .lead-modal__submit:hover { background: var(--sq-teal-2); }
html:root body .lead-modal__note { color: var(--sq-ink-3); }
html:root body .lead-modal__msg { color: var(--sq-bad); }
html:root body .lead-modal__note a { color: var(--sq-teal); }
html:root body .lead-modal__ok { color: var(--sq-ink); }

/* 4.5 Цвета, зашитые в style="" и в атрибуты SVG, — только через !important (иначе не перебить) */
html:root body [style*="color:#fff"], html:root body [style*="color: #fff"], html:root body [style*="color:#FFF"],
html:root body [style*="color:#ffffff"], html:root body [style*="color: #FFFFFF"] { color: var(--sq-ink) !important; }
html:root body [style*="color:#E5FF45"], html:root body [style*="color: #E5FF45"], html:root body [style*="color:#c8f135"] { color: var(--sq-teal) !important; }
html:root body [style*="color:#9CA3AF"], html:root body [style*="color:#888"], html:root body [style*="color:#aaa"] { color: var(--sq-ink-3) !important; }
html:root body [style*="background:#0A0A0C"], html:root body [style*="background: #0A0A0C"], html:root body [style*="background:#111"], html:root body [style*="background:#0a0a0a"],
html:root body [style*="background:#14141A"], html:root body [style*="background:#1A1A1F"] { background: var(--sq-panel) !important; }
html:root body svg [stroke="#E5FF45"], html:root body svg[stroke="#E5FF45"] { stroke: var(--sq-teal); }
html:root body svg [fill="#E5FF45"], html:root body svg[fill="#E5FF45"] { fill: var(--sq-teal); }

/* 4.6 Статья блога с собственной вёрсткой (/blog/ai-seo-specialist-prodvizhenie.html) */
html:root body .article-body { color: var(--sq-ink-2); }
html:root body .article-body :is(h2, h3, strong) { color: var(--sq-ink); }
html:root body .article-body li { color: var(--sq-ink-2); }
html:root body .article-body a { color: var(--sq-teal); border-bottom-color: color-mix(in srgb, var(--sq-teal) 40%, transparent); }
html:root body .article-body a:hover { border-color: var(--sq-teal); }
html:root body .article-tag { color: var(--sq-teal); background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); }
html:root body .highlight-box { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); border-left-color: var(--sq-teal); }
html:root body .highlight-box p { color: var(--sq-ink); }
html:root body .stat-inline-item strong { background: none; -webkit-text-fill-color: currentColor; color: var(--sq-teal); }
html:root body .task-card h4 { color: var(--sq-teal); }
html:root body .task-card li { color: var(--sq-ink-2); }
html:root body .faq-item:hover { border-color: color-mix(in srgb, var(--sq-teal) 30%, var(--sq-line)); }
html:root body .faq-question { color: var(--sq-ink); }
html:root body .faq-question::before { background: var(--sq-teal-soft); color: var(--sq-teal); }
html:root body .internal-link-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 40%, var(--sq-line)); box-shadow: var(--sq-shadow); }
html:root body .internal-link-card .link-info strong { color: var(--sq-ink); }
html:root body .breadcrumb a:hover { color: var(--sq-teal); }
html:root body .author-block { border-left-color: var(--sq-teal); }
html:root body .author-bio strong { color: var(--sq-ink); }
html:root body .author-bio .author-role { color: var(--sq-teal); }
html:root body .author-bio p { color: var(--sq-ink-2); }
html:root body .author-bio a { color: var(--sq-teal); border-bottom-color: color-mix(in srgb, var(--sq-teal) 40%, transparent); }
html:root body .form-input { background: var(--sq-bg); border-color: var(--sq-line-2); color: var(--sq-ink); }
html:root body .form-input::placeholder { color: var(--sq-ink-3); }
html:root body .form-input:focus { border-color: var(--sq-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-teal) 18%, transparent); }
html:root body select.form-input option { background: var(--sq-panel); color: var(--sq-ink); }
html:root body .form-note, html:root body .form-note a { color: var(--sq-ink-3); }
html:root body .form-message--error { background: var(--sq-bad-bg); border-color: color-mix(in srgb, var(--sq-bad) 30%, transparent); color: var(--sq-bad); }
html:root body .form-message--success { background: var(--sq-ok-bg); border-color: color-mix(in srgb, var(--sq-ok) 30%, transparent); color: var(--sq-ok); }
html:root body .form-success-icon { background: var(--sq-ok-bg); border-color: var(--sq-ok); color: var(--sq-ok); }
html:root body .case-tag { color: var(--sq-teal); background: var(--sq-teal-soft); }
html:root body .tech-table td.highlight, html:root body .principle-num, html:root body .faq-icon, html:root body .case-result { color: var(--sq-teal); }
html:root body .ai-attr { background: var(--sq-teal-soft); }

/* 4.7 Отдельные страницы со своей палитрой */
/* Контакты, условия, политика: body > main > .container */
html:root body > main > .container :is(h1, h2, h3) { color: var(--sq-ink); font-family: var(--sq-f-display); }
html:root body > main > .container :is(p, li, td, dd) { color: var(--sq-ink-2); }
html:root body > main > .container :is(p.effective-date, .aip-requisites) { color: var(--sq-ink-3); }
html:root body > main > .container a { color: var(--sq-teal); }
html:root body .contact-card, html:root body .hours-block, html:root body .contact-form, html:root body .notice { background: var(--sq-panel); border-color: var(--sq-line); }
html:root body .contact-card :is(.label, .note) { color: var(--sq-ink-3); }
html:root body .contact-card .value { color: var(--sq-ink); }
html:root body .contact-card .value a { color: var(--sq-teal); }
html:root body .hours-row { border-bottom-color: var(--sq-line); color: var(--sq-ink-2); }
html:root body .hours-row .day { color: var(--sq-ink-3); }
html:root body .hours-row .time { color: var(--sq-ink); }
html:root body .form-group label { color: var(--sq-ink-2); }
html:root body .form-group :is(input, textarea) { background: var(--sq-bg); border-color: var(--sq-line-2); color: var(--sq-ink); }
html:root body .form-group :is(input, textarea):focus { border-color: var(--sq-teal); }
html:root body .form-submit { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .form-submit:hover { background: var(--sq-teal-2); }
html:root body .form-note { color: var(--sq-ink-3); }

/* Глоссарий /faq/ */
html:root body article :is(dt, .toc strong) { color: var(--sq-ink); }
html:root body article dd { color: var(--sq-ink-2); }
html:root body article dt .abbr { color: var(--sq-teal); }
html:root body article h2 { border-top-color: var(--sq-line); }
html:root body .toc { background: var(--sq-panel); border-color: var(--sq-line); }
html:root body .section-note { color: var(--sq-ink-3); }

/* Таблицы, цены и карточки в статьях /seo/* */
html:root body :is(.price-box, .package-item, .block-card, .compare-block, .case-box, .why-card, .deliverable-card, .pricing-card, .price-breakdown) { background: var(--sq-panel); border-color: var(--sq-line); }
html:root body .case-box { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); }
html:root body :is(.priority-table, .compare-block) :is(th) { background: var(--sq-soft); color: var(--sq-ink); border-color: var(--sq-line); }
html:root body :is(.priority-table, .compare-block, article table) :is(td) { color: var(--sq-ink-2); border-color: var(--sq-line); }
html:root body [style*="background:#0d1300"], html:root body [style*="background: #0d1300"], html:root body [style*="background:#1a2e00"], html:root body [style*="background:#0a0a0a"] { background: var(--sq-teal-soft) !important; }
html:root body [style*="#2a3a00"], html:root body [style*="#1f2e00"], html:root body [style*="#1f1f1f"] { border-color: var(--sq-line) !important; }
html:root body [style*="color:#ccc"], html:root body [style*="color:#e8e8e8"], html:root body [style*="color:#999"] { color: var(--sq-ink-2) !important; }
html:root body [style*="color:#777"], html:root body [style*="color:#555"], html:root body [style*="color:#666"] { color: var(--sq-ink-3) !important; }

/* /seo/chatgpt-audit-sayta/ */
html:root body .hero-label { background: var(--sq-teal-soft); color: var(--sq-teal); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); }
html:root body .hero h1, html:root body .section-title, html:root body :is(.why-card, .deliverable-card, .step-body) :is(h3, h4) { color: var(--sq-ink); font-family: var(--sq-f-display); }
html:root body .hero h1 em { color: var(--sq-teal); }
html:root body .hero-sub, html:root body .section-sub, html:root body :is(.why-card, .step-body, .deliverable-card) p { color: var(--sq-ink-3); }
html:root body .btn-ghost { border-color: var(--sq-line-2); color: var(--sq-ink-2); }
html:root body .hero-stat, html:root body .checklist-step, html:root body .faq-item { border-color: var(--sq-line); }
html:root body .hero-stat-item .num, html:root body .pricing-card .price-main, html:root body .faq-q::after { color: var(--sq-teal); }
html:root body .hero-stat-item .lbl, html:root body .pricing-card :is(.price-meta, .price-note) { color: var(--sq-ink-3); }
html:root body .step-num { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); color: var(--sq-teal); }
html:root body .step-tag { background: var(--sq-soft); border-color: var(--sq-line); color: var(--sq-ink-3); }
html:root body .step-tag.high { background: var(--sq-bad-bg); border-color: color-mix(in srgb, var(--sq-bad) 25%, transparent); color: var(--sq-bad); }
html:root body .step-tag.med { background: var(--sq-warn-bg); border-color: color-mix(in srgb, var(--sq-warn) 25%, transparent); color: var(--sq-warn); }
html:root body .step-tag.ok { background: var(--sq-ok-bg); border-color: color-mix(in srgb, var(--sq-ok) 25%, transparent); color: var(--sq-ok); }
html:root body .price-breakdown td { color: var(--sq-ink-3); }
html:root body .price-breakdown td:last-child { color: var(--sq-ink-2); }
html:root body .price-breakdown tr.total td { color: var(--sq-ink); border-top-color: var(--sq-line); }
html:root body .price-includes li { color: var(--sq-ink-2); }
html:root body .faq-q { color: var(--sq-ink); }
html:root body .faq-a { color: var(--sq-ink-3); }
html:root body :is(.why-card .icon, .deliverable-card .d-icon) { color: var(--sq-teal); }
html:root body nav.nav-wrap { background: color-mix(in srgb, var(--sq-bg) 92%, transparent); border-color: var(--sq-line); }

/* Главная: ROI-калькулятор, фото основателя */
html:root body .roi-calc { background: var(--sq-panel); border-color: var(--sq-line); }
html:root body #roi-agency { color: var(--sq-warn); }
html:root body .founder-photo-tag { background: color-mix(in srgb, var(--sq-panel) 92%, transparent); border-color: var(--sq-line); }
html:root body .founder-photo-tag-name { color: var(--sq-ink); }
html:root body .hero-contacts a { color: var(--sq-ink); border-color: var(--sq-line-2); background: var(--sq-panel); }
html:root body svg [fill="#F5F5F0"], html:root body svg[fill="#F5F5F0"] { fill: var(--sq-ink); }
html:root body svg [fill="rgba(245,245,240,0.5)"], html:root body svg [fill="rgba(245,245,240,0.6)"] { fill: var(--sq-ink-3); }

/* 4.8 Добивка после проверки контраста */
html:root body .offer-banner { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); border-left-color: var(--sq-teal); }
html:root body .offer-banner-label { background: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .offer-banner-text { color: var(--sq-ink-2); }
html:root body .offer-banner-text strong { color: var(--sq-teal); }
html:root body .case-stat-val { color: var(--sq-teal); }
html:root body .case-stat-label { color: var(--sq-ink-3); }
html:root body article th, html:root body th { background: var(--sq-soft); color: var(--sq-ink-2); border-bottom-color: var(--sq-line); }
html:root body .notice { color: var(--sq-ink-2); border-left-color: var(--sq-teal); }
html:root body [style*="color: #c8f135"], html:root body [style*="color: #C8F135"], html:root body [style*="color:#C8F135"] { color: var(--sq-teal) !important; }
html:root body [style*="color:#bbb"], html:root body [style*="color: #bbb"], html:root body [style*="color: #ccc"], html:root body [style*="color: #e8e8e8"], html:root body [style*="color: #999"] { color: var(--sq-ink-2) !important; }
html:root body [style*="color: #888"], html:root body [style*="color: #aaa"], html:root body [style*="color: #777"], html:root body [style*="color: #666"], html:root body [style*="color: #555"] { color: var(--sq-ink-3) !important; }
html:root body .site-header { background: color-mix(in srgb, var(--sq-bg) 92%, transparent); border-bottom-color: var(--sq-line); }
html:root body .site-header .logo { color: var(--sq-ink); }
html:root body .site-header .logo span { color: var(--sq-teal); }
html:root body .site-header nav a { color: var(--sq-ink-3); }
html:root body .site-header nav a:hover { color: var(--sq-ink); }
html:root body .ap-eyebrow, html:root body .ap-hero em { color: var(--sq-teal); }

/* 4.9 Лаймовые подложки и рамки в style="" (inline) → бирюзовые; кнопка с лаймовым фоном — бирюзовая */
html:root body :is([style*="background:rgba(229,255,69" i], [style*="background: rgba(229,255,69" i], [style*="background:rgba(229, 255, 69" i], [style*="background:linear-gradient(135deg,rgba(229,255,69" i]) { background: var(--sq-teal-soft) !important; }
html:root body :is([style*="solid rgba(229,255,69" i], [style*="solid rgba(229, 255, 69" i], [style*="solid #E5FF45" i], [style*="solid #c8f135" i], [style*="border-left:3px solid var(--accent" i]) { border-color: color-mix(in srgb, var(--sq-teal) 32%, var(--sq-line)) !important; }
html:root body :is([style*="background:#E5FF45" i], [style*="background: #E5FF45" i], [style*="background:#c8f135" i], [style*="background: #c8f135" i]) { background: var(--sq-teal) !important; color: var(--sq-on-teal) !important; }
html:root body [style*="box-shadow:0 0 0 1px rgba(229,255,69" i] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sq-teal) 25%, transparent) !important; }

/* 4.10 Метки и калькулятор */
html:root body .case-badge { color: var(--sq-teal); }
html:root body .badge-yellow { color: var(--sq-warn); background: var(--sq-warn-bg); }
html:root body .badge-red { color: var(--sq-bad); background: var(--sq-bad-bg); }
html:root body .badge-green { color: var(--sq-ok); background: var(--sq-ok-bg); }
html:root body [style*="color:#ffc070" i], html:root body [style*="color:#ffa838" i] { color: var(--sq-warn) !important; }
html:root body .roi-calc { background: var(--sq-panel) !important; border-color: var(--sq-line) !important; }
html:root body .roi-calc [style*="background:#1A1A1F" i] { background: var(--sq-soft) !important; }
html:root body .roi-calc select { background: var(--sq-bg) !important; border-color: var(--sq-line-2) !important; color: var(--sq-ink) !important; }

/* 4.11 Остатки лайма после проверки */
html:root body .ap-wrap em { color: var(--sq-teal); }
html:root body [style*="color:rgba(229,255,69" i] { color: var(--sq-teal) !important; }
html:root body .cost-row.highlight { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 30%, var(--sq-line)); }
html:root body .tip-card { background: var(--sq-teal-soft); border-color: color-mix(in srgb, var(--sq-teal) 25%, var(--sq-line)); }

.sq-cta p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 4.12 Последние остатки после сплошной проверки контраста */
html:root body .results-table td.accent { color: var(--sq-teal); }
html:root body .total-row td { background: var(--sq-teal-soft); }
html:root body .skill-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 35%, var(--sq-line)); }
html:root body [style*="background:var(--accent)" i] { color: var(--sq-on-teal) !important; }
html:root body [style*="color:rgba(255,255,255,0.8)" i], html:root body [style*="color:rgba(255,255,255,.8)" i] { color: var(--sq-ink-2) !important; }
html:root body [style*="border-bottom:1px solid rgba(255,255,255,0.1)" i] { border-bottom-color: var(--sq-line) !important; }

/* ── Команда на главной: карточки в виде Satori (Денис 05.10: «режет глаз, это не стиль Satori») ──────────────
   Было: тёмные градиенты старой темы (бордовый, фиолетовый, зелёный, синий) на светлой странице — светлый верх
   переходил в тёмный низ, и текст тонул. Стало: как .sq-person — светлая панель, линия, бирюзовый квадрат-аватар,
   Unbounded для имён, Golos для текста. Только токены --sq-*, поэтому тёмная тема работает сама.
   У Тамары и Сократа цвета зашиты в style="" разметки — их перебиваем через !important. */
html:root body .anna-card, html:root body .team-card, html:root body .team-card[style] { background: var(--sq-panel) !important; border: 1px solid var(--sq-line) !important; border-radius: 16px !important; box-shadow: none; }
html:root body .team-card-header::after { display: none; }
html:root body .anna-card { background: linear-gradient(180deg, var(--sq-teal-soft) 0, var(--sq-panel) 190px) !important; border-color: color-mix(in srgb, var(--sq-teal) 26%, var(--sq-line)); }
html:root body .anna-card-header { padding: 32px 32px 20px; gap: 18px; }
html:root body .anna-card-body { padding: 0 32px 32px; }
html:root body .anna-avatar, html:root body .team-avatar { background: var(--sq-teal) !important; color: var(--sq-on-teal) !important; border: 0 !important; font: 600 20px var(--sq-f-display) !important; font-style: normal !important; border-radius: 12px; }
html:root body .anna-avatar { width: 64px; height: 64px; font-size: 24px !important; border-radius: 16px; }
html:root body .team-avatar { width: 48px; height: 48px; }
html:root body .anna-card-role, html:root body .team-card-role { font: 500 13px/1.3 var(--sq-f-body); letter-spacing: 0; text-transform: none; color: var(--sq-ink-3); }
html:root body .anna-card-name { font: 500 28px/1.15 var(--sq-f-display); letter-spacing: -.015em; color: var(--sq-ink); }
html:root body .team-card-name { font: 500 19px/1.25 var(--sq-f-display); letter-spacing: -.01em; color: var(--sq-ink); margin-bottom: 10px; }
html:root body .anna-card-desc { color: var(--sq-ink-2); }
html:root body .anna-skill, html:root body .team-skill { color: var(--sq-ink-3); }
html:root body .anna-skill { font-size: 15px; line-height: 1.5; }
html:root body .team-skill { font-size: 14px; line-height: 1.5; }
html:root body .anna-skill::before, html:root body .team-skill::before { color: var(--sq-teal); font-family: var(--sq-f-body); }
html:root body .anna-card-footer, html:root body .team-card-footer { border-top: 1px solid var(--sq-line); }
html:root body .anna-price-label, html:root body .team-card-price-from { font: 500 12px/1.3 var(--sq-f-body); letter-spacing: 0; text-transform: none; color: var(--sq-ink-3); }
html:root body .anna-price-val { font: 500 20px/1.2 var(--sq-f-display); letter-spacing: -.01em; color: var(--sq-ink); margin-top: 2px; }
html:root body .team-card-price-value { font: 600 15px/1.3 var(--sq-f-body); letter-spacing: 0; color: var(--sq-ink); }
html:root body .anna-card .btn-ghost { background: var(--sq-teal); border-color: var(--sq-teal); color: var(--sq-on-teal); }
html:root body .anna-card .btn-ghost:hover { background: var(--sq-teal-2); border-color: var(--sq-teal-2); color: var(--sq-on-teal); }
html:root body .team-card-header, html:root body .team-card-header[style] { height: auto; background: none !important; padding: 22px 22px 0; }
html:root body .team-card-body { padding: 14px 22px 22px; }
html:root body .team-card:hover { border-color: color-mix(in srgb, var(--sq-teal) 50%, var(--sq-line)) !important; transform: translateY(-2px); box-shadow: var(--sq-shadow); }
html:root body .team-card:hover .team-card-name { color: var(--sq-teal); }
html:root body .team-card-go { color: var(--sq-teal); top: 22px; right: 22px; }
@media (max-width: 900px) {
  html:root body .anna-card-header { padding: 24px 22px 16px; }
  html:root body .anna-card-body { padding: 0 22px 24px; }
}