/* ==========================================================================
   МАНИФЕСТ 01–05 — «сцена» вместо фотографии
   --------------------------------------------------------------------------
   Каждая карточка: слева крупный текст, справа визуальный блок,
   который показывает смысл текста:
     01 Дизайн     — карусель макетов по дуге большого кольца
     02 CMS        — настоящий wp-admin: правим заголовок, текст и фото мышью
     03 SEO        — аудит слева и живое превью сайта с инспектором кода
     04 Скорость   — два поиска, клик по сайту и сборка страницы за 0,9 / 5,2 с
     05 Адаптив    — десктоп / планшет / телефон с одним и тем же сайтом
   --------------------------------------------------------------------------
   Анимации сцен 01–05 — transform/opacity (GPU); корпус 05 дополнительно
   морфится по width/height. Живёт только одна карточка — та, чья незакрытая
   часть больше всех видна в экране (класс .is-live ставит js/main.js);
   у остальных всё на паузе: 01, 03 и 04 — JS-таймлайн, 02 и 05 — CSS-анимации.
   ========================================================================== */

/* ---------- Карточка ---------- */
.stack-card{
  position:relative;display:grid;grid-template-columns:1fr;
  background:#0b0e0f;border:1px solid rgba(255,255,255,.1);
  border-radius:22px;overflow:hidden;color:#fff;
}

/* Эффект «стопки»: включает js/main.js (класс .stack-on у body),
   карточка замерзает, следующая наезжает на неё со сдвигом вниз */
body.stack-on .stack-card{
  position:sticky;top:0;
  border-top-color:rgba(255,255,255,.5); /* светлая линия — видна граница стопки */
  box-shadow:0 -10px 30px rgba(0,0,0,.55),0 30px 70px rgba(0,0,0,.42);
}

/* ---------- Левая колонка: текст ---------- */
.m-text{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:34px 26px 36px;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.055),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 42%);
}
.m-index{display:flex;align-items:flex-end;gap:12px}
.m-num{
  font-size:clamp(56px,8.2vw,104px);font-weight:800;line-height:.78;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.4);
  text-stroke:1.4px rgba(255,255,255,.4);
}
.m-of{font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--lime);padding-bottom:9px}
.m-title{
  margin-top:22px;font-size:clamp(30px,4.6vw,58px);font-weight:700;
  line-height:1.02;letter-spacing:-.032em;color:#fff;
}
.m-rule{display:block;width:46px;height:2px;margin-top:26px;border-radius:2px;background:var(--lime)}

/* ---------- Декор текстовой колонки: метка, чипы, шкала ---------- */
.m-eyebrow{
  display:flex;align-items:center;gap:9px;margin-bottom:18px;
  font:600 11px/1 var(--site-font);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.46);
}
.m-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px rgba(255,255,255,.11);
}
.m-eyebrow-of{color:rgba(255,255,255,.2)}
.m-eyebrow-line{
  flex:1;height:1px;min-width:24px;
  background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.08) 60%,transparent);
}
.m-tags{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0;padding:0;list-style:none}
.m-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border:1px solid rgba(255,255,255,.13);border-radius:999px;
  background:rgba(255,255,255,.035);
  font:500 12.5px/1 var(--site-font);color:rgba(255,255,255,.74);
}
.m-tag::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}
.m-tag--lead{border-color:rgba(255,255,255,.44);background:rgba(255,255,255,.09);color:var(--lime)}
.m-tag--lead::before{opacity:1;box-shadow:0 0 8px rgba(255,255,255,.9)}
.m-scale{display:flex;align-items:center;gap:5px;margin-top:22px}
.m-scale i{width:16px;height:2px;border-radius:2px;background:rgba(255,255,255,.15)}
.m-scale i.is-on{width:34px;background:var(--lime);box-shadow:0 0 12px rgba(255,255,255,.55)}
/* светлая кромка слева и уголок справа */
.m-text::before{
  content:"";position:absolute;left:0;bottom:22px;width:1px;height:72px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.5));
  pointer-events:none;
}
.m-text::after{
  content:"";position:absolute;top:20px;right:20px;width:16px;height:16px;
  border-top:1px solid rgba(255,255,255,.4);border-right:1px solid rgba(255,255,255,.4);
  pointer-events:none;
}
.m-desc{
  margin-top:20px;max-width:42ch;
  font-size:clamp(14.5px,1.2vw,17px);line-height:1.62;color:rgba(255,255,255,.66);
}

/* ---------- Правая колонка: сцена ---------- */
.m-stage{
  position:relative;z-index:1;overflow:hidden;min-height:300px;
  background:#07080a;isolation:isolate;contain:paint;
  border-left:1px solid rgba(255,255,255,.05);
}
/* сетка-подложка */
.m-stage::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 45%,#000 6%,transparent 74%);
  mask-image:radial-gradient(120% 100% at 50% 45%,#000 6%,transparent 74%);
}
/* виньетка + верхний блик */
.m-stage::after{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  background:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.sc{position:absolute;inset:0;z-index:1}
.sc *{backface-visibility:hidden}

/* Анимации идут только у активной карточки стопки.
   !important обязателен: шорткаты animation: ниже по файлу иначе
   сбрасывают play-state обратно в running */
.manifesto-stack .sc,.manifesto-stack .sc *{animation-play-state:paused!important}
.manifesto-stack .stack-card.is-live .sc,.manifesto-stack .stack-card.is-live .sc *{animation-play-state:running!important}

/* ==========================================================================
   01 — ДИЗАЙН: карусель макетов на большом кольце
   --------------------------------------------------------------------------
   Шесть работ едут сверху вниз по дуге огромного невидимого кольца:
   центр окружности — далеко слева за блоком, поэтому соседние кадры
   наклоняются и уходят влево, как карточки на вращающемся подносе.
   Геометрию и таймлайн (1 с пауза, ~0,95 с разгон/торможение) считает
   js/main.js; здесь — только размеры, свет и стеклянная кромка карточек.
   ========================================================================== */
.m-gallery{position:absolute;inset:0;z-index:2;pointer-events:none}
/* сцена 01: макеты мягко уходят в тень сверху и снизу — без резких кромок */
.m-stage-arc .m-gallery{
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,.45) 30px,
    rgba(0,0,0,1) 74px,
    rgba(0,0,0,1) calc(100% - 92px),
    rgba(0,0,0,.45) calc(100% - 38px),
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,.45) 30px,
    rgba(0,0,0,1) 74px,
    rgba(0,0,0,1) calc(100% - 92px),
    rgba(0,0,0,.45) calc(100% - 38px),
    rgba(0,0,0,0) 100%);
}
.mg-card{
  position:absolute;left:50%;top:50%;margin:0;
  width:var(--mg-w,86%);aspect-ratio:4/3;
  border-radius:12px;overflow:hidden;background:#0c0f11;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  opacity:0;will-change:transform,opacity;
  backface-visibility:hidden;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.85),0 12px 24px -12px rgba(0,0,0,.6);
}
.mg-card:first-child{opacity:1}
.mg-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* стеклянная кромка и мягкий блик — карточка лежит на прозрачном подносе */
.mg-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22);
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 18% 82%,rgba(0,0,0,.22)),
    radial-gradient(130% 80% at 30% 0%,rgba(255,255,255,.05),transparent 55%);
}
/* у остановившегося кадра — тонкий светлый контур */
.mg-card::before{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 0 30px rgba(255,255,255,.12);
  opacity:0;transition:opacity .5s ease;
}
.mg-card.is-current::before{opacity:1}

/* ==========================================================================
   02 — CMS: настоящий WordPress — правим текст, фото и жмём «Обновить»
   --------------------------------------------------------------------------
   Окно нарисовано в реальных размерах wp-admin (940×620) и целиком
   масштабируется под сцену через --wps-k (js/main.js), поэтому панель
   остаётся «настоящей» на любом экране: админ-бар, меню, редактор,
   метабоксы, медиатека. Сценарий (тоже js/main.js):
     заголовок → текст → «Изображение записи» → медиатека → «Обновить».
   Курсор и волна клика живут вне масштабируемого окна — они в пикселях
   сцены, поэтому попадают ровно в кнопку при любом масштабе.
   ========================================================================== */
.sc-wps{overflow:hidden}

.wps-wrap{position:absolute;inset:0}
/* мягкое свечение позади «экрана» */
.wps-wrap::before{
  content:"";position:absolute;left:50%;top:50%;width:74%;height:70%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.09),rgba(34,113,177,.09) 55%,transparent 100%);
  filter:blur(18px);
}

.wps{
  position:absolute;left:50%;top:50%;flex:none;width:940px;height:620px;
  transform:translate(-50%,-50%) scale(var(--wps-k,.8));transform-origin:50% 50%;
  display:flex;flex-direction:column;
  border-radius:9px;overflow:hidden;background:#f0f0f1;color:#1d2327;
  font-family:var(--site-font);
  font-size:12px;line-height:1.45;letter-spacing:0;
  box-shadow:0 44px 96px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.1);
  transition:opacity .38s ease;
}
.wps.is-out{opacity:0}
.wps u{color:#2271b1;text-decoration:underline;text-underline-offset:2px;cursor:default}
.wps svg{display:block}

/* ---------- админ-бар ---------- */
.wps-bar{
  flex:none;height:32px;display:flex;align-items:center;
  background:#1d2327;color:#c3c4c7;
}
.wps-logo{width:30px;height:32px;display:grid;place-items:center;color:#f0f0f1}
.wps-logo svg{width:17px;height:17px}
.wps-bar-item{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 9px;
  font-size:11.5px;white-space:nowrap;
}
.wps-bar-site{color:#f0f0f1;font-weight:600;letter-spacing:.02em}
.wps-arr{
  width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.65;
}
.wps-bar-new b{color:#f0f0f1;font-size:14px;font-weight:400;line-height:1}
.wps-bar-gap{flex:1}
.wps-avatar{
  width:22px;height:22px;margin:0 8px 0 2px;border-radius:50%;
  display:grid;place-items:center;background:#2271b1;color:#fff;
  font-size:10px;font-weight:700;
}

/* ---------- каркас ---------- */
.wps-body{flex:1;min-height:0;display:flex}

/* ---------- меню ---------- */
.wps-menu{
  position:relative;flex:none;width:160px;padding-top:5px;
  background:#1d2327;color:#c3c4c7;font-size:12px;
}
.wps-menu ul{margin:0;padding:0;list-style:none}
.wps-menu li{
  display:flex;align-items:center;gap:8px;height:31px;padding:0 9px;
  white-space:nowrap;
}
.wps-menu li svg{width:15px;height:15px;flex:none;opacity:.72}
.wps-menu li span{overflow:hidden;text-overflow:ellipsis}
.wps-menu li.is-active{background:#2271b1;color:#fff}
.wps-menu li.is-active svg{opacity:1}
.wps-menu li.wps-sub{height:23px;padding-left:31px;font-size:11px;background:#2c3338;color:#a7aaad}
.wps-menu li.wps-sub.is-on{color:#72aee6}
.wps-bub{
  margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:700;
  background:#d63638;color:#fff;
}
.wps-fold{
  position:absolute;left:0;right:0;bottom:0;height:32px;display:flex;align-items:center;gap:8px;
  padding-left:11px;font-size:10.5px;color:#a7aaad;
  border-top:1px solid rgba(255,255,255,.08);
}
.wps-fold i{
  width:8px;height:8px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);margin-top:2px;
}

/* ---------- рабочая область ---------- */
.wps-main{
  flex:1;min-width:0;display:flex;flex-direction:column;
  padding:12px 16px 14px;background:#f0f0f1;
}
.wps-head{flex:none;height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wps-head h1{
  margin:0;display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:400;letter-spacing:-.005em;color:#1d2327;
}
.wps-add{
  font-size:10.5px;font-weight:400;line-height:1.6;padding:0 6px;
  border:1px solid #2271b1;border-radius:3px;color:#2271b1;
}
.wps-screen{display:flex;align-items:center;gap:4px;font-size:10.5px;color:#646970}
.wps-screen u{color:#646970;text-decoration:none}
.wps-screen .wps-arr{border-top-color:#646970;opacity:.8}
.wps-screen u + .wps-arr{margin-right:8px}

/* уведомление «Страница обновлена.» */
.wps-notice{
  flex:none;height:36px;margin-top:8px;display:flex;align-items:center;gap:10px;
  padding:0 12px;font-size:11px;color:#1d2327;
  background:#fff;border:1px solid #c3c4c7;border-left:4px solid #141414;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
  opacity:0;transform:translateY(-7px);
  transition:opacity .3s ease,transform .3s ease;
}
.wps-notice.is-on{opacity:1;transform:none}

.wps-cols{flex:1;min-height:0;display:flex;gap:14px;margin-top:10px}

/* ---------- редактор ---------- */
.wps-editor{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.wps-pb-head{
  flex:none;height:32px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;border-bottom:1px solid #c3c4c7;
  font-size:12px;font-weight:600;
}
.wps-pb-arr{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid #787c82}

.wps-titlerow{flex:none;padding:8px 10px 2px}
.wps-title{
  display:flex;align-items:center;height:30px;padding:0 6px;
  font-size:18px;font-weight:600;color:#1d2327;white-space:nowrap;overflow:hidden;
  border:1px solid transparent;border-radius:3px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.wps-title.is-focus{border-color:#2271b1;box-shadow:0 0 0 1px #2271b1}
.wps-perma{display:block;margin:6px 6px 0;font-size:10px;color:#646970}
.wps-perma b{color:#2271b1;font-weight:400}
.wps-perma u{margin-left:5px}

.wps-caret{
  display:none;flex:none;width:1.5px;height:15px;margin-left:1px;border-radius:1px;
  background:#1d2327;animation:wpsBlink 1.05s steps(2,end) infinite;
}
.is-focus > .wps-caret{display:inline-block}
@keyframes wpsBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

.wps-toolbar{
  flex:none;height:28px;display:flex;align-items:center;gap:1px;padding:0 6px;
  background:#f6f7f7;border-top:1px solid #dcdcde;border-bottom:1px solid #dcdcde;
}
.wps-tb{
  width:20px;height:20px;display:grid;place-items:center;border-radius:3px;
  font-size:11px;font-weight:700;color:#1d2327;
}
.wps-tb svg{width:13px;height:13px}
.wps-tb.it{font-family:var(--site-font);font-weight:700}
.wps-tb.un{text-decoration:underline;font-weight:600}
.wps-tb-div{width:1px;height:14px;margin:0 3px;background:#dcdcde}

.wps-content{flex:1;min-height:0;padding:10px 12px;overflow:hidden;font-size:12.5px;line-height:1.62}
.wps-p{
  position:relative;margin:0 0 8px;padding:1px 2px;border-radius:2px;
  transition:box-shadow .18s ease,background .18s ease;
}
.wps-p.is-focus{box-shadow:0 0 0 1px rgba(34,113,177,.55);background:rgba(34,113,177,.03)}
.wps-p2{color:#50575e}
/* выделение текста «как мышью» */
.wps .is-sel{background:#2271b1;color:#fff;border-radius:2px;box-shadow:0 0 0 1.5px #2271b1}

.wps-fig{
  position:relative;height:116px;margin:2px 0 9px;overflow:hidden;border-radius:3px;
  background:#dcdcde;
}
.wps-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .26s ease}
.wps img.is-alt{
  object-position:76% 24% !important;
  filter:saturate(1.12) hue-rotate(-15deg) brightness(1.05);
}

.wps-ed-foot{
  flex:none;height:26px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;border-top:1px solid #dcdcde;background:#fff;
  font-size:10px;color:#646970;
}

/* ---------- сайдбар ---------- */
.wps-side{flex:none;width:222px;display:flex;flex-direction:column;gap:10px}
.wps-box{background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.wps-box-head{
  height:30px;display:flex;align-items:center;padding:0 10px;
  border-bottom:1px solid #c3c4c7;font-size:11.5px;font-weight:600;
}
.wps-box-body{padding:8px 10px 10px}
.wps-row{display:flex;align-items:baseline;gap:5px;margin-bottom:5px;font-size:10px;color:#646970}
.wps-row b{color:#1d2327;font-weight:600}
.wps-row u{margin-left:auto;font-size:10px}
.wps-sep{height:1px;margin:8px 0;background:#dcdcde}
.wps-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.wps-actions-btns{margin-top:8px}
.wps-btn2{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 9px;border-radius:3px;
  border:1px solid #2271b1;background:#f6f7f7;color:#2271b1;
  font-size:10.5px;font-weight:500;line-height:1;
}
.wps-trash{margin-right:auto;font-size:10px;color:#b32d2e !important}

.wps-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:26px;padding:0 11px;border-radius:3px;
  border:1px solid #2271b1;background:#2271b1;color:#fff;
  font-family:inherit;font-size:11px;font-weight:500;line-height:1;cursor:default;
  transition:background .15s ease,box-shadow .15s ease,transform .1s ease;
}
.wps-btn.is-press{background:#135e96;transform:translateY(1px)}
.wps-btn.is-busy{padding-right:8px}
.wps-spin{
  display:none;width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:wpsSpin .55s linear infinite;
}
.wps-btn.is-busy .wps-spin{display:block}
@keyframes wpsSpin{to{transform:rotate(360deg)}}

.wps-fi-img{position:relative;height:104px;overflow:hidden;border-radius:2px;background:#dcdcde}
.wps-fi-img img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .26s ease}
.wps-fi-links{display:flex;justify-content:space-between;margin-top:6px;font-size:10px}
.wps-fi-links u{cursor:default}

/* ---------- медиатека ---------- */
.wps-modal{
  position:absolute;inset:0;z-index:20;
  opacity:0;pointer-events:none;
  transition:opacity .26s ease;
}
.wps-modal.is-on{opacity:1}
.wps-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.wps-modal-box{
  position:absolute;left:50%;top:50%;width:600px;height:428px;
  display:flex;flex-direction:column;overflow:hidden;
  background:#f0f0f1;border-radius:6px;
  box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);
  transform:translate(-50%,-50%) scale(.955);
  transition:transform .3s cubic-bezier(.2,.85,.25,1);
}
.wps-modal.is-on .wps-modal-box{transform:translate(-50%,-50%) scale(1)}
.wps-modal-head{
  flex:none;height:42px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:#fff;border-bottom:1px solid #dcdcde;
}
.wps-modal-head h2{margin:0;font-size:15px;font-weight:400;color:#1d2327}
.wps-x{font-size:18px;line-height:1;color:#787c82;margin-top:-2px}
.wps-modal-tools{
  flex:none;height:38px;display:flex;align-items:center;gap:12px;
  padding:0 12px;background:#fff;border-bottom:1px solid #dcdcde;
}
.wps-tab{font-size:11px;color:#2271b1;position:relative;height:38px;display:flex;align-items:center}
.wps-tab.is-on{color:#1d2327;font-weight:600}
.wps-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#2271b1}
.wps-modal-gap{flex:1}
.wps-search{
  display:flex;align-items:center;gap:5px;height:24px;padding:0 8px;
  border:1px solid #8c8f94;border-radius:3px;background:#fff;
  font-size:10px;color:#787c82;
}
.wps-search svg{width:11px;height:11px}
.wps-filter{
  display:flex;align-items:center;gap:6px;height:24px;padding:0 7px;
  border:1px solid #8c8f94;border-radius:3px;background:#fff;
  font-size:10px;color:#2c3338;
}
.wps-filter .wps-arr{border-top-color:#2c3338;opacity:.7}

.wps-grid{
  flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,1fr);gap:8px;padding:10px 12px;background:#fff;
}
.wps-th{
  position:relative;margin:0;overflow:hidden;border-radius:2px;background:#dcdcde;
  border:3px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);
  transition:border-color .14s ease;
}
.wps-th img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:var(--f,none);display:block}
.wps-th.is-hover{border-color:#72aee6}
.wps-th.is-sel{border-color:#2271b1}
.wps-th.is-sel::after{
  content:"";position:absolute;right:4px;top:4px;width:14px;height:14px;border-radius:50%;
  background:#2271b1 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.wps-modal-foot{
  flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:#f0f0f1;border-top:1px solid #dcdcde;
  font-size:10.5px;color:#646970;
}
.wps-modal-foot b{color:#1d2327}
.wps-modal-foot .wps-btn{height:28px;padding:0 14px;font-size:11.5px}

/* ---------- курсор и волна клика (в пикселях сцены) ---------- */
.wps-cursor{
  position:absolute;left:0;top:0;z-index:30;width:21px;height:21px;
  pointer-events:none;opacity:0;
  transform:translate3d(-40px,-40px,0);
  transition:transform .62s cubic-bezier(.25,.9,.3,1),opacity .3s ease;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
  will-change:transform;
}
.wps-cursor.is-on{opacity:1}
.wps-cursor > i{display:block;width:100%;height:100%;transition:transform .09s ease;transform-origin:0 0}
.wps-cursor.is-down > i{transform:scale(.78)}
.wps-cursor svg{width:100%;height:100%;fill:#fff;stroke:#16191b;stroke-width:1.1;stroke-linejoin:round}
.wps-ripple{
  position:absolute;left:0;top:0;z-index:29;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;border:2px solid rgba(34,113,177,.95);background:rgba(34,113,177,.18);
  opacity:0;pointer-events:none;transform:scale(.2);
}
.wps-ripple.is-on{animation:wpsRipple .52s ease-out}
@keyframes wpsRipple{
  0%{opacity:.95;transform:scale(.22)}
  100%{opacity:0;transform:scale(1.5)}
}

/* ==========================================================================
   03 — SEO: аудит слева, живое превью сайта справа
   --------------------------------------------------------------------------
   Сцена разделена 39/61. Слева — панель SEO-аудита: счётчик 0–100, шесть
   пунктов и итоговые «№1 / +327%». Справа — светлое превью сайта. Поверх
   него сверху вниз едет панель-инспектор с HTML-кодом: код внутри
   прокручивается, важные строки (title и description, заголовки, ссылки,
   alt, schema, sitemap) подсвечиваются, пока проходят через окно панели.
   Как только первая ключевая строка группы появляется в панели, в аудите
   загорается пункт и счётчик набирает обороты. В финале сайт получает
   светлый контур, на превью появляется «№1», в аудите — рост трафика.
   Геометрию и таймлайн считает js/main.js.
   ========================================================================== */
.m-stage.m-stage-seo{container-type:inline-size}
.m-stage.m-stage-seo::after{
  background:none;
}
.sc-seo{
  opacity:1;transition:opacity .5s ease;
  background:none;
}
.sc-seo.is-out{opacity:0}
.seo-wrap{
  position:absolute;inset:4.5% 5% 6.5%;z-index:2;
  display:flex;align-items:stretch;gap:clamp(7px,2cqi,13px);
}

/* ---------- справа: светлое превью сайта ---------- */
.seo-site{
  position:relative;flex:1;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.14);border-radius:clamp(10px,2.2cqi,16px);
  background:var(--paper);overflow:hidden;
  box-shadow:0 22px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55);
  transition:border-color .5s ease,box-shadow .5s ease;
}
.sc-seo.is-done .seo-site{
  border-color:rgba(18,18,18,.44);
  box-shadow:
    0 22px 48px rgba(0,0,0,.45),
    0 0 0 1px rgba(18,18,18,.14),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.seo-chrome{
  flex:none;display:flex;align-items:center;gap:clamp(6px,1.5cqi,9px);
  height:clamp(21px,4.6cqi,28px);padding:0 clamp(8px,2cqi,12px);
  background:#e9e4d7;
  border-bottom:1px solid rgba(18,18,18,.11);
}
.seo-dots{display:flex;gap:clamp(3px,.8cqi,5px);flex:none}
.seo-dots i{
  width:clamp(4px,1cqi,6px);height:clamp(4px,1cqi,6px);
  border-radius:50%;background:rgba(18,18,18,.14);
}
.seo-dots i:nth-child(1){background:#d09380}
.seo-dots i:nth-child(2){background:#d9b969}
.seo-dots i:nth-child(3){background:#b9b4a6}
.seo-url{
  display:flex;align-items:center;gap:4px;flex:none;max-width:62%;
  height:clamp(14px,3.2cqi,19px);padding:0 clamp(6px,1.4cqi,9px);
  border-radius:999px;border:1px solid rgba(18,18,18,.09);background:#f9f6ef;
  font-size:clamp(6.5px,1.45cqi,8.5px);color:#67645c;
  white-space:nowrap;overflow:hidden;
  transition:border-color .35s ease,background .35s ease,color .35s ease,box-shadow .35s ease;
}
.seo-url svg{width:1.05em;height:1.05em;flex:none;opacity:.7;color:#8d8a80}
.sc-seo.is-done .seo-url{
  border-color:rgba(18,18,18,.32);background:#f2f2ef;
  color:#141414;box-shadow:0 0 0 2px rgba(18,18,18,.1);
}
.seo-verdict{
  flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:auto;
  font-size:clamp(6px,1.2cqi,8px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#3a3a3a;white-space:nowrap;
  opacity:0;transform:translateY(2px);
  transition:opacity .4s ease,transform .4s ease;
}
.seo-verdict i{width:5px;height:5px;border-radius:50%;background:#141414}
.sc-seo.is-done .seo-verdict{opacity:1;transform:none}

.seo-page{
  position:relative;flex:1;min-height:0;overflow:hidden;
  background:var(--paper);
}

/* мини-сайт: широкий баннер с домами и секции под ним */
.seo-canvas{
  --lime:#141414;
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;gap:clamp(7px,1.8cqi,12px);
  padding:clamp(9px,2.2cqi,14px);
  overflow:hidden;
  background:
    radial-gradient(70% 46% at 100% 0%,rgba(18,18,18,.05),transparent 68%),
    var(--paper);
}
.seo-c-nav{flex:none;display:flex;align-items:center;gap:clamp(5px,1.4cqi,9px);min-width:0}
.seo-c-brand{
  font-family:var(--display);font-weight:600;
  font-size:clamp(7px,1.55cqi,10px);letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;
}
.seo-c-brand i{font-style:normal;color:#141414;padding:0 1px}
.seo-c-menu{
  display:flex;gap:clamp(4px,1.2cqi,8px);margin-left:auto;
  font-size:clamp(5.5px,1.05cqi,7px);color:rgba(18,18,18,.45);white-space:nowrap;
}
.seo-c-pill{
  flex:none;padding:clamp(2px,.6cqi,3px) clamp(5px,1.2cqi,8px);
  border-radius:999px;background:var(--lime);color:#fff;
  font-size:clamp(5px,1cqi,6.5px);font-weight:800;letter-spacing:.03em;white-space:nowrap;
}

/* горизонтальный баннер: дома на всю ширину, текст поверх */
.seo-c-banner{
  --lime:#fff;
  position:relative;flex:0 0 auto;aspect-ratio:16/7;min-height:clamp(70px,13cqi,96px);
  overflow:hidden;border-radius:clamp(6px,1.4cqi,10px);
  background:#181b16;isolation:isolate;
}
.seo-c-banner img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%;filter:saturate(.88) contrast(1.04);
}
.seo-c-banner-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,12,10,.9) 0%,rgba(8,12,10,.62) 44%,rgba(8,12,10,.06) 82%),
    linear-gradient(0deg,rgba(8,12,10,.35),transparent 48%);
}
.seo-c-banner-copy{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(3px,.9cqi,6px);
  max-width:82%;padding:clamp(8px,2cqi,14px);
}
.seo-c-eyebrow{
  display:inline-flex;align-items:center;gap:4px;
  font-size:clamp(5px,1cqi,6.5px);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap;
}
.seo-c-eyebrow i{width:4px;height:4px;border-radius:50%;background:var(--lime)}
.seo-c-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(13px,3.1cqi,21px);line-height:.98;letter-spacing:-.045em;color:#fff;
}
.seo-c-title em{font-style:normal;color:var(--lime)}
.seo-c-cta{
  align-self:flex-start;margin-top:clamp(2px,.7cqi,5px);
  padding:clamp(3px,.8cqi,5px) clamp(6px,1.4cqi,9px);
  border-radius:999px;background:var(--lime);color:#141414;
  font-size:clamp(5.5px,1.05cqi,7px);font-weight:800;white-space:nowrap;
}
.seo-c-badge{
  position:absolute;right:clamp(6px,1.5cqi,10px);bottom:clamp(6px,1.5cqi,10px);z-index:2;
  padding:clamp(2px,.5cqi,3px) clamp(4px,1cqi,7px);
  border-radius:999px;background:var(--lime);color:#141414;
  font-family:var(--display);font-weight:600;font-size:clamp(5.5px,1.15cqi,7.5px);
  opacity:0;transform:translateY(4px) scale(.9);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
.seo-c-badge i{font-style:normal;font-family:var(--sans);font-weight:700;font-size:.88em;letter-spacing:.02em}
.sc-seo.is-payoff .seo-c-badge{opacity:1;transform:none}

/* секция услуг */
.seo-c-services{
  flex:none;display:grid;grid-template-columns:repeat(3,1fr);
  padding:clamp(4px,1cqi,6px) 0;
  border-top:1px solid rgba(18,18,18,.14);
  border-bottom:1px solid rgba(18,18,18,.08);
}
.seo-c-services span{
  display:flex;align-items:baseline;gap:clamp(3px,.8cqi,5px);min-width:0;
  overflow:hidden;white-space:nowrap;
  font-size:clamp(5px,1.05cqi,6.5px);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(18,18,18,.55);
}
.seo-c-services span + span{padding-left:clamp(4px,1cqi,7px);border-left:1px solid rgba(18,18,18,.1)}
.seo-c-services b{font-family:var(--display);font-size:clamp(5.5px,1.15cqi,7px);color:#141414}

/* секция кейсов: забирает свободную высоту страницы */
.seo-c-cases{flex:1 1 auto;display:flex;flex-direction:column;gap:clamp(3px,.8cqi,5px);min-height:0}
.seo-c-case-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font-size:clamp(5.5px,1.1cqi,7px);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(18,18,18,.62);
}
.seo-c-case-head em{font-style:normal;font-weight:600;letter-spacing:.02em;color:#5a5a5a;white-space:nowrap}
.seo-c-case-grid{
  flex:1 1 auto;min-height:0;min-width:0;
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
  gap:clamp(4px,1cqi,6px);
}
.seo-c-case{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:0}
.seo-c-case i{
  display:block;flex:1 1 auto;height:auto;min-height:clamp(22px,5.2cqi,38px);
  border-radius:clamp(3px,.8cqi,5px);
  background-size:cover;background-position:center;
  filter:saturate(.86) contrast(1.02);
}
.seo-c-case b{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:clamp(5.5px,1.1cqi,7px);font-weight:800;color:var(--ink);
}
.seo-c-case em{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-style:normal;font-size:clamp(4.5px,.95cqi,6px);color:rgba(18,18,18,.45);
}

/* секция о студии: добивает страницу до полноценного сайта */
.seo-c-about{
  flex:0 0 auto;min-height:0;
  display:flex;align-items:center;gap:clamp(8px,2cqi,16px);
  padding:clamp(6px,1.4cqi,11px) clamp(7px,1.8cqi,13px);
  border:1px solid rgba(18,18,18,.1);border-radius:clamp(6px,1.4cqi,10px);
  background:
    radial-gradient(circle at 1px 1px,rgba(18,18,18,.14) 1px,transparent 1.5px) 0 0/11px 11px,
    linear-gradient(118deg,rgba(18,18,18,.07),rgba(18,18,18,.015) 62%,rgba(242,239,231,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;
}
.seo-c-about-copy{
  display:flex;flex-direction:column;gap:clamp(2px,.7cqi,4px);
  min-width:0;
}
.seo-c-about-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(8px,1.9cqi,12px);line-height:1.02;letter-spacing:-.03em;
  color:var(--ink);
}
.seo-c-about-title em{font-style:normal;color:#141414}
.seo-c-about-note{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:clamp(4.8px,1cqi,6.5px);line-height:1.35;color:rgba(18,18,18,.45);
}
.seo-c-stats{
  flex:none;display:flex;gap:clamp(6px,1.6cqi,12px);
  margin-left:auto;text-align:right;
}
.seo-c-stats span{display:flex;flex-direction:column;gap:1px;min-width:0}
.seo-c-stats b{
  font-family:var(--display);font-weight:600;
  font-size:clamp(7px,1.65cqi,10px);line-height:1;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.seo-c-stats i{
  font-style:normal;font-size:clamp(4.2px,.9cqi,5.5px);
  letter-spacing:.08em;text-transform:uppercase;color:rgba(18,18,18,.4);
  white-space:nowrap;
}

/* финальная секция-CTA */
.seo-c-cta-band{
  --lime:#fff;
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:clamp(5px,1.2cqi,8px) clamp(6px,1.4cqi,10px);
  border-radius:clamp(4px,1cqi,7px);
  background:var(--ink);color:rgba(255,255,255,.62);
}
.seo-c-cta-copy{min-width:0;font-size:clamp(4.8px,1cqi,6.5px);line-height:1.35}
.seo-c-cta-copy b{font-weight:700;color:#fff}
.seo-c-cta-link{
  flex:none;padding:clamp(2px,.5cqi,3px) clamp(4px,1cqi,7px);
  border-radius:999px;background:var(--lime);color:#141414;
  font-size:clamp(4.8px,1cqi,6.5px);font-weight:800;white-space:nowrap;
}

/* ---------- инспектор разметки: 25% высоты страницы ---------- */
.seo-band{
  position:absolute;left:0;right:0;top:0;z-index:3;
  height:25%;overflow:hidden;
  opacity:0;pointer-events:none;will-change:transform;
  background:transparent;
  transition:opacity .3s ease;
}
.sc-seo.is-scanning .seo-band{opacity:1}
.seo-band-inner{
  position:absolute;left:clamp(5px,1.2cqi,8px);right:clamp(5px,1.2cqi,8px);
  top:clamp(4px,1cqi,6px);bottom:clamp(4px,1cqi,6px);
  overflow:hidden;border-radius:clamp(8px,1.8cqi,12px);
  background:linear-gradient(180deg,rgba(15,20,21,.975),rgba(9,13,14,.985));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.06);
}
.seo-band-head{
  position:absolute;left:0;right:0;top:0;z-index:3;
  height:clamp(15px,3.4cqi,20px);
  display:flex;align-items:center;gap:6px;
  padding:0 clamp(8px,1.8cqi,11px);
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.seo-band-file{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--site-font);
  font-size:clamp(6px,1.2cqi,7.5px);letter-spacing:.02em;color:rgba(255,255,255,.6);
}
.seo-band-file i{
  width:5px;height:5px;border-radius:1.5px;
  background:rgba(255,255,255,.82);
}
.seo-band-tag{
  margin-left:auto;font-size:clamp(5.5px,1.05cqi,6.5px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);
}
.seo-code{
  position:absolute;left:0;right:0;top:0;z-index:1;
  padding:calc(clamp(15px,3.4cqi,20px) + clamp(3px,.8cqi,5px)) clamp(7px,1.8cqi,12px) clamp(4px,1.1cqi,7px);
  font-family:var(--site-font);
  font-size:clamp(7px,1.5cqi,9px);line-height:1.7;
  color:rgba(255,255,255,.5);will-change:transform;
}
.seo-line{
  display:flex;align-items:baseline;gap:clamp(4px,1cqi,8px);
  padding:0 clamp(3px,.8cqi,6px);
  border-left:2px solid transparent;border-radius:4px;
  white-space:nowrap;overflow:hidden;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.seo-n{
  flex:none;width:1.7em;text-align:right;
  color:rgba(255,255,255,.2);font-size:.84em;
  user-select:none;
}
.seo-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.seo-t b{font-weight:400;color:#d0d0d0}
.seo-t em{font-style:normal;color:#a6b4df}
.seo-t i{font-style:normal;color:#e6cc96}
.seo-line.is-hot{
  background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,.025));
  border-left-color:rgba(255,255,255,.85);
  color:rgba(255,255,255,.94);
}
.seo-line.is-hot .seo-n{color:rgba(255,255,255,.6)}
.seo-line.is-hot .seo-t b{color:#fff}
.seo-line.is-hot .seo-t em{color:#c8d2f1}
.seo-line.is-hot .seo-t i{color:#ffe3ab}

/* ---------- слева: панель аудита ---------- */
.seo-checklist{
  flex:0 0 39%;min-width:0;
  display:flex;flex-direction:column;
  padding:clamp(10px,2.3cqi,17px);
  border:1px solid rgba(255,255,255,.09);border-radius:clamp(11px,2.2cqi,16px);
  background:
    radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.06),transparent 60%),
    linear-gradient(180deg,#121718,#0a0e0f 72%);
  box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.055);
  transition:border-color .45s ease,box-shadow .45s ease;
}
.sc-seo.is-payoff .seo-checklist{
  border-color:rgba(255,255,255,.27);
  box-shadow:0 18px 42px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.06);
}
.seo-audit-head{display:flex;align-items:center;gap:clamp(4px,1.1cqi,8px);min-width:0}
.seo-kicker{
  flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:5px;
  font-size:clamp(7.5px,1.45cqi,9.5px);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;
}
.seo-kicker::before{
  content:"";flex:none;width:4px;height:4px;border-radius:50%;
  background:var(--lime);
}
.seo-audit-live{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  padding:clamp(1px,.4cqi,2px) clamp(4px,1cqi,6px);
  border-radius:999px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  font-size:clamp(5.5px,1.05cqi,7px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
}
.seo-audit-live i{
  width:4px;height:4px;border-radius:50%;background:var(--lime);
  animation:seoPulse 2s ease-in-out infinite;
}
@keyframes seoPulse{0%,100%{opacity:.45}50%{opacity:1}}
.seo-audit-score{
  display:flex;align-items:flex-end;gap:clamp(5px,1.3cqi,9px);
  margin-top:clamp(9px,2cqi,14px);min-width:0;
}
.seo-score{display:flex;align-items:baseline;gap:2px;line-height:.9;font-variant-numeric:tabular-nums}
.seo-score b{
  font-family:var(--display);font-weight:600;
  font-size:clamp(22px,5.2cqi,36px);letter-spacing:-.04em;color:var(--lime);
}
.seo-score i{font-style:normal;font-size:clamp(6.5px,1.3cqi,8px);color:rgba(255,255,255,.3)}
.seo-score-cap{
  margin-left:auto;padding-bottom:2px;text-align:right;
  font-size:clamp(6px,1.1cqi,7.5px);line-height:1.4;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.28);white-space:nowrap;
}
.seo-progress{
  flex:none;height:3px;margin-top:clamp(8px,1.8cqi,12px);border-radius:999px;
  background:rgba(255,255,255,.07);overflow:hidden;
}
.seo-progress i{
  display:block;width:0;height:100%;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.45),var(--lime));
}
.seo-sub{
  margin:clamp(5px,1.2cqi,8px) 0 0;
  font-size:clamp(6px,1.15cqi,7.5px);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.24);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.seo-list{
  list-style:none;margin:clamp(6px,1.6cqi,10px) 0 0;padding:0;
  flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;
}
.seo-list li{
  display:flex;align-items:center;gap:clamp(5px,1.2cqi,8px);min-width:0;
  padding:clamp(3px,.9cqi,5px) 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-size:clamp(8.5px,1.85cqi,11px);line-height:1.2;color:rgba(255,255,255,.44);
  transition:color .35s ease;
}
.seo-list li:last-child{border-bottom:0}
.seo-list li > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-list li > code{
  margin-left:auto;flex:none;
  font-family:var(--site-font);
  font-size:clamp(6.2px,1.2cqi,7.5px);line-height:1;
  padding:clamp(2px,.55cqi,3px) clamp(3px,.8cqi,5px);
  border-radius:3px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.26);
  transition:color .35s ease,border-color .35s ease,background .35s ease;
}
.seo-list li > i{
  position:relative;flex:none;z-index:1;
  width:clamp(10px,2cqi,13px);height:clamp(10px,2cqi,13px);
  border-radius:4px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.seo-list li > i::after{
  content:"";position:absolute;left:50%;top:45%;
  width:32%;height:56%;border:solid #0b0e0a;border-width:0 1.7px 1.7px 0;
  opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.4);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,1.4,.4,1);
}
.seo-list li.is-on{color:rgba(255,255,255,.94)}
.seo-list li.is-on > i{
  background:var(--lime);border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.seo-list li.is-on > i::after{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.seo-list li.is-on > code{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.055)}
.seo-result{
  flex:none;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(4px,1cqi,6px);margin-top:clamp(8px,1.8cqi,11px);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
.sc-seo.is-payoff .seo-result{opacity:1;transform:none}
.seo-rank,.seo-traffic{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  align-items:end;gap:1px 5px;min-width:0;
  padding:clamp(5px,1.2cqi,8px) clamp(6px,1.4cqi,9px);
  border-radius:clamp(7px,1.5cqi,10px);border:1px solid rgba(255,255,255,.17);
  background:rgba(255,255,255,.055);
  font-variant-numeric:tabular-nums;
}
.seo-rank > i,.seo-traffic > i{
  grid-column:1/-1;font-style:normal;
  font-size:clamp(5.5px,1.05cqi,7px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.36);
}
.seo-rank b,.seo-traffic b{
  font-family:var(--display);font-weight:600;
  font-size:clamp(11px,2.4cqi,16px);line-height:1;color:var(--lime);
}
.seo-rank em,.seo-traffic em{
  font-style:normal;font-size:clamp(5.5px,1.05cqi,7px);
  color:rgba(255,255,255,.4);white-space:nowrap;padding-bottom:1px;
}

/* средняя сцена: итоговые плитки уже, убираем пояснения к цифрам */
@container (max-width:700px){
  .seo-rank em,.seo-traffic em{display:none}
}

/* узкая сцена: убираем служебные подписи, освобождаем место тексту */
@container (max-width:520px){
  .seo-audit-live,.seo-score-cap,.seo-verdict,.seo-band-tag,.seo-sub{display:none}
  .seo-kicker{letter-spacing:.1em}
  .seo-score b{font-size:clamp(20px,5.2cqi,27px)}
  .seo-audit-score{margin-top:8px}
  .seo-progress{margin-top:7px}
  .seo-list li{gap:4px;font-size:clamp(8px,2.1cqi,10px)}
  .seo-list li > code{display:none}
  .seo-result{grid-template-columns:1fr;gap:3px;margin-top:6px}
  .seo-rank,.seo-traffic{padding:4px 5px;border-radius:6px}
  .seo-rank b,.seo-traffic b{font-size:clamp(10px,2.5cqi,13px)}
  .seo-c-menu,.seo-c-badge i{display:none}
  .seo-c-title{font-size:clamp(12px,3.3cqi,16px)}
  .seo-c-banner{aspect-ratio:16/9}
  .seo-c-case-grid{grid-template-columns:1fr;grid-auto-rows:1fr;gap:4px}
  .seo-c-case{
    display:grid;grid-template-columns:44% 1fr;grid-template-rows:1fr auto;
    grid-template-areas:"img b" "img em";
    column-gap:5px;row-gap:1px;
    padding-top:4px;border-top:1px solid rgba(18,18,18,.12);
  }
  .seo-c-case:first-child{padding-top:0;border-top:0}
  .seo-c-case i{grid-area:img;width:100%;height:100%;min-height:0}
  .seo-c-case b{grid-area:b;align-self:end}
  .seo-c-case em{grid-area:em;display:block;align-self:start}
  .seo-c-about{
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:5px;padding:7px 8px;
  }
  .seo-c-about-note{
    display:block;max-width:100%;white-space:normal;line-height:1.35;
  }
  .seo-c-about-title{font-size:clamp(7px,2.05cqi,9px)}
  .seo-c-stats{
    align-self:stretch;justify-content:space-between;
    margin-left:0;gap:6px;padding-top:5px;text-align:left;
    border-top:1px solid rgba(18,18,18,.12);
  }
  .seo-c-stats i{display:none}
}

/* ==========================================================================
   04 — СКОРОСТЬ: два поиска, клик по сайту и сборка страницы «быстро/медленно»
   --------------------------------------------------------------------------
   Слева и справа — одинаковый поиск в светлом стиле Google с логотипами
   Google и Яндекса. Печатается запрос «мебель на заказ», снизу сами
   раскрываются три результата. Курсоры одновременно жмут на центральный,
   панели поиска уезжают вверх, и начинается загрузка одного и того же
   макета: пять блоков сайта встают снизу, как детали тетриса. Слева всё
   собирается за 1,5 с (счётчик 0,9 с), справа — за 5,2 с (счётчик 5,2 с).
   Таймлайн и счётчики считает js/main.js; у неактивной карточки сцена
   сбрасывается в начало.
   ========================================================================== */
.m-stage.m-stage-speed{min-height:560px;container-type:inline-size;background:#06080a}
.sc-speed{
  background:
    radial-gradient(85% 65% at 50% 34%,rgba(255,255,255,.05),transparent 70%),
    radial-gradient(65% 55% at 85% 82%,rgba(255,180,92,.04),transparent 72%);
}
/* светлый поиск должен быть белым, без общей виньетки сцены */
.m-stage.m-stage-speed::after{display:none}
.sp-split{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.sp-half{
  --sp-accent:var(--lime);
  --sp-glow:rgba(255,255,255,.12);
  --sp-drop:.7s;
  position:relative;overflow:hidden;min-height:0;
}
.sp-half[data-tone="slow"]{--sp-accent:#ffb45c;--sp-glow:rgba(255,180,92,.12);--sp-drop:1.2s}
.sp-half + .sp-half{border-top:1px solid rgba(120,135,145,.25)}

/* ---------- поисковая панель в стиле Google, которая уезжает вверх ---------- */
.sp-search{
  position:absolute;inset:0;z-index:6;
  display:flex;align-items:center;justify-content:center;
  padding:14px;
  background:linear-gradient(180deg,rgba(14,19,21,.97),rgba(9,13,15,.99));color:#e8eaed;
  font-family:var(--site-font);
  transform:translate3d(0,0,0);
  transition:transform .64s cubic-bezier(.55,0,.16,1);
  will-change:transform;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.sp-half.is-up .sp-search{transform:translate3d(0,-105%,0)}
.sp-core{width:100%;max-width:320px;margin:0 auto}

/* логотипы Google и Яндекса — над строкой поиска */
.sp-engines{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:15px}
.sp-google{display:inline-flex;font-size:21px;font-weight:500;line-height:1;letter-spacing:-.045em}
.sp-google i{font-style:normal}
.sp-google i:nth-child(1){color:#4285f4}
.sp-google i:nth-child(2){color:#ea4335}
.sp-google i:nth-child(3){color:#fbbc05}
.sp-google i:nth-child(4){color:#4285f4}
.sp-google i:nth-child(5){color:#34a853}
.sp-google i:nth-child(6){color:#ea4335}
.sp-vsep{width:1px;height:20px;background:rgba(255,255,255,.18)}
.sp-yandex{font-size:17px;font-weight:800;line-height:1;letter-spacing:-.035em;color:#fc3f1d}

/* строка поиска */
.sp-field{
  display:flex;align-items:center;gap:8px;height:42px;padding:0 13px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.055);
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.sp-half.is-typing .sp-field,
.sp-half.is-results .sp-field{
  border-color:rgba(255,255,255,.24);
  box-shadow:0 1px 10px rgba(0,0,0,.5);
}
.sp-lens{width:14px;height:14px;flex:none;fill:none;stroke:#9aa0a6;stroke-width:2.1;stroke-linecap:round}
.sp-q{
  min-width:0;font-size:13px;line-height:1;color:#e8eaed;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sp-caret{flex:none;width:1.5px;height:15px;border-radius:1px;background:#4285f4;animation:caretBlink 1.05s steps(2,end) infinite}
.sp-mic{width:13px;height:13px;flex:none;margin-left:auto;fill:none;stroke:#4285f4;stroke-width:1.9;stroke-linecap:round}

/* выдача: три результата раскрываются снизу */
.sp-results-wrap{
  display:grid;grid-template-rows:1fr;opacity:1;margin-top:14px;
  transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1),opacity .28s ease,
    margin-top .45s cubic-bezier(.2,.8,.2,1);
}
.sp-half.is-typing .sp-results-wrap{grid-template-rows:0fr;opacity:0;margin-top:0}
.sp-results{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.sp-meta{font-size:8px;line-height:1.2;color:#9aa0a6;padding:0 8px 5px}
.sp-result{
  display:flex;gap:8px;padding:6px 8px;border-radius:8px;
  opacity:1;transform:none;
  transition:background .18s ease,box-shadow .18s ease;
}
.sp-half.is-typing .sp-result{opacity:0;transform:translateY(10px)}
.sp-half.is-results .sp-result{animation:spRowIn .34s ease both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
@keyframes spRowIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.sp-result.is-hover{background:rgba(255,255,255,.07)}
.sp-result.is-pressed{background:rgba(138,180,248,.16);box-shadow:inset 0 0 0 1px rgba(138,180,248,.55)}
.sp-fav{
  flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;
  display:grid;place-items:center;background:var(--fav,#5f6368);
  color:#fff;font:700 7px/1 var(--site-font);
}
.sp-r-body{min-width:0;display:flex;flex-direction:column;gap:1px}
.sp-r-site{display:flex;align-items:center;gap:4px;min-width:0;font-size:8px;line-height:1.2;color:#9aa0a6}
.sp-r-site b{
  font-weight:600;color:#e8eaed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sp-r-site em{font-style:normal;color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-r-title{
  font-size:11px;font-weight:500;line-height:1.2;color:#8ab4f8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sp-result.is-target .sp-r-title{font-weight:700}
.sp-r-desc{
  font-size:8.5px;line-height:1.3;color:#bdc1c6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sp-cursor{
  position:absolute;left:0;top:0;z-index:9;width:20px;height:20px;
  opacity:0;pointer-events:none;transform:translate3d(-40px,-40px,0);
  transition:transform .62s cubic-bezier(.25,.9,.3,1),opacity .28s ease;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));will-change:transform;
}
.sp-cursor.is-on{opacity:1}
.sp-cursor > i{display:block;width:100%;height:100%;transform-origin:0 0;transition:transform .09s ease}
.sp-cursor.is-down > i{transform:scale(.76)}
.sp-cursor svg{width:100%;height:100%;fill:#fff;stroke:#15181a;stroke-width:1.1;stroke-linejoin:round}
.sp-ripple{
  position:absolute;left:0;top:0;z-index:8;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;border:2px solid #4285f4;background:rgba(66,133,244,.16);
  opacity:0;pointer-events:none;transform:scale(.2);
}
.sp-ripple.is-on{animation:spRipple .55s ease-out}
@keyframes spRipple{
  0%{opacity:.95;transform:scale(.22)}
  100%{opacity:0;transform:scale(1.6)}
}

/* ---------- мини-браузер: пять блоков собираются снизу ---------- */
.sp-load{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:10px;padding:12px 14px;
}
.sp-browser{
  position:relative;flex:none;height:88%;width:auto;aspect-ratio:10/13;
  display:flex;flex-direction:column;overflow:hidden;border-radius:7px;
  border:1px solid rgba(255,255,255,.13);background:#f3ede2;
  box-shadow:0 24px 44px -20px rgba(0,0,0,.9),inset 0 2px 0 rgba(255,255,255,.06);
}
.sp-chrome{
  flex:none;display:flex;align-items:center;gap:6px;height:22px;padding:0 7px;
  background:#191d1f;border-bottom:1px solid rgba(0,0,0,.35);color:rgba(255,255,255,.55);
}
.sp-dots{display:flex;gap:3px;flex:none}
.sp-dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.25)}
.sp-url{
  flex:1;min-width:0;display:flex;align-items:center;gap:4px;height:12px;padding:0 6px;
  border-radius:4px;background:rgba(255,255,255,.08);font-size:6.5px;letter-spacing:.02em;
  color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;
}
.sp-url svg{width:6px;height:6px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2}
.sp-spin{
  flex:none;width:7px;height:7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);border-top-color:var(--sp-accent);
  animation:spSpin .7s linear infinite;
}
@keyframes spSpin{to{transform:rotate(360deg)}}
.sp-half.is-done .sp-spin{animation:none;border-color:var(--sp-accent);background:var(--sp-accent)}
.sp-page{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;
  padding:5px;background:#f1eadf;overflow:hidden;
}
.spb{
  position:relative;flex:none;overflow:hidden;border-radius:3px;background:#fff;
  opacity:0;transform:translate3d(0,calc(100% + 6px),0);
  transition:transform .3s ease,opacity .2s ease;
  transition-delay:0s;will-change:transform,opacity;
}
.sp-half.is-loading .spb{
  opacity:1;transform:translate3d(0,0,0);
  transition-duration:var(--sp-drop),.45s;
  transition-delay:var(--d,0s);
}
.spb:nth-child(1){flex:1.45;--d:0s;z-index:5}
.spb:nth-child(2){flex:.62;--d:.2s;z-index:4}
.spb:nth-child(3){flex:.8;--d:.4s;z-index:3}
.spb:nth-child(4){flex:.6;--d:.6s;z-index:2}
.spb:nth-child(5){flex:.48;--d:.8s;z-index:1}
.sp-half[data-tone="slow"] .spb:nth-child(1){--d:0s}
.sp-half[data-tone="slow"] .spb:nth-child(2){--d:1s}
.sp-half[data-tone="slow"] .spb:nth-child(3){--d:2s}
.sp-half[data-tone="slow"] .spb:nth-child(4){--d:3s}
.sp-half[data-tone="slow"] .spb:nth-child(5){--d:4s}

/* блок 1 — шапка, заголовок и «фото» с диваном */
.spb-hero{
  display:flex;flex-direction:column;min-height:0;padding:5px 6px;color:#2a2118;
  background:linear-gradient(160deg,#f7f1e5,#e7dbc6);
}
.spb-nav{display:flex;align-items:center;gap:4px;flex:none;color:#6f6252}
.spb-logo{
  display:flex;align-items:center;gap:2px;margin-right:auto;
  font-size:5px;font-weight:800;letter-spacing:.08em;color:#2a2118;
}
.spb-logo svg{width:6px;height:6px;fill:none;stroke:#7a5c35;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spb-nav > i{width:10px;height:2px;border-radius:1px;background:rgba(66,52,36,.18)}
.spb-h{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;flex:none;margin-top:5px}
.spb-h b{font-family:var(--site-font);font-size:11px;font-weight:600;line-height:1;letter-spacing:-.02em}
.spb-h em{font-style:normal;font-size:4.5px;line-height:1.25;text-align:right;color:#7a6a55}
.spb-photo{
  flex:1;min-height:0;display:grid;place-items:center;margin-top:5px;overflow:hidden;
  border-radius:3px;color:#3a2b1c;
  background:radial-gradient(80% 95% at 50% 18%,#dcc7a6,#b8936a);
}
.spb-sofa{width:72%;height:auto;opacity:.9;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* блок 2 — текст о мастерской */
.spb-text{display:flex;flex-direction:column;gap:3px;padding:5px 6px;background:#fbf7ee;color:#2c241b}
.spb-eyebrow{font-size:4px;letter-spacing:.18em;text-transform:uppercase;color:#a4743e}
.spb-title{font-size:6.2px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.spb-text > i{display:block;height:2px;border-radius:1px;background:#ded4c4;width:var(--w,80%)}

/* блок 3 — три категории */
.spb-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:transparent}
.spb-cat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:3px;border:1px solid #d8c9b0;background:#e8ddca;color:#5b472f;
}
.spb-cat svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spb-cat b{font-size:4.2px;font-weight:600}

/* блок 4 — срок производства */
.spb-band{
  display:flex;align-items:center;gap:6px;padding:5px 6px;color:#f6efe3;
  background:linear-gradient(115deg,#31271d,#4b3a28);
}
.spb-num{display:flex;align-items:center;gap:3px}
.spb-num b{font-family:var(--site-font);font-size:13px;font-weight:600;line-height:.9;color:#f5e9d2}
.spb-num em{
  font-style:normal;font-size:3.8px;line-height:1.25;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(246,239,227,.55);
}
.spb-lines{margin-left:auto;display:flex;flex-direction:column;gap:2px;width:34%}
.spb-lines i{height:2px;border-radius:1px;background:rgba(246,239,227,.24);width:var(--w,60%)}

/* блок 5 — подвал с кнопкой */
.spb-foot{display:flex;align-items:center;gap:5px;padding:4px 5px;background:#211a12;color:#f6efe3}
.spb-cta{
  display:inline-flex;align-items:center;height:9px;padding:0 6px;border-radius:999px;
  background:#fff;color:#141414;font-size:4.2px;font-weight:800;
  letter-spacing:.02em;white-space:nowrap;
}
.spb-tel{margin-left:auto;font-size:4px;color:rgba(246,239,227,.5);white-space:nowrap}

/* ---------- график загрузки ---------- */
.sp-meter{
  flex:none;width:31%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;
}
.sp-half.is-loading .sp-meter{opacity:1;transform:none}
.sp-gauge{position:relative;width:min(100%,96px);aspect-ratio:1}
.sp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-track,.sp-fill{fill:none;stroke-width:8;stroke-linecap:round;transform:rotate(135deg);transform-origin:50% 50%}
.sp-track{stroke:rgba(255,255,255,.09);stroke-dasharray:377 503}
.sp-fill{
  stroke:var(--sp-accent);stroke-dasharray:377 503;stroke-dashoffset:377;
  filter:drop-shadow(0 0 7px var(--sp-glow));
}
.sp-ticks{
  position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.2) 0 .7deg,transparent .7deg 6deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 58%,#000 59% 64%,transparent 65%);
  mask-image:radial-gradient(circle,transparent 0 58%,#000 59% 64%,transparent 65%);
}
.sp-read{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;padding-top:2%}
.sp-num{font-size:clamp(17px,2vw,26px);font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff}
.sp-read em{font-size:6.5px;font-style:normal;letter-spacing:.08em;color:rgba(255,255,255,.45);padding-top:4px}
.sp-verdict{
  display:flex;align-items:center;gap:4px;
  font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sp-accent);opacity:0;transition:opacity .3s ease .15s;
}
.sp-verdict::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 8px var(--sp-accent)}
.sp-half.is-done .sp-verdict{opacity:1}

/* широкий экран: две половины рядом и вертикальная композиция внутри */
@container (min-width:470px){
  .sp-split{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
  .sp-half + .sp-half{border-top:0;border-left:1px solid rgba(255,255,255,.075)}
  .sp-search{padding:18px}
  .sp-core{max-width:340px}
  .sp-engines{margin-bottom:17px}
  .sp-google{font-size:23px}
  .sp-yandex{font-size:18px}
  .sp-field{height:44px;padding:0 15px}
  .sp-q{font-size:13.5px}
  .sp-meta{font-size:8.5px;padding-bottom:6px}
  .sp-result{padding:8px 10px}
  .sp-r-site{font-size:8.5px}
  .sp-r-title{font-size:12px}
  .sp-r-desc{font-size:9px}
  .sp-load{flex-direction:column;gap:12px;padding:18px 16px}
  .sp-browser{height:auto;width:min(84%,292px)}
  .sp-meter{width:auto}
  .sp-gauge{width:100px}
}

/* ==========================================================================
   05 — АДАПТИВНОСТЬ: один сайт перестраивается на четырёх экранах
   --------------------------------------------------------------------------
   Сцена показывает настоящий сайт 3B-LAB внутри одного морфящегося
   корпуса: монитор 2K → Full HD → планшет → телефон. Скриншоты сняты
   с реальных вьюпортов 2560×1440, 1920×1080, 768×1024 и 390×844
   (img/devices). Корпус, подписи, направляющие размеров и таймлайн
   переключает js/main.js; у неактивной карточки корпус возвращается к 2K.
   ========================================================================== */
.m-stage-dev{container-type:inline-size}
.sc-dev{
  --lab-w:600px;
  background:none;
}
/* сетка-пол в перспективе — глубина «студии» */
.sc-dev::before{
  content:"";position:absolute;left:-24%;right:-24%;bottom:-32%;height:66%;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:46px 30px;
  transform:perspective(360px) rotateX(65deg);
  transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(65% 90% at 50% 100%,#000 4%,transparent 74%);
  mask-image:radial-gradient(65% 90% at 50% 100%,#000 4%,transparent 74%);
  opacity:.8;pointer-events:none;
}
.dev-aurora{
  position:absolute;left:50%;top:44%;width:78%;aspect-ratio:1.35;z-index:0;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.14),rgba(64,133,120,.07) 52%,transparent 76%);
  filter:blur(26px);
  animation:devAura 9s ease-in-out infinite;
}
@keyframes devAura{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}
}
/* огромный контурный логотип — фактура позади устройства */
.dev-mark{
  position:absolute;left:50%;top:47%;z-index:0;transform:translate(-50%,-50%);
  font-size:clamp(140px,24vw,270px);font-weight:900;line-height:.7;letter-spacing:-.08em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
  white-space:nowrap;pointer-events:none;user-select:none;
}
.dev-corners{position:absolute;inset:12px;z-index:2;pointer-events:none;opacity:.35}
.dev-corners i{position:absolute;width:12px;height:12px;border:0 solid rgba(255,255,255,.5)}
.dev-corners i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.dev-corners i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.dev-corners i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.dev-corners i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

/* ---------- лаборатория устройств ---------- */
.dev-lab{
  position:absolute;left:8px;right:8px;top:58px;bottom:48px;z-index:3;
  display:flex;align-items:center;justify-content:center;
}
.dev-idle{animation:devFloat 7s ease-in-out infinite alternate}
@keyframes devFloat{0%{transform:translateY(-2px)}100%{transform:translateY(3px)}}
.dev-rig{
  position:relative;display:flex;align-items:center;justify-content:center;
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.3,.85,.32,1);
}
/* планшет и телефон крупнее кадра: корпус сдвинут вниз, низ уходит за край */
.sc-dev[data-state="tablet"] .dev-rig{transform:translateY(7%)}
.sc-dev[data-state="phone"] .dev-rig{transform:translateY(20%)}
.dev-halo{
  position:absolute;left:50%;top:50%;width:130%;height:170%;z-index:-1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.1),transparent 70%);
  filter:blur(18px);pointer-events:none;
}
.dev-shell{position:relative;display:block}
/* размеры корпуса считает js/main.js от ширины и высоты сцены
   (--w-2k/--h-2k и т. д.); планшет и телефон намеренно крупнее кадра,
   чтобы низ корпуса срезался по нижнему краю сцены */
.sc-dev[data-state="2k"] .dev-frame{width:var(--w-2k,400px);height:var(--h-2k,225px);--fp:6px;--fr:12px}
.sc-dev[data-state="1080"] .dev-frame{width:var(--w-1080,340px);height:var(--h-1080,191px);--fp:5px;--fr:11px}
.sc-dev[data-state="tablet"] .dev-frame{width:var(--w-tablet,170px);height:var(--h-tablet,227px);--fp:9px;--fr:18px}
.sc-dev[data-state="phone"] .dev-frame{width:var(--w-phone,108px);height:var(--h-phone,234px);--fp:4.5px;--fr:20px}

.dev-frame{
  position:relative;z-index:2;
  padding:var(--fp,6px);border-radius:var(--fr,12px);
  background:linear-gradient(150deg,#3d454d 0%,#20262c 14%,#090c0f 38%,#11161a 62%,#39424a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 28px 60px rgba(0,0,0,.68),
    0 0 50px rgba(255,255,255,.06);
  transition:
    width .5s cubic-bezier(.3,.85,.32,1),
    height .5s cubic-bezier(.3,.85,.32,1),
    padding .3s ease,border-radius .3s ease,
    box-shadow .5s cubic-bezier(.3,.85,.32,1);
}
.sc-dev.is-morph .dev-frame{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 28px 60px rgba(0,0,0,.68),
    0 0 54px rgba(255,255,255,.2);
}
.dev-screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:calc(var(--fr,12px) - var(--fp,6px) - .5px);
  background:#000;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.dev-shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.04);
  transition:opacity .3s ease,transform .5s cubic-bezier(.3,.85,.32,1);
}
.sc-dev[data-state="2k"] .dev-shot:nth-child(1),
.sc-dev[data-state="1080"] .dev-shot:nth-child(2),
.sc-dev[data-state="tablet"] .dev-shot:nth-child(3),
.sc-dev[data-state="phone"] .dev-shot:nth-child(4){opacity:1;transform:none}
/* подсказка композитору только на время морфинга — в покое лишние слои не держим */
.sc-dev.is-morph .dev-shot{will-change:opacity,transform}
/* после морфинга transitions отключены: размер фиксируется сразу и не «доезжает» */
.sc-dev.is-settle .dev-frame,
.sc-dev.is-settle .dev-rig,
.sc-dev.is-settle .dev-shot,
.sc-dev.is-settle .dev-island,
.sc-dev.is-settle .dev-homebar,
.sc-dev.is-settle .dev-cam,
.sc-dev.is-settle .dev-floor,
.sc-dev.is-settle .dev-step,
.sc-dev.is-settle .dev-step *,
.sc-dev.is-settle .dev-dim,
.sc-dev.is-settle .dev-ghost{transition:none!important}
/* габариты фиксируем сразу, а подсветку отпускаем плавно */
.sc-dev.is-settle .dev-frame{
  transition:box-shadow .5s cubic-bezier(.3,.85,.32,1)!important;
}
/* мягкий блик по стеклу */
.dev-glare{
  position:absolute;top:-30%;bottom:-30%;left:0;width:70%;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 48%,transparent);
  transform:rotate(14deg) translateX(-180%);
  animation:devGlare 7.5s ease-in-out infinite;
  pointer-events:none;mix-blend-mode:screen;
}
@keyframes devGlare{
  0%,62%{transform:rotate(14deg) translateX(-180%)}
  86%,100%{transform:rotate(14deg) translateX(280%)}
}
/* линия сканирования едет transform'ом — без layout на каждом кадре */
.dev-scan{
  position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;
  transform:translateY(0);
}
.dev-scan::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  box-shadow:0 0 18px rgba(255,255,255,.65);
}
.sc-dev.is-morph .dev-scan{animation:devScan .5s cubic-bezier(.2,.75,.25,1)}
@keyframes devScan{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:1}
  85%{opacity:.7}
  100%{transform:translateY(100%);opacity:0}
}
.dev-island{
  position:absolute;left:50%;top:2.4%;width:32%;height:3%;z-index:3;
  transform:translateX(-50%) scale(.6);border-radius:999px;
  background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.05);
  opacity:0;transition:opacity .22s ease,transform .35s cubic-bezier(.22,1,.3,1);
}
.dev-island::after{
  content:"";position:absolute;right:18%;top:50%;width:2px;height:2px;margin-top:-1px;
  border-radius:50%;background:#0e1a24;
}
.sc-dev[data-state="phone"] .dev-island{opacity:1;transform:translateX(-50%) scale(1)}
.dev-homebar{
  position:absolute;left:50%;bottom:1.6%;width:32%;height:1.8%;min-height:2px;z-index:3;
  transform:translateX(-50%);border-radius:999px;
  background:rgba(255,255,255,.62);opacity:0;transition:opacity .2s ease;
}
.sc-dev[data-state="phone"] .dev-homebar{opacity:1}
.dev-cam{
  position:absolute;left:50%;top:calc(var(--fp,6px)/2 - 1.5px);z-index:4;
  width:3px;height:3px;border-radius:50%;
  background:#0a0d10;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 4px rgba(0,0,0,.8);
  transition:opacity .2s ease;
}
.sc-dev[data-state="phone"] .dev-cam{opacity:0}
/* подсветка контура в момент морфинга */
.dev-ghost{
  position:absolute;inset:-9px;z-index:5;pointer-events:none;
  border:1px solid rgba(255,255,255,.5);border-radius:calc(var(--fr,12px) + 5px);
  opacity:0;
}
.sc-dev.is-morph .dev-ghost{animation:devGhost .48s cubic-bezier(.2,.7,.2,1)}
@keyframes devGhost{
  0%{opacity:.75;transform:scale(.985)}
  100%{opacity:0;transform:scale(1.09)}
}
.dev-floor{
  position:absolute;left:50%;top:calc(100% + var(--lab-w) * .018);
  width:72%;height:28px;z-index:0;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),transparent 72%);
  filter:blur(7px);pointer-events:none;
  transition:width .45s cubic-bezier(.3,.85,.32,1),opacity .25s ease;
}
.sc-dev[data-state="tablet"] .dev-floor,
.sc-dev[data-state="phone"] .dev-floor{width:58%;opacity:.7}

/* ---------- размерные линии ---------- */
.dev-dim{position:absolute;z-index:4;pointer-events:none;transition:opacity .2s ease}
/* высотная линия у широкого монитора упирается в край сцены — оставляем её
   только для планшета, где справа хватает места; ширину показывает линия сверху */
.sc-dev[data-state="2k"] .dev-dim-y,
.sc-dev[data-state="1080"] .dev-dim-y,
.sc-dev[data-state="phone"] .dev-dim-y{opacity:0}
.dev-dim b{
  position:absolute;display:flex;align-items:baseline;gap:4px;
  font-size:clamp(15px,3.9cqi,28px);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dev-dim b i{
  font-style:normal;font-size:.46em;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.55);
}
.dev-dim-x b{left:50%;bottom:calc(100% + 7px);transform:translateX(-50%)}
.dev-dim-y b{top:50%;left:8px;transform:translateY(-50%);font-size:clamp(11px,3cqi,21px)}
.dev-dim-x{
  left:0;right:0;top:-20px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.5) 16%,rgba(255,255,255,.5) 84%,rgba(255,255,255,.12));
}
.dev-dim-x::before,.dev-dim-x::after{
  content:"";position:absolute;top:-4px;width:1px;height:9px;background:rgba(255,255,255,.5);
}
.dev-dim-x::before{left:0}
.dev-dim-x::after{right:0}
.dev-dim-y{
  top:0;bottom:0;right:-20px;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.5) 16%,rgba(255,255,255,.5) 84%,rgba(255,255,255,.12));
}
.dev-dim-y::before,.dev-dim-y::after{
  content:"";position:absolute;left:-4px;width:9px;height:1px;background:rgba(255,255,255,.5);
}
.dev-dim-y::before{top:0}
.dev-dim-y::after{bottom:0}
.sc-dev.is-morph .dev-dim b{animation:devDim .4s ease}
@keyframes devDim{0%{opacity:.25}100%{opacity:1}}

/* ---------- таймлайн разрешений ---------- */
.dev-steps{
  position:absolute;left:20px;right:18px;bottom:15px;z-index:6;
  display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none;
}
/* затемнение под таймлайном: телефон уходит под него обрезанным */
.dev-steps::before{
  content:"";position:absolute;left:-20px;right:-18px;top:-52px;bottom:-15px;z-index:-1;
  background:linear-gradient(180deg,rgba(5,7,10,0),rgba(5,7,10,.55) 48%,rgba(5,7,10,.94) 100%);
}
.dev-step{
  position:relative;display:flex;align-items:baseline;gap:6px;min-width:0;
  padding-top:12px;color:rgba(255,255,255,.85);
  transition:color .2s ease;
}
.dev-step .bar{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.dev-step .bar i{
  display:block;height:100%;width:100%;background:var(--lime);
  box-shadow:0 0 8px rgba(255,255,255,.7);
  transform:scaleX(0);transform-origin:0 50%;
}
@keyframes devBar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.dev-step::before{
  content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.22);box-shadow:0 0 0 2px #06090b;
  transition:background .2s ease,box-shadow .2s ease;
}
.dev-step b{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s ease;
}
.dev-step em{
  font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.72);transition:color .2s ease;
}
/* узкая сцена: подписи компактнее, высотная линия не влезает в кадр */
@container (max-width:430px){
  .dev-dim-y{display:none}
  .dev-step{gap:5px}
  .dev-step b{font-size:10px;letter-spacing:.06em}
  .dev-step em{font-size:9.5px}
}
.dev-step.is-on{color:#fff}
.dev-step.is-on em{color:#fff}
.dev-step.is-on::before{
  background:var(--lime);
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 12px rgba(255,255,255,.8);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width:767px){
  .m-text{padding:28px 22px 26px}
  .m-title{margin-top:16px}
  .m-rule{margin-top:20px}
  .m-desc{margin-top:16px}
  .m-stage{min-height:290px;border-left:0;border-top:1px solid rgba(255,255,255,.06)}
  .m-stage-arc{min-height:clamp(360px,58vw,430px)}
  .m-stage-dev{min-height:390px}
  .m-stage.m-stage-seo{min-height:440px}
  .m-stage.m-stage-speed{min-height:620px}
  /* сцена 05: крупнее корпус, таймлайн компактнее */
  .dev-lab{top:56px;bottom:44px;left:6px;right:6px}
  .dev-steps{left:18px;right:16px;bottom:13px}
  .dev-dim-y{display:none}
  .dev-step{padding-top:11px}
  /* постоянные эффекты на телефоне дороже морфинга — оставляем только вспышки */
  .dev-glare{display:none}
  .dev-aurora{animation:none;opacity:.72}
}

@media (min-width:768px){
  .stack-card{grid-template-columns:1.06fr .94fr;min-height:min(66vh,560px)}
  .m-text{padding:38px 38px 40px 44px}
  .m-stage{min-height:0}
}
@media (min-width:1280px){
  .m-text{padding:52px 56px 52px 64px}
  .m-desc{margin-top:22px}
}
@media (min-width:1921px){
  .m-text{padding:64px 68px 64px 84px}
}

/* Уважение к prefers-reduced-motion: показываем статичный, но осмысленный кадр */
@media (prefers-reduced-motion:reduce){
  .sc,.sc *{animation:none!important}
  /* сцена 03: сайт проверен, чек-лист закрыт, итог виден */
  .seo-band{display:none}
  .seo-site{border-color:rgba(255,255,255,.42)}
  .seo-list li{color:rgba(255,255,255,.92)}
  .seo-list li > i{background:var(--lime);border-color:var(--lime)}
  .seo-list li > i::after{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}
  .seo-list li > code{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
  .seo-result{opacity:1;transform:none}
  .wps-cursor,.wps-ripple{display:none}
  /* сцена 04: два собранных сайта и итоговые графики без движения */
  .sp-search{transform:translate3d(0,-105%,0)}
  .spb{opacity:1;transform:none}
  .sp-meter{opacity:1;transform:none}
  .sp-fill{stroke-dashoffset:0}
  .sp-verdict{opacity:1}
  .sp-cursor,.sp-ripple,.sp-spin{display:none}
}

/* ==========================================================================
   ЕДИНЫЙ ДИЗАЙН КАРТОЧЕК СТОПКИ
   --------------------------------------------------------------------------
   У всех пяти карточек один фон и одна сетка текста: контурный номер,
   вплотную к нему заголовок, светлая черта и два абзаца. Сцены справа
   и их таймлайны не меняются.
   ========================================================================== */
.manifesto-stack .stack-card{
  background:
    radial-gradient(80% 120% at 4% 112%,rgba(255,255,255,.2),transparent 56%),
    radial-gradient(60% 80% at 0% 0%,rgba(255,255,255,.06),transparent 52%),
    #090d0e;
  border-color:rgba(255,255,255,.09);
}
.manifesto-stack .m-text{background:none;text-align:left}
.manifesto-stack .m-stage,
.manifesto-stack .m-stage.m-stage-speed,
.manifesto-stack .m-stage-dev{
  background:transparent;
  border-left:0;border-top:0;
}
.manifesto-stack .m-stage::after{
  background:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.manifesto-stack .m-index{position:static;display:block;margin:0}
.manifesto-stack .m-num{
  display:block;
  font-family:var(--display);font-weight:600;
  font-size:clamp(68px,7.8vw,116px);line-height:.8;letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(255,255,255,.3);
  text-stroke:1.2px rgba(255,255,255,.3);
}
.manifesto-stack .m-title{
  margin-top:10px;max-width:16ch;
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,3.4vw,48px);line-height:1.04;letter-spacing:-.04em;
  color:#fff;
}
.manifesto-stack .m-rule{width:56px;height:2px;margin-top:20px;background:var(--lime)}
.manifesto-stack .m-copy{margin-top:18px;max-width:none}
.manifesto-stack .m-desc{
  margin:0;max-width:none;
  font-size:14.5px;line-height:1.58;color:rgba(255,255,255,.66);
  break-inside:avoid;
}
.manifesto-stack .m-desc + .m-desc{margin-top:12px}

@media (min-width:768px){
  .manifesto-stack .m-text{padding:38px 38px 40px 44px}
}
@media (min-width:1280px){
  .manifesto-stack .m-text{padding:52px 56px 52px 64px}
  .manifesto-stack .m-copy{columns:2;column-gap:34px}
  .manifesto-stack .m-desc + .m-desc{margin-top:0}
}
@media (min-width:1921px){
  .manifesto-stack .m-text{padding:64px 68px 64px 84px}
}

/* ==========================================================================
   06 — МЕТРИКА: отчёт Метрики слева, запись вебвизора справа
   --------------------------------------------------------------------------
   Слева — отчёт как в Яндекс.Метрике: период, метрика, график визитов по
   дням (линия рисуется по SVG-пути), точка с подсказкой, источники трафика.
   Справа — видеозапись визита: интерфейс записи (REC, таймкод, уголки кадра,
   скан-полоса, зерно) и внутри — настоящий демо-сайт «Лесная Гавань» из
   partials/wp-demo-site.php (тот же .forest-rental-demo, что в .wsb-scroll
   демо-блока админки), вписанный по ширине окна: макет 1280px масштабируется
   коэффициентом --mt-frk (его считает js/main.js).
   Там же — курсор гостя: точку клика по кнопке брони также считает js/main.js
   (блок «Манифест 06»), под записью — крупная подпись посетителя.
   Весь таймлайн — CSS; пауза вне экрана — общее правило .sc выше.
   ========================================================================== */
.m-stage.m-stage-mt{min-height:540px;container-type:inline-size;background:#06080a}
.m-stage.m-stage-mt::after{display:none}
.sc-mt{display:flex;min-height:0;padding:clamp(12px,2.2cqw,22px)}
.mt-wrap{
  display:grid;width:100%;height:100%;min-height:0;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(8px,1.4cqw,14px);
}

/* ---------- общая рамка панелей ---------- */
.mt-rep,.mt-vid{
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
  border-radius:14px;padding:clamp(9px,1.5cqw,14px);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),#0a0e11;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ======================== левая панель: отчёт Метрики ==================== */
.mt-rep-head{display:flex;align-items:center;gap:6px}
.mt-rep-logo{
  display:grid;place-items:center;flex:none;width:15px;height:15px;border-radius:4px;
  background:#fc3f1d;color:#fff;font-size:9px;font-weight:800;line-height:1;
}
.mt-rep-name{
  min-width:0;font-size:9.5px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mt-rep-live{
  display:inline-flex;align-items:center;gap:3px;flex:none;margin-left:auto;
  font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);
}
.mt-rep-live i{
  width:4px;height:4px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 7px rgba(255,255,255,.9);animation:mtDot 2.4s ease-in-out infinite;
}
@keyframes mtDot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.mt-rep-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:8.5px;color:rgba(255,255,255,.42)}
.mt-rep-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-rep-meta span:last-child{margin-left:auto;flex:none;color:rgba(255,255,255,.3)}

.mt-rep-sum{display:flex;align-items:baseline;gap:7px;margin-top:8px;flex-wrap:wrap}
.mt-rep-num{
  font-family:var(--display);font-size:clamp(22px,3.4cqw,32px);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
}
.mt-rep-cap{font-size:8.5px;line-height:1.2;color:rgba(255,255,255,.45)}
.mt-rep-delta{
  margin-left:auto;flex:none;font-style:normal;font-size:8.5px;font-weight:700;
  color:var(--lime);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  border-radius:999px;padding:1px 5px;
}

/* переключатель метрик */
.mt-rep-tabs{display:flex;gap:9px;margin-top:9px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.08)}
.mt-rep-tabs span{position:relative;font-size:8.5px;font-weight:600;color:rgba(255,255,255,.4);white-space:nowrap}
.mt-rep-tabs span.is-on{color:#fff}
.mt-rep-tabs span.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;
  background:var(--lime);transform-origin:0 50%;animation:mtRepTab 9.5s ease-in-out infinite;
}
@keyframes mtRepTab{0%,6%{transform:scaleX(0)}22%,100%{transform:scaleX(1)}}

/* график по дням */
.mt-rep-chart{position:relative;display:flex;flex-direction:column;flex:1;min-height:96px;margin-top:10px;padding-left:19px}
.mt-rep-y{
  position:absolute;left:0;top:0;bottom:16px;width:16px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-size:7px;line-height:1;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums;
}
.mt-rep-y i{font-style:normal}
.mt-rep-plot{position:relative;flex:1;min-height:70px;animation:mtRepLoop 9.5s linear infinite}
.mt-rep-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mt-rep-grid line{stroke:rgba(255,255,255,.09);stroke-width:1;stroke-dasharray:2 3}
.mt-rep-area{fill:url(#mtRepFill);opacity:0;animation:mtRepFill 9.5s ease-out infinite}
.mt-rep-line{
  fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.45));
  animation:mtRepLine 9.5s cubic-bezier(.4,0,.2,1) infinite;
}
.mt-rep-mark{
  position:absolute;left:50%;top:21%;width:1px;height:79%;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));
  animation:mtRepMark 9.5s ease-out infinite;
}
.mt-rep-mark::before{
  content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(255,255,255,.16),0 0 12px rgba(255,255,255,.8);
}
.mt-rep-tip{
  position:absolute;left:50%;top:21%;transform:translate(-50%,-135%);
  padding:3px 6px;border-radius:5px;background:#fff;color:#141414;
  font-size:8px;font-weight:800;line-height:1.25;white-space:nowrap;opacity:0;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.85);
  animation:mtRepTip 9.5s ease-out infinite;
}
.mt-rep-tip em{display:block;font-style:normal;font-weight:600;opacity:.62}
.mt-rep-x{
  display:flex;justify-content:space-between;margin-top:5px;
  font-size:7px;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums;
}
.mt-rep-x i{font-style:normal}

/* источники трафика */
.mt-rep-src{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}
.mt-rep-src-head{display:flex;justify-content:space-between;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.mt-rep-src-head em{font-style:normal;font-weight:600;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.28)}
.mt-rep-src ul{display:flex;flex-direction:column;gap:6px;margin:7px 0 0;padding:0;list-style:none}
.mt-rep-src li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;font-size:8.5px}
.mt-rep-src li b{min-width:0;font-weight:600;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-rep-src li em{font-style:normal;color:#fff;font-variant-numeric:tabular-nums}
.mt-rep-src li i{grid-column:1/-1;display:block;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.08)}
.mt-rep-src li i::after{
  content:"";display:block;height:100%;width:var(--w,40%);border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.5),#fff);
  transform-origin:0 50%;animation:mtRepBar 9.5s ease-out infinite;
}
@keyframes mtRepBar{0%,40%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}

@keyframes mtRepLoop{0%{opacity:0}4%{opacity:1}93%{opacity:1}99%,100%{opacity:0}}
@keyframes mtRepLine{0%,4%{stroke-dashoffset:1}34%,100%{stroke-dashoffset:0}}
@keyframes mtRepFill{0%,4%{opacity:0}34%{opacity:1}93%{opacity:.9}99%,100%{opacity:0}}
@keyframes mtRepMark{0%,36%{opacity:0}40%{opacity:1}92%{opacity:1}99%,100%{opacity:0}}
@keyframes mtRepTip{
  0%,38%{opacity:0;transform:translate(-50%,-100%)}
  44%{opacity:1;transform:translate(-50%,-135%)}
  92%{opacity:1;transform:translate(-50%,-135%)}
  99%,100%{opacity:0;transform:translate(-50%,-135%)}
}

/* ======================== правая панель: запись визита ==================== */
.mt-vid-bar{display:flex;align-items:center;gap:6px}
.mt-vid-rec{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ff6a5c;
}
.mt-vid-rec i{
  width:5px;height:5px;border-radius:50%;background:#ff4d3d;
  box-shadow:0 0 8px rgba(255,77,61,.9);animation:mtRec 1.4s steps(1,end) infinite;
}
@keyframes mtRec{0%,60%{opacity:1}61%,100%{opacity:.15}}
.mt-vid-tc{
  flex:none;padding:0 4px;border:1px solid rgba(255,255,255,.14);border-radius:4px;
  font-size:8.5px;font-weight:700;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
}
.mt-vid-url{margin-left:auto;min-width:0;font-size:8.5px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mt-view{
  position:relative;flex:1;min-height:0;margin-top:8px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#F4F1E8;
}

/* --- копия демо-сайта «Лесная Гавань» (та же разметка, что в .wsb-scroll) --- */
.mt-fr-site{position:absolute;inset:0;overflow:hidden;background:#F4F1E8}
.mt-fr-site .wp-chrome{display:none}
.mt-fr-scroll{position:absolute;inset:0;overflow:hidden}
.mt-fr-scroll .mt-fr-desktop{
  width:1280px;transform-origin:0 0;will-change:transform;
  transform:scale(var(--mt-frk,.28)) translateY(0);
  animation:mtFrScroll 9.5s ease-in-out infinite;
}
@keyframes mtFrScroll{
  0%,32%{transform:scale(var(--mt-frk,.28)) translateY(0)}
  62%{transform:scale(var(--mt-frk,.28)) translateY(-18%)}
  78%{transform:scale(var(--mt-frk,.28)) translateY(-40%)}
  90%{transform:scale(var(--mt-frk,.28)) translateY(-16%)}
  100%{transform:scale(var(--mt-frk,.28)) translateY(0)}
}

/* --- эффект видео: скан-полоса, зерно, уголки кадра --- */
.mt-scan{
  position:absolute;left:0;right:0;top:-30%;height:26%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.13),rgba(255,255,255,0));
  animation:mtScan 9.5s linear infinite;
}
@keyframes mtScan{0%{transform:translateY(-20%)}100%{transform:translateY(520%)}}
.mt-grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:
    radial-gradient(rgba(0,0,0,.55) .5px,transparent .6px),
    radial-gradient(rgba(255,255,255,.65) .5px,transparent .6px);
  background-size:3px 3px,4px 4px;background-position:0 0,1px 2px;
  animation:mtGrain 1.2s steps(3,end) infinite;
}
@keyframes mtGrain{
  0%{background-position:0 0,1px 2px}
  33%{background-position:2px 1px,0 0}
  66%{background-position:1px 2px,2px 1px}
  100%{background-position:0 0,1px 2px}
}
.mt-corners{position:absolute;inset:6px;z-index:5;pointer-events:none}
.mt-corners i{position:absolute;width:9px;height:9px;border:1.5px solid rgba(255,255,255,.8)}
.mt-corners i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:2px 0 0 0}
.mt-corners i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 2px 0 0}
.mt-corners i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 2px}
.mt-corners i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 2px 0}

/* клик гостя по кнопке брони — по измеренной точке */
.mt-click{
  position:absolute;left:var(--mt-cta-x,30%);top:var(--mt-cta-y,42%);z-index:7;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.95);opacity:0;transform:scale(.25);
  animation:mtClick 9.5s ease-out infinite;
}
@keyframes mtClick{
  0%,28%{opacity:0;transform:scale(.25)}
  32%{opacity:.95;transform:scale(.5)}
  48%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(.25)}
}

/* курсор посетителя: путь — в таймлайне, точка клика — из js/main.js */
.mt-cursor{
  position:absolute;left:74%;top:74%;z-index:7;width:13px;height:13px;pointer-events:none;
  transform:translate(-2px,-2px);filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
  animation:mtCursor 9.5s cubic-bezier(.45,0,.35,1) infinite;
}
.mt-cursor svg{display:block;width:100%;height:100%;fill:#fff;stroke:#141414;stroke-width:1.2}
@keyframes mtCursor{
  0%,3%{left:74%;top:74%;opacity:0}
  7%{left:74%;top:74%;opacity:1}
  20%{left:var(--mt-cta-x,30%);top:var(--mt-cta-y,42%)}
  28%{left:var(--mt-cta-x,30%);top:var(--mt-cta-y,42%)}
  42%{left:66%;top:64%}
  50%{left:66%;top:64%}
  62%{left:40%;top:78%}
  70%{left:40%;top:78%}
  84%{left:78%;top:24%}
  92%{left:78%;top:24%;opacity:1}
  100%{left:74%;top:74%;opacity:0}
}

/* подпись посетителя — крупно под записью */
.mt-who{
  margin-top:8px;font-size:clamp(11px,2.4cqw,17px);font-weight:800;line-height:1.15;
  letter-spacing:-.015em;color:#fff;
}

/* плеер записи */
.mt-player{display:flex;align-items:center;gap:clamp(5px,1.2cqw,9px);margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.mt-play{
  display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 12px rgba(255,255,255,.4);
}
.mt-play svg{display:block;width:7px;height:7px;margin-left:1px;fill:#141414}
.mt-progress{position:relative;flex:1;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.14)}
.mt-progress i{
  position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(.42);
  background:linear-gradient(90deg,rgba(255,255,255,.5),#fff);
  animation:mtPlay 9.5s linear infinite;
}
@keyframes mtPlay{0%{transform:scaleX(.06)}100%{transform:scaleX(1)}}
.mt-time{flex:none;font-size:8.5px;font-weight:700;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;white-space:nowrap}
.mt-time em{font-style:normal;color:rgba(255,255,255,.36)}
.mt-speed{flex:none;font-size:8px;font-weight:700;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:1px 4px}

/* узкая сцена: отчёт сверху, запись снизу */
@container (max-width:470px){
  .mt-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.92fr) minmax(0,1.08fr);gap:10px}
  .mt-rep-src{display:none}
  .mt-rep-chart{min-height:64px}
  .mt-rep-name{font-size:8.5px;letter-spacing:.02em}
  .mt-rep-tabs span{font-size:8px}
  .mt-rep-tabs{gap:7px}
  .mt-rep,.mt-vid{padding:10px}
  .mt-who{font-size:12px}
}
@media (max-width:767px){
  .m-stage.m-stage-mt{min-height:600px}
}

/* уважение к prefers-reduced-motion: статичный, но осмысленный кадр */
@media (prefers-reduced-motion:reduce){
  .mt-rep-plot{opacity:1}
  .mt-rep-line{stroke-dashoffset:0}
  .mt-rep-area{opacity:1}
  .mt-rep-mark{opacity:1}
  .mt-rep-tip{opacity:1;transform:translate(-50%,-135%)}
  .mt-rep-src li i::after{transform:scaleX(1)}
  .mt-cursor,.mt-click,.mt-scan,.mt-grain{display:none}
  .mt-fr-scroll .mt-fr-desktop{transform:scale(var(--mt-frk,.28)) translateY(0)}
}