:root{
    --bg: #F6F7F5;
    --bg-2: #EEF1EC;
    --surface: #FFFFFF;
    --surface-hi: #F2F4F0;
    --surface-2: #F2F4F0;  /* алиас, многие компоненты ссылаются на --surface-2 */
    --border: #E3E6E0;
    --border-hi: #D2D6CE;
    --fg: #0A0C0B;
    --fg-2: #2E3431;
    --muted: #6A7470;

    --emerald: #34D399;
    --moss: #8FAE6A;

    --accent: #FBBF24;
    --accent-2: #F59E0B;
    --accent-text: #92400E;       /* для текста на светлом фоне — WCAG AA */
    --on-accent: #1B1302;

    --font: 'Inter Tight', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;

    /* === DESIGN-SYSTEM tokens (см. DESIGN-SYSTEM.md §2) === */

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --space-11: 160px;

    /* Type scale */
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   17px;
    --text-lg:   20px;
    --text-xl:   clamp(22px, 2.2vw, 28px);
    --text-2xl:  clamp(28px, 3.2vw, 40px);
    --text-3xl:  clamp(34px, 4vw, 52px);
    --text-4xl:  clamp(44px, 5.6vw, 72px);
    --text-5xl:  clamp(56px, 7.2vw, 96px);

    --leading-tight:   1.05;
    --leading-snug:    1.2;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(10,12,11,.04), 0 0 0 1px var(--border);
    --shadow-2: 0 4px 12px rgba(10,12,11,.06), 0 0 0 1px var(--border);
    --shadow-3: 0 12px 32px rgba(10,12,11,.08);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* Breakpoints — для документации; в media query используются числа */
    --bp-sm:  480px;
    --bp-md:  720px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;
    --bp-2xl: 1480px;

    --maxw: 1320px;
    --pad-x: clamp(20px, 3vw, 40px);

    /* Зазор между секциями. Применяется ТОЛЬКО как padding-top секции
       (не bottom), чтобы избежать удвоения. Последняя секция получает
       padding-bottom отдельно через :last-child. */
    --py-sec: clamp(56px, 7vw, 135px);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  html,body{
    background: var(--bg); color: var(--fg);
    font-family: var(--font);
    font-feature-settings: "ss01", "cv11", "tnum";
    -webkit-font-smoothing: antialiased;
  }
  body{ overflow-x: hidden; line-height: 1.5; font-size: 15px; letter-spacing: -0.005em; }
  a{ color: inherit; text-decoration: none; }
  img,svg{ display: block; max-width: 100%; }
  button{ font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

  /* A11y: skip-link — виден только по фокусу */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:0 0 10px 0;font-size:14px;}
  .skip-link:focus{left:0;}
  /* A11y: focus-visible baseline */
  :focus { outline: none; }
  :focus-visible{
    outline: 2px solid var(--accent-text); /* #92400E — контраст 6.6:1; accent-2 давал 2.0:1 */
    outline-offset: 3px;
    border-radius: inherit;
  }

  /* A11y: respect user's motion preferences */
  @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;
    }
  }

  /* Noise/grain on dark bg for texture (subtle) */
  body::before{
    content:""; position: fixed; inset: 0; pointer-events: none; z-index: 500;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
    mix-blend-mode: overlay; opacity: .04;
  }

  .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }

  /* ===== TOP NAV ===== */
  .nav{
    position: sticky; top: 16px; z-index: 80;
    padding: 0 var(--pad-x);
    margin-top: 16px;
  }
  .nav-inner{
    max-width: var(--maxw); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 10px 10px 20px;
    background: color-mix(in srgb, var(--bg-2) 75%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 24px;
  }
  /* font-size на .logo — ЕДИНАЯ адаптивная база: и текст (1em), и иконка (2.33em)
     считаются от неё, поэтому соотношение «иконка 2× текста» держится на всех
     ширинах. clamp вместо @media-ступенек (D-05). */
  .logo{ display: flex; align-items: center; gap: 0.3em; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(18px, 1.3vw, 22px); }
  /* Лого-локап ВЫБИВАЕТСЯ из хедера — это бренд-якорь, крупнее остального,
     по своим правилам (не вписан в высоту навбара). Знак — оригинал
     (assets/logo.svg, авторская компоновка: листок-выброс = оптическая
     компенсация, делает знак живым; НЕ перецентровать по bbox). */
  /* Иконка вдвое больше букв «ЭКОР-К». viewBox обрезан впритык к графике
     (поле ~6%), видимая иконка ≈0.88 бокса → иконка увеличена ~40% от исходной 2× → ≈2.3em.
     translateY: знак асимметричен (листок-побег уходит вверх), поэтому центр
     КРУГА-спирали на ~12% ниже центра бокса. Поднимаем иконку, чтобы центр
     круга сел на строку текста, листок свободно выходит вверх — это оптическая
     компенсация для асимметричного знака (она и делает лого живым). */
  .logo-mark{
    width: 2.3em;
    height: 2.3em;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    transform: translateY(-7%);
  }
  /* текст наследует размер от .logo (1em) — база одна, см. выше. */
  .logo b{ font-size: 1em; font-weight: 600; }
  .logo .v{
    font-family: var(--mono); font-size: 10px; color: var(--muted);
    padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; margin-left: 4px;
  }

  .nav-links{ display: flex; gap: 4px; font-size: 13px; }
  .nav-links a{
    padding: 8px 14px; border-radius: 999px;
    color: var(--fg-2); transition: .15s;
  }
  .nav-links a:hover{ color: var(--fg); background: var(--surface); }

  .nav-dd{ position: relative; padding-bottom: 10px; margin-bottom: -10px;}
  .nav-dd-btn{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    color: var(--fg-2); font-size: 13px; font-family: inherit;
    transition: .15s;
  }
  .nav-dd-btn:hover,
  .nav-dd.on .nav-dd-btn,
  .nav-dd-btn[aria-expanded="true"]{
    color: var(--fg); background: var(--surface);
  }
  .nav-dd-btn svg{ transition: transform .18s ease;}
  .nav-dd-btn[aria-expanded="true"] svg{ transform: rotate(180deg);}

  .nav-dd-menu{
    position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background: color-mix(in srgb, var(--bg-2) 96%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 8px;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
    z-index: 90;
  }
  .nav-dd.on .nav-dd-menu,
  .nav-dd:focus-within .nav-dd-menu{
    opacity: 1; pointer-events: auto;
  }
  .nav-dd-menu a{
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; color: var(--fg-2); white-space: nowrap;
  }
  .nav-dd-menu a:hover,
  .nav-dd-menu a[aria-current="page"]{
    background: var(--surface); color: var(--fg);
  }
  .nav-cta{ display: flex; gap: 8px; align-items: center; }
  .btn{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
    transition: .18s ease;
  }
  .btn-primary{
    background: var(--accent); color: var(--on-accent);
  }
  .btn-primary:hover{ background: var(--accent-2); }
  .btn-ghost{
    background: var(--surface); border: 1px solid var(--border); color: var(--fg);
  }
  .btn-ghost:hover{ border-color: var(--border-hi); background: var(--surface-hi); }
  .btn .k{ font-family: var(--mono); font-size: 11px; opacity: .5; }
  .btn svg{ width: 14px; height: 14px; }

  /* ===== HERO ===== */
  .hero{
    padding-block: 80px 60px;
    position: relative;
  }
  .hero-grid{
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: stretch;
  }
  /* PILL BASE — общие визуальные характеристики всех pill-атомов.
     Семантика у каждого атома своя (.pill — бейдж номера, .c-stat li — метрика,
     .feature-tile-status — статус сделки, .tag — подпись с blur, .chip — фильтр),
     поэтому имена сохранены. Но визуальная база единая: pill-форма, mono, inline-flex.
     Если меняется радиус/шрифт/выравнивание pill'ов — правится в одном месте.
     ИНВАРИАНТ: новый pill-подобный атом ОБЯЗАН добавить свой селектор в этот group. */
  .eyebrow .pill,
  ul.c-stat li,
  .feature-tile-status,
  .sub-hero-visual .tag,
  .metric-row .chip{
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-family: var(--mono);
    line-height: 1;
  }

  .eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; font-size: 12px; color: var(--fg-2);
    margin-bottom: 28px;
  }
  .eyebrow .pill{
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-text);
    padding: 3px 9px; font-size: 10px; letter-spacing: 0.04em;
  }
  .eyebrow svg{ width: 12px; height: 12px; color: var(--accent); }

  h1.h1, h2.h1{
    font-size: clamp(40px, 6.2vw, 88px);
    font-weight: 500; letter-spacing: -0.035em; line-height: 0.98;
    text-wrap: balance;
  }
  h1.h1 .grad, h2.h1 .grad{
    background: linear-gradient(120deg, var(--fg) 0%, var(--accent) 60%, var(--fg) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .brand, h1 .brand, h2 .brand{ white-space: nowrap; }
  .lede{
    margin-top: 28px; font-size: 17px; line-height: 1.55;
    color: var(--fg-2); max-width: 540px; text-wrap: pretty;
  }
  .cta-row{
    margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap;
  }
  .trust-row{
    margin-top: 44px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
    font-size: 12px; color: var(--muted); font-family: var(--mono);
  }
  .trust-row .dot{ width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);}
  .trust-row b{ color: var(--fg); font-weight: 500; font-family: var(--font); }

  /* ===== HERO VISUAL — Dashboard card ===== */
  .hero-visual{
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px;
    display: flex; flex-direction: column; gap: 14px;
    /* Тот же паттерн что .author-card: width 100% от своей колонки grid,
       aspect-ratio 4/5 — портретная форма как у портрета фото.
       align-self:start — иначе grid stretch'ит на всю высоту row, перебивая
       aspect-ratio. chart-wrap внутри flex:1 распределяет вертикаль.
       max-width убран — занимает свою grid-колонку целиком (как author-card),
       выглядит крупнее и симметричнее. */
    width: 100%;
    aspect-ratio: 4/5;
    align-self: start;
  }
  .hero-visual > *{ position: relative; z-index: 1; }
  .hero-visual::before{
    /* Декоративный glow в правом верхнем углу. Раньше торчал на 80px наружу
       (top:-80px; right:-80px) — давало horizontal overflow на узких экранах.
       Глоу с blur(40px) и так размыт — смещение в 0 визуально незаметно. */
    content: ""; position: absolute; top: 0; right: 0; width: 320px; height: 320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
  }
  .hv-header{
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; color: var(--muted);
  }
  .hv-dots{ display: flex; gap: 6px; }
  .hv-dots i{ width: 9px; height: 9px; border-radius: 50%; background: var(--border-hi); }

  .hv-big{
    position: relative;
    background: linear-gradient(135deg, var(--bg-2) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 20px; flex: 1;
    overflow: hidden;
    display: flex; flex-direction: column; gap: 20px;
  }
  .hv-big::after{
    content:""; position: absolute; inset: 0;
    background:
      radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 50%);
    pointer-events: none;
  }
  .metric-row{ display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; }
  .metric-row .chip{
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
    color: var(--fg-2); background: transparent; font-family: var(--mono); font-size: 11px;
    cursor: pointer; transition: .15s;
  }
  .metric-row .chip:hover{ border-color: var(--border-hi); color: var(--fg);}
  .metric-row .chip.on{ background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent-2); color: var(--accent-text); }

  .big-kpi{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card{
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 16px;
    position: relative;
    /* min-width: 0 — иначе длинный лейбл требует больше места чем 1fr,
       grid делает колонки неравными и 2-я ячейка вылетает.
       flex-column + justify-content:space-between прижимает label к верху,
       val к низу — baseline значений выровнен между плитками, даже если
       label в одной 1 строка, в другой 2 (например «Урожайность» vs
       «Устойчивость к засухе»). */
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
  }
  /* overflow-wrap:anywhere — длинные слова переносятся внутри узких kpi-card. */
  .kpi-label{ font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; overflow-wrap: anywhere; }
  .kpi-val{ font-size: 34px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;}
  .kpi-val .u{ font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 4px; }

  /* Chart */
  .chart-wrap{
    /* flex:1 — занимает свободное место в .hv-big, когда .hero-visual
       растягивается по высоте hero-grid (равняется высоте h1-блока). */
    flex: 1;
    min-height: 120px;
    position: relative;
  }
  .chart-wrap svg{ width: 100%; height: 100%; }

  /* Sparkline stats row at bottom of hv-big */
  .hv-foot{
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 14px; border-top: 1px dashed var(--border);
    font-family: var(--mono); font-size: 10px; color: var(--muted);
    letter-spacing: 0.05em;
  }
  .hv-foot span{ display: inline-flex; gap: 6px; align-items: center;}
  .hv-foot b{ color: var(--fg); font-weight: 400;}

  /* ===== LOGO STRIP / SOCIAL PROOF ===== */
  .strip{
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
    margin-top: 60px;
  }
  .strip-inner{
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
    max-width: 100%;
  }
  .strip-flags{ min-width: 0; }
  .strip-label{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;}
  .strip-flags{ display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; opacity: .8;}
  .flag{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2);}
  .flag .sq{ width: 20px; height: 14px; border-radius: 3px; overflow: hidden; position: relative; border: 1px solid var(--border);}

  /* ===== SECTION TITLES =====
     Вертикальный ритм: ТОЛЬКО padding-top, чтобы зазор между секциями
     не удваивался (раньше top+bottom давали 2× --py-sec ≈ 340px).
     Зазор до footer обеспечивает footer { margin-top: var(--py-sec); } */
  section.s{ padding: var(--py-sec) 0 0; position: relative;}
  /* Когда секция одновременно .s и .wrap — вертикальный ритм от .s
     плюс горизонтальный гуттер от .wrap (иначе section.s занулял бы
     горизонталь, и на мобильном контент липнет к краям экрана). */
  section.s.wrap{ padding: var(--py-sec) var(--pad-x) 0; }

  /* Линия-разделитель между секциями внутри wrap-колонки.
     Только если ПЕРЕД section.s идёт другая section.s (т.е. между двумя
     контентными секциями). Hero и первая секция линии не получают.
     top: половина padding-top — линия по центру визуального зазора. */
  main > section.s + section.s::before,
  main > div > section.s + section.s::before,
  main > article > section.s + section.s::before{
    content: '';
    position: absolute;
    top: calc(var(--py-sec) / 2);
    left: var(--pad-x);
    right: var(--pad-x);
    height: 1px;
    background: var(--border);
  }
  /* Якорные переходы не должны прятать заголовок под sticky-навбар */
  section[id], main[id], article > section[id] { scroll-margin-top: 90px; }
  .sec-head{
    /* Горизонтальный auto-layout: левая колонка fill (заголовок течёт
       по ширине), правая hug по контенту (intro компактный, прижат
       вправо). См. DESIGN-SYSTEM §7.3 Figma→CSS. */
    display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end;
    margin-bottom: 56px;
  }
  .sec-head > .sec-intro{ justify-self: end; }
  /* text-wrap: balance — современный CSS для красивого переноса H2 без
     ручных <br/>. Браузер сам распределяет строки. */
  .sec-head h2.h2{ text-wrap: balance; }
  .sec-tag{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px; color: var(--accent-text);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  /* Декоративный префикс-дефис у .sec-tag убран — на якорях типа «09 / вопросы»
     он не нёс смысла и визуально читался как обрезанный list-marker. */
  h2.h2{
    font-size: clamp(32px, 4.2vw, 60px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02;
    margin-top: 14px; text-wrap: balance;
  }
  /* Базовый h3 для секций без локального override (в longread свой стиль) */
  section.s > h3,
  section.wrap > h3,
  section.s h3:not([class]):not(.longread h3),
  .s h3.sec-h3{
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: -0.015em;
    color: var(--fg);
    margin: var(--space-6) 0 var(--space-4);
  }
  .sec-intro{
    font-size: 16px; color: var(--fg-2); line-height: 1.55; max-width: 540px;
    /* строки разбиваются ровно по длине, без висячих коротких слов */
    text-wrap: balance;
  }

  /* ===== BENTO: DIRECTIONS ===== */
  .bento{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 280px;
    gap: 14px;
  }
  /* Принцип №7: внутренние уровни .card в одной row выравниваются
     по общим baseline-линиям через subgrid. .bento задаёт 4 rows на
     каждую логическую row карточек — top / title / body / footer.
     Каждая .card наследует rows через subgrid и span 4. */
  .bento{
    grid-auto-rows: minmax(260px, auto);
  }
  .bento .card{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    row-gap: var(--space-3);
  }
  /* Контент-обёртка <div> распределяет 3 уровня — h3 (row 2) /
     p (row 3) / stat (row 4) — по subgrid строкам родителя.
     Сам <div> не имеет своего grid, его дети ставятся напрямую
     через display:contents и явные grid-row. */
  .bento .card > div:last-child{
    display: contents;
  }
  .bento .card > div:last-child > h3{ grid-row: 2;}
  .bento .card > div:last-child > p{ grid-row: 3; align-self: start;}
  /* Отступ chip от текста — в CSS, НЕ inline (убран из разметки 14 мест),
     иначе inline перебивал margin-top:auto в карусели. На десктопе chip в
     grid-row:4 (прибита к низу самим grid), 14px — зазор от p. */
  .bento .card > div:last-child > .c-stat{ grid-row: 4; margin-top: 14px;}
  /* Decorative SVG в bento — единый размер для всех 5 карточек.
     position: absolute + z-index: 0, контент выше через z-index: 1. */
  .bento .card > svg.bento-svg,
  .bento .card > svg.plant-svg,
  .bento .card > svg.eco-svg{
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 240px;
    height: 240px;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
  }
  .bento .card > .c-top,
  .bento .card > div:last-child > *{
    position: relative;
    z-index: 1;
  }
  /* Container query: chip-группа сама решает раскладку по своей ширине.
     Порог 510px — на этой ширине самая широкая пара chip-ов (b-soil/b-eco,
     ~455px + 8px gap + 48px padding = 511px) перестаёт помещаться в ряд.
     Если карточка ШЕ ≥ 510px — chip-ы в ряд. Уже — в стопку.
     ИНВАРИАНТ: не зависит от viewport, только от ширины карточки.
     Браузерная поддержка: Chrome 105+/Safari 16+ (с осени 2022). Старые
     браузеры падают в flex-wrap (приемлемый fallback). */
  .bento .card{
    container-type: inline-size;
    container-name: bento-card;
  }
  @container bento-card (max-width: 510px){
    .c-stat{ flex-direction: column;}
  }
  /* BENTO как горизонтальная карусель на touch-устройствах (≤ 1023px).
     Применяется на mobile + planшетах (iPad portrait/landscape до 1023).
     На desktop ≥ 1024 — обычная grid-сетка.
     Все .bento (5 направлений на главной, наука, prod-lines, /kejsy)
     превращаются в свайп-карусель со scroll-snap, peek соседней карточки.
     JS-инициализация добавляет .bento-dots под каждым .bento — точки
     синхронизируются со scroll-позицией.
     ИНВАРИАНТ: .bento — flex с overflow-x:auto, .card имеет flex:0 0 85%,
     и scroll-snap-align:start. Edge bleed: горизонтальные паддинги .wrap
     компенсируются margin-inline/scroll-padding-inline. */
  @media (max-width: 1023px){
    .bento{
      display: flex !important;
      gap: 14px;
      grid-auto-rows: auto;
      grid-template-columns: none !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* edge bleed — карусель ходит до краёв viewport */
      margin-inline: calc(-1 * var(--pad-x));
      padding-inline: var(--pad-x);
      scroll-padding-inline: var(--pad-x);
    }
    .bento::-webkit-scrollbar{ display: none;}
    .bento .card{
      display: flex !important;
      flex-direction: column;
      grid-row: auto;
      grid-column: auto !important;
      flex: 0 0 85%;
      scroll-snap-align: start;
      min-width: 0;
    }
    /* Карусель = flex-режим: grid-row:4 (десктопная привязка chip к низу) НЕ
       работает, т.к. карточка тут display:flex, а не grid. Воспроизводим то же
       детерминированно через flex (Figma: auto-layout, chip pinned bottom):
       - обёртка flex:1 — занимает всё место под .c-top до низа карточки;
       - chip margin-top:auto — выталкивается к низу обёртки.
       Высота текста (h3+p) больше НЕ двигает chip — baseline всех карточек
       совпадает независимо от длины описания. */
    .bento .card > div:last-child{ display: flex; flex-direction: column; gap: var(--space-2); flex: 1;}
    .bento .card > div:last-child > .c-stat{ margin-top: auto;}
    /* Точки-индикаторы под bento (генерируются JS через .bento-dots) */
    .bento-dots{
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: var(--space-3);
      padding: 0;
      list-style: none;
    }
    .bento-dot{
      width: 24px;   /* хит-зона; видимая точка 8px за счёт прозрачного border */
      height: 24px;
      border-radius: 999px;
      background: var(--border-hi);
      border: 8px solid transparent;
      background-clip: padding-box;
      padding: 0;
      cursor: pointer;
      transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
    }
    .bento-dot.on{
      background: var(--accent-2);
      width: 22px;
    }
  }
  /* На desktop ≥ 1024 точки скрыты, bento — обычная grid */
  @media (min-width: 1024px){
    .bento-dots{ display: none;}
  }


  /* VIDEOS как горизонтальная карусель на touch-устройствах (≤ 1023px).
     Применяется на mobile + planшетах (iPad portrait/landscape до 1023).
     На desktop ≥ 1024 — обычная grid-сетка (3 колонки).
     Тот же паттерн что и .bento: scroll-snap, peek 85%, точки через JS.
     ИНВАРИАНТ: каждый .vid — 85% ширины viewport, scroll-snap-align:start. */
  @media (max-width: 1023px){
    .vids-grid{
      display: flex !important;
      grid-template-columns: none !important;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-inline: calc(-1 * var(--pad-x));
      padding-inline: var(--pad-x);
      scroll-padding-inline: var(--pad-x);
    }
    .vids-grid::-webkit-scrollbar{ display: none;}
    .vids-grid .vid{
      flex: 0 0 85%;
      scroll-snap-align: start;
      min-width: 0;
    }
  }
  .card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    color: inherit;
  }
  /* Hover / cursor / CTA-стрелка — ТОЛЬКО для интерактивных .card (a.card) */
  a.card{
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
  }
  a.card:hover{
    border-color: var(--border-hi);
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
  }
  /* CTA-стрелка — визуальный сигнал кликабельности для всех card-подобных tiles */
  a.card::after,
  a.role-tile::after,
  a.related-card::after,
  a.feature-tile::after,
  a.blog-card::after{
    content: "";
    position: absolute;
    right: 20px; bottom: 20px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392400E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / 14px no-repeat;
    border: 1px solid var(--border);
    opacity: 0.6;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
    z-index: 3;
    pointer-events: none;
  }
  a.card:hover::after,
  a.role-tile:hover::after,
  a.related-card:hover::after,
  a.feature-tile:hover::after,
  a.blog-card:hover::after{
    opacity: 1;
    transform: translateX(3px);
    border-color: var(--accent-2);
  }
  /* Декоративные .card (div) — без курсора-указателя */
  div.card{ cursor: default;}
  /* Прижимаем нижний контент в карточках, чтобы стрелка не накладывалась на текст */
  a.card > div:last-child,
  a.role-tile > div:last-child{ padding-right: 44px;}
  .card .c-top{ display: flex; align-items: center; justify-content: space-between; }
  .card .c-num{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em;}
  /* .card .c-ic удалён — теперь .feature-tile-icon--neutral на <span> в HTML.
     См. DESIGN-SYSTEM.md §02 «Иконки и подложки». */
  .card h3{ font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance;}
  .card p{ font-size: 13px; color: var(--fg-2); line-height: 1.5; margin-top: 8px; }
  /* c-stat — универсальный контейнер для одной или нескольких pill-метрик.
     Каждый <li> = отдельный факт-pill. Хорошо смотрится и для 1 факта
     («Урожайность +25%»), и для 2-3 («Падёж −25%», «Корма −20%»).
     Используется в .card (bento), .role-tile (Roles), sub-hero (proizvodstvo),
     longread feature-rows и др. */
  ul.c-stat{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-self: flex-start;
  }
  ul.c-stat li{
    align-items: baseline;  /* для выравнивания <b> по baseline текста — перебивает base */
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.03em;
    width: fit-content;
  }
  ul.c-stat li b{
    color: var(--accent-text);
    font-weight: var(--weight-medium);
    /* НЕ ставить white-space:nowrap: в <b> бывают длинные фразы (география,
       названия документов), они вылезут за карточку. Числа-диапазоны не рвутся
       за счёт НЕРАЗРЫВНОГО тире ‑ (U+2011) в самих данных — детерминизм в
       контенте, а не костыль стилем. */
  }
  /* На карточках с tint-фоном — pill использует surface (белый) как контраст.
     .b-soil имеет background: var(--bg-2), который совпадает с pill default
     --surface-2, поэтому pill там тоже должен быть --surface (белый). */
  .b-plants .c-stat li,
  .b-eco .c-stat li,
  .b-soil .c-stat li,
  .role-tile--investor .c-stat li,
  .role-tile--farmer .c-stat li{
    background: var(--surface);
  }
  /* Hero и sub-hero stats — больше воздуха сверху */
  .sub-hero-stats{
    margin-top: var(--space-5) !important;
  }

  /* Specific cells — 5 направлений в 6-col grid: 3-2 раскладка.
     Row 1: 3 ячейки по 2 col (Растениеводство / Животноводство / Экология).
     Row 2: 2 ячейки по 3 col (Птица / Почвы) — пошире, чтобы текст помещался. */
  .b-plants{
    grid-column: 1 / span 2; grid-row: 1 / span 1;
    background: linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 10%, var(--surface)) 100%);
  }

  .b-animals{ grid-column: 3 / span 2; grid-row: 1 / span 1; }
  .b-eco{
    grid-column: 5 / span 2; grid-row: 1 / span 1;
    background: linear-gradient(200deg, var(--surface) 0%, color-mix(in srgb, var(--emerald) 10%, var(--surface)) 100%);
  }
  .b-birds{ grid-column: 1 / span 3; grid-row: 2 / span 1; }
  .b-soil{ grid-column: 4 / span 3; grid-row: 2 / span 1; background: var(--bg-2);}

  .b-eco .c-stat li b{ color: var(--emerald);}

  /* ===== ROLE-GRID — три карточки ролей на главной §01 =====
     Принцип №7 в DESIGN-SYSTEM.md: внутри tile, лежащих в одной строке,
     уровни (eyebrow / decorative-svg / title / body / footer) должны
     совпадать по вертикали друг с другом. Достигается через subgrid:
     .role-grid задаёт 4 row-линии, каждый .role-tile наследует их и
     ставит свой контент на соответствующие линии. */
  .role-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
    align-items: stretch;
  }
  @media (max-width: 960px){
    .role-grid{ grid-template-columns: 1fr; gap: var(--space-3);}
  }
  /* #roles — горизонтальная карусель на touch ≤1023px, тот же паттерн что .bento
     (flex+snap+edge-bleed, точки через JS snapCarousel → targets .role-grid).
     ДОЛЖНО идти ПОСЛЕ override {1fr} выше — при равной специфичности побеждает
     последнее правило; иначе display:grid из базового .role-grid перебивает flex. */
  @media (max-width: 1023px){
    .role-grid{
      display: flex;
      gap: 14px;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-inline: calc(-1 * var(--pad-x));
      padding-inline: var(--pad-x);
      scroll-padding-inline: var(--pad-x);
    }
    .role-grid::-webkit-scrollbar{ display: none;}
    .role-grid > .role-tile{
      flex: 0 0 85%;
      scroll-snap-align: start;
      min-width: 0;
    }
  }

  .role-tile{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
    display: grid;
    grid-template-rows: auto auto 1fr auto;  /* top / title / body-stretch / footer */
    row-gap: var(--space-3);
    color: inherit;
    min-height: 360px;
  }
  @media (max-width: 960px){
    .role-tile{
      /* Первая строка (c-top) фиксирована 36px = высота иконки. С `auto` высота
         c-top гуляет на ~2px между карточками (субпиксельный рендеринг разных
         SVG-иконок) → заголовки (row 2) стартуют не с одной линии. Фикс держит
         baseline заголовков ровным в карусели. */
      grid-template-rows: 36px auto auto auto;
      min-height: 0;
    }
  }
  .role-tile .c-top{ grid-row: 1;}
  .role-tile .role-tile-title{ margin: 0; grid-row: 2; align-self: start;}
  .role-tile .role-tile-body{ margin: 0; align-self: start; grid-row: 3;}
  .role-tile .role-tile-footer{ margin: 0; align-self: end; grid-row: 4;}
  a.role-tile:hover{
    border-color: var(--border-hi);
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
  }
  .role-tile .c-top{ display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2;}
  .role-tile .c-num{ font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.06em;}
  /* .role-tile .c-ic удалён — теперь .feature-tile-icon на <span>. */
  .role-tile h3{
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin: 0 0 var(--space-3);
    color: var(--fg);
    position: relative; z-index: 2;
  }
  .role-tile p{
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--fg-2);
    margin: 0;
    position: relative; z-index: 2;
  }
  /* z-index чтобы pill оставался над .role-tile-bg декором */
  .role-tile .c-stat{ position: relative; z-index: 2;}
  /* Фоновая иллюстрация — узнаваемый мотив роли */
  .role-tile-bg{
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 200px; height: 200px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .role-tile:hover .role-tile-bg{
    opacity: 0.28;
    transform: translate(-4px, -2px);
  }
  /* Tint-фон по ролям */
  .role-tile--investor{
    background: linear-gradient(165deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%);
  }
  .role-tile--agro{
    background: var(--surface);
  }
  .role-tile--farmer{
    background: linear-gradient(195deg, var(--surface) 0%, color-mix(in srgb, var(--emerald) 8%, var(--surface)) 100%);
  }
  .role-tile--farmer .role-tile-bg path,
  .role-tile--farmer .role-tile-bg ellipse{ stroke: var(--moss);}
  /* .role-tile--farmer .c-ic удалён — теперь .feature-tile-icon--moss на <span>. */
  .role-tile--farmer .c-stat li b{ color: var(--moss);}
  @media (max-width: 720px){
    .role-tile{ min-height: 280px; padding: var(--space-5);}
    .role-tile-bg{ width: 150px; height: 150px;}
  }

  /* ===== STATS BAND ===== */
  .band{
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .band-item{
    padding: 40px 28px;
    border-right: 1px solid var(--border);
    position: relative;
  }
  .band-item:last-child{ border-right: none;}
  .band-num{
    font-size: clamp(44px, 5vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 1;
    background: linear-gradient(135deg, var(--fg) 0%, var(--accent) 120%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .band-num sup{ font-size: 0.35em; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 6px; top: -1.1em; -webkit-text-fill-color: var(--muted); font-family: var(--mono);}
  .band-label{
    margin-top: 14px; font-size: 13px; color: var(--fg-2); line-height: 1.45; max-width: 220px;
  }

  /* ===== AUTHOR ===== */
  .author-card{
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    /* align-self: start — карточка НЕ растягивается на всю высоту строки
       hero-grid (align-items: stretch). Иначе aspect-ratio 4/5
       пересчитывает ширину под высоту длинной текстовой колонки и
       раздувается за пределы колонки → горизонтальный overflow.
       width: 100% — занимает свою колонку целиком (фото крупное),
       aspect-ratio даёт высоту от ширины, а не наоборот. max-width НЕ
       ставим — он искусственно ужимал фото меньше колонки. */
    align-self: start;
    width: 100%;
  }
  .author-card .portrait-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
  }
  .author-card .overlay{
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 24px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 85%);
    /* Текст лежит на тёмном градиенте поверх фото — цвет ВСЕГДА светлый,
       не var(--fg) (он тёмный на светлой теме → сливался с пиджаком/градиентом). */
    color: #fff;
  }
  .author-card .overlay h4{ font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #fff;}
  .author-card .overlay p{ font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.78); margin-top: 6px; letter-spacing: 0.04em;}

  .author-card .badge{
    position: absolute; top: 20px; left: 20px;
    display: flex; align-items: center; gap: 8px;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
    border-radius: 999px;
    padding: 6px 12px 6px 6px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  }
  .author-card .badge .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent);}

  .bio-quote{
    margin: 32px 0;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 18px; line-height: 1.45; color: var(--fg);
    position: relative;
  }
  .bio-quote::before{
    content: ""; position: absolute; left: 24px; top: -8px; width: 24px; height: 16px;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
  }
  .bio-quote em{ color: var(--accent-text); font-style: normal; font-weight: 500;}
  .bio-quote cite{
    display: block; margin-top: 16px; font-style: normal;
    font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
  }

  .bio-timeline{
    display: grid; gap: 0;
    border-top: 1px solid var(--border);
  }
  .bio-row{
    display: grid; grid-template-columns: 120px 1fr auto; gap: 20px;
    padding: 18px 0; border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .bio-row .y{ font-family: var(--mono); font-size: 12px; color: var(--accent-text); letter-spacing: 0.03em;}
  .bio-row .t{ font-size: 14px; color: var(--fg-2); line-height: 1.5;}
  .bio-row .t b{ color: var(--fg); font-weight: 500;}
  .bio-row .m{ font-family: var(--mono); font-size: 10px; color: var(--muted);}

  /* ===== MAP / GEO ===== */
  .map-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    position: relative;
    padding: 32px;
  }
  .map-header{
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 40px; margin-bottom: 32px; flex-wrap: wrap;
  }
  .map-header h3{ font-size: 28px; font-weight: 500; letter-spacing: -0.025em; max-width: 400px; text-wrap: balance;}
  .map-tabs{ display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; font-size: 12px;}
  .map-tabs button{ padding: 6px 14px; border-radius: 999px; color: var(--fg-2); font-family: var(--mono); font-size: 11px;}
  .map-tabs button.on{ background: var(--accent); color: var(--on-accent);}

  .map-stage{
    position: relative;
    aspect-ratio: 2754 / 1398;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .map-stage .world-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: .5;
    filter: grayscale(1) brightness(0.75);
  }
  .map-stage .world-img{background-image:url("/assets/world.svg");background-size:contain;background-position:center;background-repeat:no-repeat;}

  .map-pin{
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 0 0 0 var(--accent);
    animation: pinpulse 1.6s infinite;
    z-index: 2;
  }
  .map-pin.feat{
    width: 14px; height: 14px; background: var(--moss);
    box-shadow: 0 0 0 0 var(--moss);
    animation: pinpulse-feat 1.6s infinite;
    z-index: 3;
  }
  @keyframes pinpulse-feat{
    0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--moss) 60%, transparent);}
    70%{ box-shadow: 0 0 0 14px color-mix(in srgb, var(--moss) 0%, transparent);}
    100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--moss) 0%, transparent);}
  }
  .map-pin.hidden{ opacity: 0; transform: translate(-50%,-50%) scale(.4); pointer-events: none;}
  .map-pin{ transition: opacity .25s ease, transform .25s ease;}
  .map-pin::after{
    content: attr(data-c);
    position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%);
    background: var(--bg); border: 1px solid var(--border-hi);
    padding: 4px 8px; border-radius: 6px;
    font-family: var(--mono); font-size: 10px; white-space: nowrap; color: var(--fg);
    opacity: 0; transition: opacity .15s; pointer-events: none;
  }
  .map-pin:hover::after{ opacity: 1;}
  @keyframes pinpulse{
    0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);}
    70%{ box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent);}
    100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);}
  }

  .map-list{
    margin-top: 32px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px;
  }
  .map-row{
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px dashed var(--border);
    font-size: 13px; color: var(--fg-2);
    font-family: var(--mono);
  }
  .map-row em{ font-style: normal; color: var(--muted); font-size: 10px;}
  .map-row.feat{ color: var(--accent-text);}

  /* ===== VIDEOS ===== */
  .vids-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
  .vid{
    position: relative; aspect-ratio: 16/10;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: .25s;
  }
  .vid:hover{ transform: translateY(-4px); border-color: var(--border-hi);}
  .vid .thumb{ position: absolute; inset: 0; }
  .vid .thumb::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85));}
  .vid .thumb::before{
    content:""; position:absolute; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/></svg>");
    mix-blend-mode: overlay;
  }
  .vid .thumb{ background-size: cover; background-position: center; background-color: var(--bg-2);}
  .v1 .thumb{ background-image: url("/assets/photos/videos/6soZvLUkLuA.jpg");}
  .v2 .thumb{ background-image: url("/assets/photos/videos/P6fxkz5Dbuk.jpg");}
  .v3 .thumb{ background-image: url("/assets/photos/videos/PRIfd41XRnU.jpg");}
  .v4 .thumb{ background-image: url("/assets/photos/videos/UTCB-Yo0NaI.jpg");}
  .v5 .thumb{ background-image: url("/assets/photos/videos/co_WvZEKAA4.jpg");}
  .v6 .thumb{ background-image: url("/assets/photos/videos/hiu9aC6JmBI.jpg");}
  .v7 .thumb{ background-image: url("/assets/photos/videos/xvaGIsFUsmU.jpg");}

  .vid .play{
    position: absolute; top: 16px; left: 16px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    display: flex; align-items: center; justify-content: center;
    padding-left: 3px; font-size: 12px;
    transition: .3s;
  }
  .vid:hover .play{ transform: scale(1.1);}
  .vid .meta{ position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: var(--fg);}
  .vid .meta .dur{ font-family: var(--mono); font-size: 11px; color: color-mix(in srgb, var(--fg) 60%, transparent); letter-spacing: 0.04em; display: block; margin-bottom: 8px;}
  .vid .meta h4{ font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance;}
  /* ===== CTA ===== */
  .cta-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: clamp(32px, 4vw, 56px);
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    position: relative; overflow: hidden;
  }
  .cta-card::before{
    content: ""; position: absolute; top: -200px; right: -150px; width: 500px; height: 500px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
    filter: blur(40px);
  }
  .cta-card > *{ position: relative;}
  .cta-left h2{ font-size: clamp(32px, 4vw, 52px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance;}
  .cta-left p{ margin-top: 20px; font-size: 15px; color: var(--fg-2); line-height: 1.55; max-width: 420px;}
  .cta-bullets{ margin-top: 32px; display: flex; flex-direction: column; gap: 12px;}
  .cta-bullets div{ display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--fg-2);}
  .cta-bullets div .cc{
    width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent);
    display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none;
  }
  .cta-bullets div .cc svg{ width: 12px; height: 12px;}

  .cta-form{
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
  }
  /* Вариант без обёртки — для встраивания внутри другого .contact-card / контейнера */
  .cta-form--bare{
    background: transparent;
    border: none;
    padding: 0;
  }
  .field{
    display: flex; flex-direction: column; gap: 6px;
  }
  /* Label: 12px (var(--text-xs)) — раньше было 10px, что мелко на десктопе. */
  .field label{ font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;}
  .field input, .field select{
    width: 100%;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px;
    color: var(--fg); font: inherit; font-size: 14px; outline: none;
    transition: border-color .15s;
  }
  /* Кастомная стрелка select — chevron-down, акцент-цвет. Перебивает нативную
     браузерную стрелку (которая везде разная и не согласована с дизайном). */
  .field select{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23924312' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 36px;
  }
  .field input::placeholder{ color: var(--muted);}
  .field input:focus, .field select:focus{ border-color: var(--accent);}
  .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);}
  /* Вертикальный ритм между подряд идущими полями (.field-row / .field):
     по умолчанию они слипались — добавляем расстояние, синхронное с
     горизонтальным gap (var(--space-3) = 14px).
     ВАЖНО: правило ".field + .field" применяется ТОЛЬКО к прямым потомкам
     <form>, чтобы НЕ ломать baseline у двух .field внутри .field-row
     (там горизонтальное соседство, а не вертикальное). */
  .cta-form > .field-row + .field-row,
  .cta-form > .field + .field-row,
  .cta-form > .field-row + .field,
  .cta-form > .field + .field{ margin-top: var(--space-3);}
  /* Ритм блока согласий: отделяем от полей и кнопки (20px), сами чекбоксы —
     плотная группа (8px). Один источник истины — переходы через `+`, без
     margin-collapse. Класс: правило общее для всех 6 форм сайта. */
  .cta-form > .field + .consent,
  .cta-form > .field-row + .consent{ margin-top: 20px;}
  .cta-form > .consent + .consent{ margin-top: 8px;}
  .cta-form > .consent + .submit{ margin-top: 20px;}
  .consent{ display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0;}
  /* Cookie-баннер: фиксированная плашка внизу, поверх контента, до согласия */
  .cookie-bar{ position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
    max-width: 720px; margin: 0 auto; padding: 14px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.18); font-size: 13px; color: var(--fg); line-height: 1.45;}
  .cookie-bar[hidden]{ display: none;}
  .cookie-bar-text{ flex: 1 1 320px;}
  .cookie-bar-text a{ color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px;}
  .cookie-bar-btn{ flex: 0 0 auto; padding: 9px 22px; border: none; border-radius: 999px;
    background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 13px; cursor: pointer;}
  .cookie-bar-btn:hover{ filter: brightness(1.05);}
  @media (max-width: 520px){ .cookie-bar{ left: 8px; right: 8px; bottom: 8px; padding: 12px 14px;} }
  .consent input{ width: 14px; height: 14px; accent-color: var(--accent); margin-top: 2px; flex: none;}
  .submit{
    padding: 14px; background: var(--accent); color: var(--on-accent);
    font-weight: 600; font-size: 14px; border-radius: 10px;
    transition: .18s;
  }
  .submit:hover{ background: var(--accent-2);}
  .submit.success{ background: var(--emerald); color: white;}

  /* ===== STEPPER (process visualization) ===== */
  .stepper{
    --step-num-size: 12px;
    --step-line: 1px;
    --step-gap: 18px;
    display: grid;
    gap: var(--step-gap);
    grid-template-columns: repeat(var(--step-cols, 6), 1fr);
    margin: 28px 0 12px;
    padding: 0;
    list-style: none;
    position: relative;
    counter-reset: step;
  }
  .stepper .step{
    position: relative;
    padding-top: 30px;
    list-style: none;
    margin: 0;
  }
  .stepper .step::marker{ content: ""; }
  .stepper .step::before{
    content: "";
    position: absolute; top: 9px; left: 0; right: 0;
    height: var(--step-line);
    background: var(--border-hi);
  }
  .stepper .step:first-child::before{ left: 9px; border-radius: 999px 0 0 999px;}
  .stepper .step:last-child::before{ right: 9px; border-radius: 0 999px 999px 0;}
  .stepper .step .dot{
    position: absolute; top: 3px; left: 0;
    width: 14px; height: 14px; border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--border-hi);
    box-sizing: border-box;
  }
  .stepper .step.is-active .dot,
  .stepper .step.is-done .dot{
    background: var(--accent);
    border-color: var(--accent-2);
  }
  .stepper .step .n{
    display: block;
    font-family: var(--mono);
    font-size: var(--step-num-size);
    color: var(--accent-text);
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .stepper .step h4{
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .stepper .step p{
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
  }

  @media (max-width: 860px){
    .stepper{
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .stepper .step{
      padding: 14px 0 14px 36px;
    }
    .stepper .step::before{
      top: 0; bottom: 0; left: 13px; right: auto;
      width: var(--step-line); height: auto;
      background: var(--border-hi);
    }
    .stepper .step:first-child::before{ top: 14px; border-radius: 999px 999px 0 0;}
    .stepper .step:last-child::before{ bottom: auto; height: 14px; border-radius: 0;}
    .stepper .step .dot{
      top: 14px; left: 7px;
    }
  }
  /* Solo-карточка — единственная во вкладке, без grid-родителя.
     Сбрасываем subgrid/span, занимает всю ширину панели, обычный flex-flow. */
  .compare-card--solo{
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    grid-row: auto;
    grid-template-rows: none;
    margin: var(--space-6) 0;
  }
  .compare-card--solo > header{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  /* Сетка метрик внутри solo-карточки. 3 плитки в ряд, на узких — стек. */
  .compare-card-metrics{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-2) 0;
  }
  .compare-card-metrics .feature-tile{
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  @media (max-width: 720px){
    .compare-card-metrics{ grid-template-columns: 1fr; }
  }
  /* Сетка сразу после подзаголовка .lede — связать визуально в один блок.
     Зазор копился из margin-bottom lede (28px в .longread) + margin-top сетки
     (32px), collapse брал больший = 32. Обнуляем margin-top сетки и подрезаем
     margin-bottom lede до 16px — итог ровно 16px. Класс: compare-grid + feature-grid. */
  .lede + .compare-grid,
  .lede + .feature-grid{ margin-top: 0;}
  .longread p.lede:has(+ .compare-grid),
  .longread p.lede:has(+ .feature-grid){ margin-bottom: var(--space-4);}
  .compare-card{
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    row-gap: var(--space-4);
    padding: var(--space-7) var(--space-6);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  /* header — display: contents, чтобы tag и title стали прямыми
     участниками subgrid карточки (каждый на своей row). */
  .compare-card > header{ display: contents; }
  .compare-card--primary{
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%, var(--surface) 75%);
    box-shadow: var(--shadow-2);
    /* padding-top НЕ увеличиваем — иначе tag/title/headline primary-карточки
       сдвигаются на 16px относительно соседней, ломая baseline в строке.
       Акцент primary держится на tint-градиенте + усиленной тени. */
  }
  /* L2 — Local category. См. DESIGN-SYSTEM.md §1, принцип 8.
     В --muted, чтобы не сливаться с L1 (.sec-tag) на той же странице. */
  .compare-card-tag{
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* дефис перед tag-ом убран — оставляем чистый моно-текст */
  .compare-card-title{
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--fg);
  }
  .compare-card-headline{
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--fg);
    letter-spacing: -0.015em;
    margin: var(--space-2) 0 var(--space-2);
  }
  .compare-card--primary .compare-card-headline{
    color: var(--accent-text);
  }
  .compare-card-sub{
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 0 0 var(--space-3);
  }
  .compare-card-list{
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .compare-card-list li,
  .longread article ul.compare-card-list li{
    position: relative;
    padding: 0 0 0 24px;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--fg-2);
    border-bottom: none;
  }
  /* маркер списка — круглая точка вместо дефиса.
     Используем background-color на квадратном псевдоэлементе + border-radius,
     а не текстовый «•» — чтобы вертикальное позиционирование было точным
     и не зависело от baseline шрифта. */
  .compare-card-list li::before,
  .longread article ul.compare-card-list li::before{
    content: "";
    position: absolute;
    left: 6px; top: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent-2);
    color: transparent;
    font-family: inherit;
  }
  .compare-card-list li b{ color: var(--fg); font-weight: var(--weight-medium);}
  .compare-card-footer{
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--muted);
  }
  @media (max-width: 720px){
    .compare-card{
      display: flex;
      flex-direction: column;
      grid-row: auto;
      padding: var(--space-6) var(--space-5);
    }
  }

  /* ===== PTABS — вкладки-сценарии (/partneram §03) =====
     Два сценария окупаемости одной линии: «на продажу» / «для хозяйства».
     Адаптив встроен: flex-wrap + min(100%,220px) → на узких экранах кнопки
     стекаются на всю ширину без отдельного @media. */
  .ptabs{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0 var(--space-5);
  }
  .ptab{
    flex: 1 1 auto;
    min-width: min(100%, 220px);
    padding: var(--space-3) var(--space-5);
    font-family: var(--mono);
    font-size: clamp(13px, 2.6vw, 15px);
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
  }
  .ptab:hover{ color: var(--fg); }
  .ptab.is-on{
    color: var(--fg);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  }
  .ptab:focus-visible{
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
  }
  .ppanel.is-hidden{ display: none; }

  /* Активная вкладка визуально срастается с панелью-карточкой: убираем
     нижнюю границу/скругление у вкладки, обнуляем gap, активная карточка
     получает жёлтую рамку как у вкладки. Локально в #p_scenarios. */
  /* Все шины (#ptabs главная + [data-ptab-sync] дубль над калькулятором) —
     одинаковое поведение «стопка документов»: прижаты к карточке снизу. */
  #p_scenarios #ptabs,
  #p_scenarios [data-ptab-sync]{ margin-bottom: 0; gap: 0; }
  #p_scenarios #ptabs .ptab,
  #p_scenarios [data-ptab-sync] .ptab{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    margin-bottom: -1px;
    position: relative;
  }
  /* Активная — поверх неактивной (z-index). */
  #p_scenarios .ptab.is-on{ z-index: 1; }
  /* Неактивная — белый фон (вместо акцентного у активной). */
  #p_scenarios .ptab:not(.is-on){ background: var(--surface); }

  /* Десктоп — длинный текст, короткий скрыт. */
  #p_scenarios .ptab-short{ display: none; }

  /* Мобильный (≤600px) — вкладки в строку 50/50, короткий текст. */
  @media (max-width: 600px){
    #p_scenarios .ptab{
      min-width: 0;
      flex: 1 1 0;
      padding: var(--space-3) var(--space-2);
    }
    #p_scenarios .ptab-full{ display: none; }
    #p_scenarios .ptab-short{ display: inline; }
  }
  #p_scenarios .ppanel:not(.is-hidden) .compare-card--solo,
  #p_scenarios .ppanel:not(.is-hidden) #roi-calc,
  #p_scenarios .ppanel:not(.is-hidden) #roif-calc{
    margin-top: 0;
    border: 1px solid var(--accent);
    /* Фон совпадает с активной вкладкой (не градиент primary-карточки),
       иначе на стыке видна горизонтальная разница оттенков. */
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    /* Оба верхних угла карточки квадратные — сверху всегда сидят вкладки
       (активная + неактивная), обе с квадратными нижними углами. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
    padding: var(--space-7) var(--space-6);
    box-shadow: var(--shadow-1);
  }
  /* Внутри карточки калькулятора на жёлтом фоне — поля и плитки белые
     (вместо серого --bg-2, чтобы не мерцало). Кастомная стрелка select,
     вертикальный ритм и font-size label — наследуются из глобальных
     правил .field/.field-row/.cta-form (см. строки 1045+). */
  #p_scenarios #roi-calc select,
  #p_scenarios #roi-calc input,
  #p_scenarios #roif-calc select,
  #p_scenarios #roif-calc input,
  #p_scenarios #roi-calc .feature-tile,
  #p_scenarios #roif-calc .feature-tile{
    background-color: var(--surface);
  }
  /* В калькуляторе #roi-calc нет <form>, поэтому глобальное правило
     .cta-form .field + .field-row не сработает — добавляем local. */
  #p_scenarios #roi-calc .field-row + .field-row,
  #p_scenarios #roif-calc .field-row + .field-row{
    margin-top: var(--space-3);
  }

  /* ===== ROI-KPI-VAL — числовое значение в плитке ROI-калькуляторов =====
     Выходные значения CAPEX, OPEX, окупаемость и т.д. в плитках калькуляторов
     A (на продажу) и B (для хозяйства). Раньше повторялся 16× inline.
     Двойной селектор поднимает специфичность над .longread p (0,1,1). */
  .roi-kpi-val,
  .longread .roi-kpi-val{
    font-size: 22px;
    color: var(--fg);
    font-family: var(--font);
    margin: 6px 0 0;
  }

  /* ===== LINK-ACCENT — акцентная контекстная ссылка в тексте =====
     Подчёркнутые ссылки в FAQ-ответах, lede и теле абзацев. Раньше
     повторялся 11× inline. */
  .link-accent{
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ===== HONEYPOT — скрытое поле формы для защиты от спама =====
     Невидимое поле, которое заполняют только боты. Используется во всех
     7 формах сайта. Раньше повторялся 7× inline. */
  .honeypot{
    position: absolute;
    left: -9999px;
    opacity: 0;
  }

  /* ===== Стрелка → в submit-кнопках форм и в .mm-cta моб.меню =====
     Базовый стиль для SVG-иконок рядом с текстом. Раньше повторялся 8× inline. */
  .mm-cta > svg,
  .submit > svg,
  .btn > svg{
    /* Глобальный reset img,svg{display:block} ломает inline-расположение
       рядом с текстом в кнопках — возвращаем inline-block. */
    display: inline-block;
    vertical-align: -2px;
    margin-left: 4px;
  }

  /* ===== ICONS (Lucide sprite) =====
     Использование: <svg class="icon"><use href="/assets/icons.svg#i-<name>"/></svg>
     Атрибуты Lucide (stroke=currentColor, stroke-width, linecap/join=round)
     наследуются от <symbol> к <use>, поэтому здесь дублируем их для надёжности.
     Размеры — через модификаторы .icon-sm / .icon-lg / .icon-xl.
     См. DESIGN-SYSTEM.md §02 (Атомы → Иконки) и assets/icons.svg. */
  .icon{
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;  /* выравнивание baseline с текстом */
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: inherit;
  }

  /* ===== БЛОГ: фильтр по направлению =====
     Кнопки в строку, активная — с акцент-фоном. Скрытие карточек через
     [data-hidden] (а не display:none), чтобы grid-flow корректно пересобирался. */
  .blog-filter{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
  }
  .blog-filter-btn{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--fg-2);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .blog-filter-btn:hover{
    color: var(--fg);
    border-color: var(--accent);
  }
  .blog-filter-btn.is-on{
    color: var(--fg);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border-color: var(--accent);
  }
  .blog-filter-btn:focus-visible{
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
  }
  .blog-filter-count{
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  .blog-filter-btn.is-on .blog-filter-count{ color: var(--accent-text); }
  /* Скрытая карточка не рендерится в grid — нужно display:none, иначе пустой слот */
  .blog-card[data-hidden],
  .blog-featured[data-hidden]{ display: none; }
  .blog-empty{
    text-align: center;
    color: var(--muted);
    font-size: var(--text-sm);
    padding: var(--space-6) 0;
  }
  .blog-empty button.link-accent{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--accent-text);
  }
  .blog-empty button.link-accent:hover{ text-decoration: underline; }

  /* ===== БЛОГ — лендинг /blog + карточки статей =====
     Featured-карточка (1×), grid-карточки (auto-fit), читальный режим в статье. */
  .blog-featured{
    display: block;
    padding: var(--space-7) var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--surface)) 0%, var(--surface) 75%);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
  }
  .blog-featured:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--accent);
  }
  .blog-featured-meta{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
  }
  .blog-featured-title{
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.15;
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-3);
    text-wrap: balance;
  }
  .blog-featured-lead{
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--fg-2);
    margin: 0 0 var(--space-4);
    max-width: 70ch;
  }
  .blog-featured-cta{
    font-family: var(--mono);
    font-size: var(--text-sm);
    color: var(--accent-text);
    letter-spacing: 0.02em;
  }

  .blog-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
  }
  .blog-card{
    position: relative;  /* для ::after со стрелкой в правом нижнем углу */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
  }
  /* Правый отступ у meta — чтобы текст даты не накладывался на стрелку ::after */
  .blog-card-meta{ padding-right: 44px; }
  .blog-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
    border-color: var(--accent);
  }
  /* Верхняя строка: категория слева, иконка справа. */
  .blog-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .blog-card-cat,
  .blog-cat{
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--accent-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .blog-card-title{
    font-size: var(--text-lg);
    line-height: 1.3;
    font-weight: var(--weight-bold);
    margin: 0;
    text-wrap: balance;
  }
  .blog-card-lead{
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--fg-2);
    margin: 0;
    flex: 1;
  }
  .blog-card-meta,
  .blog-read{
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* Статья — long-read с метаданными */
  .blog-article-hero{
    padding-block: var(--space-8) var(--space-6);
  }
  .blog-article-meta{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
  }
  .blog-article-title{
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.1;
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
  }
  .blog-article-lead{
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.5;
    color: var(--fg-2);
    max-width: 70ch;
    margin: 0;
  }
  .blog-article-body{
    max-width: 72ch;
    margin: 0 auto;
  }
  .blog-article-body h2{
    font-size: clamp(22px, 2.4vw, 30px);
    margin: var(--space-7) 0 var(--space-3);
    text-wrap: balance;
  }
  .blog-article-body h3{
    font-size: clamp(18px, 1.8vw, 22px);
    margin: var(--space-5) 0 var(--space-2);
  }
  .blog-article-body p,
  .blog-article-body li{
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--fg-2);
  }
  .blog-article-body p{ margin: 0 0 var(--space-4); }
  .blog-article-body ul,
  .blog-article-body ol{ padding-left: var(--space-5); margin: 0 0 var(--space-4); }
  .blog-article-body li{ margin-bottom: var(--space-2); }
  .blog-article-body table{
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--text-sm);
  }
  /* На узких экранах таблица может быть шире контента — даём ей горизонтальный
     скролл внутри своих границ, чтобы не ломать layout страницы. */
  @media (max-width: 600px){
    .blog-article-body table{
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
  }
  .blog-article-body th,
  .blog-article-body td{
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .blog-article-body th{
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--weight-medium);
  }
  .blog-article-body blockquote{
    margin: var(--space-5) 0;
    padding: var(--space-5) var(--space-6);
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-style: normal;
  }
  .blog-article-body blockquote p:last-child{ margin-bottom: 0; }
  .blog-article-body blockquote cite{
    display: block;
    margin-top: var(--space-2);
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    font-style: normal;
    letter-spacing: 0.04em;
  }

  /* Связанные статьи в конце */
  .blog-related{
    margin-top: var(--space-9);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
  }
  .blog-related h2{
    font-size: var(--text-xl);
    margin: 0 0 var(--space-4);
    font-family: var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ===== LINES-COMPARE — 3 карточки сравнения вариантов с info-rows =====
     Альтернатива табличному .cmp-table для случая «3 опции × N параметров».
     На десктопе — 3 карточки рядом, на мобильном — стек.
     Применено: /proizvodstvo §01 (Компакт / Региональная / Промышленная),
     при желании можно использовать на /partneram. */
  .lines-compare{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: var(--space-4);
    margin: var(--space-6) 0;
  }
  @media (max-width: 960px){
    .lines-compare{ grid-template-columns: 1fr; gap: var(--space-3);}
  }
  /* Карточка — flex column (кросс-браузерно надёжнее subgrid, который
     Chrome/WebKit рендерят по-разному при жёстких grid-row детей —
     это вызывало "проваленный" футер в Chrome).
     Baseline выравнивается через min-height headline-зоны (под 2 строки),
     футер прижат к низу через margin-top: auto. */
  .line-card{
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  /* «рекомендуемая» карточка — лёгкий tint + бордер с акцентом */
  .line-card--featured{
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 6%, var(--surface)) 100%);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  .line-card--featured::before{
    content: "Оптимально";
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  }
  .line-card-tag{
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--accent-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
  }
  /* Селектор переусилен (.longread префикс) чтобы перебить глобальное
     `.longread h3 { font-size: 20px }` — line-card-headline это h3
     внутри лонгрида. См. §7.2 протечка tag-стилей.
     min-height под 2 строки — заголовки 1-строчные («Регион») и
     2-строчные («Одно хозяйство») занимают одинаковую высоту, и sub/rows
     стартуют на одной линии у всех карточек (baseline без subgrid). */
  .line-card-headline,
  .longread .line-card-headline{
    font-family: var(--font-display, inherit);
    font-size: var(--text-3xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight, 1.1);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-2);
    min-height: calc(2 * var(--text-3xl) * 1.1);
    color: var(--fg);
    text-wrap: balance;
  }
  .line-card-sub{
    font-size: var(--text-sm);
    color: var(--fg-2);
    line-height: var(--leading-normal);
    margin: 0;
    min-height: calc(3 * var(--text-sm) * var(--leading-normal, 1.5));
  }
  .line-card-rows{
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .line-card-rows li,
  .longread article ul.line-card-rows li,
  .longread article ul.line-card-rows li:last-child{
    display: grid;
    grid-template-columns: 18px 1fr;  /* стрелка | label+value */
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: var(--space-2);
    row-gap: 2px;
    padding: var(--space-3) 0;
    /* ТОЛЬКО border-top на каждом li — никогда не складывается с
       соседним bottom, толщина гарантированно 1px между всеми.
       Селектор с :last-child переусилен, чтобы перебить
       `.longread article ul li:last-child { border: none; }`. */
    border-top: 1px solid var(--border);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    position: relative;
  }
  .line-card-rows{
    /* нижняя граница списка убрана — между списком и footer'ом
       достаточно вертикального воздуха, дополнительная линия создаёт
       визуальный шум. */
  }
  /* Маркер-стрелка перед строкой, центрированный визуально между
     разделительными линиями. Используем inline SVG (background-image)
     вместо текстового → — у текстового глифа оптический центр смещён
     от геометрического из-за baseline шрифта.
     Селектор переусилен (.line-card .line-card-rows) чтобы перебить
     longread-правило `.longread article ul li::before { content: "→" }`. */
  .line-card .line-card-rows li::before,
  .longread article ul.line-card-rows li::before{
    content: "";
    grid-column: 1;
    /* Ставим маркер в row 2 (где value) и поднимаем на пол-высоты label
       через translateY — так центр стрелки попадает в визуальный
       стык label↔value, а не в геометрический центр всего <li>. */
    grid-row: 2;
    align-self: center;
    transform: translateY(-50%);
    justify-self: start;
    position: static;
    left: auto;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392400E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    opacity: 0.6;
    font-family: inherit;
    color: transparent;
  }
  .line-card-rows .row-label,
  .line-card-rows .row-value{ grid-column: 2;}
  .line-card-rows .row-label{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .line-card-rows .row-value{
    font-size: var(--text-sm);
    color: var(--fg);
    line-height: var(--leading-snug);
  }
  .line-card-rows .row-value b{
    font-weight: var(--weight-medium);
    color: var(--accent-text);
    font-family: var(--mono);
  }
  .line-card-footer{
    /* margin-top: auto прижимает футер к низу карточки (flex column) —
       у всех карточек футер на одной нижней линии независимо от длины
       контента. Разделительная линия сверху отделяет от списка. */
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .line-card-footer .footer-label{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* CTA-ссылка в футере карточки линии */
  .line-card-footer .footer-cta{
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--accent-text);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-base) var(--ease-out);
  }
  .line-card-footer .footer-cta:hover{ color: var(--fg);}

  /* ===== FEATURE TILE — фича / возможность с иконкой =====
     Принцип №7: icon-row / title / text выравниваются по общим baseline-линиям
     через subgrid. */
  .feature-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: auto auto 1fr;  /* icon|meta / title / text-stretch */
    gap: var(--space-4);
    margin: var(--space-6) 0;
  }
  .feature-grid--cols-2{ grid-template-columns: repeat(2, 1fr);}
  .feature-grid--cols-3{ grid-template-columns: repeat(3, 1fr);}
  .feature-grid--cols-4{ grid-template-columns: repeat(4, 1fr);}
  @media (max-width: 960px){
    .feature-grid--cols-4{ grid-template-columns: repeat(2, 1fr);}
  }
  @media (max-width: 720px){
    .feature-grid,
    .feature-grid--cols-2,
    .feature-grid--cols-3,
    .feature-grid--cols-4{
      grid-template-columns: 1fr;
      grid-template-rows: none;
      gap: var(--space-3);
    }
  }

  .feature-tile{
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface-2);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  /* Все плитки с переменным числом дочерних элементов (иконка, meta, status,
     title, text, list, c-stat) рендерим как обычный flex-stack, а не subgrid.
     Это убирает наложения и упрощает компоновку — пусть содержимое плитки
     течёт сверху вниз в порядке HTML. */
  .feature-tile{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    grid-row: auto;
    grid-template-rows: none;
  }
  @media (max-width: 720px){
    .feature-tile{
      display: flex; flex-direction: column;
      grid-row: auto;
      gap: var(--space-3);
    }
  }
  a.feature-tile:hover{
    background: var(--surface);
    border-color: var(--border);
    transform: translateY(-1px);
  }
  /* Иконка с подложкой 36×36. См. DESIGN-SYSTEM.md §02. По умолчанию —
     жёлтый акцент. Варианты для контекстных подложек: */
  .feature-tile-icon{
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-text);
    flex-shrink: 0;
  }
  /* Нейтральная подложка для bento.card (серая на цветном фоне карточки) */
  .feature-tile-icon--neutral{
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--accent);
  }
  /* Moss-вариант для role-tile--farmer (зелёный акцент) */
  .feature-tile-icon--moss{
    background: color-mix(in srgb, var(--moss) 22%, transparent);
    color: var(--fg);
  }
  .feature-tile-icon svg{
    width: 20px; height: 20px;
    stroke-width: 1.5;
  }
  .feature-tile-title{
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--fg);
  }
  .feature-tile-text{
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--fg-2);
    margin: 0;
  }
  /* L2 — Local category. См. DESIGN-SYSTEM.md §1, принцип 8.
     По умолчанию meta идёт как префикс перед h4 — без числового префикса
     и в --muted, чтобы не конкурировать с L1 (.sec-tag) на той же странице. */
  .feature-tile-meta{
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  /* country-grid — равные tile стран регистрации, на /kejsy §02.
     Принцип №3: один грид под один смысл-блок. Subgrid (принцип №7)
     выравнивает флаг / имя / контекст между 11 ячейками. */
  .country-grid{
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-rows: auto auto 1fr;
    gap: var(--space-3);
  }
  .country-tile{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .country-flag{ font-size: 28px; line-height: 1;}
  .country-name{
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--fg);
    letter-spacing: -0.005em;
  }
  .country-note{
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--muted);
    letter-spacing: 0.02em;
    line-height: var(--leading-normal);
  }
  @media (max-width: 720px){
    .country-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: none;}
    .country-tile{ display: flex; flex-direction: column; grid-row: auto;}
  }

  /* feature-tile-status — chip-метка стадии сделки/кейса в верху tile.
     L2 по принципу №8 (--accent-text для status, отличающего активные кейсы),
     pill-стиль как .c-stat li.
     ИНВАРИАНТЫ:
     1. Чип = ОДНА СТРОКА. Не переносится. Флаг ВСЕГДА слева от текста.
     2. Чип не растягивается по высоте grid-row (align-self: start), даже если
        соседний чип в ряду имеет 2-строчное содержимое.
     3. Флаг (.feature-tile-status-flag) — flex-shrink: 0, фиксированный размер.
     4. Если текст не помещается — выставлять короткий вариант на уровне контента,
        а не растягивать pill. Длинные строки — content-fix, не CSS-fix. */
  .feature-tile-status{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--accent-text);
    letter-spacing: 0.04em;
    line-height: 1;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    align-self: start;
    justify-self: start;
  }
  .feature-tile-status-flag{
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  /* Когда .feature-tile содержит status + title + text + meta, нужен 4-row span */
  .feature-grid--cases{
    grid-template-rows: auto auto 1fr auto;
  }
  .feature-grid--cases .feature-tile{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: var(--space-3);
  }
  .feature-grid--cases .feature-tile-status{ grid-row: 1;}
  .feature-grid--cases .feature-tile-title{ grid-row: 2;}
  .feature-grid--cases .feature-tile-text{ grid-row: 3;}
  .feature-grid--cases .feature-tile-meta{ grid-row: 4;}
  @media (max-width: 720px){
    .feature-grid--cases{ grid-template-rows: none;}
    .feature-grid--cases .feature-tile{ display: flex; flex-direction: column; grid-row: auto;}
    .feature-grid--cases .feature-tile-status,
    .feature-grid--cases .feature-tile-title,
    .feature-grid--cases .feature-tile-text,
    .feature-grid--cases .feature-tile-meta{ grid-row: auto;}
  }

  /* feature-grid--aligned — для гридов с одинаковым набором атомов в каждой плитке
     (meta + title + text). Subgrid выравнивает meta/title/text по рядам, даже
     если meta или title переносятся на 2 строки.
     Использовать на гридах вроде /partneram §05 — где meta-префикс может быть
     многострочным («Презентация Минсельхозу ОАЭ»), и нужно сохранять линию
     заголовков и текста между соседними плитками.
     ИНВАРИАНТ: каждая плитка должна содержать ровно meta + title + text. */
  .feature-grid--aligned{
    grid-template-rows: auto auto 1fr;
  }
  .feature-grid--aligned .feature-tile{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: var(--space-3);
  }
  .feature-grid--aligned .feature-tile-meta{ grid-row: 1; align-self: start;}
  .feature-grid--aligned .feature-tile-title{ grid-row: 2; align-self: start;}
  .feature-grid--aligned .feature-tile-text{ grid-row: 3; align-self: start;}
  @media (max-width: 720px){
    .feature-grid--aligned{ grid-template-rows: none;}
    .feature-grid--aligned .feature-tile{ display: flex; flex-direction: column; grid-row: auto;}
    .feature-grid--aligned .feature-tile-meta,
    .feature-grid--aligned .feature-tile-title,
    .feature-grid--aligned .feature-tile-text{ grid-row: auto;}
  }
  /* Для tile-кейсов (флаг в заголовке) — flex с baseline-выравниванием.
     ИНВАРИАНТЫ:
     1. Флаг (.feature-tile-title-flag) — flex-shrink: 0, не сжимается
        при переносе заголовка.
     2. align-items: baseline удерживает эмодзи на нижней линии текста.
     3. flex-wrap: wrap позволяет длинному заголовку перенестись под флаг,
        не растягивая высоту строки. */
  .feature-tile-title{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
  }
  .feature-tile-title-flag{
    flex-shrink: 0;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  /* Защита от длинных слов (URL, термины) — не должны рвать ширину плитки */
  .feature-tile-title,
  .feature-tile-text,
  .feature-tile-meta{
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* Override longread ul-bullets if feature-tile sits inside <article> */
  .longread article .feature-tile{ padding: var(--space-5);}

  /* Маркированный список внутри .feature-tile — тонкие тире как у compare-card-list */
  .feature-tile-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .feature-tile-list li,
  .longread article ul.feature-tile-list li{
    position: relative;
    padding: 0 0 0 18px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--fg-2);
    border-bottom: none;
  }
  .feature-tile-list li::before,
  .longread article ul.feature-tile-list li::before{
    content: "";
    position: absolute;
    left: 0; top: 10px;
    width: 10px; height: 1px;
    background: var(--accent-2);
    color: transparent;
    font-family: inherit;
  }

  /* ===== DOCUMENT-STYLED COMPONENTS — для блога/документов =====
     Каждый тип документа = своя визуальная форма (принцип №2:
     один компонент = одна семантическая роль). Не общая плитка
     с текстом, а компонент, который ВЫГЛЯДИТ как документ
     соответствующего типа. */

  /* CERT-CARD — карточка регистрационного свидетельства/сертификата.
     Имитирует сам документ: цветная шапка с типом, крупно номер
     моно-typography, штамп срока действия в углу, рамка-frame. */
  .cert-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
    align-items: stretch;
  }
  /* Header — светлый tint в зависимости от типа документа. Цвет
     приходит из существующих токенов через color-mix, поэтому
     палитра остаётся одобренной, но типы документов мгновенно
     различимы при scan'е страницы. */
  .cert-card-header{
    padding: var(--space-3) var(--space-5);
    background: var(--surface-2);
    color: var(--fg);
    font-family: var(--mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    /* Фиксированная высота шапки = высота под 2 строки текста. Гарантирует
       что у всех карточек строки (1- и 2-строчные лейблы) шапка одинаковой
       высоты → контент ниже стартует на общей baseline. См. §7.3 + аудит. */
    min-height: 61px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  /* cert-card-body — обёртка не использует grid сама, дети сидят на
     row 2 (top) и row 3 (stretch) родительского subgrid через
     дополнительные правила ниже. */
  .cert-card-top{
    padding: var(--space-6) var(--space-5) var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2);
    /* min-height под 2-строчный product — top-зона (номер + название)
       одинаковой высоты у всех карточек строки, независимо от длины
       названия. Иначе двустрочные («Нефтедеструктор Экобиосфера»)
       сдвигают весь контент ниже. */
    min-height: 132px;
    flex-shrink: 0;
  }
  /* Превью шапки документа — некликабельный фрейм с реальным сканом.
     Используется для усиления доверия: видно что у нас есть реальный
     документ, а не только текст-описание.

     Структура: внешняя обёртка .cert-card-preview = padding (отступы как
     в .cert-card-body, чтобы внутреннее содержимое было выровнено по
     общей вертикальной оси карточки). Внутри — собственно фрейм
     .cert-card-preview-frame с aspect 3:2, скруглением и обрезкой
     по нижнему краю через mask-image (fade прекращается ТОЧНО на нижней
     границе фрейма, не за её пределами). */
  .cert-card-preview{
    padding: 0 var(--space-5) var(--space-5);
    display: flex;
  }
  /* Плейсхолдер: тот же фрейм, но с диагональной штриховкой и моно-текстом.
     Также применяется mask-image — fade выглядит одинаково с реальным фото. */
  .cert-card-preview-frame--placeholder{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-family: var(--mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background:
      repeating-linear-gradient(
        135deg,
        var(--surface-2),
        var(--surface-2) 8px,
        transparent 8px,
        transparent 16px
      );
  }
  /* Header-варианты — мягкий tint от токенов палитры.
     Различение делается и фоном, и dot-маркером, и текстом метки. */
  .cert-card--minsel .cert-card-header{
    background: color-mix(in srgb, var(--emerald) 14%, var(--surface));
    border-bottom-color: color-mix(in srgb, var(--emerald) 30%, var(--border));
  }

  /* PROTOCOL-CARD — карточка протокола анализа. Имитирует
     лабораторный бланк: вертикальный сайд-бар с номером,
     основной блок с таблицей параметров. */
  .protocol-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-auto-rows: 1fr;  /* все карточки в row одной высоты */
    gap: var(--space-4);
    margin: var(--space-6) 0;
  }

  /* EXPERTISE-CARD — крупная карточка экспертизы. Имитирует
     заключение от института: круглая печать слева, монограмма
     института крупно, цитата справа с подписью. */
  .expertise-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin: var(--space-6) 0;
  }

  /* ===== PULL-QUOTE — крупная цитата как визуальная пауза ===== */
  .pull-quote{
    position: relative;
    margin: var(--space-8) 0;
    padding: var(--space-7) var(--space-6) var(--space-6);
    background: var(--bg-2);
    border-radius: var(--r-lg);
    border-left: 3px solid var(--accent);
  }
  .pull-quote::before{
    content: "«";
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    font-size: 96px;
    line-height: 1;
    font-family: 'Georgia', serif;
    font-weight: 400;
    color: var(--accent);
    opacity: 0.35;
    pointer-events: none;
  }
  .pull-quote blockquote{
    margin: 0;
    padding-left: var(--space-7);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    color: var(--fg);
    text-wrap: balance;
  }
  .pull-quote blockquote em{
    font-style: normal;
    color: var(--accent-text);
    font-weight: var(--weight-medium);
  }
  .pull-quote figcaption{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-left: var(--space-7);
    font-size: var(--text-sm);
    color: var(--muted);
  }
  .pull-quote figcaption cite{
    font-style: normal;
    font-weight: var(--weight-medium);
    color: var(--fg-2);
  }
  .pull-quote-source{
    font-family: var(--mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-text);
  }
  @media (max-width: 720px){
    .pull-quote{ padding: var(--space-6) var(--space-5) var(--space-5);}
    .pull-quote::before{ font-size: 72px; top: var(--space-3); left: var(--space-4);}
    .pull-quote blockquote{ padding-left: var(--space-5); font-size: var(--text-lg);}
    .pull-quote figcaption{ padding-left: var(--space-5);}
  }

  /* ===== FEATURE-ROW — асимметричная пара текст/визуал для слома ритма longread ===== */
  .feature-row{
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: var(--space-7);
    align-items: center;
    margin: var(--space-8) calc(-1 * var(--space-5));
    padding: var(--space-6) var(--space-5);
    background: var(--surface-2);
    border-radius: var(--r-lg);
  }
  .feature-row--reverse{
    grid-template-columns: 5fr 6fr;
  }
  .feature-row--reverse .feature-row-text{ order: 2;}
  .feature-row--reverse .feature-row-visual{ order: 1;}

  .feature-row-text > .eyebrow,
  .feature-row-text .feature-row-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--accent-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
  }
  .feature-row-eyebrow::before{
    content: "";
    width: 18px; height: 1px;
    background: var(--accent-2);
  }
  .feature-row-text h3{
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: -0.02em;
    color: var(--fg);
    margin: 0 0 var(--space-3);
  }
  .feature-row-text p{
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--fg-2);
    margin: 0 0 var(--space-3);
  }
  .feature-row-text p:last-child{ margin-bottom: 0;}
  .feature-row-text b{ color: var(--fg); font-weight: var(--weight-medium);}

  .feature-row-visual{
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-2);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .feature-row-visual img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Плейсхолдер пока нет фото — крупный mono-индикатор */
  .feature-row-visual .feature-row-stat{
    text-align: center;
    padding: var(--space-5);
  }
  .feature-row-visual .feature-row-stat-num{
    display: block;
    font-family: var(--mono);
    font-size: clamp(52px, 6.4vw, 88px);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--accent-text);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
  }
  .feature-row-visual .feature-row-stat-label{
    font-size: var(--text-sm);
    color: var(--muted);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  /* Inside longread <article> — feature-row выходит за пределы --pad и больше .toc-grid */
  .longread article .feature-row{
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-7) var(--space-6);
  }

  @media (max-width: 860px){
    .feature-row,
    .feature-row--reverse,
    .longread article .feature-row{
      grid-template-columns: 1fr;
      gap: var(--space-5);
      padding: var(--space-5);
    }
    .feature-row--reverse .feature-row-text,
    .feature-row--reverse .feature-row-visual{ order: 0;}
  }

  /* ===== FOOTER ===== */
  footer{
    border-top: 1px solid var(--border);
    padding: 60px 0 40px;
    margin-top: var(--py-sec);
  }
  .foot-top{
    display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px;
  }
  .foot-brand p{ margin-top: 16px; font-size: 14px; color: var(--fg-2); line-height: 1.5; max-width: 340px;}
  .foot-col h5{ font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; font-family: var(--mono); font-weight: 500;}
  .foot-col a{ display: block; padding: 5px 0; font-size: 14px; color: var(--fg-2);}
  .foot-col a:hover{ color: var(--accent-text);}
  .foot-bottom{
    border-top: 1px solid var(--border); padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.03em;
  }

  /* ===== LARGE SCREENS (моноблоки, 27") ===== */

  /* FullHD+: 1600px */
  @media (min-width: 1600px){
    :root{
      --maxw: 1480px;
      --pad-x: clamp(32px, 3vw, 56px);
      --py-sec: clamp(72px, 7vw, 155px);
    }
    body{ font-size: 16px;}
    .nav-inner{ padding: 11px 11px 11px 22px;}
    .nav-links{ font-size: 14px;}
    .nav-links a{ padding: 9px 16px;}
    .nav-dd-btn{ padding: 9px 16px; font-size: 14px;}
    .nav-dd-menu a{ font-size: 14px; padding: 11px 16px;}
    .btn{ padding: 11px 20px; font-size: 13px;}
    .hero{ padding-block: 100px 80px;}
    .hero-grid{ gap: 80px;}
    .hero-visual{ padding: 28px;}
    .kpi-val{ font-size: 40px;}
    .bento{ gap: 18px; grid-auto-rows: minmax(260px, auto);}
    .band-item{ padding: 52px 36px;}
    .cta-card{ gap: 80px;}
    .foot-top{ gap: 56px;}
  }

  /* QHD: 2000px — основной сценарий 27" моноблоков */
  @media (min-width: 2000px){
    :root{
      --maxw: 1720px;
      --pad-x: clamp(48px, 3vw, 72px);
      --py-sec: clamp(88px, 7vw, 175px);
    }
    body{ font-size: 17px; }
    .nav{ top: 24px; margin-top: 24px;}
    .nav-inner{ padding: 12px 12px 12px 24px;}
    .nav-links{ font-size: 14px;}
    .nav-links a{ padding: 10px 18px;}
    .btn{ padding: 12px 22px; font-size: 14px;}

    .hero{ padding-block: 120px 100px;}
    .hero-grid{ gap: 100px;}
    .hero-visual{ padding: 32px; border-radius: var(--r-xl);}
    .hv-big{ padding: 28px; gap: 28px;}
    .kpi-card{ padding: 22px;}
    .kpi-val{ font-size: 48px;}
    .chart-wrap{ height: 160px;}
    .floating-badge{ padding: 16px 18px; font-size: 13px;}
    .floating-badge .ic{ width: 40px; height: 40px;}
    .floating-badge b{ font-size: 15px;}

    .strip{ padding: 36px 0; margin-top: 80px;}
    .strip-flags{ gap: 36px;}

    .sec-head{ gap: 80px; margin-bottom: 72px;}
    .bento{ gap: 22px; grid-auto-rows: minmax(300px, auto);}
    .card{ padding: 32px;}
    .card h3{ font-size: 26px;}
    .card p{ font-size: 14px;}
    .b-plants h3{ font-size: 40px;}
    .bento .card > svg.bento-svg,
    .bento .card > svg.plant-svg,
    .bento .card > svg.eco-svg{ width: 330px; height: 330px;}

    .band-item{ padding: 64px 40px;}
    .band-label{ font-size: 15px; max-width: 280px;}

    .bio-quote{ padding: 32px; font-size: 20px;}
    .bio-row{ padding: 22px 0; grid-template-columns: 140px 1fr auto;}
    .bio-row .t{ font-size: 16px;}

    .map-card{ padding: 44px;}
    .map-header h3{ font-size: 32px; max-width: 480px;}
    .map-list{ gap: 0 40px; margin-top: 40px;}

    .vids-grid{ gap: 24px;}
    .vid .meta h4{ font-size: 18px;}

    .part-grid{ gap: 18px;}
    .part{ padding: 36px;}
    .part h3{ font-size: 26px;}
    .part ul{ font-size: 14px;}

    .cta-card{ padding: clamp(48px, 4vw, 72px); gap: 100px;}
    .cta-form{ padding: 32px;}

    footer{ padding: 80px 0 48px;}
    .foot-top{ gap: 64px; margin-bottom: 56px;}
    .foot-brand p{ font-size: 15px; max-width: 420px;}
    .foot-col a{ font-size: 15px;}

    /* subpages — breadcrumbs padding-top теперь через --nav-h (база), не хардкод */
    .sub-hero{ padding: 72px 0 88px;}
    .sub-hero .wrap{ gap: 80px;}
    .longread{ grid-template-columns: 300px 1fr; gap: 120px;}
    .longread h2{ font-size: clamp(36px, 3vw, 52px);}
    .longread p{ font-size: 18px;}
    .longread p.lede{ font-size: 20px;}
    .longread article ul li{ font-size: 17px; padding: 12px 0 12px 30px;}
    .fact-grid{ gap: 18px; margin: 36px 0;}
    .fact-card{ padding: 28px;}
    .fact-card .big{ font-size: 52px;}
    .callout{ padding: 36px;}
    .callout p{ font-size: 20px;}
    .faq summary{ font-size: 19px;}
    .contacts-grid{ gap: 56px;}
    .contact-card{ padding: 36px;}
    .contact-row .t .val{ font-size: 18px;}
  }

  /* 27" QHD / 4K: 2400px */
  @media (min-width: 2400px){
    :root{
      --maxw: 1920px;
      --pad-x: clamp(72px, 4vw, 120px);
      --py-sec: clamp(100px, 7vw, 200px);
    }
    body{ font-size: 18px;}
    .bento{ grid-auto-rows: minmax(340px, auto);}
    .band-item{ padding: 76px 48px;}
  }

  /* ===== BURGER / MOBILE MENU ===== */
  .nav-burger{
    display: none;
    width: 40px; height: 40px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    padding: 0; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
  }
  .nav-burger span{
    display: block; width: 16px; height: 1.5px; background: var(--fg);
    border-radius: 2px; transition: .2s;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(5.5px) rotate(45deg);}
  .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0;}
  .nav-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg);}

  .mobile-menu{
    display: none;
    margin: 10px var(--pad-x) 0;
    max-width: var(--maxw); margin-left: auto; margin-right: auto;
    padding: 10px;
    background: color-mix(in srgb, var(--bg-2) 95%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 22px;
    flex-direction: column; gap: 2px;
  }
  .mobile-menu.on{ display: flex;}
  .mobile-menu .mm-group-title{
    padding: 14px 18px 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mobile-menu .mm-sep{
    height: 1px;
    background: var(--border);
    margin: 8px 8px;
  }
  .mobile-menu a{
    padding: 14px 18px; border-radius: 14px;
    font-size: 15px; color: var(--fg-2);
    transition: .15s;
  }
  .mobile-menu a:hover, .mobile-menu a[aria-current="page"]{
    background: var(--surface); color: var(--fg);
  }
  .mobile-menu .mm-cta{
    margin-top: 6px;
    background: var(--accent); color: var(--on-accent);
    text-align: center; font-weight: 500;
  }
  .mobile-menu .mm-cta:hover{ background: var(--accent-2); color: var(--on-accent);}

  /* ===== RESPONSIVE ===== */

  /* Tablet landscape: 1100px */
  @media (max-width: 1100px){
    .hero-grid{ gap: 40px;}
    .bento{ grid-auto-rows: minmax(200px, auto);}
    .b-plants h3{ font-size: 28px;}
    .bento .card > svg.bento-svg,
    .bento .card > svg.plant-svg,
    .bento .card > svg.eco-svg{ width: 210px; height: 210px;}
    .band-num{ font-size: clamp(40px, 5vw, 60px);}
    .cta-card{ gap: 40px;}
    /* Планшеты/маленькие ноутбуки: TOC-рейл слева забирает много места и
       сжимает контент карточек. Скрываем полностью, контент full-width. */
    .longread{ grid-template-columns: 1fr; gap: 24px;}
    .toc{ display: none;}
  }

  /* Tablet: 960px */
  @media (max-width: 960px){
    .nav{ top: 12px; margin-top: 12px;}
    .nav-inner{ padding: 8px 8px 8px 16px; gap: 12px;}
    .nav-links{ display: none;}
    .nav-dd{ display: none;}
    .nav-cta .btn-ghost{ display: none;}
    .nav-burger{ display: inline-flex;}
    .logo .v{ display: none;}

    .hero{ padding-block: 48px 40px;}
    .hero-grid{ grid-template-columns: 1fr; gap: 40px;}
    /* На средних viewport (≤980) hero-grid становится 1-колоночным.
       Ограничиваем .hero-visual чтобы он не растягивался на всю ширину
       и не превращался в плоский альбомный прямоугольник. Центрируем. */
    /* max-width 480px и центрирование наследуются от базового правила */
    .hero-visual{ padding: 18px;}
    /* .floating-badge — теперь обычный flex-item, абсолютные координаты не нужны */

    /* На мобиле в author hero порядок:
       eyebrow → h1 → ФОТО → lede → bio-timeline → CTA.
       Фото между h1 и описанием — единый паттерн всех hero/sub-hero.
       Делаем левую колонку display:contents и выставляем order её детям. */
    #author .hero-grid > div:first-child{ display: contents; }
    #author .eyebrow{ order: 1; width: fit-content; max-width: 100%;}
    #author .h1{ order: 2; }
    #author .author-card{ order: 3; margin: 16px 0; }
    #author .lede{ order: 4; }
    #author .bio-timeline{ order: 5; }
    #author .cta-row{ order: 6; }

    .sec-head{ grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px;}
    .bento{ grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto; gap: 12px;}
    /* override inline grid-template-columns на таблете */
    [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(4,1fr)"]{
      grid-template-columns: repeat(2, 1fr) !important;
    }
    /* На планшете и ниже все 5 bento-плиток одной ширины (по 2 колонки = 1 row).
       .b-eco раньше выпадала — оставались десктопные span/grid-column. */
    .b-plants, .b-animals, .b-birds, .b-soil, .b-eco{
      grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 220px;
    }
    .b-plants, .b-soil{ min-height: 320px;}
    .bento .card > svg.bento-svg,
    .bento .card > svg.plant-svg,
    .bento .card > svg.eco-svg{ width: 195px; height: 195px; right: 10px; bottom: 10px;}

    .band{ grid-template-columns: repeat(2, 1fr);}
    .band-item{ padding: 28px 20px;}
    .band-item:nth-child(odd){ border-right: 1px solid var(--border);}
    .band-item:nth-child(even){ border-right: none;}
    .band-item:nth-child(-n+2){ border-bottom: 1px solid var(--border);}

    .author-card{ max-width: 480px;}

    .map-card{ padding: 24px;}
    .map-header{ gap: 20px; margin-bottom: 24px;}
    .map-header h3{ font-size: 22px;}
    .map-list{ grid-template-columns: repeat(2, 1fr); gap: 0 20px;}

    /* VIDEOS как горизонтальная карусель — см. отдельный @media block ниже */

    .part-grid{ grid-template-columns: 1fr; grid-auto-rows: auto;}
    .pt1, .pt2, .pt3, .pt4, .pt5{ grid-column: 1 / -1;}

    .cta-card{ grid-template-columns: 1fr; gap: 32px; padding: 32px;}

    .foot-top{ grid-template-columns: 1fr 1fr; gap: 32px;}

    /* subpages */
    .sub-hero{ padding: 32px 0 40px;}
    .sub-hero .wrap{ grid-template-columns: 1fr; gap: 32px;}
    .sub-hero-visual{ aspect-ratio: 16/10; max-width: 520px;}
    /* На мобильном TOC-колонка убирается (1fr), и горизонтальный
       гуттер нужно вернуть — иначе текст лонгрида липнет к краям. */
    .longread{ grid-template-columns: 1fr; gap: 24px; padding: 60px var(--pad-x);}
    .toc{ position: static; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;}
    .toc ol{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;}
    .fact-grid{ grid-template-columns: repeat(3, 1fr);}
    .contacts-grid{ grid-template-columns: 1fr; gap: 20px; padding: 60px 0;}
    .bio-row{ grid-template-columns: 80px 1fr;}
    .bio-row .m{ grid-column: 1 / -1; padding-top: 4px;}
  }

  /* Mobile: 640px */
  @media (max-width: 640px){
    :root{ --pad-x: 16px; --py-sec: clamp(56px, 9vw, 88px);}
    body{ font-size: 14px;}

    .nav{ top: 10px; margin-top: 10px;}

    h1.h1, h2.h1{ font-size: clamp(34px, 9vw, 48px); letter-spacing: -0.03em;}
    .lede{ font-size: 15px; margin-top: 20px;}
    .eyebrow{ margin-bottom: 20px; font-size: 11px;}
    .cta-row{ margin-top: 24px;}
    .cta-row .btn{ width: 100%; justify-content: center;}
    .trust-row{ margin-top: 28px; font-size: 11px;}

    .hero{ padding-block: 28px 24px;}
    .hero-visual{ padding: 14px; border-radius: var(--r-md);}
    .big-kpi{ grid-template-columns: 1fr 1fr; gap: 8px;}
    .kpi-val{ font-size: 26px;}
    .kpi-card{ padding: 12px;}
    .hv-foot{ flex-wrap: wrap; gap: 8px 14px; font-size: 9px;}
    .floating-badge{
      left: 50%; transform: translateX(-50%); bottom: -18px;
      width: calc(100% - 32px); max-width: 320px;
    }

    .strip{ padding: 20px 0; margin-top: 48px;}
    .strip-inner{ gap: 14px;}
    .strip-flags{ gap: 14px 18px; flex-wrap: wrap;}
    .flag{ font-size: 12px;}

    h2.h2{ font-size: clamp(26px, 7.5vw, 36px);}
    .sec-intro{ font-size: 14px;}

    .bento{ grid-template-columns: 1fr !important; gap: 10px;}
    /* override inline grid-template-columns на мобиле */
    [style*="grid-template-columns:repeat"]{ grid-template-columns: 1fr !important; }
    .bento .card{ grid-column: 1 / -1 !important; }
    .b-plants, .b-animals, .b-birds, .b-soil{
      grid-column: 1 / -1; min-height: 200px;
    }
    .b-plants, .b-soil{ min-height: 280px;}
    .card{ padding: 20px;}
    .card h3{ font-size: 20px;}
    .b-plants h3{ font-size: 24px;}
    .bento .card > svg.bento-svg,
    .bento .card > svg.plant-svg,
    .bento .card > svg.eco-svg{ width: 130px; height: 130px; opacity: .45; right: 8px; bottom: 8px;}

    .band{ grid-template-columns: 1fr;}
    .band-item{ padding: 22px 16px; border-right: none !important; border-bottom: 1px solid var(--border);}
    .band-item:last-child{ border-bottom: none;}
    .band-num{ font-size: clamp(36px, 11vw, 52px);}
    .band-label{ font-size: 12px;}

    .author-card{ aspect-ratio: 4/5;}
    .author-card .overlay h4{ font-size: 18px;}
    .bio-quote{ padding: 18px; font-size: 15px;}
    .bio-row{ grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 0;}
    .bio-row .t{ font-size: 13px;}

    .map-card{ padding: 16px; border-radius: var(--r-lg);}
    .map-header{ flex-direction: column; align-items: flex-start; gap: 14px;}
    .map-header h3{ font-size: 20px;}
    /* На мобильном табы — на всю ширину, кнопки делят её поровну (fill),
       а не жмутся слева по контенту (hug). См. §7.3 hug→fill. */
    .map-tabs{ width: 100%; overflow-x: visible;}
    .map-tabs button{ flex: 1; text-align: center; padding: 8px 6px;}
    .map-list{ grid-template-columns: 1fr;}

    /* .vids-grid override на ≤420 не нужен — выше уже карусель в @media≤720 */
    .vid{ aspect-ratio: 16/11;}
    .vid .meta h4{ font-size: 15px;}

    .part{ padding: 22px;}
    .part h3{ font-size: 20px;}

    .cta-card{ padding: 24px; gap: 24px; border-radius: var(--r-lg);}
    .cta-left h2{ font-size: clamp(26px, 7vw, 36px);}
    .cta-form{ padding: 18px;}
    /* bare-форма (встроена в .contact-card) не должна добавлять свой
       паддинг — иначе на мобильном каскад wrap+card+form съедает ширину
       полей. Паддинг даёт только родительская карточка. */
    .cta-form--bare{ padding: 0;}
    /* Сложенный в колонку .field-row: вертикальный gap должен РАВНЯТЬСЯ
       визуальному зазору между самостоятельными полями (24px = --space-5),
       а не быть 10–12px. Иначе «Имя/Страна» внутри ряда стоят теснее, чем
       отдельные поля между собой, — рваный ритм формы на мобильном.
       Замерено: зазор «низ input → верх след. label» между полями = 24px,
       внутри ряда при gap:12px = 12px → выравниваем gap к 24px (--space-5).
       Класс: 17 .field-row по формам. */
    .field-row{ grid-template-columns: 1fr; gap: var(--space-5);}
    /* Калькуляторы (#roi-calc/#roif-calc) не в <form>, межрядовый ритм задаёт
       глобальное правило 1617 (--space-3 = 12px, верно для 2-колоночного
       десктопа). На мобильном ряды складываются в колонку, и поля ВНУТРИ ряда
       уже на 24px (gap выше) — значит и МЕЖДУ рядами надо 24px, иначе ритм
       перевёрнут (внутри ряда 24, между рядами 12). Выравниваем к --space-5. */
    #p_scenarios #roi-calc .field-row + .field-row,
    #p_scenarios #roif-calc .field-row + .field-row{ margin-top: var(--space-5);}

    footer{ padding: 40px 0 28px;}
    .foot-top{ grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px;}
    .foot-bottom{ flex-direction: column; align-items: flex-start; gap: 8px; font-size: 10px;}

    /* subpages — breadcrumbs padding-top через --nav-h (база), не хардкод */
    /* nav. — специфичность выше базового правила, которое объявлено НИЖЕ по файлу */
    nav.breadcrumbs ol{ font-size: 10px;}
    .sub-hero{ padding: 24px 0 32px;}
    .sub-hero h1{ font-size: clamp(32px, 8.6vw, 44px);}
    .sub-hero-visual{ aspect-ratio: 4/3;}
    .sub-hero-visual .kpi-float{ padding: 10px 12px;}
    .sub-hero-visual .kpi-float .val{ font-size: 22px;}
    /* Mobile порядок sub-hero: eyebrow → h1 → ФОТО → описание → кнопки.
       Текстовый блок (первый div без класса внутри .wrap) раскрывается
       через display:contents, чтобы его дети попали в общий flex-поток .wrap
       и .sub-hero-visual могла встать между h1 и lede.
       ИНВАРИАНТ: структура .sub-hero фиксирована — первый div содержит
       eyebrow + h1 + lede + cta-row в этом порядке. */
    .sub-hero .wrap{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
    .sub-hero .wrap > div:first-child{ display: contents;}
    .sub-hero .wrap .eyebrow{ order: 1; margin-bottom: 0; width: fit-content; max-width: 100%;}
    .sub-hero .wrap h1{ order: 2; margin: 0;}
    .sub-hero .wrap .sub-hero-visual{ order: 3; margin: 4px 0;}
    .sub-hero .wrap p.lede{ order: 4; margin: 0;}
    .sub-hero .wrap .cta-row{ order: 5;}

    /* Mobile порядок .hero (главная, /komanda):
       eyebrow → h1 → ФОТО → описание (lede, bio-quote, bio-timeline, trust-rows) → кнопки.
       Те же принципы что и sub-hero, но детей текст-блока больше.
       Тексто-блок раскрывается через display:contents, визуал (.hero-visual или
       .author-card) встаёт через order: 3 сразу после h1.
       ИНВАРИАНТ: первый прямой ребёнок .hero-grid — текстовый <div>, второй —
       визуал (.hero-visual / .author-card). Внутри текст-блока: eyebrow + h1
       первыми, остальные дети идут по HTML после визуала. */
    .hero-grid{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
    .hero-grid > div:first-child{ display: contents;}
    .hero-grid > div:first-child > *{ order: 4;}  /* по умолчанию весь контент текст-блока после визуала */
    .hero-grid > div:first-child > .eyebrow{ order: 1; margin-bottom: 0; width: fit-content; max-width: 100%;}
    .hero-grid > div:first-child > h1,
    .hero-grid > div:first-child > h2.h1{ order: 2; margin: 0;}
    .hero-grid > .hero-visual,
    .hero-grid > .author-card{ order: 3; margin: 4px 0;}
    .hero-grid > div:first-child > .cta-row{ order: 99;}  /* кнопки — самые последние */
    .longread{ padding: 40px var(--pad-x);}
    .longread h2{ font-size: clamp(24px, 6.8vw, 32px);}
    .longread p{ font-size: 15px;}
    .longread p.lede{ font-size: 16px;}
    .toc ol{ grid-template-columns: 1fr;}
    .fact-grid{ grid-template-columns: 1fr; gap: 10px;}
    .fact-card{ padding: 18px;}
    .fact-card .big{ font-size: 34px;}
    .callout{ padding: 20px;}
    .callout p{ font-size: 15px;}
    .faq summary{ font-size: 15px; gap: 14px;}
    .contacts-grid{ padding: 40px 0;}
    .contact-card{ padding: 22px;}
    .contact-row .t .val{ font-size: 15px;}
  }

  /* Small mobile: 420px */
  @media (max-width: 420px){
    .nav-inner{ padding: 6px 6px 6px 12px;}
    .nav-cta .btn-primary{ padding: 8px 14px; font-size: 12px;}

    h1.h1{ font-size: clamp(28px, 9.5vw, 40px);}
    /* .hero-visual min-height убран — высота по контенту dashboard */
    .kpi-val{ font-size: 22px;}

    .sub-hero h1{ font-size: clamp(28px, 9vw, 38px);}
  }


/* SPA ROUTING */
.page{display:none;}
.page.active{display:block;}
/* Навбар STICKY — он занимает место в потоке, контент идёт после него БЕЗ
   компенсации (компенсация padding'ом нужна только для fixed). Поэтому отступ
   крошек — обычный визуальный зазор, не «высота навбара». Раньше было 4
   хардкода (110/140/100/90) — задвоение: навбар сдвигал крошки + ещё padding,
   на мобильном ~110px пустоты. Теперь один зазор --space-5 (24px). */
.breadcrumbs{padding:var(--space-5) var(--pad-x) 0;max-width:var(--maxw);margin:0 auto;}
.breadcrumbs ol{list-style:none;display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap;}
.breadcrumbs a{color:var(--fg-2);cursor:pointer;} .breadcrumbs a:hover{color:var(--accent-text);}
.breadcrumbs [aria-current="page"]{color:var(--fg);} .breadcrumbs .sep{color:var(--border-hi);}
.sub-hero{padding:48px 0 60px;}
.sub-hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;}
.sub-hero .eyebrow{margin-bottom:22px;}
.sub-hero h1{font-size:clamp(40px,5.6vw,76px);font-weight:500;letter-spacing:-.035em;line-height:1;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;}
.sub-hero h1 .grad{background:linear-gradient(120deg,var(--fg) 0%,var(--accent) 60%,var(--fg) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sub-hero p.lede{margin-top:24px;font-size:17px;line-height:1.55;color:var(--fg-2);max-width:540px;}
.sub-hero-visual{aspect-ratio:4/5;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;position:relative;}
.sub-hero-visual .img{position:absolute;inset:0;}
.sub-hero-visual .tag{position:absolute;left:20px;top:20px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--fg) 15%,transparent);border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--fg);display:inline-flex;gap:8px;align-items:center;}
.sub-hero-visual .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.sub-hero-visual .kpi-float{position:absolute;right:20px;bottom:20px;background:var(--bg);border:1px solid var(--border-hi);border-radius:12px;padding:14px 16px;box-shadow:0 20px 40px rgba(0,0,0,.3);}
.sub-hero-visual .kpi-float .lbl{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;}
.sub-hero-visual .kpi-float .val{font-size:28px;font-weight:500;color:var(--accent-text);line-height:1;margin-top:4px;}
/* Базовый longread — однокол, full-width на планшетах/мобильных.
   Rail-режим (240px 1fr) включается отдельным правилом @media min-width:1101px. */
.longread{display:grid;grid-template-columns:1fr;gap:24px;padding:var(--py-sec) var(--pad-x);}
/* grid-ребёнок имеет min-width:auto и распирается широким контентом (flex-карусель
   с min-content по сумме слайдов). min-width:0 заставляет колонку уважать 1fr-трек,
   а не контент — защита longread от горизонтального распирания. */
.longread > article{min-width:0;}
.toc{position:sticky;top:110px;align-self:start;z-index:50;}
.toc h5{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0;}
.toc a{display:block;padding:8px 12px;border-radius:8px;font-size:13px;color:var(--fg-2);}
.toc a:hover{color:var(--fg);background:var(--surface);}
.toc-num{font-family:var(--mono);font-size:10px;color:var(--muted);margin-right:8px;}

/* role-tile baseline — синхронизирует высоту заголовков карточек ≥ 961px */
@media (min-width: 961px){
  /* role-tile заголовки разной длины (2 vs 3 строки) держат одну baseline-линию
     только когда карточки в ряд (≥961px). min-height под 3 строки (line-height
     1.2 → 3.6em). На мобильном (столбик) правило отсутствует — резерва нет.
     Заведено в min-width-блок осознанно: избегаем ловушки каскада (DECISIONS D-05). */
  .role-tile .role-tile-title{ min-height: 3.6em;}
}

/* Rail-variant TOC: только ≥ 1101px (на планшетах/мобильных TOC скрыт совсем,
   контент full-width — иначе на ipad 1024 TOC сжимает контент). */
@media (min-width: 1101px){
  .longread{grid-template-columns:72px 1fr;gap:var(--space-8);}
  .toc h5{display:none;}
  .toc ol{
    gap:var(--space-1);
    padding:var(--space-2) 0;
    border-left:1px solid var(--border);
  }
  .toc li{ position: relative; margin: 0;}
  .toc a{
    display:flex;
    align-items:center;
    gap:0;
    padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    border-radius:0;
    font-size:0;
    line-height:1;
    color:var(--muted);
    background:transparent;
    position:relative;
    transition: color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }
  .toc a:hover{ background: transparent;}
  .toc a::before{
    content:"";
    position:absolute;
    left:-1px;
    top:50%;
    width:3px;
    height:14px;
    background:transparent;
    border-radius:0 2px 2px 0;
    transform:translateY(-50%);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .toc-num{
    display:inline-block;
    font-family:var(--mono);
    font-size:var(--text-xs);
    color:var(--muted);
    letter-spacing:0.04em;
    width:24px;
    margin:0;
    text-align:right;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .toc a::after{
    content: attr(data-title);
    position:absolute;
    left:calc(100% + var(--space-3));
    top:50%;
    transform:translateY(-50%) translateX(-4px);
    font-family:var(--font);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
    color:var(--bg);
    background:var(--fg);
    padding:var(--space-2) var(--space-4);
    border-radius:var(--r-sm);
    box-shadow:0 8px 24px rgba(10,12,11,.18);
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    z-index:80;
  }
  .toc a:hover::after,
  .toc a:focus-visible::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
  .toc a:hover .toc-num,
  .toc a:focus-visible .toc-num{ color:var(--fg);}
  .toc a:hover::before,
  .toc a:focus-visible::before{ background:var(--border-hi);}
  .toc a.is-active{ color:var(--fg);}
  .toc a.is-active::before{ background:var(--accent);}
  .toc a.is-active .toc-num{ color:var(--accent-text);}
}
.longread article>section{padding:40px 0 60px;border-bottom:1px solid var(--border);scroll-margin-top:110px;}
.longread article>section:last-child{border-bottom:none;}
.longread h2{font-size:clamp(28px,3.6vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.05;margin-bottom:20px;}
.longread h3{font-size:22px;font-weight:500;margin:32px 0 12px;}
.longread p{font-size:16px;line-height:1.65;color:var(--fg-2);margin-bottom:14px;}
.longread p.lede{font-size:18px;color:var(--fg);margin-bottom:28px;}
.longread article ul{list-style:none;margin:18px 0;}
.longread article ul li{position:relative;padding:9px 0 9px 26px;font-size:15px;color:var(--fg-2);border-bottom:1px dashed var(--border);line-height:1.5;}
.longread article ul li::before{content:"";position:absolute;left:6px;top:17px;width:5px;height:5px;border-radius:50%;background:var(--accent-2);color:transparent;font-family:inherit;}
/* Override для .line-card-rows внутри longread: longread-стили для ul
   (margin, list-style), для li (padding/border/font-size) и для ::before
   (точка) перебиваются. Этот блок ИДЁТ ПОСЛЕДНИМ в файле и побеждает
   в каскаде. */
.longread article ul.line-card-rows{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;}
.longread article ul.line-card-rows li{
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  font-size: var(--text-sm);
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: var(--space-2);
  row-gap: 2px;
  position: relative;
}
.longread article ul.line-card-rows li::before{
  content: "";
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  transform: translateY(-50%);
  justify-self: start;
  position: static;
  left: auto;
  top: auto;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2392400E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;
  opacity: 0.6;
  color: transparent;
  font-family: inherit;
}
.longread article ul li:last-child{border:none;}
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0;}
.fact-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;}
.fact-card .big{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,var(--fg) 0%,var(--accent) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.fact-card .lbl{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.fact-card p{font-size:13px;margin-top:10px;}
.callout{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)) 0%,var(--surface) 100%);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;margin:28px 0;position:relative;}
.callout::before{content:"";position:absolute;left:-1px;top:24px;width:3px;height:calc(100% - 48px);background:var(--accent);}
.callout .lbl{font-family:var(--mono);font-size:10px;color:var(--accent-text);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.callout p{font-size:17px;color:var(--fg);margin:0;}
.faq details{border-top:1px solid var(--border);padding:18px 0;}
.faq details:last-child{border-bottom:1px solid var(--border);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:17px;font-weight:500;color:var(--fg);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--accent-text);}
.faq details[open] summary::after{content:"−";}
.faq summary p{margin:0;}
.faq details p{margin-top:12px;color:var(--fg-2);font-size:15px;line-height:1.6;}

/* FAQ-groups — структурированные секции вместо одной стены вопросов */
.faq-groups{
  display: grid;
  gap: var(--space-7);
}
.faq-group{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.faq-group-head{
  position: sticky;
  top: 120px;
}
/* L2 — Local category. См. DESIGN-SYSTEM.md §1, принцип 8.
   Без числового префикса и в --muted, чтобы не сливаться с L1 (.sec-tag). */
.faq-group-tag{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
/* h3 внутри faq-group-head нужно отбить от глобального .longread h3 / section h3 правил —
   тег + title должны выравниваться по верхней линии вопроса в body */
.longread .faq-group-head h3.faq-group-title,
section.s .faq-group-head h3.faq-group-title,
.faq-group-title{
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}
/* Границы между details и сверху рисует общий .faq details {border-top}.
   На .faq-group-body НЕ дублируем — иначе двойная полоса + двойной отступ
   сдвигают первый вопрос ниже моно-тега слева (рассинхрон baseline). */
.faq-group-body{ border-top: none;}
.faq-group-body details{padding: var(--space-5) 0;}
/* Первый details группы выравниваем по верхней линии с .faq-group-tag слева */
.faq-group-body details:first-of-type{
  border-top: none;
  padding-top: 0;
  margin-top: -2px;  /* компенсация оптического веса моно-тега слева */
}
.faq-group-body details:last-child{border-bottom: none;}
@media (max-width: 860px){
  .faq-group{ grid-template-columns: 1fr; gap: var(--space-3);}
  .faq-group-head{ position: static;}
  .faq-group-title{ font-size: var(--text-lg);}
}

.longread h3{font-size:20px;font-weight:500;margin:28px 0 10px;color:var(--fg);letter-spacing:-.01em;}
.longread h3+p{margin-top:0;}
/* .sub-cards / .sub-card удалены — мигрировано на .feature-grid / .feature-tile (см. DESIGN-SYSTEM.md §4.1) */
.cmp-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;}
.cmp-table th,.cmp-table td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--border);}
.cmp-table th{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border-hi);}
.cmp-table td:first-child{color:var(--fg);}
.cmp-table td:not(:first-child){color:var(--fg-2);font-family:var(--mono);}
.cmp-table tr:last-child td{border-bottom:none;}
.cmp-table .num{color:var(--accent-text);font-weight:500;}
/* Рестайл для настоящих матриц (данные × срок/доза): зебра + выделенный
   первый столбец + крупнее цифры. Применять модификатором .cmp-table--matrix.
   Псевдотаблицы «метрика → значение» сюда НЕ относятся — они → .metric-grid. */
.cmp-table--matrix{border:1px solid var(--border);border-radius:14px;overflow:hidden;font-size:14px;}
/* Скролл-контейнер для таблиц на узких экранах. Class может оборачивать
   как .cmp-table, так и любую <table> в .longread article. Inline-применяется
   правилом ниже (для .longread article > table) — без необходимости править
   HTML-обёртку у каждой таблицы. ИНВАРИАНТ: таблица не должна выходить
   за viewport и создавать горизонтальный скролл всей страницы; вместо этого
   скроллится сама таблица внутри обёртки. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:24px 0;}
@media(max-width:720px){
  /* Тонкая полоса прокрутки видна, чтобы пользователь понял что таблицу можно
     прокрутить вбок. На десктопе — скрыта по умолчанию (max-content помещается). */
  .table-scroll{scrollbar-width:thin;}
  /* Глобально: любая <table> в лонгриде или с классом cmp-table — оборачивается
     визуально через display:block + overflow на обёртке. Если HTML-обёртки нет,
     fallback — table сама становится block + overflow-x. */
  .longread article > table,
  table.cmp-table:not(.table-scroll table){
    display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;
  }
  /* На display:block таблице tr/td теряют автоматическое выравнивание ширин —
     явно зададим min-width таблицам, чтобы они оставались читаемыми. */
  .longread article > table,
  table.cmp-table:not(.table-scroll table){
    /* width:auto заменяем — пусть содержимое расталкивает ширину естественно */
    width:auto;
    min-width:100%;
  }
}
.cmp-table--matrix th,.cmp-table--matrix td{padding:13px 16px;border-bottom:1px solid var(--border);}
.cmp-table--matrix thead th{background:var(--surface-2);border-bottom:1px solid var(--border-hi);}
.cmp-table--matrix tbody tr:nth-child(even){background:var(--surface-2);}
.cmp-table--matrix td:first-child{color:var(--fg);font-weight:500;font-family:var(--font-display,inherit);}
.cmp-table--matrix .num{font-size:16px;}

/* metric-grid — замена псевдотаблиц «показатель → эффект». Крупная цифра +
   подпись, сетка auto-fit. На базе .fact-card. См. DESIGN-SYSTEM §03. */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0;}
@media(max-width:900px){.metric-grid{grid-template-columns:repeat(3,1fr);}}
.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;}
.metric-card .metric-num{font-size:clamp(30px,3.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,var(--fg) 0%,var(--accent) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.metric-card .metric-lbl{font-size:13px;color:var(--fg-2);margin-top:10px;line-height:1.4;}
.metric-card .metric-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.04em;}
/* Парный вариант «было/стало» — 2 колонки, акцент на выгодной карточке. */
.metric-grid--pair{grid-template-columns:repeat(2,1fr);}
.metric-grid--trio{grid-template-columns:repeat(3,1fr);}
.metric-card--accent{background:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--accent) 8%,var(--surface)) 100%);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));}
.metric-card--muted .metric-num{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--fg-2);}
@media(max-width:520px){.metric-grid{grid-template-columns:repeat(2,1fr);gap:10px;}.metric-card{padding:16px;}}
/* Узкие экраны ≤359px: 2 колонки метрик не влезают — число (.metric-num,
   white-space:nowrap) держит мин. ширину колонки, 2 шт + gap > viewport
   (замер: 340px → overflowX 21px, 360px → 0). Раньше маскировалось переносом
   числа (костыль); после nowrap нужен честный брейк в 1 колонку. */
@media(max-width:359px){.metric-grid{grid-template-columns:1fr;}
  /* На очень узких (≤359) кнопка «Записаться» теснит логотип (зазор падает до
     ~12px против 49px на 360). Скрываем CTA — остаётся логотип + бургер, доступ
     к записи через меню. На 360+ кнопка остаётся (места хватает). */
  .nav-cta .btn-primary{ display: none;}
}
.source-link{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:14px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;}
.source-link:hover{color:var(--accent-text);border-color:var(--accent-2);}
.source-link::before{content:"↗";color:var(--accent-text);}
.case-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;margin:18px 0;}
.case-block h4{font-size:17px;font-weight:500;margin-bottom:8px;}
.case-block .case-meta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;margin-bottom:14px;text-transform:uppercase;}
.case-block dl{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;font-size:14px;}
.case-block dt{color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px;}
.case-block dd{color:var(--fg-2);line-height:1.5;}
.related-block{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0 0;}
.related-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;cursor:pointer;transition:.2s;}
a.related-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.related-card .lbl{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.related-card h4{font-size:16px;font-weight:500;color:var(--fg);}
.related-card p{font-size:13px;color:var(--fg-2);margin-top:6px;}
.media-frame{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin:28px 0;
  display:flex;align-items:center;justify-content:center;
}
.media-frame.ratio-16-9{aspect-ratio:16/9;}
.media-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* Пустой слот под будущее фото — аккуратный плейсхолдер, НЕ битый <img>.
   Пунктирная рамка + центрированная подсказка. Удаляется при вставке реального фото. */
.media-frame--empty{background:var(--surface-2);border-style:dashed;border-color:var(--border-hi);}
/* .media-frame--video: вложенная YouTube-карточка .vid растягивается на весь фрейм. */
.media-frame--video .vid{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;}
.media-frame--video .vid:hover{transform:none;}
/* .media-frame .ph (placeholder для отсутствующих фото) удалён вместе с
   16 пустыми <figure>-блоками в longread-страницах. .media-frame остаётся
   рабочим контейнером для реальных <picture> когда фото будут добавлены. */
.media-frame .frame-caption{
  position:absolute;left:14px;bottom:14px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:8px;padding:6px 10px;
  font-family:var(--mono);font-size:10px;color:var(--fg);letter-spacing:.04em;
  z-index:2;
}

/* FLOW-CAROUSEL — текстово-медийная карусель: слайд = текст слева + визуал справа.
   Нативный scroll-snap (свайп на тач), стрелки + точки для десктопа. См. DESIGN-SYSTEM §04. */
.flow-carousel{position:relative;margin:28px 0;min-width:0;max-width:100%;}
.flow-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:var(--space-5);scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  min-width:0;max-width:100%;  /* не даём треку распирать родителя суммой слайдов */
}
.flow-track::-webkit-scrollbar{display:none;}
.flow-slide{
  flex:0 0 100%;scroll-snap-align:center;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--space-7);box-sizing:border-box;
}
.flow-slide-text h4{font-size:var(--text-xl);font-weight:var(--weight-medium);margin:0 0 var(--space-3);letter-spacing:-.01em;}
.flow-slide-text p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.6;}
.flow-slide-text .flow-step{font-family:var(--mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);margin-bottom:var(--space-3);display:block;}
/* медиа справа — декор-SVG на брендовом фоне (плейсхолдер под будущее фото) */
.flow-slide-media{
  aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--surface-2) 0%,color-mix(in srgb,var(--accent) 10%,var(--surface-2)) 100%);
  border:1px solid var(--border);
}
.flow-slide-media{position:relative;}
/* Поясняющая плашка поверх фото — тот же паттерн, что .frame-caption на media-frame.
   Нужна для научных кадров (гистология, чашки Петри, пробирки), которые клиент
   не считывает без подписи; ставится единообразно на все flow-слайды. */
.flow-slide-media .flow-caption{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:8px;padding:7px 11px;
  font-family:var(--mono);font-size:11px;line-height:1.35;color:var(--fg);letter-spacing:.02em;
  z-index:2;
}
@media(max-width:720px){ .flow-slide-media .flow-caption{font-size:10px;padding:6px 9px;} }
.flow-slide-media svg{width:64px;height:64px;stroke:var(--accent-text);opacity:.55;}
/* когда вставлено реальное фото (nano banana, 4:3) — перекрывает декор-SVG */
.flow-slide-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* навигация */
.flow-nav{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-4);gap:var(--space-4);}
.flow-dots{display:flex;gap:8px;}
/* хит-зона 24px, видимая точка 8px (прозрачный border + background-clip) */
.flow-dot{width:24px;height:24px;border-radius:999px;border:8px solid transparent;background-clip:padding-box;padding:0;background-color:var(--border-hi);cursor:pointer;transition:.2s;}
.flow-dot.on{background-color:var(--accent-2);width:38px;}
.flow-arrows{display:flex;gap:8px;}
.flow-arrow{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fg);transition:.15s;
}
.flow-arrow:hover{border-color:var(--accent-2);color:var(--accent-text);}
.flow-arrow svg{width:18px;height:18px;}
@media(max-width:720px){
  .flow-slide{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-5);}
  .flow-slide-media{aspect-ratio:4/3;order:-1;}  /* на мобильном медиа сверху; 4:3 = как десктоп и как исходные фото (меньше обрезки, выше фрейм) */
}
@media(max-width:640px){.cmp-table{font-size:13px;}.cmp-table th,.cmp-table td{padding:10px 8px;}.case-block dl{grid-template-columns:1fr;gap:2px 0;}.case-block dt{padding-top:8px;}.related-block{grid-template-columns:1fr;}}
.faq details p{margin-top:14px;font-size:15px;color:var(--fg-2);padding-right:40px;}
.nav-links a[aria-current="page"]{background:var(--surface);color:var(--fg);}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:var(--py-sec) 0;}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(18px,4vw,28px);display:flex;flex-direction:column;gap:18px;}
.contact-card h2,
.contact-card h3{font-size:22px;font-weight:500;margin:0;letter-spacing:-.01em;}
.contact-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--border);}
.contact-row:last-child{border:none;}
.contact-row .ic{width:40px;height:40px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none;}
.contact-row .ic svg{width:18px;height:18px;}
.contact-row .t .lbl{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;}
.contact-row .t .val{font-size:16px;color:var(--fg);margin-top:2px;}
.contact-row .t .val a{color:var(--fg);} .contact-row .t .val a:hover{color:var(--accent-text);}
@media(max-width:960px){.sub-hero .wrap{grid-template-columns:1fr;}.longread{grid-template-columns:1fr;}.toc{position:static;}.fact-grid{grid-template-columns:1fr;}.contacts-grid{grid-template-columns:1fr;}}