/* =========================================================
   saxonov-marketing.ru
   Aesthetic lane: Premium technical paper
   Voice: Honed · Accountable · Plainspoken
   Color: warm off-white + deep oxblood accent
   Type: Sora (single family, weight contrast)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  /* Color */
  --bg:              oklch(0.98 0.005 60);
  --surface:         oklch(0.96 0.006 60);
  --surface-sunken:  oklch(0.94 0.008 60);
  --surface-dark:    oklch(0.25 0.018 30);

  --text:            oklch(0.20 0.012 30);
  --text-muted:      oklch(0.45 0.010 30);
  --text-faint:      oklch(0.62 0.008 35);
  --text-on-dark:    oklch(0.95 0.005 60);
  --text-on-dark-muted: oklch(0.70 0.008 50);

  --border:          oklch(0.88 0.008 50);
  --border-strong:   oklch(0.78 0.010 50);
  --border-on-dark:  oklch(0.32 0.012 35);

  --accent:          oklch(0.42 0.13 22);
  --accent-hover:    oklch(0.36 0.13 22);
  --accent-strong:   oklch(0.30 0.13 22);
  --accent-subtle:   oklch(0.96 0.04 22);

  --success:         oklch(0.55 0.12 145);
  --danger:          oklch(0.55 0.18 25);

  /* Type scale (compact) */
  --text-xs:    clamp(0.75rem,  0.7rem   + 0.2vw,  0.8125rem);
  --text-sm:    clamp(0.8125rem, 0.78rem + 0.2vw,  0.9rem);
  --text-base:  clamp(0.9375rem, 0.9rem  + 0.2vw,  1rem);
  --text-lg:    clamp(1.0625rem, 1rem    + 0.3vw,  1.1875rem);
  --text-xl:    clamp(1.25rem,  1rem     + 0.7vw,  1.625rem);
  --text-2xl:   clamp(1.625rem, 1.2rem   + 1.4vw,  2.25rem);
  --text-3xl:   clamp(1.875rem, 1.3rem   + 2vw,    2.75rem);
  --text-4xl:   clamp(2.25rem,  1.4rem   + 3vw,    3.75rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-narrow: 720px;
  --container:        1140px;
  --container-wide:   1320px;
  --container-pad:    clamp(1rem, 4vw, 2rem);

  /* Section padding (fluid, compact) */
  --section-y:    clamp(2.5rem, 2.5vw + 1.5rem, 4rem);
  --section-y-lg: clamp(3rem,   3vw   + 1.5rem, 5rem);

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 12px;

  /* Motion */
  --easing: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 200ms var(--easing);

  /* Fonts */
  --font: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Reset + Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  hanging-punctuation: first last;
}

body {
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  font-feature-settings: "ss01" on, "cv01" on;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

p, li {
  text-wrap: pretty;
  max-width: 70ch;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

a:hover { color: var(--accent); }

::selection {
  background: var(--accent);
  color: var(--text-on-dark);
}

/* ─── Layout primitives ──────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container); }   /* alias to default for visual consistency */

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--lg     { padding-block: var(--section-y-lg); }
.section--sunken { background: var(--surface-sunken); }
.section--dark   { background: var(--surface-dark); color: var(--text-on-dark); }
.section--accent { background: var(--accent); color: var(--text-on-dark); }
.section--accent .eyebrow { color: var(--text-on-dark); opacity: 0.85; }
.section--accent .finale__title { color: var(--text-on-dark); }
.section--accent .finale__desc { color: var(--text-on-dark); opacity: 0.85; }
.section--accent .finale__list { color: var(--text-on-dark); }
.section--accent .finale__list li::before { color: var(--text-on-dark); }
.section--accent .finale__micro { color: var(--text-on-dark); opacity: 0.75; }
.section--accent .btn--secondary { color: var(--text-on-dark); border-color: var(--text-on-dark); }
.section--accent .btn--secondary:hover { background: var(--text-on-dark); color: var(--accent); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 {
  color: var(--text-on-dark);
}

/* Section eyebrow label */
.eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.section--dark .eyebrow {
  color: oklch(0.75 0.10 22);
}

/* Heading levels */
.h-display {
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.h-section {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}

.h-page {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.h-sub {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 60ch;
}

.section--dark .lead { color: var(--text-on-dark-muted); }

/* Number / metric span */
.num {
  font-feature-settings: "tnum" on, "cv11" on;
  font-variant-numeric: tabular-nums;
}

.accent { color: var(--accent); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-dark);
}
.btn--primary:hover { background: var(--accent-hover); color: var(--text-on-dark); }

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn--secondary:hover {
  background: var(--text);
  color: var(--bg);
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
  padding: 14px 0;
}
.btn--ghost:hover { color: var(--accent-hover); }

.btn--lg { padding: 18px 36px; font-size: var(--text-lg); }
.btn--sm { padding: 10px 20px; font-size: var(--text-sm); }

.section--dark .btn--secondary {
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
}
.section--dark .btn--secondary:hover {
  background: var(--text-on-dark);
  color: var(--surface-dark);
}

.btn-arrow::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--transition);
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ─── Forms ──────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.input {
  height: 52px;
  padding: 0 18px;
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--transition);
  width: 100%;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
}

.input::placeholder { color: var(--text-faint); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

.consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.2em;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.consent a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.2em;
}
.consent a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.form-error {
  display: block;
  font-size: var(--text-sm);
  color: var(--danger);
  margin-top: var(--space-2);
}

/* ─── Header ─────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(from var(--bg) l c h / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: transform 280ms var(--easing), border-color var(--transition);
}

.header.scrolled {
  border-bottom-color: var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 72px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.brand__name {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand__role {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.brand--with-logo {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.brand__logo {
  height: 64px;
  width: auto;
  flex-shrink: 0;
  /* The SVG has ~20% empty space on the left of the mark (viewBox 0–14
     before the shape begins). Shift it left so the visible logo lines up
     with the container's left edge, matching the rest of the site grid. */
  margin-left: -11px;
}

.brand--with-logo .brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  justify-content: center;
}

.nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.nav a:hover { color: var(--text); }

/* CTA-кнопка в навигации: видна только в мобильном выезжающем меню.
   Цвет текста перебиваем правило .nav a (иначе текст кнопки становится muted-серым,
   неконтрастным на бордовом фоне). Делаем как у btn--primary на первом экране. */
.nav__cta { display: none; }
.nav a.nav__cta,
.nav a.nav__cta:hover { color: var(--text-on-dark); }

.nav__group {
  position: relative;
}

.nav__group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 10px 32px oklch(0.18 0.015 35 / 0.12);
  min-width: 320px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms var(--easing), transform 180ms var(--easing);
  z-index: 60;
}

.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__dropdown a {
  display: block;
  padding: 8px 12px;
  color: var(--text);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.nav__dropdown a:hover {
  background: var(--surface-sunken);
  color: var(--accent);
}

.header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.header__phone {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.burger {
  display: none;
  padding: 8px;
  border-radius: var(--r-sm);
  color: var(--text);
}

@media (max-width: 1024px) {
  .header__phone { display: none; }
}

@media (max-width: 880px) {
  .nav {
    position: fixed;
    inset: 72px 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-8) var(--container-pad);
    background: var(--bg);
    border-top: 1px solid var(--border);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 300ms var(--easing), opacity 300ms var(--easing);
    gap: var(--space-6);
    z-index: 49;
  }
  .nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav a { font-size: var(--text-lg); }
  .nav__dropdown { display: none; }
  .nav__cta {
    display: inline-flex;
    margin-top: var(--space-4);
    font-size: var(--text-base);
  }
  .burger { display: inline-flex; }
  .header__cta .btn { display: none; }
  /* backdrop-filter создаёт containing block для position:fixed, из-за чего мобильное
     меню привязывалось к шапке (высота ~72px) вместо экрана и оставалось без фона.
     На мобиле размытие отключаем — у шапки есть свой фон, меню растягивается на весь экран. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Умная шапка: прячется вверх при листании вниз (управляется из app.js) */
  .header.header--hidden { transform: translateY(-100%); }
}

/* ─── Hero — locked "Газетная шапка" layout ───────────────── */
.hero {
  padding-block: clamp(2.5rem, 3vw + 1rem, 4rem) clamp(2rem, 2vw + 1rem, 3rem);
  position: relative;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas:
    "rating photo"
    "text   photo";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
  align-items: start;
}
.hero__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Rating plate — real anchor link with hover state, sits above the title at
   roughly the spot where the old «Не агентство» line lived. */
.hero__rating {
  grid-area: rating;
  align-self: flex-start;
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: clamp(3rem, 4vw, 4.5rem);
  margin-bottom: calc(var(--space-4) + 4px);
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  background: transparent;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}
.hero__rating-meta { font-variant-numeric: tabular-nums; }
.hero__rating:hover,
.hero__rating:focus-visible {
  background: var(--accent);
  color: var(--text-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px oklch(0.42 0.13 22 / 0.22);
  outline: none;
}
.hero__rating:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px oklch(0.42 0.13 22 / 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .hero__rating { transition: background 120ms ease, color 120ms ease; }
  .hero__rating:hover,
  .hero__rating:focus-visible { transform: none; box-shadow: none; }
}
.hero__title {
  font-size: clamp(1.85rem, 1.2rem + 1.9vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
  max-width: 18ch;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
  white-space: nowrap;
}
.hero__sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  max-width: 52ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "text"
      "rating";
    grid-template-rows: auto auto auto;
    row-gap: var(--space-6);
  }
  .hero__rating { margin-top: 0; margin-bottom: 0; }
  .hero__title { max-width: none; }
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Legacy hero__top — kept around for backward compat with older snapshots but
   no longer rendered; the locked-in markup uses .hero__rating instead. */
.hero__top { display: none; }

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
}

.metric__val {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.metric__val-suffix {
  font-weight: 500;
  color: var(--text-muted);
}

.metric__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 22ch;
}

/* ─── Metrics band: архивный штемпель ──────────────────── */
.metrics-band {
  padding-block: var(--space-10);
}

.metrics-band .hero__metrics {
  gap: var(--space-6);
}

.metrics-band .metric {
  position: relative;
  border: 1px solid color-mix(in oklch, var(--accent), transparent 30%);
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg);
}

.metrics-band .metric::before,
.metrics-band .metric::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in oklch, var(--accent), transparent 30%);
  background: var(--bg);
}

.metrics-band .metric::before {
  top: -7px;
  left: -7px;
  border-right: 0;
  border-bottom: 0;
}

.metrics-band .metric::after {
  bottom: -7px;
  right: -7px;
  border-left: 0;
  border-top: 0;
}

.metric__stamp {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Code", monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.metrics-band .metric__val {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.metrics-band .metric__val-suffix {
  color: var(--accent-strong);
  font-weight: 500;
}

.metrics-band .metric__label {
  color: var(--text-muted);
  margin: 0;
}

.metrics-band .metric__label a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--transition);
}

.metrics-band .metric__label a:hover {
  color: var(--accent-hover);
}

/* ─── Section heading group ──────────────────────────────── */
.section__head {
  margin-bottom: var(--space-8);
  max-width: 60ch;
}

.section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ─── Cases (главный раздел: list, not grid) ─────────────── */
.cases__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.case-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: padding-inline var(--transition), background var(--transition);
}

.case-row:hover {
  background: var(--surface);
  padding-inline: var(--space-3);
}

.case-row:hover .case-row__name { color: var(--accent); }

.case-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.case-row__industry {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.case-row__name {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.case-row__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 55ch;
  margin-top: var(--space-1);
}

.case-row__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  flex-shrink: 0;
}

.case-row__metric-val {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--accent);
  white-space: nowrap;
}

.case-row__metric-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Case metric: accent-coloured value + uppercase tracked label. Locked from
   the "Гибрид" picker variant — same row structure as before, just a louder
   metric column so the numbers read first. */
.case-row__metric { gap: 4px; }
.case-row__metric-val {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.case-row__metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

@media (max-width: 720px) {
  .case-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .case-row__metric {
    align-items: flex-start;
    text-align: left;
  }
}

.cases__more {
  margin-top: var(--space-8);
  display: flex;
  justify-content: flex-start;
}

/* ─── Problems (5 цитат, 2 колонки asymmetric) ───────────── */
.problems__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12) var(--space-16);
  margin-top: var(--space-12);
}

.problem {
  position: relative;
  padding-left: var(--space-10);
}

.problem__num {
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.problem__text {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--text);
  max-width: none;
}

@media (max-width: 720px) {
  .problems__grid {
    grid-template-columns: 1fr;
  }
}

.problems__answer {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  max-width: 50ch;
}

.problems__answer strong {
  color: var(--accent);
  font-weight: 700;
}

/* ─── Benefits / "Чем полезен" — большие текстовые блоки ─── */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12) var(--space-16);
}

.benefit__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
  position: relative;
  padding-left: var(--space-8);
}

.benefit__title::before {
  content: counter(benefit-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
}

.benefits { counter-reset: benefit-counter; }
.benefit  { counter-increment: benefit-counter; }

.benefit__desc {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: var(--space-8);
  max-width: none;
}

@media (max-width: 720px) {
  .benefits { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ─── Guarantees ──────────────────────────────────────────
   Row layout: pill | title | description, separated by hairlines.
   Replaces the original 3-up card grid. */
.guarantees {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.guarantee {
  display: grid;
  grid-template-columns: 140px 1fr 2fr;
  column-gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

.guarantee:last-child { border-bottom: 1px solid var(--border); }

.guarantee__pill {
  align-self: baseline;
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  width: fit-content;
}

.guarantee__title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

.guarantee__desc {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: none;
  margin: 0;
}

.guarantees__cta {
  margin-top: var(--space-12);
}

@media (max-width: 720px) {
  .guarantee {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
}

/* ─── Pricing (table-like, not card grid) ────────────────── */
.pricing__list {
  border-top: 1px solid var(--border);
}

.price-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr auto;
  gap: var(--space-4) var(--space-10);
  align-items: start;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.price-row__name {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.price-row__includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.5;
}

.price-row__includes li {
  position: relative;
  padding-left: var(--space-5);
  max-width: none;
}

.price-row__includes li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

.price-row__action {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
  width: 240px;
}

.price-row__action .btn {
  min-width: 150px;
  width: 100%;
  text-align: center;
  justify-content: center;
}

.price-row__price {
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
}

.price-row__price span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

@media (max-width: 880px) {
  .price-row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .price-row__action {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
  }
}

/* ─── About (Сергей) ─────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Reversed: text reads on the left, visual on the right. Inner <div>s
     reset to ltr so their own content flows normally. */
  direction: rtl;
  gap: var(--space-16);
  align-items: center;
}

.about > * { direction: ltr; }

.about__photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 5;
  display: flex;
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about__quote {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  margin-block: var(--space-6);
  padding-left: 40px;
  border-left: none;
  position: relative;
}

.about__quote::before {
  content: "\201E";
  position: absolute;
  left: 0;
  top: -0.25em;
  font-size: 2.2em;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}

.about__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.about__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.about__item:last-child { border-bottom: none; padding-bottom: 0; }

.about__item strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}

.about__item span {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

/* About video (видеовизитка) — offset accent frame, matches hero photo */
.about__video-frame {
  position: relative;
  isolation: isolate;
}
.about__video-frame::before {
  content: "";
  position: absolute;
  inset: 4% -4% -4% 14%;
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 880px) {
  .about__video-frame::before { inset: -8px 8px 8px -8px; }
}

.about__video {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 9;
  cursor: pointer;
}

.about__video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(0.95) brightness(1.02);
  transition: filter var(--transition);
}

/* === Фильтр кейсов === */
.cases__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.cases__filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.cases__filter-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.cases__filter-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cases__filter-btn--active:hover {
  color: #fff;
}

/* При фильтре !== all раскрываем скрытые кейсы и прячем кнопку "Показать ещё" */
.cases__list--filtered .cases__rest {
  display: contents !important;
}
.cases__list--filtered .cases__rest[hidden] {
  display: contents !important;
}
.case-row.case-row--hidden {
  display: none !important;
}
.cases__more.cases__more--hidden {
  display: none !important;
}
.about__video:hover .about__video-iframe {
  filter: grayscale(0);
}

.about__video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: none;
}

.about__video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
  box-shadow: 0 8px 24px rgba(28, 30, 43, 0.25);
}

.about__video-play svg {
  width: 32px;
  height: 32px;
  margin-left: 4px; /* визуальный центр треугольника */
}

.about__video:hover .about__video-play { background: var(--accent-hover); transform: scale(1.05); }

.about__video-tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: 6px 12px;
  background: rgba(28, 30, 43, 0.85);
  color: var(--text-on-dark);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.about__video--placeholder {
  cursor: default;
}

.about__video--placeholder .about__video-play {
  opacity: 0.7;
  cursor: default;
}

.about__video--placeholder:hover .about__video-play {
  background: var(--accent);
  transform: none;
}

@media (max-width: 880px) {
  .about { grid-template-columns: 1fr; gap: var(--space-10); }
  .about__photo, .about__video { max-width: 360px; }
}

/* ─── Reviews ────────────────────────────────────────────── */
.reviews-intro {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--space-12);
}

.reviews-intro__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reviews-intro__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.reviews-intro__rating {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.reviews-intro__stars {
  color: var(--accent);
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
  line-height: 1;
}

.reviews-intro__meta {
  font-size: var(--text-base);
  color: var(--text-muted);
}

.reviews-intro__cta {
  margin-left: auto;
}

@media (max-width: 720px) {
  .reviews-intro__cta { margin-left: 0; }
}

.reviews__widget {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  height: 480px;
}

.reviews__widget iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.reviews__quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.review__stars {
  color: var(--accent);
  letter-spacing: 0.1em;
  font-size: var(--text-base);
}

.review__text {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  max-width: none;
}

.review__author {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review__author strong { color: var(--text); font-weight: 600; }

@media (max-width: 720px) {
  .reviews__quotes { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ─── Channels (где cards оправданы) ─────────────────────── */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.channel {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.channel:hover { border-color: var(--accent); background: var(--bg); color: var(--text); }

.channel__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.channel__icon svg { width: 100%; height: 100%; }

.channel__name {
  font-size: var(--text-lg);
  font-weight: 700;
}

.channel__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq__group {
  margin-bottom: var(--space-12);
}

.faq__group-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--text);
  user-select: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-weight: 400;
  color: var(--accent);
  font-size: var(--text-2xl);
  line-height: 1;
  margin-top: -0.1em;
  transition: transform var(--transition);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item-body {
  padding-bottom: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 65ch;
}

/* ─── CTA blocks ─────────────────────────────────────────── */
.cta-band {
  background: var(--surface);
  padding: var(--space-12) var(--space-8);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.cases__cta {
  margin-top: var(--space-10);
}

@media (min-width: 720px) {
  .cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
}

.cta-band__text {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  max-width: 50ch;
  color: var(--text);
}

.inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 720px) {
  .inline-form {
    width: 300px;
  }
}

.inline-form .btn {
  width: 100%;
}

/* центрированная встроенная форма (плашка после кейсов):
   текст в одну строку по центру, ниже поле + кнопка по центру, чекбокс по центру */
.cta-form-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  width: 100%;
  max-width: none;
}
.cta-form-c__text {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  white-space: nowrap;
}
.cta-form-c__row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  justify-content: center;
}
.cta-form-c__row .field { margin: 0; }
.cta-form-c__row .input { width: 320px; }
.cta-form-c .btn { width: auto; white-space: nowrap; }
.cta-form-c .consent { margin: 0; }
@media (max-width: 720px) {
  .cta-form-c__text { white-space: normal; }
  .cta-form-c__row { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-form-c__row .input { width: 100%; }
  .cta-form-c .btn { width: 100%; }
  /* чекбокс вплотную к тексту: текст влево, группа компактная по центру */
  .cta-form-c .consent { text-align: left; max-width: 21rem; }
}

/* красная плашка формы после кейсов — цвета и кнопка как у финального CTA (.section--accent) */
.cases__cta { background: var(--accent); }
.cases__cta .cta-form-c__text { color: var(--text-on-dark); }

/* форма в конце поста блога (AGE-532): длинный текст переносится, отступ как у старого .post__cta */
.post__cta-band { margin-block-start: var(--space-16); }
.post__cta-band .cta-form-c__text { white-space: normal; max-width: 56ch; }
.cases__cta .consent { color: var(--text-on-dark); }
.cases__cta .consent a { color: var(--text-on-dark); text-decoration-color: var(--text-on-dark); }
.cases__cta .btn--primary { background: transparent; color: var(--text-on-dark); border-color: var(--text-on-dark); }
.cases__cta .btn--primary:hover { background: var(--text-on-dark); color: var(--accent); }

.finale__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 720px) {
  .finale__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.finale__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
  color: var(--text-on-dark);
}

.finale__desc {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
  margin-bottom: 0;
}

.finale__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
  color: var(--text-on-dark);
}

.finale__list li {
  position: relative;
  padding-left: var(--space-6);
  max-width: none;
}

.finale__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: oklch(0.75 0.10 22);
}

.finale__action {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.finale__micro {
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
}

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--surface);
  padding-block: var(--space-16) var(--space-10);
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__brand .brand { margin-bottom: var(--space-4); color: var(--text); }
.footer__brand p { color: var(--text-muted); line-height: 1.5; max-width: 32ch; }

/* Footer brand: same logo size + gap as the header. Logo's intrinsic
   left whitespace is already compensated globally on .brand__logo. */

.footer__heading {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__links a { color: var(--text-muted); }
.footer__links a:hover { color: var(--accent); }

.footer__heading--sub {
  margin-block-start: var(--space-6);
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-dark);
  transition: background var(--transition), transform var(--transition);
}

.footer__social:hover {
  background: var(--accent-hover);
  color: var(--text-on-dark);
  transform: translateY(-1px);
}

.footer__social svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer__legal {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ─── Popup ──────────────────────────────────────────────── */
.popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--easing);
}

.popup.is-open {
  opacity: 1;
  pointer-events: auto;
}

.popup__overlay {
  position: absolute;
  inset: 0;
  background: oklch(0.18 0.015 35 / 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.popup__dialog {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--space-10) var(--space-8);
  transform: translateY(20px);
  transition: transform 280ms var(--easing);
  box-shadow: 0 30px 80px oklch(0.18 0.015 35 / 0.25);
}

.popup.is-open .popup__dialog { transform: translateY(0); }

.popup__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}

.popup__close:hover { background: var(--surface); color: var(--text); }

.popup__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.popup__lead {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-6);
  max-width: none;
}

.popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.popup__form .btn {
  width: 100%;
  margin-top: var(--space-2);
}

.popup__micro {
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
  margin-top: var(--space-2);
  max-width: none;
}

/* ─── Промо-режим автовсплывашки (упрощён, AGE-535) ─────── */
.popup--promo .popup__dialog { text-align: left; display: flex; flex-direction: column; }
.popup--promo .popup__micro { display: none; }
.popup--promo .popup__lead { margin-bottom: var(--space-5); }

/* аватарка слева от заголовка: видна только в авто-всплывашке */
.popup__head-row { display: flex; align-items: center; gap: var(--space-4); }
.popup__avatar { display: none; }
.popup--promo .popup__avatar {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--surface);
  box-shadow: 0 4px 14px oklch(0.18 0.015 35 / 0.18);
  flex-shrink: 0;
}

/* поле сайта деактивировано чекбоксом «У меня нет сайта» */
.popup__form #f-site:disabled {
  opacity: 0.5;
  background: var(--surface);
  cursor: not-allowed;
}
/* текст напротив чекбокса по центру (оба чекбокса попапа) */
.popup__form .consent { align-items: center; }
.popup__form .consent input[type="checkbox"] { margin-top: 0; }

/* ─── Мессенджеры в попапе (Telegram / MAX) ───────────────── */
.popup__messengers { margin-top: var(--space-4); }
.popup__messengers-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-align: center;
}
.popup__messengers-label::before,
.popup__messengers-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.popup__messengers-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.popup__messenger-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px var(--space-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: transform 160ms var(--easing), background 160ms var(--easing);
}
.popup__messenger-btn svg { display: block; flex-shrink: 0; }
.popup__messenger-btn:hover { transform: translateY(-1px); }
.popup__messenger-btn--tg,
.popup__messenger-btn--max {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.popup__messenger-btn--tg:hover,
.popup__messenger-btn--max:hover { background: var(--bg); border-color: var(--border-strong); }

/* в промо-режиме оставляем телефон/Telegram + мессенджеры (AGE-535) */
.popup--promo .field--site,
.popup--promo .field--email,
.popup--promo .consent--no-site { display: none; }

body.popup-open { overflow: hidden; }

/* ─── Cookie banner ──────────────────────────────────────── */
.cookie {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 90;
  max-width: 540px;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px oklch(0.18 0.015 35 / 0.25);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transform: translateY(120%);
  transition: transform 320ms var(--easing);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.cookie.is-visible { transform: translateY(0); }

.cookie a { color: var(--text-on-dark); text-decoration: underline; }
.cookie a:hover { color: oklch(0.85 0.08 22); }

.cookie__btn {
  flex-shrink: 0;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--text-on-dark);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--text-xs);
  transition: background var(--transition);
}

.cookie__btn:hover { background: var(--accent-hover); }

/* ─── Sticky CTA mobile ──────────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 80;
  display: none;
  padding: 14px 24px;
  background: var(--accent);
  color: var(--text-on-dark);
  text-align: center;
  font-weight: 600;
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px oklch(0.42 0.13 22 / 0.35);
  text-decoration: none;
  transform: translateY(120%);
  transition: transform 280ms var(--easing);
}

.sticky-cta.is-visible { transform: translateY(0); }
/* Умная кнопка: спрятана вниз при листании вниз (управляется из app.js) */
.sticky-cta.is-visible.sticky-cta--hidden { transform: translateY(120%); }

@media (max-width: 720px) {
  .sticky-cta { display: block; }
}

/* ─── Reveal ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
}

.reveal.visible {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--easing), transform 600ms var(--easing);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─── Case page ─────────────────────────────────────────── */
.case-page__head {
  padding-block: clamp(3rem, 6vw + 1rem, 6rem) clamp(2rem, 4vw + 1rem, 4rem);
}

.case-page__back {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.case-page__back:hover { color: var(--accent); }

.case-page__industry {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.case-page__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
  max-width: 18ch;
}

.case-page__lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 60ch;
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-block: var(--space-12);
}

.case-metric__val {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: var(--space-1);
}

.case-metric__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.case-body {
  max-width: 65ch;
}

.case-body h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  letter-spacing: -0.015em;
}

.case-body p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  margin-bottom: var(--space-4);
  max-width: 65ch;
}

.case-body p strong { color: var(--text); }

/* ─── Legal/Service pages ────────────────────────────────── */
.legal {
  max-width: 65ch;
}

.legal h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
  line-height: 1.1;
}

.legal h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}

.legal p, .legal li {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: var(--space-4);
  max-width: 65ch;
}

.legal ul {
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
}

.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal a:hover { color: var(--accent-hover); }

/* ─── 404 ────────────────────────────────────────────────── */
.notfound {
  padding-block: var(--section-y-lg);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}

.notfound__code {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-4);
  letter-spacing: -0.04em;
}

.notfound__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.notfound__desc {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.notfound__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}


/* ─── Hero photo (locked-in layout, badge anchor removed) ─── */
.hero__photo {
  grid-area: photo;
  position: relative;
  isolation: isolate;
}

.hero__photo::before {
  /* офсетная рамка-плашка позади портрета (Premium technical paper, book plate) */
  content: "";
  position: absolute;
  inset: 4% -4% -4% 14%;
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  z-index: -1;
  pointer-events: none;
}

.hero__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--surface);
}

@media (max-width: 880px) {
  .hero__photo {
    max-width: 360px;
    margin-top: 0;
  }
  .hero__photo::before { inset: -8px 8px 8px -8px; }
}

/* ─── Certificates ──────────────────────────────────────── */
.certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.cert {
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cert:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cert img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.cert--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 49%, var(--border) 49%, var(--border) 51%, transparent 51%);
  opacity: 0.3;
}

.certs__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ─── Videos ─────────────────────────────────────────────── */
.videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 720px)  { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Свёрнутый грид: показываем первые 6, остальные под кнопкой */
.videos--collapsed .video--extra { display: none; }
.videos__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.videos__more-btn { min-width: 240px; }

.video__title { font-size: var(--text-sm); }

.video {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text);
  transition: opacity var(--transition);
}

.video:hover { color: var(--text); }
.video:hover .video__title { color: var(--accent); }

.video__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.video {
  cursor: pointer;
}

.video__cover {
  filter: none;
}

/* Кнопка play поверх обложки (фасад: настоящий плеер грузится по клику) */
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  transition: background var(--transition), transform var(--transition);
}
.video__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.video:hover .video__play {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}


/* === Video lightbox === */
.video-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
  inset: 0;
  overflow: hidden;
}
.video-lightbox::backdrop {
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(4px);
}
.video-lightbox__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, calc((90vh - 60px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.video-lightbox__iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-lightbox__close {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--transition);
}
.video-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.video__title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  transition: color var(--transition);
}

.video__placeholder-text {
  position: absolute;
  inset: auto var(--space-3) var(--space-3) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-faint);
  z-index: 1;
}

/* ─── Blog ────────────────────────────────────────────────── */
.blog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.blog__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}

.blog-card:hover {
  border-color: var(--accent);
  color: var(--text);
}

.blog-card__meta {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.blog-card__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

.blog-card--soon {
  opacity: 0.7;
  pointer-events: none;
  cursor: default;
}

.blog-card--soon .blog-card__meta {
  color: var(--text-faint);
}


/* ─── Cases collapse ────────────────────────────────────── */
.cases__rest[hidden] { display: none; }

.cases__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.cases__more-btn {
  min-width: 240px;
}


/* About visual column (video + quote stacked) */
.about__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about__telegram {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}

.about__telegram:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg);
}

.about__telegram-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__telegram-icon svg { width: 100%; height: 100%; }

.about__telegram-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.about__telegram-text strong {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.about__telegram-text span {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
  max-width: none;
}

.about__telegram-arrow {
  flex-shrink: 0;
  font-size: var(--text-lg);
  color: var(--accent);
  transition: transform var(--transition);
}

.about__telegram:hover .about__telegram-arrow { transform: translateX(3px); }


/* Header — contact stack + messengers (из b2b) */
.header__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.2;
}

.header__contact .header__phone {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.header__email {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 500;
}

.header__email:hover { color: var(--accent); }

.header__messengers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__messenger {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text);
  transition: transform var(--transition), color var(--transition);
}

.header__messenger:hover { color: var(--accent); }
.header__messenger .header__messenger-fg { fill: var(--bg); }

.header__messenger:hover { transform: translateY(-2px); }

.header__messenger svg { width: 28px; height: 28px; display: block; }

.header__messenger[aria-label="Max"] svg { border-radius: 8px; }

.header__phone-icon {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  transition: border-color var(--transition), color var(--transition);
}

.header__phone-icon:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 1100px) {
  .header__contact { display: none; }
  .header__phone-icon { display: inline-flex; }
}

@media (max-width: 720px) {
  .header__messengers { display: none; }
}


/* ─── VS table (Агентство vs Сергей) ────────────────────── */
.vs-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--space-4);
}

.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.vs-table th,
.vs-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.vs-table thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.vs-table thead th.vs-table__me {
  color: var(--text);
}

.vs-table tbody tr + tr td { border-top: 1px solid var(--border); }

.vs-table tbody td:first-child {
  font-weight: 600;
  color: var(--text);
  width: 24%;
}

.vs-table tbody td:nth-child(2) {
  color: var(--text-muted);
  width: 38%;
}

.vs-table tbody td:nth-child(3) {
  color: var(--text);
  font-weight: 500;
  width: 38%;
}

.vs-note {
  margin-top: var(--space-6);
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: none;
}

.vs-note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 720px) {
  /* таблица сравнения перестраивается в карточки, чтобы влезать по ширине без скролла */
  .vs-table-wrap { overflow: visible; }
  .vs-table { display: block; width: 100%; font-size: var(--text-sm); }
  .vs-table thead { display: none; }
  .vs-table tbody,
  .vs-table tbody tr,
  .vs-table tbody td { display: block; width: auto; }
  .vs-table tbody tr {
    padding: var(--space-4) var(--space-5);
  }
  .vs-table tbody tr + tr { border-top: 1px solid var(--border); }
  .vs-table tbody tr + tr td { border-top: none; }
  .vs-table tbody td { padding: 0; }
  /* перебиваем десктопные ширины колонок (24%/38%/38%), иначе значение жмётся в треть */
  .vs-table tbody td:first-child,
  .vs-table tbody td:nth-child(2),
  .vs-table tbody td:nth-child(3) { width: auto !important; }
  .vs-table tbody td:first-child {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
  }
  /* подпись и значение на одной строке: «Агентство: …» / «Сергей: …» */
  .vs-table tbody td:nth-child(2) { margin-bottom: var(--space-2); }
  .vs-table tbody td:nth-child(2)::before,
  .vs-table tbody td:nth-child(3)::before {
    font-weight: 600;
    margin-right: 0.35em;
  }
  .vs-table tbody td:nth-child(2)::before {
    content: "Агентство:";
    color: var(--text-muted);
  }
  .vs-table tbody td:nth-child(3)::before {
    content: "Сергей:";
    color: var(--accent);
  }
}


/* VS-table: hover затемняет всю строку в палитру training-band */
.vs-table tbody tr {
  transition: background 250ms var(--easing);
}

.vs-table tbody td {
  transition: background 250ms var(--easing), color 250ms var(--easing), padding-left 250ms var(--easing), border-color 250ms var(--easing);
}

.vs-table tbody tr:hover td {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-top-color: transparent;
}

.vs-table tbody tr:hover + tr td {
  border-top-color: transparent;
}

.vs-table tbody tr:hover td:first-child {
  padding-left: calc(var(--space-5) + 6px);
}

.vs-table tbody tr:hover td:nth-child(2) {
  color: var(--text-on-dark-muted);
}

.vs-table tbody tr:hover td:nth-child(3) {
  font-weight: 600;
}

/* Hover variant: "warm-paper" — replaces the dark-fill default. Soft cream
   row with an accent rail on the left; text stays in regular page colors. */
.vs-table tbody tr:hover td {
  background: oklch(0.92 0.018 60) !important;
  color: var(--text) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
.vs-table tbody tr:hover td:first-child   { color: var(--accent) !important; }
.vs-table tbody tr:hover td:nth-child(2)  { color: var(--text-muted) !important; }
.vs-table tbody tr:hover td:nth-child(3)  { color: var(--text) !important; font-weight: 600; }

/* На узких экранах таблица идёт карточками — hover-подсветку гасим:
   на тач она «залипает» при тапе и рисует обрезки на блоках разной ширины. */
@media (max-width: 720px) {
  .vs-table tbody tr:hover td,
  .vs-table tbody tr:hover td:first-child,
  .vs-table tbody tr:hover td:nth-child(2),
  .vs-table tbody tr:hover td:nth-child(3) {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
    padding-left: 0 !important;
  }
  .vs-table tbody tr:hover td:nth-child(2) { color: var(--text-muted) !important; }
  .vs-table tbody tr:hover td:nth-child(3) { font-weight: 500 !important; }
}


/* Approach: подзаголовки внутри объединённой секции «приходят / делаю» */
.approach__sub {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.approach__sub--solutions {
  margin-top: var(--space-12);
}


/* ─── Approach: визуальные блоки проблем ─────────────────── */
.approach__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 880px) {
  .approach__grid { grid-template-columns: 1fr; }
}

.problem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-dark);
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: var(--r-lg);
  color: var(--text-on-dark);
  transition: border-color var(--transition);
}

.problem-card:hover { border-color: oklch(1 0 0 / 0.18); }

.problem-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.problem-card__num {
  font-size: var(--text-xs);
  font-weight: 700;
  color: oklch(0.65 0.14 22);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.problem-card__topic {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.problem-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-on-dark);
}

.problem-card__caption {
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  line-height: 1.5;
  max-width: none;
  margin-top: auto;
}

/* Chat (для проблем 01 и 05) */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.chat__bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--text);
}

.chat__bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat__bubble--out {
  align-self: flex-end;
  background: var(--accent-subtle);
  color: var(--accent-strong);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

.chat__dots {
  display: inline-block;
  margin-left: 4px;
  letter-spacing: 2px;
  color: var(--text-faint);
}

/* Hourchart (для проблемы 02) */
.hourchart {
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hourchart__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.hourchart__row {
  display: grid;
  grid-template-columns: 44px 1fr 22px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.hourchart__row b {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hourchart__bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}

.hourchart__bars i {
  height: 8px;
  border-radius: 2px;
  background: var(--border);
  display: block;
  position: relative;
}

.hourchart__bars i[style*="--w"] {
  background: var(--accent);
}

/* Fraud (для проблемы 03) */
.fraud {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fraud__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.fraud__cell {
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fraud__cell span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fraud__cell strong {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

.fraud__cell em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.fraud__cell--bad strong { color: var(--danger); }
.fraud__cell--bad { border-color: oklch(0.85 0.06 25); }

.fraud__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.fraud__list li {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: none;
}

.fraud__list li i {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.fraud__list li i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--w) * 100%);
  background: var(--danger);
  opacity: 0.5;
}

.fraud__list-good { color: var(--text); }
.fraud__list-good i::after { background: var(--success); opacity: 0.7; }

.fraud__list b {
  text-align: right;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.fraud__list-good b { color: var(--text); }

/* Funnel (для проблемы 04) */
.funnel {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.funnel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--text-sm);
}

.funnel__row:last-child { border-bottom: none; }

.funnel__row span { color: var(--text-muted); }

.funnel__row b {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.funnel__row--unknown b {
  color: var(--text-faint);
  font-size: 18px;
  font-weight: 700;
}

/* Approach divider — между проблемами и решениями */
.approach__divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-12) 0;
}

/* Solutions block */
.solutions {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-8);
  counter-reset: sol-counter;
}

@media (max-width: 880px) {
  .solutions { grid-template-columns: 1fr; }
}

.solution {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.solution:last-child { border-bottom: none; }

.solution__num {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.solution__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.solution__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.solution__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}


/* Chain (для проблемы 06: Размытая ответственность) */
.chain {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}

.chain__node {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-align: center;
}

.chain__node--ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  opacity: 0.55;
}

.chain__role {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.chain__sub {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  max-width: none;
}

.chain__node--ghost .chain__sub {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-faint);
}

.chain__arrow {
  width: 28px;
  height: 14px;
  flex-shrink: 0;
  align-self: center;
  color: var(--text-muted);
}

.chain__arrow--dashed {
  color: var(--text-faint);
}


/* ─── Quick CTA полоса (после сертификатов) ──────────────── */
.quick-cta {
  background: var(--accent);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 4vw + 1.5rem, 5rem);
  position: relative;
}

.quick-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

@media (max-width: 880px) {
  .quick-cta__inner { grid-template-columns: 1fr; }
}

.quick-cta__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-on-dark);
  max-width: 16ch;
}

.quick-cta__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}

.quick-cta__field { position: relative; }

.quick-cta__input {
  width: 100%;
  height: 48px;
  padding: 0 0 8px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid oklch(1 0 0 / 0.4);
  color: var(--text-on-dark);
  font-size: var(--text-lg);
  font-family: inherit;
  transition: border-color var(--transition);
}

.quick-cta__input::placeholder { color: oklch(1 0 0 / 0.6); }

.quick-cta__input:focus {
  outline: none;
  border-bottom-color: var(--text-on-dark);
}

.quick-cta__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: oklch(1 0 0 / 0.85);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  margin-top: var(--space-2);
}

.quick-cta__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.15em;
  width: 18px;
  height: 18px;
  accent-color: var(--text-on-dark);
  cursor: pointer;
}

.quick-cta__consent a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 500;
}

.quick-cta__consent a:hover { opacity: 0.85; color: var(--text-on-dark); }

.quick-cta__submit {
  height: 56px;
  padding: 0 32px;
  background: var(--text-on-dark);
  color: var(--accent);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  margin-top: var(--space-3);
  letter-spacing: 0.005em;
}

.quick-cta__submit:hover { background: oklch(0.98 0.005 60); }


/* ─── Process: 4 шага «Как это работает» ────────────────── */
.process__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  position: relative;
}

.process__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
  position: relative;
}

.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(50% + 40px);
  right: calc(-50% + 40px);
  height: 2px;
  background: var(--accent);
  opacity: 0.45;
  z-index: 0;
}

.process__num {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: var(--text-2xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.process__time {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: oklch(0.78 0.10 22);
  font-weight: 500;
  max-width: none;
}

.process__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-on-dark);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.process__desc {
  font-size: var(--text-base);
  color: var(--text-on-dark-muted);
  line-height: 1.5;
  max-width: none;
  flex: 1;
}

.process__deliverable {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: oklch(0.78 0.10 22);
  max-width: none;
}

@media (max-width: 880px) {
  .process__steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .process__step:not(:last-child)::after { display: none; }
}

/* Process layout: "editorial" — 2×2 grid, large light-weight numbers on the
   left, content on the right. Replaces the row-of-circles default. */
.process .process__steps {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: var(--space-10);
}
.process .process__step {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  text-align: left;
  padding: var(--space-7) var(--space-6) var(--space-7) 0;
  border-top: 1px solid oklch(0.32 0.012 35);
  align-items: start;
}
.process .process__step:nth-child(2),
.process .process__step:nth-child(4) {
  padding-left: var(--space-7);
  border-left: 1px solid oklch(0.32 0.012 35);
}
.process .process__step:not(:last-child)::after { display: none; }
.process .process__num {
  grid-row: 1 / span 4;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--accent);
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum";
  align-self: start;
  margin-top: -6px;
}
.process .process__num::before { content: "0"; }
.process .process__time {
  grid-column: 2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: oklch(0.65 0.10 22);
  margin-top: 4px;
}
.process .process__title { grid-column: 2; font-size: var(--text-2xl); }
.process .process__desc  { grid-column: 2; color: var(--text-on-dark-muted); }
.process .process__deliverable {
  grid-column: 2;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed oklch(0.40 0.014 50);
  color: var(--text-on-dark);
  font-weight: 500;
  font-size: var(--text-sm);
}
@media (max-width: 880px) {
  .process .process__steps { grid-template-columns: 1fr; }
  .process .process__step:nth-child(2),
  .process .process__step:nth-child(4) { padding-left: 0; border-left: 0; }
}

/* Process palette: "sunken" — locks in the warm-cream background instead of
   the original dark slab, so the section sits within the page rhythm without
   disappearing. Overrides the section--dark defaults inherited from this
   class. */
.process.section--dark {
  background: var(--bg);
  color: var(--text);
}
.process.section--dark .h-section,
.process.section--dark .eyebrow { color: var(--text); }
.process .process__step { border-top-color: var(--border-strong); }
.process .process__step:nth-child(2),
.process .process__step:nth-child(4) { border-left-color: var(--border-strong); }
.process .process__title { color: var(--text); }
.process .process__desc { color: var(--text-muted); }
.process .process__time { color: var(--accent); }
.process .process__deliverable {
  color: var(--text);
  border-top-color: var(--border-strong);
}


/* ─── Quote Band (цитата + фото + сертификаты, тёмный фон) ──── */
.quote-band {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding-top: clamp(2rem, 3vw + 1rem, 4rem);
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}

.quote-band__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

@media (max-width: 880px) {
  .quote-band__inner { grid-template-columns: 1fr; }
}

.quote-band__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 520px;
  padding-bottom: clamp(2rem, 3vw + 1rem, 4rem);
}

.quote-band__rule {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--space-2);
}

.quote-band__text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: none;
  position: relative;
  padding-left: 40px;
}

.quote-band__text::before {
  content: "\201E";
  position: absolute;
  left: 0;
  top: -0.25em;
  font-size: 2.2em;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}

.quote-band__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-band__author strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}

.quote-band__author span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.quote-band__certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.quote-band__cert {
  aspect-ratio: 3 / 4;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: block;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.quote-band__cert img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.quote-band__cert:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(40, 30, 20, 0.12);
}

/* Pure-CSS lightbox via :target. Click a cert → URL gains #cert-{name} →
   the matching .cert-lightbox lights up. Backdrop and close link both point
   back to #training so the URL doesn't keep a stale hash. */
.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vh, 4rem) clamp(1rem, 5vw, 3rem);
  background: rgba(20, 16, 12, 0.86);
  animation: cert-lb-fade 180ms ease-out;
}
.cert-lightbox:target { display: flex; }
@keyframes cert-lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cert-lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cert-lightbox img {
  position: relative;
  z-index: 1;
  max-width: min(720px, 100%);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: cert-lb-rise 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes cert-lb-rise {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)   scale(1);     opacity: 1; }
}
.cert-lightbox__close {
  position: absolute;
  top: clamp(12px, 2vh, 24px);
  right: clamp(12px, 2vw, 32px);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: oklch(0.95 0 0);
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.cert-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

.quote-band__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: end;
}

.quote-band__photo-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  opacity: 0.18;
  filter: blur(20px);
  z-index: 0;
}

.quote-band__photo img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 880px) {
  .quote-band__photo img { max-width: 70%; margin: 0 auto; }
  .quote-band__certs { gap: var(--space-3); }
  .quote-band__content { padding-bottom: var(--space-8); }
}





/* ─── Training Band (обучение + цитата + сертификаты, тёмный фон) ── */
.training-band {
  background: var(--surface-sunken);
  color: var(--text);
  padding-top: clamp(2rem, 3vw + 1rem, 4rem);
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}

.training-band__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: var(--space-12);
}

.training-band__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

@media (max-width: 880px) {
  .training-band__top { grid-template-columns: 1fr; gap: var(--space-6); }
  .training-band__price-row { flex-direction: column; align-items: flex-start; }
}

.training-band__head .h-section {
  color: var(--text);
  margin-bottom: 0;
}

.training-band__head .eyebrow { color: var(--accent); }

.training-band__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.training-band__desc {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.6;
  max-width: none;
}

.training-band__price {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: none;
}

.training-band__price strong {
  color: var(--text);
  font-weight: 700;
}

.training-band__price a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 500;
}

.training-band__price a:hover { color: var(--accent-hover); }

.training-band__btn { flex-shrink: 0; }

.training-band__divider {
  height: 1px;
  background: var(--border);
  margin-bottom: var(--space-8);
}

.training-band__bottom {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

@media (max-width: 880px) {
  .training-band__bottom { grid-template-columns: 1fr; }
}

.training-band__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 520px;
  padding-bottom: clamp(2rem, 3vw + 1rem, 4rem);
}

.training-band__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: end;
}

.training-band__photo img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 572px;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 880px) {
  .training-band__photo img { max-width: 70%; margin: 0 auto; }
}


/* ─── Channels block: locked "inline" variant ────────────────
   Icon left, name+desc right — replaces the original card grid. */
.channels { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.channel {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  row-gap: 4px;
  padding: var(--space-4) var(--space-5);
  align-items: center;
}
.channel__icon { grid-row: 1 / span 2; width: 44px; height: 44px; }
.channel__name { grid-column: 2; align-self: end; font-size: var(--text-base); }
.channel__desc { grid-column: 2; align-self: start; }
@media (max-width: 720px) { .channels { grid-template-columns: 1fr; } }

/* ─── Training band: certificates strip (formerly «личное обучение»)
   Header + price row removed; the band is now just quote + photo + certs
   + proctoring caption. */
.quote-band__cert-note {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 48ch;
}


/* ─── Training band photo: locked "grid" backdrop ──────────
   Faint technical grid behind the portrait — replaces the original blurred
   radial glow. Edges softened by a radial mask so the grid feathers out. */
#training .quote-band__photo-glow { display: none; }
#training .training-band__photo { isolation: isolate; }
#training .training-band__photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  height: 92%;
  background-image:
    linear-gradient(to right, oklch(0.42 0.13 22 / 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.42 0.13 22 / 0.16) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 70% 80% at center, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, #000 55%, transparent 100%);
  pointer-events: none;
}

/* ===== Handoff 3 (2026-05-15): аудит-твики и серые approach ===== */

/* ─── Locked-in audit tweaks (sectionHead/metrics/cases/process/faq) ─── */

/* sectionHead: "whisper" — quieter section titles + leads, more air. */
.section__head .h-section,
.training-band__head .h-section,
.about .h-section {
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  letter-spacing: -0.022em;
}
.section__head .lead,
.training-band__head .lead {
  font-size: var(--text-base);
  max-width: 60ch;
  color: var(--text-muted);
}
.section__head {
  max-width: 800px;
  margin-bottom: var(--space-10);
}

/* metrics: "paper" — bare hairline-separated columns instead of stamped cards. */
.metrics-band .metric {
  background: transparent;
  border: 0;
  padding: 0 var(--space-5);
  border-left: 1px solid var(--border);
}
.metrics-band .metric:first-child { border-left: 0; padding-left: 0; }
.metrics-band .metric::before,
.metrics-band .metric::after { display: none; }
.metrics-band .metric__stamp {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}
.metrics-band .metric__val {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--text);
}
.metrics-band .metric__val-suffix { color: var(--text-faint); }
.metrics-band .metric__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* cases: "no-desc" — just industry + name + metric. */
#cases .case-row__name { font-size: var(--text-xl); line-height: 1.25; }
#cases .case-row__desc { display: none; }
#cases .case-row { padding-block: var(--space-4); }

/* processNums: "subtle" — smaller, muted regular numerals. */
.process .process__num {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--text-on-dark-muted);
}

/* faqSize: "bigger" — 18px questions, accent on the open question. */
#faq .faq__item summary {
  font-size: var(--text-lg);
  padding-block: var(--space-5);
}
#faq .faq__item[open] summary { color: var(--accent); }
#faq .faq__item-body {
  font-size: var(--text-base);
  color: var(--text-muted);
  padding-bottom: var(--space-6);
  max-width: 76ch;
}


/* ─── #approach: locked "Серые карточки" variant ──────────── */
#approach .problem-card {
  background: oklch(0.94 0.004 60);
  border: 1px solid oklch(0.88 0.004 60);
  color: var(--text);
}
#approach .problem-card:hover {
  border-color: oklch(0.78 0.006 60);
  background: oklch(0.92 0.004 60);
}
#approach .problem-card__num,
#approach .problem-card__topic { color: oklch(0.45 0.006 60); }
#approach .problem-card__title { color: var(--text); }
#approach .problem-card__caption { color: oklch(0.48 0.006 60); }
#approach .problem-card .chat__bubble--in { background: oklch(0.98 0.003 60); color: var(--text); }
#approach .problem-card .chat__bubble--out { background: oklch(0.32 0.005 60); color: oklch(0.97 0.003 60); }
#approach .problem-card .hourchart,
#approach .problem-card .fraud__cell {
  background: oklch(0.98 0.003 60);
  border-color: oklch(0.88 0.004 60);
}
#approach .problem-card .hourchart__title,
#approach .problem-card .fraud__cell span { color: oklch(0.48 0.006 60); }
#approach .problem-card .hourchart__bars i { background: oklch(0.86 0.004 60); }
#approach .problem-card .hourchart__bars i[style*="--w"] { background: oklch(0.45 0.008 60); }
#approach .problem-card .hourchart__row b,
#approach .problem-card .fraud__cell strong,
#approach .problem-card .fraud__list b { color: var(--text); }
#approach .problem-card .fraud__list li { color: oklch(0.48 0.006 60); }

/* ─── Locked thin-numerals (was bigNums="editorial") ──────
   Prefixed with [data-typography] to beat the designer pass which has
   matching specificity for these selectors. */
[data-typography] .metrics-band .metric__val,
[data-typography] .case-row__metric-val,
.metrics-band .metric__val,
.case-row__metric-val {
  font-size: clamp(1.75rem, 1.25rem + 1.3vw, 2.25rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}
[data-typography] .case-row__metric-val,
.case-row__metric-val { font-weight: 400 !important; }


/* ─── Locked thin pricing/reviews/process (was thin in pickers) ───── */

/* Pricing — light price, right-aligned column */
[data-typography] .price-row__action,
.price-row__action {
  gap: var(--space-3) !important;
  align-items: flex-end !important;
}
[data-typography] .price-row__price,
.price-row__price {
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
}
[data-typography] .price-row__price span,
.price-row__price span {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0 !important;
}

/* Pricing — center price+button on mobile (overrides flex-end above) */
@media (max-width: 880px) {
  .price-row__action,
  [data-typography] .price-row__action {
    align-items: center !important;
    text-align: center !important;
    width: auto !important;
  }
}

/* About — mobile order: video -> "кто будет вести" -> quote -> telegram.
   Desktop untouched. display:contents lifts visual's children into the grid. */
@media (max-width: 880px) {
  .about__visual { display: contents; }
  .about__video-frame { order: 1; }
  .about > div { order: 2; }
  .about__quote { order: 3; }
  .about__telegram { order: 4; }
  .about__video-frame,
  .about__quote,
  .about__telegram { direction: ltr; }
}

/* Training — mobile order: photo above the "Сергей Саксонов" author line.
   Desktop untouched. display:contents lifts content's children into the grid. */
@media (max-width: 880px) {
  .training-band__content { display: contents; }
  .quote-band__rule { order: 1; }
  .quote-band__text { order: 2; }
  .training-band__photo { order: 3; }
  .quote-band__author { order: 4; }
  .quote-band__certs { order: 5; }
  .quote-band__cert-note { order: 6; }
  .training-band__bottom { row-gap: var(--space-5); }
  /* photo no longer last on mobile -> restore section bottom padding */
  .training-band { padding-bottom: clamp(2rem, 3vw + 1rem, 4rem); }
}

/* Reviews — big light rating, baseline-aligned with stars */
[data-typography] .reviews-intro__top,
.reviews-intro__top {
  align-items: baseline !important;
  gap: var(--space-3) !important;
}
[data-typography] .reviews-intro__rating,
.reviews-intro__rating {
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
[data-typography] .reviews-intro__stars,
.reviews-intro__stars { font-size: var(--text-base) !important; }
[data-typography] .reviews-intro__meta,
.reviews-intro__meta { align-self: baseline !important; }

/* Process — accent-colored thin 01/02/03 with wider numerals column */
[data-typography] .process .process__step,
.process .process__step { grid-template-columns: 132px 1fr !important; }
[data-typography] .process .process__num,
.process .process__num {
  font-size: clamp(3rem, 2.2rem + 2.4vw, 3.75rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.045em !important;
  color: var(--accent) !important;
  opacity: 1 !important;
  line-height: 1 !important;
  margin-top: -2px !important;
  font-variant-numeric: tabular-nums;
}


/* ───────────────────────────────────────────────────────────
   Tweaks made permanent — applied 2026-05-20
   1. Eyebrow stamps в .metric__stamp: больше не моноширина,
      выровнены под стиль обычных .eyebrow (Sora caps).
   2. .num: добавлены ss01/cv01, чтобы буквы внутри числовых
      спанов совпадали со стилистическими альтернативами body.
   3. Единый стиль нумерации блоков (problems / solutions / process).
   ─────────────────────────────────────────────────────────── */

.metric__stamp {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.num {
  font-feature-settings: "tnum" on, "cv11" on, "ss01" on, "cv01" on;
}

.problem-card__head {
  align-items: baseline;
  gap: var(--space-4);
}
.problem-card__num {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.solution__num {
  font-size: var(--text-xl);
  font-weight: 700;
  padding-top: 0;
}
.process .process__num {
  font-weight: 700 !important;
}

/* ───────────────────────────────────────────────────────────
   Baked-in tweaks from Claude Design handoff 4 (2026-05-21)
   Перенесены из inline <style id="tweaks-css">, чтобы все
   правила жили в одном style.css.
   ─────────────────────────────────────────────────────────── */

    /* Baked-in: alternating section backgrounds.
       approach(L) → videos(S) → pricing(L) → reviews(S) → about(L) → guarantees(S) */
    #videos     { background: var(--surface-sunken); }
    #pricing    { background: var(--bg); }
    #reviews    { background: var(--surface-sunken); }
    #about      { background: var(--bg); }
    #guarantees { background: var(--surface-sunken); }

    /* Baked-in: charts in problem cards in бордо palette. */
    .fraud__cell--bad strong {
      color: var(--accent);
    }
    .fraud__cell--bad {
      border-color: color-mix(in oklch, var(--accent), transparent 60%);
    }
    .fraud__list li i::after {
      background: var(--accent);
      opacity: 0.32;
    }
    .fraud__list-good i::after {
      background: var(--accent);
      opacity: 0.65;
    }

    /* Baked-in: Yandex cert thumbnails grayscale, full color on hover and in
       lightbox modal. */
    .quote-band__cert img {
      filter: grayscale(1) contrast(0.95) brightness(1.02);
      transition: filter var(--transition);
    }
    .quote-band__cert:hover img {
      filter: grayscale(0);
    }
  

/* Lenis smooth wheel scroll (desktop only; classes added by JS in index.html) */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }