:root {
      /* Нейтральный рамп с лёгким холодным подтоном (~3% синего в сером) —
         «сшивает» фон с кобальтовым акцентом, страница ощущается единым материалом */
      --bg: oklch(0.955 0.004 255);
      --surface: oklch(0.982 0.003 255);
      --surface-warm: var(--surface);
      --fg: oklch(0.205 0.02 265);
      --fg-2: var(--fg);
      --muted: oklch(0.485 0.015 265);
      --meta: var(--muted);
      --border: oklch(0.905 0.006 255);
      --border-soft: var(--border);
      --accent: #2f6feb;
      --accent-on: #ffffff;
      --accent-hover: color-mix(in oklab, var(--accent), black 8%);
      --accent-active: color-mix(in oklab, var(--accent), black 14%);
      --success: #17a34a;
      --warn: #eab308;
      --danger: #dc2626;
      --font-display: "Manrope", -apple-system, system-ui, sans-serif;
      --font-body: "Inter", -apple-system, system-ui, sans-serif;
      --font-mono: ui-monospace, "JetBrains Mono", monospace;
      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-lg: 20px;
      --text-xl: 24px;
      --text-2xl: 32px;
      --text-3xl: 48px;
      --text-4xl: 64px;
      --leading-body: 1.5;
      --leading-tight: 1.2;
      --tracking-display: -0.01em;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;
      --space-20: 80px;
      --section-y-desktop: 80px;
      --section-y-tablet: 48px;
      --section-y-phone: 32px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-pill: 9999px;
      --elev-flat: none;
      --elev-ring: 0 0 0 1px var(--border);
      --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
      --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
      --motion-fast: 150ms;
      --motion-base: 200ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);
      --container-max: 1200px;
      --container-gutter-desktop: 24px;
      --container-gutter-tablet: 16px;
      --container-gutter-phone: 12px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: var(--leading-body);
      color: var(--fg);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* плашка STAGE на не-прод контурах */
    .stage-banner {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: var(--warn);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 600;
      text-align: center;
      padding: var(--space-2) var(--space-3);
      line-height: 1.4;
    }
    .stage-banner + .site-header { top: 36px; }

    h1, h2, h3, h4, p {
      margin: 0;
    }

    a {
      color: var(--accent);
      text-decoration: none;
      transition: color var(--motion-fast) var(--ease-standard);
    }

    a:hover {
      text-decoration: underline;
    }

    img, svg {
      display: block;
      max-width: 100%;
    }

    .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding-left: var(--container-gutter-phone);
      padding-right: var(--container-gutter-phone);
    }

    @media (min-width: 640px) {
      .container {
        padding-left: var(--container-gutter-tablet);
        padding-right: var(--container-gutter-tablet);
      }
    }

    @media (min-width: 1024px) {
      .container {
        padding-left: var(--container-gutter-desktop);
        padding-right: var(--container-gutter-desktop);
      }
    }

    section {
      padding-top: var(--section-y-phone);
      padding-bottom: var(--section-y-phone);
    }

    @media (min-width: 640px) {
      section {
        padding-top: var(--section-y-tablet);
        padding-bottom: var(--section-y-tablet);
      }
    }

    @media (min-width: 1024px) {
      section {
        padding-top: var(--section-y-desktop);
        padding-bottom: var(--section-y-desktop);
      }
    }

    section + section {
      border-top: 1px solid var(--border);
    }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: color-mix(in oklab, var(--bg), transparent 8%);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .header-inner {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-6);
      min-height: 64px;
      padding-top: var(--space-2);
      padding-bottom: var(--space-2);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      color: var(--fg);
      font-weight: 600;
      font-size: var(--text-lg);
      letter-spacing: var(--tracking-display);
    }

    .logo:hover {
      text-decoration: none;
      color: var(--fg);
    }

    .logo svg {
      height: 28px;
      width: auto;
    }

    /* Якорная навигация по разделам этой (и только этой) страницы —
       вторым рядом под шапкой, вне flex-контейнера persistent-строки
       (.header-inner/nav-global/nav-auth), см. комментарий в landing.html.
       Скрыта на мобильном, как и раньше — на узком экране это удобство,
       не необходимость, а реальные destinations в nav-global всегда видны. */
    .anchor-nav {
      display: none;
      border-top: 1px solid var(--border);
      background: var(--surface);
    }

    @media (min-width: 640px) {
      .anchor-nav {
        display: block;
      }
    }

    .anchor-nav-inner {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-6);
      padding: var(--space-3) 0;
    }

    .anchor-nav-inner a {
      color: var(--muted);
      font-size: var(--text-xs);
      font-weight: 500;
    }

    .anchor-nav-inner a:hover {
      color: var(--fg);
      text-decoration: none;
    }

    /* Общий компонент шапки (_nav.html): центральная группа сайтовых
       ссылок + правая auth-область (Войти/Регистрация или аккаунт-меню).
       Один и тот же набор классов используется на всех страницах сайта —
       landing.css/methodology.css (браузерные, oklch) держат идентичные
       копии этого блока, app.css — hex-эквивалент для страниц на base.html. */
    .nav-global {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-5);
    }

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

    .nav-global a:hover {
      color: var(--accent);
      text-decoration: none;
    }

    .nav-global a.active {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .nav-auth {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      margin-left: auto;
    }

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

    .nav-auth-link:hover {
      color: var(--fg);
      text-decoration: none;
    }

    .nav-auth-link.active {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    /* Регистрация в шапке — акцентный контур вместо нейтрального
       .btn-secondary: цветом отличает её от приглушённого текста «Войти»
       рядом, но остаётся контурной (не залитой), чтобы не спорить с
       залитой .btn-primary в героe — обе видны одновременно, шапка sticky.
       На своей странице (/auth/register) заливается акцентным — так же,
       как подчёркиваются обычные пункты .active. */
    .btn-outline {
      background: transparent;
      border-color: var(--accent);
      color: var(--accent);
    }

    .btn-outline:hover {
      background: var(--accent);
      color: var(--accent-on);
      border-color: var(--accent);
    }

    .btn-outline.active {
      background: var(--accent);
      color: var(--accent-on);
      border-color: var(--accent);
    }

    /* Компаунд-селектор .btn.btn-pill — специфичность выше базового .btn
       (border-radius: var(--radius-sm)), форма не зависит от порядка
       правил в файле (см. комментарий в app.css, тот же баг чинили там). */
    .btn.btn-pill {
      border-radius: var(--radius-pill);
      padding: 8px var(--space-5);
    }

    /* Кнопка «+ Новая диагностика» для вошедших (ТЗ unified-measure-launch)
       — синхронизировать с app.css/style.css/methodology.css. */
    .nav-new-measure { padding: 6px 12px; font-size: 12.5px;
      white-space: nowrap; font-weight: 700; }

    /* Аккаунт-меню залогиненного — триггер (аватар+имя+шеврон) и панель. */
    .account-menu {
      position: relative;
    }

    .account-trigger {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      background: transparent;
      border: 0;
      border-radius: var(--radius-pill);
      padding: 4px var(--space-2) 4px 4px;
      font-family: inherit;
      color: var(--fg);
      cursor: pointer;
    }

    .account-trigger:hover {
      background: var(--surface);
    }

    .account-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--accent-on);
      font-weight: 600;
      font-size: var(--text-xs);
      flex-shrink: 0;
    }

    .account-name {
      font-size: var(--text-sm);
      font-weight: 500;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-chevron {
      color: var(--muted);
      flex-shrink: 0;
    }

    .account-panel {
      position: absolute;
      right: 0;
      top: calc(100% + var(--space-2));
      min-width: 220px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      box-shadow: var(--elev-raised);
      padding: var(--space-1);
      z-index: 20;
    }

    .account-email {
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-xs);
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      margin-bottom: var(--space-1);
      word-break: break-all;
    }

    .account-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      font-size: var(--text-sm);
      font-family: inherit;
      color: var(--fg);
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .account-item:hover {
      background: var(--surface-warm, var(--surface));
      background: color-mix(in oklab, var(--accent), transparent 92%);
      text-decoration: none;
    }

    .account-item-danger {
      color: var(--danger);
    }

    .account-item-danger:hover {
      background: color-mix(in oklab, var(--danger), transparent 92%);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: 10px var(--space-5);
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: 500;
      line-height: 1.4;
      cursor: pointer;
      border: 1px solid transparent;
      transition: background-color var(--motion-fast) var(--ease-standard),
                  border-color var(--motion-fast) var(--ease-standard),
                  color var(--motion-fast) var(--ease-standard),
                  transform var(--motion-fast) var(--ease-standard);
    }

    .btn:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    .btn-primary {
      background: var(--accent);
      color: var(--accent-on);
      border-color: var(--accent);
    }

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

    .btn-primary:active {
      background: var(--accent-active);
      border-color: var(--accent-active);
    }

    .btn-secondary {
      background: transparent;
      color: var(--fg);
      border-color: var(--border);
    }

    .btn-secondary:hover {
      background: var(--surface);
      border-color: var(--border);
      text-decoration: none;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      color: var(--accent);
      font-weight: 500;
      font-size: var(--text-sm);
    }

    .text-link:hover {
      text-decoration: none;
    }

    .text-link svg {
      transition: transform var(--motion-fast) var(--ease-standard);
    }

    .text-link:hover svg {
      transform: translateY(2px);
    }

    /* Hero */
    .hero {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
      min-height: 40vh;
    }

    @media (min-width: 1024px) {
      .hero {
        min-height: 50vh;
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
      }
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
      align-items: start;
    }

    @media (min-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-12);
        align-items: center;
      }
    }

    .hero-content {
      max-width: 640px;
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(var(--text-2xl), 4vw, 56px);
      font-weight: 600;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      margin-bottom: var(--space-6);
    }

    .hero-title-line {
      display: block;
    }

    .hero-title-line--highlight {
      display: inline;
      background-image: linear-gradient(
        to top,
        color-mix(in oklab, var(--accent), transparent 78%),
        color-mix(in oklab, var(--accent), transparent 78%)
      );
      background-repeat: no-repeat;
      background-size: 100% 44%;
      background-position: 0 84%;
      padding: 0 var(--space-1);
      -webkit-box-decoration-break: clone;
    }

    .hero-subhead {
      font-size: var(--text-lg);
      color: var(--muted);
      margin-bottom: var(--space-8);
      max-width: 560px;
    }

    .hero-subhead strong {
      color: var(--fg);
      font-weight: 600;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-5);
      margin-bottom: var(--space-4);
    }

    /* Контурная secondary-кнопка hero («Сначала пройти самому»): специфичность
       .hero-actions .btn-outline поднята над базовым .btn — он позже в файле,
       и его shorthand `border: 1px solid transparent` при равной специфичности
       сбрасывает border-color от .btn-outline (тот же порядковый баг, что
       чинили компаунд-селектором у .btn.btn-pill). */
    .hero-actions .btn-outline {
      background: transparent;
      border-color: var(--accent);
      color: var(--accent);
    }

    .hero-microcopy {
      font-size: var(--text-sm);
      color: var(--muted);
    }

    .hero-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      /* overflow:hidden — .hero-visual::before (декоративное свечение)
         бьёт inset:-10% за пределы блока; без обрезки на узких экранах
         это создавало горизонтальный скролл всей страницы (баг, поймали
         на проде — шапка "съезжала" из-за прокрутки вбок). */
      overflow: hidden;
    }

    .hero-visual-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 520px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-6);
      box-shadow: var(--elev-raised);
    }

    .hero-chart-row {
      display: flex;
      align-items: flex-end;
      gap: var(--space-3);
      height: 160px;
      margin-top: var(--space-5);
    }

    .hero-chart-bar {
      flex: 1;
      border-radius: var(--radius-sm);
      background: var(--border);
      transition: background var(--motion-fast) var(--ease-standard);
    }

    .hero-chart-bar:nth-child(1) { height: 45%; }
    .hero-chart-bar:nth-child(2) { height: 62%; }
    .hero-chart-bar:nth-child(3) { height: 38%; background: var(--accent); }
    .hero-chart-bar:nth-child(4) { height: 78%; }
    .hero-chart-bar:nth-child(5) { height: 55%; }

    /* Trust bar */
    .trust-bar {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding-top: var(--space-5);
      padding-bottom: var(--space-5);
    }

    .trust-bar-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      text-align: center;
      font-size: var(--text-sm);
      color: var(--muted);
    }

    .trust-bar strong {
      color: var(--fg);
      font-weight: 600;
    }

    /* Typography */
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
      font-weight: 600;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      margin-bottom: var(--space-6);
    }

    .section-lead {
      font-size: var(--text-lg);
      color: var(--muted);
      max-width: 640px;
      margin-bottom: var(--space-12);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    /* Pain points */
    .pain-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

    @media (min-width: 640px) {
      .pain-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
      }
    }

    @media (min-width: 1024px) {
      .pain-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .pain-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      transition: border-color var(--motion-fast) var(--ease-standard),
                  box-shadow var(--motion-fast) var(--ease-standard);
    }

    .pain-card:hover {
      border-color: color-mix(in oklab, var(--accent), transparent 70%);
      box-shadow: var(--elev-raised);
    }

    .pain-number {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 700;
      line-height: 1;
      color: var(--accent);
      opacity: 0.9;
    }

    .pain-card h3 {
      font-size: var(--text-lg);
      font-weight: 600;
      line-height: var(--leading-tight);
    }

    .pain-card p {
      font-size: var(--text-sm);
      color: var(--muted);
    }

    .pain-closing {
      margin-top: var(--space-12);
      padding: var(--space-6);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      font-size: var(--text-xl);
      font-weight: 500;
      line-height: var(--leading-tight);
      text-align: center;
    }

    .pain-closing span {
      color: var(--accent);
    }

    /* Products */
    .products-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }

    @media (min-width: 640px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      transition: border-color var(--motion-fast) var(--ease-standard),
                  box-shadow var(--motion-fast) var(--ease-standard);
    }

    .product-card:hover {
      border-color: color-mix(in oklab, var(--accent), transparent 70%);
      box-shadow: var(--elev-raised);
    }

    .product-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      background: color-mix(in oklab, var(--accent), transparent 92%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }

    .product-card h3 {
      font-size: var(--text-xl);
      font-weight: 600;
    }

    .product-card p {
      color: var(--muted);
    }

    .product-tools {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .tool-tag {
      display: inline-flex;
      align-items: center;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-pill);
      background: color-mix(in oklab, var(--accent), transparent 92%);
      color: var(--accent);
      border: 1px solid color-mix(in oklab, var(--accent), transparent 78%);
      font-size: var(--text-xs);
      font-weight: 500;
    }

    /* How it works */
    .steps-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
      counter-reset: step;
    }

    @media (min-width: 640px) {
      .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
      }
    }

    .step {
      position: relative;
      padding-top: var(--space-5);
      border-top: 1px solid var(--border);
    }

    .step-number {
      font-family: var(--font-display);
      font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
      font-weight: 700;
      line-height: 1;
      color: var(--accent);
      margin-bottom: var(--space-5);
      display: block;
    }

    .step h3 {
      font-size: var(--text-xl);
      font-weight: 600;
      margin-bottom: var(--space-3);
    }

    .step p {
      color: var(--muted);
    }

    /* Security */
    .security-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

    @media (min-width: 640px) {
      .security-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .security-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
      padding: var(--space-5);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }

    .security-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background: color-mix(in oklab, var(--success), transparent 92%);
      color: var(--success);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .security-item h3 {
      font-size: var(--text-lg);
      font-weight: 600;
      margin-bottom: var(--space-1);
    }

    .security-item p {
      font-size: var(--text-sm);
      color: var(--muted);
    }

    /* Final CTA */
    .final-cta {
      background: var(--surface);
      text-align: center;
    }

    .final-cta-inner {
      max-width: 640px;
      margin: 0 auto;
    }

    .final-cta h2 {
      font-family: var(--font-display);
      font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
      font-weight: 600;
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-display);
      margin-bottom: var(--space-6);
    }

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

    /* Footer */
    .site-footer {
      padding-top: var(--space-8);
      padding-bottom: var(--space-8);
      border-top: 1px solid var(--border);
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      text-align: center;
      color: var(--muted);
      font-size: var(--text-sm);
    }

    .footer-inner a {
      color: var(--muted);
    }

    .footer-inner a:hover {
      color: var(--fg);
    }

    .footer-sep {
      color: var(--border);
    }

    .footer-inner a.footer-tg-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    /* Section tints */
    .section-tint {
      background: color-mix(in oklab, var(--accent), transparent 94%);
      border-top: none;
    }

    .section-tint .section-lead {
      color: color-mix(in oklab, var(--fg), transparent 20%);
    }

    /* Pain icons */
    .pain-icon {
      color: var(--accent);
      margin-bottom: var(--space-3);
    }

    .pain-icon svg {
      width: 32px;
      height: 32px;
    }

    /* Hero visual backdrop */
    .hero-visual::before {
      content: "";
      position: absolute;
      inset: -10%;
      background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent), transparent 88%) 0%, transparent 60%);
      z-index: 0;
      pointer-events: none;
    }

    /* Steps connector accent */
    .step::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      width: 40px;
      height: 2px;
      background: var(--accent);
      opacity: 0.35;
    }

    /* Quote section */
    .quote-section {
      background: var(--fg);
      color: var(--bg);
      border-top: none;
    }

    .quote-section blockquote {
      margin: 0;
      max-width: 900px;
      font-family: var(--font-display);
      font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl));
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: var(--tracking-display);
    }

    .quote-section blockquote span {
      color: color-mix(in oklab, var(--accent), white 45%);
    }

    .quote-attribution {
      margin-top: var(--space-5);
      font-size: var(--text-sm);
      color: color-mix(in oklab, var(--bg), transparent 45%);
    }

    /* Report sample — three glued strips */
    .report-strips {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-5);
    }

    .report-strip {
      width: 100%;
      max-width: 320px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-5);
      box-shadow: var(--elev-raised);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    @media (min-width: 1024px) {
      .report-strips {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
      }

      .report-strip--left {
        transform: rotate(-3deg) translateY(10px);
        margin-right: -20px;
        z-index: 1;
      }

      .report-strip--center {
        z-index: 2;
        transform: translateY(-10px);
      }

      .report-strip--right {
        transform: rotate(3deg) translateY(10px);
        margin-left: -20px;
        z-index: 1;
      }
    }

    .report-strip-label {
      display: inline-flex;
      align-self: flex-start;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-pill);
      background: color-mix(in oklab, var(--accent), transparent 92%);
      color: var(--accent);
      font-size: var(--text-xs);
      font-weight: 600;
    }

    .report-strip-title {
      font-size: var(--text-sm);
      font-weight: 600;
    }

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

    .report-scale-row {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .report-scale-meta {
      display: flex;
      justify-content: space-between;
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .report-scale-meta strong {
      color: var(--fg);
      font-weight: 600;
    }

    .report-bar {
      height: 8px;
      border-radius: var(--radius-pill);
      background: color-mix(in oklab, var(--fg), transparent 92%);
      overflow: hidden;
    }

    .report-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--accent);
    }

    .report-bar--muted span {
      background: color-mix(in oklab, var(--fg), transparent 55%);
    }

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

    .report-pyramid-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
    }

    .report-pyramid-row span {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .report-pyramid-bar {
      height: 22px;
      border-radius: var(--radius-sm);
      background: color-mix(in oklab, var(--accent), transparent 80%);
    }

    .report-pyramid-row--weak span {
      color: color-mix(in oklab, var(--warn), black 25%);
      font-weight: 600;
    }

    .report-pyramid-row--weak .report-pyramid-bar {
      background: color-mix(in oklab, var(--warn), transparent 45%);
    }

    .report-note {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .report-caption {
      margin-top: var(--space-8);
      text-align: center;
      font-size: var(--text-sm);
      color: var(--muted);
    }

    /* What next cycle */
    .next-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }

    @media (min-width: 640px) {
      .next-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .next-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-8);
      }

      .next-card {
        position: relative;
      }

      .next-card:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 20px;
        right: calc(-1 * var(--space-6));
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h11M9 3.5L13.5 8 9 12.5' stroke='%232f6feb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        opacity: 0.6;
      }
    }

    .next-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-pill);
      border: 1px solid color-mix(in oklab, var(--accent), transparent 70%);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-4);
    }

    .next-card h3 {
      font-size: var(--text-base);
      font-weight: 600;
      margin-bottom: var(--space-2);
    }

    .next-card p {
      font-size: var(--text-sm);
      color: var(--muted);
    }

    /* Utilities */
    .text-center {
      text-align: center;
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto;
    }

    /* Focus visible for links */
    a:focus-visible {
      outline: none;
      border-radius: var(--radius-sm);
      box-shadow: var(--focus-ring);
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

/* Список инструментов внутри карточки продукта: бейдж + пояснение из спеки */
.product-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-tool-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.product-tool-lead {
  font-size: var(--text-sm);
  color: var(--muted);
}

.product-tool-link {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 500;
  margin-top: var(--space-1);
}

.show-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

.show-all-link:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

.show-all-link.block {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}