/* Брейкпоинты сайта — единая лестница, новые значения не заводить:
   по ширине: 1150 · 960 · 900 · 860 (шапка -> бургер) · 640 · 480 · 380 (узкие телефоны)
   по высоте: 820 · 760 · 700 — сжатие первого экрана на низких окнах
   плюс (prefers-reduced-motion) для движения. */
  :root{
    --paper:#FAFAFA;
    --orange:#ff5b29;
    /* оранжевый для ТЕКСТА: #ff5b29 на бумаге даёт 2,97:1 — ниже нормы
       WCAG AA для мелкого кегля. Графике (кольца, стрелки, рамки)
       оставлен яркий, подписям и цифрам — затемнённый (4,77:1) */
    --orange-ink:#c8410f;
    --navy:#1E3878;
    --carbon:#111111;
    --chartreuse:#f5ff80;
    --steel:#6c6c6c;
    /* системные цвета, раньше жившие хардкодом */
    --ink-body:#2b2b2b;
    --tint:#e7ecf3;
    --ink-on-tint:#48566f;
    --rule-soft:#cfcfcf;
    --rule-faint:#e2e2e2;
    --rule-dashed:#9aa0ad;
    --shadow-hard: 6px 6px 0 var(--carbon);
    /* высота шапки: 2 × вертикальный padding + контент (кнопка CTA).
       Нужна первому экрану, из которого шапка вынесена ради <main> */
    --topbar-h: calc(2 * clamp(1.2rem, 2.5vw, 2rem) + 45px);
  }
  @media (max-width:480px){
    :root{ --topbar-h: calc(2 * clamp(1.2rem, 2.5vw, 2rem) + 38px); }
  }
  /* цель нажатия не меньше 24px по высоте (WCAG 2.5.8): текстовые ссылки
     в подписях и хвостах абзацев без этого дают 17–20px */
  .pcard__text a,
  .pcard__cap a,
  .cbento__cell-text a,
  .pains__cell a,
  .pains__sum a,
  .start__disclaimer a,
  .svc-mini__all a,
  .auto__close a,
  .format__hint a,
  .cta__brief-link a,
  .page-head__hint a,
  .faq__a a,
  .cta-band__soft a,
  .tech__note a,
  .lost__text a,
  .consent a,
  .pol a,
  .pol__text a,
  .footer__legal a,
  .cat-card__list a,
  .cat-card__note a,
  .dprice__link a{
    /* вертикальный padding у строчной ссылки расширяет зону нажатия,
       но НЕ раздвигает строки — в отличие от inline-block + min-height,
       который добавлял скачок вёрстки в момент подмены шрифта */
    padding-block:.3rem;
  }
  .hero__scroll-cue{ min-height:24px; padding-block:.15rem; }

  /* ссылка обхода блоков: видна только с клавиатуры (WCAG 2.4.1) */
  .skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:100;
    padding:.8rem 1.2rem;
    background:var(--carbon);
    color:var(--paper);
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.78rem;
    letter-spacing:.05em;
  }
  .skip-link:focus{
    left:.6rem;
    top:.6rem;
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ background:var(--paper); }
  body{
    background:transparent; /* фон даёт html — иначе он накроет рельсу с z:-1 */
    color:var(--carbon);
    font-family:'Golos Text','Golos Text Fallback',sans-serif;
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:'Unbounded','Unbounded Fallback',sans-serif; font-weight:700; line-height:1.02; letter-spacing:-0.01em;
    /* длинные слова («ИИ-автоматизации») на узком экране: сначала пробуем
       перенос по слогам, разрыв посреди слова — только как крайняя мера */
    hyphens:auto;
    overflow-wrap:break-word; }
  .mono{ font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace; }
  /* доступный/SEO-заголовок без визуального следа: секции, где нет
     отдельного крупного заголовка, всё равно получают осмысленный h2 */
  .visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .brandword{
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:700;
    font-size:.92em;
    letter-spacing:.02em;
  }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--chartreuse); color:var(--carbon); }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.01ms !important;
      animation-delay:0s !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* ============ TOPBAR ============ */
  .topbar{
    position:relative;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: clamp(.8rem,2vw,1.5rem);
    padding: clamp(1.2rem,2.5vw,2rem) clamp(1.2rem,4vw,3.5rem);
  }
  .logo{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:700;
    font-size:1rem;
    letter-spacing:.02em;
    position:relative;
    padding:.3rem .2rem;
    flex:none; /* не даём словомарке переноситься в 2 строки, когда рядом появился CTA */
    white-space:nowrap;
  }
  /* лого-словомарка: синий диск вместо «O», оранжевое кольцо
     обводит «10» и левым краем уходит ЗА букву «А» */
  .logo__o{
    display:inline-block;
    width:.95em; height:.95em;
    border-radius:50%;
    background:var(--navy);
    vertical-align:-.12em;
    margin:0 .04em;
  }
  .logo__a{
    font-style:normal;
    font-weight:inherit;
    position:relative;
    z-index:3;
  }
  .logo__ten{
    position:relative;
    display:inline-block;
    z-index:1;
  }
  .logo__ring2{
    position:absolute;
    top:50%; left:50%;
    width:2.15em; height:2.15em;
    transform:translate(-50%,-50%);
    border:3px solid var(--orange);
    border-radius:50%;
    z-index:-1;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .logo:hover .logo__ring2{ transform:translate(-50%,-50%) rotate(20deg) scale(1.08); }
  .topbar__nav{
    display:flex;
    gap:clamp(1rem,2vw,2.2rem);
    font-size:.85rem;
    color:var(--steel);
  }
  .topbar__nav a{
    position:relative;
    /* цель нажатия не ниже 24px по норме доступности */
    display:inline-block;
    padding:2px 0 4px;
  }
  .topbar__nav a::after{
    content:'';
    position:absolute;
    left:0; right:0;
    bottom:2px;
    height:2px;
    background:var(--carbon);
    /* растёт слева направо через scaleX, а не через right: браузер не
       пересчитывает раскладку на каждом кадре наведения */
    transform:scaleX(0);
    transform-origin:left center;
    transition: transform .3s cubic-bezier(.16,1,.3,1);
  }
  .topbar__nav a:hover{ color:var(--carbon); }
  .topbar__nav a:hover::after{ transform:scaleX(1); }
  /* активный пункт меню — постоянное подчёркивание, без наведения */
  .topbar__nav a[aria-current="page"]{ color:var(--carbon); }
  .topbar__nav a[aria-current="page"]::after{ transform:scaleX(1); background:var(--orange); }

  /* ============ MOBILE NAV (бургер) ============ */
  /* до 860px пункты меню прячутся (нет места в строке шапки), но раньше
     замены не было вообще — на телефоне попасть на другие страницы можно
     было только руками поправив URL. Кнопка-бургер + выпадающая панель,
     без анимации layout (max-height не трогаем — сетка строк). */
  .nav-toggle{
    display:none;
    width:36px; height:36px;
    border:2px solid var(--carbon);
    border-radius:50%;
    background:transparent;
    position:relative;
    padding:0;
    cursor:pointer;
    flex:none;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:'';
    position:absolute;
    left:50%; top:50%;
    width:14px; height:2px;
    background:var(--carbon);
    transform:translate(-50%,-50%);
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s;
  }
  .nav-toggle span::before{ transform:translate(-50%,-6px); }
  .nav-toggle span::after{ transform:translate(-50%,4px); }
  .nav-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{ transform:translate(-50%,-50%) rotate(-45deg); }
  .mobile-nav{
    display:none;
    grid-template-rows: 0fr;
    visibility:hidden;
    transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
  }
  .mobile-nav__inner{ overflow:hidden; }
  .mobile-nav.is-open{ grid-template-rows: 1fr; visibility:visible; transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1); }
  .mobile-nav__list{
    display:flex;
    flex-direction:column;
    padding: 0 clamp(1.2rem,4vw,3.5rem) 1.4rem;
    gap:.2rem;
  }
  .mobile-nav__list a{
    padding:.7rem 0;
    font-size:1.05rem;
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:600;
    border-bottom:1px solid #e4e4e4;
  }
  .mobile-nav__list a[aria-current="page"]{ color:var(--orange-ink); }

  /* ============ PAGE-HEAD (внутренние страницы) ============ */
  /* компактный заголовок для Услуг/Кейсов/Контакта — не полноэкранный хиро
     (тот только на главной), но та же типографика/кикер-метка */
  .page-head{
    padding: clamp(2.4rem,6vw,4.5rem) clamp(1.2rem,4vw,3.5rem) clamp(1.8rem,4vw,3rem);
    max-width:920px;
  }
  .page-head__label{
    display:block;
    font-size:.85rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:.9rem;
  }
  .page-head h1{
    font-size:clamp(2.2rem,5.5vw,3.6rem);
    margin-bottom:1rem;
  }
  @media (max-width:480px){
    /* на телефоне заголовок мельче: «ИИ-автоматизации» встаёт в строку целиком */
    .page-head h1{ font-size:clamp(1.7rem,7.2vw,2.4rem); }
  }
  .page-head p{
    font-size:clamp(1rem,1.3vw,1.15rem);
    color:var(--ink-body);
    max-width:52ch;
  }
  /* хиро услуг: заголовок слева + кликабельный прайс-бланк справа */
  .page-head--split{
    max-width:1180px;
    display:grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    gap: clamp(2rem,4.5vw,4.5rem);
    align-items:center;
  }
  .page-head__hint{
    margin-top: clamp(.9rem,1.6vw,1.2rem);
    font-size:.95rem;
  }
  .page-head__hint a{ color:var(--navy); }
  .price-sheet{
    display:block;
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2.2vw,1.9rem);
  }
  .price-sheet__tag{
    display:block;
    font-size:.72rem;
    letter-spacing:.08em;
    color:var(--steel);
    margin-bottom:.5rem;
  }
  .price-sheet__row{
    display:flex;
    align-items:baseline;
    gap:.6rem;
    padding:.7rem .4rem;
    margin:0 -.4rem;
    border-top:1px dashed var(--rule-soft);
    text-decoration:none;
    color:var(--carbon);
    transition: background-color .2s;
  }
  .price-sheet__row:first-of-type{ border-top:0; }
  .price-sheet__row:hover,
  .price-sheet__row:focus-visible{ background:#fdffd9; outline:none; }
  .price-sheet__row:hover .price-sheet__name{ text-decoration:underline; text-underline-offset:3px; }
  .price-sheet__name{ flex:none; font-weight:600; font-size:.98rem; }
  .price-sheet__num{ color:var(--orange-ink); font-size:.75rem; margin-right:.5rem; }
  .price-sheet__fill{
    flex:1 1 20px;
    min-width:20px;
    align-self:center;
    height:0;
    border-bottom:2px dotted #b9b9b9;
    transform:translateY(-.3em);
  }
  .price-sheet__val{
    flex:none;
    white-space:nowrap;
    font-weight:700;
    font-size:.95rem;
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
  }
  .price-sheet__foot{
    display:block;
    margin-top:.9rem;
    padding-top:.8rem;
    border-top:2px solid var(--carbon);
    font-size:.68rem;
    letter-spacing:.07em;
    color:var(--steel);
  }
  @media (max-width:900px){
    .page-head--split{ grid-template-columns:minmax(0,1fr); }
    .price-sheet{ max-width:480px; }
  }

  /* ============ CTA-BAND (компактный тизер контакта) ============ */
  .cta-band{
    padding: clamp(2.6rem,6vw,4.5rem) clamp(1.2rem,4vw,3.5rem);
    text-align:center;
    border-top:2px solid var(--carbon);
  }
  .cta-band h2{
    font-size:clamp(1.8rem,4vw,2.6rem);
    margin-bottom:.7rem;
  }
  .cta-band p{
    color:var(--ink-body);
    margin-bottom:1.6rem;
  }
  /* специфичнее общего .cta-band p — поэтому без !important */
  .cta-band p.cta-band__soft{
    margin-top:1.2rem;
    margin-bottom:0;
  }
  .cta-band__soft a{
    font-size:.85rem;
    color:var(--steel);
    text-decoration:underline;
    text-underline-offset:.2em;
    transition: color .25s;
  }
  .cta-band__soft a:hover{ color:var(--carbon); }

  /* ============ HERO ============ */
  /* шапка (обычный поток, не fixed) + хиро вместе держат ровно один экран:
     контейнер задаёт пол в 100svh (фолбэк 100vh), хиро — flex:1 добирает
     всё, что осталось после реальной высоты шапки. На тесных экранах, где
     контенту хиро физически не хватает места, контейнер вырастает выше
     100svh сам (авто-высота flex-контейнера не может быть МЕНЬШЕ суммы
     содержимого) — следующий блок при этом всё равно остаётся ниже, а не
     подглядывает, просто требует чуть больше скролла. */
  /* первый экран без шапки: она вынесена выше <main> ради семантики,
     поэтому её высота вычитается из полного экрана */
  .screen1{
    display:flex;
    flex-direction:column;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100svh - var(--topbar-h));
  }
  .hero{
    position:relative;
    overflow:hidden;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: clamp(2rem,4vw,3rem) clamp(1.2rem,4vw,3.5rem) clamp(2.4rem,4.5vw,3.6rem);
  }
  .hero__scroll-cue{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom: clamp(1.1rem,2.2vw,1.6rem);
    z-index:6;
    display:flex;
    align-items:center;
    gap:.55rem;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--carbon); /* не steel — метка должна читаться и поверх диска Б (navy), не только на бумаге */
    opacity:0;
    animation: cue-reveal .9s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:.95s;
  }
  @keyframes cue-reveal{
    from{ opacity:0; transform:translate(-50%, 38px); }
    to{ opacity:1; transform:translate(-50%, 0); }
  }
  .hero__scroll-cue svg{
    width:14px; height:20px;
    animation: cue-bob 2.2s ease-in-out infinite;
    animation-fill-mode: both;
  }
  .hero__scroll-cue svg path{
    fill:none;
    stroke:var(--carbon);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  @keyframes cue-bob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(5px); }
  }

  .hero__ring{
    position:absolute;
    top:-18%;
    right:-12vw;
    width:min(42vw, 550px);
    height:min(42vw, 550px);
    z-index:5;
    pointer-events:none;
    overflow:visible;
    animation: breathe-ring 11s ease-in-out infinite;
    animation-fill-mode: both;
  }
  .hero__ring path{
    fill:none;
    stroke:var(--orange);
    stroke-width:8;
    stroke-linejoin:round;
  }
  .hero__disc{
    position:absolute;
    /* bottom считается от СОБСТВЕННОГО диаметра диска (не от высоты хиро) —
       раньше "-14%" было % от heroHeight, а высота хиро теперь плавающая
       (flex добирает остаток экрана), из-за чего на невысоких вьюпортах
       диск задирался вверх и перекрывал текст параграфа под низкой
       контрастностью (тёмный текст на navy). Формула ниже держит верх
       диска на одном и том же расстоянии от НИЖНЕГО края хиро независимо
       от его итоговой высоты. */
    bottom: calc(-1 * min(26vw, 360px) * 0.55);
    left:-6%;
    width:min(26vw, 360px);
    height:min(26vw, 360px);
    border-radius:50%;
    background:var(--navy);
    z-index:0;
    animation: breathe-disc 9s ease-in-out infinite;
    animation-fill-mode: both;
  }
  @keyframes breathe-ring{
    0%,100%{ transform: scale(1) rotate(0deg); }
    50%{ transform: scale(1.045) rotate(3deg); }
  }
  @keyframes breathe-disc{
    0%,100%{ transform: scale(1) translateY(0); }
    50%{ transform: scale(1.06) translateY(-1.2%); }
  }
  /* слияние капель: маленькая (курсор) вытягивается и втекает в
     большую (диск), диск отвечает жидкой волной; выход — обратно:
     диск выдавливает каплю с «шейкой», оба принимают форму.
     --a — направление от курсора к центру диска (ставит JS) */
  @keyframes drop-absorb{
    0%{ transform: rotate(var(--a,0deg)) translateX(0) scale(1,1); }
    45%{ transform: rotate(var(--a,0deg)) translateX(26px) scale(2.1,.45); }
    100%{ transform: rotate(var(--a,0deg)) translateX(64px) scale(.02,.02); }
  }
  .cursor-dot.is-absorbed{
    animation: drop-absorb .55s cubic-bezier(.45,0,.6,1) both;
    mix-blend-mode:normal;
    background:var(--navy);
  }
  @keyframes drop-release{
    0%{ transform: rotate(var(--a,0deg)) translateX(50px) scale(.02,.02); }
    40%{ transform: rotate(var(--a,0deg)) translateX(14px) scale(1.7,.45); }
    75%{ transform: rotate(var(--a,0deg)) translateX(0) scale(.8,1.2); }
    100%{ transform: rotate(var(--a,0deg)) translateX(0) scale(1,1); }
  }
  .cursor-dot.is-released{
    animation: drop-release .6s cubic-bezier(.22,1,.36,1) both;
    mix-blend-mode:normal;
    background:var(--navy);
  }
  @keyframes disc-absorb{
    0%{ transform: scale(1,1); }
    35%{ transform: scale(1.22,1.06); }
    65%{ transform: scale(1.1,1.2); }
    100%{ transform: scale(1.16,1.16); }
  }
  .hero__disc.is-absorbing{
    animation: disc-absorb .75s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes disc-release{
    0%{ transform: scale(1.16,1.16); }
    35%{ transform: scale(.94,1.1); }
    70%{ transform: scale(1.06,.96); }
    100%{ transform: scale(1,1); }
  }
  .hero__disc.is-releasing{
    animation: disc-release .75s cubic-bezier(.22,1,.36,1) both;
  }

  .hero__title{
    position:relative;
    z-index:6;
  }
  .hero__title .line{
    display:block;
    opacity:0;
    transform: translateY(38px);
    animation: reveal-up .9s cubic-bezier(.16,1,.3,1) forwards;
  }
  .line--1{
    font-size:clamp(.95rem, 1.4vw, 1.15rem);
    font-weight:500;
    color:var(--steel);
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-left:.3rem;
    margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
    white-space:nowrap;
    animation-delay:.05s;
  }
  .line--lead{
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-size:clamp(1.5rem, 3vw, 2.5rem);
    font-weight:600;
    color:var(--carbon);
    margin-left:.3rem;
    margin-bottom:.3em;
    white-space:nowrap;
    animation-delay:.18s;
  }
  .line--2{
    font-size:clamp(3rem, 7.8vw, 7.4rem);
    font-weight:800;
    margin-left:2vw;
    position:relative;
    z-index:4;
    white-space:nowrap;
    animation-delay:.32s;
  }
  .line--3{
    font-size:clamp(3rem, 7.8vw, 7.4rem);
    font-weight:800;
    color:var(--carbon);
    margin-left:8vw;
    position:relative;
    z-index:7;
    white-space:nowrap;
    animation-delay:.4s;
  }
  .line--2 em{
    font-style:normal;
    /* «А» в заголовке — крупный текст, для него норма 3:1. Фирменный
       #ff5b29 даёт 2,97 — берём оттенок на четыре единицы темнее
       (глазом неотличим, 3,05:1). В графике остаётся чистый --orange. */
    color:#fb5a29;
  }
  .line--3 em{
    font-style:normal;
    color:var(--navy);
  }
  .hero__title em{
    display:inline-block;
    will-change:transform;
  }
  /* пакмэн-точка: слот с точкой-«едой» и пунктирным следом */
  .dot-slot{
    display:inline-block;
    width:.24em; height:.24em;
    position:relative;
    margin-left:.07em;
    vertical-align:baseline;
  }
  .dot-slot::before{
    content:'';
    position:absolute;
    inset:0;
    border:2px dashed var(--carbon);
    border-radius:50%;
    opacity:0;
    transition: opacity .3s;
  }
  .dot-slot .dot-token{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:var(--carbon);
    transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s;
  }
  .dot-slot.is-empty::before{ opacity:1; }
  .dot-slot.is-fresh::before{ opacity:0; }
  .dot-slot.is-empty .dot-token{ transform:scale(0); opacity:0; }
  @keyframes reveal-up{
    to{ opacity:1; transform:translateY(0); }
  }

  /* направления студии — чипы-ярлыки сразу под заголовком (что мы делаем) */
  .hero__dirs{
    position:relative;
    z-index:6;
    display:flex;
    flex-wrap:wrap;
    gap:.55rem .6rem;
    max-width:820px;
    margin: clamp(1.5rem,2.8vw,2.2rem) 0 0 .3rem;
    opacity:0;
    animation: reveal-up .9s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:.5s;
  }
  .hero__dir{
    font-size:.72rem;
    letter-spacing:.07em;
    padding:.45rem .8rem;
    border:2px solid var(--carbon);
    background:var(--paper);
    box-shadow:3px 3px 0 var(--carbon);
    color:var(--carbon);
    white-space:nowrap;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
  .hero__dir:hover{
    transform: translate(-2px,-2px);
    box-shadow:5px 5px 0 var(--orange);
  }
  .hero__dir:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  @media (max-width:640px){
    .hero__dirs{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:.45rem .5rem;
      max-width:420px;
    }
    .hero__dir{
      white-space:normal;
      text-align:center;
      font-size:.6rem;
      padding:.35rem .5rem;
      line-height:1.35;
    }
  }
  .hero__sub{
    position:relative;
    z-index:6;
    max-width:46ch;
    margin: clamp(1.2rem,2.2vw,1.8rem) 0 0 .3rem;
    font-size:clamp(1rem,1.3vw,1.15rem);
    color:var(--ink-body);
    opacity:0;
    animation: reveal-up .9s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:.62s;
  }

  .hero__cta{
    position:relative;
    z-index:6;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin: clamp(2rem,3.4vw,2.8rem) 0 0 .3rem;
    opacity:0;
    animation: reveal-up .9s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:.74s;
  }
  /* канон Q-305: хиро остаётся одним экраном — на низких вьюпортах чипы и
     отступы сжимаются, отдавая высоту кнопкам и «Листайте».
     ⚠ Блок обязан идти ПОСЛЕ базовых .hero__sub/.hero__cta: они задают margin
     шорткатом, при равной специфичности выигрывает последний в файле. */
  @media (max-height:820px){
    .hero{ padding-top:1rem; padding-bottom:1.4rem; }
    .hero__dirs{ margin-top:.8rem; gap:.4rem .45rem; }
    .hero__dir{ font-size:.6rem; padding:.28rem .55rem; box-shadow:2px 2px 0 var(--carbon); }
    .hero__sub{ margin-top:.7rem; }
    .hero__cta{ margin-top:1rem; }
  }
  @media (max-width:640px) and (max-height:760px){
    .hero{ padding-top:.7rem; padding-bottom:.9rem; }
    .hero__dirs{ margin-top:.5rem; gap:.35rem .4rem; }
    .hero__dir{ font-size:.56rem; padding:.28rem .45rem; }
    .hero__sub{ margin-top:.5rem; font-size:.95rem; }
    .hero__cta{ margin-top:.7rem; }
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-size:.85rem;
    font-weight:600;
    padding: 1rem 1.7rem;
    border-radius:999px;
    border:2px solid var(--carbon);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), background-color .25s, color .25s;
  }
  .btn--primary{
    background:var(--carbon);
    color:var(--paper);
    box-shadow: 4px 4px 0 var(--orange);
  }
  .btn--primary:hover{
    background:var(--paper);
    color:var(--carbon);
    transform: translate(-3px,-3px);
    box-shadow: 7px 7px 0 var(--orange);
  }
  .btn--ghost{
    background:transparent;
    color:var(--carbon);
  }
  .btn--ghost:hover{
    background:var(--carbon);
    color:var(--paper);
    transform: translate(-3px,-3px);
    box-shadow: 7px 7px 0 var(--navy);
  }
  /* CTA в шапке — тот же btn--primary, но компактнее: у холодного
     посетителя должно быть действие на первом экране, не только внизу */
  .topbar__cta{
    padding:.7rem 1.3rem;
    font-size:.78rem;
    flex:none;
    white-space:nowrap;
  }

  /* ============ ROUTE RAIL (скролл-прогресс А→Б) ============ */
  .rail{
    position:fixed;
    left: clamp(8px, 1.2vw, 22px);
    top: 128px;
    bottom: 26px;
    width: 30px;
    z-index:-1; /* под всем контентом: рельса — фон, не передний план */
    pointer-events:none;
  }
  .rail__track{
    position:absolute;
    left:50%; top:32px; bottom:36px;
    width:2px;
    background:#e4e4e4;
    transform:translateX(-50%);
  }
  .rail__fill{
    position:absolute;
    left:50%; top:32px; bottom:36px;
    width:2px;
    background: linear-gradient(180deg, var(--orange), var(--navy));
    transform:translateX(-50%);
    clip-path: inset(0 0 100% 0);
  }
  @keyframes rail-reveal{ to{ clip-path: inset(0 0 0% 0); } }
  @supports (animation-timeline: scroll()){
    .rail__fill{
      animation: rail-reveal linear both;
      animation-timeline: scroll(root);
    }
  }
  @supports not (animation-timeline: scroll()){
    .rail__fill{ clip-path: inset(0 0 0 0); opacity:.45; }
  }
  .rail__a{
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:24px; height:24px;
    border:6px solid var(--orange);
    border-radius:50%;
    background:var(--paper);
  }
  .rail__b{
    position:absolute;
    bottom:0; left:50%;
    transform:translateX(-50%);
    width:26px; height:26px;
    border-radius:50%;
    background:var(--navy);
  }

  /* ============ MARQUEE ============ */
  .marquee{
    position:relative;
    overflow:hidden;
    border-top:2px solid var(--carbon);
    border-bottom:2px solid var(--carbon);
    background:var(--carbon);
    padding: clamp(1rem,1.6vw,1.4rem) 0;
  }
  .marquee__track{
    display:flex;
    width:max-content;
    animation: marquee-left 26s linear infinite;
  }
  .marquee--reverse .marquee__track{
    animation-name: marquee-right;
  }
  .marquee:hover .marquee__track{
    animation-play-state: paused;
  }
  .marquee__seg{
    display:flex;
    align-items:center;
    flex:none;
  }
  .marquee__item{
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem,2.6vw,2.3rem);
    color:var(--paper);
    padding: 0 clamp(1.2rem,2vw,2rem);
    white-space:nowrap;
  }
  .marquee__item--accent{ color:var(--orange); }
  .marquee__item--navy{ color:#7d93d1; }
  .marquee__dot{
    width:10px; height:10px;
    border-radius:50%;
    background:var(--chartreuse);
    flex:none;
  }
  @keyframes marquee-left{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  @keyframes marquee-right{
    from{ transform: translateX(-50%); }
    to{ transform: translateX(0); }
  }

  /* ============ IDEA ============ */
  .idea{
    position:relative;
    z-index:0;
    padding: clamp(4.5rem,9vw,7.5rem) clamp(1.2rem,4vw,3.5rem);
  }
  .idea::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--tint);
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%);
    z-index:-1;
  }
  /* фактуры фона для смены ритма между блоками:
     bg-tint — косая тинт-панель (как .idea/.case),
     bg-grid — «миллиметровка», чертёжная сетка в цвет диска Б */
  /* косая тинт-панель сама отделяет блок — верхняя линия секции лишняя.
     Селектор специфичнее правил самих секций, поэтому без !important */
  section.bg-tint, .cta-band.bg-tint, .idea.bg-tint{ position:relative; z-index:0; border-top:0; }
  .bg-tint{ position:relative; z-index:0; }
  .bg-tint::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--tint);
    z-index:-1;
  }
  .bg-tint--rise::before{ clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%); }
  .bg-tint--fall::before{ clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%); }
  @media (max-width:860px){
    .bg-tint--rise::before{ clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%); }
    .bg-tint--fall::before{ clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%); }
  }
  .bg-grid{
    background-image:
      repeating-linear-gradient(0deg, rgba(30,56,120,.055) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(30,56,120,.055) 0 1px, transparent 1px 28px);
    background-size: 100% 100%;
  }
  .idea__label{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-size:.8rem;
    color:var(--steel);
    margin-bottom: clamp(1.2rem,2.4vw,1.8rem);
  }
  .idea__label::before{
    content:'';
    width:8px; height:8px;
    border-radius:50%;
    background:var(--orange);
    animation: dot-pulse 2.6s ease-in-out infinite;
  }
  @keyframes dot-pulse{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.55); opacity:.55; }
  }
  /* переворот точки-маркера под курсором */
  .idea__label:hover::before,
  .how__label:hover::before{
    animation: dot-flip .7s cubic-bezier(.34,1.56,.64,1);
    background:var(--navy);
  }
  @keyframes dot-flip{
    0%{ transform:rotateY(0) scale(1); }
    50%{ transform:rotateY(180deg) scale(1.7); }
    100%{ transform:rotateY(360deg) scale(1); }
  }
  /* карта модулей: кольцо А → чипы-модули на пунктирном маршруте → диск Б */
  .route-map{
    display:flex;
    align-items:center;
    gap: clamp(.5rem,1.2vw,.9rem);
    max-width:880px;
    margin: clamp(1.4rem,2.6vw,2rem) 0 .8rem;
  }
  .route-map__a{
    flex:none;
    width:22px; height:22px;
    border:6px solid var(--orange);
    border-radius:50%;
    background:var(--paper);
    box-sizing:border-box;
  }
  .route-map__b{
    flex:none;
    width:22px; height:22px;
    border-radius:50%;
    background:var(--navy);
  }
  .route-map__dash{
    flex:1 1 16px;
    min-width:12px;
    height:0;
    border-top:2px dashed var(--rule-dashed);
  }
  .route-map__mod{
    flex:none;
    font-size:.72rem;
    letter-spacing:.07em;
    padding:.4rem .75rem;
    border:2px solid var(--carbon);
    background:var(--paper);
    box-shadow:3px 3px 0 var(--carbon);
    white-space:nowrap;
  }
  .route-map__cap{
    font-size:.92rem;
    color:var(--ink-body);
    max-width:56ch;
    margin-bottom: clamp(1.8rem,3vw,2.4rem);
  }
  @media (max-width:640px){
    .route-map{
      flex-direction:column;
      align-items:center;
      gap:.55rem;
      max-width:none;
    }
    .route-map__dash{
      flex:none;
      width:0; height:16px;
      border-top:0;
      border-left:2px dashed var(--rule-dashed);
    }
    .route-map__cap{ text-align:center; margin-left:auto; margin-right:auto; }
  }

  /* бенто-мозаика кейсов на главной: лид → три трети → две половины */
  .cbento{
    display:grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: clamp(1rem,2vw,1.6rem);
    max-width:1180px;
    margin-bottom: clamp(1.6rem,2.8vw,2.2rem);
  }
  .cbento__lead,
  .cbento__cell,
  .cbento__half{
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.2rem,2.2vw,1.7rem);
    position:relative;
  }
  .cbento__lead{
    grid-column:1/-1;
    padding: clamp(1.4rem,2.6vw,2.2rem);
  }
  .cbento__cell{ grid-column: span 2; }
  .cbento__half{ grid-column: span 3; }
  /* семантика теней: оранж = сторона А, navy = сторона Б, шартрез = спотлайт,
     пунктир без тени = вспомогательное/приглашение */
  .cbento__cell--a{ box-shadow: 6px 6px 0 var(--orange); }
  .cbento__cell--b{ box-shadow: 6px 6px 0 var(--navy); }
  .cbento__cell--route{
    border-style:dashed;
    border-color:var(--rule-dashed);
    box-shadow:none;
    background:transparent;
  }
  .cbento__title{
    font-size:clamp(1.6rem,3vw,2.3rem);
    margin-bottom:.6rem;
  }
  .cbento__text{
    color:var(--ink-body);
    font-size:clamp(.98rem,1.2vw,1.08rem);
    max-width:64ch;
  }
  .cbento__tag{
    display:block;
    font-size:.72rem;
    letter-spacing:.07em;
    color:var(--steel);
    margin-bottom:.7rem;
  }
  .cbento__tag--a{ color:var(--orange-ink); }
  .cbento__tag--b{ color:var(--navy); }
  .cbento__mark{
    position:absolute;
    top: clamp(1.1rem,2vw,1.5rem);
    right: clamp(1.2rem,2.2vw,1.7rem);
    width:20px; height:20px;
    border-radius:50%;
    box-sizing:border-box;
  }
  .cbento__mark--a{ border:5px solid var(--orange); background:var(--paper); }
  .cbento__mark--b{ background:var(--navy); }
  .cbento__cell-text{
    font-size:.98rem;
    color:var(--ink-body);
    line-height:1.55;
  }
  .cbento__cell-text a{ color:var(--navy); text-decoration:underline; text-underline-offset:.2em; }
  .cbento__cell-text a:hover{ color:var(--orange); }
  .cbento__route{ list-style:none; margin:0; padding:0; }
  .cbento__route li{
    font-size:.88rem;
    color:var(--ink-body);
    padding:.32rem 0;
    border-top:1px dashed var(--rule-faint);
  }
  .cbento__route li:first-child{ border-top:0; padding-top:0; }
  .cbento__route .step-num{
    color:var(--orange-ink);
    font-weight:700;
    font-size:.78rem;
    margin-right:.5rem;
  }
  .cbento__half--delta{
    display:block;
    color:inherit;
    padding-bottom:2.8rem;
    box-shadow: 6px 6px 0 var(--chartreuse);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
  /* закон теней: на экран не больше трёх цветных. Шартрез — спотлайт факта,
     поэтому он у карточки с выделенной цифрой; вторая карточка держит
     базовую карбоновую, иначе в блоке оказывается четыре цветные тени */
  .cbento__half--delta + .cbento__half--delta{ box-shadow: var(--shadow-hard); }
  .cbento__half--delta:hover{
    transform: translate(-3px,-3px);
    box-shadow: 9px 9px 0 var(--orange);
  }
  .cbento__mark-fact{
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
    color:inherit;
    font-weight:700;
  }
  .cbento__go{
    position:absolute;
    right: clamp(1.2rem,2.2vw,1.7rem);
    bottom:1.1rem;
    font-size:.78rem;
    letter-spacing:.05em;
    color:var(--steel);
    transition: color .25s, transform .25s;
  }
  .cbento__half--delta:hover .cbento__go{ color:var(--orange); transform:translateX(4px); }
  @media (max-width:900px){
    .cbento__cell,
    .cbento__half{ grid-column:1/-1; }
  }

  /* тёмная стат-лента: цифры-доказательства под хиро (структурное ребро,
     принцип «ритм светимостью» — тёмная полоса на светлой базе, не тёмная тема) */
  .statband{
    background:var(--carbon);
    padding: clamp(1.7rem,3.2vw,2.6rem) clamp(1.2rem,4vw,3.5rem);
  }
  .statband__inner{
    /* без margin:auto: вся сетка сайта левосторонняя (плакат + рельса),
       центрированная лента на широких экранах выбивалась бы из ритма */
    max-width:1180px;
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(1.2rem,2.6vw,2.4rem);
    align-items:start;
  }
  .statband__num{
    display:block;
    font-size:clamp(1.45rem,2.5vw,2.05rem);
    font-weight:700;
    color:var(--chartreuse);
    line-height:1.1;
    margin-bottom:.45rem;
    white-space:nowrap;
  }
  .statband__label{
    display:block;
    font-size:.66rem;
    letter-spacing:.07em;
    color:rgba(255,255,255,.68);
    line-height:1.55;
    max-width:24ch;
  }
  @media (max-width:900px){
    .statband__inner{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap:1.4rem; }
  }
  @media (max-width:480px){
    .statband__inner{ grid-template-columns: minmax(0,1fr); }
    .statband__label{ max-width:none; }
  }

  /* блок болей: точка А (сейчас) → точка Б (с нами), три пары строк */
  .pains__title{
    font-size:clamp(1.8rem,3.8vw,2.9rem);
    max-width:24ch;
    margin-bottom: clamp(2rem,3.8vw,3rem);
  }
  .pains{
    display:grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    column-gap: clamp(1.2rem,2.8vw,2.6rem);
    max-width:1080px;
    /* собранность: таблица болей — лист поверх тинт-панели */
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.3rem,2.4vw,2rem) clamp(1.4rem,2.6vw,2.2rem);
  }
  .pains__head{
    font-size:.72rem;
    letter-spacing:.08em;
    padding-bottom:.7rem;
    border-bottom:2px solid var(--carbon);
  }
  .pains__head--a{ color:var(--orange-ink); }
  .pains__head--b{ color:var(--navy); }
  .pains__head-gap{ border-bottom:2px solid var(--carbon); }
  .pains__cell{
    position:relative;
    margin:0;
    padding: clamp(1.1rem,2vw,1.5rem) 0 clamp(1.1rem,2vw,1.5rem) 2rem;
    border-bottom:1px dashed #b9c0d0;
    color:var(--ink-body);
    font-size:.98rem;
    line-height:1.55;
  }
  .pains__cell::before{
    content:'';
    position:absolute;
    left:0;
    top: calc(clamp(1.1rem,2vw,1.5rem) + .18em);
    width:15px; height:15px;
    border-radius:50%;
    box-sizing:border-box;
  }
  .pains__cell--a::before{ border:4px solid var(--orange); background:transparent; }
  .pains__cell--b::before{ background:var(--navy); }
  .pains__cell a{ color:var(--navy); text-underline-offset:.2em; }
  .pains__cell a:hover{ color:var(--orange); }
  .pains__arrow{
    display:flex;
    align-items:center;
    color:var(--orange-ink);
    font-weight:700;
    font-size:1.25rem;
    border-bottom:1px dashed #b9c0d0;
  }
  .pains__sum{
    margin-top: clamp(1.8rem,3vw,2.4rem);
    font-size:clamp(1.02rem,1.3vw,1.15rem);
    color:var(--carbon);
    max-width:60ch;
  }
  .pains__sum a{ color:var(--navy); text-underline-offset:.2em; }
  .pains__sum a:hover{ color:var(--orange); }
  @media (max-width:860px){
    .pains{ display:block; border-top:2px solid var(--carbon); }
    .pains__head{ display:inline-block; border-bottom:0; padding:.8rem 0 .2rem; }
    .pains__head-gap{ display:none; }
    .pains__head--b{ margin-left:1.2rem; }
    .pains__arrow{ display:none; }
    .pains__cell{ border-bottom:0; padding-top:.5rem; padding-bottom:.5rem; }
    .pains__cell--b{ border-bottom:1px dashed #b9c0d0; padding-bottom:1.2rem; margin-bottom:.9rem; }
  }

  /* манифест-цитата (страница «Подход») */
  .creed{
    padding: clamp(3.4rem,6vw,5rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .creed__quote{ margin:0; max-width:920px; }
  .creed__quote p{
    font-size:clamp(1.7rem,3.6vw,2.9rem);
    font-weight:700;
    line-height:1.14;
    max-width:20ch;
    font-family:'Golos Text','Golos Text Fallback',sans-serif;
    letter-spacing:normal;
  }
  .creed__quote mark{
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
    color:inherit;
  }
  .creed__src{
    margin-top: clamp(1.1rem,2vw,1.5rem);
    font-size:clamp(1rem,1.25vw,1.1rem);
    color:var(--ink-body);
    max-width:52ch;
  }

  /* ============ NUM-OUTLINE (единый стиль нумерации ступеней, Q-324) ===
     Один источник правды для всех цифр-нумераций: контур Unbounded 800 +
     paper-заливка + carbon text-stroke (вкус владельца — «стиль скрина №4»,
     т.е. бывший .how__num). Классы ниже (.svc-mini__num/.svc__num/.how__num/
     .prosto__num/.tech__num) подключают этот класс в HTML и переопределяют
     только font-size (иерархия: тизер на главной мельче полноразмерных
     ступеней) и hover-цвет своей секции. .case__route/.step-num — другая
     роль (мини-индекс внутри маршрута кейса), в эту систему не входит. */
  .num-outline{
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:800;
    line-height:1;
    color:var(--paper);
    /* обводка в em — масштабируется с кеглем: у крупных цифр ~2px,
       у мелких ~1px, просветы не забиваются («грязные» мелкие цифры) */
    -webkit-text-stroke: 0.04em var(--carbon);
    transition: color .3s, -webkit-text-stroke-color .3s;
  }

  /* ============ HOW (процесс + морфинг А→Б) ============ */
  .how{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem,5vw,4.5rem);
    align-items:start;
    timeline-scope: --howtl;
  }
  .how__label{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-size:.8rem;
    color:var(--steel);
    margin-bottom: clamp(1.4rem,2.6vw,2rem);
  }
  .how__label::before{
    content:'';
    width:8px; height:8px;
    border-radius:50%;
    background:var(--orange);
    animation: dot-pulse 2.6s ease-in-out infinite;
  }
  .how__steps{
    view-timeline: --howtl block;
    display:flex;
    flex-direction:column;
  }
  .how__step{
    display:grid;
    grid-template-columns: minmax(76px,auto) 1fr;
    gap: clamp(1rem,2.5vw,2rem);
    align-items:start;
    padding: clamp(1.4rem,2.6vw,2rem) 0;
    border-top:2px solid var(--carbon);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .how__step:last-child{ border-bottom:2px solid var(--carbon); }
  .how__step:hover{ transform: translateX(12px); }
  .how__num{
    font-size:clamp(2rem,4vw,3.2rem);
  }
  .how__step:hover .how__num{
    color:var(--orange);
    -webkit-text-stroke-color: var(--orange);
  }
  .how__body h3{
    font-size:clamp(1.15rem,1.8vw,1.5rem);
    margin-bottom:.45rem;
  }
  .how__body p{
    max-width:52ch;
    color:var(--ink-body);
    font-size:clamp(.95rem,1.2vw,1.05rem);
    line-height:1.55;
  }
  .how__scene{
    position:sticky;
    top:16vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.2rem;
    padding: clamp(1.5rem,3vw,2.5rem) 0;
  }
  .how__scene svg{
    width:min(100%, 280px);
    height:auto;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  .how__scene svg:hover{
    transform: rotate(14deg) scale(1.06);
  }
  .how__caption{
    font-size:.78rem;
    letter-spacing:.14em;
    color:var(--steel);
    text-transform:uppercase;
  }
  #how-shape{ transform-origin:32px 32px; }
  /* 4 стопа (было 0/50/100) под 5 шагов процесса — каждый доп. стоп
     интерполирует ту же кривую r/stroke-width/rotate/цвет, что была
     в трёхточечной версии, просто с более мелким шагом, чтобы темп
     морфинга совпадал с количеством строк .how__step */
  @keyframes how-morph{
    0%{ r:22; stroke-width:8; stroke:#ff5b29; transform:rotate(0deg); }
    33%{ r:20; stroke-width:15; stroke:#9f7376; transform:rotate(66deg); }
    66%{ r:17.7; stroke-width:22.5; stroke:#546892; transform:rotate(145deg); }
    100%{ r:15; stroke-width:30; stroke:#1E3878; transform:rotate(240deg); }
  }
  @supports (animation-timeline: scroll()){
    #how-shape{
      animation: how-morph linear both;
      animation-timeline: --howtl;
      animation-range: cover 0% cover 100%;
    }
  }
  @supports not (animation-timeline: scroll()){
    #how-shape{ r:18; stroke-width:20; stroke:#3d5a99; }
  }
  @media (prefers-reduced-motion: reduce){
    #how-shape{ animation:none !important; r:18; stroke-width:20; stroke:#3d5a99; }
    .rail__fill{ animation:none !important; clip-path: inset(0 0 0 0); }
  }

  /* ============ TECH (ИИ и автоматизация + робот) ============ */
  .tech{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    display:grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(2rem,5vw,4.5rem);
    align-items:center;
    border-top:2px solid var(--carbon);
  }
  .tech__label{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-size:.8rem;
    color:var(--steel);
    margin-bottom: clamp(1.2rem,2.2vw,1.8rem);
  }
  .tech__label::before{
    content:'';
    width:8px; height:8px;
    border-radius:50%;
    background:var(--navy);
    animation: dot-pulse 2.6s ease-in-out infinite;
    animation-delay:.65s;
  }
  .tech__h{
    font-size:clamp(1.8rem,3.6vw,3rem);
    line-height:1.1;
    margin-bottom: clamp(1rem,1.8vw,1.4rem);
    max-width:18ch;
  }
  .tech__h mark{
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
    color:inherit;
  }
  .tech__intro{
    max-width:52ch;
    color:var(--ink-body);
    font-size:clamp(1rem,1.25vw,1.1rem);
    margin-bottom: clamp(1.6rem,2.6vw,2.2rem);
  }
  /* заметный абзац-предупреждение перед списком направлений: продукт —
     не автогенерация; крупнее и жирнее tech__note (тот — мелкая ремарка
     внизу списка, этот — заявление на видном месте, план v2 §09) */
  .tech__disclaimer{
    max-width:56ch;
    /* закон акцентов: оранж = точка А и интерактив; редакционная рамка — карбон */
    border-left:3px solid var(--carbon);
    padding: .2rem 0 .2rem 1.1rem;
    margin-bottom: clamp(2rem,3.2vw,2.6rem);
    font-size:clamp(.98rem,1.2vw,1.05rem);
    color:var(--carbon);
    line-height:1.55;
  }
  .tech__disclaimer strong{ color:var(--carbon); }
  .tech__list{ list-style:none; }
  .tech__item{
    display:grid;
    grid-template-columns: minmax(56px,auto) 1fr;
    gap: clamp(.9rem,2vw,1.6rem);
    align-items:start;
    padding: clamp(1rem,1.8vw,1.3rem) 0;
    border-top:2px solid var(--carbon);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .tech__item:last-child{ border-bottom:2px solid var(--carbon); }
  .tech__item:hover{ transform: translateX(10px); }
  .tech__num{
    font-size:clamp(1.5rem,2.4vw,1.9rem);
  }
  .tech__item:hover .tech__num{
    color:var(--navy);
    -webkit-text-stroke-color: var(--navy);
  }
  .tech__item h3{
    font-size:clamp(1.05rem,1.5vw,1.25rem);
    margin-bottom:.3rem;
  }
  .tech__item p{
    font-size:clamp(.92rem,1.15vw,1rem);
    color:var(--ink-body);
    max-width:56ch;
    line-height:1.5;
  }
  .tech__note{
    margin-top: clamp(1.2rem,2vw,1.6rem);
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.82rem;
    color:var(--steel);
    max-width:52ch;
    line-height:1.6;
  }
  .tech__scene{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.1rem;
  }
  .tech__scene svg{
    width:min(100%, 320px);
    height:auto;
    overflow:visible;
  }
  .robot{ cursor:none; }
  .robot *{ transform-box: fill-box; }
  .robot__head-group{ transform-origin:100px 130px; transition: transform .4s cubic-bezier(.22,1,.36,1); }
  .robot__tip{
    animation: robot-ping 2.4s ease-in-out infinite;
    transform-origin:center;
  }
  @keyframes robot-ping{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.45; transform:scale(1.35); }
  }
  .robot.is-hi .robot__tip{ animation-duration:.7s; }
  .robot__arm-r{
    transform-origin: 4px 6px;
  }
  .robot.is-hi .robot__arm-r{
    animation: robot-wave .9s ease-in-out 2;
  }
  @keyframes robot-wave{
    0%,100%{ transform: rotate(0deg); }
    30%{ transform: rotate(-58deg); }
    55%{ transform: rotate(-30deg); }
    80%{ transform: rotate(-58deg); }
  }
  .robot__mouth--smile{ display:none; }
  .robot.is-hi .robot__mouth--flat{ display:none; }
  .robot.is-hi .robot__mouth--smile{ display:block; }
  .robot__caption{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.78rem;
    letter-spacing:.14em;
    color:var(--steel);
    text-transform:uppercase;
  }

  /* ============ CASE ============ */
  .case{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem) clamp(5rem,9vw,7rem);
    /* чередование фонов: кейс — тонированная панель, зеркальная
       диагонали «Идеи» (наклон в другую сторону) */
    position:relative;
    z-index:0;
  }
  .case::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--tint);
    clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%);
    z-index:-1;
  }
  @media (max-width: 860px){
    .case::before{ clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%); }
  }
  .case__label{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    font-size:.8rem;
    color:var(--steel);
    margin-bottom: clamp(1.6rem,3vw,2.4rem);
  }
  .case__label::before{
    content:'';
    width:8px; height:8px;
    background:var(--navy);
    animation: dot-pulse 2.6s ease-in-out infinite;
    animation-delay:1.3s;
    transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .3s;
  }
  .case__label:hover::before{
    animation:none;
    transform:rotate(135deg) scale(1.4);
    background:var(--orange);
  }
  .case__more{
    max-width:920px;
    margin: clamp(1.4rem,2.4vw,2rem) clamp(0px,4vw,3rem) 0;
  }
  /* ============ PGRID (страница «Проекты» — сетка карточек) =========
     Единая анатомия карточки, разные фактуры: главный проект — лист во
     всю ширину, остальные по половине; тинт, миллиметровка и пунктир
     разводят их между собой без дополнительных разделителей. */
  .pgrid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(1.2rem,2.4vw,2rem);
    padding: clamp(2rem,4vw,3rem) clamp(1.2rem,4vw,3.5rem) clamp(3rem,6vw,4.5rem);
    max-width:1180px;
    align-items:start;
  }
  .pcard{
    display:flex;
    flex-direction:column;
    padding: clamp(1.4rem,2.6vw,2rem);
    border:2px solid var(--carbon);
  }
  .pcard--wide{
    grid-column:1/-1;
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(1.6rem,3vw,2.6rem);
    align-items:start;
  }
  /* фактуры карточек */
  .pcard--sheet{ background:var(--paper); box-shadow: var(--shadow-hard); }
  .pcard--tint{ background:var(--tint); box-shadow: 6px 6px 0 var(--navy); }
  /* на цветной подложке серый выглядит выцветшим — берём тёмный оттенок фона */
  .pcard--tint .pcard__label{ color:var(--ink-on-tint); }
  .pcard--grid{
    background-color:var(--paper);
    background-image:
      repeating-linear-gradient(0deg, rgba(30,56,120,.06) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(30,56,120,.06) 0 1px, transparent 1px 28px);
  }
  .pcard--dashed{ border-style:dashed; border-color:var(--rule-dashed); }
  .pcard--slot{
    border-style:dashed;
    border-color:var(--rule-dashed);
    background:transparent;
  }
  .pcard__body{ min-width:0; }
  .pcard__head{
    display:flex;
    align-items:center;
    gap:.8rem;
    margin-bottom:.7rem;
  }
  .pcard__head--status{ justify-content:space-between; }
  .pcard__logo{ flex:none; line-height:0; }
  .pcard__logo svg{ display:block; border-radius:8px; }
  .pcard__label{
    display:block;
    font-size:.72rem;
    letter-spacing:.07em;
    color:var(--steel);
    margin-bottom:.6rem;
  }
  .pcard__head .pcard__label{ margin-bottom:0; }
  .pcard__status{
    font-size:.66rem;
    letter-spacing:.07em;
    padding:.2rem .6rem;
    border:1px solid var(--carbon);
    background:var(--chartreuse);
    font-weight:700;
    white-space:nowrap;
  }
  .pcard__title{
    font-size:clamp(1.2rem,2vw,1.6rem);
    margin-bottom:.5rem;
  }
  .pcard--wide .pcard__title{ font-size:clamp(1.35rem,2.4vw,1.9rem); }
  .pcard__title--slot{ color:var(--steel); }
  .pcard__ab{
    font-size:.82rem;
    color:var(--carbon);
    padding-bottom: clamp(.9rem,1.6vw,1.2rem);
    margin-bottom: clamp(.9rem,1.6vw,1.2rem);
    border-bottom:1px dashed var(--rule-soft);
  }
  .pcard__text{
    font-size:.95rem;
    color:var(--ink-body);
    line-height:1.55;
  }
  .pcard__text a{ color:var(--navy); text-decoration:underline; text-underline-offset:.2em; }
  .pcard__text a:hover{ color:var(--orange); }
  /* цифры проекта */
  .pcard__stats{
    display:flex;
    flex-wrap:wrap;
    gap: clamp(1rem,2.2vw,1.8rem);
    padding: clamp(.9rem,1.6vw,1.2rem) 0;
    border-top:2px solid var(--carbon);
    border-bottom:2px solid var(--carbon);
    margin-bottom: clamp(1rem,1.8vw,1.4rem);
  }
  .pcard__stat{ display:flex; flex-direction:column; gap:.15rem; }
  .pcard__stat-num{
    font-size:clamp(1.2rem,2vw,1.6rem);
    font-weight:700;
    line-height:1;
  }
  .pcard__stat-label{ font-size:.76rem; color:var(--steel); max-width:16ch; }
  /* превью и сравнение */
  .pcard__preview{
    display:block;
    margin-bottom: clamp(1rem,1.8vw,1.4rem);
    border:2px solid var(--carbon);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
  .pcard__preview:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--orange); }
  .pcard__preview img{ display:block; width:100%; height:auto; }
  .pcard__compare{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(.7rem,1.4vw,1.1rem);
    align-items:start;
  }
  .pcard__shot{ margin:0; min-width:0; }
  .pcard__shot .bframe,
  .pcard__shot .case__preview{ display:block; border:2px solid var(--carbon); }
  .pcard__shot--old .bframe{ border-style:dashed; border-color:#c6c6c6; }
  .pcard__shot img{ display:block; width:100%; height:auto; }
  .pcard__shot--old img{ filter:grayscale(.65) contrast(.92); opacity:.9; }
  .pcard__cap{
    margin-top: clamp(.8rem,1.4vw,1.1rem);
    font-size:.72rem;
    letter-spacing:.05em;
    color:var(--carbon);
    line-height:1.6;
  }
  .pcard__details{ margin-top:auto; padding-top: clamp(.8rem,1.4vw,1.1rem); }
  .pcard__details-body{ padding-top:1rem; }
  .pcard__details-body p{ font-size:.92rem; color:var(--ink-body); line-height:1.55; margin-bottom:.9rem; }
  .pcard__route{
    font-size:.76rem;
    color:var(--steel);
    line-height:1.7;
  }
  .pcard__soon-tag{
    display:inline-block;
    width:fit-content;
    font-size:.7rem;
    letter-spacing:.07em;
    padding:.25rem .6rem;
    background:var(--chartreuse);
    border:1px solid var(--carbon);
    font-weight:700;
    margin-bottom:.8rem;
  }
  @media (max-width:900px){
    .pgrid{ grid-template-columns:minmax(0,1fr); max-width:620px; }
    .pcard--wide{ grid-template-columns:minmax(0,1fr); }
  }
  @media (max-width:480px){
    .pcard__compare{ grid-template-columns:minmax(0,1fr); }
  }
  @media (max-width:860px){
  }
  @media (max-width:860px){
  }
  .case__ab-arrow{ color:#b53a0c; font-weight:700; }
  .pcard .quote-row__value{ white-space:normal; flex:1 1 auto; min-width:0; text-align:right; }
  /* превью сайта — кликабельный скриншот, рамка в языке бланка */
  .case__preview{
    display:inline-block;
    max-width:420px;
    width:100%;
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
  .case__preview:hover{
    transform: translate(-3px,-3px);
    box-shadow: 9px 9px 0 var(--carbon);
  }
  .case__preview:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  .case__preview img{ display:block; width:100%; height:auto; }
  .case__compare-tag{
    display:inline-block;
    font-size:.72rem;
    letter-spacing:.08em;
    padding:.2rem .55rem;
    border:1px solid var(--steel);
    color:var(--steel);
    margin-bottom:.55rem;
  }
  .case__compare-tag--new{
    border-color:var(--carbon);
    color:var(--carbon);
    background:var(--chartreuse);
    font-weight:700;
  }
  /* браузер-рамка: единая подача скринов живых сайтов */
  .bframe{ display:block; }
  .bframe__bar{
    display:flex;
    align-items:center;
    gap:5px;
    padding:.32rem .55rem;
    background:var(--carbon);
  }
  .bframe__bar i{
    width:7px; height:7px;
    border-radius:50%;
    background:#8d8d8d;
  }
  .bframe__url{
    margin-left:.5rem;
    font-size:.62rem;
    letter-spacing:.04em;
    color:#d5d5d5;   /* полоса адреса тёмная — текст светлый */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .bframe--old{
    border:2px dashed #c6c6c6;
  }
  .bframe--old .bframe__bar{ background:#5f6474; }
  .bframe--old .bframe__url{ color:#ffffff; }
  .case__timeline-mark{
    background: linear-gradient(180deg, transparent 55%, var(--chartreuse) 55%);
    color:var(--carbon);
    font-weight:700;
  }
  .case__ba-note{
    margin-top: .9rem;
    font-size:.85rem;
    line-height:1.5;
    color:var(--steel);
    max-width:52ch;
  }
  .case__ba-note--ai{ color:var(--ink-body); }
  .case__ba-note--ai mark{
    background: linear-gradient(180deg, transparent 60%, var(--chartreuse) 60%);
    color:inherit;
    font-weight:700;
  }
  @media (max-width:960px){
  }
  @media (max-width:640px){
  }
  .case__details-summary{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding: clamp(.7rem,1.4vw,.9rem) 0;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.88rem;
    letter-spacing:.03em;
    color:var(--navy);
    cursor:pointer;
    list-style:none;
    border-top:1px dashed var(--rule-soft);
    width:100%;
  }
  .case__details-summary::-webkit-details-marker{ display:none; }
  .case__details-summary::marker{ content:''; }
  .case__details-summary::after{
    content:'+';
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-weight:400;
    font-size:1.2rem;
    color:var(--orange);
  }
  .case__details-summary:hover{ color:var(--orange); }
  .case__details-summary:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  /* расширенная инфографика «до/после» — два ряда, честно с периодом */
  .case__ba{
    max-width:520px;
    margin: clamp(1.8rem,2.8vw,2.4rem) 0 0 clamp(0px,4vw,3rem);
    padding-top: clamp(1.1rem,2vw,1.5rem);
    border-top:1px dashed var(--rule-soft);
  }
  .case__ba-label{
    display:block;
    font-size:.72rem;
    letter-spacing:.06em;
    color:var(--steel);
    text-transform:uppercase;
    margin-bottom: clamp(.9rem,1.6vw,1.2rem);
  }
  .case__ba-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    padding: .6rem 0;
    border-top:1px dashed var(--rule-faint);
  }
  .case__ba-metric{ font-size:.98rem; color:var(--carbon); }
  .case__ba-values{ font-size:1.05rem; white-space:nowrap; }
  .case__ba-old{ color:var(--steel); }
  .case__ba-new{
    color:var(--carbon);
    font-weight:700;
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
  }
  @media (max-width:640px){
  }

  /* ============ SVC-MINI (сжатый блок услуг на главной) ============= */
  /* переиспользует язык .svc__step/.how__step (контурная моно-цифра +
     разделители-линии), но компактнее и без списков/бланков — на
     главной это витрина-ссылка, полный разбор живёт на uslugi.html */
  .svc-mini{
    padding: clamp(3rem,7vw,5rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .svc-mini h2{
    font-size:clamp(1.6rem,3.4vw,2.4rem);
    max-width:24ch;
    margin-bottom: clamp(2rem,4vw,3rem);
  }
  /* собранные карточки услуг (бенто-принцип: крупный заголовок в узком блоке) */
  .svc-mini__grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(1.1rem,2.2vw,1.8rem);
    max-width:1180px;
  }
  .svc-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.3rem,2.2vw,1.8rem);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
  .svc-card:hover{
    transform: translate(-3px,-3px);
    box-shadow: 9px 9px 0 var(--orange);
  }
  .svc-card__num{
    font-size:clamp(1.7rem,2.8vw,2.2rem);
    margin-bottom: clamp(.9rem,1.6vw,1.3rem);
  }
  .svc-card:hover .svc-card__num{ color:var(--orange); -webkit-text-stroke-color:var(--orange); }
  .svc-card__title{
    font-size:clamp(1.2rem,1.9vw,1.5rem);
    margin-bottom:.45rem;
  }
  .svc-card__text{
    font-size:.95rem;
    color:var(--ink-body);
    line-height:1.5;
    margin-bottom: clamp(1.2rem,2vw,1.6rem);
  }
  .svc-card__price{
    margin-top:auto;
    font-size:.92rem;
    font-weight:700;
    color:var(--carbon);
    padding-right:2rem;
  }
  .svc-card__price mark{
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
    color:inherit;
  }
  .svc-card__go{
    position:absolute;
    right: clamp(1.1rem,2vw,1.5rem);
    bottom: clamp(1.2rem,2.1vw,1.7rem);
    font-size:1.15rem;
    color:var(--steel);
    transition: color .25s, transform .25s;
  }
  .svc-card:hover .svc-card__go{ color:var(--orange); transform:translateX(4px); }
  @media (max-width:900px){
    .svc-mini__grid{ grid-template-columns:minmax(0,1fr); max-width:520px; }
  }
  .svc-mini__all{ margin-top: clamp(1.4rem,2.4vw,2rem); }
  .svc-mini__all a{
    font-size:.9rem;
    color:var(--steel);
    text-decoration:underline;
    text-underline-offset:.2em;
    transition: color .25s;
  }
  .svc-mini__all a:hover{ color:var(--carbon); }

  /* ============ PROOF (Честные цифры + founder-note, главная) ======= */
  /* бланк-квитанция (переиспользует .quote-row) + рамка с текстом
     основателя — замена «дашборду с метриками»/чужим логотипам, которых
     у молодой студии физически нет (план v2 §02) */
  .proof{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .proof h2{
    font-size:clamp(1.8rem,3.6vw,2.8rem);
    margin-bottom: clamp(2rem,4vw,3rem);
    max-width:18ch;
  }
  .proof__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem,5vw,4rem);
    align-items:stretch;
  }
  .proof__receipt{
    border:2px solid var(--carbon);
    background:var(--paper);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.6rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem);
  }
  .proof__receipt .quote-row{
    margin-top:0;
    padding: .6rem 0;
    border-top:1px dashed var(--rule-soft);
  }
  .proof__receipt .quote-row:first-child{
    border-top:0;
    padding-top:0;
  }
  .proof__note{
    background:var(--paper);
    border:2px dashed var(--rule-dashed);
    padding: clamp(1.6rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem);
    font-size:clamp(1rem,1.2vw,1.1rem);
    color:var(--ink-body);
    line-height:1.65;
    display:flex;
    align-items:center;
  }
  @media (max-width:860px){
    .proof__grid{ grid-template-columns:1fr; }
  }

  /* ============ CTA ============ */
  .cta{
    position:relative;
    overflow:hidden;
    padding: clamp(5rem,11vw,8.5rem) clamp(1.2rem,4vw,3.5rem);
    text-align:center;
    border-top:2px solid var(--carbon);
  }
  .cta__ring{
    position:absolute;
    top:50%;
    left:50%;
    width:min(70vw, 900px);
    height:min(70vw, 900px);
    border-radius:50%;
    border: 2px solid #e7e7e7;
    transform: translate(-50%,-50%);
    z-index:0;
    /* декорация не должна ловить клики: без этого кольцо перехватывало
       нажатие на галочку согласия под формой */
    pointer-events:none;
  }
  .cta__sub{
    position:relative;
    z-index:1;
    max-width:44ch;
    margin: 0 auto clamp(2.2rem,4vw,3rem);
    color:var(--ink-body);
    font-size: clamp(1rem,1.3vw,1.15rem);
  }
  .cta__blanks{
    position:relative;
    z-index:1;
    display:grid;
    gap:1.1rem;
    max-width:520px;
    margin: 0 auto clamp(2.2rem,3.6vw,2.8rem);
    text-align:left;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  }
  .blank{
    display:grid;
    grid-template-columns: auto 1fr;
    align-items:end;
    gap:.9rem;
  }
  .blank__label{
    font-weight:700;
    font-size:1.05rem;
  }
  .blank--a .blank__label{ color:var(--orange-ink); }
  .blank--b .blank__label{ color:var(--navy); }
  .blank__input{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:1.02rem;
    color:var(--carbon);
    border:0;
    border-bottom:2px solid var(--carbon);
    border-radius:0;
    background:transparent;
    padding:.25em 0;
    width:100%;
    outline:none;
    transition: border-color .35s;
  }
  .blank__input::placeholder{ color:#b9b9b9; }
  .blank--a:hover .blank__input,
  .blank--a .blank__input:focus{ border-color:var(--orange); }
  .blank--b:hover .blank__input,
  .blank--b .blank__input:focus{ border-color:var(--navy); }
  .blank--name .blank__label,
  .blank--channel .blank__label{ color:var(--steel); font-size:.95rem; }
  .blank--name:hover .blank__input,
  .blank--name .blank__input:focus,
  .blank--channel:hover .blank__input,
  .blank--channel .blank__input:focus{ border-color:var(--carbon); }

  .cta__risk{
    position:relative;
    z-index:1;
    max-width:46ch;
    margin: 1.1rem auto 0;
    font-size:.85rem;
    color:var(--steel);
  }

  /* ============ CTA DIRECT (прямые контакты — бланк, kontakty.html) ===
     TODO: значения — плейсхолдеры, заменить на реальные контакты
     владельца перед публикацией (см. HTML-комментарий рядом с блоком) */
  .cta__direct{
    position:relative;
    z-index:1;
    max-width:420px;
    margin: clamp(2.4rem,4vw,3.2rem) auto 0;
    border:2px solid var(--carbon);
    background:var(--paper);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.3rem,3vw,1.7rem) clamp(1.3rem,3vw,1.9rem);
    text-align:left;
  }
  .cta__direct-label{
    display:block;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:.7rem;
  }
  .cta__direct .quote-row{ margin-top:.5rem; }
  .cta__direct .quote-row:first-of-type{ margin-top:0; }
  .cta__todo{
    display:inline-block;
    margin-left:.5rem;
    font-size:.62rem;
    letter-spacing:.05em;
    padding:.15em .45em;
    border:1px solid var(--orange);
    color:var(--orange-ink);
    border-radius:3px;
    vertical-align:middle;
  }

  .btn--pill{
    position:relative;
    z-index:1;
    font-size:1rem;
    padding: 1.3rem 2.6rem;
    background:var(--carbon);
    color:var(--paper);
    box-shadow: 5px 5px 0 var(--orange);
  }
  .btn--pill:hover{
    transform: translate(-3px,-3px);
    box-shadow: 9px 9px 0 var(--orange);
    background:var(--paper);
    color:var(--carbon);
  }

  /* ============ FOOTER ============ */
  .footer{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    align-items:center;
    justify-content:space-between;
    /* левый отступ с запасом: внизу страницы стоит диск Б рельсы —
       тексту футера нужен воздух от него (фидбэк владельца) */
    padding: clamp(1.6rem,3vw,2rem) clamp(1.2rem,4vw,3.5rem)
             clamp(1.6rem,3vw,2rem) clamp(3.6rem,6vw,4.8rem);
    border-top:2px solid var(--carbon);
    font-size:.85rem;
    color:var(--steel);
  }
  .footer strong{ color:var(--carbon); }

  /* ============ PROSTO («С нами просто» — podhod.html) ============ */
  .prosto{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .prosto h2{
    font-size:clamp(1.8rem,3.6vw,3rem);
    margin-bottom: clamp(1rem,1.8vw,1.4rem);
    max-width:16ch;
  }
  .prosto__pain{
    max-width:56ch;
    color:var(--ink-body);
    font-size:clamp(1rem,1.2vw,1.1rem);
    margin-bottom: clamp(2rem,4vw,3rem);
  }
  /* собранные карточки 2×2 вместо растянутых строк */
  .prosto__steps{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(1.2rem,2.4vw,2rem);
    max-width:1080px;
  }
  .prosto__step{
    display:block;
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.3rem,2.4vw,1.9rem);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
  .prosto__step:hover{
    transform: translate(-3px,-3px);
    box-shadow: 9px 9px 0 var(--carbon);
  }
  .prosto__step--spot{ box-shadow: 6px 6px 0 var(--chartreuse); }
  .prosto__step--spot:hover{ box-shadow: 9px 9px 0 var(--chartreuse); }
  .prosto__num{
    display:block;
    font-size:clamp(1.8rem,3vw,2.4rem);
    margin-bottom: clamp(.8rem,1.4vw,1.1rem);
  }
  @media (max-width:860px){
    .prosto__steps{ grid-template-columns:minmax(0,1fr); max-width:560px; }
  }
  .prosto__step:hover .prosto__num{
    color:var(--navy);
    -webkit-text-stroke-color: var(--navy);
  }
  .prosto__body h3{
    font-size:clamp(1.15rem,1.8vw,1.5rem);
    margin-bottom:.45rem;
  }
  .prosto__body p{
    max-width:58ch;
    color:var(--ink-body);
    font-size:clamp(.95rem,1.2vw,1.05rem);
    line-height:1.55;
  }

  /* ============ QUOTE-ROW (бланк-строка с отточиями: услуга …… цена) ==
     переиспользуется на uslugi.html в категориях услуг и в форматах
     работы. label и «пара» (отточие+значение) — отдельные flex-элементы
     верхнего уровня: при нехватке места переносится вся пара целиком на
     новую строку, значение никогда не обрезается. */
  .quote-row{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.4rem .7rem;
    margin-top:.6rem;
  }
  .quote-row__label{
    flex:none;
    font-size:1rem;
    color:var(--carbon);
  }
  .quote-row__pair{
    display:flex;
    align-items:baseline;
    flex:1 1 220px;
    min-width:180px;
    gap:.6rem;
  }
  .quote-row__fill{
    flex:1 1 auto;
    min-width:20px;
    align-self:center;
    height:0;
    border-bottom:2px dotted #b9b9b9;
    transform:translateY(-.3em);
  }
  .quote-row__value{
    flex:none;
    white-space:nowrap;
    font-weight:700;
    font-size:1.05rem;
    color:var(--carbon);
  }

  /* ============ SVC (страница «Услуги» — категории) ============ */
  .svc{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .svc h2{
    font-size:clamp(1.8rem,3.6vw,2.8rem);
    margin-bottom:1rem;
    max-width:18ch;
  }
  .svc__intro{
    max-width:62ch;
    color:var(--ink-body);
    font-size:clamp(1rem,1.25vw,1.1rem);
    margin-bottom: clamp(2.2rem,4vw,3rem);
  }
  /* категории услуг — собранные карточки-бланки на миллиметровке */
  .svc__grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(1.2rem,2.4vw,2rem);
    max-width:1180px;
    align-items:stretch;
  }
  .cat-card{
    display:flex;
    flex-direction:column;
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.4rem,2.4vw,2rem);
  }
  .cat-card__num{
    font-size:clamp(1.8rem,3vw,2.4rem);
    margin-bottom: clamp(.9rem,1.6vw,1.3rem);
  }
  .cat-card:hover .cat-card__num{ color:var(--orange); -webkit-text-stroke-color:var(--orange); }
  .cat-card__title{
    font-size:clamp(1.25rem,2vw,1.55rem);
    margin-bottom:.4rem;
  }
  .cat-card__tagline{
    font-size:.82rem;
    color:var(--navy);
    margin-bottom: clamp(1.1rem,1.8vw,1.4rem);
  }
  .cat-card__list{
    list-style:none;
    margin:0 0 clamp(1.3rem,2.2vw,1.8rem);
    padding:0;
  }
  .cat-card__list li{
    position:relative;
    padding:.34rem 0 .34rem 1.15rem;
    font-size:.95rem;
    color:var(--ink-body);
    border-top:1px dashed var(--rule-faint);
  }
  .cat-card__list li:first-child{ border-top:0; padding-top:0; }
  .cat-card__list li::before{
    content:'—';
    position:absolute;
    left:0;
    color:var(--orange-ink);
  }
  .cat-card__quote{
    margin-top:auto;
    border-top:2px solid var(--carbon);
    padding-top: clamp(.9rem,1.6vw,1.2rem);
  }
  .cat-card__q{
    display:block;
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:.4rem;
  }
  .cat-card__price{
    display:block;
    font-size:clamp(1rem,1.4vw,1.15rem);
    font-weight:700;
    color:var(--carbon);
  }
  .cat-card__price mark{
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
    color:inherit;
  }
  .cat-card__note{
    display:block;
    margin-top:.5rem;
    font-size:.72rem;
    color:var(--steel);
    line-height:1.5;
  }
  @media (max-width:960px){
    .svc__grid{ grid-template-columns:minmax(0,1fr); max-width:560px; }
  }
  .svc__step{
    display:grid;
    grid-template-columns: minmax(76px,auto) 1fr;
    gap: clamp(1.2rem,3vw,2.4rem);
    align-items:start;
    padding: clamp(2rem,3.6vw,3rem) 0;
    border-top:2px solid var(--carbon);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .svc__step:last-child{ border-bottom:2px solid var(--carbon); }
  .svc__step:hover{ transform: translateX(12px); }
  .svc__num{
    font-size:clamp(2rem,4vw,3.2rem);
  }
  .svc__step:hover .svc__num{
    color:var(--orange);
    -webkit-text-stroke-color: var(--orange);
  }
  .svc__body h3{
    font-size:clamp(1.3rem,2.2vw,1.75rem);
    margin-bottom:.3rem;
  }

  /* ============ START (страница «Услуги» — с чего начать) ==========
     Принцип «сначала описанный процесс, потом инструменты». Каждая часть
     раздела — свой приём, чтобы не выходил ряд одинаковых карточек:
     реплика на оранжевой черте → цепочка .chain на подложке-миллиметровке
     → папка .folder--kits
     с наборами по профилям бизнеса и тёмной лентой-итогом. */
  .start{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .start h2{
    font-size:clamp(1.8rem,3.6vw,2.8rem);
    max-width:20ch;
    margin-bottom:1rem;
  }
  /* верх раздела — два столбца: слева текст-подводка, справа цепочка шагов.
     Левый край перестаёт быть единственной осью раздела */
  .start__top{
    display:grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.05fr);
    /* колонки не должны липнуть друг к другу: зазор шире обычного */
    column-gap: clamp(3rem,7.5vw,7.5rem);
    row-gap:2.2rem;
    align-items:start;
    max-width:920px;
    margin-bottom: clamp(2.6rem,4.5vw,3.8rem);
  }
  /* цепочка на собственной подложке-миллиметровке: процесс отделён
     от подводки фактурой, а не только отступом */
  .start__top .chain{
    background-color:var(--paper);
    background-image:
      repeating-linear-gradient(0deg, rgba(30,56,120,.06) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(30,56,120,.06) 0 1px, transparent 1px 28px);
    padding: clamp(1.3rem,2.4vw,2rem) clamp(1.4rem,2.6vw,2.2rem) clamp(1.6rem,2.8vw,2.4rem);
  }
  .start__intro{
    max-width:56ch;
    color:var(--ink-body);
    font-size:clamp(1rem,1.2vw,1.1rem);
    margin-bottom: clamp(1rem,1.8vw,1.4rem);
  }
  /* реплика-акцент: одна мысль отдельной строкой, а не хвостом абзаца */
  .start__claim{
    max-width:34ch;
    font-size:clamp(1.15rem,1.9vw,1.5rem);
    font-weight:600;
    line-height:1.3;
    color:var(--carbon);
    padding-left:1rem;
    border-left:4px solid var(--orange);
    margin-bottom: clamp(2rem,3.6vw,2.8rem);
  }
  /* цепочка шагов: вертикальная, в правой колонке, на подложке;
     номера в своей колонке, между шагами — пунктирная связка */
  .chain{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap: clamp(1.6rem,2.8vw,2.4rem);
    margin:0;
    padding:0;
  }
  /* шаг — строгая сетка: номер в своей колонке, заголовок и текст
     по одной оси справа; линия сверху идёт на всю ширину шага */
  .chain__step{
    position:relative;
    display:grid;
    /* колонка номера фиксированной ширины: с auto «01» уже, чем «02»/«03»,
       и тексты шагов вставали по разным осям */
    grid-template-columns: clamp(2.8rem,4vw,3.6rem) minmax(0,1fr);
    column-gap: clamp(1rem,1.8vw,1.5rem);
    align-items:start;
    border-top:2px solid var(--carbon);
    padding-top: clamp(1rem,1.8vw,1.4rem);
  }
  .chain__num{
    grid-row:1 / span 2;
    font-size:clamp(1.5rem,2.4vw,1.9rem);
    line-height:1;
  }
  .chain__step h3,
  .chain__step p{ grid-column:2; }
  /* пунктирная связка между шагами — под колонкой номера */
  .chain__step:not(:last-child)::after{
    content:'';
    position:absolute;
    left: clamp(1.1rem,1.7vw,1.4rem);
    bottom: calc(-1 * clamp(1.6rem,2.8vw,2.4rem));
    width:2px;
    height: clamp(1.6rem,2.8vw,2.4rem);
    background:repeating-linear-gradient(to bottom, var(--rule-dashed) 0 5px, transparent 5px 10px);
  }
  .chain__step h3{
    font-size:clamp(1.1rem,1.7vw,1.35rem);
    margin-bottom:.45rem;
  }
  .chain__step p{
    font-size:.95rem;
    color:var(--ink-body);
    line-height:1.55;
  }

  /* наборы по профилям бизнеса — папка с вкладками (приём каталога
     автоматизаций): три сценария не громоздятся друг под другом,
     на экране всегда один */
  .kits{ max-width:920px; }
  .kits__title{
    font-size:clamp(1.3rem,2.2vw,1.7rem);
    margin-bottom:.5rem;
  }
  .kits__text{
    color:var(--ink-body);
    font-size:.98rem;
    line-height:1.55;
    max-width:62ch;
  }
  .kits__note{
    display:block;
    margin-top: clamp(.9rem,1.6vw,1.3rem);
    background:var(--carbon);
    color:var(--chartreuse);
    font-size:.72rem;
    letter-spacing:.08em;
    padding: clamp(.8rem,1.4vw,1rem) clamp(1.2rem,2.2vw,1.7rem);
  }
  .folder--kits{ margin-top: clamp(1.4rem,2.6vw,2rem); max-width:920px; }
  #ktab-1:checked ~ .folder__tabs label[for="ktab-1"],
  #ktab-2:checked ~ .folder__tabs label[for="ktab-2"],
  #ktab-3:checked ~ .folder__tabs label[for="ktab-3"]{
    transform:none;
    z-index:3;
    color:var(--carbon);
    background:var(--paper);
    border-bottom-color:var(--paper);
  }
  #ktab-1:focus-visible ~ .folder__tabs label[for="ktab-1"],
  #ktab-2:focus-visible ~ .folder__tabs label[for="ktab-2"],
  #ktab-3:focus-visible ~ .folder__tabs label[for="ktab-3"]{
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  #ktab-1:checked ~ .folder__sheet #kpanel-1,
  #ktab-2:checked ~ .folder__sheet #kpanel-2,
  #ktab-3:checked ~ .folder__sheet #kpanel-3{ display:block; }

  /* внутри вкладки — два столбца: что работает и что видит владелец */
  .fkit{
    display:grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
    gap: clamp(1.4rem,3vw,2.6rem);
  }
  .fkit__col--out{
    padding-left: clamp(1.2rem,2.4vw,2rem);
    border-left:2px dashed var(--rule-soft);
  }
  .fkit__col-tag{
    display:block;
    font-size:.66rem;
    letter-spacing:.08em;
    color:var(--steel);
    margin-bottom:.9rem;
  }
  .fkit__nodes{
    list-style:none;
    margin:0;
    padding:0;
    counter-reset:fkit;
  }
  .fkit__nodes li{
    position:relative;
    counter-increment:fkit;
    padding: .55rem 0 .55rem 2.1rem;
    border-top:1px dashed var(--rule-faint);
  }
  .fkit__nodes li:first-child{ border-top:0; padding-top:0; }
  .fkit__nodes li::before{
    content:counter(fkit,decimal-leading-zero);
    position:absolute;
    left:0;
    top:.62rem;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.7rem;
    font-weight:700;
    color:var(--carbon);
  }
  .fkit__nodes li:first-child::before{ top:.07rem; }
  .fkit__col--out .fkit__nodes li::before{ color:var(--navy); }
  .fkit__nodes b{
    display:block;
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.2;
    font-size:clamp(.95rem,1.25vw,1.05rem);
    margin-bottom:.2rem;
  }
  .fkit__nodes span{
    display:block;
    font-size:.88rem;
    color:var(--ink-body);
    line-height:1.45;
  }
  .start__disclaimer{
    max-width:70ch;
    margin-top: clamp(1rem,1.8vw,1.4rem);
    font-size:.9rem;
    color:var(--steel);
    line-height:1.6;
  }
  .start__disclaimer a{
    color:var(--navy);
    text-decoration:underline;
    text-underline-offset:.2em;
  }
  .start__disclaimer a:hover{ color:var(--orange); }
  @media (max-width:960px){
    .start__top{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
    .fkit{ grid-template-columns:minmax(0,1fr); }
    .fkit__col--out{ padding-left:0; border-left:0; border-top:2px dashed var(--rule-soft); padding-top:1.2rem; margin-top:1.2rem; }
  }

  /* ============ FORMAT (страница «Услуги» — форматы работы) ======== */
  .format{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .format h2{
    font-size:clamp(1.8rem,3.6vw,2.8rem);
    margin-bottom: clamp(2rem,4vw,3rem);
    max-width:18ch;
  }
  /* три формата — карточки-бланки на миллиметровке */
  .format__grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(1.2rem,2.4vw,2rem);
    max-width:1180px;
    align-items:stretch;
  }
  .format__card{
    display:flex;
    flex-direction:column;
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.4rem,2.4vw,2rem);
  }
  .format__card--featured{
    box-shadow: 8px 8px 0 var(--chartreuse);
  }
  .format__card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
    margin-bottom: clamp(1.1rem,2vw,1.5rem);
  }
  .format__num{
    font-size:.75rem;
    letter-spacing:.08em;
    color:var(--steel);
  }
  .format__tag{
    font-size:.66rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:.2rem .55rem;
    background:var(--chartreuse);
    border:1px solid var(--carbon);
    font-weight:700;
    white-space:nowrap;
  }
  .format__mark{
    display:block;
    width:84px;
    color:var(--carbon);
    margin-bottom: clamp(.9rem,1.6vw,1.2rem);
  }
  .format__mark svg{ width:100%; height:auto; overflow:visible; }
  .format__card h3{
    font-size:clamp(1.15rem,1.8vw,1.4rem);
    margin-bottom:.35rem;
  }
  .format__price{
    font-size:clamp(1.05rem,1.5vw,1.25rem);
    font-weight:700;
    color:var(--carbon);
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
    align-self:flex-start;
    margin-bottom:.7rem;
  }
  .format__desc{
    color:var(--ink-body);
    font-size:.92rem;
    line-height:1.55;
    margin-bottom: clamp(1rem,1.8vw,1.4rem);
  }
  .format__rows{ margin-top:auto; }
  .format__rows .quote-row{ max-width:none; }
  .format__rows .quote-row__label{ font-size:.85rem; }
  .format__rows .quote-row__value{ font-size:.85rem; }
  /* в узкой карточке пара «точки+значение» не переносится на свою строку */
  .format__rows .quote-row__pair{ flex:1 1 60px; min-width:0; }
  .format__hint{
    margin-top: clamp(1.6rem,2.8vw,2.2rem);
    font-size:.95rem;
    color:var(--ink-body);
  }
  .format__hint a{ color:var(--navy); }
  @media (max-width:960px){
    .format__grid{ grid-template-columns: minmax(0,1fr); max-width:560px; }
  }

  /* ============ FAQ (страница «Услуги») ============================ */
  .faq{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .faq h2{
    font-size:clamp(1.8rem,3.6vw,2.8rem);
    margin-bottom: clamp(2rem,4vw,3rem);
    max-width:18ch;
  }
  .faq__list{ max-width:840px; }
  .faq__item{ border-top:2px solid var(--carbon); }
  .faq__item:last-child{ border-bottom:2px solid var(--carbon); }
  .faq__q{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding: clamp(1.2rem,2vw,1.6rem) 0;
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:600;
    font-size:clamp(1rem,1.4vw,1.15rem);
    cursor:pointer;
    list-style:none;
  }
  .faq__q::-webkit-details-marker{ display:none; }
  .faq__q::marker{ content:''; }
  .faq__q::after{
    content:'+';
    flex:none;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-weight:400;
    font-size:1.4rem;
    color:var(--orange);
  }
  .faq__item[open] .faq__q::after{ content:'–'; }
  .faq__a{
    padding: 0 0 clamp(1.4rem,2.4vw,1.8rem);
    max-width:74ch;
    color:var(--ink-body);
    font-size:.98rem;
    line-height:1.6;
  }

  @media (max-width:860px){
    .svc__step, .brief__block{ grid-template-columns: 64px 1fr; }
  }

  /* ============ CURSOR (точка со шлейфом, только с JS) ============ */
  html.has-cursor, html.has-cursor a, html.has-cursor button{ cursor:none; }
  .cursor-layer{
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
  }
  .cursor-dot{
    position:fixed;
    top:0; left:0;
    width:20px; height:20px;
    margin:-10px 0 0 -10px;
    border-radius:50%;
    background:#fff;
    mix-blend-mode:difference;
    z-index:10000;
    pointer-events:none;
    opacity:0; /* невидим до первого движения мыши */
    transition: transform .25s cubic-bezier(.16,1,.3,1),
                width .35s cubic-bezier(.16,1,.3,1),
                height .35s cubic-bezier(.16,1,.3,1),
                margin .35s cubic-bezier(.16,1,.3,1);
  }
  .cursor-dot.is-shown{
    opacity:1;
  }
  .cursor-dot.is-link{ transform:scale(2); }
  /* над логотипом курсор растекается жёлтой пилюлей-маркером
     ПОД словомаркой (текст сверху, как выделение маркером) */
  /* !important в состояниях курсора ниже — намеренно: состояние (логотип,
     глаз, жевание) главнее модификаторов вроде .is-link/.is-fed, которые
     идут той же специфичностью и могут сочетаться в любом порядке */
  .cursor-dot.is-logo{
    mix-blend-mode:normal;
    background:var(--chartreuse);
    border-radius:999px;
    z-index:15;
    transform:none !important;
    transition: transform .25s cubic-bezier(.16,1,.3,1),
                width .35s cubic-bezier(.16,1,.3,1),
                height .35s cubic-bezier(.16,1,.3,1),
                margin .35s cubic-bezier(.16,1,.3,1),
                left .3s cubic-bezier(.16,1,.3,1),
                top .3s cubic-bezier(.16,1,.3,1);
  }
  .cursor-dot.is-eye{ transform:scale(0) !important; }
  .cursor-dot.is-fed{ transform:scale(1.5); }
  .cursor-dot.is-fed.is-link{ transform:scale(2.1); }
  /* пакмэн-челюсть: треугольный рот щёлкает при поглощении.
     Формы circle()/path() не интерполируются — рот открывается
     дискретными кадрами, как в оригинальном пакмэне */
  @keyframes chomp-right{
    0%,100%{ clip-path: circle(50% at 50% 50%); }
    50%{ clip-path: path('M10,10 L17.7,3.6 A10,10 0 1,0 17.7,16.4 Z'); }
  }
  @keyframes chomp-left{
    0%,100%{ clip-path: circle(50% at 50% 50%); }
    50%{ clip-path: path('M10,10 L2.3,3.6 A10,10 0 1,1 2.3,16.4 Z'); }
  }
  .cursor-dot.is-chomping-right{ animation: chomp-right .5s ease-in-out 1; }
  .cursor-dot.is-chomping-left{ animation: chomp-left .5s ease-in-out 1; }
  /* в момент поглощения курсор непрозрачный, без инверсии —
     сквозь него не просвечивает пунктир; и держит обычный размер,
     чтобы рост случился отдельным «глотком» после */
  .cursor-dot.is-chomping-right,
  .cursor-dot.is-chomping-left{
    mix-blend-mode:normal;
    background:var(--carbon);
    transform:scale(1) !important;
  }
  /* «глоток»: мягкое набухание как у капли воды — лёгкое
     сплющивание/вытягивание по осям, без резкого перелёта */
  @keyframes gulp{
    0%{ transform:scale(1,1); }
    40%{ transform:scale(1.62,1.38); }
    65%{ transform:scale(1.4,1.58); }
    85%{ transform:scale(1.54,1.46); }
    100%{ transform:scale(1.5,1.5); }
  }
  .cursor-dot.is-gulping{
    animation: gulp .9s ease-in-out both;
    mix-blend-mode:normal;
    background:var(--carbon);
  }
  /* обратная капля: оставил точку в пунктире — курсор так же
     плавно сдувается к обычному размеру */
  @keyframes spit{
    0%{ transform:scale(1.5,1.5); }
    40%{ transform:scale(.9,1.12); }
    65%{ transform:scale(1.1,.9); }
    85%{ transform:scale(.97,1.03); }
    100%{ transform:scale(1,1); }
  }
  .cursor-dot.is-spitting{
    animation: spit .8s ease-in-out both;
    mix-blend-mode:normal;
    background:var(--carbon);
  }
  .cursor-trail{
    position:absolute;
    top:0; left:0;
    border-radius:50%;
    margin:-4px 0 0 -4px;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 860px){
    .idea{ grid-template-columns: 1fr; }
    .idea::before{ clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%); }
    .hero__ring{ width:70vw; height:70vw; top:-8%; right:-20%; }
    .hero__disc{ width:44vw; height:44vw; bottom: calc(-1 * 44vw * 0.55); }
    .topbar__nav{ display:none; }
    .nav-toggle{ display:block; }
    .mobile-nav{ display:grid; }
    .rail{ display:none; }
    .tech{ grid-template-columns: 1fr; }
    .tech__scene{ order:-1; }
    .tech__scene svg{ width:min(48vw,220px); }
    .how{ grid-template-columns: 1fr; }
    .how__scene{ position:static; order:-1; padding-bottom:0; }
    .how__scene svg{ width:min(50vw,220px); }
  }

  /* Диск Б на низких экранах: хиро сжат, кнопки опускаются к нижнему краю —
     топим диск глубже, иначе тёмный текст ghost-кнопки ложится на navy
     (контраст ~1.7:1). ⚠ Блок обязан идти ПОСЛЕ @media (max-width:860px):
     там .hero__disc переопределяет bottom, и при равной специфичности
     побеждает последний в файле. */
  @media (max-height:820px){
    .hero__disc{ bottom: calc(-1 * min(26vw, 360px) * 0.78); }
  }
  @media (max-width:860px) and (max-height:820px){
    .hero__disc{ bottom: calc(-1 * 44vw * 0.82); }
  }
  @media (max-width:860px) and (max-height:700px){
    .hero__disc{ bottom: calc(-1 * 44vw * 0.92); }
    /* подсказка «Листайте» на таком экране налезала бы на кнопки —
       контент и без неё очевидно продолжается */
    .hero__scroll-cue{ display:none; }
  }

  /* CTA в шапке остаётся видимым и на телефоне (не прячем, как меню) —
     но при совсем узком экране логотипу+кнопке+бургеру тесно втроём,
     поэтому CTA дополнительно сжимается, а не толкает словомарку в 2 строки */
  @media (max-width:480px){
    .topbar{ gap:.5rem; }
    .topbar__cta{ padding:.55rem .9rem; font-size:.68rem; }
  }
  /* самые узкие телефоны (320px): втроём помещаются только с ужатыми
     полями шапки — иначе бургер вылезает за край и страница едет вбок */
  @media (max-width:380px){
    .ddash{ padding:.5rem; }
    .dchart{ padding:.4rem; }
    .ddemo{ padding-left:.5rem; padding-right:.5rem; }
    .topbar{ padding-left:.75rem; padding-right:.75rem; gap:.4rem; }
    .topbar__cta{ padding:.5rem .7rem; font-size:.62rem; }
    .logo{ font-size:.92em; }
  /* строка прайса «03 ИИ-автоматизация ... от 30 000 ₽» в одну строку
       здесь не помещается — переносим цену под название */
    .price-sheet__row{ flex-wrap:wrap; }
    .price-sheet__name{ flex:1 1 100%; }
    .price-sheet__fill{ flex:1 1 12px; }
  }

  /* ============ AUTO (каталог «что можно автоматизировать») ============ */
  .auto{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .auto h2{
    font-size:clamp(1.8rem,3.6vw,3rem);
    max-width:22ch;
    margin: 0 0 clamp(1rem,1.8vw,1.4rem);
  }
  .auto__intro{
    max-width:64ch;
    color:var(--ink-body);
    font-size:clamp(1rem,1.25vw,1.1rem);
    margin-bottom: clamp(1.8rem,3vw,2.6rem);
  }
  /* ---- FOLDER (Q-325): секция-«папка» с тремя ярлычками-табами ----
     Чистый CSS, без JS: скрытые (но фокусируемые) radio-инпуты живут
     как прямые дети .folder рядом с .folder__tabs/.folder__sheet — это
     позволяет общему сиблинг-комбинатору (~) достать и метку активного
     ярлычка, и нужную панель листа за один шаг, независимо от вложенности. */
  .folder{
    margin-top: clamp(1.8rem,3.2vw,2.6rem);
    max-width:920px;
  }
  /* Переключатель вкладки — скрытый radio: сам он 1×1 px, но цель нажатия
     это ярлык <label> в полный размер вкладки, а фокус ловится и рисуется
     кольцом на ярлыке. Автопроверки доступности помечают такие поля как
     «мелкую цель» — это ложное срабатывание, менять нечего.
     Тем же приёмом переключается период в демо-дашборде (.ddash__radio). */
  .folder__radio, .ddash__radio{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .folder__tabs{
    position:relative;
    z-index:2;
    display:flex;
    gap:0 .4rem;
    padding-left: clamp(0px,2vw,.6rem);
  }
  .folder__tab{
    display:inline-block;
    cursor:pointer;
    user-select:none;
    position:relative;
    /* неактивная вкладка утоплена: сдвиг через transform, чтобы переключение
       не перекраивало раскладку папки */
    transform:translateY(7px);
    padding: .8rem 1.3rem .75rem;
    font-family:'Golos Text','Golos Text Fallback',sans-serif;
    font-weight:600;
    font-size: clamp(.86rem,1.3vw,1.02rem);
    color:#55565a;
    background:#e6e6e6;
    border:2px solid var(--carbon);
    border-radius:10px 10px 0 0;
    transition: background-color .25s, color .25s, transform .2s;
  }
  .folder__tab:hover{ background:var(--chartreuse); color:var(--carbon); }
  #ftab-1:checked ~ .folder__tabs label[for="ftab-1"],
  #ftab-2:checked ~ .folder__tabs label[for="ftab-2"],
  #ftab-3:checked ~ .folder__tabs label[for="ftab-3"]{
    transform:none;
    z-index:3;
    color:var(--carbon);
    background:var(--paper);
    border-bottom-color:var(--paper);
  }
  #ftab-1:focus-visible ~ .folder__tabs label[for="ftab-1"],
  #ftab-2:focus-visible ~ .folder__tabs label[for="ftab-2"],
  #ftab-3:focus-visible ~ .folder__tabs label[for="ftab-3"]{
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  .folder__sheet{
    position:relative;
    z-index:1;
    margin-top:-2px;
    border:2px solid var(--carbon);
    background:var(--paper);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.6rem,3.4vw,2.4rem) clamp(1.4rem,3vw,2rem);
  }
  .folder__panel{ display:none; }
  #ftab-1:checked ~ .folder__sheet #fpanel-1,
  #ftab-2:checked ~ .folder__sheet #fpanel-2,
  #ftab-3:checked ~ .folder__sheet #fpanel-3{ display:block; }
  @media (max-width:860px){
    .folder__tabs{
      overflow-x:auto;
      flex-wrap:nowrap;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      padding-bottom:2px;
    }
    .folder__tab{
      flex:none;
      white-space:nowrap;
      scroll-snap-align:start;
      font-size:.88rem;
      padding: .7rem 1.1rem .65rem;
    }
  }
  .auto__list{ list-style:none; }
  .auto__list li{
    padding:.65rem 0 .65rem 1.5rem;
    position:relative;
    border-bottom:1px dashed var(--rule-faint);
    font-size:.95rem;
    line-height:1.5;
  }
  .auto__list li::before{
    content:'→';
    position:absolute;
    left:0; top:.65rem;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.85rem;
    color:var(--orange);
  }
  .auto__list b{ font-weight:600; color:var(--carbon); }
  .auto__list span{ color:#3c3c3c; }
  .auto__close{
    margin-top: clamp(1.8rem,3vw,2.4rem);
    font-size:clamp(1rem,1.25vw,1.1rem);
    max-width:64ch;
  }
  .auto__close a{
    color:var(--navy);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:.2em;
  }
  @media (max-width: 860px){
  }

  /* ============ BRIEF PROGRESS (полоса-маршрут под шапкой, brif.html) ==
     уникальный визуальный якорь страницы брифа: кольцо А слева, диск Б
     справа, линия между ними заполняется по мере ответов на 5 блоков.
     Без JS остаётся статичной на 0% — форма и так полностью читаема,
     полоса необязательна для функции. */
  .brief-progress{
    position:sticky;
    top:0;
    z-index:15;
    display:flex;
    align-items:center;
    gap: clamp(.6rem,1.6vw,1rem);
    padding: .65rem clamp(1.2rem,4vw,3.5rem);
    background:var(--paper);
    border-bottom:2px solid var(--carbon);
  }
  .brief-progress__a{
    flex:none;
    width:14px; height:14px;
    border:4px solid var(--orange);
    border-radius:50%;
    background:var(--paper);
  }
  .brief-progress__b{
    flex:none;
    width:16px; height:16px;
    border-radius:50%;
    background:var(--navy);
  }
  /* нативное поле выбора файлов ниже нормы цели нажатия — добавляем высоту */
  #brief-files{ min-height:26px; padding-block:2px; }
  .brief-progress__line{
    position:relative;
    flex:1 1 auto;
    height:2px;
    background:#e4e4e4;
  }
  .brief-progress__fill{
    position:absolute;
    inset:0;
    /* заполнение через scaleX: анимация идёт на композиторе, без пересчёта
       раскладки на каждый отмеченный пункт. Множитель ставит script.js */
    transform:scaleX(0);
    transform-origin:left center;
    background: linear-gradient(90deg, var(--orange), var(--navy));
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  .brief-progress__label{
    flex:none;
    font-size:.72rem;
    letter-spacing:.04em;
    color:var(--steel);
    white-space:nowrap;
  }
  @media (max-width:640px){
    .brief-progress__label{ display:none; }
  }

  /* ============ BRIEF (страница-опросник brif.html) ================= */
  .brief{
    padding: 0 clamp(1.2rem,4vw,3.5rem) clamp(2rem,4vw,3rem);
  }
  .brief__block{ border-top:2px solid var(--carbon); }
  .brief__block:last-of-type{ border-bottom:2px solid var(--carbon); }
  .brief__block .svc__body{ max-width:64ch; }
  .brief__block h2{
    font-size:clamp(1.2rem,2vw,1.6rem);
    margin-bottom: clamp(1.2rem,2vw,1.6rem);
  }
  .brief__options{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:.2rem;
    margin-bottom: clamp(1.4rem,2.4vw,1.8rem);
  }
  /* чекбокс: тот же приём, что на маршрутном листе v2 — квадрат с
     жёсткой обводкой, галочка через border-trick, заливка chartreuse */
  .chk{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:.9rem;
    padding:.55rem 0;
    cursor:pointer;
  }
  .chk__input{
    position:absolute;
    inset:0;
    opacity:0;
    margin:0;
    cursor:pointer;
  }
  .chk__box{
    flex:none;
    width:22px; height:22px;
    margin-top:.15em;
    border:2px solid var(--carbon);
    background:var(--paper);
    position:relative;
    transition: background-color .2s;
  }
  .chk__input:checked + .chk__box{ background:var(--chartreuse); }
  .chk__input:checked + .chk__box::after{
    content:'';
    position:absolute;
    left:4px; top:0;
    width:7px; height:13px;
    border-right:2.5px solid var(--carbon);
    border-bottom:2.5px solid var(--carbon);
    transform:rotate(40deg);
  }
  .chk__input:focus-visible + .chk__box{ outline:2px solid var(--navy); outline-offset:2px; }
  .chk__text{
    font-size:1rem;
    line-height:1.4;
    padding-top:.15rem;
  }
  .brief__free{ max-width:420px; margin-top:.4rem; }
  .brief__free .blank__label{ color:var(--steel); font-size:.88rem; }
  .brief__free:hover .blank__input,
  .brief__free .blank__input:focus{ border-color:var(--carbon); }

  .brief__files{
    display:flex;
    flex-direction:column;
    gap:.9rem;
    align-items:flex-start;
    max-width:64ch;
  }
  .brief__files input[type="file"]{
    font-family:'Golos Text','Golos Text Fallback',sans-serif;
    font-size:.92rem;
    color:var(--carbon);
  }
  .brief__files-note{
    font-size:.82rem;
    color:var(--steel);
    max-width:56ch;
  }
  .brief__files-list{
    font-size:.85rem;
    color:var(--carbon);
    min-height:1em;
    overflow-wrap:anywhere;
    max-width:100%;
  }

  .brief__contacts{
    display:grid;
    gap:1.1rem;
    max-width:420px;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  }
  .brief__contacts .blank__label{ color:var(--steel); font-size:.95rem; }
  .brief__contacts .blank:hover .blank__input,
  .brief__contacts .blank__input:focus{ border-color:var(--carbon); }

  .brief__submit{
    padding: clamp(2.4rem,4vw,3.2rem) 0 clamp(1rem,2vw,1.4rem);
  }
  .brief__risk{
    margin-top:1.1rem;
    max-width:46ch;
    font-size:.85rem;
    color:var(--steel);
  }

  /* ссылка на бриф над формой контакта */
  .cta__brief-link{
    position:relative;
    z-index:1;
    max-width:44ch;
    margin: 0 auto clamp(1.6rem,2.8vw,2.2rem);
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.88rem;
  }
  .cta__brief-link a{
    color:var(--navy);
    font-weight:600;
  }
  .cta__brief-link a:hover{ color:var(--orange); }

  /* ссылка на бриф из «С нами просто» (podhod.html) */
  .prosto__step h3 a{ text-decoration:underline; text-underline-offset:.2em; }
  .prosto__step h3 a:hover{ color:var(--orange); }

  /* ссылка на бриф из FAQ (uslugi.html) */
  .faq__a a,
  .lost__text a,
  .cat-card__list a,
  .cat-card__note a,
  .dprice__link a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:.2em; }
  .faq__a a:hover,
  .lost__text a:hover,
  .cat-card__list a:hover,
  .cat-card__note a:hover,
  .dprice__link a:hover{ color:var(--orange-ink); }

  /* ============ 404 ================================================= */
  .lost{
    padding: clamp(3rem,8vw,5rem) clamp(1.2rem,4vw,3.5rem) clamp(4rem,10vw,7rem);
    text-align:center;
  }
  .lost__code{
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:900;
    font-size: clamp(6rem,20vw,13rem);
    line-height:1;
    color:var(--paper);
    -webkit-text-stroke: 3px var(--carbon);
    letter-spacing:-.02em;
  }
  .lost__title{
    font-size: clamp(1.6rem,3.6vw,2.4rem);
    margin: clamp(1rem,2vw,1.4rem) 0 .8rem;
  }
  .lost__text{
    max-width:50ch;
    margin:0 auto clamp(2rem,4vw,2.6rem);
    color:var(--ink-body);
    font-size:clamp(1rem,1.3vw,1.1rem);
  }
  .lost__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
  }

  /* фикс: file-input имеет собственный min-width (~311px) и распирал
     grid-трек на мобильном (критик Q-318: 413px при вьюпорте 390) */
  #brief-files{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  /* артефакт и срок фазы процесса — бланк-строка под описанием шага */
  .how__artifact{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.78rem;
    margin-top:.55rem;
    color:var(--navy);
  }
  .how__artifact .sep{ color:var(--steel); padding:0 .4em; }

  /* на средних ширинах (860–1150) секционный контент подходит близко
     к рельсе — сужаем её, чтобы метки не касались линии */
  @media (max-width: 1150px) and (min-width: 861px){
    .rail{ left:4px; width:24px; }
    .rail__a{ width:20px; height:20px; border-width:5px; }
    .rail__b{ width:22px; height:22px; }
  }

  /* ====== ЖЁЛТЫЙ АКЦЕНТ (роль: спотлайт и фокус) ====== */
  /* фокус полей форм — фирменное жёлтое кольцо вместо дефолтного */
  .blank__input:focus,
  .brief-field:focus{
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse);
  }
  .btn:focus-visible,
  a:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  /* цены в вилках — маркер по деньгам: сюда смотрят в первую очередь */
  .quote-row__value{
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
  }
  /* каталог автоматизаций: жёлтая полоса-спотлайт при наведении */
  .auto__list li{ transition: background-color .25s, box-shadow .25s; }
  .auto__list li:hover{
    background:#fdffd9;
    box-shadow: inset 3px 0 0 var(--chartreuse);
  }

  /* ============ ДАШБОРДЫ (dashbordy.html) =========================
     Демо-дашборд работает без JS: период переключают скрытые radio,
     обе версии цифр и графиков лежат в разметке, показывается нужная.
     Графики — статичный SVG, подсказки — нативные <title> внутри него. */
  .dwhy{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .dwhy h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
  .dwhy__grid{
    display:grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap: clamp(1rem,2.4vw,2rem);
    max-width:1000px;
  }
  .dwhy__col{
    background:var(--paper);
    border:2px solid var(--carbon);
    padding: clamp(1.3rem,2.4vw,1.9rem) clamp(1.3rem,2.4vw,1.8rem);
  }
  /* сторона А — оранжевая тень, сторона Б — синяя: закон теней сайта */
  .dwhy__col--a{ box-shadow: 6px 6px 0 var(--orange); }
  .dwhy__col--b{ box-shadow: 6px 6px 0 var(--navy); }
  .dwhy__tag{
    display:block;
    font-size:.68rem;
    letter-spacing:.09em;
    margin-bottom:.9rem;
  }
  .dwhy__col--a .dwhy__tag{ color:var(--orange-ink); }
  .dwhy__col--b .dwhy__tag{ color:var(--navy); }
  .dwhy__list{ list-style:none; display:grid; gap:.7rem; }
  .dwhy__list li{
    position:relative;
    padding-left:1.1rem;
    font-size:.95rem;
    color:var(--ink-body);
    line-height:1.45;
  }
  .dwhy__list li::before{
    content:'';
    position:absolute;
    left:0; top:.55em;
    width:6px; height:6px;
    background:var(--rule-dashed);
  }
  .dwhy__col--b .dwhy__list li::before{ background:var(--navy); }
  .dwhy__arrow{
    font-size:clamp(1.4rem,2.6vw,2rem);
    font-weight:700;
    color:var(--orange-ink);
  }
  @media (max-width:860px){
    .dwhy__grid{ grid-template-columns:minmax(0,1fr); }
    .dwhy__arrow{ justify-self:center; transform:rotate(90deg); }
  }

  /* ---- живое демо ---- */
  .ddemo{
    padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem);
    border-top:2px solid var(--carbon);
  }
  .ddemo h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); margin-bottom:.8rem; }
  .ddemo__intro{
    max-width:60ch;
    color:var(--ink-body);
    margin-bottom: clamp(1.6rem,3vw,2.4rem);
  }
  .ddash{
    position:relative;
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.2rem,2.4vw,2rem);
    max-width:1080px;
  }
  .ddash__top{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:2px solid var(--carbon);
  }
  .ddash__name{
    display:block;
    font-family:'Unbounded','Unbounded Fallback',sans-serif;
    font-weight:700;
    font-size:clamp(1.05rem,1.8vw,1.35rem);
    letter-spacing:-0.01em;
  }
  .ddash__src{
    display:block;
    margin-top:.35rem;
    font-size:.68rem;
    letter-spacing:.05em;
    color:var(--steel);
  }
  .ddash__tabs{ display:flex; gap:.4rem; }
  .ddash__tab{
    cursor:pointer;
    user-select:none;
    font-size:.72rem;
    letter-spacing:.06em;
    padding:.5rem .9rem;
    border:2px solid var(--carbon);
    background:var(--paper);
    color:#55565a;
    transition: background-color .2s, color .2s;
  }
  .ddash__tab:hover{ background:var(--chartreuse); color:var(--carbon); }
  #dp-6:checked ~ .ddash__top label[for="dp-6"],
  #dp-12:checked ~ .ddash__top label[for="dp-12"]{
    background:var(--carbon);
    color:var(--paper);
  }
  #dp-6:focus-visible ~ .ddash__top label[for="dp-6"],
  #dp-12:focus-visible ~ .ddash__top label[for="dp-12"]{
    box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  /* показываем набор выбранного периода */
  .ddash__p6, .ddash__p12{ display:none; }
  #dp-6:checked ~ .ddash__kpis.ddash__p6,
  #dp-12:checked ~ .ddash__kpis.ddash__p12{ display:grid; }
  #dp-6:checked ~ .ddash__charts .ddash__p6,
  #dp-12:checked ~ .ddash__charts .ddash__p12{ display:block; }

  .ddash__kpis{
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap:0;
    margin: 1.2rem 0 1.6rem;
    border:2px solid var(--carbon);
  }
  .dkpi{
    padding: clamp(.8rem,1.6vw,1.1rem);
    border-right:1px dashed var(--rule-soft);
  }
  .dkpi:last-child{ border-right:0; }
  .dkpi__l{
    display:block;
    font-size:.7rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:.4rem;
  }
  .dkpi__v{
    display:block;
    font-size:clamp(1.05rem,2vw,1.5rem);
    font-weight:700;
    letter-spacing:-0.02em;
  }
  .dkpi__d{ display:block; margin-top:.3rem; font-size:.68rem; letter-spacing:.02em; }
  .dkpi__d--up{ color:#1d7a3c; }
  .dkpi__d--down{ color:var(--orange-ink); }
  @media (max-width:860px){
    .ddash__kpis{ grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dkpi:nth-child(2n){ border-right:0; }
    .dkpi:nth-child(-n+2){ border-bottom:1px dashed var(--rule-soft); }
  }
  @media (max-width:480px){
    .ddash{ padding:.7rem; }
    .dchart{ padding:.6rem; }
    .ddemo{ padding-left:.7rem; padding-right:.7rem; }
    .ddash__kpis{ grid-template-columns:minmax(0,1fr); }
    .dkpi{ border-right:0; border-bottom:1px dashed var(--rule-soft); }
    .dkpi:last-child{ border-bottom:0; }
  }

  .ddash__charts{
    display:grid;
    grid-template-columns: minmax(0,1fr);
    gap: clamp(1.4rem,2.6vw,2rem);
  }
  .dchart{
    border:2px solid var(--carbon);
    padding: clamp(.9rem,1.8vw,1.3rem);
    background-color:var(--paper);
    background-image:
      repeating-linear-gradient(0deg, rgba(30,56,120,.05) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(30,56,120,.05) 0 1px, transparent 1px 28px);
  }
  .dchart__cap{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:.6rem;
    margin-bottom:.8rem;
  }
  .dchart__title{ font-weight:600; font-size:1rem; }
  .dchart__unit{ font-size:.66rem; letter-spacing:.05em; color:var(--steel); }
  .dhint--mob{ display:none; }
  @media (max-width:640px){
    .dhint--wide{ display:none; }
    .dhint--mob{ display:inline; }
  }
  .dch{ display:block; width:100%; height:auto; overflow:visible; }
  /* широкий график для десктопа, компактный — для телефона: на узком экране
     широкий сжимается целиком и подписи становятся нечитаемыми (4 px) */
  .dch--wide{ max-width:560px; margin-inline:auto; }
  .dch--mob{ display:none; max-width:400px; margin-inline:auto; }
  @media (max-width:640px){
    .dch--wide{ display:none; }
    .dch--mob{ display:block; }
  }
  .dch--wide .dch__ax{ font-size:16px; }
  .dch--wide .dch__val{ font-size:18px; }
  .dch--wide .dch__hname{ font-size:17px; }
  .dch--wide .dch__hval{ font-size:15px; }
  .dch--mob .dch__ax{ font-size:16px; }
  .dch--mob .dch__val, .dch--mob .dch__valm{ font-size:16px; }
  .dch--mob .dch__hname{ font-size:16px; }
  .dch--mob .dch__hval{ font-size:16px; }
  .dch__grid{ stroke:var(--rule-faint); stroke-width:1; }
  .dch__axis{ stroke:var(--rule-soft); stroke-width:1; }
  .dch__ax{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    fill:var(--steel);
  }
  .dch__bar{
    fill:var(--navy);
    opacity:.82;
    transform-box:fill-box;
    transform-origin:bottom;
    animation: dch-grow .5s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--d,0s);
    transition: opacity .18s;
  }
  .dch__bar:hover{ opacity:1; }
  .dch__bar--now{ fill:var(--orange); opacity:.92; }
  .dch__line{
    fill:none;
    stroke:var(--carbon);
    stroke-width:2;
    stroke-linejoin:round;
    stroke-linecap:round;
  }
  .dch__dot{ fill:var(--paper); stroke:var(--carbon); stroke-width:2; }
  .dch__val{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-weight:700;
    fill:var(--carbon);
  }
  .dch__valm{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    fill:var(--steel);
  }
  @keyframes dch-grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

  .dch__hname{
    font-family:'Golos Text','Golos Text Fallback',sans-serif;
    fill:var(--carbon);
  }
  .dch__hval{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    fill:var(--carbon);
  }
  .dch__htrack{ fill:#eceff5; }
  .dch__hbar{
    fill:var(--navy);
    opacity:.8;
    transform-box:fill-box;
    transform-origin:left;
    animation: dch-slide .55s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--d,0s);
    transition: opacity .18s;
  }
  .dch__hbar:hover{ opacity:1; }
  .dch__hbar--lead{ fill:var(--orange); opacity:.9; }
  @keyframes dch-slide{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  .ddash__foot{
    margin-top:1.4rem;
    padding-top:1rem;
    border-top:1px dashed var(--rule-soft);
    font-size:.72rem;
    line-height:1.6;
    color:var(--steel);
  }
  @media (min-width:1250px){
    .ddash__charts{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  }

  /* ---- отраслевая галерея ---- */
  .dgal{ padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem); }
  .dgal h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); margin-bottom:.8rem; }
  .dgal__intro{ max-width:62ch; color:var(--ink-on-tint); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
  /* бенто вместо шести одинаковых карточек: два развёрнутых сценария
     с мини-графиком, под ними четыре компактных — только вопрос и ответ */
  .dgal__grid{
    display:grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: clamp(1rem,2vw,1.6rem);
  }
  .dgal__grid--small{
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-top: clamp(1rem,2vw,1.6rem);
  }
  .dgal__grid .dgal__card--big{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,132px);
    gap: clamp(.9rem,2vw,1.4rem);
    align-items:center;
  }
  .dgal__body{ display:flex; flex-direction:column; gap:.55rem; height:100%; }
  .dgal__grid .dgal__card--big .dgal__q{ margin-top:auto; }
  .dgal__grid .dgal__card--small{ gap:.5rem; }
  .dgal__card--small .dgal__title{ font-size:clamp(1rem,1.5vw,1.12rem); }
  .dgal__card--small .dgal__q{ border-top:0; padding-top:.2rem; margin-top:auto; }
  .dgal__pic{ width:100%; height:auto; display:block; }
  .dgal__pic-bar{ fill:var(--navy); opacity:.3; }
  .dgal__pic-bar--a{ fill:var(--orange); opacity:.85; }
  .dgal__pic-t{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:11px;
    fill:var(--carbon);
    font-weight:700;
  }
  @media (max-width:900px){
    .dgal__grid--small{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @media (max-width:640px){
    .dgal__grid, .dgal__grid--small{ grid-template-columns:minmax(0,1fr); }
    .dgal__grid .dgal__card--big{ grid-template-columns:minmax(0,1fr); }
    .dgal__pic{ max-width:200px; }
  }
  .dgal__card{
    background:var(--paper);
    border:2px solid var(--carbon);
    padding: clamp(1.1rem,2.2vw,1.6rem);
    display:flex;
    flex-direction:column;
    gap:.6rem;
  }
  .dgal__tag{
    font-size:.64rem;
    letter-spacing:.09em;
    color:var(--orange-ink);
  }
  .dgal__title{ font-size:clamp(1.05rem,1.8vw,1.25rem); }
  .dgal__text{ font-size:.92rem; color:var(--ink-body); line-height:1.5; }
  .dgal__q{
    margin-top:auto;
    padding-top:.7rem;
    border-top:1px dashed var(--rule-soft);
    font-size:.68rem;
    line-height:1.5;
    color:var(--steel);
  }

  /* ---- как делаем / цена ---- */
  .dhow{ padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem); border-top:2px solid var(--carbon); }
  .dhow h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
  .dhow .chain{ max-width:840px; }
  .dprice{ padding: clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3.5rem); border-top:2px solid var(--carbon); }
  .dprice h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
  .dprice__grid{
    display:grid;
    grid-template-columns: minmax(0,440px) minmax(0,1fr);
    gap: clamp(1.4rem,3vw,2.6rem);
    align-items:start;
    max-width:980px;
  }
  @media (max-width:640px){
    .dprice__sheet .price-sheet__row{ flex-wrap:wrap; }
    .dprice__sheet .price-sheet__name{ flex:1 1 100%; }
    .dprice__sheet .price-sheet__fill{ flex:1 1 12px; }
  }
  .dprice__note p{ color:var(--ink-on-tint); line-height:1.6; max-width:48ch; }
  .dprice .price-sheet{ background:var(--paper); }
  .dprice__note strong{ color:var(--carbon); }
  .dprice__link{ margin-top:1rem; font-size:.8rem; }
  @media (max-width:860px){
    .dprice__grid{ grid-template-columns:minmax(0,1fr); }
  }

  /* ---- тизер дашбордов на главной и в услугах ---- */
  .dteaser{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,300px);
    align-items:stretch;
    gap: clamp(1.2rem,2.6vw,2.4rem);
    margin-top: clamp(1.1rem,2.2vw,1.8rem);
    max-width:1180px;
    padding: clamp(1.3rem,2.6vw,2rem);
    background:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard);
    color:inherit;
    text-decoration:none;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  }
  .dteaser:hover{ transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--orange); }
  .dteaser:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon); }
  .dteaser__tag{
    display:block;
    font-size:.64rem;
    letter-spacing:.09em;
    color:var(--orange-ink);
    margin-bottom:.7rem;
  }
  .dteaser__title{ font-size:clamp(1.15rem,2.2vw,1.6rem); margin-bottom:.6rem; }
  .dteaser__text{ font-size:.95rem; color:var(--ink-body); line-height:1.55; max-width:56ch; }
  .dteaser__go{
    display:inline-block;
    margin-top:.9rem;
    font-size:.72rem;
    letter-spacing:.06em;
    color:var(--carbon);
    border-bottom:2px solid var(--orange);
    padding-bottom:2px;
  }
  .dteaser__chart{
    align-self:center;
    width:100%;
    height:clamp(88px,11vw,124px);
    display:block;
  }
  .dteaser__bar{ fill:var(--navy); opacity:.28; }
  .dteaser__bar--now{ fill:var(--orange); opacity:.9; }
  .dteaser:hover .dteaser__bar{ opacity:.42; }
  .dteaser:hover .dteaser__bar--now{ opacity:1; }
  @media (max-width:860px){
    .dteaser{ grid-template-columns:minmax(0,1fr); }
    .dteaser__chart{ height:78px; }
  }

  /* ---- подсказка демо-дашборда (появляется только при JS) ---- */
  .ddash{ position:relative; }
  .dtip{
    position:absolute;
    z-index:6;
    left:0; top:0;
    transform:translateX(-50%);
    display:grid;
    gap:1px;
    padding:.5rem .7rem;
    background:var(--carbon);
    color:var(--paper);
    border:2px solid var(--carbon);
    box-shadow: 4px 4px 0 rgba(17,17,17,.18);
    pointer-events:none;
    opacity:0;
    transition: opacity .14s;
    white-space:nowrap;
  }
  .dtip.is-shown{ opacity:1; }
  .dtip__n{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--chartreuse);
  }
  .dtip__v{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.92rem;
    font-weight:700;
  }
  .dtip__s{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.72rem;
    color:#c9c9c9;
  }
  /* курсор-указатель и подсветка — только когда подсказка реально работает */
  .ddash--live .dch__bar,
  .ddash--live .dch__hbar{ cursor:pointer; }
  .ddash--live .dch__bar.is-active{ opacity:1; }
  .ddash--live .dch__hbar.is-active{ opacity:1; }
  .ddash--live .dch__bar:not(.dch__bar--now).is-active{ fill:var(--carbon); }
  .ddash--live .dch__hbar:not(.dch__hbar--lead).is-active{ fill:var(--carbon); }
  @media (prefers-reduced-motion: reduce){
    .dtip{ transition:none; }
  }

  /* ---- статус отправки заявки ---- */
  .cta__form{ display:block; }
  .cta__status{
    margin-top:1rem;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.78rem;
    line-height:1.5;
    padding:.7rem .9rem;
    border:2px solid var(--carbon);
    background:var(--paper);
    max-width:46ch;
  }
  .cta .cta__status{ margin-inline:auto; }
  .cta__status.is-ok{ box-shadow: 4px 4px 0 var(--chartreuse); }
  .cta__status.is-error{ box-shadow: 4px 4px 0 var(--orange); }
  #cta-submit[disabled], #brief-submit[disabled]{ opacity:.6; cursor:progress; }

  /* ============ ПОЛИТИКА ОБРАБОТКИ ДАННЫХ (politika.html) ============ */
  .pol{ padding: clamp(3.4rem,7vw,5rem) clamp(1.2rem,4vw,3.5rem); border-top:2px solid var(--carbon); }
  .pol h2{ font-size:clamp(1.6rem,3.2vw,2.4rem); margin-bottom:.8rem; }
  .pol__intro{ max-width:62ch; color:var(--ink-body); margin-bottom: clamp(1.4rem,2.6vw,2rem); }
  .pol__note{
    max-width:64ch; margin-top: clamp(1.2rem,2.4vw,1.8rem);
    padding:.9rem 1.1rem; border:2px dashed var(--rule-soft);
    font-size:.92rem; line-height:1.55; color:var(--ink-body);
  }
  .bg-tint .pol__note, .bg-tint .pol__intro{ color:var(--ink-on-tint); }
  .pol__card{
    max-width:620px; background:var(--paper); border:2px solid var(--carbon);
    box-shadow: var(--shadow-hard); padding: clamp(1.2rem,2.4vw,1.8rem);
  }
  /* адрес длиннее строки-квитанции: у неё пунктир схлопывается, а текст
     наезжает на метку — поэтому он идёт отдельным блоком в две строки */
  .pol__addr{
    padding:.7rem .4rem;
    margin:0 -.4rem;
    border-top:1px dashed var(--rule-soft);
  }
  .pol__addr-label{
    display:block;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:.72rem;
    letter-spacing:.07em;
    color:var(--steel);
    margin-bottom:.35rem;
  }
  .pol__addr-value{
    /* inline + clone: маркер подчёркивает каждую строку адреса, а не только
       последнюю, как это делает градиент на блочном элементе */
    display:inline;
    font-size:.92rem;
    line-height:1.7;
    background: linear-gradient(180deg, transparent 62%, var(--chartreuse) 62%);
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  /* остальные значения короткие, но подстрахуемся от переноса на узких */
  .pol__card .quote-row__value{ white-space:normal; text-align:right; }
  .pol__card .quote-row__pair{ min-width:0; }
  .pol__grid{
    display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: clamp(1rem,2vw,1.6rem);
  }
  .pol__block{
    background:var(--paper); border:2px solid var(--carbon);
    padding: clamp(1.1rem,2.2vw,1.5rem);
  }
  .pol__tag{
    display:block; font-size:.64rem; letter-spacing:.09em;
    color:var(--orange-ink); margin-bottom:.7rem;
  }
  .pol__text{ font-size:.94rem; line-height:1.55; color:var(--ink-body); }
  .pol__list{ list-style:none; display:grid; gap:.5rem; }
  .pol__list li{
    position:relative; padding-left:1.1rem; font-size:.94rem;
    line-height:1.5; color:var(--ink-body);
  }
  .pol__list li::before{
    content:''; position:absolute; left:0; top:.55em;
    width:6px; height:6px; background:var(--navy);
  }
  .pol__pairs{ display:grid; gap: clamp(1rem,2vw,1.5rem); max-width:820px; }
  .pol__pair{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:0 clamp(.9rem,2vw,1.4rem); align-items:start;
    padding-bottom: clamp(1rem,2vw,1.4rem); border-bottom:1px dashed var(--rule-soft);
  }
  .pol__pair:last-child{ border-bottom:0; padding-bottom:0; }
  .pol__pair-num{
    font-size:1.1rem; font-weight:700; color:var(--orange-ink);
    min-width:2.2ch;
  }
  .pol__pair h3{ font-size:clamp(1.02rem,1.8vw,1.2rem); margin-bottom:.3rem; }
  .pol__pair p{ font-size:.94rem; line-height:1.55; color:var(--ink-on-tint); max-width:58ch; }
  .pol__measures{ list-style:none; display:grid; gap:.7rem; max-width:70ch; }
  .pol__measures li{
    position:relative; padding-left:1.4rem; font-size:.95rem;
    line-height:1.55; color:var(--ink-body);
  }
  .pol__measures li::before{
    content:'✓'; position:absolute; left:0; top:0;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    color:var(--orange-ink); font-size:.85rem;
  }
  .pol a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:.2em; }
  .pol a:hover{ color:var(--orange-ink); }
  @media (max-width:640px){
    .pol__card .quote-row{ flex-wrap:wrap; }
    .pol__card .quote-row__label{ flex:1 1 100%; }
    /* «7743205018 / 1177746398290» — одна неразрывная строка, на 320px она
       шире карточки: разрешаем перенос по разделителю */
    .pol__card .quote-row__value{ text-align:left; overflow-wrap:anywhere; }
    .pol__card .quote-row__pair{ flex:1 1 100%; }
    .pol__card .quote-row__fill{ display:none; }
  }

  /* ---- галочка согласия в формах ---- */
  .consent{
    position:relative;
    z-index:1;
    display:flex; align-items:flex-start; gap:.6rem;
    max-width:52ch; margin: 1.1rem auto 0; text-align:left;
    font-size:.82rem; line-height:1.5; color:var(--ink-body);
    cursor:pointer;
  }
  .brief .consent{ margin-inline:0; }
  .consent__input{
    flex:none; width:24px; height:24px; margin:.05rem 0 0;
    accent-color:var(--carbon); cursor:pointer;
  }
  .consent__input:focus-visible{
    outline:none; box-shadow: 0 0 0 3px var(--chartreuse), 0 0 0 5px var(--carbon);
  }
  .consent a{ color:var(--navy); font-weight:600; text-underline-offset:.2em; }
  .consent a:hover{ color:var(--orange-ink); }
  .footer__legal{ display:flex; gap:1rem; flex-wrap:wrap; }
  .footer__legal a{ color:var(--steel); text-decoration:underline; text-underline-offset:.2em; }
  .footer__legal a:hover{ color:var(--carbon); }