/* Стили страницы разработки. Отдельным файлом — чтобы браузер клал их
   в кэш и не тянул заново на каждом заходе, и чтобы правку было видно
   в диффе. Подключается из razrabotka.html. */

/* ============================================================
     Лендинг агентства. Тёмный — сознательно: продукт и услуга
     должны отличаться на первый взгляд, но язык остаётся общим:
     те же шрифты, радиусы и синий акцент.
     ============================================================ */

  :root {
    --bg:      #0A0B0D;
    --panel:   #0E0F12;
    --panel-2: #17191E;
    --ink:     #F5F5F7;
    /* нейтральный светло-серый: прежний тон уходил в синеву и выглядел грязным */
    --soft:    #C2C2C6;
    --faint:   #8E8E93;
    --line:    #262A31;
    --accent:  #4E8CFF;
    --topbar:  34px;
    /* левый край полосы контента: на широком экране .wrap центрируется
       внутри 1440, и элементы у кромки должны вставать по нему же */
    --edge: max(clamp(20px, 3.5vw, 50px), calc((100% - 1440px) / 2 + clamp(20px, 3.5vw, 50px)));
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "SF Pro", "Inter Variable", "Inter", "Segoe UI", sans-serif;
  }

  * { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; background: var(--bg); }

  body {
    margin: 0;
    padding-top: var(--topbar, 28px);
    color: var(--soft);
    background: var(--bg);
    font: 400 16px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a { color: inherit; }



  /* ── чёрная лента над шапкой: ведёт на лендинг Mary ─────── */

  .topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000;
    color: var(--faint);
    font: 500 11px/1 var(--font);
    letter-spacing: -.01em;
    text-decoration: none;
    transition: color .22s ease;
  }

  /* на наведении лента оживает: содержание становится белым */
  .topbar:hover { color: #fff; }

  .topbar__track {
    display: flex;
    align-items: center;
    height: var(--topbar, 28px);
    line-height: 1;
    width: max-content;
    animation: topbar-run 64s linear infinite;
  }

  .topbar:hover .topbar__track { animation-play-state: paused; }

  .topbar__item {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 10px;
    white-space: nowrap;
    /* глифы с выносными вниз тянут строку ниже геометрического центра */
    transform: translateY(-1.5px);
  }

  .topbar__item b { font-weight: 500; }

  .topbar__item svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* разделитель между повторами */
  .topbar__item i {
    width: 4px;
    height: 4px;
    margin: 0 46px;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
  }

  /* Лента склеена из восьми одинаковых кусков: сдвиг ровно на половину
     даёт бесшовный повтор. */
  @keyframes topbar-run {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .topbar__track { animation: none; }
  }

  /* ── шапка ─────────────────────────────────────────────── */



  /* Курсор на первом экране — маленькая белая точка. Системный прячем
     только там, где есть мышь: на тач-устройствах это ничего не меняет. */
  @media (hover: hover) and (pointer: fine) {
    /* !important — иначе любой cursor: pointer на кнопках и ссылках
       возвращает системную стрелку поверх нашей точки */
    body, body * { cursor: none !important; }
    /* в полях ввода курсор нужен настоящий */
    input, textarea, select { cursor: auto !important; }
  }

  .dot-cursor {
    position: fixed;
    top: 0;
    left: 0;
    /* выше панели заявки и модалки (80) — иначе курсор под ними пропадает */
    z-index: 100;
    display: grid;
    place-items: center;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
    /* инверсия: на тёмном точка белая, на белой кнопке — чёрная,
       иначе она сливалась с кнопкой и выедала букву */
    mix-blend-mode: difference;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .12s ease-out,
                width .24s cubic-bezier(.32, .72, .3, 1),
                height .24s cubic-bezier(.32, .72, .3, 1);
    will-change: transform;
  }

  .dot-cursor.is-on { opacity: 1; }

  /* поверх залитой плитки инверсия делала точку чёрной — держим её белой */
  .dot-cursor.is-plain { mix-blend-mode: normal; background: #fff; }

  .dot-cursor i {
    color: #0B0C0E;
    font: 700 11px/1 var(--font);
    font-style: normal;
    letter-spacing: -.045em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .16s ease;
  }

  /* над плашкой кейса точка вырастает в кружок с подписью:
     полупрозрачный серый с лёгким размытием, чтобы под ним было видно
     содержимое, а не белое пятно */
  .dot-cursor.is-big {
    width: 72px;
    height: 72px;
    background: rgba(150, 152, 158, .38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    mix-blend-mode: normal;
  }

  .dot-cursor.is-big i { color: #fff; }

  .dot-cursor.is-big i { opacity: 1; }

  /* «Видео-обзор» длиннее прочих подписей — кружку нужно больше места */
  .dot-cursor.is-wide { width: 96px; height: 96px; }
  .dot-cursor.is-wide i {
    max-width: 74px;
    text-align: center;
    line-height: 1.25;
    /* переносим по слову, а не по дефису — «ВИДЕО-» с висящим дефисом
       ломало центровку строки */
    word-break: keep-all;
    hyphens: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .dot-cursor { display: none; }
    body, body * { cursor: auto; }
  }

  /* Структура как на основном сайте: три зоны, знак ровно по центру
     полосы при любой ширине. Отличается только содержание. */
  /* Шапка висит над первым экраном: прозрачная с размытием, чтобы
     сфера просвечивала, а текст оставался читаемым. */
  /* Шапка совсем без подложки: ни фона, ни размытия — сфера под ней
     видна целиком. Затемнение уехало вниз первого экрана. */
  .nav-bar {
    /* Инверсия, как у курсора: поверх белых блоков шапка становится чёрной.
       Свойство висит на самой полосе — внутри неё blend смешивался бы
       только с её собственным содержимым. */
    mix-blend-mode: difference;
    position: sticky;
    /* липнет под лентой, а не под верхом окна — иначе при прокрутке
       шапка заезжала под неё */
    top: var(--topbar, 28px);
    z-index: 40;
    padding-bottom: 10px;
    background: transparent;
  }

  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 58px;
  }

  /* та же полоса контента, что на остальных страницах */
  /* Поля как в макете: 50 по краям. Прежний 3.5vw на среднем экране
     давал 35 и шапка липла к краю сильнее, чем контент в макете. */
  .wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 50px); }

  .nav__links { display: flex; align-items: center; gap: 28px; justify-self: start; }

  /* ── меню ниш: та же структура, что на светлых страницах,
        цвета — из тёмной палитры этой страницы ───────────────── */

  .nav__link { color: var(--soft); font: 500 13px/1 var(--font); letter-spacing: -.02em; text-decoration: none; transition: color .18s ease; }
  .nav__link:hover { color: #fff; }

  .nav__drop { position: relative; display: inline-flex; }

  /* мостик до меню: без него список закрывается, пока ведёшь мышь */
  .nav__drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }

  .nav__drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--soft);
    font: 500 14px/1 var(--font);
    letter-spacing: -.03em;
    cursor: pointer;
    transition: color .18s ease;
  }

  .nav__drop-btn:hover { color: var(--ink); }
  .nav__drop-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
  .nav__drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 12px);
    left: -20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: max-content;
    max-width: min(94vw, 1040px);
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(22, 24, 28, .92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .nav__menu.is-open { opacity: 1; transform: none; pointer-events: auto; }

  .nav__cols { display: grid; grid-template-columns: minmax(390px, 1fr) minmax(300px, 340px); gap: 32px; }
  .nav__col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 2px 10px; }

  .nav__menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--ink);
    font: 400 16px/1.2 var(--font);
    letter-spacing: -.01em;
    white-space: nowrap;
    text-decoration: none;
    transition: background .16s ease;
  }

  .nav__menu-item:hover { background: var(--panel-2); }

  .nav__ico { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); }
  .nav__ico img {
    width: 19px;
    height: 19px;
    object-fit: contain;
  }

  .nav__promo { display: flex; flex-direction: column; gap: 10px; }

  .nav__promo-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
    background: var(--panel-2);
    text-decoration: none;
    transition: background .16s ease;
  }

  .nav__promo-card:hover { background: #23272E; }
  .nav__promo-card img { width: 92px; height: 72px; border-radius: 10px; background: #fff; object-fit: cover; }
  .nav__promo-card em { display: block; margin-bottom: 5px; color: var(--faint); font: 500 11px/1 var(--font); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
  .nav__promo-card b { display: block; color: var(--ink); font: 500 14px/1.3 var(--font); white-space: normal; }
  .nav__promo-card i { display: block; margin-top: 6px; color: var(--faint); font: 400 13px/1 var(--font); font-style: normal; }

  @media (max-width: 1180px) { .nav__cols { grid-template-columns: 1fr; } .nav__promo { display: none; } }
  @media (max-width: 720px) { .nav__col { grid-template-columns: 1fr; } }


  .nav__actions {
    display: flex;
    align-items: center;
    gap: 28px;
    justify-self: end;
  }

  .nav__links a,
  .nav__actions a:not(.nav__btn) {
    color: var(--soft);
    font: 500 13px/1 var(--font);
    letter-spacing: -.02em;
    text-decoration: none;
    transition: color .18s ease;
  }

  .nav__links a:hover,
  .nav__actions a:not(.nav__btn):hover { color: #fff; }

  /* Стрелка сидела на базовой линии и задирала строку вверх —
     ставим её в одну линию с текстом по центру. */
  .nav__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .nav__button i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
  }


  /* Пункты шапки перекручиваются лесенкой, как подпись на кнопке. */
  .nav-roll {
    display: inline-block;
    /* высота с запасом под выносные («у», «д», «Щ»): 1.3em, а не 1em/1lh —
       lh зависит от контекста и в полосе футера резал буквы */
    height: 1.3em;
    overflow: hidden;
    vertical-align: middle;
  }

  .nav-roll span { display: flex; align-items: center; height: 1.3em; }

  .nav-roll b {
    display: inline-block;
    font-weight: inherit;
    transition: transform .38s cubic-bezier(.32, .72, .3, 1);
    transition-delay: calc(var(--i) * 22ms);
  }

  .nav__links a:hover .nav-roll b,
  .nav__actions a:hover .nav-roll b,
  .flow__cta:hover .nav-roll b,
  .foot__nav a:hover .nav-roll b,
  .foot__mail:hover .nav-roll b,
  .foot__out:hover .nav-roll b,
  .foot__go:hover .nav-roll b,
  .foot__bar a:hover .nav-roll b,
  [data-scroll-top]:hover .nav-roll b,
  .foot__stripe-go:hover .nav-roll b { transform: translateY(-100%); }

  @media (prefers-reduced-motion: reduce) {
    .nav-roll b { transition: none; }
    .nav__links a:hover .nav-roll b,
    .nav__actions a:hover .nav-roll b,
    .flow__cta:hover .nav-roll b,
    .foot__nav a:hover .nav-roll b,
    .foot__mail:hover .nav-roll b,
    .foot__out:hover .nav-roll b,
    .foot__go:hover .nav-roll b,
    .foot__bar a:hover .nav-roll b,
    [data-scroll-top]:hover .nav-roll b { transform: none; }
  }

  .nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: center;
    color: var(--ink);
    font-weight: 600;
    font-size: 19.4px;
    line-height: 1;
    letter-spacing: -.09em;
    text-decoration: none;
  }

  .nav__brand img { width: 20px; height: 20px; }

  /* кнопка — та же форма, что на главной, но в тёмной палитре */
  .nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 40px;
    color: var(--ink);
    background: rgba(255, 255, 255, .1);
    font: 600 12px/1 var(--font);
    letter-spacing: -.03em;
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s ease;
  }

  .nav__btn:hover { background: rgba(255, 255, 255, .18); }

  .nav__btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Бургер: две полоски, на десктопе спрятан */
  .nav__burger {
    display: none;
    /* у <button> свой цвет по умолчанию — полоски сливались с фоном */
    color: var(--ink);
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .nav__burger i { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 0 auto; }

  @media (max-width: 1080px) {
    .nav { grid-template-columns: auto 1fr; }
    .nav__links,
    .nav__actions a { display: none; }
    .nav__brand { justify-self: start; }
    .nav__burger { display: flex; }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 22px;
    border-radius: 40px;
    background: var(--ink);
    color: #0F1013;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .18s ease;
  }

  .btn:hover { opacity: .88; }

  .btn.is-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
  }

  /* ── первый экран ──────────────────────────────────────── */

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 40px;
    color: var(--faint);
    font: 500 13px/1 var(--font);
  }

  .eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
  }

  h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    font-size: clamp(34px, 5.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
  }

  .lead { max-width: 56ch; margin: 24px 0 0; font-size: 18px; }

  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }

  /* ── сцена первого экрана ───────────────────────────────── */

  /* Кадр макета 1440×1024. Все элементы расставлены по его координатам
     в процентах, поэтому композиция держится на любой ширине, а не
     подгоняется на глаз. */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: clamp(200px, 34vh, 400px);
    width: 100%;
    /* экран целиком, минус шапка и полоса над ней */
    min-height: calc(100svh - var(--topbar, 28px));
    margin-top: -68px;
    padding-top: 68px;
    overflow: hidden;
    isolation: isolate;
  }

  /* ── первый экран ───────────────────────────────────────── */

  /* Сфера из точек рисуется кодом: картинкой такой объём весил бы
     сотни килобайт и мылился бы на ретине. */
  /* Низ первого экрана уходит в фон: там начинается тёмная часть
     страницы, и резкой границы между ними быть не должно. */
  .hero::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: clamp(200px, 30vh, 340px);
    /* мягкая дымка: несколько ступеней вместо одной границы, поэтому
       переход к следующему блоку не читается швом */
    background: linear-gradient(180deg,
      rgba(10, 11, 13, 0) 0%,
      rgba(10, 11, 13, .18) 26%,
      rgba(10, 11, 13, .48) 50%,
      rgba(10, 11, 13, .78) 72%,
      var(--bg) 92%);
    pointer-events: none;
  }

  .hero__globe {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(920px, 96vw);
    aspect-ratio: 1;
    transform: translate(-50%, -44%);
    pointer-events: none;
    /* точки гаснут к нижнему краю: без этого они обрывались линией */
    -webkit-mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .6) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .6) 84%, transparent 100%);
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Заголовок идёт одной строкой и занимает ширину сцены —
     на узких экранах перенос возвращается. */
  .hero h1 {
    max-width: none;
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: clamp(38px, 7vw, 96px);
    line-height: 1.04;
    letter-spacing: -.018em;
    white-space: nowrap;
  }

  @media (max-width: 720px) {
    .hero h1 { max-width: 16ch; font-size: clamp(34px, 8.5vw, 46px); white-space: normal; }
  }

  /* Узкая колонка в несколько строк, как в референсе: светлый текст
     средней насыщенности, а не длинная строка серым. */
  .hero__lead {
    max-width: 38ch;
    margin: clamp(20px, 3vh, 32px) auto 0;
    color: #E8EAEE;
    font: 500 clamp(14px, 1.15vw, 17px)/1.4 var(--font);
    letter-spacing: -.015em;
    text-align: center;
  }

  /* Капсула с подписью капсом и точкой справа. Кнопка светлая:
     на чёрном первом экране тёмная, как в референсе, просто пропала бы. */
  .hero__cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(32px, 5vh, 60px);
    padding: 17px 14px;
    border-radius: 999px;
    color: #fff;
    /* как у кружка курсора: полупрозрачный серый с лёгким размытием */
    background: rgba(150, 152, 158, .38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font: 700 11px/1 var(--font);
    letter-spacing: -.035em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease;
  }

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

  /* Заливка расходится из точки, где курсор коснулся кнопки. */
  .hero__cta::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    border-radius: 999px;
    background: #fff;
    transform: translate(-50%, -50%);
    transition: width .42s cubic-bezier(.32, .72, .3, 1), height .42s cubic-bezier(.32, .72, .3, 1);
  }

  .hero__cta:hover::before { width: 260%; height: 620%; }

  .hero__cta:hover { color: #0B0C0E; }

  .hero__cta-roll, .hero__cta-dot { position: relative; z-index: 1; }

  /* Подпись прокручивается: верхняя строка уезжает, снизу приходит копия. */
  .hero__cta-roll {
    display: block;
    height: 1em;
    overflow: hidden;
  }

  /* Буквы уходят лесенкой: у каждой своя задержка, поэтому строка
     перекручивается волной, а не единым блоком. */
  .hero__cta-roll span {
    display: flex;
    height: 1em;
  }

  .hero__cta-roll b {
    display: inline-block;
    font-weight: inherit;
    transition: transform .38s cubic-bezier(.32, .72, .3, 1);
    transition-delay: calc(var(--i) * 22ms);
  }

  .hero__cta:hover .hero__cta-roll b { transform: translateY(-100%); }

  /* Точка: контур, который при наведении заливается. */
  /* Кольцо заливается изнутри: габарит точки не меняется, поэтому
     при наведении она не «прыгает» в размере. */
  .hero__cta-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
    transition: box-shadow .28s ease;
  }

  .hero__cta:hover .hero__cta-dot { box-shadow: inset 0 0 0 5px currentColor; }

  @media (prefers-reduced-motion: reduce) {
    .hero__cta-roll b { transition: none; }
    .hero__cta:hover .hero__cta-roll b { transform: none; }
  }

  .hero__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 56px);
    margin: clamp(34px, 5vh, 58px) 0 0;
    padding: 0;
    list-style: none;
  }

  /* логотипы отрисованы тёмными — на чёрном высветляем и приглушаем */
  .hero__logos img {
    height: clamp(18px, 1.8vw, 24px);
    width: auto;
    filter: invert(1) grayscale(1);
    opacity: .45;
  }

  .hero__note {
    position: absolute;
    bottom: clamp(28px, 5vh, 56px);
    left: var(--edge);
    max-width: 34ch;
    margin: 0;
    color: var(--ink);
    font: 500 clamp(16px, 1.5vw, 21px)/1.35 var(--font);
    letter-spacing: -.03em;
  }



  /* Нижняя строка первого экрана: слева надпись, по центру приглашение
     листать, справа плашка кейса. */
  .hero__scroll {
    position: absolute;
    bottom: clamp(28px, 5vh, 56px);
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font: 500 13px/1 var(--font);
    letter-spacing: -.02em;
    text-decoration: none;
    transform: translateX(-50%);
    transition: opacity .18s ease, transform .34s cubic-bezier(.34, 1.4, .5, 1);
  }

  /* при наведении подсказка мягко опускается — как приглашение листать */
  .hero__scroll:hover { transform: translate(-50%, 6px); }

  .hero__scroll svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: scroll-hint 2.4s ease-in-out infinite;
  }

  @keyframes scroll-hint {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50%      { transform: translateY(4px); opacity: 1; }
  }

  .hero__case {
    position: absolute;
    /* выше <main>, который идёт следом и ложится на нижний край hero */
    z-index: 2;
    right: var(--edge);
    bottom: clamp(28px, 5vh, 56px);
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 400px;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    transition: transform .2s ease;
  }

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

  .hero__case img {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 14px;
    object-fit: cover;
  }

  /* Метка и заголовок одного веса и тона — плашка читается одним блоком. */
  .hero__case span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .hero__case em,
  .hero__case b {
    color: var(--soft);
    font: 500 15px/1.4 var(--font);
    font-style: normal;
    letter-spacing: -.01em;
  }

  /* метка как у разделов: точка и слово строчными */
  .hero__case em { display: inline-flex; align-items: center; gap: 8px; color: #fff; }

  /* стрелка идёт в конце строки, внутри плашки */
  .hero__case b svg {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -1px;
    transition: transform .2s ease;
  }

  .hero__case:hover b svg { transform: translate(2px, -2px); }

  .hero__case em::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
  }

  @media (max-width: 1100px) {
    .hero__scroll { display: none; }
    /* Кейс из угла переезжает под подпись — иначе он налезал на сферу. */
    .hero__case {
      position: static;
      max-width: none;
      margin-top: 24px;
    }
  }

  /* Плазма первого экрана: несколько световых пятен под сильным
     размытием медленно расходятся и сходятся. Считается видеокартой
     через transform, картинок и видео не требует. */
  .hero__plasma {
    position: absolute;
    inset: -10%;
    z-index: -2;
    filter: blur(90px) saturate(140%);
    opacity: .7;
    pointer-events: none;
  }

  .hero__plasma i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      #6EA8FF 0%, #2F6BFF 38%, rgba(20, 40, 140, .55) 66%, transparent 78%);
    transform: translate(-50%, -50%) scale(var(--s));
    animation: plasma 42s ease-in-out infinite both;
    animation-delay: var(--d);
    will-change: transform;
  }

  .hero__plasma i:nth-child(even) {
    background: radial-gradient(circle at 50% 50%,
      #A9C7FF 0%, #3D7BFF 34%, rgba(12, 28, 110, .5) 64%, transparent 76%);
  }

  @keyframes plasma {
    0%   { transform: translate(-50%, -50%) scale(var(--s)); }
    25%  { transform: translate(-34%, -64%) scale(calc(var(--s) * 1.18)); }
    50%  { transform: translate(-62%, -42%) scale(calc(var(--s) * .88)); }
    75%  { transform: translate(-44%, -30%) scale(calc(var(--s) * 1.08)); }
    100% { transform: translate(-50%, -50%) scale(var(--s)); }
  }

  /* зерно поверх — оно и делает картинку «плёночной», а не пластиковой */
  .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
    opacity: .22;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__plasma i { animation: none; }
  }

  .hero__scene { position: absolute; inset: 0; pointer-events: none; }

  /* Рендеры отрисованы на чёрном фоне и глушили плазму под собой.
     screen убирает чёрное, оставляя только свет самих плиток. */
  .hero__scene img { mix-blend-mode: screen; }

  /* сфера: x −126, y 205, ширина 1759 из 1440 */
  .hero__sphere {
    position: absolute;
    left: -8.75%;
    top: 20.02%;
    width: 122.15%;
    height: auto;
  }

  /* плитки: x 0, y 294, ширина 1440 */
  .hero__tiles {
    position: absolute;
    left: 0;
    top: 28.7%;
    width: 100%;
    height: auto;
    animation: tiles-float 12s ease-in-out infinite;
  }

  @keyframes tiles-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }

  /* текст: заголовок на 22.8%, кнопка на 39% */
  .hero__text {
    position: absolute;
    left: 50%;
    top: 18%;
    width: min(96%, 1240px);
    transform: translateX(-50%);
    text-align: center;
  }

  .hero__text h1 { margin: 18px auto 0; }
  .hero__text .lead { margin: 22px auto 0; }
  .hero__text .cta-row { justify-content: center; }

  /* карточка основателя: x 1044, y 840 */
  /* Две плашки рядом, как в макете: слева фото, справа подпись.
     Одной карточкой текст упирался в фото и обрезался. */
  .hero__ceo {
    position: absolute;
    right: clamp(20px, 3.5vw, 50px);
    bottom: clamp(24px, 4vh, 44px);
    display: flex;
    gap: 10px;
    max-width: min(560px, calc(100vw - 40px));
  }

  .hero__photo {
    flex: 0 0 auto;
    width: 132px;
    padding: 10px;
    border-radius: 22px;
    background: var(--panel);
  }

  .hero__photo img {
    display: block;
    width: 100%;
    height: 150px;
    border-radius: 14px;
    object-fit: cover;
  }

  .hero__ceo-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--panel);
  }

  .hero__ceo-lead {
    margin: 0 0 12px;
    color: var(--ink);
    font: 400 15px/1.35 var(--font);
  }

  .hero__role { color: var(--faint); font-size: 13px; }
  .hero__name { margin-top: 4px; color: var(--ink); font: 500 17px/1.2 var(--font); letter-spacing: -.02em; }

  .hero__contact {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 40px;
    background: var(--panel-2);
    color: var(--ink);
    font: 400 15px/1 var(--font);
    text-decoration: none;
    transition: background .18s ease;
  }

  .hero__contact:hover { background: #23262C; }

  .hero__contact i {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 4px solid var(--panel-2);
    background: #fff;
    box-shadow: 0 0 0 1px #fff;
  }

  @media (max-width: 1100px) {
    .hero { padding-bottom: clamp(40px, 7vh, 80px); }
    .hero__ceo { flex-direction: row; max-width: none; }
    /* подпись и кейс идут потоком под кнопкой, у левого края */
    .hero__note {
      position: static;
      max-width: none;
      margin: clamp(32px, 6vh, 64px) 0 0;
      padding: 0 clamp(20px, 3.5vw, 50px);
      text-align: left;
    }
    .hero__ceo { position: static; margin: 24px clamp(20px, 3.5vw, 50px) 0; }
    .hero__case { margin-left: clamp(20px, 3.5vw, 50px); margin-right: clamp(20px, 3.5vw, 50px); }
  }


  /* ── общая шапка секции ─────────────────────────────────── */

  #main section { padding: clamp(64px, 11vh, 130px) 0; }

  .sec__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr);
    align-items: start;
    gap: clamp(24px, 5vw, 80px);
    margin-bottom: clamp(40px, 6vh, 72px);
  }

  .sec__head h2 {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -.035em;
  }

  .sec__head p {
    margin: 8px 0 0;
    max-width: 46ch;
    color: var(--soft);
    font-size: 16px;
    line-height: 1.5;
  }

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


  /* Метка раздела: точка и короткое имя над заголовком, а сверху —
     тонкая линия, отделяющая секцию от предыдущей. */
  #main section { border-top: 0; }

  /* Секция без крупного заголовка: метка и текст идут одной колонкой. */
  .sec__head.is-plain { grid-template-columns: minmax(0, 1fr); }

  /* Метка слева, текст в правой колонке — по той же линии, что цитата. */
  .sec__head.is-mark-left { grid-template-columns: minmax(0, 1fr) min(62%, 760px); gap: clamp(24px, 5vw, 80px); }

  /* Метка стоит вплотную к первому пункту, без пустого поля под ней. */
  #what .sec__head { margin-bottom: clamp(70px, 11vh, 140px); }

  @media (min-width: 861px) {
    /* заголовок раздела встаёт по линии правой колонки страницы */
  }

  .sec__head.is-mark-left .sec__mark { grid-column: 1; order: 0; margin: 0; padding-top: .15em; }
  .sec__head.is-mark-left p:not(.sec__mark) { grid-column: 2; max-width: 54ch; margin: 0; }

  @media (max-width: 860px) {
    .sec__head.is-mark-left { grid-template-columns: minmax(0, 1fr); }
    .sec__head.is-mark-left .sec__mark { order: -1; margin-bottom: clamp(28px, 5vh, 56px); padding-top: 0; }
    .sec__head.is-mark-left p:not(.sec__mark) { grid-column: 1; }
  }
  .sec__head.is-plain p:not(.sec__mark) { max-width: 54ch; margin: 0; }
  .sec__head.is-plain .sec__mark { margin-bottom: 16px; }

  .sec__mark {
    grid-column: 1 / -1;
    order: -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 clamp(28px, 5vh, 56px);
    color: var(--ink);
    font: 500 15px/1 var(--font);
  }

  /* Метка уходит в правую колонку и встаёт вровень с верхом заголовка. */
  .sec__head.is-mark-aside .sec__mark {
    grid-column: 2;
    order: 0;
    justify-self: start;
    margin: 0;
    padding-top: .35em;
  }

  @media (max-width: 860px) {
    .sec__head.is-mark-aside .sec__mark {
      grid-column: 1;
      order: -1;
      margin-bottom: clamp(28px, 5vh, 56px);
      padding-top: 0;
    }
  }


  /* Метка раздела оживает при заходе на блок: точка распускается,
     подпись выезжает из-под неё. Повторяется при каждом заходе. */
  .sec__mark i {
    transform: scale(0);
    transition: transform .45s cubic-bezier(.32, .72, .3, 1);
  }

  .sec__mark.is-live i { transform: scale(1); }

  .sec__mark em {
    display: inline-block;
    font-style: normal;
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity .5s ease .12s, transform .5s cubic-bezier(.32, .72, .3, 1) .12s;
  }

  .sec__mark.is-live em { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .sec__mark i, .sec__mark em { transition: none; transform: none; opacity: 1; }
  }

  .sec__mark i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--soft);
  }



  /* ── превью платформы и видео-обзор ─────────────────────── */

  #quote { position: relative; }

  .demo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 250px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }

  .demo__frame {
    position: relative;
    display: block;
    transition: transform .32s cubic-bezier(.32, .72, .3, 1);
  }

  .demo__win {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #2B2E33;
  }

  .demo__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 9px;
  }

  .demo__bar i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #4A4E55;
  }

  .demo__bar i:first-child { background: #FF5F57; }
  .demo__bar i:nth-child(2) { background: #FEBC2E; }
  .demo__bar i:nth-child(3) { background: #28C840; }

  .demo__bar b {
    flex: 1;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .55);
    font: 400 8px/1 var(--font);
    letter-spacing: .01em;
    text-align: center;
  }

  .demo:hover .demo__frame { transform: translateY(-4px); }

  .demo__frame img { display: block; width: 100%; height: auto; }

  .demo__cap {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--soft);
    font: 500 13px/1.35 var(--font);
    letter-spacing: -.01em;
    transition: color .18s ease;
  }

  .demo:hover .demo__cap { color: #fff; }

  .demo__cap i {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 5px;
    border-radius: 999px;
    background: currentColor;
  }

  @media (min-width: 861px) {
    /* низ превью встаёт вровень с подписью автора: цитата поднята к метке,
       на ту же величину поднимаем и превью */
    .demo {
      position: absolute;
      left: 0;
      bottom: calc(15px + 16px + clamp(40px, 6vh, 72px) - 4px);
    }
  }

  @media (max-width: 860px) {
    .demo { margin-top: clamp(32px, 6vh, 56px); }
  }

  /* Видео разворачивается из угла превью, фон уходит в темноту. */
  .vmodal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2.5vw, 32px);
    background: rgba(6, 7, 9, 0);
    opacity: 0;
    transition: opacity .28s ease, background .32s ease;
  }

  /* display: grid перебивал атрибут hidden — закрытая модалка висела
     поверх страницы и съедала все наведения. */
  .vmodal[hidden] { display: none; }

  .vmodal.is-open { opacity: 1; background: rgba(6, 7, 9, .88); }

  .vmodal__box {
    /* картинка задаёт размер сама, окно лишь ограничивает его —
       иначе ширина 100% растягивала кадр и он вылезал за экран */
    width: auto;
    max-width: min(100%, 1500px);
    max-height: 88vh;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    transform: scale(.14);
    transform-origin: var(--ox, 0) var(--oy, 100%);
    transition: transform .58s cubic-bezier(.22, .68, .24, 1);
  }

  .vmodal.is-open .vmodal__box { transform: scale(1); }

  .vmodal__shot { display: block; width: auto; max-width: 100%; max-height: 88vh; object-fit: contain; background: #000; }

  .vmodal__close {
    position: absolute;
    top: clamp(14px, 3vh, 28px);
    right: clamp(14px, 3vw, 28px);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    transition: background .18s ease;
  }

  .vmodal__close:hover { background: rgba(255, 255, 255, .22); }

  .vmodal__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
  }

  @media (prefers-reduced-motion: reduce) {
    .vmodal, .vmodal__box { transition: none; }
    .vmodal__box { transform: none; }
  }

  /* ── цитата основателя ──────────────────────────────────── */

  /* До 860px цитата идёт во всю ширину: узкие max-width в ch рвали её
     по два слова на планшете и телефоне. */
  .quote { margin: 0; }

  .quote p {
    margin: 0 0 clamp(24px, 4vh, 44px);
    font-weight: 500;
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 1.16;
    letter-spacing: -.03em;
  }

  /* Слова гаснут и загораются по мере прокрутки — текст «читается» сам. */
  .quote span {
    color: rgba(255, 255, 255, .18);
    transition: color .35s ease;
  }

  .quote span.is-lit { color: var(--ink); }


  /* Ссылки автора у правого края строки: квадратные плитки с линейными
     знаками, как в референсе. */
  .quote__links {
    display: flex;
    gap: 10px;
    margin-left: auto;
  }

  .quote__links a {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    /* мягкий подскок: разгон быстрый, посадка с лёгким перелётом */
    transition: background .22s ease, transform .32s cubic-bezier(.34, 1.56, .48, 1);
  }

  .quote__links a:hover { transform: translateY(-4px); }

  /* Белая заливка расходится из точки, где курсор коснулся плитки. */
  .quote__links a::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    border-radius: 999px;
    background: #fff;
    transform: translate(-50%, -50%);
    transition: width .38s cubic-bezier(.32, .72, .3, 1), height .38s cubic-bezier(.32, .72, .3, 1);
  }

  .quote__links a:hover::before { width: 320%; height: 320%; }

  .quote__links svg {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--soft);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .18s ease;
  }

  .quote__links a:hover svg { stroke: #0B0C0E; }

  @media (max-width: 640px) {
    .quote__author { flex-wrap: wrap; }
    .quote__links { margin-left: 0; }
  }

  .quote__author { display: flex; align-items: center; gap: 14px; margin: 0; }
  .quote__author img { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; }
  .quote__author figcaption { display: flex; flex-direction: column; gap: 2px; }

  /* Кегль как у метки раздела и подписи в плашке кейса — 15px. */
  .quote__name,
  .quote__role {
    color: var(--soft);
    font: 500 15px/1.35 var(--font);
    letter-spacing: -.01em;
  }

  .quote__role { color: var(--faint); }

  @media (min-width: 861px) {
    /* Цитата поднимается к метке: первая строка встаёт с ней на один уровень. */
    .quote {
      max-width: 20ch;
      margin-left: auto;
      margin-top: calc(-1 * (15px + 16px + clamp(40px, 6vh, 72px)) + 4px);
      width: min(62%, 760px);
    }

    .quote { max-width: none; }
    .quote p { max-width: 26ch; }
  }

  /* ── список услуг строками ──────────────────────────────── */

  .rows { margin: 0; padding: 0; list-style: none; }

  /* Строка: слева крупный заголовок, справа пояснение. Сверху пунктир
     с синим квадратом в начале — метка новой строки. */
  .rows li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
    gap: clamp(24px, 5vw, 80px);
    padding: clamp(30px, 4.4vh, 52px) 0;
    /* пунктир кружками: border-dotted рисует квадраты */
    /* те же точки, что на оси этапов: 1px, шаг 9 */
    background-image: radial-gradient(circle, rgba(255, 255, 255, .4) .75px, transparent .8px);
    background-size: 5px 2px;
    background-repeat: repeat-x;
    background-position: left top;
  }

  .rows li::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #fff;
  }

  .rows h3 {
    margin: 0;
    padding-left: 26px;
    color: var(--ink);
    font-weight: 500;
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 1.06;
    letter-spacing: -.035em;
  }

  .rows p {
    margin: 2px 0 0;
    max-width: 44ch;
    color: var(--soft);
    font-size: 16px;
    line-height: 1.5;
  }

  @media (max-width: 860px) {
    .rows li { grid-template-columns: 1fr; gap: 12px; }
    .rows p { padding-left: 26px; }
  }


  /* ── светлая полоса с бегущей строкой ───────────────────── */

  /* Секция выходит за полосу контента: строка должна уезжать за края. */
  .tape {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 0 !important;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
  }


  .tape__arcs {
    position: absolute;
    z-index: 0;
    will-change: transform;
    top: 50%;
    left: 50%;
    width: min(880px, 74vw);
    height: auto;
    transform: translate(-50%, -50%);
    opacity: .95;
    pointer-events: none;
  }

  .tape__line {
    position: relative;
    z-index: 1;
    /* Та же инверсия, что у курсора: на белом фоне строка чёрная,
       а поверх дуг буквы переливаются. */
    mix-blend-mode: difference;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    width: max-content;
    /* сдвиг задаёт скрипт по мере прокрутки */
    will-change: transform;
  }

  .tape__line span {
    color: #fff;
    font-weight: 500;
    font-size: clamp(46px, 8vw, 108px);
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
  }

  .tape__line i {
    flex: 0 0 auto;
    width: clamp(10px, 1.2vw, 16px);
    height: clamp(10px, 1.2vw, 16px);
    border-radius: 999px;
    background: #fff;
  }


  /* ── этапы работы ───────────────────────────────────────── */

  .flow__track { position: relative; padding: clamp(20px, 4vh, 48px) 0; }

  /* Ось по центру: пунктир, вдоль которого идут этапы. */
  .flow__axis {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .45) 1px, transparent 1px);
    background-size: 3px 9px;
    transform: translateX(-50%);
  }

  /* Бегунок держится у середины экрана, пока идёт секция. */
  .flow__dot {
    position: sticky;
    top: 50vh;
    z-index: 2;
    display: block;
    width: 10px;
    height: 10px;
    margin-left: calc(50% - 5px);
    background: #fff;
  }

  .flow__item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* шаги идут внахлёст по вертикали, но не наезжают друг на друга */
    margin-top: clamp(-40px, -3vh, -16px);
  }

  .flow__item:first-of-type { margin-top: 0; }

  .flow__item .flow__card { grid-column: 2; margin-left: clamp(24px, 4vw, 60px); }
  .flow__item.is-left .flow__card { grid-column: 1; margin-left: 0; margin-right: clamp(24px, 4vw, 60px); }
  .flow__item.is-left { justify-items: end; }

  .flow__card {
    cursor: pointer;
    width: min(100%, 460px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(14, 15, 18, .6);
    overflow: hidden;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.32, .72, .3, 1);
  }

  .flow__item.is-in .flow__card { opacity: 1; transform: none; }

  .flow__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
  }

  /* Номер идёт точкой и цифрами, как метки разделов, — рамка вокруг него
     спорила с рамкой самой карточки. */
  .flow__num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--soft);
    font: 400 13px/1 var(--font);
    letter-spacing: .04em;
  }

  .flow__num::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--soft);
  }

  .flow__head h3 { margin: 0; color: var(--ink); font: 500 17px/1.2 var(--font); letter-spacing: -.01em; }

  /* Тело раскрывается вместе с появлением карточки. */
  .flow__body { display: block; }

  /* Карточка появляется целиком: высота не меняется, поэтому при прокрутке
     ничего не прыгает — раньше анимация grid-строк дёргала всю ленту. */
  .flow__item {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .55s cubic-bezier(.32, .72, .3, 1),
                transform .55s cubic-bezier(.32, .72, .3, 1);
    will-change: opacity, transform;
  }

  .flow__item.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .flow__item { opacity: 1; transform: none; transition: none; }
  }

  /* Поле карточки: пиксельный синий градиент, поверх — тонкая схема.
     Картинка своя у каждого этапа, чтобы карточки не выглядели копиями. */
  .flow__art {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #0A0B0D;
  }

  /* сам фон живёт в слое: медленное дыхание вместо статичной картинки */
  .flow__art::before {
    content: "";
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: art-breathe 26s ease-in-out infinite alternate;
  }

  @keyframes art-breathe {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.07) translate3d(-1%, -1%, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .flow__art::before { animation: none; }
  }

  .flow__item:nth-of-type(1) .flow__art::before { background-image: url("/media/flow/step-01.webp?v=9"); }
  .flow__item:nth-of-type(2) .flow__art::before { background-image: url("/media/flow/step-02.webp?v=9"); }
  .flow__item:nth-of-type(3) .flow__art::before { background-image: url("/media/flow/step-03.webp?v=9"); }
  .flow__item:nth-of-type(4) .flow__art::before { background-image: url("/media/flow/step-04.webp?v=9"); }


  /* Фигура набрана квадратиками: они проявляются волной при заходе на карточку
     и мягко пульсируют, пока карточка в кадре. */
  .art {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* По фигуре бежит диагональная волна: точка подскакивает, вспыхивает
     и оседает. Задержка растёт по порядку клеток — волна идёт наискось. */
  .art rect {
    transform-box: fill-box;
    transform-origin: center;
    animation: art-wave 3.4s cubic-bezier(.32, .72, .3, 1) infinite;
    animation-delay: calc(var(--i) * 13ms);
  }

  .art__g { animation: art-float 9s ease-in-out infinite; }

  @keyframes art-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(.4deg); }
  }

  @keyframes art-wave {
    0%, 100% { opacity: .82; transform: translateY(0) scale(1); filter: none; }
    22% { opacity: 1; transform: translateY(-3.5px) scale(1.32); filter: brightness(1.6); }
    46% { opacity: .9; transform: translateY(0) scale(.86); filter: none; }
    68% { opacity: .82; transform: translateY(0) scale(1.04); }
  }

  @media (prefers-reduced-motion: reduce) {
    .art rect { opacity: 1; transform: none; }
    .art rect, .art__g { animation: none; }
  }

  .flow__art svg {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: clamp(18px, 4%, 34px);
  }

  /* На синем поле линии светлые, а не акцентные — иначе сливаются. */
  /* Толщина у всех линий одна — различаем только яркостью. */
  .art__grid,
  .art__hot,
  .art__pin,
  .art__line {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Второстепенные контуры набраны пикселями в тон фона — квадратная
     засечка нулевой длины даёт точку, а не штрих. */
  .art__grid,
  .art__line {
    stroke: rgba(12, 40, 110, .5);
    stroke-width: 2.4;
    stroke-linecap: square;
    stroke-dasharray: 0 5;
  }

  .art__hot { stroke: #fff; }
  .art__pin { stroke: #fff; }


  /* «Подробнее» раскрывает список шагов прямо в карточке. */
  .flow__det { border-top: 1px solid var(--line); }

  .flow__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    color: var(--soft);
    font: 500 14px/1 var(--font);
    list-style: none;
    cursor: pointer;
    transition: color .18s ease;
  }

  .flow__more { width: 100%; border: 0; background: none; text-align: left; }
  .flow__more:hover { color: #fff; }

  /* плюс превращается в минус, когда список открыт */
  .flow__more i {
    position: relative;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
  }

  .flow__more i::before,
  .flow__more i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 1.4px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform .28s cubic-bezier(.32, .72, .3, 1);
  }

  .flow__more i::after { transform: translateY(-50%) rotate(90deg); }
  .flow__det.is-open .flow__more i::after { transform: translateY(-50%) rotate(0deg); }

  /* Плавное раскрытие: строка сетки растёт от нуля до содержимого. */
  .flow__wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s cubic-bezier(.32, .72, .3, 1);
  }

  .flow__wrap > div { overflow: hidden; }

  .flow__det.is-open .flow__wrap { grid-template-rows: 1fr; }

  .flow__list {
    margin: 0;
    padding: 0 18px 8px;
    list-style: none;
  }

  .flow__list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: var(--ink);
    font: 400 14px/1.35 var(--font);
    letter-spacing: -.01em;
  }

  .flow__list span { color: var(--faint); font-variant-numeric: tabular-nums; }

  .flow__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    color: var(--soft);
    font-size: 14px;
  }

  .flow__foot svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Текстовые ссылки со стрелкой: серые в покое, белые под курсором. */
  .flow__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(56px, 9vh, 110px);
    color: var(--faint);
    font: 500 16px/1 var(--font);
    text-decoration: none;
    transition: gap .18s ease, color .18s ease;
  }

  .flow__cta:hover { gap: 14px; color: var(--ink); }

  /* Кнопка под этапами стоит по центру оси и ждёт, пока бегунок дойдёт
     до конца: до этого она приглушена, потом загорается белым. */
  #flow .flow__cta {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    color: var(--faint);
    transition: gap .18s ease, color .45s ease;
  }

  #flow .flow__cta.is-lit { color: var(--ink); }

  .flow__cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (max-width: 860px) {
    .flow__axis, .flow__dot { display: none; }
    .flow__item { grid-template-columns: 1fr; margin-top: 16px; }
    .flow__item .flow__card,
    .flow__item.is-left .flow__card { grid-column: 1; margin: 0; }
  }


  /* Предпросмотр строки: квадрат с визуалом идёт за курсором.
     Один общий элемент на список — меняем только картинку. */
  .rows__peek {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    width: 190px;
    height: 190px;
    border-radius: 18px;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    scale: .92;
    /* позиция — без перехода: иначе превью тянется за курсором и
       догоняет его только на остановке */
    transition: opacity .18s ease, scale .28s cubic-bezier(.32, .72, .3, 1);
    pointer-events: none;
  }

  .rows__peek.is-on { opacity: 1; scale: 1; }
  .rows__peek img { width: 100%; height: 100%; object-fit: cover; }

  .rows li { transition: opacity .2s ease; }
  .rows.is-peek li:not(:hover) { opacity: .45; }

  @media (hover: none) { .rows__peek { display: none; } }

  /* ── что остаётся после запуска ─────────────────────────── */

  .after { display: grid; grid-template-columns: minmax(0, 1fr); }

  /* Заголовок встаёт по левому краю картинок и вровень с меткой. */
  @media (min-width: 861px) {
    #after .sec__head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) min(62%, 760px);
      align-items: start;
      gap: 0;
    }

    #after .sec__mark { grid-column: 1; grid-row: 1; margin: 0; }
    #after .sec__head h2 { grid-column: 2; grid-row: 1; margin: 14px 0 0; }
  }

  /* Строка как в референсе: слева номер и текст, справа картинка,
     сверху точечный пунктир. */
  .after__card {
    display: grid;
    /* номер у края полосы, а картинка с текстом — в правой колонке,
       ровно по линии цитаты */
    grid-template-columns: minmax(0, 1fr) min(62%, 760px);
    align-items: center;
    column-gap: clamp(16px, 2vw, 28px);
    padding: clamp(22px, 3.4vh, 36px) 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .4) .75px, transparent .8px);
    background-size: 5px 2px;
    background-repeat: repeat-x;
    background-position: left top;
  }

  .after__card:first-child { background-image: none; }

  .after__num { grid-column: 1; }

  .after__body {
    grid-column: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
  }

  .after__num {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #fff;
    font: 500 13px/1 var(--font);
    letter-spacing: .02em;
    transform-origin: center;
  }

  /* Наведение на строку: номер переворачивается, точка вспыхивает,
     картинка чуть приближается. */
  .after__card:hover .after__num { animation: num-flip .62s cubic-bezier(.32, .72, .3, 1); }

  @keyframes num-flip {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(360deg); }
  }

  .after__card:hover .after__num::before { transform: scale(1.6); }

  .after__num::before { transition: transform .32s cubic-bezier(.34, 1.5, .5, 1); }


  .after__card h3 { transition: color .22s ease; }
  .after__card:hover h3 { color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    .after__card:hover .after__num { animation: none; }
    .after__card:hover .after__shot img { transform: none; }
  }

  .after__num::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
  }

  .after__shot { display: block; }

  /* Стеклянный объект вместо скриншота. */
  .after__shot img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.32, .72, .3, 1);
  }

  .after__card:hover .after__shot img { transform: scale(1.06) rotate(-2deg); }

  .after__card h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font: 500 clamp(20px, 2vw, 28px)/1.2 var(--font);
    letter-spacing: -.025em;
  }

  .after__card p { margin: 0; max-width: 46ch; color: var(--soft); font-size: 14px; line-height: 1.5; }

  @media (max-width: 860px) {
    /* Номер узкой колонкой слева, дальше иконка и текст в одну строку —
       иначе иконка уезжала вправо и отрывалась от своей карточки. */
    .after__card { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; }
    .after__body { grid-column: 2; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
    .after__shot img { width: 56px; height: 56px; border-radius: 14px; }
    .after__card p { max-width: none; }
  }

  @media (max-width: 520px) {
    /* На телефоне иконка над текстом: в строку они уже не помещаются. */
    .after__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  }

  /* ── кейс ───────────────────────────────────────────────── */

  .case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    padding: clamp(28px, 3.4vw, 48px) 0;
    border: 0;
    background: none;
  }

  .case__story h3 {
    max-width: 20ch;
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.1;
    letter-spacing: -.03em;
  }

  .case__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--accent);
    font: 500 16px/1 var(--font);
    text-decoration: none;
    transition: gap .18s ease;
  }

  .case__more:hover { gap: 12px; }

  .case__more svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .case blockquote {
    max-width: 52ch;
    margin: clamp(24px, 4vh, 40px) 0 0;
    color: var(--soft);
    font-size: 16px;
    line-height: 1.5;
  }

  .case__author { display: flex; align-items: center; gap: 16px; margin: clamp(20px, 3vh, 32px) 0 0; }
  .case__author img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; }
  .case__author figcaption { display: flex; flex-direction: column; gap: 6px; }
  .case__name { color: var(--ink); font: 500 15px/1 var(--font); }
  .case__role { color: var(--faint); font: 400 14px/1 var(--font); }

  /* Цифры как в референсе: число в плашке, под ним подпись строкой. */


  /* Подпись-метка моноширинным в скобках, как в референсе. */
  /* Подписи-метки в скобках: над описанием и над цифрами — одна пара. */
  /* #case — чтобы перебить общее .sec__head p (16px) у верхней подписи. */
  #case .case__tag,
  #case .case__stats-label {
    margin: 26px 0 0;
    color: var(--soft);
    font: 600 11px/1 var(--font);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .case__lead {
    margin: 16px 0 0;
    max-width: 44ch;
    color: var(--ink);
    font: 500 clamp(16px, 1.4vw, 18px)/1.45 var(--font);
    letter-spacing: -.01em;
  }

  /* Визуал кейса: фирменный синий кадр с подписью клиента. */
  .case__visual {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
    /* картинка — ссылка на сайт клиента, курсор над ней вырастает в кружок */
    cursor: none;
  }

  .case__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .case__visual figcaption {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font: 500 clamp(38px, 5vw, 68px)/1 var(--font);
    letter-spacing: -.04em;
  }

  @media (min-width: 901px) {
    /* заголовок встаёт над картинкой слева, текст — над цифрами справа */
    #case .sec__head {
      display: grid;
      /* та же линия, по которой идут карточки «Результата», FAQ и цитата */
      grid-template-columns: minmax(0, 1fr) min(62%, 760px);
      column-gap: 0;
      align-items: start;
    }

    #case .sec__mark { grid-column: 1; grid-row: 1; margin: 0; }
    #case .sec__head h2 { grid-column: 1; grid-row: 2; margin: 14px 0 0; padding-right: clamp(16px, 2vw, 28px); }
    /* верхняя подпись — на одной линии с меткой «Кейс» (15px против 11px:
       ужимаем margin-top, чтобы совпали базовые линии, а не верхние края) */
    #case .case__tag { grid-column: 2; grid-row: 1; margin: 5px 0 0; align-self: start; }
    #case .case__lead { grid-column: 2; grid-row: 2; }

    /* визуал слева, цифры справа */
    .case { grid-template-columns: minmax(0, 1fr) min(62%, 760px); gap: 0; }
    /* картинка в левой колонке, отступ от линии контента как у номеров карточек */
    .case__visual { max-width: 460px; margin-right: clamp(16px, 2vw, 28px); }
    .case__visual { grid-column: 1; grid-row: 1; }
    .case__stats { grid-column: 2; grid-row: 1; align-self: center; }
  }

  .case__stats { margin: 0; padding: 0; border: 0; background: none; }

  #case .case__stats-label { margin: 0 0 26px; }
  .case__stats > div + div { margin-top: clamp(26px, 3vh, 40px); }

  .case__stats dt {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: 500 clamp(20px, 2vw, 26px)/1 var(--font);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }

  .case__stats dt span { font-size: .7em; }

  .case__stats dd {
    margin: 12px 0 0;
    max-width: 32ch;
    color: var(--ink);
    font: 500 clamp(16px, 1.5vw, 19px)/1.35 var(--font);
    letter-spacing: -.02em;
  }

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


  /* Ссылка на все материалы стоит справа, напротив метки раздела. */
  #blog .sec__head,
  #case .sec__head { position: relative; }

  #blog .sec__head .flow__cta,
  #case .sec__head .flow__cta {
    position: absolute;
    /* по базовой линии метки: строка метки 15px, ссылки — 14px */
    top: 2px;
    right: 0;
    margin: 0;
    font-size: 14px;
  }

  @media (max-width: 860px) {
    #blog .sec__head .flow__cta,
    #case .sec__head .flow__cta { position: static; margin-top: 18px; }
  }

  /* ── блог ───────────────────────────────────────────────── */

  .posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
  }

  .post { display: block; color: inherit; text-decoration: none; }

  /* Метка автора поверх обложки — как в ленте блога на главной. */
  .post__frame { position: relative; }

  .post__source {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: rgba(14, 16, 20, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: calc(100% - 24px);
    color: #fff;
    font: 500 13px/1 var(--font);
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  /* без flex-basis картинка растягивалась на всю плашку овалом */
  .post__source img {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    object-fit: cover;
  }



  .post__frame { display: block; }

  .post__frame > img {
    display: block;
    width: 100%;
    aspect-ratio: 441 / 305;
    border-radius: 18px;
    /* иллюстрации на прозрачном — светлая плашка, как в карточках блога */
    background: #F2F2F0;
    object-fit: contain;
    transition: transform .25s cubic-bezier(.32, .72, .3, 1);
  }

  .post:hover .post__frame > img { transform: translateY(-3px); }

  .post h3 {
    margin: 16px 0 0;
    color: var(--ink);
    font: 500 17px/1.3 var(--font);
    letter-spacing: -.01em;
  }

  .post time { display: block; margin-top: 10px; color: var(--faint); font-size: 14px; }

  /* ── вопросы ────────────────────────────────────────────── */

  .faq { max-width: 860px; }

  /* Вопросы стоят в правой колонке — на той же вертикали, что цитата. */
  @media (min-width: 861px) {
    .faq { max-width: none; margin-left: auto; width: min(62%, 760px); }

    /* заголовок встаёт вровень с меткой, как в блоке результата */
    #faq .sec__head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) min(62%, 760px);
      align-items: start;
      gap: 0;
    }

    #faq .sec__mark { grid-column: 1; grid-row: 1; margin: 0; }
    #faq .sec__head h2 { grid-column: 2; grid-row: 1; margin: 14px 0 0; }
  }

  /* Линии — отдельными слоями: фон на самом блоке пересчитывался при
     раскрытии и точки дрожали. */
  .faq__item { position: relative; }

  .faq__item::before,
  .faq__item:last-child::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 2px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .4) .75px, transparent .8px);
    background-size: 5px 2px;
    background-repeat: repeat-x;
    pointer-events: none;
  }

  .faq__item::before { top: 0; }
  .faq__item:last-child::after { bottom: 0; }

  /* Вопрос: при наведении и в открытом виде — светлая плашка, текст
     темнеет и чуть сдвигается вправо. Справа кольцо, которое заливается. */
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 22px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: 500 18px/1.35 var(--font);
    letter-spacing: -.01em;
    text-align: left;
    cursor: pointer;
    transition: background .22s ease, color .22s ease;
  }

  .faq__q span {
    display: block;
    transition: transform .3s cubic-bezier(.2, .9, .25, 1);
  }

  .faq__q:hover,
  .faq__item.is-open .faq__q { background: #fff; color: #0B0C0E; }

  .faq__q:hover span,
  .faq__item.is-open .faq__q span { transform: translateX(16px); }

  /* кольцо: контур в покое, заливается изнутри при наведении и открытии */
  .faq__q i {
    flex: 0 0 auto;
    margin-right: 16px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
    transition: box-shadow .28s ease;
  }

  .faq__q:hover i,
  .faq__item.is-open .faq__q i { box-shadow: inset 0 0 0 5px currentColor; }

  @media (max-width: 640px) {
    .faq__q { padding: 18px 0; }
  }


  /* ответ раскрывается плавно */
  .faq__wrap {
    display: grid;
    grid-template-rows: 0fr;
    /* короче и резче на старте — раскрытие перестаёт ощущаться вязким */
    transition: grid-template-rows .28s cubic-bezier(.2, .9, .25, 1);
    will-change: grid-template-rows;
  }

  .faq__wrap > div { overflow: hidden; min-height: 0; }

  .faq__item.is-open .faq__wrap { grid-template-rows: 1fr; }
  .faq__item.is-open .faq__wrap p { opacity: 1; transform: none; transition-delay: .06s; }

  .faq__wrap p {
    margin: 22px 0 26px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2, .9, .25, 1);
    max-width: 68ch;
    color: var(--soft);
    font-size: 16px;
    line-height: 1.55;
  }

  /* ── футер ──────────────────────────────────────────────── */

  /* Футер — отдельный экран: контакты сверху, свечение внизу. */
  .foot {
    position: relative;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(64px, 11vh, 130px);
    overflow: hidden;
  }

  /* Сетка футера по референсу: слева метка и крупная навигация с
     разделителями, справа два столбца с подписями в скобках. */
  /* Навигация слева; «(реквизиты)» начинаются на той же правой линии, что
     вопросы FAQ и заголовок выше; «(связь)» — во второй половине. */
  /* Навигация — у края экрана; реквизиты и связь — в .wrap, на той же
     правой линии, что вопросы FAQ и заголовок выше. */
  /* Навигация слева у края; реквизиты и связь — на линии FAQ.
     Та же формула, что у шапки FAQ: 1fr | min(62%, 760px).
     Обе части — в одном гриде, поэтому высоту задаёт та, что выше. */
  /* Низ футера — один грид на всю ширину экрана.
     Колонка 1: край экрана (навигация, реквизиты).
     Колонка 2: линия заголовка FAQ (контакты, адрес, «наверх» у правого края).
     Линия FAQ = левый край .wrap + 38% его ширины: считаем от экрана. */
  .foot__body {
    --pad: clamp(20px, 3.5vw, 50px);
    --wrap: min(1440px, 100vw);
    --inner: calc(var(--wrap) - 2 * var(--pad));
    --line: calc((100vw - var(--wrap)) / 2 + var(--pad) + var(--inner) - min(760px, var(--inner) * .62));
    display: grid;
    grid-template-columns: var(--line) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
    flex: 1 1 auto;
    padding: 0 var(--pad) 12px;
  }

  .foot__navcol { grid-column: 1; grid-row: 1; padding-right: 24px; }
  .foot__col    { grid-column: 2; grid-row: 1; margin-left: calc(-1 * var(--pad)); }

  .foot__legal  { grid-column: 1; grid-row: 3; align-self: end; margin: 0; }
  .foot__addr   { grid-column: 2; grid-row: 3; align-self: end; margin: 0 0 0 calc(-1 * var(--pad)); }
  .foot__up     { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; }

  .foot__legal, .foot__addr, .foot__up {
    color: var(--ink);
    font: 500 14px/1.6 var(--font);
    letter-spacing: -.01em;
  }

  .foot__up { padding: 0; border: 0; background: none; cursor: pointer; }

  /* Планшет: навигация и контакты рядом, реквизиты строкой под ними. */
  @media (min-width: 601px) and (max-width: 900px) {
    .foot__body {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto;
      column-gap: clamp(24px, 4vw, 48px);
      row-gap: 40px;
    }
    .foot__navcol { grid-column: 1; grid-row: 1; padding-right: 0; }
    .foot__col    { grid-column: 2; grid-row: 1; margin-left: 0; }
    .foot__legal  { grid-column: 1; grid-row: 2; align-self: start; }
    .foot__addr   { grid-column: 2; grid-row: 2; align-self: start; margin-left: 0; }
    .foot__up     { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; }
  }

  @media (max-width: 600px) {
    .foot__body { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 32px; }
    .foot__navcol, .foot__col, .foot__legal, .foot__addr, .foot__up {
      grid-column: 1; grid-row: auto; margin: 0; padding: 0; justify-self: start;
    }
    .foot__col { margin-top: 8px; }
    .foot__legal { margin-top: 24px; }
  }

  .foot__navcol .sec__mark { margin: 0 0 clamp(20px, 3.5vh, 36px); }

  .foot__nav { display: flex; flex-direction: column; }

  .foot__nav a {
    padding: 6px 0;
    color: var(--ink);
    /* тот же кегль, что у «Telegram ↗» в соседнем столбце */
    font: 500 clamp(18px, 1.6vw, 22px)/1.2 var(--font);
    letter-spacing: -.02em;
    text-decoration: none;
    transition: opacity .18s ease;
  }


  .foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Как «(АВТОМАТИЗАЦИЯ ПРОЦЕССОВ)» в кейсе, только серым. */
  .foot__label {
    margin: 0 0 clamp(20px, 3.5vh, 36px);
    color: var(--faint);
    font: 600 11px/1 var(--font);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .foot__out {
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    color: var(--ink);
    /* line-height повыше и одинаковый: прокрутка букв берёт 1lh */
    font: 500 15px/1.6 var(--font);
    letter-spacing: -.01em;
    text-decoration: none;
    transition: opacity .18s ease;
  }


  .foot__out svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Под сеткой — заголовок и ссылка с подчёркиванием. */
  .foot__top {
    position: relative;
    padding: clamp(36px, 6vh, 64px) 0 clamp(48px, 8vh, 96px);
  }

  /* Секция «Оставить заявку» — последняя перед футером. Метка слева
     у края, заголовок на той же правой линии, что вопросы FAQ. */
  .cta { position: relative; }
  .cta__mark { margin: 0 0 20px; }

  @media (min-width: 901px) {
    /* секция живёт внутри #main.wrap: метку выводим на край экрана,
       заголовок — на линию FAQ той же формулой, что у шапки FAQ */
    .cta__mark {
      position: absolute;
      top: calc(clamp(64px, 11vh, 130px) + 14px);
      left: calc(-1 * max(0px, (100vw - 1440px) / 2));
      margin: 0;
    }
    .cta__head { width: min(62%, 760px); margin-left: auto; }
  }

  .cta__head h2 {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    /* чуть мельче, чем в шапках секций — иначе «задачу —» не влезает в колонку */
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .foot__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(24px, 4vh, 40px);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font: 500 14px/1 var(--font);
    letter-spacing: .02em;
    text-decoration: none;
    transition: gap .18s ease;
  }

  .foot__go:hover { gap: 12px; }

  .foot__go svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  /* Шапка и бегущая строка уезжают вверх, когда в экран входит футер
     (класс ставит js). */
  .nav-bar,
  .topbar { transition: transform .45s cubic-bezier(.32, .72, .3, 1); }
  .nav-bar.is-away,
  .topbar.is-away { transform: translateY(-140%); pointer-events: none; }

  @media (prefers-reduced-motion: reduce) {
    .nav-bar, .topbar { transition: none; }
  }

  /* Строка перед волной: реквизиты, «наверх», копирайт — три колонки,
     текст мелкий и белый, как в референсе. */
  .foot__edge { padding-left: clamp(20px, 3.5vw, 50px); padding-right: clamp(20px, 3.5vw, 50px); }

  /* ── полоса внизу футера: тёмная, по ней плывёт голубая волна
        растровыми точками (как полутон в печати). Считается на canvas. ─ */

  .foot__stripe {
    position: relative;
    height: 30vh;
    min-height: 220px;
    overflow: hidden;
    background: var(--bg);
  }

  .foot__stripe-wave {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .foot__stripe-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* только вертикаль — боковые отступы даёт .wrap, как везде */
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .foot__stripe-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* та же инверсия, что у шапки: поверх голубых точек лого перекрашивается */
    color: #fff;
    mix-blend-mode: difference;
    transition: opacity .18s ease;
    font: 500 16px/1 var(--font);
    text-decoration: none;
  }

  .foot__stripe-mark:hover { opacity: .7; }
  .foot__stripe-mark img { width: 22px; height: 22px; }

  /* как «Наверх ↑» строкой выше: текст со стрелкой, без подчёркивания */
  .foot__stripe-go {
    margin: 0;
    color: #fff;
    /* line-height повыше — у прокрутки букв высота 1lh, иначе режет «у», «д» */
    font: 500 14px/1.6 var(--font);
    letter-spacing: -.01em;
    text-decoration: none;
    mix-blend-mode: difference;
  }

  @media (max-width: 640px) {
    .foot__stripe-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  }

  /* Самая нижняя полоска: копирайт, кто сделал, «наверх». Тонкая линия
     сверху отделяет её от волны. */
  .foot__bar {
    position: relative;
    z-index: 1;
    background: var(--bg);
  }

  /* Та же высота, что у бегущей строки сверху (--topbar), одной строкой. */
  .foot__bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--topbar, 34px);
    white-space: nowrap;
  }

  /* Тот же текст, что в строке над волной: белый, 14px, без разрядки. */
  .foot__bar,
  .foot__bar a {
    color: var(--ink);
    font: 500 13px/1 var(--font);
    letter-spacing: -.01em;
    text-decoration: none;
  }

  .foot__bar-links { display: flex; gap: 24px; }
  .foot__bar a { transition: opacity .18s ease; }

  @media (max-width: 640px) {
    .foot__bar-row { flex-direction: column; align-items: flex-start; gap: 6px; height: auto; padding: 10px 0; white-space: normal; }
  }

  /* ── cookie: тёмная плашка с блюром внизу по центру ─────────────── */

  .cookie {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px clamp(20px, 3.5vw, 50px);
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(11, 12, 14, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: opacity .28s ease, transform .32s cubic-bezier(.32, .72, .3, 1);
  }

  .cookie[hidden] { display: none; }
  .cookie.is-out { opacity: 0; transform: translateY(12px); pointer-events: none; }

  .cookie__icon { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
  .cookie__icon circle { fill: var(--ink); stroke: none; }

  .cookie__text { flex: 1 1 auto; margin: 0; color: var(--ink); font: 400 14px/1.4 var(--font); }
  .cookie__text a { color: var(--ink); text-underline-offset: 3px; }

  .cookie__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

  .cookie__btn {
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: var(--ink);
    font: 500 14px/1 var(--font);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
  }

  .cookie__btn:hover { background: rgba(255, 255, 255, .2); }

  .cookie__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 500 14px/1 var(--font);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: text-decoration-color .18s ease;
  }

  .cookie__link:hover { text-decoration-color: var(--ink); }

  .cookie__x {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .7;
    transition: opacity .18s ease;
  }

  .cookie__x:hover { opacity: 1; }
  .cookie__x svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }

  @media (max-width: 760px) {
    .cookie { flex-wrap: wrap; padding: 16px; }
    .cookie__text { flex-basis: 100%; }
    .cookie__actions { flex-basis: 100%; justify-content: flex-end; }
  }

  /* ── выдвижная панель заявки: чёрный прямоугольник выезжает справа ── */

  .drawer {
    position: fixed;
    z-index: 80;
    inset: 0;
    background: rgba(6, 7, 9, 0);
    transition: background .32s ease;
  }

  .drawer[hidden] { display: none; }
  .drawer.is-open { background: rgba(6, 7, 9, .55); }

  .drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(50vw, 100%);
    min-width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 4vh, 44px) clamp(24px, 3vw, 40px);
    overflow-y: auto;
    background: #0B0C0E;
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.32, .72, .3, 1);
  }

  .drawer.is-open .drawer__panel { transform: none; }

  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .drawer__label,
  .drawer__close {
    margin: 0;
    color: var(--faint);
    font: 600 12px/1 var(--font);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .drawer__close {
    padding: 0;
    border: 0;
    background: none;
    color: #DEDEE2;
    font: 500 14px/1 var(--font);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color .18s ease;
  }

  .drawer__close:hover { color: #fff; }
  .drawer__close:hover .nav-roll b { transform: translateY(-100%); }

  .drawer__form { margin-top: clamp(32px, 6vh, 72px); }

  /* Вопросы как разговор, поле — одна тонкая линия снизу. */
  .drawer__q {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ink);
    font: 500 17px/1.3 var(--font);
    letter-spacing: -.01em;
  }

  .drawer__q + .drawer__q { margin-top: clamp(32px, 5vh, 48px); }

  .drawer__q i { color: #FF3B30; font-style: normal; margin-left: 2px; }

  .drawer__q input[type="text"],
  .drawer__q textarea {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 14px 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    color: var(--ink);
    background: none;
    font: 400 clamp(18px, 1.5vw, 22px)/1.3 var(--font);
    letter-spacing: -.01em;
    resize: vertical;
    transition: border-color .18s ease;
  }

  .drawer__q input::placeholder,
  .drawer__q textarea::placeholder { color: rgba(255, 255, 255, .28); }

  .drawer__q input:focus-visible,
  .drawer__q textarea:focus-visible { outline: none; border-bottom-color: var(--ink); }

  /* Ошибка: красная линия потолще и красный текст — тонкую полоску
     на тёмном фоне почти не видно. */
  .drawer__q.is-error input {
    border-bottom-color: #FF6B60;
    border-bottom-width: 2px;
    color: #FF6B60;
  }

  /* Варианты: квадрат и моноширинная подпись капсом. */
  .drawer__choice legend {
    padding: 0;
    margin-bottom: 20px;
    font: inherit;
  }

  .drawer__choice legend span {
    display: block;
    margin-top: 6px;
    color: var(--faint);
    font-weight: 400;
  }

  .drawer__choice label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    cursor: pointer;
  }

  .drawer__choice input {
    appearance: none;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }

  .drawer__choice input:hover { border-color: rgba(255, 255, 255, .6); }
  .drawer__choice input:checked { background: var(--ink); border-color: var(--ink); }
  .drawer__choice input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

  .drawer__choice label span {
    color: var(--ink);
    font: 500 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* Кнопка всегда внизу панели: прилипает при прокрутке, фон размыт. */
  .drawer__foot {
    position: sticky;
    bottom: calc(-1 * clamp(24px, 4vh, 44px));
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: clamp(32px, 6vh, 64px) calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 4vh, 44px));
    padding: 14px clamp(24px, 3vw, 40px) 16px;
    background: rgba(11, 12, 14, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .drawer__terms { margin: 0; color: var(--faint); font-size: 13px; line-height: 1.4; white-space: nowrap; }
  .drawer__terms a { color: var(--soft); }

  /* Кнопка — та же, что на первом экране (.hero__cta): заливка от точки
     касания, буквы лесенкой, кольцо-точка. Здесь только сброс <button>. */
  .drawer__submit {
    flex: 0 0 auto;
    margin-top: 0;
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .drawer__done { margin-top: clamp(40px, 8vh, 96px); }

  /* Под «спасибо» — прямой контакт: если ждать не хочется. */
  .done__direct {
    margin-top: clamp(40px, 7vh, 72px);
    padding-top: clamp(28px, 5vh, 44px);
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .done__who { display: flex; align-items: center; gap: 14px; margin: 0; }
  .done__who img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; }
  .done__who figcaption { display: flex; flex-direction: column; gap: 4px; }
  .drawer__done .done__name { color: #fff; font: 500 16px/1 var(--font); }
  .drawer__done .done__role { color: var(--faint); font: 400 14px/1 var(--font); }

  .done__lead { margin: 20px 0 0; color: var(--soft); font: 400 15px/1.5 var(--font); }
  .done__links { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .drawer__done b { display: block; color: var(--ink); font: 500 24px/1.2 var(--font); }
  .drawer__done p { margin: 12px 0 0; color: var(--soft); font-size: 16px; line-height: 1.5; }

  @media (max-width: 640px) {
    .drawer__foot { flex-direction: column; align-items: stretch; }
    .drawer__submit { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer, .drawer__panel { transition: none; }
    .drawer__panel { transform: none; }
  }

  /* ── мобильное меню: та же панель, что у заявки ───────────────── */

  .menu .drawer__panel { width: min(420px, 100%); min-width: 0; }

  .menu__nav { display: flex; flex-direction: column; margin-top: clamp(28px, 5vh, 48px); }

  .menu__nav a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: var(--ink);
    font: 500 clamp(24px, 6vw, 32px)/1.1 var(--font);
    letter-spacing: -.03em;
    text-decoration: none;
  }

  .menu__foot { margin-top: auto; padding-top: clamp(28px, 5vh, 48px); }
  .menu__cta { margin-top: 0; }

  .menu__contacts { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .menu__contacts a { color: var(--soft); font: 500 15px/1.4 var(--font); text-decoration: none; }

  /* ── мобильные правки по блокам ─────────────────────────────────── */

  @media (max-width: 860px) {
    /* фото основателя в hero — меньше */
    .hero__photo { width: 96px; padding: 8px; border-radius: 16px; }
    /* панель заявки — во всю ширину */
    .drawer__panel { width: 100%; min-width: 0; }
  }

  /* ── форма заявки ───────────────────────────────────────── */

  .dev-form { max-width: 620px; margin: 30px auto 0; text-align: left; }

  .dev-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  .dev-form label { display: block; color: var(--soft); font-size: 14px; }
  .dev-form__task { margin-top: 12px; }

  .dev-form input,
  .dev-form textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: var(--panel);
    font: 400 16px/1.35 var(--font);
    resize: vertical;
  }

  .dev-form input::placeholder,
  .dev-form textarea::placeholder { color: var(--faint); }

  .dev-form input:focus-visible,
  .dev-form textarea:focus-visible { outline: none; border-color: var(--accent); }

  .dev-form .btn { width: 100%; margin-top: 16px; border: 0; cursor: pointer; font-family: inherit; }

  .dev-form__terms { margin: 12px 0 0; color: var(--faint); font-size: 13px; text-align: center; }
  .dev-form__terms a { color: var(--soft); }

  .dev-form__done { padding: 30px 0 0; }
  .dev-form__done b { display: block; color: var(--ink); font-size: 20px; }
  .dev-form__done p { margin: 10px 0 0; }

  /* ── проявление блоков ──────────────────────────────────── */

  /* Прячем только при живом скрипте: сбой JS не должен оставить пустую страницу. */
  .has-reveal [data-reveal] { opacity: 0; transform: translateY(22px); }

  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.32, .72, .3, 1), transform .6s cubic-bezier(.32, .72, .3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .has-reveal [data-reveal] { opacity: 1; transform: none; }
  }

  /* ловушка для ботов: человеку не видна, бот заполняет — заявка отбрасывается */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }