/* FBT Online — общий стиль сайта (по макетам холста «FBT Online — страницы воронки») */
:root {
  /* Тёплая семейная тема (стр. 2–5): кремовый фон, тёмно-кофейный текст, терракота */
  --bg: #FBF6EE;
  --bg-rgb: 251, 246, 238;
  --bg-2: #F4ECE0;
  --card: #FFFDF9;
  --card-2: #FBF4EA;
  --card-3: #F1E7D8;
  --sel: #F6E4D6;
  --line: #EADFCF;
  --line-2: #E3D6C3;
  --line-3: #D9C9B2;
  --line-4: #CDBAA0;
  --line-5: #B39D80;
  --text: #2A1F18;
  --text-2: #3D2F25;
  --text-strong: #1C140F;
  --muted: #5B4C40;
  --muted-2: #4B3E34;
  --dim: #6A5A4D;
  --dim-2: #75655A;
  --accent: #C4432D;
  --accent-hover: #A93824;
  --accent-text: #A93A24;
  --on-accent: #FFFFFF;
  --ok: #6DBB87;
  --ok-text: #2A6E43;
  --on-ok: #1C140F;
  --warn: #8A5D0E;
  --lime: #8A5D0E;      /* акцент-текст (на светлом — тёмный мёд) */
  --honey: #F2C46D;     /* медовая заливка */
  --lime-bg: #F2C46D;
  --forest: #3B2A21;    /* тёплый «ореховый» контрастный блок */
  --forest-2: #4A362A;
  --paper: #F4F1EA;
  --shadow: 0 1px 2px rgba(59,42,33,.06), 0 8px 24px rgba(59,42,33,.06);
  --c-model: #E4574F;
  --c-marketing: #E9B23F;
  --c-finance: #2BA592;
  --c-time: #8B6CF6;
  --c-people: #3F95D6;
  --gutter: 24px;
  --maxw: 1120px;
  --radius: 22px;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Onest', system-ui, sans-serif;
  --hand: 'Caveat', cursive;
  color-scheme: light;
}
/* Тёплая тёмная тема (стр. 1 — видео): эспрессо вместо холодного чёрного */
.theme-dark {
  --bg: #17120F; --bg-rgb: 23, 18, 15; --bg-2: #1D1713; --card: #221B16; --card-2: #261F19; --card-3: #2D241D; --sel: #33281F;
  --line: #2F261F; --line-2: #382D25; --line-3: #43372D; --line-4: #504236; --line-5: #625244;
  --text: #F7EFE5; --text-2: #E6DACC; --text-strong: #FFFFFF; --muted: #C8B8A7; --muted-2: #D8C9B8; --dim: #AE9D8B; --dim-2: #A08F7E;
  --accent: #D2472F; --accent-hover: #E0553C; --accent-text: #F29A85; --ok: #7CC896; --ok-text: #8FD6A6; --on-ok: #17120F;
  --warn: #F2C46D; --lime: #F2C46D; --shadow: none; color-scheme: dark;
}
/* Внутри тёмных «ореховых» блоков текст светлый */
.on-dark {
  --text: #FFF8EE; --text-2: #F1E4D3; --text-strong: #FFFFFF; --muted: #E3D2BE; --muted-2: #EEDFCC; --dim: #D2BEA7; --dim-2: #C8B39B;
  --line: #56402F; --line-2: #5E4636; --line-3: #6A503E; --line-4: #7A5E49; --line-5: #8C6E57;
  --card: #45322A; --card-2: #4A362A; --card-3: #533D30; --bg-2: #33241C; --sel: #5A4333;
  --accent-text: #F6A48E; --ok-text: #9ADBB0; --lime: #F2C46D; --warn: #F2C46D; color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 17px; line-height: 1.55; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
}
img, svg { max-width: 100%; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--text-strong); }
button { font-family: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 170px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }
.acc { color: var(--accent-text); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.ok { color: var(--ok-text); }

/* ── Шапка и маршрут ─────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.hdr { height: 80px; border-bottom: 1px solid var(--line); }
.hdr .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.brand b { font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.brand i { width: 1px; height: 22px; background: var(--line-4); }
.brand span { font-size: 15px; font-weight: 500; color: var(--muted-2); }
.hdr-nav { display: flex; align-items: center; gap: 24px; }
.hdr-nav > a:not(.pill) { font-size: 15px; font-weight: 500; color: var(--muted-2); }
.hdr-nav > a:not(.pill):hover { color: var(--text); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border: 1px solid var(--line-4); border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap;
}
.pill:hover { border-color: var(--line-5); }

.route { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.route .wrap { min-height: 76px; display: flex; align-items: center; gap: 16px; }
.route-line { flex: 1 1 24px; min-width: 16px; height: 1px; background: var(--line-4); }
.step { flex-shrink: 0; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--muted-2); background: none; border: 0; padding: 0; cursor: default; }
a.step, button.step { cursor: pointer; }
.step .dot {
  width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; border: 1px solid var(--line-5); color: var(--muted); flex-shrink: 0;
}
.step .dot svg { width: 16px; height: 16px; }
.step.is-now { color: var(--text); font-weight: 600; }
.step.is-now .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.step.is-done .dot, .step.is-open .dot { background: var(--ok); border-color: var(--ok); color: var(--on-ok); font-weight: 700; }
.step.is-next { color: var(--text); font-weight: 600; }
.step.is-next .dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.step.is-muted { color: var(--muted); }
.step .u { text-decoration: underline; text-underline-offset: 4px; }
.tag { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent-text); color: var(--accent-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag--ok { background: var(--ok); border-color: var(--ok); color: var(--on-ok); font-weight: 700; }
.tag--timer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--card-3); border: 1px solid var(--line-3); font-size: 13px; color: var(--muted-2); font-weight: 400; }
.tag--timer b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.route-compact { display: none; }

/* ── Секции и типографика ───────────────────────────────── */
.sec { padding: 120px 0; border-top: 1px solid var(--line); }
.sec--tight { padding: 104px 0; }
.sec--alt { background: var(--bg-2); }
.sec--hero { padding: 72px 0 88px; border-top: 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; }
.h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.h2--xl { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.025em; }
.h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; font-weight: 600; }
.h1 > span, .h2 > span { display: block; }
.grey { color: var(--dim); }
.eyebrow + .h1, .eyebrow + .h2 { margin-top: 20px; }
.lead { margin-top: 24px; max-width: 800px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--muted); }
.sub { margin-top: 14px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); }
.text { font-size: 17px; line-height: 1.6; color: var(--muted); }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; font-size: 15px; font-weight: 500; color: var(--muted-2); }
.meta span { display: inline-flex; align-items: center; gap: 8px; }
.meta svg { width: 18px; height: 18px; color: var(--accent-text); flex-shrink: 0; }
.meta--sm { gap: 8px 18px; font-size: 14px; }
.meta--sm svg { width: 16px; height: 16px; }
.meta--lime svg { color: var(--lime); }

/* ── Кнопки ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px;
  border-radius: 999px; border: 1px solid var(--line-4); background: transparent; color: var(--text);
  font-size: 16px; font-weight: 500; cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { border-color: var(--line-5); color: var(--text-strong); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--lg { height: 68px; padding: 0 34px; font-size: 19px; }
.btn--lg svg { width: 22px; height: 22px; }
.btn--sm { height: 52px; padding: 0 22px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--locked { border-style: dashed; border-color: var(--line-5); color: var(--muted); cursor: not-allowed; font-weight: 500; }
.btn--locked:hover { border-color: var(--line-5); color: var(--muted); }
.btn--soft { background: var(--line-2); border-color: var(--line-2); font-weight: 700; }
.btn[disabled]:not(.btn--locked) { opacity: .4; cursor: not-allowed; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }
.link-arrow svg { width: 16px; height: 16px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; cursor: pointer; }
.link-quiet { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* «Жми сюда!» и пульсирующее кольцо */
.push { display: flex; align-items: center; gap: 14px; }
.push--col { flex-direction: column; align-items: flex-start; gap: 6px; }
.nudge { display: flex; flex-direction: column; align-items: flex-end; color: var(--accent-text); animation: nudge-x 1.1s ease-in-out infinite; }
.nudge span { font-family: var(--hand); font-size: 32px; line-height: 1; font-weight: 700; transform: rotate(-4deg); white-space: nowrap; }
.nudge svg { width: 84px; height: 44px; }
.push--col .nudge { flex-direction: row; align-items: center; gap: 10px; animation-name: nudge-y; margin-left: 20px; }
.push--col .nudge svg { width: 40px; height: 44px; }
.ringed { position: relative; display: inline-flex; }
.ringed::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--accent); animation: ring 1.8s ease-out infinite; }
.ringed > * { position: relative; }
@keyframes nudge-x { 0%,100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes nudge-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.14, 1.45); opacity: 0; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nudge, .ringed::before, .blink { animation: none !important; }
}

/* ── Карточки и сетки ───────────────────────────────────── */
.card { padding: 36px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.card--2 { background: var(--card-2); border-color: var(--line-2); }
.card--3 { background: var(--bg-2); border-color: var(--line-2); }
.card--accent { border-color: var(--accent-text); }
.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.num { font-family: var(--mono); font-size: 15px; color: var(--accent-text); }
.quote-ico { width: 28px; height: 22px; fill: var(--accent-text); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; } .mt-36 { margin-top: 36px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; } .mt-56 { margin-top: 56px; } .mt-64 { margin-top: 64px; }
.grow { flex-grow: 1; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-3); font-size: 15px; color: var(--muted-2); }
.chip i { width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--card-3); color: var(--dim-2); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-align: center;
}
.placeholder svg { width: 120px; height: 120px; stroke: var(--line-5); }
.cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; }

/* Прогресс-бар */
.bar { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); width: 0; transition: width .4s; }

/* ── Формы ──────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 15px; font-weight: 600; color: var(--muted-2); }
.input, .textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-4);
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1.4;
}
.textarea { resize: vertical; min-height: 96px; }
.input::placeholder, .textarea::placeholder { color: var(--dim-2); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent-text); }
.input.warn { border-color: var(--warn); }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--line-3); background: var(--bg-2); color: var(--text); font-size: 17px; text-align: left; cursor: pointer;
}
.opt .radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--line-5); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.opt[aria-checked="true"] { border-color: var(--accent-text); background: var(--sel); }
.opt[aria-checked="true"] .radio { border-color: var(--accent-text); }
.opt[aria-checked="true"] .radio::after { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  min-width: 56px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-4); background: transparent;
  color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.seg button small { font-size: 11px; font-weight: 500; color: var(--dim-2); }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--sel); }
.seg button[aria-checked="true"] small { color: var(--accent-text); }
.check { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--muted-2); font-size: 15px; text-align: left; cursor: pointer; }
.check .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-5); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--on-accent); flex-shrink: 0; }
.check[aria-checked="true"] .box { background: var(--accent); border-color: var(--accent); }
.alert { font-size: 15px; color: var(--warn); }
.note { font-size: 14px; color: var(--dim); }

/* ── Подвал ─────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); }
.foot .wrap { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--dim); padding-top: 20px; padding-bottom: 20px; }
.foot a { color: var(--muted); text-decoration: underline; }

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hide-md { display: none !important; }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .sec { padding: 80px 0; }
  .sec--tight { padding: 72px 0; }
  .sec--hero { padding: 40px 0 64px; }
  .g-3, .g-2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 28px; }
  .route-full { display: none !important; }
  .route-compact { display: flex; }
  [id] { scroll-margin-top: 140px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .hdr { height: 64px; }
  .brand { gap: 10px; }
  .brand b { font-size: 12px; letter-spacing: .12em; }
  .brand span { font-size: 14px; }
  .hdr-nav { gap: 12px; }
  .hdr-nav > a:not(.pill) { display: none; }
  .pill { height: 40px; padding: 0 14px; font-size: 14px; }
  .pill .pill-txt { display: none; }
  .sec { padding: 64px 0; }
  .sec--tight { padding: 56px 0; }
  .g-4 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 24px; }
  .btn { height: 52px; padding: 0 22px; white-space: normal; line-height: 1.2; }
  .btn--lg { height: 60px; padding: 0 24px; font-size: 17px; }
  .btn-row > .btn, .btn-row > .ringed, .btn-row > .ringed > .btn { width: 100%; }
  .nudge span { font-size: 28px; }
  .foot .wrap { flex-direction: column; justify-content: center; }
  [id] { scroll-margin-top: 130px; }
}

/* Компактный маршрут (телефон) */
.route-compact { width: 100%; flex-direction: column; padding: 14px 0 16px; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-t { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.rc-badge { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--card-3); border: 1px solid var(--line-3); font-size: 12px; color: var(--muted-2); white-space: nowrap; border-width: 1px; cursor: pointer; }
.rc-badge b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.rc-badge--ok { background: var(--ok); border-color: var(--ok); color: var(--on-ok); font-weight: 700; }
.rc-badge--acc { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.rc-line { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.rc-line b { flex-grow: 1; height: 1px; background: var(--line-4); }
.rc-line i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line-5); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-style: normal; }
.rc-line i.now { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.rc-line i.done { background: var(--ok); border-color: var(--ok); color: var(--on-ok); font-weight: 700; }
.rc-lab { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.rc-lab span:nth-child(2) { text-align: center; }
.rc-lab span:nth-child(3) { text-align: right; }
.rc-lab .now { font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
  .brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .brand i { display: none; }
  .brand b { font-size: 11px; letter-spacing: .14em; }
  .brand span { font-size: 12px; color: var(--muted); }
  .hdr-nav > a.keep { display: inline; font-size: 14px; }
  .pill { width: 44px; height: 44px; padding: 0; }
}
@media (max-width: 640px) { .hide-sm { display: none !important; } }
@media (min-width: 641px) { .only-sm { display: none !important; } }

/* Фото (заглушки сгенерированы/сток — заменяются файлами из assets/img/) */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card-3); }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,20,15,0) 40%, rgba(28,20,15,.72) 100%); pointer-events: none; }
.ph-tag { display: none; position: absolute; z-index: 3; top: 10px; right: 10px; max-width: calc(100% - 20px); padding: 4px 8px; border-radius: 6px; background: rgba(28,20,15,.78); color: #F5C451; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; line-height: 1.3; pointer-events: none; }
.is-test .ph-tag { display: block; }

/* ── v2.0 · тёплый дизайн: общие улучшения ─────────────── */
body { background: var(--bg); }
.topbar { background: rgba(var(--bg-rgb), .94); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.route { background: transparent; }
.sec--alt { background: var(--bg-2); }
.h1, .h2, .h2--xl { color: var(--text-strong); text-wrap: balance; }
.lead, .sub, .text { text-wrap: pretty; }
.eyebrow { color: var(--accent-text); }
.btn--primary { box-shadow: 0 6px 18px rgba(196,67,45,.22); }
.theme-dark .btn--primary { box-shadow: none; }
.link-quiet { font-size: 15px; }
/* Тихая ссылка вместо кнопки-пилюли в шапке (стр. 1–3: главное действие — на странице) */
.hdr-quiet { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--muted-2); }
.hdr-quiet svg { width: 16px; height: 16px; }
.hdr-quiet:hover { color: var(--text); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hdr { height: 56px; }
  .hdr-quiet { display: none; }
  /* Маршрут на телефоне: одна строка + тонкая шкала вместо трёх рядов (было ~130 px, стало ~56 px) */
  .route-compact { padding: 8px 0 10px; }
  .rc-t { font-size: 12px; }
  .rc-line { margin-top: 8px; gap: 4px; }
  .rc-line b { display: none; }
  .rc-line i { flex: 1 1 0; width: auto; height: 4px; border: 0; border-radius: 2px; background: var(--line-3); font-size: 0; color: transparent; }
  .rc-line i.now { background: var(--accent); }
  .rc-line i.done { background: var(--ok); }
  .rc-lab { display: none; }
  [id] { scroll-margin-top: 120px; }
}
html { overflow-x: clip; }

/* v2.5 · логотип Impact Consulting в шапке */
.brand-logo { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
@media (max-width: 640px) {
  .brand { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 1px; align-items: center; }
  .brand-logo { grid-row: 1 / 3; width: 30px; height: 30px; }
}
/* v2.5 · видеоотзывы (общий блок) */
.revs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.rv { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; color: var(--text); font: inherit; }
.rv-cover { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--card-3); box-shadow: var(--shadow); }
.rv-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.rv-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,20,15,0) 55%, rgba(28,20,15,.55)); }
.rv:hover .rv-cover img { transform: scale(1.04); }
.rv-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(196,67,45,.45); }
.rv-play svg { width: 24px; height: 24px; margin-left: 3px; }
.rv-t { display: flex; flex-direction: column; gap: 2px; }
.rv-t b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.rv-t span { font-size: 14px; color: var(--dim); }
.rv-modal { position: fixed; inset: 0; z-index: 100; background: rgba(20,14,10,.86); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rv-box { position: relative; height: min(88vh, 780px); aspect-ratio: 9 / 16; max-width: 100%; }
.rv-box iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; background: #000; }
.rv-x { position: absolute; top: -8px; right: -8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #1C140F; font-size: 26px; line-height: 1; cursor: pointer; z-index: 1; }
html.rv-open { overflow: hidden; }
.theme-dark .rv-t span { color: var(--dim); }
@media (max-width: 1080px) { .revs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .revs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .revs::-webkit-scrollbar { display: none; }
  .rv { flex: 0 0 62%; scroll-snap-align: start; }
  .rv-x { top: 6px; right: 6px; }
}

/* ───────── v2.6 · цветовое правило блоков ─────────
   ИСТОРИЯ (Люба, ARTICON, её слова)  → терракота: метка .tag-story, коробка .storybox, цитата .lquote
   МЕТОДОЛОГИЯ (как устроен бизнес)   → мёд + орех: метка .tag-method
   ДЕЙСТВИЕ (кнопки, следующий шаг)   → красная кнопка / зелёный «готово»                     */
.tag-tone { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.tag-tone::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.tag-story { background: rgba(196,67,45,.1); color: var(--accent-text); }
.tag-method { background: rgba(242,196,109,.28); color: #7A4F0A; }
.theme-dark .tag-story { background: rgba(242,154,133,.12); }
.theme-dark .tag-method { background: rgba(242,196,109,.14); color: var(--honey); }
.tag-tone + .h1, .tag-tone + .h2 { margin-top: 20px; }

/* Коробка истории */
.storybox { position: relative; padding: 40px 44px 44px; border-radius: 28px; background: #FBEDE4; border: 1px solid #F0D5C6; box-shadow: inset 5px 0 0 var(--accent); }
.storybox .wrong-h { margin-top: 20px; max-width: 720px; }
.wrong-steps { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.wrong-steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 16px; border-radius: 18px; background: #FFFDF9; border: 1px solid #F0D5C6; }
.wrong-steps i { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #F6DCCF; color: var(--accent-text); font-style: normal; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.wrong-steps li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.wrong-steps small { font-size: 14px; color: var(--dim); }
.wrong-steps b { font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--text); text-decoration: line-through; text-decoration-color: rgba(196,67,45,.55); text-decoration-thickness: 2px; }
.wrong-steps s { text-decoration: none; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(196,67,45,.12); color: var(--accent-text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.storybox .wrong-ph { border-radius: 20px; overflow: hidden; margin-top: 24px; }
.storybox .wrong-foot { margin-top: 32px; padding-top: 0; border-top: 0; }
.wrong-pre { font-size: 17px; font-weight: 600; color: var(--accent-text); }
.storybox .wrong-big { font-size: clamp(40px, 6.4vw, 84px); }
.wrong-next { margin-top: 32px; }

/* Цитата Любы */
.lquote { position: relative; max-width: 920px; padding: 36px 40px; border-radius: 28px; background: #FBEDE4; border: 1px solid #F0D5C6; box-shadow: inset 5px 0 0 var(--accent); }
.lquote blockquote { position: relative; margin-top: 22px; }
.lquote .quote-ico { width: 44px; height: 36px; fill: var(--accent); opacity: .22; display: block; margin-bottom: 10px; }
.lquote-main { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: var(--text-strong); }
.lquote-sub { margin-top: 14px; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--muted); }
.lquote-foot { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(196,67,45,.18); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px; }
.lquote-who { display: inline-flex; align-items: center; gap: 12px; }
.lquote-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 2px solid var(--accent); }
.lquote-who > span { display: flex; flex-direction: column; line-height: 1.25; }
.lquote-who b { font-size: 17px; font-weight: 700; color: var(--text); }
.lquote-who small { font-size: 14px; color: var(--dim); }
.theme-dark .lquote, .theme-dark .storybox { background: linear-gradient(135deg, #2E1D17, #241915); border-color: #4A2E24; }
.theme-dark .lquote-foot { border-top-color: rgba(242,154,133,.18); }
.tone-story.bigquote { box-shadow: inset 5px 0 0 var(--accent); }

@media (max-width: 900px) { .wrong-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .storybox { padding: 26px 20px 28px 24px; border-radius: 22px; }
  .lquote { padding: 26px 20px 26px 24px; border-radius: 22px; }
  .lquote-foot .btn { width: 100%; white-space: normal; height: auto; min-height: 56px; padding: 12px 18px; }
  .wrong-steps b { font-size: 18px; }
}

/* ───────── v2.6 · отзывы: играют прямо в карусели + «на весь экран» ───────── */
.rv { cursor: default; }
.rv-cover { cursor: pointer; }
.rv-cover iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; z-index: 2; }
.rv.is-on .rv-cover::after, .rv.is-on .rv-play, .rv.is-on .rv-cover img { display: none; }
.rv-play { border: 0; padding: 0; cursor: pointer; }
.rv-full { position: absolute; z-index: 3; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(28,20,15,.62); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rv-full svg { width: 20px; height: 20px; }
.rv-full:hover { background: rgba(28,20,15,.82); }
@media (max-width: 640px) { .revs { scroll-padding-inline: var(--gutter); } }

/* v3.0 · Подвал — ровно по центру, без рваных переносов */
.foot .wrap > span:first-child { text-wrap: balance; }
.foot-c { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: .35em; }
.foot-c > span { white-space: nowrap; }
@media (max-width: 640px) {
  .foot .wrap { align-items: center; text-align: center; gap: 8px; }
}

/* 05.10 · отзывы: 8 штук, сетка 4 × 2; на телефоне два ряда листаются вбок */
.revs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px 16px; }
@media (max-width: 760px) {
  .revs { display: grid !important; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none !important; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px 12px; }
  .revs .rv { flex: none; scroll-snap-align: start; }
}