/* ============================================================
     Система снята с живого tochka.com (Chrome MCP, замеры
     вычисленных стилей) и переложена на нашу гамму:

       контейнер 1280 / поля 48        радиус плиток 16, кнопок 12
       зазор между плитками 8          блок секции 32
       H1 72/80 w600 без трекинга      H2 60/68 w600
       H3 30/36 w600 ls -0.3px         текст 18px, описания w300
       шапка брендового цвета, 68px, всегда на месте
       первый экран ФИКСИРОВАН, контент едет поверх него листом
     ============================================================ */
  :root {
    --white: #ffffff;
    --canvas: #ffffff;
    --surface: #ffffff;

    /* акцент один на всю страницу */
    --blue: #2928DE;
    --blue-hi: #1e1db4;
    --peri: #7878EA;      /* светлый акцент: работает на тёмном, где индиго проваливается */
    --lav: #DFDFFA;       /* акцентная плитка */
    --lav-soft: #eeeefc;
    --wash: #f1f1fb;      /* тонированный блок секции */

    /* нейтрали одного холодного семейства */
    --ink: #222222;
    --muted: #74747f;
    --tile: #f4f4f4;      /* ровно как у Точки */
    --tile-2: #e8e8ee;
    --line: #e7e7ef;

    /* тёмные листы */
    --st-canvas: #343434;
    --st-surface: #3f3f3f;
    --st-line: #4e4e4e;
    --st-ink: #ffffff;
    --st-muted: #b3b3bd;

    /* шкала скруглений: у Точки 8 / 12 / 16, блок секции 32 */
    --r-sm: 8px;
    --r-btn: 12px;
    --r-md: 16px;
    --r-lg: 32px;

    --head-h: 68px;
    --font-display: 'Golos Text', system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: 'Golos Text', system-ui, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /* Точка не жмёт трекинг у крупных заголовков — они дышат */
  h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: normal; }
  p { text-wrap: pretty; margin: 0; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1376px; margin: 0 auto; padding: 0 48px; }
  @media (max-width: 700px) { .wrap { padding: 0 20px; } }
  .mono { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
  .tabular { font-variant-numeric: tabular-nums; }

  /* ===== Кнопки: радиус 12, как на боевой Точке ===== */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap; border: 0; cursor: pointer;
    border-radius: var(--r-btn); padding: 16px 28px;
    font: 400 18px 'Golos Text', sans-serif;
    transition: background-color 200ms cubic-bezier(0.35,0.1,0.35,0.9), color 200ms ease, transform 80ms ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  /* Неразрывная строка нужна широкому экрану: там подпись всегда влезает,
     а перенос выглядел бы случайным. На узком она превращала кнопку в
     распорку — «Пусть Милана мне перезвонит» это 327px в одну строку, и
     флекс-ряд с ней растягивал всю страницу вбок. Здесь переносим. */
  @media (max-width: 700px) {
    .btn { white-space: normal; text-align: center; }
  }
  .btn-primary { background: var(--blue); color: #fff; }
  .btn-primary:hover { background: var(--blue-hi); }
  .btn-ghost { background: var(--lav); color: var(--ink); }
  .btn-ghost:hover { background: #d2d2f7; }
  .hero .btn-primary { background: #fff; color: var(--blue); }
  .hero .btn-primary:hover { background: var(--lav); }
  .hero .btn-ghost { background: rgba(255,255,255,0.16); color: #fff; }
  .hero .btn-ghost:hover { background: rgba(255,255,255,0.28); }
  .studio .btn-ghost { background: rgba(255,255,255,0.12); color: #fff; }
  .studio .btn-ghost:hover { background: rgba(255,255,255,0.2); }
  .studio .btn-primary, .final .btn-primary { background: var(--blue); color: #fff; }
  .studio .btn-primary:hover { background: #3d3cf0; }

  /* ===== Шапка: брендового цвета и всегда на месте ===== */
  header.site {
    position: sticky; top: 0; z-index: 40;
    background: var(--blue); color: #fff;
  }
  header.site .row { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: var(--head-h); }
  /* Логотип — контуры New Zelek. Гарнитура несвободная, поэтому на страницу
     уходит не шрифт, а один <symbol> со знаком: буквы красятся через color,
     точка — через --brand-dot (в тень <use> обычный селектор не достаёт). */
  .brand { display: inline-block; color: #fff; line-height: 1; --brand-dot: #fff; }
  .brand-mark { display: block; height: 18px; width: auto; }
  .brand .slogan { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--lav); margin-top: 6px; }
  footer.site .brand .slogan { color: var(--blue); }
  @media (max-width: 560px) { .brand-mark { height: 15px; } }
  nav.main { display: flex; gap: 24px; }
  nav.main a {
    position: relative; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.86);
    padding: 4px 0; transition: color 160ms ease;
  }
  nav.main a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: #fff; border-radius: 1px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 240ms cubic-bezier(0.35,0.1,0.35,0.9);
  }
  nav.main a:hover { color: #fff; }
  nav.main a:hover::after { transform: scaleX(1); }
  .nav-cta { display: flex; align-items: center; gap: 14px; }
  .nav-cta .login { font-size: 16px; color: rgba(255,255,255,0.86); }
  .nav-cta .login:hover { color: #fff; }
  .nav-cta .btn { padding: 10px 20px; font-size: 16px; background: #fff; color: var(--blue); }
  .nav-cta .btn:hover { background: var(--lav); }
  section[id], [id="calc"], [id="tracks"], [id="lead"] { scroll-margin-top: calc(var(--head-h) + 16px); }

  /* Бургер */
  .burger {
    display: none; width: 42px; height: 42px; flex: none;
    border: 0; background: transparent; cursor: pointer; color: #fff;
    position: relative; border-radius: var(--r-sm); padding: 0;
  }
  .burger i {
    position: absolute; left: 11px; right: 11px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease;
  }
  .burger i:nth-child(1) { top: 15px; }
  .burger i:nth-child(2) { top: 20.5px; }
  .burger i:nth-child(3) { top: 26px; }
  .burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* Мобильная панель */
  .mnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; color: var(--ink);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    max-height: calc(100dvh - var(--head-h)); overflow-y: auto;
    padding: 22px 0 28px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 260ms;
  }
  .mnav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mnav .grp { color: var(--muted); margin: 0 0 10px; }
  .mnav .grp + .mlist { margin-bottom: 24px; }
  .mlist { list-style: none; margin: 0; padding: 0; display: grid; }
  .mlist li + li { border-top: 1px solid var(--line); }
  .mlist a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 0; font-size: 18px; font-weight: 500; color: var(--ink);
    transition: color 140ms ease;
  }
  .mlist a:hover { color: var(--blue); }
  .mlist a .ext { font-size: 13px; color: var(--blue); }
  .mfoot { display: grid; gap: 16px; justify-items: start; padding-top: 8px; }
  .mfoot .btn { width: 100%; }
  .mfoot .mlogin { font-size: 16px; color: var(--muted); }

  /* Порог бургера 1200, а не 1100: на 1110 шесть разделов с выпадашками
     переставали помещаться и «Для агентов» вместе с логотипом ломались
     на две строки. Замерено, не на глаз: при 1200 все пункты по 32px
     в одну строку, при 1110 — по две. */
  @media (max-width: 1200px) {
    nav.main, .nav-cta .login { display: none; }
    .burger { display: block; }
  }
  @media (min-width: 1201px) { .mnav { display: none; } }
  @media (max-width: 540px) { .nav-cta .btn { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .mnav, .burger i { transition-duration: 0.01ms !important; }
  }

  /* ============================================================
     Главный приём Точки: первый экран зафиксирован, а весь
     остальной контент едет поверх него белым листом.
     На узких экранах выключено: fixed плюс схлопывающаяся
     адресная строка на телефонах ведут себя непредсказуемо.
     ============================================================ */
  .first-screen { position: relative; background: var(--blue); }
  .content-sheet { position: relative; background: #fff; }
  @media (min-width: 1024px) {
    /* Ровно один экран: зафиксированное нельзя доскроллить, поэтому всё,
       что должно быть видно, обязано поместиться в высоту окна. */
    .first-screen {
      position: fixed; top: 0; left: 0; right: 0; z-index: 0;
      height: 100vh; min-height: 620px; display: flex;
    }
    .content-sheet { z-index: 1; }
    .hero { flex: 1; display: flex; flex-direction: column; padding-top: calc(var(--head-h) + 20px); }
    .hero > .wrap { flex: 1; display: flex; align-items: center; }
    .hero .grid { width: 100%; }
    /* полоса с фигурами прижата к нижнему краю экрана и ужимается на низких окнах */
    .hero-ill { margin-top: 0; height: clamp(120px, 20vh, 210px); }
  }

  /* ===== Герой ===== */
  .hero { position: relative; overflow: hidden; color: #fff; padding: 36px 0 0; }
  .hero > .wrap { position: relative; z-index: 1; }
  .hero .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 52px; align-items: center; }
  @media (max-width: 1023px) { .hero .grid { grid-template-columns: 1fr; } }
  .hero h1 {
    font-size: clamp(32px, 4.1vw, 58px);
    font-weight: 600; line-height: 1.1; letter-spacing: normal;
    max-width: 22ch;
  }
  .hero h1 .warm { color: var(--lav); }
  .hero .sub { margin-top: 22px; max-width: 46ch; font-size: 19px; font-weight: 300; color: rgba(255,255,255,0.86); line-height: 1.5; }
  .hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .hero .proof { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 20px 40px; }
  .hero .proof div b { display: block; font-size: 28px; font-weight: 600; }
  .hero .proof div span { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.7); }
  .skb {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 12px; margin-bottom: 24px; border-radius: 999px;
    background: #fff;
    font-size: 14px; font-weight: 500; color: var(--ink);
  }
  .skb img { height: 18px; width: auto; display: block; }

  /* Рисованная полоса по нижнему краю первого экрана */
  .hero-ill { position: relative; z-index: 1; margin-top: 40px; height: 200px; padding: 0 48px 22px; }
  .hero-ill img { position: absolute; bottom: 22px; left: 48px; right: 48px; width: auto; height: calc(100% - 22px); object-fit: contain; object-position: left bottom; display: block; }
  @media (max-width: 760px) { .hero-ill { height: 132px; margin-top: 24px; padding: 0 20px 14px; } .hero-ill img { left: 20px; right: 20px; bottom: 14px; height: calc(100% - 14px); } }

  /* ===== Стек записей: теперь живёт в герое ===== */
  .hero-tracks { position: relative; width: 100%; }
  .stack {
    position: relative; height: 250px;
    touch-action: pan-y;
    perspective: 1100px; perspective-origin: center 60%;
    outline: none;
  }
  .stack:focus-visible { outline: 2px solid #fff; outline-offset: 8px; border-radius: var(--r-md); }
  .stack .track {
    position: absolute; top: 50%; left: 50%; width: min(560px, 100%);
    margin: 0; will-change: transform, opacity, filter;
  }
  .stack-ctl { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 22px; }
  .stack-nav {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    border: 0; background: rgba(255, 255, 255, 0.16);
    color: #fff; display: grid; place-items: center; cursor: pointer;
    transition: background-color 160ms ease, opacity 160ms ease;
  }
  .stack-nav:hover { background: rgba(255,255,255,0.3); }
  .stack-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .stack-nav:disabled { opacity: 0.28; cursor: default; }
  .stack-dots { display: flex; gap: 16px; }
  .dot {
    position: relative;
    width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,0.38); transition: background-color 180ms ease, transform 180ms ease;
  }
  /* Точка размером 8px — это про глаз, а не про палец: попасть в неё
     на телефоне нельзя. Рисуем прежнюю точку, но ловим нажатие областью
     24×44 (минимум WCAG 2.2 по ширине). Зазор 16px держит области
     соседних точек непересекающимися — иначе выигрывала бы последняя. */
  .dot::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 24px; height: 44px; transform: translate(-50%, -50%);
  }
  .dot:hover { background: rgba(255,255,255,0.6); }
  .dot.cur { background: #fff; transform: scale(1.35); }
  .dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .stack-note { margin-top: 16px; text-align: center; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.62); }

  .track {
    text-align: left; cursor: pointer; border: 0;
    background: #fff; color: var(--ink);
    border-radius: var(--r-md); padding: 22px 24px;
    font-family: inherit; transition: background-color 160ms ease;
    display: flex; align-items: center; gap: 20px;
  }
  .track:hover { background: var(--lav-soft); }
  .track:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .t-play {
    flex: none; width: 48px; height: 48px; border-radius: 50%; position: relative;
    background: var(--blue); color: #fff; display: grid; place-items: center;
    transition: background-color 160ms ease;
  }
  .t-play .ic-pause { display: none; }
  .track.on .t-play { background: var(--ink); }
  .track.on .t-play .ic-play { display: none; }
  .track.on .t-play .ic-pause { display: block; }
  .t-info { flex: 0 0 158px; display: grid; gap: 5px; min-width: 0; }
  .t-info b { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--ink); }
  .t-info .t-sub { font-size: 14px; font-weight: 300; color: var(--muted); }
  .t-wave { position: relative; flex: 1; height: 48px; display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
  .t-wave i { display: block; flex: none; width: 3.5px; border-radius: 2px; background: #dcdce8; }
  .t-wave i.pl { background: var(--peri); }
  .track.on .t-wave i.pl { background: var(--blue); }
  @media (max-width: 640px) {
    .track { gap: 14px; padding: 16px 18px; }
    .t-info { flex-basis: 118px; }
    .t-info b { font-size: 17px; }
  }
  @media (max-width: 560px) {
    .track { flex-wrap: wrap; gap: 14px 16px; padding: 18px 18px 16px; }
    .t-info { flex: 1 1 auto; }
    .t-wave { flex: 1 0 100%; height: 34px; }
    .stack { height: 290px; }
  }

  /* ===== Общие секции ===== */
  section.s { padding: 80px 0; }
  section.s h2 { font-size: clamp(30px, 4.1vw, 56px); font-weight: 600; letter-spacing: normal; line-height: 1.13; }
  .lede { margin-top: 18px; font-size: 19px; font-weight: 300; color: var(--muted); max-width: 52ch; }

  /* Тонированные блоки: белого на странице было слишком много */
  .calc, .pricing {
    background: var(--wash);
    border-radius: var(--r-lg);
    margin: 0 12px;
  }
  .calc .cpanel, .pricing .plan, .pricing .bill-toggle { background: #fff; }
  /* «Как работает» и «Интеграции» оставлены белыми: после пересборки порядка
     тонированные блоки вставали по два подряд и ритм страницы пропадал. */
  .how .hstep { background: var(--tile); }
  .how .hstep:nth-child(2) { background: var(--lav); }
  .how .hstep .hv { background: #fff; }
  .integr .integr-tri { background: var(--tile); }
  .calc .field { background: var(--tile); }

  .side-ill { display: block; width: 100%; max-width: 330px; margin-top: 32px; }
  @media (max-width: 900px) { .side-ill { max-width: 240px; margin-top: 24px; } }

  /* ===== Калькулятор ===== */
  .calc .grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
  .calc .grid > * { min-width: 0; }
  @media (max-width: 900px) { .calc .grid { grid-template-columns: 1fr; } }
  .cpanel { position: relative; color: var(--ink); border-radius: var(--r-md); padding: 44px 46px 40px; }
  .cpanel > * { position: relative; z-index: 1; }
  .rings { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; }
  .ring { width: 168px; text-align: center; }
  .ring .rwrap { position: relative; width: 168px; height: 168px; margin: 0 auto; }
  .ring svg { width: 168px; height: 168px; transform: rotate(-90deg); display: block; }
  .ring .trail { fill: none; stroke: var(--tile-2); stroke-width: 10; }
  .ring .rfill { fill: none; stroke-width: 10; stroke-linecap: round; }
  .ring .f1 { stroke: var(--peri); }
  .ring .f2 { stroke: var(--blue); }
  .ring .rc {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-weight: 600; font-size: 22px; letter-spacing: -0.02em; padding: 16px;
    line-height: 1.15; text-align: center;
  }
  .ring .rlabel { margin-top: 12px; font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.4; }
  .cslider { margin-top: 34px; }
  .cslider .frow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .cslider label { font-size: 16px; font-weight: 400; }
  .cslider .val { font-size: 20px; font-weight: 600; }
  /* высота 44 — это область нажатия, а не толщина полосы: браузер рисует
     трек по центру. Раньше элемент был 16px, и попасть пальцем в ползунок
     получалось не с первого раза. */
  .cslider input[type="range"] { width: 100%; height: 44px; margin-top: 4px; accent-color: var(--blue); }
  .cslider input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
  .assume { margin-top: 20px; }
  .assume summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 300; color: var(--muted); transition: color 150ms ease; }
  .assume summary::-webkit-details-marker { display: none; }
  .assume summary:hover { color: var(--ink); }
  .assume summary b { color: var(--ink); font-weight: 600; }
  .assume .arow { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
  .assume .arow label { font-size: 14px; font-weight: 300; color: var(--muted); display: grid; gap: 7px; }
  .field { position: relative; display: inline-flex; align-items: center; width: 165px; border-radius: var(--r-sm); transition: box-shadow 160ms ease; }
  .field:focus-within { box-shadow: 0 0 0 2px var(--blue); }
  .field input {
    background: transparent; border: 0; outline: none; min-width: 0; width: 100%;
    color: var(--ink); padding: 12px 6px 12px 16px;
    font: 500 17px 'Golos Text', sans-serif;
    font-variant-numeric: tabular-nums;
    appearance: textfield; -moz-appearance: textfield;
  }
  .field input::-webkit-outer-spin-button,
  .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .field .unit { font-style: normal; font-size: 14px; color: var(--muted); padding-right: 14px; flex: none; }
  .cpanel .btn { margin-top: 28px; }
  .cpanel .fine { margin-top: 14px; font-size: 14px; font-weight: 300; color: var(--muted); }
  @media (max-width: 500px) {
    .cpanel { padding: 28px 22px 26px; }
    .ring, .ring .rwrap, .ring svg { width: 118px; }
    .ring .rwrap, .ring svg { height: 118px; }
    .rings { gap: 14px; flex-wrap: nowrap; }
    .ring .rc { font-size: 16px; padding: 10px; }
    .ring .rlabel { font-size: 12.5px; }
    .cslider label { font-size: 14px; }
  }
  /* Экраны от 320px: два кольца по 118 с полями панели в 22 давали 294px
     при доступных 256 — секция уезжала за край. Ужимаем кольца и поля. */
  @media (max-width: 360px) {
    .cpanel { padding: 24px 16px 24px; }
    .ring, .ring .rwrap, .ring svg { width: 100px; }
    .ring .rwrap, .ring svg { height: 100px; }
    .rings { gap: 10px; }
    .ring .rc { font-size: 14px; padding: 8px; }
  }

  /* ===== Как работает ===== */
  .how-steps { position: relative; margin-top: 48px; }
  .hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .hstep {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 0 40px; align-items: center;
    border-radius: var(--r-md); padding: 40px;
  }
  .htext { min-width: 0; }
  .htext .k { display: inline-block; color: var(--blue); font-weight: 500; font-size: 16px; }
  .htext h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; margin-top: 10px; max-width: 17ch; }
  .htext p { margin-top: 16px; font-size: 18px; font-weight: 300; color: var(--muted); max-width: 42ch; line-height: 1.5; }
  .hv-card { position: relative; min-width: 0; display: grid; gap: 16px; justify-items: center; }
  .hv { width: 100%; border-radius: var(--r-sm); padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; }
  .hv-quote { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--ink); max-width: 40ch; }
  .hv-quote .who { display: block; font-size: 14px; color: var(--blue); font-weight: 500; margin-bottom: 4px; }
  .hv-ill { display: block; width: 100%; max-width: 380px; max-height: 250px; object-fit: contain; }
  @media (max-width: 900px) {
    .hstep { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 22px 30px; }
    .hv-card { margin-top: 20px; }
  }

  /* ===== Два фронта ===== */
  .modes .lede { margin-top: 18px; max-width: 60ch; }
  .modes .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 44px; }
  @media (max-width: 900px) { .modes .grid { grid-template-columns: 1fr; } }
  .mode { border-radius: var(--r-md); background: var(--tile); padding: 40px; display: flex; flex-direction: column; }
  .mode.warm { background: var(--lav); }
  .mode-ill { display: block; width: 100%; max-width: 260px; height: 150px; object-fit: contain; object-position: left bottom; margin-bottom: 20px; }
  .mode .mono { color: var(--blue); font-weight: 500; font-size: 16px; }
  .mode h3 { margin-top: 10px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; }
  .mode > p { margin-top: 16px; font-size: 18px; font-weight: 300; color: var(--muted); max-width: 44ch; line-height: 1.5; }
  .mode ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
  .mode li { display: flex; gap: 12px; font-size: 17px; font-weight: 300; align-items: baseline; }
  .mode li::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--blue); flex: none; transform: translateY(-5px); }
  .mwho { margin-top: 26px; font-size: 16px; font-weight: 300; color: var(--muted); }
  .mwho b { font-weight: 500; color: var(--ink); }
  .mline { margin-top: 24px; padding: 22px 24px 20px; border-radius: var(--r-sm); background: #fff; display: grid; gap: 8px; }
  .mline .mono { color: var(--muted); font-weight: 300; font-size: 14px; }
  .mline p { font-size: 16px; font-weight: 300; line-height: 1.5; margin: 0; }
  .mline .who { display: block; font-size: 14px; font-weight: 500; color: var(--blue); margin-bottom: 3px; }
  .msum { margin-top: 8px; border-radius: var(--r-md); background: var(--tile); padding: 40px; }
  .msum > .mono { color: var(--blue); font-weight: 500; font-size: 16px; }
  .msum h3 { margin-top: 10px; font-size: 30px; font-weight: 600; letter-spacing: -0.3px; max-width: 26ch; }
  .msum .cols { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  @media (max-width: 760px) { .msum .cols { grid-template-columns: 1fr; gap: 22px; } .msum { padding: 28px 22px 30px; } }
  .msum .col b { display: block; font-size: 18px; font-weight: 500; }
  .msum .col p { margin-top: 8px; font-size: 17px; font-weight: 300; color: var(--muted); line-height: 1.5; }

  /* ===== Тёмный лист (разработка) ===== */
  .studio { position: relative; background: var(--st-canvas); color: var(--st-ink); }
  .studio.dev { border-radius: var(--r-lg); margin: 0 12px; }
  .studio .wrap { position: relative; z-index: 1; }
  .studio .lede { color: var(--st-muted); }
  .studio h2 { color: var(--st-ink); }

  /* ===== Интеграции ===== */
  .integr .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
  /* колонка гриба по умолчанию не уже своего содержимого, а внутри схемы
     жёсткие 260px + 48px полей — на 320px это распирало секцию за экран */
  .integr .grid > * { min-width: 0; }
  @media (max-width: 860px) { .integr .grid { grid-template-columns: 1fr; } }
  .integr-tri { display: flex; flex-direction: column; align-items: center; width: 100%; border-radius: var(--r-md); padding: 40px 24px 34px; }
  @media (max-width: 400px) { .integr-tri { padding: 32px 14px 28px; } }
  .ibrand { display: grid; justify-items: center; gap: 6px; }
  .iname { font-size: 28px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); }
  .icap { font-size: 14px; font-weight: 300; color: var(--muted); }
  .ilinks { width: 260px; max-width: 100%; height: 64px; margin: 12px 0 14px; display: block; }
  .ilinks path { stroke: #c9c9dd; stroke-width: 1.4; fill: none; }
  .ilinks circle { fill: var(--blue); }
  .irow { display: grid; grid-template-columns: 1fr 1fr; width: 260px; max-width: 100%; }
  @media (max-width: 640px) { .iname { font-size: 21px; } }
  .integr .fine { margin-top: 24px; font-size: 15px; font-weight: 300; color: var(--muted); text-align: center; }

  /* ===== Партнёры ===== */
  .pgrid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  @media (max-width: 900px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 620px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
  .pcard {
    background: var(--tile); border-radius: var(--r-md);
    min-height: 120px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; padding: 24px 18px;
  }
  .pcard img { max-height: 30px; max-width: 72%; width: auto; height: auto; }
  .pcard.skl { grid-column: span 2; background: var(--lav); }
  .pcard.skl img { max-height: 40px; max-width: 60%; }
  .pcap { font-size: 14px; font-weight: 300; color: var(--blue); }
  @media (max-width: 620px) { .pcard.skl { grid-column: span 2; } }

  /* ===== Тарифы ===== */
  .pricing .phead { text-align: center; }
  .pricing .phead .lede { margin-left: auto; margin-right: auto; }
  .bill-toggle { margin: 30px auto 0; width: max-content; display: flex; gap: 4px; padding: 5px; border-radius: 999px; }
  .bill-toggle .bt {
    display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
    border-radius: 999px; padding: 11px 22px; background: transparent;
    font: 400 17px 'Golos Text', sans-serif; color: var(--muted);
    transition: color 160ms ease, background-color 160ms ease;
  }
  .bill-toggle .bt:hover { color: var(--ink); }
  .bill-toggle .bt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .bill-toggle .bt.cur { color: #fff; background: var(--blue); }
  .bill-toggle .save { font: 500 14px 'Golos Text', sans-serif; color: var(--blue); background: var(--lav); border-radius: 999px; padding: 4px 10px; }
  .bill-toggle .bt.cur .save { background: rgba(255, 255, 255, 0.9); }
  .pricing .cards { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
  @media (max-width: 900px) { .pricing .cards { grid-template-columns: 1fr; } }
  .plan { border-radius: var(--r-md); padding: 40px 36px 38px; display: flex; flex-direction: column; text-align: left; }
  /* 36px полей с каждой стороны съедали четверть узкого экрана, и карточка
     переставала помещаться в колонку */
  @media (max-width: 480px) { .plan { padding: 32px 22px 30px; } }
  .plan.hot { background: var(--blue); color: #fff; }
  .pbadges { display: flex; gap: 8px; justify-content: flex-start; }
  .pb { display: inline-block; border-radius: 999px; padding: 7px 15px; font-size: 15px; font-weight: 400; background: var(--tile); color: var(--ink); }
  .plan.hot .pb { background: rgba(255, 255, 255, 0.18); color: #fff; }
  .pb.pop { background: var(--lav); color: var(--blue); }
  .plan.hot .pb.pop { background: #fff; color: var(--blue); }
  .plan .price { margin-top: 24px; font-size: 40px; font-weight: 600; letter-spacing: -0.5px; }
  .plan .price small { font-size: 16px; font-weight: 300; color: var(--muted); letter-spacing: 0; }
  .plan.hot .price small { color: rgba(255,255,255,0.72); }
  .plan .pdesc { margin-top: 12px; font-size: 17px; font-weight: 300; color: var(--muted); max-width: 32ch; }
  .plan.hot .pdesc { color: rgba(255,255,255,0.8); }
  .plan hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0 24px; width: 100%; }
  .plan.hot hr { border-color: rgba(255,255,255,0.22); }
  .plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; flex: 1; text-align: left; }
  .plan li { font-size: 17px; font-weight: 300; color: var(--ink); display: flex; gap: 11px; align-items: baseline; }
  .plan.hot li { color: #fff; }
  .plan li::before {
    content: ""; width: 16px; height: 16px; flex: none; transform: translateY(2px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 L6.6 11.5 L12.5 5' fill='none' stroke='%232928DE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .plan.hot li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 L6.6 11.5 L12.5 5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .plan .btn { margin-top: 28px; width: 100%; }
  .plan.hot .btn-primary { background: #fff; color: var(--blue); }
  .plan.hot .btn-primary:hover { background: var(--lav); }

  /* ===== Разработка ===== */
  .dev .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 52px; align-items: center; }
  @media (max-width: 860px) { .dev .grid { grid-template-columns: 1fr; } }
  .dev h2 { color: var(--st-ink); max-width: 20ch; }
  .dev .lede { color: var(--st-muted); max-width: 46ch; }
  .dev ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
  .dev li { border-left: 2px solid var(--peri); padding: 4px 0 4px 18px; font-size: 17px; font-weight: 300; color: var(--st-muted); }
  .dev li b { display: block; color: var(--st-ink); font-weight: 500; font-size: 18px; }
  .dev .btn-ghost { margin-top: 6px; }

  /* ===== Финал ===== */
  .final { position: relative; overflow: hidden; padding: 80px 0 0; text-align: center; }
  .final > .wrap { position: relative; z-index: 1; }
  .final-block { background: var(--lav); border-radius: var(--r-lg); padding: 76px 40px 0; }
  .final h2 { font-size: clamp(30px, 3.9vw, 52px); font-weight: 600; letter-spacing: normal; max-width: 22ch; margin: 0 auto; line-height: 1.13; }
  .final .btn { margin-top: 32px; }
  .final .fine { margin-top: 16px; font-size: 15px; font-weight: 300; color: var(--muted); }
  .final-ill { display: block; width: 100%; max-width: 640px; margin: 34px auto 0; }

  /* ===== Форма заявки в финальном блоке =====
     Раньше здесь стояла кнопка «Получить расчёт», которая вела на якорь
     этой же секции — то есть сама на себя. Восемь кнопок со страницы
     приводили сюда, и путь обрывался. Теперь тут форма.
     Разделы используют синюю плиту .pform из pages.css; на главной форма
     живёт в лавандовом финальном блоке — намеренно другая, чтобы конец
     главной не выглядел копией конца раздела. */
  .final-form { max-width: 560px; margin: 32px auto 0; display: grid; gap: 14px; text-align: left; }
  .final-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  @media (max-width: 560px) { .final-row { grid-template-columns: 1fr; } }
  /* nowrap ниже перебивает общее правило кнопок по специфичности, и на
     узком экране «Пусть Милана перезвонит» держала ряду ширину в 289px:
     при 320px форма вылезала из лавандового блока и обрезалась по
     overflow: hidden секции. Здесь снимаем и разрешаем колонке сжаться. */
  @media (max-width: 700px) {
    .final-form .btn { white-space: normal; }
    .final-row > * { min-width: 0; }
  }
  .final-form input[type="tel"] {
    width: 100%; border: 0; border-radius: var(--r-btn); background: #fff; color: var(--ink);
    padding: 17px 20px; font: 400 19px 'Golos Text', sans-serif;
  }
  .final-form input[type="tel"]::placeholder { color: #a6a6b4; }
  .final-form input[type="tel"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .final-form .btn { margin-top: 0; white-space: nowrap; }
  .final-form .btn[disabled] { opacity: 0.6; cursor: default; }
  .final-check { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; cursor: pointer; }
  /* 18px — размер «чтобы было видно». Обязательная галочка ФЗ-152 стоит
     между пользователем и заявкой, промахиваться по ней нельзя. */
  .final-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
  .final-check span { font-size: 14px; font-weight: 300; line-height: 1.45; color: #4a4a63; }
  .final-check a { text-decoration: underline; text-underline-offset: 2px; }
  .final-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .final .pform-msg:empty { display: none; }
  .final .pform-msg { font-size: 15px; color: var(--blue-hi); }
  .final .pform-msg.err { color: #c02626; }
  /* ответ после отправки: на лаванде текст тёмный, а не белый как в разделах */
  .final .pform-done { display: grid; gap: 10px; max-width: 560px; margin: 32px auto 0; text-align: left; }
  .final .pform-done b { font-size: 24px; font-weight: 600; }
  .final .pform-done p { font-size: 17px; font-weight: 300; color: #4a4a63; }

  /* ===== Футер ===== */
  /* футер вне контентного листа: без z-index его перекрывал зафиксированный герой */
  footer.site { position: relative; z-index: 1; background: #fff; padding: 72px 0 56px; }
  footer.site .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
  @media (max-width: 800px) { footer.site .grid { grid-template-columns: 1fr; } }
  footer.site .brand { color: var(--ink); --brand-dot: var(--blue); }
  footer.site .desc { margin-top: 16px; font-size: 16px; font-weight: 300; color: var(--muted); max-width: 38ch; }
  footer.site h4 { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
  footer.site ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  footer.site li a { font-size: 16px; font-weight: 300; color: var(--muted); transition: color 140ms ease; }
  footer.site li a:hover { color: var(--blue); }
  footer.site .legal { margin-top: 24px; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--muted); }

  /* На узком экране кнопки героя вставали лесенкой разной ширины */
  @media (max-width: 560px) {
    .hero .cta-row { display: grid; gap: 10px; }
    .hero .cta-row .btn { width: 100%; }
    .final-block { padding: 44px 20px 0; }
  }

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

  /* ===== Витрина возможностей ===== */
  .can-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 44px; }
  @media (max-width: 900px) { .can-grid { grid-template-columns: 1fr; } }
  .can {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    border-radius: var(--r-md); background: var(--tile); color: var(--ink);
    padding: 40px; min-height: 390px;
    transition: background-color 200ms cubic-bezier(0.35,0.1,0.35,0.9);
  }
  .can:hover { background: var(--tile-2); }
  .can.accent { background: var(--blue); color: #fff; }
  .can.accent:hover { background: var(--blue-hi); }
  .can h3 { font-size: clamp(23px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; max-width: 15ch; position: relative; z-index: 1; }
  .can p { margin-top: 16px; font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); max-width: 30ch; position: relative; z-index: 1; }
  .can.accent p { color: rgba(255,255,255,0.84); }
  .can .more { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 400; position: relative; z-index: 1; }
  .can .more i {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    border: 1.5px solid currentColor; display: grid; place-items: center;
    transition: transform 240ms cubic-bezier(0.35,0.1,0.35,0.9);
  }
  .can:hover .more i { transform: translate(3px, -3px); }
  .can-ill { position: absolute; right: 14px; bottom: 14px; width: 45%; max-width: 235px; display: block; pointer-events: none; }
  /* Карточка Миланы залита брендовым индиго, и рисунок на ней не читается:
     чернильный контур даёт к фону 1.9, бирюза 1.66, индиговый жилет вовсе 1.0.
     Кладём картинку на кремовый круг — он даёт 7.4, и внутри него Милана
     остаётся в своём обычном виде, без выворотки. */
  .can.accent .can-ill {
    background: #F3EEE4; border-radius: 50%;
    width: 42%; max-width: 208px; aspect-ratio: 1;
    object-fit: contain; object-position: bottom;
    padding: 6px 6px 0; right: 20px; bottom: 20px;
  }
  /* абзац обязан кончаться раньше медальона: при штатных 30ch он заезжал
     под круг на 3264 px², замерено в браузере */
  .can.accent p { max-width: 22ch; }
  /* на узком экране картинка наезжала на текст — уводим её в поток под ним */
  @media (max-width: 900px) {
    .can { min-height: 0; padding: 30px 24px; }
    .can p { max-width: none; }
    .can-ill { position: static; order: 2; align-self: flex-end; width: 58%; max-width: 200px; margin: 10px 0 0; }
    .can .more { order: 3; margin-top: 18px; padding-top: 0; }
  }

  /* ===== Готовые лиды: акцентный синий блок ===== */
  .leads { background: var(--blue); color: #fff; border-radius: var(--r-lg); margin: 0 12px; }
  .leads h2 { color: #fff; }
  .leads .lede { color: rgba(255,255,255,0.86); max-width: 46ch; }
  .leads .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  @media (max-width: 900px) { .leads .grid { grid-template-columns: 1fr; gap: 28px; } }
  .leads-ill { display: block; width: 100%; max-width: 460px; margin: 0 auto; }
  .leads .btn-primary { background: #fff; color: var(--blue); }
  .leads .btn-primary:hover { background: var(--lav); }
  .chain { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  @media (max-width: 860px) { .chain { grid-template-columns: 1fr; } }
  .ch { background: rgba(255,255,255,0.1); border-radius: var(--r-md); padding: 32px 30px 30px; }
  .chn {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: #fff; color: var(--blue); font-size: 16px; font-weight: 600;
  }
  .ch b { display: block; margin-top: 20px; font-size: 19px; font-weight: 600; }
  .ch p { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,0.8); }

  /* ===== Проекты в разделе разработки ===== */
  .cases { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  @media (max-width: 860px) { .cases { grid-template-columns: 1fr; } }
  .case { background: var(--st-surface); border-radius: var(--r-md); padding: 30px 28px 28px; }
  .case b { display: block; font-size: 19px; font-weight: 600; color: var(--st-ink); }
  .case p { margin-top: 12px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--st-muted); }
  .cases-note { margin-top: 20px; font-size: 15px; font-weight: 300; color: var(--st-muted); }

  /* ============================================================
     Планшет: закрепления первого экрана нет, поэтому герой обязан
     умещаться в окно — иначе полоса с фигурами уезжает за сгиб и
     режется его краем. Числа подобраны по замерам частей героя.
     Блок держим В КОНЦЕ файла: специфичность та же, что у базовых
     правил, и раньше он проигрывал им по порядку.
     ============================================================ */
  @media (max-width: 1023px) {
    .hero { padding-top: 22px; }
    .hero .grid { gap: 38px; }
    .skb { margin-bottom: 18px; }
    .hero .sub { margin-top: 16px; }
    .hero .cta-row { margin-top: 24px; }
    .hero .proof { margin-top: 24px; gap: 16px 32px; }
    .hero-ill { margin-top: 22px; height: 140px; padding-bottom: 16px; }
    .hero-ill img { bottom: 16px; height: calc(100% - 16px); }
    /* карточки стека выступают вверх за свою рамку и налезали на подпись */
    .stack { height: 226px; margin-top: 34px; }
    .stack-ctl { margin-top: 16px; }
    .stack-note { margin-top: 12px; }
  }

  /* ============================================================
     Личный кабинет: закреплённая сцена, 4 состояния.
     Приём снят с секции internet-bank у Точки: высокая секция,
     внутри sticky ровно в окно, устройства ПЕРЕЕЗЖАЮТ между
     состояниями. Всё держится на opacity/transform с непрерывными
     переходами — через display смена выходила рывком.
     ============================================================ */
  .pin { position: relative; background: #1c1c24; color: var(--st-ink); border-radius: var(--r-lg); margin: 0 12px; }
  /* Плоский серый выглядел скучно: под устройства заведено мягкое индиговое
     свечение. overflow вешаем на саму сцену, а НЕ на .pin — иначе sticky
     внутри перестаёт работать (overflow у предка создаёт свой контейнер прокрутки). */
  .pin-stage { position: relative; overflow: hidden; border-radius: inherit; padding: 72px 0; }
  .pin-stage::before {
    content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(46% 44% at 72% 40%, rgba(41, 40, 222, 0.55), transparent 68%),
      radial-gradient(40% 42% at 18% 80%, rgba(120, 120, 234, 0.26), transparent 70%);
    animation: pinGlow 20s ease-in-out infinite alternate;
  }
  @keyframes pinGlow {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  }
  @media (prefers-reduced-motion: reduce) { .pin-stage::before { animation: none; } }
  .pin-grid { position: relative; z-index: 1; }
  .pin-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
  .pin-eyebrow { display: block; font-size: 16px; font-weight: 500; color: var(--peri); margin-bottom: 14px; }
  .pin-text h2 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 600; line-height: 1.13; color: #fff; }
  .pin-text p { margin-top: 18px; font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--st-muted); max-width: 40ch; }
  .pin-text ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
  .pin-text li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; font-weight: 300; color: #e6e6ee; }
  .pin-text li::before { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--peri); flex: none; transform: translateY(-5px); }

  .pin-states { position: relative; }
  .pst { opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22,0.61,0.36,1), visibility 0s linear 520ms; }
  .pst:not([data-s="0"]) { position: absolute; inset: 0; }
  .pin[data-state="0"] .pst[data-s="0"],
  .pin[data-state="1"] .pst[data-s="1"],
  .pin[data-state="2"] .pst[data-s="2"],
  .pin[data-state="3"] .pst[data-s="3"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

  /* ===== Устройства ===== */
  .pin-devices { position: relative; height: 500px; }
  .mock {
    position: absolute; background: #141414; border-radius: 24px; padding: 9px;
    box-shadow: 0 34px 70px -34px rgba(0,0,0,0.75);
    transition: opacity 640ms ease, transform 820ms cubic-bezier(0.22,0.61,0.36,1);
    will-change: transform, opacity;
  }
  .mock-screen { position: relative; overflow: hidden; border-radius: 16px; background: #fff; color: var(--ink); height: 100%; }
  .mock-tab { right: 0; top: 30px; width: 78%; height: 430px; }
  .mock-phone { left: 4%; bottom: 0; width: 208px; height: 420px; border-radius: 30px; padding: 8px; }
  .mock-phone .mock-screen { border-radius: 23px; }

  /* переезды устройств между состояниями */
  .pin[data-state="0"] .mock-phone { opacity: 0; transform: translate(30px, 60px) scale(0.9); }
  .pin[data-state="1"] .mock-phone { opacity: 1; transform: translate(210px, -12px) scale(1.06); }
  .pin[data-state="2"] .mock-phone { opacity: 1; transform: translate(-58px, 14px) scale(0.96); }
  .pin[data-state="3"] .mock-phone { opacity: 0; transform: translate(-70px, 20px) scale(0.92); }

  .pin[data-state="0"] .mock-tab { opacity: 0; transform: translate(90px, 0) scale(0.94); }
  .pin[data-state="1"] .mock-tab { opacity: 0; transform: translate(70px, 0) scale(0.96); }
  .pin[data-state="2"] .mock-tab { opacity: 1; transform: translate(0, 0) scale(1); }
  .pin[data-state="3"] .mock-tab { opacity: 1; transform: translate(-30px, -14px) scale(1.1); }

  /* панели внутри экранов: без display, иначе смена рвётся */
  .ui-pane { position: absolute; inset: 0; padding: 14px 16px; opacity: 0; visibility: hidden; transition: opacity 420ms ease, visibility 0s linear 420ms; }
  .mock-tab .ui-pane { position: static; inset: auto; padding: 0; }
  .mock-tab .ui-main { position: relative; }
  .mock-tab .ui-main .ui-pane { position: absolute; inset: 0; padding: 14px 16px; }
  .pin[data-state="1"] .ui-pane[data-s="1"],
  .pin[data-state="2"] .ui-pane[data-s="2"],
  .pin[data-state="3"] .ui-pane[data-s="3"] { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* мини-блоки проявляются по очереди — это и оживляет сцену */
  .ui-pane > * { opacity: 0; transform: translateY(12px); transition: opacity 460ms ease, transform 560ms cubic-bezier(0.22,0.61,0.36,1); }
  .pin[data-state="1"] .ui-pane[data-s="1"] > *,
  .pin[data-state="2"] .ui-pane[data-s="2"] > *,
  .pin[data-state="3"] .ui-pane[data-s="3"] > * {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i, 0) * 85ms + 140ms);
  }

  .ui-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .ui-brand { flex: none; height: 11px; width: auto; color: var(--ink); --brand-dot: var(--blue); }
  .ui-search { flex: 1; height: 22px; border-radius: 999px; background: var(--tile); }
  .ui-ava { width: 22px; height: 22px; border-radius: 50%; background: var(--lav); flex: none; }
  .ui-body { display: grid; grid-template-columns: 138px 1fr; height: calc(100% - 47px); }
  .ui-side { border-right: 1px solid var(--line); padding: 14px 12px; display: grid; align-content: start; gap: 8px; }
  .ui-side i { font-style: normal; font-size: 11px; color: var(--ink); background: var(--tile); border-radius: var(--r-sm); padding: 8px 9px; }
  .ui-cap { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
  .ui-main { padding: 0; min-width: 0; }
  .ui-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .ui-row b { font-size: 11.5px; font-weight: 500; flex: 0 0 112px; }
  .ui-row em { font-style: normal; font-size: 10px; color: var(--muted); background: var(--tile); border-radius: 999px; padding: 3px 8px; flex: none; }
  .ui-row em.ok { color: var(--blue); background: var(--lav); }
  .ui-w { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--peri) 46%, var(--tile-2) 46%); min-width: 0; }
  .ui-w.w2 { background: linear-gradient(90deg, var(--peri) 30%, var(--tile-2) 30%); }
  .ui-w.w3 { background: linear-gradient(90deg, var(--peri) 62%, var(--tile-2) 62%); }
  .ui-w.w4 { background: linear-gradient(90deg, var(--peri) 54%, var(--tile-2) 54%); }
  .ui-w.w5 { background: linear-gradient(90deg, var(--peri) 22%, var(--tile-2) 22%); }
  .ui-card { display: flex; gap: 10px; background: var(--tile); border-radius: var(--r-sm); padding: 12px 13px; margin-bottom: 8px; }
  .ui-card.soft { background: #fff; border: 1px solid var(--line); }
  .ui-face { width: 26px; height: 26px; border-radius: 50%; background: var(--lav); flex: none; }
  .ui-card b { display: block; font-size: 12.5px; font-weight: 600; }
  .ui-card span { display: block; margin-top: 4px; font-size: 11px; font-weight: 300; color: var(--muted); line-height: 1.45; }
  .ui-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
  .ui-chips i { font-style: normal; font-size: 9.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; }
  .ui-chips i.ok { color: var(--blue); background: var(--lav); border-color: transparent; }
  .ui-bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; margin: 4px 0 14px; }
  .ui-bars i { flex: 1; background: var(--peri); border-radius: 3px 3px 0 0; }
  .ui-bars i:nth-child(2n) { background: var(--blue); }
  .ui-stats { display: flex; gap: 8px; }
  .ui-stat { flex: 1; background: var(--tile); border-radius: var(--r-sm); padding: 10px 12px; }
  .ui-stat b { display: block; font-size: 16px; font-weight: 600; }
  .ui-stat span { font-size: 10px; color: var(--muted); }

  .ph-top { display: flex; align-items: center; gap: 8px; padding: 13px 14px 10px; }
  .ph-top b { font-size: 12.5px; font-weight: 600; flex: 1; }
  .ph-ava { width: 22px; height: 22px; border-radius: 50%; background: var(--lav); flex: none; }
  .ph-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }
  .mock-phone .ui-pane { top: 46px; bottom: 42px; }
  .ph-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .ph-row b { font-size: 11.5px; font-weight: 500; }
  .ph-row em { font-style: normal; font-size: 9.5px; color: var(--muted); background: var(--tile); border-radius: 999px; padding: 3px 7px; }
  .ph-row em.ok { color: var(--blue); background: var(--lav); }
  .ph-note { margin-top: 12px; font-size: 10px; font-weight: 300; color: var(--muted); line-height: 1.4; }
  .ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 12px 0 14px; border-top: 1px solid var(--line); background: #fff; }
  .ph-tabs i { width: 18px; height: 4px; border-radius: 2px; background: var(--tile-2); }
  .ph-tabs i.cur { background: var(--blue); }

  @media (min-width: 1024px) {
    .pin { height: 420vh; }
    .pin-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 0; }
  }
  /* Без закрепления: состояния идут одно за другим, устройства стоят смирно. */
  @media (max-width: 1023px) {
    .pin-grid { grid-template-columns: 1fr; gap: 34px; }
    .pin-stage { padding: 56px 0; }
    .pst { position: static !important; opacity: 1; visibility: visible; transform: none; }
    .pst + .pst { margin-top: 38px; padding-top: 38px; border-top: 1px solid var(--st-line); }
    .pin-devices { height: 420px; }
    .mock, .pin[data-state] .mock { opacity: 1 !important; transform: none !important; }
    .mock-tab { width: 80%; height: 330px; top: 0; }
    .mock-phone { width: 172px; height: 320px; left: 0; }
    .ui-pane, .pin[data-state] .ui-pane { opacity: 0; visibility: hidden; }
    .ui-pane[data-s="1"], .pin[data-state] .ui-pane[data-s="1"] { opacity: 1; visibility: visible; }
    .ui-pane > *, .pin[data-state] .ui-pane > * { opacity: 1; transform: none; transition-delay: 0s; }
  }
  /* Телефон: планшетный мокап сюда не помещается. Его внутренняя вёрстка
     (боковое меню 138px + таблица) рассчитана на 430px ширины — на 375px
     она резалась по краю: подписи статусов обрывались на полуслове, а
     телефонный мокап налезал сверху. Показываем только телефон: его экран
     как раз про телефон, он встаёт по центру в поток и читается целиком. */
  @media (max-width: 700px) {
    .pin-devices { height: auto; display: flex; justify-content: center; }
    .mock-tab { display: none; }
    .mock-phone {
      position: relative; left: auto; right: auto; top: auto; bottom: auto;
      width: min(260px, 100%); height: 360px;
    }
    /* мелкий шрифт мокапа считался от 208px ширины — на живом телефоне
       это 9.5px, читать нечем */
    .mock-phone .ph-top b { font-size: 14px; }
    .mock-phone .ui-cap { font-size: 12px; }
    .mock-phone .ph-row b { font-size: 13px; }
    .mock-phone .ph-row em { font-size: 11px; }
    .mock-phone .ph-note { font-size: 11.5px; }
  }

  /* ============================================================
     Мелкие предметы, разбросанные по синему экрану — приём Точки:
     у них в герое десяток отдельных фигурок (облако, шар, самолёт).
     Позиции подобраны так, чтобы не лезть под текст и карточки.
     ============================================================ */
  .hero-objects { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .fo { position: absolute; display: block; opacity: 0.92; will-change: transform; }
  .fo-plane  { top: 12%; right: 6%;  width: 92px; animation: foFloat 7s ease-in-out infinite; }
  .fo-bubble { top: 47%; right: 4%;  width: 58px; animation: foFloat 9s ease-in-out infinite 0.8s; }
  .fo-phone  { top: 66%; right: 15%; width: 64px; animation: foFloat 8s ease-in-out infinite 1.6s; }
  .fo-mail   { top: 74%; right: 34%; width: 62px; animation: foFloat 10s ease-in-out infinite 0.4s; }
  .fo-cup    { top: 78%; right: 40%; width: 46px; animation: foFloat 11s ease-in-out infinite 1.2s; }
  @keyframes foFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(-3deg); }
  }
  /* Предметы — украшение: на узком экране они лезут под текст, убираем.
     И полностью замираем, если человек просил уменьшить анимацию. */
  @media (max-width: 1023px) { .hero-objects { display: none; } }
  @media (prefers-reduced-motion: reduce) { .fo { animation: none !important; } }

  /* ===== Шапка: выпадающие разделы ===== */
  .nav-item { position: relative; display: inline-flex; }
  .nav-top {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: transparent; cursor: pointer; padding: 4px 0;
    font: 400 16px 'Golos Text', sans-serif; color: rgba(255,255,255,0.86);
    transition: color 160ms ease;
  }
  .nav-top i { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 220ms ease; }
  .nav-item:hover .nav-top, .nav-item:focus-within .nav-top { color: #fff; }
  .nav-item:hover .nav-top i, .nav-item:focus-within .nav-top i { transform: rotate(225deg) translate(-3px, -3px); }
  .nav-sub {
    position: absolute; top: 100%; left: -18px; min-width: 264px;
    display: grid; padding: 10px; margin-top: 10px;
    background: #fff; border-radius: var(--r-md);
    box-shadow: 0 24px 48px -22px rgba(20, 20, 40, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.22,0.61,0.36,1), visibility 0s linear 200ms;
  }
  .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  nav.main .nav-sub a { padding: 11px 14px; border-radius: var(--r-sm); font-size: 16px; font-weight: 400; color: var(--ink); transition: background-color 140ms ease, color 140ms ease; }
  nav.main .nav-sub a::after { display: none; }
  nav.main .nav-sub a:hover { background: var(--lav-soft); color: var(--blue); }
  /* мостик под кнопкой: без него курсор «проваливается» по дороге к списку */
  .nav-item.has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }

  /* ===== Что умеет Милана ===== */
  .scale { background: var(--wash); border-radius: var(--r-lg); margin: 0 12px; }
  .sgrid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  @media (max-width: 980px) { .sgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .sgrid { grid-template-columns: 1fr; } }
  .sc { background: #fff; border-radius: var(--r-md); padding: 32px 30px 30px; }
  .sc b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
  .sc p { margin-top: 12px; font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); }

  /* ===== Стартаперам ===== */
  .startup { background: var(--lav); border-radius: var(--r-lg); margin: 0 12px; }
  .startup .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  @media (max-width: 900px) { .startup .grid { grid-template-columns: 1fr; gap: 28px; } }
  .startup-ill { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
  .stgrid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  @media (max-width: 980px) { .stgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .stgrid { grid-template-columns: 1fr; } }
  .st { background: #fff; border-radius: var(--r-md); padding: 28px 26px 26px; }
  .stn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; }
  .st b { display: block; margin-top: 18px; font-size: 18px; font-weight: 600; }
  .st p { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--muted); }

  /* подпись над стеком записей: заголовок героя теперь про компанию,
     а записи — доказательство по одному продукту, это надо назвать */
  .tracks-cap { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.72); }
  @media (max-width: 1023px) { .tracks-cap { margin-bottom: 10px; font-size: 14px; } }

  /* ===== SMM и трафик ===== */
  .smm { background: var(--wash); border-radius: var(--r-lg); margin: 0 12px; }
  .smm .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  @media (max-width: 900px) { .smm .grid { grid-template-columns: 1fr; gap: 28px; } }
  .smm-ill { display: block; width: 100%; max-width: 330px; margin: 0 auto; }
  .smgrid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  @media (max-width: 980px) { .smgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .smgrid { grid-template-columns: 1fr; } }
  .sm { background: #fff; border-radius: var(--r-md); padding: 28px 26px 26px; }
  .sm b { display: block; font-size: 18px; font-weight: 600; }
  .sm p { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--muted); }

  /* ===== Вертикальный ритм на телефоне =====
     80px сверху и снизу — воздух широкого экрана: там секция занимает
     треть высоты и поля читаются как поля. На 375px это 160px пустоты
     между блоками, полэкрана прокрутки ни за чем, и главная вырастала
     до 28 000px. Блок идёт последним в файле намеренно: .final и
     footer.site объявлены ниже своих секций, и правило с той же
     специфичностью должно стоять после них, иначе не применится. */
  @media (max-width: 700px) {
    section.s { padding: 48px 0; }
    .final { padding: 48px 0 0; }
    footer.site { padding: 48px 0 40px; }
  }