/* ═══════════════════════════════════════════════════════════════════
   27.08.2026 · чистка мёртвых стилей (агент П, скорость).
   Убраны правила, все селекторы которых опираются на классы, которых нет
   НИ В ОДНОМ атрибуте class= и ни в одной строке JS/PHP во всём дереве
   сайта (и которые не могли быть собраны конкатенацией в JS): 55 имён —
   .aibox .cres .dbcard .flowstep .guar .intcat .itile .opt .pilot .ptable
   .rng .seg и другие, полный список — prompts/HANDOFF-П-2026-08.md.
   189 592 → 167 705 символов (−11.5%).
   Проверка: снимок getComputedStyle по 30 свойствам для ВСЕХ элементов
   главной и /dokumenty-dlya-sayta/ до и после — расхождений ноль сверх
   фазы бесконечных анимаций (тот же набор из 7 элементов даёт такое же
   расхождение при двух прогонах на ОДНОМ и том же CSS).
   Полная версия до чистки: css/index.css.bak-2026-08-27.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   index.css — стили ГЛАВНОЙ страницы (index.html).
   Извлечены из 7 инлайн layout \3c style>-блоков без изменения рендера
   (ЭТАП 2, структурный слой, гейт 2а). Порядок блоков = порядку в
   документе; относительные url(fonts/…)/url(images/…) → абсолютные.
   Подключать ПОСЛЕ ui.css и ПЕРЕД nav.css.
   NB: блок #self-fonts (@font-face, font-display:optional) НАМЕРЕННО
   оставлен инлайновым в index.html — ранняя обнаружимость шрифтов.
   NB: home.css — это общий стиль ПОДСТРАНИЦ, главная его не грузит.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── блок: block-2 ───────── */
  /* метрика fallback под Onest — подмена шрифта без сдвига layout (CLS) */
  /* 🔴 2026-07-27 (аудит): size-adjust 108% → 102.7%. 108% был откалиброван на латинице
   и на КИРИЛЛИЦЕ давал фолбэк на 5.5% шире Onest. Пока шрифт грузится, длинный русский
   заголовок вставал в другое число строк, после подмены перевёрстывался — и весь текст
   под ним прыгал. На /privacy/ (планшет) это давало CLS 0.21.
   Замер: кириллица 5.5%→0.4%, заголовок 4.9%→−0.3%, латиница 3.4%→−1.7%, смешанный 4.3%→−0.9%.
   Максимальное отклонение упало с 5.5% до 1.7%. Разбор — audit/2026-07-27/11-фиксы.md. */
@font-face{font-family:'Onest Fallback';src:local('Arial');ascent-override:91.5%;descent-override:23.0%;line-gap-override:0%;size-adjust:102.7%}
  :root{
    --bg:#FFFFFF; --surface:#F6F8FA; --surface2:#EAECF0;
    --line:#E5E7EB; --line2:#D1D5DB;
    --text:#061D29; --muted:#425D6D; --faint:#5A7382;
    --accent:#6D49CE; --accent2:#4A63E0; --accent-ink:#FFFFFF;
    --good:#0FB87E;
    --header-bg:rgba(255,255,255,.82); --status-bg:rgba(246,248,250,.9);
    --thumb:#E2E8F0; --grid-line:rgba(109,73,206,.04); --grain:0;
    /* 🔴 --maxw/--r УДАЛЕНЫ отсюда — их даёт tokens.css (грузится ПЕРЕД index.css).
       Здесь стояло `--r:14px`, но ниже по файлу (блок etalon) второй :root той же
       специфичности объявлял `--r:24px` и по порядку каскада ПЕРЕКРЫВАЛ его — то
       есть 14px был мёртв, живой радиус всегда был 24px. Удаление дубля рендер не
       меняет, а --maxw:1140px совпадал с токеном байт-в-байт. Канон: --r-md/--r-lg. */
    --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
    --sans:'Onest','Onest Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  /* светлая тема — глубже и богаче */

  /* ═══ СВЕТЛАЯ ТЕМА — премиум-полировка («вау» наравне с тёмной) ═══ */
  /* мягкие цветные подсветки секций */

  /* стеклянные карточки с многослойной тенью и градиентом */

  /* акцентная подсветка номера секции и градиент на заголовках */

  /* ═══ СВЕТЛАЯ ТЕМА — тёмно-синий технологичный hero ═══ */
  /* кристалл и созвездие сделаны под тёмный фон → hero держим тёмным в обеих темах */

  *{box-sizing:border-box;margin:0;padding:0}
  /* html{scroll-behavior:smooth} — заменён кинематическим cinematicScrollTo */
  /* FIX I (20.07): overflow-x на HTML. На body ниже стоит overflow-x:clip — он
     обрезает картинку, но НЕ мешает html прокручиваться вбок: на 390 главная
     реально уезжала вправо на 146px в пустоту (замер window.scrollX). Наружу
     ничего не торчало — ширину раздували обрезанные ленты .hr-lane в героe.
     Подстраницы этой беды не знали: у них html{overflow-x:hidden} приезжает из
     home.css, а главная home.css не подключает. WEB-СТАНДАРТ §4.1. */
  html{overflow-x:hidden}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;letter-spacing:-.005em;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;transition:background .4s,color .4s}
  /* Фикс утечки Arial: контролы (кнопки/поля) по умолчанию НЕ наследуют шрифт → браузер даёт Arial.
     Заставляем наследовать шрифт страницы — единая типографика на всех .btn/.oc-btn/полях. */
  button,input,select,textarea{font-family:inherit}
  h1,h2{letter-spacing:-.02em}
  img{max-width:100%}
  ::selection{background:rgba(74,99,224,.3);color:inherit}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  .label{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
  .label .i{color:var(--accent);margin-right:10px}
  .grad{background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

  #spot{position:fixed;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(109,73,206,.04),transparent 60%)}
  #grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:var(--grain);mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  header{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;
    width:calc(100% - 48px);max-width:960px;
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:var(--r-pill);
    box-shadow:0 8px 32px rgba(6,29,41,.08),inset 0 1px 0 rgba(255,255,255,.9);
    padding:8px 20px 8px 20px;transition:background .3s,box-shadow .3s,top .3s}
  header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 12px 40px rgba(6,29,41,.12);top:8px}
  header .wrap{max-width:none;padding:0}
  .nav{display:flex;align-items:center;justify-content:space-between;height:auto}
  .logo{font-weight:600;letter-spacing:-.015em;font-size:24px;display:flex;align-items:center;gap:0;cursor:pointer;user-select:none}
  .logo .lt{display:inline-block;transform-origin:50% 100%;transition:color .25s;will-change:transform}
  .logo .d{color:var(--accent);display:inline-block;margin-left:2px;transform-origin:50% 50%;will-change:transform}
  .logo:hover .lt,.logo:focus-visible .lt{color:var(--accent)}
  /* волна: каждая буква мягко подпрыгивает по очереди */
  .logo:hover .lt,.logo:focus-visible .lt{animation:ltHop .55s cubic-bezier(.34,1.56,.64,1) both}
  .logo:hover .lt:nth-child(1),.logo:focus-visible .lt:nth-child(1){animation-delay:0s}
  .logo:hover .lt:nth-child(2),.logo:focus-visible .lt:nth-child(2){animation-delay:.05s}
  .logo:hover .lt:nth-child(3),.logo:focus-visible .lt:nth-child(3){animation-delay:.1s}
  .logo:hover .lt:nth-child(4),.logo:focus-visible .lt:nth-child(4){animation-delay:.15s}
  .logo:hover .lt:nth-child(5),.logo:focus-visible .lt:nth-child(5){animation-delay:.2s}
  /* отмеченная буква делает чистый флип на 360° */
  .logo:hover .lt.jump,.logo:focus-visible .lt.jump{animation:ltFlip .75s cubic-bezier(.5,.05,.2,1) both;animation-delay:.12s}
  /* точка: подскакивает каплей-слезой, шлёпается с расплющиванием и собирается в точку */
  .logo:hover .d,.logo:focus-visible .d{animation:dotDrop 1.05s cubic-bezier(.5,0,.25,1) both;animation-delay:.26s}
  @keyframes ltHop{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}
  @keyframes ltFlip{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-11px) rotateY(180deg)}100%{transform:translateY(0) rotateY(360deg)}}
  @keyframes dotDrop{
    0%{transform:translateY(0) scale(1);border-radius:50%}
    22%{transform:translateY(-17px) scaleX(.7) scaleY(1.4);border-radius:50% 50% 50% 50%/65% 65% 35% 35%}
    52%{transform:translateY(0) scaleX(1.5) scaleY(.5);border-radius:50%}
    70%{transform:translateY(-5px) scaleX(.85) scaleY(1.15);border-radius:50%}
    86%{transform:translateY(0) scaleX(1.12) scaleY(.9);border-radius:50%}
    100%{transform:translateY(0) scale(1);border-radius:50%}
  }
  .right{display:flex;align-items:center;gap:8px}
  .navlinks{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2px;font-size:13px}
  .navlinks a{padding:7px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
  .navlinks a:hover{color:var(--text);background:rgba(109,73,206,.07)}
  .navlinks a.active{color:var(--text);background:rgba(109,73,206,.10)}
  .tt{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-sm);
    border:1px solid var(--line2);color:var(--muted);cursor:pointer;background:transparent;transition:color .2s,border-color .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .tt:hover{color:var(--text);border-color:var(--accent)}
  #lang{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em}
  .tt svg{width:17px;height:17px}

  .btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
    padding:11px 20px;border-radius:var(--r-sm);border:1px solid var(--line2);
    transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .3s var(--spring),box-shadow .3s var(--ease);
    cursor:pointer;background:transparent;color:var(--text);will-change:transform}
  .btn:hover{border-color:var(--accent);transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.96)}
  .btn-primary:hover{box-shadow:0 10px 26px -10px rgba(109,73,206,.5)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
  .btn-primary{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600;overflow:hidden}
  .btn-primary:before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.23,1,.32,1)}
  .btn-primary:hover:before{left:150%}
  /* кнопка «Обсудить проект» в header — высота как у .tt (38px), компактнее */
  header .btn.btn-primary{font-size:13px;padding:0 16px;height:38px;border-radius:var(--r-sm);min-width:0}
  @media(hover:none){.btn-primary:before{content:none}}
  @media(max-width:560px){.audit-form .btn{font-size:14px;padding:14px 16px;min-height:52px;width:100%;
    white-space:normal;line-height:1.3;text-align:center}}
  @media(max-width:430px){.audit-form .btn{font-size:13px;padding:12px 16px;min-height:48px}}
  @media(max-width:380px){.audit-form .btn{font-size:13px;padding:12px 14px}}
  /* ── Бургер ── */
  .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;
    background:none;border:none;cursor:pointer;padding:4px;z-index:1501;position:relative}
  .burger-line{display:block;height:1.5px;width:24px;background:var(--text);border-radius:var(--r-sm);
    transition:transform .35s cubic-bezier(.77,0,.175,1),opacity .25s ease,width .3s ease}
  .burger.open .burger-line:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
  .burger.open .burger-line:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

  /* ── Кинематографичный fullscreen-overlay ── */
  .mob-overlay{position:fixed;inset:0;background:rgba(4,4,14,.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1500;
    display:flex;flex-direction:column;padding:100px 36px calc(48px + env(safe-area-inset-bottom));
    clip-path:inset(100% 0 0 0);transition:clip-path .65s cubic-bezier(.77,0,.175,1);
    overflow:hidden;visibility:hidden;pointer-events:none}
  .mob-overlay.open{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto}
  .mob-scanline{position:absolute;inset:0;pointer-events:none;opacity:.6;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(74,99,224,.018) 2px,rgba(74,99,224,.018) 4px);
    animation:overlayShimmer 8s linear infinite}
  @keyframes overlayShimmer{0%{background-position:0 0}100%{background-position:0 400px}}
  .mob-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);
    transition:background .2s,border-color .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
  .mob-close svg{width:18px;height:18px}
  .mob-close:hover{background:rgba(74,99,224,.15);border-color:rgba(74,99,224,.4);transform:rotate(90deg) scale(1.1)}
  .mob-nav{display:flex;flex-direction:column;gap:4px;flex:1}
  .mob-link{font-size:clamp(28px,8vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.25;
    color:rgba(255,255,255,.85);text-decoration:none;padding:6px 0;position:relative;
    display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(32px);
    transition:color .25s ease,opacity 0s,transform 0s}
  .mob-link::before{content:attr(data-mi);font-family:var(--mono);font-size:11px;font-weight:400;
    color:var(--accent);opacity:.7;letter-spacing:.05em}
  .mob-link:hover{color:var(--accent)}
  .mob-link::after{content:'';position:absolute;bottom:0;left:0;height:1px;width:0;background:var(--accent);
    transition:width .35s cubic-bezier(.23,1,.32,1)}
  .mob-link:hover::after{width:100%}
  .mob-footer{margin-top:auto;padding-top:32px;border-top:1px solid rgba(255,255,255,.07)}
  .mob-cta{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;
    color:var(--accent);text-decoration:none;opacity:0;transform:translateY(16px);transition:color .25s}
  .mob-cta:hover{color:var(--bg)}
  .mob-sub{font-size:12px;color:rgba(255,255,255,.3);margin-top:10px;font-family:var(--mono);
    letter-spacing:.05em;opacity:0}
  @media(max-width:980px){.navlinks{gap:0}}
  @media(max-width:768px){
    header{border-radius:var(--r-md);top:12px;width:calc(100% - 24px);padding:10px 16px 10px 16px}
    header.scrolled{top:8px}
    .navlinks{display:none}
    .nav .btn-primary{display:none}
    .burger{display:inline-flex}
  }

  /* ── Hero: фото-герой управляется эталонным блоком ниже (.hero / .hero:before).
       Старый .hero (z-index:3 запирал fixed-навбар) и лишний ::after-vignette удалены. ── */
  /* #net (звёздная анимация-созвездие) удалена под корень */
  .status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 15px;background:var(--status-bg)}
.hero-badges{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:30px}
.geo-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(93,122,254,.9);border:1px solid rgba(93,122,254,.3);border-radius:var(--r-pill);padding:7px 15px;background:rgba(93,122,254,.06);box-shadow:0 0 16px -6px rgba(93,122,254,.2)}
.geo-badge svg{opacity:.7;flex-shrink:0;color:rgba(93,122,254,.9)}

  .pulse{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);animation:p 2s infinite}
  @keyframes p{0%,100%{opacity:1}50%{opacity:.35}}
  h1{font-size:clamp(34px,6.4vw,78px);line-height:1.05;font-weight:600;letter-spacing:-.035em;max-width:16ch}
  @media(max-width:380px){h1{font-size:30px}}
  .hero h1{max-width:none}
  .hero-sup{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
  .hero-main{display:block;font-size:clamp(48px,7vw,96px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
  .hero-sub-h{display:block;font-size:clamp(32px,5vw,68px);font-weight:500;letter-spacing:-.025em;color:var(--muted);line-height:1.1}
  .hero .wrap{position:relative;z-index:2}
  /* 🔴 CLS: резерв ширины под САМОЕ ДЛИННОЕ слово ротатора — из CSS, а не из JS.
     JS (fitRot) считал то же самое, но ПОСЛЕ первого пейнта: строка h1 успевала
     отрисоваться по ширине «заявки» (3.19em) и затем расширялась под «клиентов»
     (4.29em) — один сдвиг на 0.10 CLS, почти весь бюджет главной.

     Резерв в `em`, а не в px: размер h1 задан через clamp(), и em-резерв едет вместе
     с ним на любой ширине экрана — одно правило вместо набора медиа-запросов.
     4.4em = самое длинное слово «клиентов» (замер: 240.3px при font-size 56px =
     4.291em) + запас на метрики фолбэк-шрифта.

     🔴 НЕ делать это невидимым ::after с текстом: у `.rot` класс `.ga`
     (background-clip:text + прозрачная заливка), и генерируемый блок внутри ломает
     отрисовку градиентного текста — слово исчезает целиком. Проверено в браузере.
     🔴 При правке списка слов в ROT.ru — перемерить самое длинное. */
  .rot{color:var(--accent);position:relative;display:inline-block;min-width:4.4em}
  .sub{margin-top:28px;font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:58ch;line-height:1.6}
  .cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .cta .hint{font-size:13px;color:var(--faint)}
  .metrics{margin-top:76px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
  @media(max-width:720px){.metrics{grid-template-columns:repeat(2,1fr);gap:28px}}

  section{padding:var(--sp-section) 0;position:relative;z-index:3;scroll-margin-top:86px}
  .shead{margin-bottom:56px;max-width:var(--maxw)}
  .shead .label{margin-bottom:22px;display:block}
  .shead h2{font-size:clamp(28px,3.6vw,44px);font-weight:600;letter-spacing:-.025em;line-height:1.08;max-width:20ch}
  .shead .lead{color:var(--muted);max-width:54ch;font-size:16px;margin-top:18px}

  /* trust-строка под героем */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;position:relative;z-index:3}
  .trust .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center}

  .grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .g3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:820px){.g3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.g3{grid-template-columns:1fr}}
  .card{position:relative;background:var(--bg);padding:34px 32px;transition:background .3s;overflow:hidden}
  .card:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
    background:radial-gradient(300px circle at var(--cx) var(--cy),rgba(74,99,224,.10),transparent 60%)}
  .card:hover{background:var(--surface)}.card:hover:before{opacity:1}
  .card .num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
  .card .ic{width:26px;height:26px;color:var(--accent);margin-bottom:4px}
  .card h3{margin:16px 0 12px;font-size:20px;font-weight:600;letter-spacing:-.01em;position:relative}
  .card p{font-size:14px;color:var(--muted);position:relative;max-width:44ch}

  /* возможности / технологии — feature cards с иконкой */
  .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.feats{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:360px){.feats{grid-template-columns:1fr}}
  .feat{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:28px 26px;overflow:hidden;
    transition:border-color .25s,transform .25s,box-shadow .25s}
  .feat:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(74,99,224,.5)}
  .feat::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:transform .4s var(--ease)}
  .feat:hover::after{transform:scaleX(1)}
  .feat h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
  .feat p{font-size:14px;color:var(--muted);margin-bottom:14px}
  .feat ul{list-style:none;display:grid;gap:7px}
  .feat li{position:relative;padding-left:20px;font-size:13px;color:var(--muted)}
  .feat li:before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

  /* AI deep: пайплайн + колонки */
  .ai-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:54px}
  @media(max-width:820px){.ai-flow{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.ai-flow{grid-template-columns:1fr}}
  .ai-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  @media(max-width:760px){.ai-cols{grid-template-columns:1fr}}

  /* интеграции — категории + плитки */
  .intg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.intg{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.intg{grid-template-columns:1fr}}

  /* AI-демо */
  .demo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
  @media(max-width:780px){.demo{grid-template-columns:1fr}}
  .demo-in,.demo-out{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:24px;display:flex;flex-direction:column}
  .demo-out{position:relative;overflow:hidden}
  .demo-out:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background:radial-gradient(420px 200px at 90% -10%,rgba(155,107,255,.12),transparent 70%)}
  .demo-cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
  .demo-samples{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
  .demo-sample{font-size:12px;padding:7px 12px;border:1px solid var(--line2);border-radius:var(--r-pill);background:transparent;
    color:var(--muted);cursor:pointer;font-family:var(--sans);text-align:left}
  /* 27.08: `transition:all` отсюда убран — он и так перебивался следующей строкой,
     а `all` вместе с `*{scrollbar-color}` заводил вечный переход scrollbar-color. */
  .demo-sample{transition:color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
  .demo-sample:hover{border-color:var(--accent);color:var(--text);background:var(--surface);box-shadow:0 7px 16px -10px rgba(74,99,224,.5)}
  /* без hover-эффекта на двух больших карточках блока «AI в действии» */
  .demo-in:hover,.demo-out:hover{transform:none!important;box-shadow:none!important;border-color:var(--line)!important}
  .demo-in:hover::before{opacity:0!important}
  .demo-out:hover::before{opacity:.5!important}
  #demoText{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-sm);padding:14px 16px;color:var(--text);
    font-family:var(--sans);font-size:14px;width:100%;resize:vertical;min-height:96px;margin-bottom:14px;transition:border-color .2s}
  #demoText:focus{outline:none;border-color:var(--accent)}
  /* Фикс кликабельности: интерактив демо-карточки — над декоративным .card:before */
  .demo-in>*{position:relative;z-index:1}
  #demoRun{justify-content:center;margin-top:auto}
  .demo-empty{color:var(--faint);font-size:14px;margin:auto 0;text-align:center;padding:30px 10px;position:relative}
  .demo-steps{display:grid;gap:10px;margin-bottom:8px;position:relative}
  .demo-step{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--muted);opacity:0;transform:translateX(-6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .demo-step.in{opacity:1;transform:none}
  .demo-step .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);flex:none;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease),border-color .3s var(--ease)}
  .demo-step .dot svg{width:11px;height:11px;color:var(--bg);opacity:0;transition:opacity .25s}
  .demo-step.done .dot{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
  .demo-step.done .dot svg{opacity:1}
  .demo-step.active .dot{border-color:var(--accent);animation:demoPulse 1s ease-in-out infinite}
  @keyframes demoPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,99,224,.4)}50%{box-shadow:0 0 0 6px rgba(74,99,224,0)}}
  .demo-result{position:relative;margin-top:6px;animation:msgIn .4s var(--ease) both}
  .demo-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  .demo-tag{font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:var(--r-pill);
    background:rgba(74,99,224,.12);color:var(--accent);border:1px solid rgba(74,99,224,.25)}
  .demo-tag.alt{background:rgba(155,107,255,.12);color:var(--accent2);border-color:rgba(155,107,255,.25)}
  .demo-tag.warn{background:rgba(255,170,60,.14);color:#f0a93c;border-color:rgba(255,170,60,.3)}
  .demo-reply-cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
  .demo-reply{display:flex;gap:11px;align-items:flex-start}
  .demo-reply-av{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--bg)}
  .demo-reply-av svg{width:17px;height:17px}
  .demo-reply-txt{font-size:14px;line-height:1.6;color:var(--text);background:var(--bg);border:1px solid var(--line);
    border-radius:var(--r-md);border-top-left-radius:4px;padding:12px 15px;flex:1;min-height:20px}

  /* стек / БД / инфраструктура */
  .stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.stack-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.stack-grid{grid-template-columns:1fr}}

  .work{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  @media(max-width:700px){.work{grid-template-columns:1fr}}
  .proj{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);transition:border-color .25s,transform .25s}
  .proj:hover{border-color:var(--line2);transform:translateY(-4px)}
  .thumb{height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--thumb)}
  .thumb::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
  .proj:hover .thumb::after{opacity:1}
  .thumb-cta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%) translateY(8px);z-index:2;opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--bg);background:rgba(74,99,224,.28);border:1px solid rgba(74,99,224,.45);padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap}
  .proj:hover .thumb-cta{opacity:1;transform:translateX(-50%) translateY(0)}
  .thumb:before{content:"";position:absolute;inset:0;background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:30px 30px;transition:transform .6s}
  .proj:hover .thumb:before{transform:scale(1.1)}
  .tag{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
    background:rgba(74,99,224,.12);color:var(--accent);border:1px solid rgba(74,99,224,.28);padding:4px 10px;border-radius:var(--r-sm)}
  .proj .body{padding:24px 26px}
  .proj h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
  .proj p{font-size:14px;color:var(--muted);margin-top:8px}
  /* Portfolio upgrades */
  a.proj{text-decoration:none;color:inherit;display:block;cursor:pointer}
  .proj-featured{grid-column:1/-1}
  .proj-featured .thumb{height:260px}
  .proj-icon{font-size:46px;line-height:1;margin-bottom:10px;position:relative;z-index:1;display:block}
  .proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .proj-tag{font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:var(--r-sm);background:rgba(74,99,224,.08);color:var(--muted);border:1px solid var(--line2)}
  .proj-link{display:inline-block;margin-top:14px;font-size:13px;color:var(--accent);font-family:var(--mono);letter-spacing:.02em}
  a.proj:hover .proj-link{text-decoration:underline}
  .proj[data-niche=psy] .thumb{background:linear-gradient(135deg,#2e1609,#3d2010)}
  .proj[data-niche=med] .thumb{background:linear-gradient(135deg,#040f1f,#0a1c3a)}
  .proj[data-niche=gruz] .thumb{background:linear-gradient(135deg,#161000,#2e2200)}
  .proj[data-niche=fleur] .thumb{background:linear-gradient(135deg,#290710,#3d0f1c)}

  .proj[data-niche=nexus] .thumb{background:linear-gradient(135deg,#04040A,#1a0530)}
  .proj[data-niche=phantom] .thumb{background:linear-gradient(135deg,#000000,#000a08)}

  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
  @media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.steps{grid-template-columns:1fr}}
  .step{background:var(--bg);padding:34px 28px}
  .step .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
  .step h3{margin:14px 0 10px;font-size:20px;font-weight:600;letter-spacing:-.01em}
  .step p{font-size:14px;color:var(--muted)}

  .marquee{margin-top:60px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .track{display:flex;gap:14px;width:max-content;animation:scroll 36s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
  @keyframes scroll{to{transform:translateX(-50%)}}
  .chip{font-family:var(--mono);font-size:13px;color:var(--muted);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:10px 16px;background:var(--surface);white-space:nowrap}

  /* принципы — карточки */
  .principles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .principles-3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:860px){.principles-3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.principles-3{grid-template-columns:1fr}}
  @media(max-width:860px){.principles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.principles{grid-template-columns:1fr}}
  .pr{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
    padding:28px 24px;overflow:hidden;transition:transform .28s,border-color .28s,box-shadow .28s}
  .pr:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;transform:scaleX(0);transform-origin:left;
    background:linear-gradient(90deg,var(--accent),var(--accent2));transition:transform .4s}
  .pr:after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
    background:radial-gradient(300px circle at 50% -10%,rgba(74,99,224,.14),transparent 60%)}
  .pr:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 26px 56px -32px rgba(74,99,224,.55)}
  .pr:hover:before{transform:scaleX(1)}
  .pr:hover:after{opacity:1}
  .pr .pic{width:46px;height:46px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(74,99,224,.16),rgba(155,107,255,.18));color:var(--accent);
    margin-bottom:18px;transition:transform .35s}
  .pr:hover .pic{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
  .pr .pic svg{width:23px;height:23px}
  .pr h3{font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em;position:relative}
  .pr p{font-size:14px;color:var(--muted);position:relative}

  /* гарантии */
  .guar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.guar-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.guar-grid{grid-template-columns:1fr}}

  /* тарифы */
  .switch{position:relative;width:54px;height:30px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--surface2);cursor:pointer;transition:background .2s,border-color .2s;flex:none}
  .switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translateX(0);transition:transform .25s var(--ease);will-change:transform}
  .switch.on{background:rgba(74,99,224,.22);border-color:var(--accent)}
  .switch.on i{transform:translateX(24px)}
  .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  @media(max-width:1100px){.plans{grid-template-columns:repeat(4,1fr);gap:12px}
    .plan{padding:24px 18px}
    .plan .price{font-size:clamp(16px,1.8vw,22px)}}
  @media(max-width:880px){.plans{grid-template-columns:repeat(2,1fr);gap:16px;max-width:none;margin:0}}
  .plan{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:32px 28px;transition:border-color .25s,transform .25s;display:flex;flex-direction:column}
  .plan:hover{border-color:var(--line2);transform:translateY(-4px)}
  .plan .price{font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;margin:18px 0 2px;white-space:normal;word-break:break-word;hyphens:none;line-height:1.15}
  .plan .price small{font-size:14px;font-weight:400;color:var(--muted)}
  .plan ul{list-style:none;margin:22px 0;display:grid;gap:11px;border-top:1px solid var(--line);padding-top:20px}
  .plan li{position:relative;padding-left:24px;font-size:14px;color:var(--muted)}
  .plan li b{color:var(--text);font-weight:500}
  .plan li:before{content:"";position:absolute;left:3px;top:7px;width:11px;height:6px;border-left:2px solid var(--accent);
    border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  .plan .btn{width:100%;justify-content:center;margin-top:auto}

  /* таблица сравнения */
  /* зебра */
  /* подсветка колонки «Бизнес» (2-й столбец-cc = 2-я td) */
  /* галочки-бейджи */

  /* faq */
  .faq details{border-top:1px solid var(--line);padding:4px 0}
  .faq details:last-child{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:24px 4px;font-size:18px;font-weight:500;letter-spacing:-.01em;transition:color .2s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--accent)}
  .faq summary .pl{font-family:var(--mono);color:var(--accent);transition:transform .3s;flex:none}
  .faq details[open] summary .pl{transform:rotate(45deg)}
  .faq .ans{padding:0 4px 26px;color:var(--muted);font-size:14px;max-width:68ch;line-height:1.7}
  .faq .ans b{color:var(--text);font-weight:500}
  .faq .ans a{color:var(--accent);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:opacity .2s}
  .faq .ans a:hover{opacity:.75}
  .faq .ans ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
  .faq .ans li{position:relative;padding-left:20px}
  .faq .ans li:before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

  /* калькулятор */
  .calc{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
  @media(max-width:760px){.calc{grid-template-columns:1fr;gap:28px}}
  .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(max-width:640px){.opts{gap:8px}}
  @media(max-width:380px){.opts{grid-template-columns:1fr}}
  .hp{display:none!important}
  .fstatus{font-size:13px;color:var(--muted);min-height:18px;margin-top:2px}
  .fstatus.ok{color:var(--good)}.fstatus.err{color:#ff7676}
  .consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--muted);line-height:1.5}
  .consent a,.esccons a{color:var(--accent)}
  .esccons{display:flex;align-items:flex-start;gap:9px;font-size:11px;line-height:1.35;color:var(--muted)}
  .consent input[type=checkbox]{margin-top:1px}
  @keyframes checkPop{0%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.3)}100%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}}
  .cookie{position:fixed;left:22px;bottom:22px;z-index:88;max-width:360px;display:none;gap:14px;align-items:center;
    background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:14px 16px;
    box-shadow:0 20px 50px -20px rgba(0,0,0,.6);font-size:13px;color:var(--muted)}
  .cookie.show{display:flex}.cookie a{color:var(--accent);text-decoration:underline}
  .cookie .btn{padding:8px 16px;font-size:13px;flex:none}
  @media(max-width:520px){.cookie{left:12px;right:12px;bottom:84px;max-width:none}}
  /* лид-магнит «аудит» */
  .audit{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
    background:linear-gradient(135deg,rgba(74,99,224,.1),rgba(155,107,255,.08)),var(--surface);
    padding:48px 46px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
  .audit:before{content:"";position:absolute;top:-40%;left:-8%;width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(74,99,224,.16),transparent 65%);pointer-events:none}
  @media(max-width:780px){.audit{grid-template-columns:1fr;padding:34px 26px;gap:28px}}
  .audit h2{font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:16px 0 0;position:relative}
  .audit p{color:var(--muted);font-size:14px;margin-top:14px;max-width:46ch;position:relative}
  .audit-list{list-style:none;display:grid;gap:9px;margin-top:18px;position:relative}
  .audit-list li{position:relative;padding-left:26px;font-size:14px;color:var(--muted)}
  .audit-list li:before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  .audit-form{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md);padding:24px}
  .audit-tg{position:relative;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md);padding:28px 24px;display:flex;flex-direction:column;gap:20px}
  .audit-tg-steps{display:flex;flex-direction:column;gap:14px}
  .audit-tg-step{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
  .audit-tg-n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent);background:rgba(74,99,224,.12);border-radius:var(--r-sm);padding:3px 9px;flex-shrink:0;font-weight:600}
  .audit-tg-btn{width:100%;justify-content:center;gap:10px;margin-top:4px}
  @media(max-width:768px){.audit-tg-btn{white-space:nowrap;font-size:13px;padding-left:14px;padding-right:14px;gap:7px}.audit-tg-btn svg{width:15px;height:15px;flex:none}}
  .audit-tg-hint{font-size:13px;color:var(--faint);text-align:center;margin:0}
  @media(max-width:560px){.audit{padding:24px 14px}.audit-tg{padding:16px 12px}}

  #contact{position:relative;overflow:hidden}
  #formfx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
  #contact .wrap{position:relative;z-index:1}
  .contact{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:60px 52px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;overflow:hidden}
  .contact:before{content:"";position:absolute;top:-50%;right:-12%;width:480px;height:480px;border-radius:50%;
    background:radial-gradient(circle,rgba(155,107,255,.12),transparent 65%);pointer-events:none}
  @media(max-width:760px){.contact{grid-template-columns:1fr;padding:40px 30px;gap:32px}}
  .contact-direct{margin-top:24px}
  .cd-btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;padding:11px 18px;border-radius:var(--r-sm);
    border:1px solid var(--line2);color:var(--text);transition:border-color .25s var(--ease),transform .3s var(--spring),box-shadow .25s var(--ease)}
  .cd-btn svg{width:17px;height:17px;color:var(--accent)}
  .cd-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(74,99,224,.5)}
  .cd-meta{display:grid;gap:7px;margin-top:16px;font-size:13px;color:var(--muted)}
  .cd-meta span{display:flex;align-items:center;gap:8px}
  .cd-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);flex:none}  /* 29.07: пульсация снята */
  .contact h2{font-size:34px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
  .contact p{color:var(--muted);margin-top:16px;font-size:14px}
  form{display:flex;flex-direction:column;gap:13px;position:relative;z-index:1}
  input:not([type=checkbox]):not([type=range]),textarea{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-sm);
    padding:14px 16px;color:var(--text);font-family:var(--sans);font-size:14px;width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
  input:not([type=checkbox]):not([type=range]):focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(109,73,206,.12)}
  /* единый красивый чекбокс на весь сайт */
  input[type=checkbox]{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:none;padding:0;margin:0;
    border:1.6px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);cursor:pointer;position:relative;vertical-align:middle;
    transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--spring)}
  input[type=checkbox]:hover{border-color:var(--accent)}
  input[type=checkbox]:checked{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 4px 12px -3px rgba(109,73,206,.45)}
  input[type=checkbox]:checked:after{content:"";position:absolute;left:50%;top:45%;width:4.5px;height:9px;
    border:solid var(--bg);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg);transform-origin:center;animation:checkPop .22s var(--ease)}
  input[type=checkbox]:active{transform:scale(.86)}
  input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(74,99,224,.26)}
  textarea{resize:vertical;min-height:96px}
  /* AI-помощник в форме */
  .aihelp{margin-top:-4px}
  .aihelp-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
    font-family:var(--sans);font-size:13px;font-weight:500;color:var(--accent);padding:6px 2px;transition:opacity .2s}
  .aihelp-toggle:hover{opacity:.8}
  .aihelp-toggle svg{width:16px;height:16px;animation:fabSpark 4s ease-in-out infinite}
  .aihelp-panel{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
    transition:grid-template-rows .38s var(--ease),opacity .3s var(--ease),margin-top .38s var(--ease)}
  .aihelp-panel.open{grid-template-rows:1fr;opacity:1;margin-top:10px}
  @media(prefers-reduced-motion:reduce){.aihelp-panel{transition:opacity .2s var(--ease)}}
  .aihelp-panel-in{overflow:hidden;min-height:0;border:1px solid var(--line2);border-radius:var(--r-md);padding:16px;background:var(--bg);position:relative}
  .ah-close{position:absolute;top:9px;right:9px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
    border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;border-radius:var(--r-sm);transition:background .2s,color .2s}
  .ah-close:hover{background:var(--surface);color:var(--text)}
  .ah-q{font-size:12px;color:var(--muted);margin:0 0 8px}
  .ah-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
  .ah-chip{font-size:12px;padding:7px 12px;border:1px solid var(--line2);border-radius:var(--r-pill);background:transparent;
    color:var(--muted);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);font-family:var(--sans)}
  .ah-chip:hover{border-color:var(--accent);color:var(--text)}
  .ah-chip.on{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--bg)}
  .ah-gen{width:100%;justify-content:center}
  .ah-out{margin-top:14px;animation:msgIn .35s var(--ease) both}
  .ah-draft{font-size:14px;line-height:1.6;color:var(--text);background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:14px 16px;position:relative}
  .ah-draft:before{content:"✦ AI";position:absolute;top:-9px;left:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
    color:var(--bg);background:linear-gradient(135deg,var(--accent),var(--accent2));padding:2px 8px;border-radius:var(--r-sm)}
  .ah-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .ah-actions .btn{font-size:13px;padding:9px 14px}

  /* Футер унифицирован в css/ui.css (.foot) — прежний тёмный inline-набор .foot-* удалён (расходился с подстраницами). */
  .reveal{opacity:0;transform:translateY(26px) scale(.99);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  /* доп. варианты раскрытия + микроинтеракции */
  .reveal-up{opacity:0;transform:translateY(32px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
  .reveal-up.in{opacity:1;transform:translateY(0)}
  .reveal-scale{opacity:0;transform:scale(.96);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .reveal-scale.in{opacity:1;transform:scale(1)}
  .card{transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .2s}
  .card:hover{transform:translateY(-3px)}
  @media(hover:none){.card:hover{transform:none}}
  @keyframes lf{from{width:0}to{width:100%}}
  /* ═══ вау-акценты ═══ */
  .rot{text-shadow:0 0 32px rgba(74,99,224,.4)}
  /* анимированный градиент-кикер под номером секции */
  .shead .label{position:relative;padding-bottom:14px}
  .shead .label .i{display:inline-block;transition:transform .35s var(--ease),color .35s var(--ease)}
  .shead .label:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:var(--r-sm);
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    transition:width .7s cubic-bezier(.2,.7,.2,1) .15s,box-shadow .4s var(--ease)}
  .reveal.in .label:after,.shead.reveal.in .label:after{width:54px}
  .shead:hover .label:after{width:96px;box-shadow:0 0 16px rgba(74,99,224,.55)}
  .shead:hover .label .i{transform:translateX(3px);color:var(--accent2)}
  /* парящая кнопка чата */
  /* 🔴 Решение владельца 29.07: на кнопке чата остаётся ТОЛЬКО пульсация кольца
     (.fab-ring). Качание корпуса floaty снято — оно давало постоянную работу
     композитора в покое и, как побочный эффект, съедало подъём при наведении:
     анимация transform всегда сильнее объявления transform в :hover.
     Кадры floaty оставлены — их использует .refer-cta .amt в home.css. */
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  /* мягкое свечение карточек услуг при наведении (обе темы) */
  .grid .card:hover{box-shadow:var(--sh-2)}
  /* scroll-прогресс сверху */
  #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
    background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px rgba(109,73,206,.6)}
  /* 3D-тилт карточек возможностей */
  .feat{transform-style:preserve-3d;transition:transform .35s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease)}
  .feat h3{transform:translateZ(24px)}
  @media(hover:none){.feat{transform:none!important}}
  /* единая плавность интерактивных элементов — без дёрганий */
  .tt,.burger,.chat-fab,.proj,.plan,.pr,.card,.chip-q,.faq summary{transition-timing-function:var(--ease)!important}
  .tt:hover,.burger:hover{transform:translateY(-1px)}
  .proj{transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
  .plan{transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
  .pr{transition:transform .35s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease)}
  .chat-fab{transition:transform .3s var(--spring),box-shadow .3s var(--ease)}
  /* 🔴 27.08: было `*{…}`. scrollbar-color наследуется, поэтому html даёт тот же вид,
     но правило перестаёт объявлять свойство НА КАЖДОМ элементе страницы. В связке с
     `transition:all` это порождало вечно «running» переходы scrollbar-color
     (замер 27.08: 33 штуки на главной, currentTime намертво 0). */
  html{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  /* единые мягкие переходы поверхностей при смене темы (без элементов с transform-hover) */
  .card,.contact,.demo-in,.demo-out,.step,.chip,header,.status,.chat-panel,.cookie,.msg,.demo-reply-txt,.ah-draft,.aihelp-panel-in,#demoText{
    transition-property:background-color,border-color,color,box-shadow;transition-duration:.4s;transition-timing-function:var(--ease)}
  /* мягкое раскрытие ответов FAQ */
  .faq details[open] .ans{animation:faqOpen .4s var(--ease) both}
  @keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  /* плавный скролл с учётом sticky-шапки */
  /* нативный smooth-scroll отключён — навигация идёт через cinematicScrollTo */
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
  /* AI-консультант */
  .chat-fab{position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;
    background:linear-gradient(140deg,var(--accent),var(--accent2));color:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 16px 36px -10px rgba(74,99,224,.75)}
  .chat-fab:hover{transform:translateY(-3px) scale(1.06)}
  .chat-fab:active{transform:scale(.95)}
  .chat-fab .fab-icon{width:27px;height:27px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
  @keyframes fabSpark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(8deg) scale(1.08)}}
  .chat-fab .fab-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:.6;animation:fabRing 2.6s ease-out infinite}
  @keyframes fabRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
  .chat-fab .badge{position:absolute;top:1px;right:1px;left:auto;width:13px;height:13px;min-width:0;padding:0;display:block;box-sizing:border-box;border-radius:50%;background:var(--good);border:2px solid var(--bg);z-index:2;font-size:0;gap:0}
  @keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(15,184,126,.55)}70%{box-shadow:0 0 0 8px rgba(15,184,126,0)}100%{box-shadow:0 0 0 0 rgba(15,184,126,0)}}
  /* появление сообщений чата */
  @keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .msg{animation:msgIn .32s var(--ease) both}
  .qrow{animation:msgIn .32s var(--ease) both}
  .chat-head .av{background:linear-gradient(135deg,rgba(74,99,224,.2),rgba(155,107,255,.22))}
  .chat-panel{position:fixed;right:22px;bottom:92px;z-index:91;width:372px;max-width:calc(100vw - 28px);
    height:min(640px,calc(100dvh - 120px));max-height:calc(100dvh - 120px);background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);
    display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px -22px rgba(0,0,0,.65);
    opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:opacity .25s,transform .25s}
  .chat-panel.open{opacity:1;transform:none;pointer-events:auto}
  .chat-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
  .chat-head .av{width:38px;height:38px;border-radius:50%;background:rgba(74,99,224,.16);display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none}
  .chat-head .av svg{width:20px;height:20px}
  .chat-title{font-weight:600;font-size:14px;letter-spacing:-.01em}
  .chat-st{font-size:12px;color:#0A7D56;display:flex;align-items:center;gap:6px}
  .chat-st i{width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block}
  .chat-x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:var(--r-sm);display:flex}
  .chat-x:hover{color:var(--text);background:var(--surface2)}.chat-x svg{width:18px;height:18px}
  /* min-height:0 — ОБЯЗАТЕЛЬНО. Без него flex-элемент не сжимается ниже своего контента:
     пока сообщения короткие, скролл «работает», а когда внутрь попадает высокая форма заявки —
     тело растягивается и overflow-y:auto перестаёт срабатывать. */
  .chat-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:10px}
  .chat-note,.chips,.chat-input,.chat-hint{flex:0 0 auto}
  .msg{max-width:84%;padding:11px 14px;border-radius:var(--r-md);font-size:14px;line-height:1.55;word-wrap:break-word}
  .msg.bot{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--text)}
  .msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
  .msg.bot b{color:var(--accent);font-weight:500}
  .typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);border-bottom-left-radius:4px}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:tp 1s infinite}
  .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  @keyframes tp{0%,60%,100%{opacity:.3}30%{opacity:1}}
  .chat-note{font-size:11px;color:var(--faint);padding:2px 16px 8px;font-family:var(--mono)}
  .chat-note.warn{color:var(--accent);font-weight:500;font-family:var(--sans)}
  .chat-hint{font-size:11px;line-height:1.4;color:var(--faint);padding:0 16px 9px;margin:0}
  .chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
  .qrow{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:100%;margin-top:-2px}
  .chip-q{font-size:12px;padding:7px 12px;border:1px solid var(--line2);border-radius:var(--r-pill);background:transparent;color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s;font-family:var(--sans)}
  .chip-q:hover{border-color:var(--accent);color:var(--text)}
  /* CTA-кнопки перехода в личку: <a>, а не <button> — страница не перезагружается */
  .cta-row{margin-top:2px}
  a.chip-cta{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:500;animation:ctaIn .32s var(--ease) both}
  a.chip-cta .chip-arrow{transition:transform .2s var(--ease)}
  a.chip-cta:hover .chip-arrow{transform:translateX(3px)}
  a.chip-cta.primary{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
  a.chip-cta.primary:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
  @keyframes ctaIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){a.chip-cta{animation:none}}
  .chat-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--bg)}
  .chat-input input{flex:1;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px 13px;color:var(--text);font-family:var(--sans);font-size:14px}
  .chat-input input:focus{outline:none;border-color:var(--accent)}
  .chat-send{width:42px;height:42px;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);border:none;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;transition:filter .2s}
  .chat-send:hover{filter:brightness(1.1)}.chat-send svg{width:18px;height:18px}
  .esc{display:flex;flex-direction:column;gap:8px;min-width:240px}
  .esc input:not([type=checkbox]),.esc textarea{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-sm);padding:9px 11px;color:var(--text);font-family:var(--sans);font-size:13px;width:100%}
  .esck{flex:none;width:16px;height:16px;margin:0;padding:0;border-radius:var(--r-sm)}
  .esc textarea{min-height:58px;resize:vertical}
  .esc .escb{margin-top:2px;justify-content:center;padding:10px}
  .escs{font-size:12px;margin:2px 0 0;min-height:14px}.escs.ok{color:var(--good)}.escs.err{color:#ff7676}
  @media(max-width:480px){.chat-panel{right:12px;left:12px;width:auto;bottom:86px;height:min(640px,calc(100dvh - 96px))}.chat-fab{right:16px;bottom:16px}}
  /* кросс-девайс шлифовка */
  @media(max-width:760px){input,textarea{font-size:16px}
    /* клиренс под плавающую кнопку чата, чтобы она не перекрывала реквизиты/ссылки футера */
    footer{padding-bottom:104px}}
  @media(hover:none){.card:hover,.proj:hover,.btn:hover,.feat:hover,.plan:hover{transform:none}}
  /* ── адаптив: планшет ── */
  @media(max-width:1024px){
    .feats{grid-template-columns:1fr 1fr}
    /* футер — единый в css/ui.css (.foot-grid), локальные оверрайды убраны */
  }
  /* ── адаптив: телефон ── */
  @media(max-width:640px){
    .marquee{display:none}
    .intg{grid-template-columns:1fr}
    .stack-grid{grid-template-columns:1fr}
    .hero-main{font-size:clamp(36px,10vw,52px)}
    .hero-sub-h{font-size:clamp(24px,7vw,36px)}
    .sub{font-size:14px}
    .metrics{grid-template-columns:1fr 1fr;gap:16px}
  }
  /* ═══════════ SUPERCHARGE: навбар / hero / UI / мобайл ═══════════ */
  /* — Задача 1.1: скользящий pill за пунктами меню — */
  .snav-links a,.snav-links .snav-dd{position:relative;z-index:1}
  /* — Задача 1.2: hero-mode (прозрачный header пока виден hero) — */
  header{transition:background .45s var(--ease),box-shadow .45s var(--ease),top .3s var(--ease),border-color .45s var(--ease)}
  header.hero-mode{background:rgba(12,17,32,0);border-color:rgba(74,99,224,0);box-shadow:none}
  header.hero-mode .navlinks a{color:rgba(240,244,255,.55)}
  header.hero-mode .logo{opacity:.9}
  header.hero-mode .tt{border-color:rgba(74,99,224,0);color:rgba(240,244,255,.5)}

  /* — Фикс 8: в светлой теме кнопки EN/тема не сливались с фоном навбара — */

  /* — Задача 1.3: появление навбара при load (не ломаем центрирование header) — */
  @keyframes navItemIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes navHeaderIn{from{opacity:0}to{opacity:1}}
  header{animation:navHeaderIn .5s var(--ease) .2s both}
  .navlinks a{opacity:0;animation:navItemIn .45s var(--ease) both}
  .navlinks a:nth-child(1){animation-delay:.0s}.navlinks a:nth-child(2){animation-delay:.04s}
  .navlinks a:nth-child(3){animation-delay:.08s}.navlinks a:nth-child(4){animation-delay:.12s}
  .navlinks a:nth-child(5){animation-delay:.16s}.navlinks a:nth-child(6){animation-delay:.20s}
  .navlinks a:nth-child(7){animation-delay:.24s}
  .right>#lang{opacity:0;animation:navItemIn .45s var(--ease) .74s both}
  .right>#theme{opacity:0;animation:navItemIn .45s var(--ease) .78s both}
  .right>.btn-primary{opacity:0;animation:navItemIn .45s var(--ease) .82s both}
  /* — Задача 1.4: glowing border у header.scrolled — */
  header.scrolled{
    background:rgba(12,17,32,.92);top:8px;
    box-shadow:0 16px 48px rgba(0,0,0,.55),0 0 0 1px rgba(74,99,224,.18),inset 0 1px 0 rgba(74,99,224,.14)
  }
  /* — Баг 7: явные цвета nav при scroll (текст не сливается с фоном в тёмной теме) — */
  header.scrolled .navlinks a{color:var(--muted)}
  header.scrolled .navlinks a:hover,header.scrolled .navlinks a.active{color:var(--text)}
  header.scrolled .tt{color:var(--muted);border-color:var(--line2)}
  header.scrolled .tt:hover{color:var(--text);border-color:var(--accent)}
  /* — Задача 1.5: .tt — фикс. ширина 38px + подпись-тултип снизу (без сдвига соседей) — */
  .tt{position:relative;
    transition:color .2s,border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s}
  .tt[data-label]{width:38px}
  .tt[data-label]:hover{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 1px rgba(74,99,224,.15)}
  .tt[data-label]::before{content:attr(data-label);position:absolute;top:calc(100% + 8px);left:50%;
    transform:translateX(-50%) translateY(-4px);font-family:var(--mono);font-size:11px;letter-spacing:.04em;
    white-space:nowrap;color:var(--muted);background:var(--surface);border:1px solid var(--line2);
    border-radius:var(--r-sm);padding:3px 9px;opacity:0;pointer-events:none;z-index:30;
    box-shadow:0 8px 22px -10px rgba(0,0,0,.5);transition:opacity .18s var(--ease),transform .18s var(--ease)}
  .tt[data-label]:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
  /* radial glow остаётся */
  .tt::after{content:"";position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(circle at center,rgba(74,99,224,.2),transparent 70%);
    opacity:0;transition:opacity .2s;pointer-events:none}
  .tt:hover::after{opacity:1}
  /* на тач/мобиле подпись-тултип не показываем — только иконки */
  @media(hover:none){.tt[data-label]::before{display:none}}
  @media(max-width:768px){.tt[data-label]::before{display:none}}

  /* — Задача 3.1: status-bar — */
  .status{background:rgba(52,217,154,.06);border:1px solid rgba(52,217,154,.2);
    box-shadow:0 0 20px -8px rgba(52,217,154,.2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    animation:statusIn .6s var(--ease) 1.1s both}
  @keyframes statusIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
  /* — Задача 3.2: pulse кольцо-ripple — */
  @keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(52,217,154,.5)}70%{box-shadow:0 0 0 7px rgba(52,217,154,0)}100%{box-shadow:0 0 0 0 rgba(52,217,154,0)}}
  .pulse{width:6px;height:6px;animation:pulseRing 2.4s ease infinite}
  /* — Задача 3.3: rot glow — */
  .rot{text-shadow:0 0 40px rgba(74,99,224,.4),0 0 80px rgba(74,99,224,.12)}
  /* — Задача 3.4: hero появление элементов — */
  @keyframes heroTextIn{from{opacity:0;transform:translateY(20px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
  .hero-sup{animation:heroTextIn .65s var(--ease) 1.0s both}
  .hero h1 .hero-main{animation:heroTextIn .65s var(--ease) 1.15s both}
  .hero h1 .hero-sub-h{animation:heroTextIn .65s var(--ease) 1.25s both}
  .sub{animation:heroTextIn .6s var(--ease) 1.35s both}
  .cta{animation:heroTextIn .6s var(--ease) 1.45s both}
  .metrics{animation:heroTextIn .5s var(--ease) 1.55s both}
  /* — Задача 3.5: metrics grid с разделителями — */
  .metrics{gap:0}
  @media(max-width:720px){.metrics{grid-template-columns:1fr 1fr}}

  /* — Задача 5.1: card hover — */
  .card{border:1px solid var(--line);position:relative;overflow:hidden;
    transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .2s,border-color .3s}
  .card:hover{border-color:color-mix(in srgb,var(--accent) 30%,transparent);transform:translateY(-3px);box-shadow:var(--sh-2)}
  /* — Задача 5.2: bento-grid — */
  /* Фикс 2 (вариант A): все 6 карточек услуг равные, 3 в ряд — без bento-span, card-06 больше не одинока */
  @media(min-width:900px){
    .grid.g3{grid-template-columns:repeat(3,1fr)}
    /* Bento услуги: 1-я (Лендинги) и 6-я (Доработка) — wide */
    .grid.g3 > .card:nth-child(1){grid-column:span 2}
    .grid.g3 > .card:nth-child(6){grid-column:span 2}
    /* Bento возможности: 1-я (интеграция AI) и 7-я (Telegram-боты) — wide */
    .feats > .feat:nth-child(1){grid-column:span 2}
    .feats > .feat:nth-child(7){grid-column:span 2}
  }
  /* card-cta — мини CTA в bento-ячейке */
  .card-cta{display:flex;flex-direction:column;justify-content:center;gap:12px;
    background:linear-gradient(135deg,rgba(74,99,224,.06),rgba(129,140,248,.08));
    border:1px dashed var(--line2)!important}
  .card-cta h3{margin:0;font-size:18px}
  .card-cta p{margin:0;font-size:14px;color:var(--muted)}
  .btn-sm{padding:9px 18px;font-size:13px;border-radius:var(--r-sm);align-self:flex-start;margin-top:4px}
  @media(max-width:899px){.card-cta{display:none}}
  /* — Баг 1: trust-strip заполняет пустые ячейки bento под услугами — */
  .trust-strip{grid-column:1/-1;background:var(--bg);padding:22px 32px;display:flex;gap:16px 32px;
    flex-wrap:wrap;align-items:center;justify-content:center}
  .trust-strip .ts-item{font-family:var(--mono);font-size:12px;color:var(--muted);display:inline-flex;
    align-items:center;gap:8px;letter-spacing:.01em}
  .trust-strip .ts-item svg{width:15px;height:15px;color:var(--accent);flex:none}
  /* мобиле: 2 колонки тезисов */
  @media(max-width:640px){.trust-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:18px 16px}
    .trust-strip .ts-item{font-size:11px}}

  /* — Фикс 6: возможности без аккордеона — 2 колонки на мобиле, компактные карточки — */
  @media(max-width:640px){
    .feats{grid-template-columns:1fr 1fr;gap:10px}
    .feat{padding:16px 12px}
    .feat h3{font-size:14px;line-height:1.3}
    .feat p{font-size:12px}
    .feat ul{font-size:12px}
    .feat li{font-size:12px;margin-bottom:4px}
    /* нечётная последняя карточка — на всю ширину */
    .feats .feat:last-child:nth-child(odd){grid-column:1/-1}
  }
  @media(max-width:360px){
    .feats{grid-template-columns:1fr}
    .feats .feat:last-child:nth-child(odd){grid-column:auto}
  }
  /* — Фикс 7: FAQ — первые 3 видны, остальные за кнопкой — */
  .faq-more[hidden]{display:none}
  .faq>details:last-of-type{border-bottom:1px solid var(--line)}
  .faq-show-more{display:flex;align-items:center;gap:8px;margin:20px auto 0;
    font-family:var(--mono);font-size:13px;color:var(--accent);background:none;
    border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px 18px;cursor:pointer;
    transition:border-color .2s,color .2s}
  .faq-show-more:hover{border-color:var(--accent);color:var(--text)}
  /* скрытие show-more после раскрытия — через JS (style.display), чтобы кнопку можно было вернуть */
  .faq-arr{flex-shrink:0;transition:transform .3s var(--ease)}
  /* — Баг 2: лейбл секции не упирается в дивайдер между секциями — */
  .shead .label{margin-top:8px}
  /* — Задача 5.3: shead accent line — */
  .shead{position:relative;padding-left:32px}
  .shead::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:var(--r-sm);
    background:linear-gradient(180deg,var(--accent),var(--accent2));opacity:.55}
  /* — Задача 5.4: section dividers (хайрлайн между СОСЕДНИМИ секциями).
     FIX I (20.07): правило больше НЕ срабатывает нигде — каждый стык секций
     теперь несёт элемент .pulse-rule (канонический разделитель сайта), и он же
     гасит удвоение padding своими отрицательными margin'ами. Раньше этот
     ::before был единственным хайрлайном на всей главной, висел осиротевшим
     ВНУТРИ тонированной полосы #promos и добавлял к стыку лишние 45px.
     Оставлено как запасной вариант; при появлении соседних секций вплотную
     сначала ставь .pulse-rule, а не полагайся на этот селектор (он хрупок).
     Гейт 2б: снята компенсация #value-stack::before{content:none} (её ставил
     гейт 2а) — value-stack теперь получает разделитель, как все прочие соседние
     пары. NB: `section+section` хрупок к нодам-между (у #contact перед ним
     <script> → разделителя нет намеренно оставлено — `:not(:first-of-type)`
     добавил бы его с кривым margin-collapse из-за overflow:hidden). WEB-СТАНДАРТ §4.1. — */
  section+section::before{content:"";display:block;height:1px;margin-bottom:44px;
    background:linear-gradient(90deg,transparent,var(--line2) 25%,var(--line2) 75%,transparent);opacity:.5}
  @media(max-width:768px){section+section::before{margin-bottom:32px}}
  /* — Задача 5.5: feat data-n (используем ::before, чтобы не затирать верхнюю линию ::after) — */
  .feat::before{content:attr(data-n);position:absolute;top:16px;right:20px;
    font-family:var(--mono);font-size:11px;color:var(--faint);opacity:.45;letter-spacing:.06em;z-index:2}
  /* — Задача 5.6: btn-primary shimmer + pulse — */
  .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
  .btn-primary:hover{filter:brightness(1.1);box-shadow:0 10px 28px -10px rgba(74,99,224,.5),0 0 0 4px rgba(74,99,224,.1)}
  /* ctaPulse переехал в css/ui.css: правило было продублировано здесь и в
     home.css с РАЗНЫМИ кадрами (синий 74,99,224 против акцента 109,73,206) и
     разной задержкой (3s против 2.5s). 29.07 сведено к одному правилу и одним
     кадрам, повторов вместо infinite — три. */
  /* — Задача 5.7: titem hover-lift — */
  /* — Задача 5.8: flowstep connector — */
  .ai-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:54px}
  @media(max-width:900px){.ai-flow{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.ai-flow{grid-template-columns:1fr}}

  /* — Задача 2: thumb-placeholder — */
  .thumb-placeholder{position:absolute;inset:28px 0 0 0;display:flex;align-items:center;
    justify-content:center;flex-direction:column;gap:12px;z-index:1}
  .tp-icon{width:48px;height:48px;border-radius:var(--r-sm);background:rgba(74,99,224,.12);
    border:1px solid rgba(74,99,224,.18);display:flex;align-items:center;justify-content:center;
    color:var(--accent);font-size:20px;font-family:var(--mono);transition:transform .3s var(--spring)}
  .proj:hover .tp-icon{transform:scale(1.08)}
  .tp-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    color:rgba(240,244,255,.2);text-transform:uppercase}
  .tbdots{position:absolute;top:11px;left:14px;z-index:2;display:flex;gap:6px}
  .tbdots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
  .tburl{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:2;
    font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.35);white-space:nowrap}

  /* AI-фото проектов как реальное превью в .thumb (SVG удаляются в рантайме) */
  .thumb-bg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center;z-index:0;opacity:.6;
    transition:opacity .4s var(--ease),transform .5s var(--ease)}
  .proj:hover .thumb-bg-photo{opacity:.82;transform:scale(1.06)}

  /* лёгкое затемнение снизу — чтобы chrome/CTA читались поверх фото */
  .thumb:has(.thumb-bg-photo)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,12,24,.32) 0%,rgba(8,12,24,0) 34%,rgba(8,12,24,.42) 100%)}
  .proj-featured .thumb-bg-photo{opacity:.72}
  .proj-featured:hover .thumb-bg-photo{opacity:.9}

  /* Атмосферный баннер секции «Процесс» */
  .process-visual{width:100%;margin-bottom:48px}
  .process-visual-frame{position:relative;border-radius:var(--r-md);overflow:hidden;
    border:1px solid rgba(109,73,206,.2);
    box-shadow:0 0 0 1px rgba(109,73,206,.08),0 12px 40px rgba(6,29,41,.12),inset 0 1px 0 rgba(255,255,255,.6)}
  .process-visual-frame img{width:100%;height:160px;object-fit:cover;object-position:center 30%;display:block;
    border-radius:var(--r-md);filter:brightness(1) saturate(1.05)}
  .process-visual-glow{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 0%,rgba(109,73,206,.06),transparent 60%)}
  .process-visual-corner{position:absolute;width:16px;height:16px;pointer-events:none}
  .process-visual-corner--tl{top:8px;left:8px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
  .process-visual-corner--tr{top:8px;right:8px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
  .process-visual-corner--bl{bottom:8px;left:8px;border-bottom:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
  .process-visual-corner--br{bottom:8px;right:8px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}

  /* ── Cursor glow (десктоп) ── */
  .cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(109,73,206,.04),transparent 70%);
    pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
    transition:opacity .4s ease;opacity:0}
  body:hover .cursor-glow{opacity:1}
  @media(max-width:768px){.cursor-glow{display:none}}

  /* Кристалл скрываем на узких экранах — перекрывал бы центрированный текст, тяжёл для GPU */

  /* — Задача 4: preloader (letter-loader) — */
  #loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center}
  .ldr-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
  .ldr-logo{font-size:clamp(36px,7vw,64px);font-weight:700;letter-spacing:-.03em;display:flex;gap:.02em}
  .ldr-l,.ldr-dot{display:inline-block;animation:ldrChar .5s var(--spring) both;transform-origin:bottom center}
  .ldr-l:nth-child(1){animation-delay:.05s}.ldr-l:nth-child(2){animation-delay:.12s}
  .ldr-l:nth-child(3){animation-delay:.19s}.ldr-l:nth-child(4){animation-delay:.26s}
  .ldr-l:nth-child(5){animation-delay:.33s}
  .ldr-dot{color:var(--accent);animation-delay:.4s;text-shadow:0 0 28px rgba(74,99,224,.7)}
  @keyframes ldrChar{from{opacity:0;transform:translateY(80%) rotateX(-80deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
  .ldr-bar-wrap{width:140px;height:2px;background:rgba(74,99,224,.1);border-radius:var(--r-pill);overflow:hidden}
  .ldr-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:var(--r-pill);transition:width .1s linear}
  .ldr-pct{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);opacity:.5}
  #loader.ldr-exit{animation:ldrFadeOut .5s var(--ease) .1s both}
  @keyframes ldrFadeOut{from{opacity:1}to{opacity:0;pointer-events:none}}
  #loader.ldr-gone{display:none}
  @media(prefers-reduced-motion:reduce){.ldr-l,.ldr-dot{animation:none;opacity:1}}

  /* — Задача 9: мобильные анимации — общие фиксы — */
  @media(max-width:640px){
    .reveal-up{transform:none!important}
    .reveal-scale{transform:none!important}
    .reveal-up,.reveal-scale{transition:opacity .5s var(--ease)!important}
    .feat{transform:none!important;transition:none!important}
    .card,.feat,.proj{transition-delay:0ms!important}
    .hero-sup,.hero h1 .hero-main,.hero h1 .hero-sub-h,.sub,.cta,.metrics{
      animation-duration:.4s!important;animation-delay:0s!important}
    .status{animation-delay:.1s!important}
    .ldr-l,.ldr-dot{animation:none!important;opacity:1!important}
  }
  @media(hover:none){
    .card:hover{transform:none!important;border-color:var(--line)!important;box-shadow:none!important}
    .card:hover::before{opacity:0!important}
    .btn-primary:hover{filter:none!important}
  }
  /* ═══ Адаптив-итерация: центрирование контента + компактность на мобиле (референс Stripe/Loom/Pitch) ═══ */
  @media(max-width:640px){
    /* центрирование текстовых блоков */
    .shead{text-align:center;padding-left:0}
    .shead::before{display:none}
    .shead .label:after{left:50%;transform:translateX(-50%)}
    .shead h2,.shead .lead{margin-left:auto;margin-right:auto}
    .hero .wrap{text-align:center}
    .hero h1,.hero .sub{margin-left:auto;margin-right:auto}
    .hero .cta{justify-content:center}
    .hero .status{margin-left:auto;margin-right:auto}
    .hero .hero-badges{align-items:center}
    /* компактные карточки */
    .feats{gap:12px}
    .card{padding:20px 16px}
    .feat{padding:18px 14px}
    .plan{padding:26px 22px}
    .step{padding:24px 20px}
  }
  /* пометка песочницы */

  /* ═══════════ АДАПТИВ-ФИНАЛ: 2-колоночная философия + фиксы (2026-06-11) ═══════════ */
  /* Идут последними — переопределяют ранние медиа по порядку источника. Только сетки/паддинги/размеры, без цветов. */

  /* — Скрин 1: Services — 2 колонки на мобиле (не 1) — */
  @media(max-width:480px){
    .g3{grid-template-columns:1fr 1fr;gap:8px}
    .g3 .card{padding:16px 12px}
    .g3 .card .ic{width:36px;height:36px}
    .g3 .card .num{font-size:11px}
    .g3 .card h3{font-size:14px;margin:8px 0 6px}
    .g3 .card p{font-size:12px;line-height:1.45}
  }

  /* — Скрин 2: Capabilities — 2 колонки, 3 ряда — */
  @media(max-width:640px){
    .feats{grid-template-columns:1fr 1fr;gap:10px}
    .feat{padding:16px 12px}
    .feat h3{font-size:14px;margin:8px 0 6px}
    .feat p{font-size:12px;margin-bottom:10px}
    .feat ul{gap:5px}
    .feat li{font-size:11px;padding-left:16px}
    .feats .feat:last-child:nth-child(odd){grid-column:1/-1}
  }
  @media(max-width:360px){
    .feats{grid-template-columns:1fr}
    .feats .feat:last-child:nth-child(odd){grid-column:auto}
  }

  /* — Скрин 3: AI-flow — 2 колонки на мобиле (не 1), стрелки уже скрыты ≤900 — */
  @media(max-width:480px){
    .ai-flow{grid-template-columns:1fr 1fr;gap:10px}
  }

  /* — Скрин 4: AI-boxes — уплотнение — */

  /* — Скрин 5: AI Demo — уплотнение — */
  @media(max-width:560px){
    .demo-in,.demo-out{padding:16px}
  }

  /* — Скрин 6: Integrations — 2 колонки, 3 ряда (не 1) — */
  @media(max-width:640px){
    .intg{grid-template-columns:1fr 1fr;gap:10px}
  }
  @media(max-width:360px){
    .intg{grid-template-columns:1fr}
  }

  /* — Скрин 7: Stack — 1 ряд × 3 на мобиле — */
  @media(max-width:640px){
    .stack-grid{grid-template-columns:1fr 1fr 1fr;gap:8px}
  }
  @media(max-width:360px){
    .stack-grid{grid-template-columns:1fr 1fr}
  }

  /* — Скрин 8/12: Принципы (гарантии) — 2 колонки, 3 ряда (не 1) — */
  @media(max-width:520px){
    .principles{grid-template-columns:1fr 1fr;gap:10px}
    .pr{padding:20px 16px}
    .pr .pic{width:36px;height:36px;margin-bottom:12px}
    .pr .pic svg{width:18px;height:18px}
    .pr h3{font-size:14px}
    .pr p{font-size:12px}
    .principles .pr:last-child:nth-child(odd){grid-column:1/-1}
  }
  @media(max-width:360px){
    .principles{grid-template-columns:1fr}
    .principles .pr:last-child:nth-child(odd){grid-column:auto}
  }

  /* — Скрин 9: Pricing — планы стекуются 1 в ряд (чисто), кнопка результата на всю ширину — */

  /* — Скрин 10: Process — уплотнение — */
  @media(max-width:640px){
    .step{padding:22px 18px}
    .step h3{font-size:16px;margin:10px 0 8px}
    .step p{font-size:13px}
  }

  /* — Скрин 11: Portfolio — карточки видны полностью — */
  @media(max-width:560px){
    .proj .body{padding:18px 20px}
    .proj h3{font-size:16px}
    .proj p{font-size:13px}
    .thumb{height:160px}
    .proj-featured .thumb{height:160px}
  }

  /* — Скрин 13: Pricing table — мягкие края, читаемый паддинг (скролл по X сохранён) — */

  /* — Блок 2.1: hero trust-строка — показать все тезисы, 2 колонки — */
  @media(max-width:640px){
    .trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;justify-items:center}
  }

  /* — Блок 2.2: метрики hero — компактнее на узких — */

  /* — Блок 2.3: navbar — только иконки, фикс. ширина без расширения — */
  @media(max-width:768px){
    .tt[data-label]{width:36px;min-width:36px}
    .tt[data-label]:hover{width:36px}
  }

  /* — Блок 2.4: кнопки в контакт-секции — полная ширина — */
  @media(max-width:560px){
    #contact .btn{width:100%;justify-content:center;white-space:normal;line-height:1.3;
      text-align:center;padding:14px 16px;min-height:52px;font-size:14px}
  }

  /* — Блок 2.5: footer — соцсети как touch-target — */
  @media(max-width:640px){
    .foot-soc{width:44px;height:44px}
  }

  /* — Блок 2.6: вертикальный ритм секций — единая шкала --sp-section (clamp сам масштабирует мобайл) — */

  /* — Блок 4: iOS не зумит при фокусе — все поля ввода 16px на мобиле (нужна спецификация выше базовой) — */
  @media(max-width:760px){
    input:not([type=checkbox]):not([type=range]),textarea{font-size:16px}
    #demoText,.chat-input input,.esc input:not([type=checkbox]),.esc textarea{font-size:16px}
  }

  /* — Блок 3: FAQ — кнопка «Свернуть» (аналог .faq-show-more) — */
  .faq-collapse{display:none;align-items:center;gap:8px;margin:20px auto 0;
    font-family:var(--mono);font-size:13px;color:var(--muted);
    background:none;border:1px solid var(--line2);border-radius:var(--r-sm);
    padding:10px 18px;cursor:pointer;transition:border-color .2s,color .2s}
  .faq-collapse:not([hidden]){display:flex}
  .faq-collapse:hover{border-color:var(--accent);color:var(--text)}

  /* ═══════════════════════════════════════════
     КАРУСЕЛИ (≤1024px) — snap-scroll + бесконечная прокрутка
     Секции: services(.grid.g3), capabilities(.feats),
     integrations(.intg), stack(.stack-grid), принципы(.principles-3)
     ═══════════════════════════════════════════ */
  .mob-dots{display:none}   /* точки — включаются в @media ниже */
  @media(max-width:1024px){
    /* --- Универсальная обёртка --- */
    .mob-carousel{
      display:flex;
      overflow-x:auto;
      overflow-y:clip;
      touch-action:pan-x pan-y;
      overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:10vw;
      gap:12px;
      padding:4px 10vw 16px;
      width:100vw;
      margin-inline:calc(50% - 50vw);
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .mob-carousel::-webkit-scrollbar{display:none}
    .mob-carousel > *{
      flex:0 0 72vw;
      max-width:450px;
      scroll-snap-align:center;
      scroll-snap-stop:always;
    }

    /* --- Точки-индикаторы --- */
    .mob-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
    .mob-dot{
      width:6px;height:6px;border-radius:50%;
      background:var(--line2);
      transition:background .2s,transform .2s;cursor:pointer;
    }
    .mob-dot.active{background:var(--accent);transform:scale(1.4)}

    /* --- Services: .grid.g3 → карусель --- */
    .grid.g3{
      display:flex!important;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
      touch-action:pan-x pan-y;overscroll-behavior-x:contain;gap:12px;padding:4px 10vw 16px;
      width:100vw;margin-inline:calc(50% - 50vw);scroll-padding-inline:10vw;scrollbar-width:none;-ms-overflow-style:none;
      background:transparent;border:none;border-radius:0;
      grid-template-columns:unset;
    }
    .grid.g3::-webkit-scrollbar{display:none}
    .grid.g3 > .card{
      flex:0 0 72vw;max-width:450px;scroll-snap-align:center;scroll-snap-stop:always;
      border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);
    }
    .grid.g3 > .trust-strip{
      flex:0 0 calc(100% - 40px);max-width:none;scroll-snap-align:start;
      border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
      display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px;font-size:11px;
    }

    /* --- Capabilities: .feats → карусель --- */
    .feats{
      display:flex!important;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
      touch-action:pan-x pan-y;overscroll-behavior-x:contain;gap:12px;padding:4px 10vw 16px;
      width:100vw;margin-inline:calc(50% - 50vw);scroll-padding-inline:10vw;scrollbar-width:none;-ms-overflow-style:none;
      grid-template-columns:unset;
    }
    .feats::-webkit-scrollbar{display:none}
    .feats > .feat{
      flex:0 0 72vw;max-width:450px;scroll-snap-align:center;scroll-snap-stop:always;
    }

    /* --- Integrations: .intg → карусель --- */
    .intg{
      display:flex!important;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
      touch-action:pan-x pan-y;overscroll-behavior-x:contain;gap:12px;padding:4px 10vw 16px;
      width:100vw;margin-inline:calc(50% - 50vw);scroll-padding-inline:10vw;scrollbar-width:none;-ms-overflow-style:none;
      grid-template-columns:unset;
    }
    .intg::-webkit-scrollbar{display:none}

    /* --- Stack: .stack-grid → карусель --- */
    .stack-grid{
      display:flex!important;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
      touch-action:pan-x pan-y;overscroll-behavior-x:contain;gap:12px;padding:4px 10vw 16px;
      width:100vw;margin-inline:calc(50% - 50vw);scroll-padding-inline:10vw;scrollbar-width:none;-ms-overflow-style:none;
      grid-template-columns:unset;
    }
    .stack-grid::-webkit-scrollbar{display:none}

    /* --- Принципы/гарантии: .principles-3 → карусель --- */
    .principles-3{
      display:flex!important;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
      touch-action:pan-x pan-y;overscroll-behavior-x:contain;gap:12px;padding:4px 10vw 16px;
      width:100vw;margin-inline:calc(50% - 50vw);scroll-padding-inline:10vw;scrollbar-width:none;-ms-overflow-style:none;
      grid-template-columns:unset;
    }
    .principles-3::-webkit-scrollbar{display:none}
    .principles-3 > .pr{
      flex:0 0 72vw;max-width:450px;scroll-snap-align:center;scroll-snap-stop:always;
    }

    /* --- Тарифы: .plans → карусель --- */
    .plans{
      display:flex!important;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
      touch-action:pan-x pan-y;overscroll-behavior-x:contain;gap:16px;padding:4px 10vw 16px;
      width:100vw;margin-inline:calc(50% - 50vw);scroll-padding-inline:10vw;scrollbar-width:none;-ms-overflow-style:none;
      grid-template-columns:unset;
    }
    .plans::-webkit-scrollbar{display:none}
    .plans > .plan{
      flex:0 0 75vw;max-width:380px;scroll-snap-align:center;scroll-snap-stop:always;
      margin:0;
    }

    /* --- Портфолио: .work → карусель --- */
    .work{
      display:flex!important;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
      touch-action:pan-x pan-y;overscroll-behavior-x:contain;gap:16px;padding:4px 10vw 24px;
      width:100vw;margin-inline:calc(50% - 50vw);scroll-padding-inline:10vw;scrollbar-width:none;-ms-overflow-style:none;
      grid-template-columns:unset;
    }
    .work::-webkit-scrollbar{display:none}
    .work > .proj{
      flex:0 0 78vw;max-width:480px;scroll-snap-align:center;scroll-snap-stop:always;
      border-radius:var(--r-md);overflow:hidden;
    }
    .work .proj-img{width:100%;aspect-ratio:16/9;border-radius:var(--r-sm) var(--r-sm) 0 0}
  }
  /* trust-strip не участвует в infinite loop — скрываем в carousel-режиме */
  @media(max-width:1024px){
    .mob-carousel > .trust-strip,
    .grid.g3 > .trust-strip { display:none !important; }
  }

  /* Телефон ≤640px: уже карточки (переопределяем ширину) */
  @media(max-width:640px){
    .mob-carousel > *{flex:0 0 80vw;max-width:300px}
    .grid.g3 > .card{flex:0 0 80vw;max-width:300px}
    .feats > .feat{flex:0 0 80vw;max-width:300px}
    .principles-3 > .pr{flex:0 0 80vw;max-width:300px}
    .plans > .plan{flex:0 0 85vw;max-width:320px}
    .work > .proj{flex:0 0 88vw;max-width:340px}
  }
  /* точки в светлой теме */

/* ═══════════════════════════════════════════════
   ORBIT CAROUSEL — 3D circular wheel
   ═══════════════════════════════════════════════ */

.oc-root { position: relative; padding: 20px 0 70px; user-select: none; }

/* HUD */
.oc-hud { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.oc-counter { font-family: var(--mono); display: flex; align-items: baseline; gap: 5px; }
.oc-cur  { font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -.03em; transition: opacity .18s; }
.oc-sep, .oc-tot { font-size:13px; color: var(--faint); }
.oc-track { flex: 1; height: 1px; background: var(--line); position: relative; }
.oc-fill  { position: absolute; inset-block: 0; left: 0; background: var(--accent);
            width: 0%; transition: width .7s cubic-bezier(.23,1,.32,1);
            box-shadow: 0 0 8px var(--accent); }

/* Scene */
/* ═══ «Живая линия» — сквозной пульс-разделитель (тот же мотив, что на подстраницах,
   для цельности всего сайта). Тонкая линия + бегущий glow-сигнал + пульс-узел. ═══ */
/* 🔴 FIX I: overflow-x:clip обязателен. Бегунок ::after шириной во всю линию
   (1140px) уезжает transform'ом ещё на 100% своей ширины — без клипа это
   раздувало body.scrollWidth на ~570px на КАЖДОЙ странице с разделителем.
   Наружу это не вылезало (html{overflow-x:hidden} обрезал), поэтому замер
   documentElement.scrollWidth показывал 0 и баг прятался. Мерить body.
   Именно clip, а не hidden: hidden создал бы скролл-контейнер и обрезал
   свечение узла .node по вертикали (у него box-shadow-кольцо 4px). */
.pulse-rule{position:relative;height:2px;width:100%;max-width:var(--maxw);
  margin:calc(var(--sp-section) * -.5) auto;padding:0 32px;
  background-clip:content-box;background-color:var(--c-line);overflow-x:clip;overflow-y:visible;pointer-events:none}
/* FIX I: бегунок ехал через `left` — layout-свойство, пересчёт раскладки каждый
   кадр на КАЖДОМ разделителе (после этой правки их 7 на главной). Отсюда рой
   микро-сдвигов в CLS. WEB-СТАНДАРТ §4.1 «Анимация left/top/width — нужен
   transform». Теперь: ::after шириной во всю линию, свечение — фон 150px у
   левого края, едет только transform (композитинг, layout не трогается).
   Движение идентично: translateX(-150px) — свечение чуть левее линии,
   translateX(100%) — 100% здесь это ширина самого ::after, т.е. вся линия. */
.pulse-rule::after{content:"";position:absolute;top:50%;left:0;height:2px;width:100%;
  transform:translate(-150px,-50%);border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--c-accent) 45%,color-mix(in srgb,var(--good,#0FB87E) 85%,var(--c-accent)) 70%,transparent);
  background-size:150px 100%;background-repeat:no-repeat;background-position:left center;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c-accent) 45%,transparent));
  animation:prSweep 4.2s cubic-bezier(.5,0,.5,1) infinite}
.pulse-rule .node{position:absolute;top:50%;left:50%;width:7px;height:7px;transform:translate(-50%,-50%);
  border-radius:999px;background:var(--c-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 12%,transparent);
  animation:prBeat 4.2s ease-in-out infinite}
/* 🔴 FIX I: разделитель НА СМЕНЕ ФОНА (белая секция ↔ тонированная .bg-tint).
   Обычный .pulse-rule гасит удвоение padding отрицательными margin'ами — и
   для стыка «белое→белое» это верно. Но там, где меняется фон, схлопывать
   НЕЛЬЗЯ: глаз читает границей КРАЙ ТОНИРОВАННОЙ ПОЛОСЫ, а не тонкую линию.
   Со схлопыванием край ложился в 2px от текста — кикер прилипал к границе, а
   с другой стороны зияли 137px. Замер до фикса: 2/137 и 137/2.
   Без схлопывания оба padding'а работают внутри своих полос: 137/137, край
   ровно посередине. Линию убираем — у границы фона она шум.
   Класс ставится ЯВНО в разметке: селектор по структуре DOM здесь ненадёжен
   (\3c style>/<script> между секциями рвут соседство — §4.1). */
.pulse-rule.pr-flat{display:none}
@keyframes prSweep{0%{transform:translate(-150px,-50%)}60%,100%{transform:translate(100%,-50%)}}
@keyframes prBeat{0%,48%,100%{transform:translate(-50%,-50%) scale(1);opacity:.55}
  54%{transform:translate(-50%,-50%) scale(1.55);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .pulse-rule::after{animation:none;transform:translateY(-50%);background-position:center}
  .pulse-rule .node{animation:none;opacity:.7}
}

.oc-scene {
  width: 100%;
  height: 440px;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  overflow: visible;
  position: relative;
}

/* Orbit ring — вращается как единое целое */
.oc-orbit {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform .82s cubic-bezier(.77,0,.175,1);
  /* JS выставляет: transform: rotateY(Ndeg) */
}

/* Карточки позиционируются JS через inline style */
.oc-card {
  position: absolute;
  top: 0;
  width: 340px;
  height: 380px;
  margin-left: -170px; /* центрирование */
  left: 50%;
  transform-style: preserve-3d;
  /* JS выставляет rotateY + translateZ */
  transition: none; /* переход идёт через .oc-orbit */
  cursor: pointer;
}

.oc-card-link {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius:var(--r-md);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.oc-card.oc-active .oc-card-link {
  border-color: rgba(74,99,224,.45);
  box-shadow: 0 30px 80px rgba(74,99,224,.2), 0 20px 50px rgba(0,0,0,.4);
}
/* Активная карточка подсвечивается фирменным цветом своего проекта */
.oc-card--fire.oc-active .oc-card-link {
  border-color: rgba(255,107,48,.55);
  box-shadow: 0 30px 80px rgba(255,77,0,.26), 0 20px 50px rgba(0,0,0,.4);
}
.oc-card--cyber.oc-active .oc-card-link {
  border-color: rgba(0,255,209,.5);
  box-shadow: 0 30px 80px rgba(0,255,209,.22), 0 20px 50px rgba(0,0,0,.4);
}
/* Demo-проекты без неон-бренда — свой мягкий оттенок подсветки у каждого */
.oc-card[data-idx="0"].oc-active .oc-card-link { /* Психолог — лавандовый */
  border-color: rgba(167,139,250,.5);
  box-shadow: 0 30px 80px rgba(167,139,250,.22), 0 20px 50px rgba(0,0,0,.4);
}
.oc-card[data-idx="1"].oc-active .oc-card-link { /* Медцентр — небесно-голубой */
  border-color: rgba(56,189,248,.5);
  box-shadow: 0 30px 80px rgba(56,189,248,.22), 0 20px 50px rgba(0,0,0,.4);
}
.oc-card[data-idx="2"].oc-active .oc-card-link { /* ГрузВезёт — янтарно-жёлтый */
  border-color: rgba(250,204,21,.55);
  box-shadow: 0 30px 80px rgba(250,204,21,.2), 0 20px 50px rgba(0,0,0,.4);
}
.oc-card[data-idx="3"].oc-active .oc-card-link { /* Флёр — розовый */
  border-color: rgba(244,114,182,.5);
  box-shadow: 0 30px 80px rgba(244,114,182,.22), 0 20px 50px rgba(0,0,0,.4);
}

/* Thumb — заполняет всю карточку (overlay-стиль) */
.oc-thumb {
  position: absolute; inset: 0;
  background: var(--surface2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* FIX: <picture> без размеров схлопывался в 0×0 и служил контейнером для img (width:100%→0). display:contents убирает picture как бокс, img берёт размер .oc-thumb. */
.oc-thumb picture{display:contents}
.oc-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .8;
  transition: opacity .4s ease, transform .5s ease, filter .4s ease;
}
.oc-card.oc-active .oc-thumb img { opacity: 1; transform: scale(1.04); }

/* ── Задача 4: ховер живёт ТОЛЬКО на превью-картинке (зум + яркость), сама карточка
   не «прыгает» — подъём/тень/бордер убраны. Только мышь, уважает reduced-motion. */
.oc-card-link{transition:border-color .3s ease,box-shadow .38s ease}
@media (hover:hover) and (pointer:fine){
  .oc-card:hover{z-index:5}
  .oc-card:hover .oc-thumb img,.oc-card.oc-active:hover .oc-thumb img{opacity:1;transform:scale(1.12)!important;filter:brightness(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .oc-card:hover .oc-thumb img{transform:none;filter:none}
}

.oc-thumb--dark  { background: linear-gradient(135deg,#04040A,#1a0530); }
.oc-thumb--cyber { background: linear-gradient(135deg,#000000,#000c0a); }

.oc-label-bg {
  font-family: var(--mono); font-size: 32px; font-weight: 700;
  letter-spacing: .1em; color: rgba(255,77,0,.22); position: relative; z-index: 1;
}
.oc-label-bg--cyber { color: rgba(0,255,209,.18); }

.oc-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size:11px; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius:var(--r-sm);
  background: rgba(8,12,22,.55); color: #D8E2F2; border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.oc-badge--fire  { background: rgba(255,77,0,.15); color: #ff6b30; border-color: rgba(255,77,0,.3); }
.oc-badge--cyber { background: rgba(0,255,209,.1); color: #00ffd1; border-color: rgba(0,255,209,.3); }

/* ARCADIA — neon arcade */
.oc-card--arcade .oc-card-link {
  border-color: rgba(139,47,255,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(139,47,255,.12);
}
.oc-card--arcade.oc-active .oc-card-link {
  border-color: rgba(255,45,120,.55);
  box-shadow: 0 30px 80px rgba(139,47,255,.28), 0 20px 50px rgba(255,45,120,.15), 0 0 0 1px rgba(255,45,120,.2);
}
.oc-thumb--arcade {
  background: linear-gradient(135deg, #05020F, #1a0035, #2d0055);
}
.oc-badge--arcade {
  background: rgba(139,47,255,.18);
  color: #c87eff;
  border-color: rgba(139,47,255,.4);
}
.oc-label-bg--arcade {
  color: rgba(255,45,120,.2);
  text-shadow: 0 0 30px rgba(255,45,120,.3);
}
.oc-glow--arcade {
  background: radial-gradient(ellipse at 50% 110%, rgba(139,47,255,.3), transparent 60%),
              radial-gradient(ellipse at 20% 0%, rgba(255,45,120,.15), transparent 50%);
}
/* RGB-scan линия в неон-стиле ARCADIA */
.oc-thumb--arcade .oc-scanline::after {
  background: rgba(255,45,120,.7);
  box-shadow: 0 0 12px rgba(255,45,120,.9), 0 0 25px rgba(139,47,255,.5);
  animation-duration: 4s;
}

.oc-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(74,99,224,.2), transparent 65%);
  pointer-events: none;
}
.oc-glow--fire  { background: radial-gradient(ellipse at 50% 110%, rgba(255,77,0,.25), transparent 65%); }
.oc-glow--cyber { background: radial-gradient(ellipse at 50% 110%, rgba(0,255,209,.2), transparent 65%); }

.oc-scanline { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.oc-scanline::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; top: -1px;
  background: rgba(0,255,209,.6); box-shadow: 0 0 10px rgba(0,255,209,.8);
  animation: ocScan 3.5s linear infinite;
}
@keyframes ocScan { 0%{top:-1px} 100%{top:100%} }

/* Body — оверлей с градиентом поверх картинки */
.oc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 16px 15px;
  background: linear-gradient(to top, rgba(8,11,20,.95) 24%, rgba(8,11,20,.55) 60%, transparent); }
.oc-body h3 { font-size:16px; font-weight: 600; margin: 0; letter-spacing: -.02em; color: #F0F4FF;
  line-height: 1.3; text-shadow: 0 1px 12px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oc-body p  { font-size:12px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; min-height: 3.1em; }
/* Функциональная пометка «Только десктоп» под заголовком (бывший .oc-tag-desktop) */
.oc-note-desktop {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size:12px; letter-spacing: -.01em;
  padding: 2px 8px; border-radius:var(--r-sm);
  background: rgba(255,185,50,.10); color: #FFD480; border: 1px solid rgba(255,185,50,.35);
}
/* Нижняя плашка-CTA у demo-карточек */
.oc-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-family: var(--mono); font-size:12px; letter-spacing: -.01em;
  padding: 3px 11px; border-radius:var(--r-pill);
  background: rgba(74,99,224,.12); color: #2F4BD8; border: 1px solid rgba(74,99,224,.3);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.oc-cta::after { content: '→'; transition: transform .25s ease; }

/* §5: hover реагирует на КАРТОЧКУ целиком (.oc-card:hover), а не на внутренние
   элементы. Подъём/тень/zoom превью заданы выше на уровне .oc-card:hover;
   здесь — только CTA-состояние, тоже от .oc-card:hover. Прежний .oc-card-link:hover
   (реакция на ссылку/иконки отдельно) убран — он и порождал жалобу. */
@media (hover: hover) and (pointer: fine) {
  .oc-card:hover .oc-cta { background: rgba(124,58,237,.22); color: #4E2FA6; border-color: rgba(124,58,237,.5); }
  .oc-card:hover .oc-cta::after { transform: translateX(4px); }
}

/* .oc-arrow removed */

/* Nav */
.oc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; }
.oc-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--surface); color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, color .25s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.oc-btn svg { width: 18px; height: 18px; }
.oc-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.12); }

.oc-dots { display: flex; gap: 0; }
/* Видимая точка — 5px (как было), но тап-зона 24×24 без наложений (target-size A11Y) */
.oc-dot {
  width: 24px; height: 24px; border: none; background: none; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.oc-dot::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line2);
  transition: background .25s, width .3s cubic-bezier(.34,1.56,.64,1);
}
.oc-dot.on::before { background: var(--accent); width: 20px; border-radius:var(--r-sm); }


/* ── CINEMATIC NAV TRANSITION ── */
#nav-flash{
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform, opacity;
}

/* === Blog preview === */
.btn-ghost{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-ghost:hover{background:rgba(74,99,224,.08);border-color:var(--accent);color:var(--accent)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}
.sec-label{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.sec-title{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.02em}
.sec-lazy{content-visibility:auto;contain-intrinsic-size:0 600px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* карточки-постеры: превью раскрывается при наведении (приём DDSI, адаптирован под текстовые карточки) */
.blog-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:28px 24px;display:flex;flex-direction:column;gap:12px;height:272px;transition:border-color .3s ease-in-out,transform .3s ease-in-out,box-shadow .3s ease-in-out;position:relative;overflow:hidden;color:inherit;text-decoration:none}
.blog-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(74,99,224,.04),transparent);opacity:0;transition:opacity .3s}
.blog-card::after{content:'';position:absolute;inset:0;background:rgba(8,12,24,0);transition:background .3s ease-in-out;pointer-events:none}
.blog-card:hover::before{opacity:1}
.card-cat{position:relative;z-index:1;display:inline-flex;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;border:1px solid;border-radius:var(--r-pill);padding:4px 12px;width:fit-content}
.card-title{position:relative;z-index:1;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--text);transition:color .2s}
.card-desc{position:relative;z-index:1;font-size:13px;color:var(--muted);line-height:1.55;max-height:0;opacity:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;transition:max-height .3s ease-in-out,opacity .2s ease-in-out}
.card-meta{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.card-time{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--faint)}
.card-arrow{font-size:16px;color:var(--accent);transition:transform .3s ease-in-out,color .2s}
@media (hover:hover) and (pointer:fine){
  .blog-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-3px);box-shadow:var(--sh-2)}
  .blog-card:hover::after{background:transparent}
  .blog-card:hover .card-desc{max-height:92px;opacity:1}
  .blog-card:hover .card-title{color:var(--accent)}
  .blog-card:hover .card-arrow{transform:rotate(-45deg)}
}
@media (hover:none),(pointer:coarse){
  .blog-card{height:auto}
  .card-desc{max-height:none;opacity:1}
}
@media (max-width:700px){
  .blog-card{height:auto}
  .card-desc{max-height:none;opacity:1}
}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
@media(max-width:768px){#blog-preview .sec-head{flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center;gap:18px}#blog-preview .sec-head>div{display:flex;flex-direction:column;align-items:center}#blog-preview .sec-head .btn{align-self:center}#blog-preview .blog-grid{grid-template-columns:1fr!important;gap:16px!important}}

  /* 🔴 Правило ссылалось на класс `.cookie` — старая статическая разметка
     баннера, которой в DOM больше нет. Живой баннер рисует js/analytics.js
     с классом `.tendo-ck` (position:fixed; left:16px; bottom:16px; z-index:9999),
     и он ЛОЖИЛСЯ ПОВЕРХ открытой панели чата на ширинах до 700px включительно
     (замерено пересечением прямоугольников на 360/390/414/600/700).
     z-index баннера 9999 против 91 у панели — баннер сверху. */
  body:has(.chat-panel.open) .cookie,
  body:has(.chat-panel.open) .tendo-ck,
  body:has(.aihelp-panel.open) .tendo-ck{display:none!important}

/* ───────── блок: offer-blocks ───────── */
:root{
  --c-bg:var(--bg);--c-surface:var(--surface);--c-surface2:var(--surface2);
  --c-line:var(--line);--c-line2:var(--line2);--c-text:var(--text);
  --c-muted:var(--muted);--c-faint:var(--faint);--c-accent:var(--accent);
  --c-accent2:var(--accent2);--c-ink:var(--accent-ink);--c-good:var(--good);
  --c-warn:#FFB454;--c-danger:#FF8A8A;--f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--f-sans:'Onest','Onest Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs-h2:clamp(1.7rem,3.6vw,2.9rem);--fs-h3:clamp(1.2rem,2vw,1.5rem);
  --fs-lead:clamp(1.05rem,1.8vw,1.3rem);--fs-label:.74rem;--r-sm:11px;
}
.btn-block{width:100%}
.btn-lg{padding:16px 30px;font-size:16px}
/* секции оффера */
.osec{padding:var(--sp-section) 0;position:relative}
.osec.osec-sm{padding:calc(var(--sp-section) * .66) 0}
.osec .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.osec .sec-head{display:block;max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)}
.osec .sec-head .label{margin-bottom:16px}
.osec .sec-head .h2,.osec .sec-head .lead{display:block}
.osec .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.osec .label{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px;margin-bottom:16px}
.osec .label::before{content:'';width:22px;height:1px;background:var(--accent);opacity:.6}
.osec .sec-head.center .label{justify-content:center}
.osec .h2{font-size:var(--fs-h2);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.osec .lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.55;max-width:62ch}
.osec .sec-head.center .lead{margin-left:auto;margin-right:auto}
.osec .grad{background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* value-stack */
.osec .stack{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(1.6rem,3.5vw,2.6rem)}
.osec .stack-list{display:flex;flex-direction:column}
.osec .stack-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px dashed var(--line2)}
.osec .stack-row:last-child{border-bottom:none}
.osec .stack-row .sp{font-family:var(--mono);font-size:14px;color:var(--muted);white-space:nowrap;flex:none}
.osec .stack-sum{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md);padding:24px;position:sticky;top:100px}
.osec .stack-sum .old{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--c-danger);font-size:18px}
.osec .stack-sum .now{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
.osec .stack-sum .now small{font-size:16px;font-weight:500;color:var(--muted)}
.osec .stack-sum .note{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.5}
.osec .stack-sum .btn{margin-top:18px}
/* guarantee (.gbox — переименован, чтобы не конфликтовать со старым .guar) */
/* pilot */
/* referral */
.osec .refer{background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,3rem);display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center}
.osec .refer h2{font-size:var(--fs-h3);font-weight:700;margin-bottom:12px}
.osec .refer p{color:var(--muted);font-size:16px;line-height:1.55}
.osec .refer-cta{text-align:center}
.osec .refer-cta .amt{font-size:2.6rem;font-weight:800;color:var(--accent);line-height:1}
.osec .refer-cta .amt small{display:block;font-size:14px;font-weight:500;color:var(--muted);margin-top:8px}
@media(max-width:900px){
  .osec .stack{grid-template-columns:1fr}
  .osec .stack-sum{position:static}
  .osec .refer{grid-template-columns:1fr}
}
@media(max-width:480px){.osec .stack,.osec .refer{border-radius:var(--r-md)}}

/* ───────── блок: etalon ───────── */
  :root{
    --canvas:#FFFFFF; --white:#fff; --ink:#061D29; --mut:#425D6D; --soft:#5A7382; --line:#E5E7EB;
    --blue:#3B5BFF; --violet:#7C3AED; --green:#0FB87E;
    /* 🔴 WEB-СТАНДАРТ §1.8: --green — ЗАЛИВКА; как ТЕКСТ по светлому — только
       --green-ink (5,15 против 2,35). Ф3, 27.08.2026. */
    --green-ink:#0A7D56;
    --grad:linear-gradient(95deg,#4A63E0,#6D49CE 52%,#1AA47C);
    --accent:#6D49CE;
    --lav:#F1ECFD; --mint:#E7F9F0; --sky:#ECF1FF; --amber:#FFF8E6; --tint:#F6F8FA;
    /* --maxw/--r — из tokens.css (--maxw 1140px, --r → --r-lg 24px). Дубли убраны. */
    --f-disp:'Onest','Onest Fallback',sans-serif; --f-body:'Onest','Onest Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  /* Lyssna-каркас: дисплейный шрифт Onest для всех заголовков */
  body h1,body h2,body h3,.h,.met b,.vsum .now{font-family:var(--f-disp)!important;}
  body{font-family:'Onest','Onest Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:normal;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  .sec{padding:var(--sp-section) 0;}
  .label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:10px;}
  .label:before{content:"";width:24px;height:2px;background:var(--grad);}
  h2.h{font-weight:500;font-size:clamp(30px,4.4vw,50px);letter-spacing:-.02em;line-height:1.08;margin:16px 0 0;}
  .lead{margin-top:16px;font-size:18px;color:var(--mut);max-width:62ch;}
  .ga{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  /* buttons */
  .btn{display:inline-block;border-radius:var(--r-sm);font-weight:600;font-size:14px;text-decoration:none;padding:15px 26px;transition:color .18s,background-color .18s,border-color .18s,box-shadow .18s,transform .18s;border:none;cursor:pointer;}
  .btn-p{background:var(--ink);color:var(--bg);box-shadow:0 10px 24px -16px rgba(6,29,41,.5);position:relative;overflow:hidden;}
  .btn-p:before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.23,1,.32,1);pointer-events:none;z-index:1;}
  .btn-p:hover{transform:translateY(-1px);background:#13303E}
  .btn-p:hover:before{left:160%}
  @media(hover:none){.btn-p:before{content:none}}
  .btn-g{background:var(--bg);color:var(--ink);border:1px solid var(--line);}
  .btn-g:hover{border-color:#cfd3dc}
  .link{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--violet);padding-bottom:1px;}
  .card{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:24px;}

  /* ===== HERO ===== */
  .hero{position:relative;min-height:100vh;min-height:100svh;background:var(--canvas);
    background-image:url('/images/hero/hero-bg.webp');
    background-size:cover;background-position:center right;}
  .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(98deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 26%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.12) 72%,rgba(255,255,255,0) 90%);}
  .hero>.wrap{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:0 32px;}
  .hbadges{display:flex;gap:12px;margin:clamp(84px,12vh,150px) 0 18px;flex-wrap:wrap;}
  .badge{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;display:flex;align-items:center;gap:7px;}
  /* 29.07: пульсация снята — точка и так читается кольцом box-shadow.
     Живой индикатор оставлен один на сайт: .hero-status .pulse (home.css). */
  .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(15,184,126,.18);}
  @keyframes hpulse{0%,100%{box-shadow:0 0 0 4px rgba(15,184,126,.18)}50%{box-shadow:0 0 0 7px rgba(15,184,126,.05)}}
  .hero h1{font-weight:600;font-size:clamp(38px,5.2vw,68px);line-height:1.02;letter-spacing:-.03em;max-width:17ch;color:var(--ink);}
  .hero-sup{font-size:16px;color:var(--mut);margin-bottom:18px;}
  .hero-sub{margin-top:24px;max-width:50ch;font-size:18px;color:var(--mut);}
  .hero-cta{margin-top:30px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  /* A2: на телефоне CTA-кнопки в колонку, равной ширины по контейнеру */
  @media(max-width:560px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{width:100%;justify-content:center}}
  .hero .hint{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--soft);display:block;}
  .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0 0;}
  /* A2: на телефоне метрики ровной сеткой 2×2 (а не 2+1+1) */
  @media(max-width:560px){.metrics{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}}
  /* компактный герой на невысоких экранах (ноутбуки) — метрики в первом экране */
  @media(min-width:861px) and (max-height:900px){
    .hbadges{margin-top:64px}
    .hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02}
    .hero-sub{margin-top:16px;font-size:16px}
    .hero-cta{margin-top:18px}
    .hero .hint{margin-top:10px}
    .metrics{margin-top:20px}
    .hero-sup{margin-bottom:12px}
  }
  .met b{font-family:var(--sans);font-weight:700;font-size:30px;letter-spacing:-.02em;display:block;color:var(--ink);font-variant-numeric:tabular-nums;}
  .met span{font-size:13px;color:var(--mut);}
  .met b .ga{font-weight:800;font-size:inherit;letter-spacing:inherit;line-height:inherit;background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
  .met b .met-sfx{font-size:inherit;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-left:2px;vertical-align:baseline;font-variant-numeric:tabular-nums}

  /* ===== TRUST STRIP ===== */
  .trust{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .trust .row{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;padding:20px 0;}
  .trust .it{font-size:14px;color:var(--mut);display:flex;align-items:center;gap:9px;}
  .trust .it:before{content:"✓";color:var(--green);font-weight:700;}
  @media(max-width:560px){
    /* галочки, 2×2, СИММЕТРИЧНО: .wrap был 2-кол.гридом → строка уезжала влево. Сброс в block +
       две авто-колонки по центру, каждый пункт (✓+текст) центрирован. Поля слева=справа. */
    .trust .wrap{display:block;}
    .trust .row{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:38px;row-gap:16px;padding:18px 0;max-width:none;margin:0;}
    .trust .it{display:block;text-align:center;font-size:12px;line-height:1.45;max-width:155px;}
    .trust .it:before{display:inline;margin-right:6px;}
  }

  /* ===== VALUE STACK ===== */
  .vgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-top:36px;}
  @media(max-width:860px){.vgrid{grid-template-columns:1fr}}
  .vitem{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
  .vitem .ck{width:26px;height:26px;border-radius:var(--r-sm);background:var(--mint);color:var(--green-ink);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;}
  .vitem .tx{flex:1}
  .vitem .tx b{font-weight:600;font-size:16px;}
  .vitem .tx span{display:block;font-size:13px;color:var(--mut);}
  .vitem .pr{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--soft);text-decoration:line-through;white-space:nowrap;}
  .vitem .pr.free{color:var(--violet);text-decoration:none;}
  /* глушим «прыжок» цены при тапе только на тач-устройствах — на десктопе hover-подъём остаётся */
  @media(hover:none){.vitem .pr:active{transform:none!important;box-shadow:none!important}}
  .vsum{background:var(--lav);border:1px solid #E4DBFb;border-radius:var(--r);padding:28px;align-self:start;position:sticky;top:100px;}
  @media(max-width:860px){.vsum{position:static;top:auto}}
  .vsum .old{font-family:'JetBrains Mono',monospace;text-decoration:line-through;color:var(--mut);}
  .vsum .now{font-family:var(--sans);font-weight:700;font-size:34px;letter-spacing:-.02em;margin:6px 0 12px;}
  .vsum p{font-size:13px;color:var(--mut);margin-bottom:18px;}
  /* мобилка: цена — на отдельную строку под текстом, заголовок на всю ширину, итог мельче */
  @media(max-width:600px){
    .vitem{flex-wrap:wrap;row-gap:3px;padding:14px 0;}
    .vitem .tx b{font-size:14px;}
    .vitem .pr{flex-basis:100%;padding:0 0 0 40px;white-space:normal;text-align:left;font-size:12px;border:0;background:none;border-radius:0;}
    .vsum{padding:22px;}
    .vsum .now{font-size:26px;}
  }
  /* touch: гасим desktop-hover подъёмы/сдвиги, чтобы элементы не «залипали» и не дёргались при тапе */
  @media(hover:none){
    .btn:hover,.feat:hover,.proj:hover,.pr:hover,.plan:hover,.cd-btn:hover,.tt:hover,.card:hover{transform:none!important;box-shadow:none!important}
  }

  /* ===== AI DEMO ===== */
  .demo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px;}
  @media(max-width:780px){.demo{grid-template-columns:1fr}}
  .demo-samples{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
  .demo-samples button{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;}
  .demo-samples button:hover{border-color:var(--violet)}
  .demo-in textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;font:inherit;font-size:14px;background:var(--bg);min-height:96px;resize:vertical;appearance:none;-webkit-appearance:none;margin-bottom:10px;color:var(--ink);}
  .demo-cap{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:12px;}
  .demo-note{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--soft);margin:10px 0 18px;}
  .demo-note.warn{font-family:inherit;color:var(--violet);font-weight:600;background:var(--lav);border-radius:var(--r-sm);padding:12px 16px;}

  /* ══ Единый компонент квоты бесплатных вопросов (демо · чат · форма) — идентичен во всех 3 точках.
        Значения захардкожены (namespace-agnostic), чтобы пилюля выглядела одинаково на любой поверхности. ══ */
  .quota{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:var(--r-pill);
    border:1px solid var(--line);background:var(--bg);font-family:var(--sans);font-size:12px;line-height:1;
    color:var(--muted);white-space:nowrap;user-select:none;vertical-align:middle;box-shadow:0 1px 2px rgba(6,29,41,.04)}
  .quota-dots{display:inline-flex;gap:5px}
  .quota-dot{width:7px;height:7px;border-radius:50%;background:var(--line2);
    transition:background .45s var(--ease),transform .4s var(--spring),box-shadow .45s var(--ease)}
  .quota-dot.on{background:var(--accent);box-shadow:0 0 7px -1px rgba(109,73,206,.55)}
  .quota-dot.spend{animation:quotaSpend .55s var(--ease)}
  @keyframes quotaSpend{0%{transform:scale(1.5);background:var(--accent);box-shadow:0 0 12px 2px rgba(109,73,206,.5)}100%{transform:scale(1);background:var(--line2);box-shadow:none}}
  .quota-num{font-weight:600;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
  .quota-num.inf{font-size:18px;font-weight:700;line-height:1;position:relative;top:-.5px;padding:0 1px}
  .quota-cap{font-size:11px;font-weight:500;color:#8A9AA6;letter-spacing:.1px}
  .quota-cap:before{content:"·";margin-right:7px;color:#C4CDD4}
  .quota-cta{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);
    font-family:var(--sans);font-size:13px;font-weight:600;color:var(--bg);text-decoration:none;
    background:linear-gradient(135deg,var(--accent),var(--accent2));border:1px solid transparent;
    box-shadow:0 12px 26px -12px rgba(109,73,206,.65);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
  .quota-arrow{transition:transform .25s var(--ease)}
  @media(hover:hover) and (pointer:fine){.quota-cta:hover{transform:translateY(-1px);box-shadow:0 16px 32px -12px rgba(109,73,206,.72)}.quota-cta:hover .quota-arrow{transform:translateX(4px)}}
  @media(prefers-reduced-motion:reduce){.quota-dot,.quota-cta,.quota-arrow{transition:none}.quota-dot.spend{animation:none}}
  .demo-empty{margin-top:16px;color:var(--soft);font-size:13px;}
  .demo-result{margin-top:14px;}
  .demo-reply-cap{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);margin-bottom:8px;}
  .demo-reply{display:flex;gap:10px;align-items:flex-start;}
  .demo-reply-av{width:30px;height:30px;border-radius:var(--r-sm);background:var(--lav);color:var(--violet);display:flex;align-items:center;justify-content:center;flex:none;}
  .demo-reply-av svg{width:17px;height:17px;}
  .demo-reply-txt{font-size:14px;color:var(--ink);line-height:1.55;}

  /* ===== AKCII / cards 3 ===== */
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;}
  @media(max-width:820px){.cards3{grid-template-columns:1fr}}
  .promo{border-radius:var(--r);padding:26px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit;transition:color .2s,background-color .2s,border-color .2s,box-shadow .2s,transform .2s;background:var(--bg);}
  .promo:nth-child(1){background:var(--sky)}
  .promo:nth-child(2){background:var(--mint)}
  .promo:nth-child(3){background:var(--lav)}
  .promo::before{content:none!important}
  .promo:hover{transform:translateY(-3px);box-shadow:0 18px 44px -24px rgba(0,0,0,.22);}
  .promo .ic{width:40px;height:40px;border-radius:var(--r-sm);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;color:var(--ink);}
  .promo h3{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.2;color:var(--ink);}
  .promo p{font-size:14px;color:var(--mut);margin:10px 0 16px;}
  .promo a,.promo .promo-cta{font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--violet);padding-bottom:1px;margin-top:auto;display:inline-block;}
  .promos-note{margin-top:18px;font-size:13px;color:var(--soft);text-align:center}

  /* ===== GUARANTEE / PILOT ===== */
  .bg-tint{background:var(--tint)}

  /* ===== FAQ ===== */
  .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 20px;}
  /* Чипы .tabs = единый класс .qa-tab (визуал в css/ui.css). */
  .faq .q{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;}
  .faq .q>button{width:100%;text-align:left;background:none;border:0;font:inherit;font-weight:600;font-size:16px;padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;gap:14px;color:var(--ink);}
  /* 🔴 единственное место, где голое `transition:.25s` было по делу: тут едет max-height. */
  .faq .q .a{max-height:0;overflow:hidden;transition:max-height .25s;color:var(--mut);font-size:14px;padding:0 20px;}
  .faq .q.open .a{max-height:420px;padding:0 20px 18px;}
  .faq .q .pl{color:var(--violet);font-weight:700;}
  .faq-cat{display:none}.faq-cat.on{display:block}

  /* ===== CONTACT ===== */
  /* FIX I: margin-top:34px убран — он складывался с padding секции и делал стык
     promos→contact 173px против 139px на всех остальных. Отступ даёт секция. */
  #contact .form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;}
  @media(max-width:820px){#contact .form{grid-template-columns:minmax(0,1fr)}}
  #contact form#leadform{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;}
  #contact form#leadform input[type=text],#contact form#leadform textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;font:inherit;font-size:16px;background:var(--bg);appearance:none;-webkit-appearance:none;color:var(--ink);margin:0;}
  #contact form#leadform textarea{min-height:120px;resize:vertical}
  #contact .contact-left{display:flex;flex-direction:column;}
  #contact .contact-left .label{margin-bottom:14px;}
  #contact .contact-left .lead{margin-top:16px;max-width:46ch;}
  #contact .contact-left .cd-btn{margin-top:28px;}
  #contact .cd-btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--bg);border-radius:var(--r-sm);padding:14px 22px;font-weight:600;font-size:14px;width:max-content;text-decoration:none;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.34,1.4,.5,1),background .2s,box-shadow .3s;}
  #contact .cd-btn svg{width:18px;height:18px;position:relative;z-index:2;}
  #contact .cd-btn:before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.23,1,.32,1);pointer-events:none;z-index:1;}
  @media(hover:hover) and (pointer:fine){#contact .cd-btn:hover{transform:translateY(-2px);background:#13303E;box-shadow:0 12px 28px -10px rgba(6,29,41,.45);}#contact .cd-btn:hover:before{left:160%}}
  @media(hover:none){#contact .cd-btn:before{content:none}}
  #contact .cd-meta{margin-top:14px;font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:4px;}
  #contact .cd-meta .cd-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;}
  #contact .consent{display:flex;gap:9px;font-size:13px;color:var(--mut);align-items:flex-start;}
  #contact .consent input{margin-top:3px;}
  #contact .hp{position:absolute;left:-9999px;}
  #contact .fstatus{font-size:13px;color:var(--mut);min-height:1em;}
  /* AI-helper в стиле эталона */
  #contact .aihelp-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--violet);cursor:pointer;width:max-content;}
  #contact .aihelp-toggle svg{width:16px;height:16px;}
  #contact .aihelp-panel.open{margin-top:12px;}
  #contact .aihelp-panel-in{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;}
  #contact .ah-q{font-size:13px;font-weight:600;color:var(--ink);margin:10px 0 8px;}
  #contact .ah-chips{display:flex;flex-wrap:wrap;gap:8px;}
  #contact .ah-chips button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--tint);border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;color:var(--mut);}
  #contact .ah-chips button.on,#contact .ah-chips button[aria-pressed="true"]{background:var(--lav);color:var(--violet);border-color:#E4DBFb;}
  #contact .ah-gen{margin-top:14px;}
  #contact .ah-note{margin-top:12px;}
  #contact .ah-out{margin-top:14px;}
  #contact .ah-draft{background:var(--tint);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;font-size:14px;color:var(--ink);line-height:1.55;}
  #contact .ah-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
  #contact .ah-actions .btn{padding:10px 16px;font-size:13px;background:var(--bg);color:var(--ink);border:1px solid var(--line);}
  #contact .ah-actions .btn-primary,#contact .ah-actions #ahUse{background:var(--ink);color:var(--bg);border:none;}
  #contact .btn-primary,#contact .ah-gen{background:var(--ink)!important;color:var(--bg)!important;border:none!important;background-image:none!important;border-radius:var(--r-sm);}
  /* 🔴 Та же поломка, что у .snav-cta: !important на обычном состоянии перебивал
     `.btn-primary:hover{background:#13303E!important}` из ui.css, и кнопки блока
     «Обсудить проект» на главной при наведении не темнели (проверено мышью). */
  @media (hover:hover) and (pointer:fine){
    #contact .btn-primary:hover,#contact .ah-gen:hover{background:#13303E!important}
  }

  /* ===== BLOG ===== */
  .blog3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;}
  @media(max-width:820px){.blog3{grid-template-columns:1fr}}
  .post{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:color .18s,background-color .18s,border-color .18s,box-shadow .18s,transform .18s;display:block;}
  .post:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(0,0,0,.3)}
  .post .ph{height:150px;background:var(--sky)}
  .post:nth-child(2) .ph{background:var(--mint)}.post:nth-child(3) .ph{background:var(--lav)}
  .post .b{padding:18px}
  .post .cat{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--violet);text-transform:uppercase}
  .post h3{font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.25;margin:8px 0;color:var(--ink);}
  .post p{font-size:13px;color:var(--mut)}
  .post .rt{font-size:12px;color:var(--soft);margin-top:10px}
  /* ── ПОСТЕР-карточки блога (обложки + hover-раскрытие) ── */
  .post.bcard{aspect-ratio:3/4;padding:0;display:block;border-radius:var(--r-md);overflow:hidden;background:#1A1640;border:1px solid var(--line);position:relative}
  .post.bcard .bcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.23,1,.32,1)}
  .post.bcard .sc-top{position:absolute;inset:0 0 auto 0;height:64%;background:linear-gradient(to bottom,rgba(10,8,28,.85),rgba(10,8,28,.25) 55%,transparent);pointer-events:none}
  .post.bcard .sc-bot{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(10,8,28,.92),rgba(10,8,28,.2) 60%,transparent);transition:background .3s;pointer-events:none}
  .post.bcard .bcard-top{position:absolute;top:20px;left:20px;right:20px;color:var(--bg);z-index:2}
  .post.bcard .card-cat{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;color:#CBBFF4;letter-spacing:.02em;border:none;border-bottom:2px solid var(--accent);border-radius:0;background:none;padding:0 0 3px;text-transform:uppercase}
  .post.bcard .card-title{font-family:'Onest',sans-serif;font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.02em;margin:14px 0 0;color:var(--bg);text-shadow:0 2px 16px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .post.bcard .bcard-excerpt{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.23,1,.32,1),opacity .3s}
  .post.bcard .bcard-excerpt p{margin-top:11px;font-size:13px;line-height:1.5;color:#DCD8F0}
  .post.bcard .bcard-date{position:absolute;left:20px;bottom:18px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--bg);z-index:2}
  .post.bcard .bcard-arrow{position:absolute;right:18px;bottom:16px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bg);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);transition:transform .4s cubic-bezier(.34,1.4,.5,1),background .3s,border-color .3s;z-index:2}
  .post.bcard .bcard-arrow svg{width:17px;height:17px}
  @media (hover:hover) and (pointer:fine){
    .post.bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
    .post.bcard:hover .bcard-img{transform:scale(1.05)}
    .post.bcard:hover .sc-bot{background:linear-gradient(to top,rgba(10,8,28,.96),rgba(10,8,28,.5) 65%,transparent)}
    .post.bcard:hover .bcard-excerpt{max-height:150px;opacity:1}
    .post.bcard:hover .bcard-arrow{transform:rotate(-45deg);background:var(--accent);border-color:var(--accent)}
  }
  @media (max-width:700px){.post.bcard .bcard-excerpt{max-height:150px;opacity:1}.post.bcard .bcard-arrow{transform:rotate(-45deg);background:var(--accent);border-color:var(--accent)}}
  .blog-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;}

  /* ===== MARQUEE ===== */
  .marquee-sec{background:var(--tint);border-top:1px solid var(--line);padding:40px 0;overflow:hidden;}
  .marquee-sec .cap{text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:24px;}
  .marquee{display:flex;gap:18px;width:max-content;animation:mqslide 32s linear infinite;}
  .marquee:hover{animation-play-state:paused}
  .chip{font-family:var(--sans);font-weight:700;font-size:20px;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 26px;white-space:nowrap;}
  .chip em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  @keyframes mqslide{to{transform:translateX(-50%)}}

  /* ===== FOOTER ===== */
  /* Футер унифицирован в css/ui.css (.foot / .foot-grid) — прежний inline-набор удалён. */

  /* ===== COOKIE (Websmith-style, светлый) ===== */
  /* видимость куки управляется классом .show (+ localStorage в JS); display:block убран — перебивал .show-логику и плашка не закрывалась */
  .cookie{position:fixed;left:24px;bottom:24px;z-index:60;max-width:420px;background:#F8F8F2;border:1px solid var(--ink);border-radius:var(--r-md);padding:20px 22px;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);}
  .cookie.hide{display:none}
  .cookie span{font-size:13px;color:var(--mut);display:block;margin-bottom:16px;}
  .cookie span a{color:var(--ink);text-decoration:underline}
  .cookie .btn-primary,.cookie #cookieOk{background:var(--ink);color:var(--bg);border:0;border-radius:var(--r-sm);padding:11px 20px;font:inherit;font-weight:600;cursor:pointer;}

  /* ===== НАВБАР-ПИЛЮЛЯ ===== */
  .snav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:500;width:calc(100% - 48px);max-width:1020px;display:flex;align-items:center;justify-content:space-between;gap:16px;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:0 8px 30px -12px rgba(14,17,24,.18);padding:8px 12px 8px 22px;transition:background .3s,box-shadow .3s,top .3s;animation:snavIn .5s cubic-bezier(.22,.61,.36,1) .15s both;}
  @keyframes snavIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  .snav.scrolled{background:rgba(255,255,255,.93);box-shadow:0 14px 40px -14px rgba(14,17,24,.28);top:8px}
  .snav a{text-decoration:none}
  .snav button{border:none;background:none;cursor:pointer;font:inherit}
  .snav .logo{font-family:var(--sans);font-weight:700;letter-spacing:-.03em;font-size:20px;line-height:1;display:flex;align-items:center;cursor:pointer;user-select:none;color:var(--ink);flex:none}
  .snav .logo .lt{display:inline-block;transform-origin:50% 100%;transition:color .25s;will-change:transform}
  .snav .logo .d{color:var(--violet);display:inline-block;margin-left:1px;transform-origin:50% 50%;will-change:transform}
  @media(hover:hover) and (pointer:fine){
    .snav .logo:hover .lt{color:var(--violet);animation:ltHopN .55s cubic-bezier(.34,1.56,.64,1) both}
    .snav .logo:hover .lt:nth-child(1){animation-delay:0s}
    .snav .logo:hover .lt:nth-child(2){animation-delay:.05s}
    .snav .logo:hover .lt:nth-child(3){animation-delay:.1s}
    .snav .logo:hover .lt:nth-child(4){animation-delay:.15s}
    .snav .logo:hover .lt:nth-child(5){animation-delay:.2s}
    .snav .logo:hover .lt.jump{animation:ltFlipN .75s cubic-bezier(.5,.05,.2,1) both;animation-delay:.12s}
    .snav .logo:hover .d{animation:dotDropN 1.05s cubic-bezier(.5,0,.25,1) both;animation-delay:.26s}
  }
  @keyframes ltHopN{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}
  @keyframes ltFlipN{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-11px) rotateY(180deg)}100%{transform:translateY(0) rotateY(360deg)}}
  @keyframes dotDropN{0%{transform:translateY(0) scale(1)}22%{transform:translateY(-15px) scaleX(.7) scaleY(1.4)}52%{transform:translateY(0) scaleX(1.5) scaleY(.5)}70%{transform:translateY(-5px) scaleX(.85) scaleY(1.15)}86%{transform:translateY(0) scaleX(1.12) scaleY(.9)}100%{transform:translateY(0) scale(1)}}
  .snav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2px}
  .snav-links a{position:relative;padding:7px 13px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--mut);transition:color .2s,background .2s;white-space:nowrap}
  .snav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:var(--r-sm);background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.23,1,.32,1)}
  .snav-links a.active{color:var(--ink);background:rgba(109,73,206,.1)}
  .snav-links a.active::after{transform:scaleX(1)}
  @media(hover:hover) and (pointer:fine){.snav-links a:hover{color:var(--ink)}.snav-links a:hover::after{transform:scaleX(1)}}
  .snav-dd{position:relative;display:inline-flex;align-items:center}
  .snav-dd>a{display:inline-flex;align-items:center;gap:4px}
  .snav-ddm{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);min-width:230px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 20px 46px -18px rgba(14,17,24,.30);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;z-index:10}
  .snav-ddm::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  .snav-dd:hover .snav-ddm,.snav-dd:focus-within .snav-ddm,.snav-dd.open .snav-ddm{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .snav-ddm a{padding:9px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
  .snav-ddm a::after{content:none!important}
  .snav-ddm a:hover{background:rgba(109,73,206,.08);color:var(--accent)}
  .snav-ddm a:last-child{margin-top:4px;border-top:1px solid var(--line);padding-top:11px;color:var(--accent);font-weight:600}
  .snav-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;padding:0 18px;height:40px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);overflow:hidden;transition:transform .3s cubic-bezier(.34,1.4,.5,1),box-shadow .3s;white-space:nowrap;flex:none}
  .snav-cta:before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.23,1,.32,1)}
  @media(hover:hover) and (pointer:fine){.snav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(124,58,237,.55)}.snav-cta:hover:before{left:150%}}
  .snav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;align-items:center;background:none;border:none;cursor:pointer;padding:4px;flex:none}
  .snav-burger span{display:block;height:1.6px;width:24px;background:var(--ink);border-radius:var(--r-sm);transition:transform .35s cubic-bezier(.77,0,.175,1),opacity .25s}
  .snav-burger.open span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
  .snav-burger.open span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}
  .snav-ov{position:fixed;inset:0;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1500;display:flex;flex-direction:column;padding:100px 36px calc(48px + env(safe-area-inset-bottom));clip-path:inset(100% 0 0 0);transition:clip-path .65s cubic-bezier(.77,0,.175,1);overflow-y:auto;overflow-x:hidden;visibility:hidden;pointer-events:none;font-family:'Onest','Onest Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
  .snav-ov.open{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto}
  .snav-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(6,29,41,.04);border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .3s,background-color .3s,border-color .3s,transform .3s}
  .snav-close:hover{background:rgba(109,73,206,.2);border-color:rgba(109,73,206,.5);transform:rotate(90deg) scale(1.1)}
  .snav-mnav{display:flex;flex-direction:column;gap:4px;flex:1}
  .snav-mlink{font-family:var(--sans);font-size:clamp(26px,7vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--text);text-decoration:none;padding:5px 0;position:relative;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(32px)}
  .snav-mlink::before{content:attr(data-mi);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;color:var(--accent);opacity:.7;letter-spacing:.05em}
  .snav-mlink:hover{color:var(--accent)}
  .snav-msublink{font-size:clamp(16px,4.4vw,21px);font-weight:600;letter-spacing:-.01em;padding:3px 0 3px 16px;color:var(--muted)}
  .snav-msublink::before{content:""!important;margin:0}
  /* Аккордеон «Решения» в мобменю: подпункты скрыты, тап раскрывает */
  .snav-msubwrap{display:flex;flex-direction:column;gap:4px;overflow:hidden;max-height:0;opacity:0;transition:max-height .4s cubic-bezier(.77,0,.175,1),opacity .3s ease}
  .snav-msubwrap.open{max-height:420px;opacity:1}
  .snav-msuball{color:var(--accent)!important;font-weight:600;margin-top:2px}
  .snav-macc{cursor:pointer}
  .snav-mtoggle{margin-left:auto;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .35s cubic-bezier(.77,0,.175,1);opacity:.55}
  .snav-macc[aria-expanded="true"] .snav-mtoggle{transform:rotate(225deg)}
  @media(prefers-reduced-motion:reduce){.snav-msubwrap{transition:none}.snav-mtoggle{transition:none}}
  .snav-mfooter{margin-top:auto;padding-top:28px;border-top:1px solid var(--line)}
  .snav-mcta{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--accent);text-decoration:none;opacity:0;transform:translateY(16px)}
  .snav-mcta:hover{color:var(--text)}
  .snav-msub{font-size:12px;color:var(--faint);margin-top:10px;font-family:'JetBrains Mono',monospace;letter-spacing:.05em;opacity:0}
  @media(max-width:900px){.snav-links,.snav-cta{display:none}.snav-burger{display:inline-flex}}
  @media(prefers-reduced-motion:reduce){.snav,.snav-burger span,.snav-ov,.badge .dot{animation:none!important;transition-duration:.01ms!important}}

  /* ===== 3D ORBIT CAROUSEL (светлая тема эталона) ===== */
  #work .oc-root{--oc:var(--accent);}
  #work .oc-hud{display:flex;align-items:center;gap:16px;margin:30px 0 10px}
  #work .oc-counter{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--mut)}
  #work .oc-cur{transition:opacity .2s}#work .oc-sep{opacity:.5;margin:0 3px}
  #work .oc-track{flex:0 0 200px;max-width:200px;height:3px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
  #work .oc-fill{height:100%;background:var(--oc);transition:width .5s}
  #work .oc-scene{width:100%;height:440px;perspective:1100px;perspective-origin:50% 42%;overflow:visible;position:relative}
  #work .oc-orbit{width:100%;height:100%;position:absolute;transform-style:preserve-3d;transition:transform .82s cubic-bezier(.77,0,.175,1)}
  #work .oc-card{position:absolute;top:0;width:340px;height:380px;margin-left:-170px;left:50%;transform-style:preserve-3d;transition:none;cursor:pointer}
  #work .oc-card-link{position:relative;display:block;width:100%;height:100%;text-decoration:none;color:inherit;background:#0E1322;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);overflow:hidden;backface-visibility:hidden;box-shadow:0 22px 50px -18px rgba(14,17,24,.4);transition:border-color .3s,box-shadow .3s}
  #work .oc-card.oc-active .oc-card-link{border-color:rgba(109,73,206,.5);box-shadow:0 30px 70px -22px rgba(109,73,206,.4),0 18px 40px -20px rgba(14,17,24,.4)}
  #work .oc-thumb{position:absolute;inset:0;background:#141a2e;overflow:hidden;display:flex;align-items:center;justify-content:center}
  #work .oc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .4s ease,opacity .4s ease;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  /* фото — контент карточки; крупные надписи-водяки NEXUS/PHANTOM/ARCADIA поверх фото убираем */
  .oc-label-bg{display:none!important}
  #work .oc-thumb--dark{background:linear-gradient(135deg,#04040A,#1a0530)}
  #work .oc-thumb--cyber{background:linear-gradient(135deg,#000,#000c0a)}
  #work .oc-thumb--arcade{background:linear-gradient(135deg,#05020F,#1a0035,#2d0055)}
  #work .oc-label-bg{position:absolute;font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;letter-spacing:.1em;color:rgba(255,77,0,.22)}
  #work .oc-label-bg--cyber{color:rgba(0,255,209,.18)}#work .oc-label-bg--arcade{color:rgba(255,45,120,.2)}
  #work .oc-badge{position:absolute;top:12px;left:12px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-sm);background:rgba(8,12,22,.55);color:#D8E2F2;border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2}
  #work .oc-badge--fire{background:rgba(255,77,0,.15);color:#ff6b30;border-color:rgba(255,77,0,.3)}
  #work .oc-badge--cyber{background:rgba(0,255,209,.1);color:#00ffd1;border-color:rgba(0,255,209,.3)}
  #work .oc-badge--arcade{background:rgba(139,47,255,.18);color:#c87eff;border-color:rgba(139,47,255,.4)}
  #work .oc-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,rgba(109,73,206,.2),transparent 65%);pointer-events:none}
  #work .oc-glow--fire{background:radial-gradient(ellipse at 50% 110%,rgba(255,77,0,.25),transparent 65%)}
  #work .oc-glow--cyber{background:radial-gradient(ellipse at 50% 110%,rgba(0,255,209,.2),transparent 65%)}
  #work .oc-glow--arcade{background:radial-gradient(ellipse at 50% 110%,rgba(139,47,255,.3),transparent 60%),radial-gradient(ellipse at 20% 0%,rgba(255,45,120,.15),transparent 50%)}
  #work .oc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 16px 15px;background:linear-gradient(to top,rgba(8,11,20,.95) 24%,rgba(8,11,20,.55) 60%,transparent)}
  #work .oc-body h3{font-family:var(--f-disp);font-size:16px;font-weight:600;margin:0;letter-spacing:-.02em;color:#F0F4FF;line-height:1.3;text-shadow:0 1px 12px rgba(0,0,0,.45)}
  #work .oc-note-desktop{display:inline-block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:12px;padding:2px 8px;border-radius:var(--r-sm);background:rgba(255,185,50,.10);color:#FFD480;border:1px solid rgba(255,185,50,.35)}
  #work .oc-cta{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-family:'JetBrains Mono',monospace;font-size:12px;padding:3px 11px;border-radius:var(--r-pill);background:rgba(109,73,206,.18);color:#5B3BB8;border:1px solid rgba(109,73,206,.35);transition:color .25s,background-color .25s,border-color .25s}
  #work .oc-cta::after{content:'→';transition:transform .25s}
  @media(hover:hover) and (pointer:fine){
    /* Задача 4: ховер живёт ТОЛЬКО на превью-картинке (зум + яркость). Карточка НЕ «прыгает» —
       подъём/тень/бордер убраны (перебивали .oc-card:hover .oc-card-link). CTA-подсветка остаётся. */
    #work .oc-card:hover .oc-thumb img{opacity:1;transform:scale(1.12)!important;filter:brightness(1.08)}
    #work .oc-card:hover .oc-cta{background:rgba(109,73,206,.28);color:var(--bg);border-color:rgba(109,73,206,.5)}
    #work .oc-card:hover .oc-cta::after{transform:translateX(4px)}
  }
  #work .oc-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:36px}
  #work .oc-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--mut);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}
  #work .oc-btn svg{width:18px;height:18px}
  #work .oc-btn:hover{border-color:var(--oc);color:var(--oc);transform:scale(1.1)}
  #work .oc-dots{display:flex;gap:0}
  #work .oc-dot{width:24px;height:24px;border:none;background:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  #work .oc-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--line);transition:background .25s,width .3s cubic-bezier(.34,1.56,.64,1)}
  #work .oc-dot.on::before{background:var(--oc);width:20px;border-radius:var(--r-sm)}
  @media(max-width:1024px){
    /* Мобайл/планшет: нативный scroll-snap. Ширину карточки задаёт JS (= ширина сцены) → гарантированное центрирование */
    #work .oc-scene{height:auto;perspective:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 18px}
    #work .oc-scene::-webkit-scrollbar{display:none}
    #work .oc-orbit{position:relative!important;transform:none!important;transform-style:flat!important;display:flex!important;flex-wrap:nowrap!important;width:max-content!important;gap:0!important;padding:0!important;height:auto!important}
    #work .oc-card{position:relative!important;left:auto!important;top:auto!important;flex:0 0 auto!important;max-width:none!important;margin:0!important;height:auto!important;transform:none!important;opacity:1!important;scroll-snap-align:center;scroll-snap-stop:always;padding:0 14px!important;box-sizing:border-box!important}
    #work .oc-card.oc-active{opacity:1}
    #work .oc-card-link{height:360px;display:block}
    #work .oc-hud{display:none}
  }
  /* нейтрализуем старый фикс-навбар (заменён .snav) и фон-узор hero */
  body>header{display:none!important}
  #spot,#grain{display:none!important}

/* MOBILE-HERO-CAROUSEL */
@media(max-width:768px){
  .hero{background-image:none!important;min-height:auto}
  .hero:before{display:none!important}
  #work .oc-hud{display:none!important}
  #work .oc-scene{height:auto!important;perspective:none!important;overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;max-width:100%!important;scroll-snap-type:x mandatory!important;padding:6px 0 18px!important}
  #work .oc-scene::-webkit-scrollbar{display:none}
  #work .oc-orbit{position:relative!important;transform:none!important;display:flex!important;flex-wrap:nowrap!important;width:max-content!important;gap:0!important;height:auto!important;padding:0!important}
  #work .oc-card{position:relative!important;margin:0!important;flex:0 0 auto!important;max-width:none!important;height:auto!important;opacity:1!important;scroll-snap-align:center!important;scroll-snap-stop:always!important;padding:0 14px!important;box-sizing:border-box!important}
  #work .oc-card .oc-thumb img{opacity:1!important;transform:none!important}
  #work .oc-scene .oc-card:nth-child(n+8){display:none!important}
}

/* ───────── блок: block-5 ───────── */
/* 🔴 НЕ ТРОГАТЬ высоту героя главной без спроса владельца.
   FIX I (20.07): пробовали подтянуть герой к общему ритму секций —
   min-height:auto (высота по контенту). Арифметически выходило идеально: стык
   «герой → Два направления» 431px → 139px на ЛЮБОЙ высоте вьюпорта, и это
   чинило худший случай на больших мониторах (482px на 1080, 690px на 1300).
   ВЛАДЕЛЕЦ ОТСМОТРЕЛ И ОТКЛОНИЛ: «очень косячно выглядит». Откатили в тот же день.
   Вывод: первый экран — композиция, а не ячейка ритма. Ровный стык здесь не цель;
   герою нужен запас 100vh + хвост градиента, даже ценой 431px до следующей секции.
   Остальные 6 стыков главной приведены к 139px/86px — герой намеренно вне шкалы. */
.phero.hero{min-height:calc(100vh + 240px)!important;min-height:calc(100svh + 240px)!important;background:linear-gradient(180deg,#fbfaff 0%,#f8f6ff 40%,rgba(248,246,255,.72) 62%,rgba(248,246,255,.4) 78%,rgba(248,246,255,.16) 90%,rgba(248,246,255,0) 100%)!important}.phero.hero:before{display:none!important}.phero.hero .wrap{position:relative;z-index:1}
header#snav.snav{display:flex!important}
/* переменные, которые нужны nav.css (главная не грузит home.css) */
:root{--c-text:#061D29;--c-accent:#6D49CE;--c-accent2:#4A63E0;--c-muted:#425D6D;--c-faint:#5A7382;--c-line:#E5E7EB;--c-line2:#E5E7EB;--f-sans:'Onest','Onest Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.snav-cta{background:var(--text)!important;color:var(--bg)!important}
/* 🔴 Наведение: базовое правило выше стоит с !important и перебивало
   `.snav-cta:hover{background:#13303E}` из nav.css — на главной кнопка при
   наведении не темнела, хотя на всех подстраницах темнела. Замерено живьём:
   главная rgb(6,29,41)→rgb(6,29,41), подстраница rgb(6,29,41)→rgb(19,48,62).
   Возвращаем объявленное поведение тем же весом. */
@media (hover:hover) and (pointer:fine){
  .snav-cta:hover{background:#13303E!important}
}
/* ховер ссылок навбара — как на подстраницах (nav.css): без старого инлайн-подчёркивания */
.snav-links a::after{content:none!important}
.snav-links a{font-weight:500!important;color:var(--c-muted)!important}
/* 🔴 То же самое третий раз: !important на обычном состоянии съедал ховер из
   nav.css, и на главной пункты меню при наведении не подсвечивались вообще
   (на подстраницах цвет менялся 66,93,109 → 6,29,41). */
@media (hover:hover) and (pointer:fine){
  .snav-links a:hover{color:var(--c-text)!important}
}
.snav-links a.active{color:var(--c-text)!important;background:rgba(109,73,206,.10)!important}
/* hero главной — сплит как на подстраницах: текст слева, квадратный визуал справа */
.phero.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:stretch;max-width:var(--maxw)}
.phero.hero .phero-copy{min-width:0;display:flex;flex-direction:column}.phero.hero .phero-copy .hero-cta{margin-top:auto}.phero.hero .phero-copy .metrics{margin-top:auto}
.phero.hero .phero-copy .hbadges{margin-top:clamp(64px,10vh,120px)}
/* картинка того же размера и на том же уровне, что на подстраницах */
.phero.hero .process-visual{width:100%;margin:clamp(64px,10vh,120px) 0 0;opacity:1;transform:none}
.phero.hero .process-visual-frame{position:relative;border:.5px solid #EDF0F3;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;box-shadow:0 26px 60px -30px rgba(6,29,41,.32),0 6px 18px -12px rgba(6,29,41,.14)}
.phero.hero .process-visual-frame img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:var(--r-lg);filter:saturate(1.04)}
@media(max-width:860px){.phero.hero .wrap{grid-template-columns:1fr}.phero.hero .process-visual{display:none}
  /* мобилка: hero компактно в один экран — без 100vh-растяжки и auto-распорок */
  .phero.hero{min-height:auto;padding-top:96px}
  .phero.hero .phero-copy{display:block}
  .phero.hero .phero-copy .hbadges{margin-top:0;margin-bottom:18px}
  .phero.hero .phero-copy .hero-cta{margin-top:22px}
  .phero.hero .phero-copy .metrics{margin-top:26px}}

  /* ═════════ HERO REEL — живая витрина демо-сайтов (правая колонка) ═════════
     Две вертикальные ленты браузер-рамок с реальными скринами работ, едут
     навстречу друг другу. hover → пауза, оффскрин → пауза (IO), reduced-motion
     → статичная витрина. CLS 0: контейнер по aspect-ratio, движение — transform. */
  .phero.hero .hero-reel{position:relative;width:100%;aspect-ratio:1/1;align-self:start;
    margin:clamp(64px,10vh,120px) 0 0;overflow:hidden;border-radius:var(--r-lg);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
  .hr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:100%;align-items:start;}
  .hr-lane{display:flex;flex-direction:column;gap:16px;}
  .hr-lane.up{animation:hrUp 44s linear infinite;}
  .hr-lane.down{animation:hrDown 52s linear infinite;}
  @keyframes hrUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
  @keyframes hrDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
  .hero-reel:hover .hr-lane,.hero-reel.hr-off .hr-lane{animation-play-state:paused;}
  .hr-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);
    box-shadow:0 14px 34px -20px rgba(6,29,41,.34),0 3px 10px -6px rgba(6,29,41,.12);}
  .hr-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fbfaff,#f4f1fb);}
  .hr-bar i{width:7px;height:7px;border-radius:50%;background:#d7d2e6;flex:none;}
  .hr-bar i:nth-child(1){background:#f0a9a0}.hr-bar i:nth-child(2){background:#f3ce9a}.hr-bar i:nth-child(3){background:#a9d8b6}
  .hr-bar b{margin-left:7px;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9.5px;
    letter-spacing:.01em;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 9px;flex:1;text-align:center;}
  .hr-shot{display:block;aspect-ratio:760/870;overflow:hidden;background:var(--tint);}
  .hr-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
  @media(prefers-reduced-motion:reduce){
    .hr-lane.up,.hr-lane.down{animation:none!important;transform:none!important;}
  }
  /* мобилка/планшет: витрина — компактная вертикальная стена под текстом (не «простыня»).
     ВАЖНО: движение вертикальное (translateY) и на мобилке. Горизонтальная лента
     (translateX шире вьюпорта) на мобилке даёт реальный горизонтальный скролл страницы —
     composited-transform «утекает» из overflow:hidden (баг Chromium). Вертикаль безопасна. */
  @media(max-width:860px){
    .phero.hero .hero-reel{aspect-ratio:auto;height:clamp(280px,80vw,340px);align-self:auto;margin:24px 0 0;}
    .hr-grid{gap:12px;}
  }

/* ───────── блок: block-6 ───────── */
/* Фича B: единая неинвазивная плашка фолбэка ИИ (скрипт-дерево / лимит / офлайн-шаблон).
   Один класс на все три ИИ-окна (консультант, демо, помощник формы). */
.ai-fallback{display:flex;gap:7px;align-items:flex-start;font-size:12px;line-height:1.45;
  color:#5f6070;background:rgba(120,124,140,.09);border:1px solid rgba(120,124,140,.18);
  border-radius:var(--r-sm);padding:7px 11px;margin:8px 0}
.ai-fallback .aif-i{flex:none;opacity:.75;font-size:13px;line-height:1.35}
.ai-fallback.limit{color:#8a5a00;background:rgba(240,176,54,.12);border-color:rgba(240,176,54,.30)}

/* ───────── блок: block-7 ───────── */
  /* 🔴 2026-08-25, QA-волна 3. Было два направления, стало три: у студии появилось
     направление ИИ (меню, подвал и /o-studii/ говорят «три»), а главная говорила «два».
     minmax(0,1fr) вместо голого 1fr: голый берёт min-content дорожки, и самый длинный
     чип («Многостраничный») раздвинул бы грид за рамку. Точка перелома поднята
     с 720 до 980 — три колонки по ~230px давят чипы в столбик. */
  #directions .dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(2rem,4vw,3rem);
    border:1px solid var(--line);border-radius:var(--r,24px);overflow:hidden;background:var(--bg)}
  #directions .dir-half{padding:clamp(22px,3vw,34px);position:relative}
  #directions .dir-sites{background:#ECF1FF}
  #directions .dir-bots{background:#F1ECFD;border-left:1px solid var(--line)}
  #directions .dir-ai{background:#E8F6F0;border-left:1px solid var(--line)}
  #directions .dh-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  #directions .dh-ic{width:50px;height:50px;border-radius:var(--r-md);background:var(--bg);display:flex;align-items:center;justify-content:center;flex:none;
    box-shadow:0 8px 20px -12px rgba(6,29,41,.28);transition:transform .4s cubic-bezier(.34,1.4,.5,1)}
  #directions .dir-half:hover .dh-ic{transform:scale(1.1) rotate(-5deg)}
  #directions .dh-ic svg{width:26px;height:26px}
  #directions .dir-sites .dh-ic{color:var(--accent2)}
  #directions .dir-bots .dh-ic{color:var(--accent)}
  #directions .dir-ai .dh-ic{color:var(--good)}
  #directions .dh-id{display:flex;flex-direction:column;line-height:1.2}
  #directions .dh-kicker{font-weight:800;font-size:20px;color:var(--text);letter-spacing:-.01em}
  #directions .dh-price{font-size:14px;color:var(--muted)}
  #directions .dh-price b{font-family:var(--mono);font-weight:700;color:var(--text)}
  #directions .dh-phrase{font-size:16px;line-height:1.5;color:var(--text);margin:0 0 18px;max-width:34ch}
  #directions .dh-phrase b{font-weight:800}
  #directions .dh-chips{display:flex;flex-wrap:wrap;gap:8px}
  #directions .dh-chips a{font-size:13px;font-weight:600;padding:8px 13px;border-radius:var(--r-pill);background:var(--bg);
    border:1px solid var(--line);color:var(--text);transition:transform .2s,border-color .2s,background .2s,color .2s;white-space:nowrap}
  #directions .dir-sites .dh-chips a:hover{border-color:var(--accent2);color:var(--accent2);transform:translateY(-2px)}
  #directions .dir-bots .dh-chips a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
  #directions .dir-ai .dh-chips a:hover{border-color:var(--good);color:var(--good);transform:translateY(-2px)}
  #directions .dir-combo{display:flex;align-items:center;gap:16px;margin-top:16px;padding:20px clamp(20px,3vw,28px);
    border:2px dashed rgba(15,184,126,.45);border-radius:var(--r,24px);background:rgba(15,184,126,.05)}
  #directions .dc-badge{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink);background:var(--good);border-radius:var(--r-sm);padding:6px 11px}
  #directions .dir-combo p{font-size:14px;line-height:1.55;color:var(--text);margin:0}
  #directions .dir-combo b{font-weight:800}
  @media(max-width:980px){
    #directions .dirs{grid-template-columns:1fr}
    #directions .dir-bots,#directions .dir-ai{border-left:none;border-top:1px solid var(--line)}
  }
  @media(max-width:720px){
    #directions .dir-combo{flex-direction:column;align-items:flex-start;gap:12px}
  }

/* ───────── блок: block-8 ───────── */
/* Портфолио — фильтр направлений */
.work-filter{display:inline-flex;gap:6px;padding:5px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg);margin:22px 0 6px}
.wf-btn{padding:9px 20px;border-radius:var(--r-pill);font-weight:600;font-size:14px;color:var(--muted);background:transparent;border:none;cursor:pointer;transition:color .2s,background .2s}
.wf-btn:hover{color:var(--text)}
.wf-btn.is-active{color:var(--bg);background:var(--text)}
.work-filter .wf-sites.is-active{background:var(--accent2)}
.work-filter .wf-bots.is-active{background:var(--accent)}
.work-empty{max-width:520px;margin:36px auto 8px;text-align:center;padding:36px 28px;border:1.5px dashed var(--line2);border-radius:var(--r,24px);background:#F1ECFD}
.work-empty .we-ic{width:56px;height:56px;border-radius:var(--r-md);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0 auto 16px}
.work-empty .we-ic svg{width:28px;height:28px}
.work-empty h3{font-size:20px;font-weight:800;color:var(--text);margin:0 0 8px}
.work-empty p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.work-empty a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════
   ОРБИТА v2 — светлые «живые» мини-сайты (реалистичные превью в палитре Tendo).
   Каждая карточка = браузер-фрейм + настоящий мини-сайт бренда + подпись.
   Scoped `.oc-v2` — не ломает ещё не переделанные карточки. ═══ */
.oc-v2 .oc-card-link{background:#fff!important;border:1px solid var(--line2)!important;
  box-shadow:0 24px 60px -30px rgba(6,29,41,.42)!important;border-radius:16px;overflow:hidden}
.oc-v2.oc-active .oc-card-link{border-color:color-mix(in srgb,var(--pc,#6D49CE) 50%,transparent)!important;
  box-shadow:0 36px 84px -32px color-mix(in srgb,var(--pc,#6D49CE) 42%,transparent),0 18px 44px -28px rgba(6,29,41,.30)!important}
.oc-v2 .oc-prev,.oc-v2 .oc-shot{position:absolute;inset:0 0 60px 0;overflow:hidden;background:#fff;z-index:1}
.oc-v2 .oc-prev{display:flex;flex-direction:column}
.oc-v2 .oc-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.oc-v2.oc-active .oc-shot img,.oc-v2:hover .oc-shot img{transform:none}
.oc-v2 .oc-cap{position:absolute;left:0;right:0;bottom:0;height:60px;z-index:3;padding:0 15px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-top:1px solid var(--line2)}
.oc-v2 .oc-cap h3{font-size:14.5px;font-weight:700;color:#061D29;margin:0;letter-spacing:-.01em;line-height:1.15;display:flex;flex-direction:column;text-shadow:none}
.oc-v2 .oc-cap h3 small{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px}
.oc-v2 .oc-cap .oc-cta{margin:0;background:color-mix(in srgb,var(--pc,#6D49CE) 12%,transparent);
  color:var(--pc,#6D49CE);border:1px solid color-mix(in srgb,var(--pc,#6D49CE) 28%,transparent);font-size:11px;padding:4px 11px}
@media (hover:hover) and (pointer:fine){.oc-v2:hover .oc-cap .oc-cta,.oc-v2.oc-active .oc-cap .oc-cta{background:color-mix(in srgb,var(--pc,#6D49CE) 20%,transparent);color:var(--pc,#6D49CE)}}

/* ── Бородина — редакционный психолог (реальный стиль: бумага + графит + «гнедой») ── */

/* ── Переиспользуемый мини-сайт (Tendo-бренды, цвет через --pc) ── */
.oc-v2 .ms-top{display:flex;align-items:center;justify-content:space-between}
.oc-v2 .ms-logo{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#061D29;letter-spacing:-.01em}
.oc-v2 .ms-logo b{width:17px;height:17px;border-radius:5px;background:var(--pc);flex:none}
.oc-v2 .ms-cta{font-size:9px;font-weight:700;color:#fff;background:var(--pc);border-radius:999px;padding:4px 10px}
.oc-v2 .ms-kick{margin-top:14px;font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--pc)}
.oc-v2 .ms-h{margin:6px 0 0;font-size:22px;font-weight:800;line-height:1.02;letter-spacing:-.025em;color:#061D29}
.oc-v2 .ms-h em{font-style:normal;color:var(--pc)}
.oc-v2 .ms-sub{margin-top:8px;font-size:9.5px;line-height:1.4;color:#5C6875;max-width:30ch}
.oc-v2 .ms-cards{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.oc-v2 .ms-card{background:color-mix(in srgb,var(--pc) 8%,#fff);border:1px solid color-mix(in srgb,var(--pc) 15%,transparent);border-radius:9px;padding:8px 7px}
.oc-v2 .ms-card i{display:block;width:15px;height:15px;border-radius:5px;background:var(--pc);opacity:.92;margin-bottom:6px}
.oc-v2 .ms-card b{display:block;font-size:9px;font-weight:700;color:#061D29;line-height:1.1}
.oc-v2 .ms-card span{display:block;margin-top:3px;font-size:7.5px;color:#5C6875;line-height:1.25}