/* ============================================================
   EFIMOV GROUP — визуальный мир «Шильдик»
   Каждый значимый объект — пластина, посаженная в основание.
   Один источник света сверху слева. Красный — гравировка, не заливка.
   ============================================================ */

/* ---------- гарнитуры ----------
   Geologica: переменная, ось SHRP (резкость реза) — терминалы рубленые.
   Моно — только измеренные величины: цифры, метки, таймкоды. */
@font-face{font-family:Geologica;src:url(../fonts/geologica-cyrillic.woff2) format('woff2-variations');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Geologica;src:url(../fonts/geologica-latin.woff2) format('woff2-variations');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+20B4,U+2122,U+2212}
@font-face{font-family:Mono;src:url(../fonts/mono-cyrillic.woff2) format('woff2');
  font-weight:500;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Mono;src:url(../fonts/mono-latin.woff2) format('woff2');
  font-weight:500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+2000-206F,U+2122,U+2212}

/* ---------- регистрируемые свойства: анимируемый свет ---------- */
@property --sweep{syntax:'<percentage>';inherits:true;initial-value:-40%}
@property --wipe {syntax:'<percentage>';inherits:false;initial-value:100%}
@property --lead {syntax:'<number>';   inherits:false;initial-value:0}

:root{
  /* зерно шлифовки: фотографическая плитка 384px, зеркальная — бесшовна
     по построению. Исходник сгенерирован Nano Banana 2; запечённый свет
     с него снят, остался только материал, свет по-прежнему даёт CSS.
     impeccable прямо запрещает изображать названную фактуру (шлифованный
     металл) средствами CSS — градиент даёт свет, но не даёт материал. */
  --grain:image-set(url(../img/grain.webp) type("image/webp"), url(../img/grain.png) type("image/png"));
  --grain-size:384px 384px;

  /* основание и металл */
  --void:#0A0B0C;
  --plate:#15171A;--face-hi:#24272C;
  --plate-hi:#1F2227;
  --plate-lo:#0F1113;
  --sunk:#0C0D0F;

  /* световой закон: ключ сверху слева */
  --edge-lit:rgba(255,255,255,.17);
  --edge-mid:rgba(255,255,255,.045);
  --edge-dim:rgba(0,0,0,.62);

  /* лист (светлые секции) */
  --sheet:#EFEDE8;
  --sheet-2:#E2DFD8;
  --sheet-3:#CFCBC2;

  /* краска */
  --red:#E01F26;
  --red-lit:#FF5B60;      /* красный как текст на тёмном — проходит AA */
  --red-deep:#7E1015;     /* дно гравировки */

  /* чернила */
  --ink-hi:#F0EEE9;
  --ink:#C3C6CC;
  --ink-lo:#9498A0;
  --on-sheet:#14161A;
  --on-sheet-lo:#4E525A;

  /* гарнитуры */
  --f:Geologica,'Segoe UI',Roboto,sans-serif;
  --m:Mono,ui-monospace,monospace;

  /* шкала: шесть ступеней, не три */
  --t-data:12px;
  --t-sm:clamp(14px,.92vw,15px);
  --t-body:clamp(16px,1.06vw,17.5px);
  --t-lead:clamp(19px,1.5vw,23px);
  --t-head:clamp(27px,3.15vw,46px);
  --t-disp:clamp(34px,4.55vw,70px);

  /* фаска: три роли, не двадцать */
  --ch-plate:30px;
  --ch-key:14px;

  --pad:clamp(20px,5vw,72px);
  --gap:clamp(64px,8.2vw,132px);
  --rule:rgba(240,238,233,.10);
  --rule-sheet:rgba(20,22,26,.14);
}

/* ============================================================
   БАЗА
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--f);font-size:var(--t-body);line-height:1.6;
  font-variation-settings:'SHRP' 22,'wght' 400;
  background:var(--void);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  /* зерно фрезеровки: анизотропный штрих, а не градиентные обои */
  background-image:
    repeating-linear-gradient(101deg,rgba(255,255,255,.011) 0 1px,transparent 1px 3px),
    radial-gradient(150% 90% at 12% -10%,rgba(255,255,255,.035),transparent 58%);
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
[id]{scroll-margin-top:96px}

/* поверхности браузера — тоже наш дизайн */
::selection{background:var(--red);color:#fff;text-shadow:none}
:focus-visible{outline:2px solid var(--red-lit);outline-offset:4px;border-radius:1px}
/* color-scheme говорит браузеру, что страница тёмная: без него нативные
   элементы — вложенные скроллбары, выпадающие списки, поля — рисуются
   в светлой схеме и выбиваются из палитры. */
html{color-scheme:dark;accent-color:var(--red);
  scrollbar-color:#2A2E34 var(--void);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:#2A2E34;border:3px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:#3B4048}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:12px;top:12px;z-index:120;background:var(--red);color:#fff;padding:12px 18px}

/* ============================================================
   ПЛАСТИНА — несущий элемент мира
   Внешний слой = кромка, ::before = лицо. Фаска проходит через обе,
   поэтому световая кромка идёт и по срезу, а не обрывается на нём.
   ============================================================ */
.plate{
  --ch:var(--ch-plate);
  position:relative;isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  background:linear-gradient(154deg,var(--edge-lit) 0%,var(--edge-mid) 26%,var(--edge-dim) 100%);
  box-shadow:0 30px 52px -30px rgba(0,0,0,.96),0 4px 12px -6px rgba(0,0,0,.7);
}
.plate::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch) + 1.6px),calc(100% - var(--ch) + 1.6px) 100%,0 100%);
  background:
    var(--grain),
    linear-gradient(168deg,var(--plate-hi) 0%,var(--plate) 46%,var(--plate-lo) 100%);
  background-size:var(--grain-size),auto;
  background-blend-mode:soft-light,normal;
}
.plate--sheet::before{
  /* Вуаль поверх зерна: soft-light на светлом уводил лист в серость
     (#EBE9E3 -> #D8D6D1). Вуаль возвращает тон и вдвое смягчает зерно. */
  background:
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
    var(--grain),
    linear-gradient(168deg,#FFFEFB 0%,var(--sheet) 48%,var(--sheet-2) 100%);
  background-size:auto,var(--grain-size),auto;
  background-blend-mode:normal,soft-light,normal;
}
.plate--sheet{
  background:linear-gradient(154deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.3) 24%,rgba(20,22,26,.32) 100%);
  box-shadow:0 26px 44px -28px rgba(20,22,26,.42),0 3px 10px -6px rgba(20,22,26,.28);
  color:var(--on-sheet);
}
.plate--sunk{background:linear-gradient(154deg,var(--edge-dim) 0%,rgba(0,0,0,.3) 40%,var(--edge-lit) 100%)}
.plate--sunk::before{background:linear-gradient(168deg,var(--sunk),var(--sunk))}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */
.disp{
  font-size:var(--t-disp);line-height:1.02;letter-spacing:-.035em;
  font-variation-settings:'SHRP' 78,'wght' 600;
  color:var(--ink-hi);text-wrap:balance;
  /* гравировка: свет сверху, тень снизу — по общему закону света */
  text-shadow:0 1px 0 rgba(255,255,255,.10),0 -1px 0 rgba(0,0,0,.85);
}
.head{
  font-size:var(--t-head);line-height:1.06;letter-spacing:-.028em;
  font-variation-settings:'SHRP' 70,'wght' 600;
  color:var(--ink-hi);max-width:20ch;text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 -1px 0 rgba(0,0,0,.7);
}
.sheet .head,.plate--sheet .head{color:var(--on-sheet);
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(20,22,26,.14)}
.sub{font-size:var(--t-lead);line-height:1.45;color:var(--ink);max-width:46ch;
  font-variation-settings:'SHRP' 30,'wght' 380}
.mut{color:var(--ink-lo)}
.sheet .mut{color:var(--on-sheet-lo)}
p{max-width:68ch}
b,strong{font-variation-settings:'SHRP' 46,'wght' 620}

/* моно — только измеренное */
.data{font-family:var(--m);font-size:var(--t-data);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-lo);
  line-height:1.6;font-variant-numeric:tabular-nums}
/* Капслок читается на метке в два слова и утомляет на строке в сорок знаков.
   Длинные служебные строки остаются моноширинными, но в обычном регистре. */
.data--long,.hero__foot .data,.fig__d,.name__cap,.ftr__l .data,.deck__hint,
.case > .data,.final__note{
  text-transform:none;letter-spacing:.02em;font-size:var(--t-sm)}
.sheet .data{color:var(--on-sheet-lo)}

/* выбитая цифра */
.struck{
  font-size:clamp(38px,4.6vw,68px);line-height:.92;letter-spacing:-.045em;
  font-variation-settings:'SHRP' 88,'wght' 650;
  font-variant-numeric:tabular-nums;color:var(--ink-hi);
  text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 1px rgba(0,0,0,.9);
}
.sheet .struck{color:var(--on-sheet);
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 1px rgba(20,22,26,.22)}
.struck--red{color:var(--red-lit)}
.sheet .struck--red{color:#C31A20}

/* ============================================================
   ШАПКА
   ============================================================ */
.hdr{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  gap:clamp(16px,3vw,40px);padding:13px var(--pad);
  background:linear-gradient(180deg,rgba(10,11,12,.97),rgba(10,11,12,.9));
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 14px 30px -26px #000}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink-hi);
  flex:0 0 auto;min-height:44px}
.brand__mark{width:76px;height:auto;flex:0 0 auto;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.14)) drop-shadow(0 -1px 0 rgba(0,0,0,.6))}
.brand__txt{display:flex;flex-direction:column;gap:3px;padding-left:14px;
  border-left:1px solid var(--rule)}
.brand__name{font-size:15px;font-variation-settings:'SHRP' 60,'wght' 600;
  letter-spacing:-.01em;line-height:1}
.brand__desc{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-lo);line-height:1}
.hdr__nav{display:flex;gap:clamp(12px,1.9vw,26px);margin-left:auto;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase}
.hdr__nav a{position:relative;color:var(--ink-lo);padding:14px 2px;
  transition:color .16s ease}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .18s cubic-bezier(.32,0,.24,1)}
.hdr__nav a:hover{color:var(--ink-hi)}
.hdr__nav a:hover::after{transform:scaleX(1)}

.burger{display:none;width:46px;height:46px;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;background:none;border:0;cursor:pointer;margin-left:auto}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink-hi);
  transition:transform .22s cubic-bezier(.32,0,.24,1)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

.mnav{position:fixed;left:0;right:0;top:var(--hdr-h,58px);z-index:59;
  display:flex;flex-direction:column;background:rgba(12,13,15,.985);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--rule);
  box-shadow:0 26px 46px -22px rgba(0,0,0,.95);
  /* раскрытие идёт от шапки, а не из центра: движение начинается там,
     где пользователь нажал. Выход 160 мс короче входа 200 мс. */
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .16s cubic-bezier(.3,0,.2,1),visibility 0s .16s}
.mnav.open{clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .2s cubic-bezier(.16,1,.3,1),visibility 0s}
.mnav a{padding:16px var(--pad);min-height:52px;display:flex;align-items:center;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);border-top:1px solid var(--rule)}
.mnav a:first-child{border-top:0}
.mnav a:last-child{color:var(--red-lit)}
.mnav[hidden]{display:none}
@media(max-width:1060px){.hdr__nav,.hdr .key--sm{display:none}.burger{display:flex}}
@media(min-width:1061px){.mnav{display:none!important}}
@media(max-width:560px){
  .brand__mark{width:58px}
  .brand__txt{padding-left:11px}
  .brand__name{font-size:13px}
  .brand__desc{font-size:12px;letter-spacing:.03em;white-space:nowrap}
  .hdr{gap:10px;padding-left:16px;padding-right:16px}
}

/* ============================================================
   УПРАВЛЕНИЕ — один язык на все кнопки сайта
   Первичная: фрезерованная клавиша. Вторичная: пластина без света.
   Текстовая: гравированная строка. Больше физик нет.
   ============================================================ */
.key{
  --ch:var(--ch-key);--ch2:9px;
  position:relative;display:inline-flex;align-items:center;gap:12px;
  min-height:54px;padding:0 30px;isolation:isolate;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;
  clip-path:polygon(var(--ch2) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch2));
  background:linear-gradient(154deg,rgba(255,255,255,.42),rgba(255,255,255,.06) 34%,rgba(0,0,0,.55));
  box-shadow:0 16px 28px -16px rgba(224,31,38,.5),0 4px 10px -5px rgba(0,0,0,.8);
  transition:transform .11s cubic-bezier(.3,0,.2,1),box-shadow .16s ease;
}
.key::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(calc(var(--ch2) - 1px) 0,100% 0,100% calc(100% - var(--ch) + 1.6px),calc(100% - var(--ch) + 1.6px) 100%,0 100%,0 calc(var(--ch2) - 1px));
  background:
    radial-gradient(120% 160% at var(--mx,50%) -30%,rgba(255,255,255,.34),transparent 58%),
    linear-gradient(168deg,#DA2028 0%,var(--red) 46%,#A5161B 100%);
  transition:filter .2s ease;
}
.key:hover{box-shadow:0 20px 36px -16px rgba(224,31,38,.72),0 4px 10px -5px rgba(0,0,0,.8)}
.key:hover::before{filter:brightness(1.1)}
.key:active{transform:translateY(2px);
  box-shadow:0 8px 16px -12px rgba(224,31,38,.6),0 2px 5px -3px rgba(0,0,0,.9)}
.key--sm{min-height:44px;padding:0 20px;--ch:11px;--ch2:7px}
.key__arw{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s cubic-bezier(.32,0,.24,1)}
.key:hover .key__arw{transform:translateX(4px)}

.key2{
  --ch:var(--ch-key);--ch2:9px;
  position:relative;display:inline-flex;align-items:center;gap:12px;
  min-height:54px;padding:0 28px;isolation:isolate;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-hi);white-space:nowrap;
  clip-path:polygon(var(--ch2) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch2));
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 30%,var(--edge-dim));
  transition:transform .11s cubic-bezier(.3,0,.2,1),color .16s ease}
.key2::before{content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(calc(var(--ch2) - 1px) 0,100% 0,100% calc(100% - var(--ch) + 1.6px),calc(100% - var(--ch) + 1.6px) 100%,0 100%,0 calc(var(--ch2) - 1px));
  background:var(--grain),linear-gradient(168deg,var(--face-hi),var(--plate) 52%,#0F1113);
  background-size:var(--grain-size),auto;background-blend-mode:soft-light,normal}
.key2:hover{color:#fff}
.key2:hover::before{background:linear-gradient(168deg,#2C3036,#1B1E22 52%,var(--plate))}
.key2:active{transform:translateY(2px)}
.sheet .key2{color:var(--on-sheet);
  background:linear-gradient(154deg,rgba(255,255,255,.9),rgba(255,255,255,.2) 30%,rgba(20,22,26,.38))}
.sheet .key2::before{background:linear-gradient(168deg,#FFFEFB,#E9E7E1 52%,#DAD7D0)}

.line{
  position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-lo);transition:color .18s ease}
.line::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;
  background:currentColor;opacity:.4;transform-origin:left;
  transition:transform .22s cubic-bezier(.32,0,.24,1),opacity .18s ease}
.line:hover{color:var(--red-lit)}
.line:hover::after{opacity:1;transform:scaleX(1.04)}
.sheet .line{color:var(--on-sheet-lo)}
.sheet .line:hover{color:#C31A20}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.sec{padding:var(--gap) 0;position:relative}
.sheet{background:var(--sheet);color:var(--on-sheet);
  background-image:
    repeating-linear-gradient(101deg,rgba(20,22,26,.014) 0 1px,transparent 1px 3px),
    radial-gradient(140% 80% at 10% -8%,rgba(255,255,255,.9),transparent 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,22,26,.12)}
.sheet p{color:var(--on-sheet-lo)}
.sec__hd{max-width:52ch}
.sec__note{margin-top:18px;font-size:var(--t-lead);line-height:1.45;max-width:54ch;
  font-variation-settings:'SHRP' 30,'wght' 380}

/* ---------- первый экран ---------- */
.hero{position:relative;overflow:hidden;
  padding:clamp(40px,5vw,84px) 0 clamp(18px,2.2vw,34px)}
.hero__in{max-width:1280px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.hero__top{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(28px,4vw,72px);align-items:end}
.hero__h{margin:0;max-width:19ch}
.hero__h .ln{display:block}
.hero__h .ln--2{color:var(--ink-lo);
  text-shadow:0 1px 0 rgba(255,255,255,.06),0 -1px 0 rgba(0,0,0,.7)}
.hero__sub{margin-top:22px;max-width:52ch}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:28px}
.hero__aside{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}
.hero__badge{display:flex;flex-direction:column;gap:6px;padding:18px 20px}
.hero__badge .struck{font-size:clamp(30px,3vw,44px)}
.hero__foot{margin-top:clamp(30px,3.6vw,50px);padding-top:20px;border-top:1px solid var(--rule)}
.dirs-top{padding-top:clamp(16px,2vw,30px);padding-bottom:clamp(48px,6vw,92px)}
@media(max-width:980px){.hero__top{grid-template-columns:1fr}.hero__aside{flex-direction:row;flex-wrap:wrap}
  .hero__badge{flex:1 1 200px}}

/* три пластины направлений */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px);
  margin-top:clamp(34px,4vw,58px)}
.card{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);
  min-height:280px;transition:transform .28s cubic-bezier(.32,0,.24,1)}
.card:hover{transform:translateY(-3px)}
.card__n{font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.14em;
  color:var(--red-lit)}
.card__h{display:block;font-size:var(--t-lead);line-height:1.14;letter-spacing:-.022em;
  font-variation-settings:'SHRP' 68,'wght' 600;color:var(--ink-hi);margin-top:16px}
.card__h .ln{display:block}
.card__p{margin-top:14px;font-size:var(--t-body);line-height:1.55;color:var(--ink-lo);max-width:34ch}
.card__go{margin-top:auto;padding-top:26px}
@media(max-width:920px){.cards{grid-template-columns:1fr}.card{min-height:0}}

/* ---------- выбитые цифры: тихая широкая полоса по металлу ---------- */
.band{padding:clamp(52px,6vw,96px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background-image:linear-gradient(180deg,rgba(255,255,255,.028),transparent 34%)}
.figs{display:grid;grid-template-columns:repeat(6,1fr);
  gap:0;margin-top:clamp(34px,4vw,58px);list-style:none}
.fig{position:relative;padding:clamp(16px,1.8vw,26px) clamp(14px,1.5vw,22px) 0 0;
  display:flex;flex-direction:column;gap:4px}
.fig + .fig{padding-left:clamp(14px,1.5vw,22px)}
.fig + .fig::before{content:"";position:absolute;left:0;top:clamp(16px,1.8vw,26px);bottom:6px;
  width:1px;background:var(--rule);box-shadow:1px 0 0 rgba(0,0,0,.5)}
.fig .struck{font-size:clamp(28px,2.9vw,46px)}
.fig__u{font-size:var(--t-sm);font-variation-settings:'SHRP' 50,'wght' 600;
  letter-spacing:-.008em;margin-top:6px;color:var(--ink-hi)}
.fig__d{margin-top:3px;letter-spacing:.02em;line-height:1.5;font-size:var(--t-sm)}
@media(max-width:1100px){.figs{grid-template-columns:repeat(3,1fr);row-gap:clamp(20px,3vw,34px)}
  .fig:nth-child(3n+1){padding-left:0}
  .fig:nth-child(3n+1)::before{display:none}}
@media(max-width:640px){.figs{grid-template-columns:repeat(2,1fr)}
  .fig::before{display:none}.fig{padding-left:0!important;padding-right:16px}}

/* ---------- боли: перечень, а не шесть одинаковых карточек ---------- */
.pains{--sev:var(--red);list-style:none;margin-top:clamp(18px,2.2vw,30px);
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,70px)}
.pains__hint{margin-top:clamp(24px,3vw,38px);color:var(--on-sheet-lo)}
.pain{position:relative}
.pain__in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pain__l{position:relative;display:grid;grid-template-columns:auto 1fr auto;
  gap:0 18px;align-items:start;cursor:pointer;
  padding:19px 14px 19px 0;border-bottom:1px solid var(--rule-sheet);
  font-size:var(--t-body);line-height:1.42;
  font-variation-settings:'SHRP' 30,'wght' 430;color:var(--on-sheet);
  transition:background .32s ease,padding-left .32s cubic-bezier(.16,1,.3,1)}
.pain:nth-child(1) .pain__l,.pain:nth-child(2) .pain__l{border-top:1px solid var(--rule-sheet)}
.pain__l:hover{background:rgba(20,22,26,.035)}
.pain__n{font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.1em;
  color:var(--on-sheet-lo);line-height:1.7;font-variant-numeric:tabular-nums;
  transition:color .3s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.pain__t{transition:color .3s ease}
/* отметка: маленькая фаскованная пластина, которая ставится штампом */
.pain__mark{width:22px;height:22px;margin-top:2px;position:relative;transform:scale(1);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 5px);
  background:rgba(20,22,26,.12);
  transition:background .28s ease,transform .42s cubic-bezier(.12,.9,.2,1)}
.pain__mark::after{content:"";position:absolute;left:6px;top:5px;width:9px;height:5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.2);opacity:0;
  transition:transform .38s cubic-bezier(.1,.95,.18,1) .04s,opacity .2s ease .04s}
/* красная линия прочерчивается под выбранным пунктом */
.pain__l::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--red);box-shadow:0 1px 0 rgba(255,255,255,.6);
  transition:width .5s cubic-bezier(.16,1,.3,1)}

.pain__in:checked + .pain__l{background:rgba(224,31,38,.05);padding-left:14px}
.pain__in:checked + .pain__l::after{width:100%}
.pain__in:checked + .pain__l .pain__n{color:var(--red);transform:translateX(-2px)}
.pain__in:checked + .pain__l .pain__t{color:var(--on-sheet);
  font-variation-settings:'SHRP' 40,'wght' 520}
.pain__in:checked + .pain__l .pain__mark{background:var(--red);transform:none;
  box-shadow:0 4px 14px -7px rgba(224,31,38,.95)}
.pain__in:checked + .pain__l .pain__mark::after{transform:rotate(-45deg) scale(1);opacity:1}
.pain__in:focus-visible + .pain__l{outline:2px solid var(--red);outline-offset:3px}

/* ---------- калькулятор ---------- */
.gauge{margin-top:clamp(26px,3.2vw,44px);padding:clamp(24px,2.6vw,36px);--ch:34px}
.gauge__hd{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap}
.gauge__cnt{display:flex;align-items:baseline;gap:10px}
.gauge__n{font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.04em;
  font-variation-settings:'SHRP' 86,'wght' 650;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 1px rgba(20,22,26,.2);
  transition:color .3s ease}
/* Шкала меняет цвет по тяжести: пока терпимо — зелёный,
   деньги уже теряются — янтарный, система не работает — красный.
   Все три проходят AA на светлом листе: 5,3 / 5,3 / 5,1:1. */
.gauge{--sev:#15703A;--sev-fill-a:#1F8442;--sev-fill-b:#155F30;--sev-glow:rgba(21,112,58,.85)}
.gauge.sev-warn{--sev:#8A5604;--sev-fill-a:#C87A0C;--sev-fill-b:#8A5604;--sev-glow:rgba(200,122,12,.85)}
.gauge.sev-bad {--sev:#C31A20;--sev-fill-a:#DA2028;--sev-fill-b:#A5161B;--sev-glow:rgba(224,31,38,.9)}
.gauge.sev-none{--sev:var(--on-sheet)}
.gauge__n{color:var(--sev)}
.gauge__of{font-family:var(--m);font-size:var(--t-data);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-sheet-lo)}
.gauge__bar{display:flex;gap:5px;flex:1 1 220px;min-width:180px}
.gauge__bar i{flex:1;height:16px;background:rgba(20,22,26,.11);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
  transform-origin:left;transition:background .4s ease,transform .5s cubic-bezier(.14,.92,.2,1)}
.gauge__bar i.on{background:linear-gradient(168deg,var(--sev-fill-a),var(--sev-fill-b));
  box-shadow:0 4px 12px -7px var(--sev-glow);transform:scaleY(1.18)}
.gauge__v{margin-top:22px;font-size:var(--t-lead);line-height:1.45;max-width:62ch;
  font-variation-settings:'SHRP' 34,'wght' 450;color:var(--on-sheet);
  transition:opacity .26s ease}
.gauge__v.swap{opacity:0}
.gauge__go{margin-top:0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  transition:opacity .26s ease}
.gauge__go.swap{opacity:0}
.gauge__go:not(:empty){margin-top:24px}
@media(max-width:820px){
  .pains{grid-template-columns:1fr}
  .pain:nth-child(2) .pain__l{border-top:0}
  .gauge__hd{gap:14px}
}
.pains__out{margin-top:clamp(26px,3vw,38px);font-size:var(--t-lead);max-width:56ch;
  font-variation-settings:'SHRP' 34,'wght' 500;color:var(--on-sheet)}

/* ---------- этапы воронки ---------- */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,30px);margin-top:clamp(26px,3vw,40px)}
.flow li{position:relative;padding-top:20px;border-top:1px solid var(--rule)}
.flow li.leak{border-top-color:var(--red)}
.flow__n{font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.14em;
  color:var(--ink-lo);font-variant-numeric:tabular-nums}
.flow li.leak .flow__n{color:var(--red-lit)}
.flow h3{font-size:var(--t-lead);line-height:1.15;letter-spacing:-.02em;margin:10px 0 10px;
  font-variation-settings:'SHRP' 66,'wght' 600;color:var(--ink-hi)}
.flow p{font-size:var(--t-body);line-height:1.5;color:var(--ink-lo)}
.flow__out{margin-top:clamp(30px,3.2vw,44px);font-size:var(--t-lead);max-width:62ch;
  color:var(--ink);font-variation-settings:'SHRP' 30,'wght' 400}
@media(max-width:900px){.flow{grid-template-columns:repeat(2,1fr);row-gap:clamp(22px,3vw,32px)}}
@media(max-width:540px){.flow{grid-template-columns:1fr}}

/* ---------- кейсы ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.5vw,22px);
  margin-top:clamp(40px,5vw,72px)}
.case{padding:clamp(26px,2.6vw,38px)}
.case > .data{color:var(--on-sheet-lo);font-size:var(--t-sm);letter-spacing:.01em}
.case:first-child{grid-column:1/-1}
.case:first-child .case__n{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.case:first-child .case__n{grid-template-columns:repeat(2,1fr)}}
.case__n{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:clamp(18px,2vw,30px);margin-top:26px}
.case__n li{display:flex;flex-direction:column;gap:9px;padding-top:15px;
  border-top:1px solid var(--rule-sheet)}
/* Число не переносится: перенос ломал базовую линию соседей и наезжал на подпись */
.case .struck{font-size:clamp(26px,2.6vw,40px);white-space:nowrap;letter-spacing:-.04em}
/* Подпись под числом — читаемый текст, а не микроскопический капслок */
.case__n .data{font-family:var(--f);font-size:var(--t-sm);font-weight:400;
  font-variation-settings:'SHRP' 26,'wght' 440;letter-spacing:0;text-transform:none;
  line-height:1.34;color:var(--on-sheet-lo);max-width:22ch}
.case__p{margin-top:24px;font-size:var(--t-body);line-height:1.55;
  color:var(--on-sheet-lo);max-width:64ch}
@media(max-width:840px){.cases{grid-template-columns:1fr}}

/* ---------- две колонки ---------- */
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,64px);
  margin-top:clamp(34px,4vw,56px);max-width:1020px}
.two p{margin-bottom:16px;color:var(--ink-lo);font-size:var(--t-body)}
.two b{color:var(--ink-hi)}

/* ---------- продукт: аудит ---------- */
.prod{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(14px,1.5vw,22px);
  margin-top:clamp(40px,5vw,72px)}
.prod__spec{display:flex;flex-direction:column;gap:26px;padding:clamp(24px,2.6vw,36px)}
.prod__spec div{display:flex;flex-direction:column;gap:7px}
.prod__spec b{font-size:var(--t-lead);font-variation-settings:'SHRP' 60,'wght' 600;
  letter-spacing:-.018em;line-height:1.2;color:var(--on-sheet)}
.prod__spec .price{font-size:clamp(32px,3.4vw,50px);line-height:1;letter-spacing:-.04em;
  font-variation-settings:'SHRP' 86,'wght' 650;font-variant-numeric:tabular-nums;
  color:var(--on-sheet);text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 1px rgba(20,22,26,.2)}
.prod__list{list-style:none;display:flex;flex-direction:column;gap:0;padding:clamp(20px,2.4vw,30px) clamp(24px,2.6vw,36px)}
.prod__list li{position:relative;padding:13px 0 13px 30px;font-size:var(--t-body);line-height:1.45;
  border-bottom:1px solid var(--rule-sheet);color:var(--on-sheet)}
.prod__list li:last-child{border-bottom:0}
.prod__list li::before{content:"";position:absolute;left:0;top:1.32em;width:16px;height:2px;
  background:var(--red);box-shadow:0 1px 0 rgba(255,255,255,.7)}
.prod__act{display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  margin-top:clamp(26px,3vw,38px)}
.prod__after{margin-top:20px;font-size:var(--t-body);color:var(--on-sheet-lo);max-width:60ch}
.prod__after a{display:inline-block;min-width:44px;text-align:center;padding:9px 6px;margin:-9px -3px;
  color:var(--on-sheet);border-bottom:1px solid var(--red);
  text-underline-offset:3px;transition:color .18s}
.prod__after a:hover{color:#C31A20}
@media(max-width:840px){.prod{grid-template-columns:1fr}}

/* ---------- два направления после аудита ---------- */
.dirs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.5vw,22px);
  margin-top:clamp(40px,5vw,72px)}
.dir{display:flex;flex-direction:column;padding:clamp(26px,2.8vw,42px)}
.dir__h{font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.026em;
  font-variation-settings:'SHRP' 72,'wght' 600;color:var(--ink-hi)}
.dir__p{margin-top:16px;font-size:var(--t-body);line-height:1.55;color:var(--ink-lo);max-width:44ch}
.dir__l{list-style:none;display:flex;flex-direction:column;margin-top:24px;
  border-top:1px solid var(--rule)}
.dir__l li{position:relative;padding:14px 0 14px 30px;font-size:var(--t-body);line-height:1.45;
  color:var(--ink-lo);border-bottom:1px solid var(--rule)}
.dir__l li::before{content:"";position:absolute;left:0;top:1.32em;width:16px;height:2px;
  background:var(--red);box-shadow:0 -1px 0 rgba(0,0,0,.6)}
.dir__go{margin-top:auto;padding-top:30px}

/* ---------- имя ---------- */
.name{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4vw,72px);align-items:start}
.name__ph{margin:0}
.name__img{position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
  --ch:34px;background:var(--sheet-3)}
.name__img img{width:100%;height:100%;object-fit:cover;object-position:center 12%;grid-area:1/1;
  filter:grayscale(1) contrast(1.06) brightness(.96);
  transition:filter .55s cubic-bezier(.32,0,.24,1)}
.name__ph:hover .name__img img{filter:grayscale(.15) contrast(1.02) brightness(1)}
.name__img .ph{display:none}
.name__img.is-empty .ph{display:block}
.name__cap{margin-top:14px}
.name__h{max-width:17ch}
.name__tx p{margin-top:20px;font-size:var(--t-body);line-height:1.6;
  color:var(--on-sheet-lo);max-width:58ch}
.name__sig{position:relative;margin-top:26px!important;padding:20px 24px;
  color:var(--on-sheet)!important;font-size:var(--t-lead)!important;line-height:1.45!important;
  font-variation-settings:'SHRP' 40,'wght' 480;
  --ch:18px}
@media(max-width:840px){
  .name{grid-template-columns:1fr}
  /* портрет снят 4:5 — держим его пропорцию, иначе кадр режет лицо */
  .name__img{aspect-ratio:4/5;max-width:min(78vw,420px)}
  .name__img img{object-position:center 18%}
  .name__ph{display:flex;flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .name__img{max-width:100%;aspect-ratio:5/6}
}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule);max-width:940px}
.q{border-bottom:1px solid var(--rule)}
.q summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;min-height:44px;cursor:pointer;list-style:none;
  font-size:var(--t-lead);line-height:1.3;letter-spacing:-.016em;
  font-variation-settings:'SHRP' 56,'wght' 550;color:var(--ink-hi);
  transition:color .18s ease}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--red-lit)}
.q summary i{position:relative;flex:0 0 auto;width:14px;height:14px}
.q summary i::before,.q summary i::after{content:"";position:absolute;background:var(--ink-lo);
  transition:transform .26s cubic-bezier(.32,0,.24,1),background .18s}
.q[open] summary i::before,.q[open] summary i::after,
.q summary:hover i::before,.q summary:hover i::after{background:var(--red-lit)}
.q summary i::before{left:0;top:6.2px;width:14px;height:1.6px}
.q summary i::after{left:6.2px;top:0;width:1.6px;height:14px}
.q[open] summary i::after{transform:rotate(90deg)}
.q p{padding:0 0 26px;max-width:66ch;color:var(--ink-lo);font-size:var(--t-body);line-height:1.65}

/* ---------- финал ---------- */
.final{padding-bottom:clamp(72px,8vw,124px)}
.final__in{--ch:44px;padding:clamp(38px,4.6vw,72px) clamp(28px,4vw,64px)}
.final__p{margin-top:22px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,26px);
  margin-top:clamp(32px,3.6vw,50px)}
.final__note{margin-top:30px;max-width:52ch;font-family:var(--f);font-size:var(--t-sm);
  letter-spacing:0;text-transform:none;line-height:1.5;color:var(--ink-lo)}

/* ---------- подвал ---------- */
.ftr{padding:clamp(40px,4.6vw,64px) 0;border-top:1px solid var(--rule)}
.ftr__in{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;align-items:start}
.ftr__brand{font-size:var(--t-lead);font-variation-settings:'SHRP' 64,'wght' 600;
  letter-spacing:-.022em;margin-bottom:8px;color:var(--ink-hi)}
.ftr__c{display:flex;flex-direction:column;gap:2px}
.ftr__c a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.02em;
  color:var(--ink);transition:color .18s}
.ftr__c a:hover{color:var(--red-lit)}
.ftr__l{display:flex;flex-direction:column;gap:6px}
.ph{display:inline-block;font-family:var(--m);font-size:var(--t-data);color:var(--ink-lo);
  text-transform:uppercase;letter-spacing:.08em;
  outline:1px dashed currentColor;outline-offset:3px;padding:2px 4px}
@media(max-width:840px){.ftr__in{grid-template-columns:1fr}}

/* ---------- кнопка наверх ---------- */
.totop{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:55;
  width:48px;height:48px;display:grid;place-items:center;cursor:pointer;border:0;--ch:12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 30%,var(--edge-dim));
  color:var(--ink-hi);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.32,0,.24,1),color .18s}
.totop::before{content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10.4px),calc(100% - 10.4px) 100%,0 100%);
  background:linear-gradient(168deg,var(--face-hi),var(--plate) 52%,#0F1113)}
.totop{isolation:isolate}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{color:var(--red-lit)}
.totop svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   РАБОТЫ — колода. Десктопная механика сохранена как была.
   ============================================================ */
.work{position:relative;overflow:hidden;padding:clamp(56px,6.4vw,100px) 0 clamp(44px,5vw,76px)}
.work__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 14% 46%,transparent 0 58px,var(--ring,#2C2E33) 58px 59px),
    var(--tint,var(--plate));
  opacity:.55;transition:background .5s cubic-bezier(.4,0,.2,1)}
.work__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,12,.7) 0%,rgba(10,11,12,.28) 34%,rgba(10,11,12,.95) 100%)}
.work>*:not(.work__bg){position:relative;z-index:1}
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}

/* сегментный фильтр — пластина, не стекло */
.seg{--ch:11px;position:relative;display:flex;width:fit-content;isolation:isolate;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 30%,var(--edge-dim))}
.seg::before{content:"";position:absolute;inset:1px;z-index:-2;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9.4px),calc(100% - 9.4px) 100%,0 100%);
  background:linear-gradient(168deg,#1C1F23,#121417)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:2;flex:1 1 0;min-width:0;min-height:46px;padding:0 18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-lo);transition:color .26s ease}
.seg label:hover{color:var(--ink-hi)}
.seg input:checked + label{color:#fff}
.seg__glide{position:absolute;top:1px;bottom:1px;z-index:1;
  left:var(--gx,1px);width:var(--gw,33%);
  background:linear-gradient(168deg,#DA2028,var(--red) 48%,#A5161B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 14px -8px rgba(224,31,38,.9);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9.4px),calc(100% - 9.4px) 100%,0 100%);
  transition:left .26s cubic-bezier(.3,0,.2,1),width .26s cubic-bezier(.3,0,.2,1)}

.deck{position:relative;height:clamp(320px,44vw,580px);cursor:e-resize;
  margin-top:clamp(30px,3.4vw,54px);perspective:1700px;transform-style:preserve-3d}
.deck:focus-visible{outline:2px solid var(--red-lit);outline-offset:8px}
.pane{position:absolute;top:0;left:50%;width:min(76vw,1120px);height:100%;
  margin-left:min(-38vw,-560px);
  transform:translate3d(calc(var(--o,0) * 82%),0,0) rotateY(calc(var(--o,0) * -13deg)) rotate(-1.1deg) scale(var(--sc,1));
  opacity:var(--op,1);z-index:var(--z,1);
  transition:transform 1.15s cubic-bezier(.26,.04,.16,1),opacity .9s ease;
  will-change:transform;color:inherit}
.pane{--op:0}
.pane:first-child{--sc:1;--op:1;--z:5}
.pane:first-child .pane__hud{opacity:1;transform:none;pointer-events:auto}
.pane[data-off="0"]{--sc:1;--op:1;--z:5}
.pane[data-off="1"],.pane[data-off="-1"]{--sc:.9;--op:.5;--z:3}
.pane[data-off="2"],.pane[data-off="-2"]{--sc:.82;--op:.16;--z:2}
.pane.far{--sc:.78;--op:0;--z:1;pointer-events:none}
.pane.hide{display:none}

.pane__shot{position:relative;display:grid;place-items:center;width:100%;height:100%;
  overflow:hidden;background:var(--plate-lo);--ch:36px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.98)}
.pane__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;grid-area:1/1}
.pane__shot .ph{display:none}
.pane__shot.is-empty .ph{display:block}
.pane__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(10,11,12,.12) 42%,rgba(10,11,12,.5) 76%,rgba(10,11,12,.72) 100%);
  transition:opacity .35s ease}
.pane__shot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 1px 1px 0 var(--edge-lit),inset -1px -1px 0 var(--edge-dim)}
a.pane[data-off="0"]:hover .pane__shot::after{opacity:.84}

.pane__hud{position:absolute;display:flex;flex-direction:column;align-items:flex-start;
  left:clamp(20px,3vw,46px);bottom:clamp(22px,3vw,44px);z-index:3;max-width:min(44ch,70%);
  opacity:0;transform:translateY(14px);--ch:22px;isolation:isolate;
  padding:clamp(18px,1.8vw,26px) clamp(20px,2vw,30px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 26%,var(--edge-dim));
  transition:opacity .7s ease .22s,transform .7s cubic-bezier(.16,1,.3,1) .22s;pointer-events:none}
.pane__hud::before{content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20.4px),calc(100% - 20.4px) 100%,0 100%);
  background:linear-gradient(168deg,rgba(24,27,31,.96),rgba(10,11,12,.97));
  backdrop-filter:blur(14px)}
.pane[data-off="0"] .pane__hud{opacity:1;transform:none;pointer-events:auto}
.chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pane__h,.pane__d{display:block}
.badge,.chip{font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 11px;line-height:1.3}
.badge{background:rgba(240,238,233,.13);color:var(--ink-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.badge--live{background:linear-gradient(168deg,#DA2028,var(--red) 52%,#A5161B);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -6px rgba(224,31,38,.85)}
.chip{box-shadow:inset 0 0 0 1px rgba(240,238,233,.24);color:var(--ink-lo)}
.pane__h{font-size:clamp(26px,3vw,46px);line-height:1;letter-spacing:-.035em;
  font-variation-settings:'SHRP' 84,'wght' 620;text-transform:uppercase;
  color:var(--ink-hi);margin-top:16px;
  text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.8)}
.pane__d{margin-top:12px;font-size:var(--t-body);line-height:1.5;color:var(--ink)}
.pane__cta{margin-top:20px}

.deck__ui{margin-top:clamp(22px,2.4vw,34px)}
.deck__ui-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.deck__right{display:flex;align-items:center;gap:clamp(12px,2vw,24px)}
.deck__hint::before{content:"";display:inline-block;width:24px;height:1px;background:currentColor;
  opacity:.5;vertical-align:middle;margin-right:11px}
.ths{display:flex;gap:8px}
.th{width:54px;height:46px;display:grid;place-items:center;cursor:pointer;border:0;--ch:10px;
  font-family:var(--m);font-size:var(--t-data);letter-spacing:.08em;color:var(--ink-lo);
  background:rgba(240,238,233,.09);transition:.22s;font-variant-numeric:tabular-nums;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.1)}
.th[hidden]{display:none}
.th:hover{color:var(--ink-hi);background:rgba(240,238,233,.18)}
.th.on{background:linear-gradient(168deg,#DA2028,var(--red) 52%,#A5161B);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -8px rgba(224,31,38,.85)}
.arrows{display:flex;gap:10px}
.arw{width:48px;height:48px;display:grid;place-items:center;cursor:pointer;border:0;--ch:12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  background:rgba(240,238,233,.11);color:var(--ink-hi);transition:.22s;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.1)}
.arw:hover:not(:disabled){background:rgba(240,238,233,.22)}
.arw:disabled{opacity:.28;cursor:default}
.arw svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

.work__tx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);
  margin-top:clamp(52px,6vw,92px)}
.work__h{font-size:clamp(22px,2.2vw,30px);line-height:1.16;letter-spacing:-.024em;
  font-variation-settings:'SHRP' 70,'wght' 600;color:var(--ink-hi)}
.work__tx p{margin-top:18px;color:var(--ink-lo);max-width:52ch;font-size:var(--t-body)}
.work__l{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.work__l li{display:flex;flex-direction:column;gap:6px;padding:16px 0 16px 30px;position:relative;
  border-bottom:1px solid var(--rule)}
.work__l li::before{content:"";position:absolute;left:0;top:1.5em;width:16px;height:2px;
  background:var(--red);box-shadow:0 -1px 0 rgba(0,0,0,.6)}
.work__l b{font-size:var(--t-body);color:var(--ink-hi);
  font-variation-settings:'SHRP' 56,'wght' 620}
.work__l span{font-size:var(--t-body);line-height:1.5;color:var(--ink-lo)}

/* --- мобильная колода: пластины складываются в одну ячейку сетки,
       поэтому высота берётся по самой высокой и ничего не режется --- */
@media(max-width:860px){
  .deck{display:grid;height:auto;perspective:none;cursor:default;padding:0 var(--pad)}
  .pane{position:relative;grid-area:1/1;width:100%;height:auto;
    left:auto;right:auto;top:auto;margin:0;
    display:flex;flex-direction:column;--ch:26px;isolation:isolate;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
    background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 26%,var(--edge-dim));
    transform:translate3d(calc(var(--o,0) * 4%),0,0) scale(var(--sc,1))}
  .pane::before{content:"";position:absolute;inset:1px;z-index:-1;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 24.4px),calc(100% - 24.4px) 100%,0 100%);
    background:linear-gradient(168deg,var(--plate-hi),var(--plate) 46%,var(--plate-lo))}
  .pane[data-off="1"],.pane[data-off="-1"]{--sc:.97;--op:0}
  .pane[data-off="2"],.pane[data-off="-2"]{--sc:.94;--op:0}
  .pane__shot{flex:0 0 auto;aspect-ratio:16/9;height:auto;--ch:0px;clip-path:none;
    box-shadow:none}
  .pane__shot::before{box-shadow:inset 0 -1px 0 var(--edge-dim)}
  .pane__shot::after{background:linear-gradient(180deg,transparent 46%,rgba(10,11,12,.5) 100%)}
  .pane__hud{position:static;opacity:1;transform:none;max-width:none;clip-path:none;
    background:none;padding:20px 22px 24px;pointer-events:auto}
  .pane__hud::before{display:none}
  .pane__h{font-size:clamp(24px,7vw,34px)}
  .work__tx{grid-template-columns:1fr}
  .seg label{padding:0 12px}
  .deck__hint{display:none}
}

/* ============================================================
   ЗАСТАВКА — 2,4 с.
   Знак вырезается штрихами, ложится в плиту, по ней проходит свет,
   затем плита наезжает на зрителя с размытием и раскрывается
   в страницу. Никаких осколков на самой странице больше нет.
   ============================================================ */
.intro{display:none}
html.intro-on .intro__stage{will-change:transform,filter}
html.intro-on .intro{display:grid;position:fixed;inset:0;z-index:200;
  place-content:center;justify-items:center;background:var(--void);
  animation:introOut 1.1s cubic-bezier(.38,.05,.5,1) 1.0s forwards}
html.intro-on{overflow:hidden}
html.intro-done{overflow:auto}
html.intro-done .intro{display:none}

.intro__stage{position:relative;width:min(62vw,420px);aspect-ratio:300/130;
  display:grid;place-items:center;isolation:isolate;
  animation:stagePush 1.18s cubic-bezier(.34,.14,.26,1) .92s forwards;
  transform-origin:50% 50%}
.intro__stage::before{content:"";position:absolute;inset:-13% -9%;z-index:-1;
  --ch:26px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 26%,var(--edge-dim));
  opacity:0;animation:plateIn .5s cubic-bezier(.24,0,.2,1) .36s forwards}
.intro__stage::after{content:"";position:absolute;inset:calc(-13% + 1px) calc(-9% + 1px);z-index:-1;
  --ch:24.4px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:
    radial-gradient(120% 180% at var(--sw,-40%) -30%,rgba(255,255,255,.2),transparent 56%),
    linear-gradient(168deg,var(--plate-hi),var(--plate) 48%,var(--plate-lo));
  opacity:0;animation:plateIn .5s cubic-bezier(.24,0,.2,1) .36s forwards,
                      introSweep .78s cubic-bezier(.36,0,.3,1) .5s forwards}
.intro__logo{position:relative;width:74%;overflow:visible}
.il__s{stroke-width:2.6;stroke-linejoin:miter;
  stroke-dasharray:100;stroke-dashoffset:100;fill-opacity:0;
  animation:draw .5s cubic-bezier(.32,0,.2,1) forwards,
            fill .34s ease-out forwards}
.il--r{stroke:var(--red);fill:var(--red)}
.il--i{stroke:var(--ink-hi);fill:var(--ink-hi)}
.il__s:nth-child(1){animation-delay:.02s,.44s}
.il__s:nth-child(2){animation-delay:.07s,.49s}
.il__s:nth-child(3){animation-delay:.12s,.54s}
.il__s:nth-child(4){animation-delay:.17s,.59s}
.il__s:nth-child(5){animation-delay:.21s,.63s}
.il__s:nth-child(6){animation-delay:.25s,.67s}
.il__s:nth-child(7){animation-delay:.29s,.71s}
.il__s:nth-child(8){animation-delay:.33s,.75s}
.intro__words{position:fixed;left:50%;top:calc(50% + min(19vw,140px));transform:translateX(-50%);
  font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-lo);white-space:nowrap;opacity:0;
  animation:tIn .4s cubic-bezier(.2,0,.2,1) .78s forwards,
            tOut .28s ease-in 1.02s forwards}
.intro__skip{position:fixed;left:50%;bottom:6%;transform:translateX(-50%);
  font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(240,238,233,.66);opacity:0;
  animation:tIn .3s ease-out .42s forwards,
            tOut .26s ease-in .98s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fill{to{fill-opacity:1}}
@keyframes plateIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes introSweep{from{--sw:-40%}to{--sw:140%}}
@keyframes tIn{to{opacity:1}}
@keyframes tOut{to{opacity:0}}
/* ---- ПЕРЕКРЁСТНЫЙ НАПЛЫВ ----
   Раньше заставка просто гасла над готовой страницей. Теперь оба слоя
   движутся навстречу: плита растёт и уходит в расфокус, а страница
   одновременно выходит из расфокуса и садится в масштаб. Кадры
   перекрываются почти секунду — это и есть наплыв, а не смена. */
html.intro-on .hdr,  html.intro-on main,  html.intro-on .ftr,
html.intro-done .hdr,html.intro-done main,html.intro-done .ftr{
  animation:none}
html.intro-settled .hdr,html.intro-settled main,html.intro-settled .ftr{
  animation:none;filter:none;transform:none;opacity:1}
/* Страница больше не стартует с нулевой прозрачностью: элемент с opacity:0
   не считается отрисованным, и метрика LCP ждала окончания заставки.
   Теперь контент отрисован сразу, заставка просто лежит поверх и гаснет,
   а расфокус и масштаб по-прежнему дают перекрёстный наплыв. */
/* Размытие со страницы снято намеренно. main высотой 6324px под filter
   получает слой на весь элемент — 9 млн пикселей текстуры каждый кадр.
   Размытие целиком отдано заставке: она маленькая, и расфокус там и нужен.
   Странице остаётся только масштаб — этого хватает, чтобы кадры
   перекрещивались, а не просто сменяли друг друга. */
@keyframes pageIn{
  0%  {transform:scale(1.026)}
  45% {transform:scale(1.014)}
  100%{transform:scale(1)}}

/* наезд: плита идёт на зрителя, уходит в расфокус и раскрывается в страницу.
   Три захода понадобилось, чтобы убрать дёрганость. Что выяснилось замерами:
     1) blur при масштабе 6,6 — 18 пропущенных кадров из 24, медиана 66 мс;
     2) размытие main высотой 6324px — слой на 9 млн пикселей каждый кадр;
     3) РАСТУЩЕЕ размытие заставляет перерисовывать кадр целиком.
   Отсюда правило: размытие набирается за первые 38% и дальше НЕ меняется.
   После этого двигаются только масштаб и прозрачность — их считает
   видеокарта, перерисовка не нужна. */
@keyframes stagePush{
  0%   {transform:scale(1);    filter:blur(0px);  opacity:1}
  14%  {transform:scale(1.10); filter:blur(9px);  opacity:1}
  38%  {transform:scale(1.42); filter:blur(20px); opacity:.92}
  70%  {transform:scale(2.05); filter:blur(20px); opacity:.5}
  100% {transform:scale(2.80); filter:blur(20px); opacity:0}}
@media(max-width:700px){
  @keyframes stagePush{
    0%   {transform:scale(1);    filter:blur(0px);  opacity:1}
    14%  {transform:scale(1.09); filter:blur(7px);  opacity:1}
    38%  {transform:scale(1.36); filter:blur(16px); opacity:.92}
    70%  {transform:scale(1.85); filter:blur(16px); opacity:.5}
    100% {transform:scale(2.45); filter:blur(16px); opacity:0}}}
@keyframes introOut{0%{opacity:1}55%{opacity:.5}100%{opacity:0;visibility:hidden}}
@media(max-width:700px){.intro__stage{width:78vw}
  @keyframes stagePush{
    0%  {transform:scale(1);   filter:blur(0);   opacity:1}
    30% {transform:scale(1.5); filter:blur(3px); opacity:1}
    65% {transform:scale(2.8); filter:blur(11px);opacity:.9}
    100%{transform:scale(5.2); filter:blur(26px);opacity:0}}}

/* ============================================================
   ДВИЖЕНИЕ v2
   Прошлая версия работала только в Chrome и меняла яркость на 1,3% —
   ниже порога, с которого человек вообще что-то замечает.
   Здесь: обычные переходы + класс от IntersectionObserver.
   Работает в любом браузере, видно невооружённым глазом.
   Без JS всё остаётся на месте и видимым.
   ============================================================ */

/* --- 1. Появление. Ставится только при живом JS, иначе контент виден сразу.
       Переход живёт на классе .warm, который скрипт снимает после кадра
       окончания: иначе он остаётся на элементе навсегда и наведение на
       карточку наследует его 780 мс вместо своих 420. --- */
.js [data-rz]{opacity:0}
.js [data-rz="up"]  {transform:translate3d(0,34px,0)}
.js [data-rz="left"]{transform:translate3d(-26px,0,0)}
.js [data-rz="cut"] {transform:translate3d(0,26px,0) scale(.985);filter:blur(6px)}
.js [data-rz].warm{will-change:opacity,transform,filter;
  transition:opacity .5s cubic-bezier(.2,0,.2,1) var(--d,0ms),
             transform .78s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             filter .52s cubic-bezier(.2,0,.2,1) var(--d,0ms)}
.js [data-rz].rz{opacity:1;transform:none;filter:none}

/* --- 2. Световой штрих. Узкая яркая полоса идёт по лицу пластины,
       пока пластина пересекает кадр. --sw ведёт скрипт. --- */
.plate{--sw:-40%}
.plate::after{content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch) + 1.6px),calc(100% - var(--ch) + 1.6px) 100%,0 100%);
  background:linear-gradient(104deg,
    transparent calc(var(--sw) - 17%),
    rgba(255,255,255,.05) calc(var(--sw) - 9%),
    rgba(255,255,255,.23)  var(--sw),
    rgba(255,255,255,.05) calc(var(--sw) + 9%),
    transparent calc(var(--sw) + 17%));
  opacity:.85;transition:opacity .3s ease}
.plate--sheet::after{background:linear-gradient(104deg,
    transparent calc(var(--sw) - 17%),
    rgba(255,255,255,.22) calc(var(--sw) - 8%),
    rgba(255,255,255,.95) var(--sw),
    rgba(255,255,255,.22) calc(var(--sw) + 8%),
    transparent calc(var(--sw) + 17%));
  opacity:.5}
.plate--sunk::after{opacity:.35}

/* --- 3. Пластина отзывается на курсор: приподнимается, кромка ярче --- */
.card,.dir,.case,.hero__badge,.flow li{
  /* базовая длительность = возврат: уход всегда короче прихода */
  transition:transform .26s cubic-bezier(.3,0,.2,1),box-shadow .26s ease,background .26s ease}
.card:hover,.dir:hover,.case:hover,.flow li:hover{
  transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease,background .42s ease}
.card:hover,.dir:hover,.flow li:hover{transform:translateY(-5px);
  background:linear-gradient(154deg,rgba(255,255,255,.30),var(--edge-mid) 26%,var(--edge-dim));
  box-shadow:0 42px 62px -34px rgba(0,0,0,.98),0 6px 16px -8px rgba(0,0,0,.75)}
.case:hover{transform:translateY(-4px);
  box-shadow:0 36px 54px -32px rgba(20,22,26,.5),0 5px 14px -8px rgba(20,22,26,.34)}
.card:hover::after,.dir:hover::after,.flow li:hover::after{opacity:1}

/* --- 4. Кнопки: настоящая подсветка, а не намёк --- */
.key{overflow:hidden}
.key::after{content:"";position:absolute;top:0;bottom:0;width:46%;z-index:-1;
  left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .62s cubic-bezier(.3,0,.2,1)}
.key:hover::after{left:120%}
.key:hover{transition:transform .14s cubic-bezier(.16,1,.3,1),box-shadow .24s ease;
  box-shadow:0 22px 44px -14px rgba(224,31,38,.85),
                      0 0 0 1px rgba(255,255,255,.14) inset,
                      0 4px 10px -5px rgba(0,0,0,.8)}
.key::before{background:
  radial-gradient(130% 190% at var(--mx,50%) -34%,rgba(255,255,255,.5),transparent 56%),
  linear-gradient(168deg,#DA2028 0%,var(--red) 46%,#A5161B 100%)}
.key2{overflow:hidden}
.key2::after{content:"";position:absolute;top:0;bottom:0;width:44%;z-index:-1;left:-60%;
  pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transition:left .62s cubic-bezier(.3,0,.2,1)}
.key2:hover::after{left:120%}
.key2:hover{transition:transform .14s cubic-bezier(.16,1,.3,1),color .22s ease;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1) inset}
.sheet .key2:hover::after{background:linear-gradient(100deg,transparent,rgba(20,22,26,.1),transparent)}

/* --- 5. Выбитая цифра: удар. Приходит из расфокуса и садится в металл. --- */
/* Счёт цифры сам по себе — движение. Добавлять к нему ещё и расфокус
   значило бы складывать приёмы ради эффекта. Остаётся только счёт. */

/* --- 8. Полоса под подписью работы и в подвале --- */
.pane[data-off="0"] .pane__hud{animation:hudIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes hudIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  /* Экономия движения: снимаем пространственный сдвиг, но оставляем
     смену прозрачности и состояния — обратная связь должна читаться. */
  .js [data-rz]{opacity:1!important;transform:none!important}
  .plate::after{display:none}
}

/* цифры, пока идёт счёт, держат ширину, чтобы строка не дёргалась */
.struck{font-variant-numeric:tabular-nums}

/* ============================================================
   УЗКИЕ ЭКРАНЫ — правки после замеров на 320–414px
   ============================================================ */
@media(max-width:860px){
  .dirs{grid-template-columns:1fr}
  .two{grid-template-columns:1fr;gap:clamp(18px,3vw,28px)}
  .prod__act,.acts{gap:14px}
  .work__head{gap:18px}
}
@media(max-width:560px){
  :root{--gap:clamp(54px,11vw,78px);--ch-plate:22px}
  .band{padding:clamp(42px,10vw,62px) 0}
  .sec__note{margin-top:14px}
  .pains li{padding:17px 0 17px 38px;font-size:var(--t-body)}
  .pains li::before{width:20px}
  .q summary{padding:19px 0;font-size:var(--t-body)}
  .q p{padding-bottom:20px}
  .hero__aside{gap:10px}
  .hero__badge{padding:15px 17px}
  .card{padding:22px 20px}
  .case,.dir,.prod__spec,.prod__list{padding:22px 20px}
  .final__in{padding:30px 22px;--ch:30px}
  .name__sig{padding:17px 19px}
  .acts{flex-direction:column;align-items:stretch}
  .acts .key,.acts .key2{justify-content:space-between}
  .acts .line{justify-content:flex-start}
}
/* Колода: миниатюры уступают место стрелкам, когда места нет */
@media(max-width:620px){
  .deck__ui-in{justify-content:flex-end}
  .th{width:46px;height:44px}
  .ths{gap:6px}
}
@media(max-width:430px){
  .ths{display:none}
  .deck__ui-in{justify-content:space-between}
  .deck__ui-in::before{content:var(--count,"01 / 04");font-family:var(--m);font-size:var(--t-data);
    letter-spacing:.12em;color:var(--ink-lo);font-variant-numeric:tabular-nums}
  .arrows{gap:8px}
}
@media(max-width:360px){
  .brand__desc{display:none}
  .key,.key2{padding:0 20px;font-size:11px;letter-spacing:.08em}
}
.skip:focus{min-height:44px;display:inline-flex;align-items:center}

/* ============================================================
   ДВИЖЕНИЕ v2
/* Первый экран обязан помещаться в липкую сцену целиком,
   иначе заголовок и плашки режутся её же overflow. */
@media(max-width:900px){
  .hero__aside{flex-direction:row;gap:10px}
  .hero__badge{flex:1 1 0;min-width:0;padding:13px 15px}
  .hero__badge .struck{font-size:clamp(22px,5.6vw,30px)}
  .hero__badge .data{font-size:12px;letter-spacing:.04em;line-height:1.45}
}
@media(max-width:560px){
  :root{--t-disp:clamp(29px,7.8vw,40px);--t-lead:clamp(16px,4.4vw,19px)}
  .hero__sub{margin-top:16px;font-size:var(--t-body);line-height:1.45}
  .hero__act{margin-top:20px;gap:12px}
  .hero__aside{margin-top:22px}
  .hero__top{gap:0}
  .key{min-height:50px;padding:0 22px}
}
@media(max-width:400px){
  .hero__sub{font-size:16px}
  .hero__badge .data{font-size:12px;letter-spacing:.02em}
}

/* Раскрытие номера: сам номер появляется штампом, чтобы клик был замечен */
.tel{display:inline-flex}
/* У <button> есть собственный фон по умолчанию: я сбросил рамку и шрифт,
   а фон оставил, и кнопка «Позвонить» светлела рядом с соседями-ссылками. */
.tel__btn{border:0;background:transparent;color:inherit;cursor:pointer;
  font-family:inherit;
  -webkit-appearance:none;appearance:none}
.tel__btn[hidden],.tel__num[hidden]{display:none!important}
.tel__num.just{animation:telIn .42s cubic-bezier(.16,.94,.22,1) both}
@keyframes telIn{0%{opacity:0;transform:translateY(7px) scale(1.03)}60%{opacity:1}100%{opacity:1;transform:none}}
.key--max::before{background:
  radial-gradient(120% 160% at var(--mx,50%) -30%,rgba(255,255,255,.12),transparent 58%),
  linear-gradient(168deg,#2A2E34,#1A1D21 52%,#121416)}

/* Кнопка раскрытия номера в подвале должна выглядеть как соседние ссылки */
.ftr__c .tel{display:block}
.ftr__c .tel__btn,.ftr__c .tel__num{display:inline-flex;align-items:center;min-height:44px;
  background:none;padding:0;text-align:left;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.02em;
  color:var(--ink);transition:color .18s}
.ftr__c .tel__btn::after{content:" →";opacity:.55}
.ftr__c .tel__btn:hover,.ftr__c .tel__num:hover{color:var(--red-lit)}

/* ---------- цепочка передачи: агентство против прямой работы ---------- */
.relay{margin-top:clamp(34px,4vw,58px);display:flex;flex-direction:column;
  gap:clamp(18px,2.2vw,30px)}
.relay__row{display:grid;grid-template-columns:minmax(96px,auto) 1fr;
  gap:clamp(14px,2vw,28px);align-items:center}
.relay__lbl{white-space:nowrap}
.relay__row--direct .relay__lbl{color:var(--red-lit)}
.relay__chain{list-style:none;display:flex;align-items:center;gap:0;flex-wrap:nowrap;min-width:0}
.relay__chain li{--ch:9px;position:relative;flex:0 0 auto;isolation:isolate;
  padding:11px clamp(12px,1.5vw,20px);min-height:44px;display:flex;align-items:center;
  font-family:var(--m);font-size:var(--t-data);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-lo);white-space:nowrap;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 30%,var(--edge-dim))}
.relay__chain li::before{content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:linear-gradient(168deg,#22252A,var(--plate) 52%,#0E1013)}
/* связка между узлами: чем длиннее цепочка, тем бледнее сигнал */
.relay__chain li + li::after{content:"";position:absolute;right:100%;top:50%;
  width:clamp(18px,3vw,52px);height:1px;background:var(--rule)}
.relay__chain li + li{margin-left:clamp(18px,3vw,52px)}
.relay__chain li:nth-child(2){color:var(--ink-lo);opacity:.86}
.relay__chain li:nth-child(3){opacity:.7}
.relay__chain li:nth-child(4){opacity:.55}
.relay__row--direct .relay__chain{flex:1}
.relay__row--direct .relay__chain li{color:var(--ink-hi)}
.relay__row--direct .relay__chain li:last-child{margin-left:0;flex:0 0 auto}
.relay__row--direct .relay__chain li:first-child{margin-right:0}
.relay__row--direct .relay__chain li + li::after{position:static;width:auto;flex:1;
  background:none}
.relay__row--direct .relay__chain{display:flex;gap:0}
.relay__row--direct .relay__chain li + li{margin-left:0}
.relay__row--direct .relay__chain::after{content:none}
/* прямая линия рисуется отдельным элементом, чтобы тянулась на всю ширину */
.relay__row--direct .relay__chain li:first-child{margin-right:0}
.relay__row--direct .relay__chain{position:relative;justify-content:space-between}
.relay__row--direct .relay__chain::before{content:"";position:absolute;left:34px;right:26px;top:50%;
  height:2px;background:linear-gradient(90deg,var(--red),rgba(224,31,38,.35));
  box-shadow:0 0 14px 1px rgba(224,31,38,.35)}
.relay__row--direct .relay__chain li{z-index:1}
@media(max-width:760px){
  .relay__row{grid-template-columns:1fr;gap:10px}
  .relay__chain{flex-wrap:wrap;gap:10px}
  .relay__chain li + li{margin-left:0}
  .relay__chain li + li::after{display:none}
  .relay__row--direct .relay__chain::before{display:none}
  .relay__row--direct .relay__chain{justify-content:flex-start;gap:10px}
  .relay__row--direct .relay__chain li:first-child::after{content:"→";position:static;
    margin-left:10px;color:var(--red-lit);background:none;width:auto;height:auto}
}





/* На узком экране подписи внутри потока выходят около 5–6px — нечитаемо.
   Названия этапов там и так стоят в колонках под схемой. */

/* ---------- аккредитация: стороннее подтверждение, а не регалия на стену ---------- */
.cred{display:inline-flex;align-items:center;gap:14px;margin-top:12px;position:relative;
  padding:13px 20px 13px 16px;--ch:14px;--ch2:8px;isolation:isolate;
  clip-path:polygon(var(--ch2) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch2));
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 30%,var(--edge-dim));
  color:var(--ink);transition:transform .26s cubic-bezier(.3,0,.2,1),color .2s ease}
.cred::before{content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 12.6px),calc(100% - 12.6px) 100%,0 100%,0 7px);
  background:var(--grain),linear-gradient(168deg,var(--face-hi),var(--plate) 52%,#0F1113);
  background-size:var(--grain-size),auto;background-blend-mode:soft-light,normal}
.cred:hover{color:var(--ink-hi);transition:transform .4s cubic-bezier(.16,1,.3,1),color .2s ease;
  transform:translateY(-2px)}
.cred__mark{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center}
.cred__mark svg{width:30px;height:30px;fill:none;stroke:var(--red);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.cred__mark .cred__tick{stroke:var(--ink-hi);stroke-width:2}
.cred__tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.cred__tx b{font-size:var(--t-sm);font-variation-settings:'SHRP' 54,'wght' 600;
  letter-spacing:-.008em;color:var(--ink-hi);line-height:1.25}
.cred__tx .data{text-transform:none;letter-spacing:.02em;font-size:12.5px;line-height:1.45}
@media(max-width:560px){
  .cred{padding:12px 16px 12px 13px;gap:11px;align-items:flex-start}
  .cred__mark,.cred__mark svg{width:26px;height:26px}
  .cred__tx .data{font-size:11px}
}

/* в правой колонке первого экрана аккредитация занимает всю ширину плашек */
.cred--aside{display:flex;width:100%;margin-top:10px}
.cred--aside .cred__tx b{font-size:13.5px}
.cred--aside .cred__tx .data{font-size:12px;letter-spacing:.02em}
@media(max-width:980px){.cred--aside{width:auto}}

/* ссылка на политику в подвале и внутри сноски блока контактов */
.ftr__pp{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;
  font-family:var(--m);font-size:var(--t-data);letter-spacing:.02em;
  color:var(--ink-lo);transition:color .18s}
.ftr__pp:hover{color:var(--ink-hi)}
.final__note a{color:var(--ink);border-bottom:1px solid var(--red);text-underline-offset:3px;
  display:inline-block;min-width:44px;min-height:44px;line-height:28px;text-align:center;
  padding:8px 6px;margin:-8px -3px}
.final__note a:hover{color:var(--ink-hi)}

/* ============================================================
   MODERN WEB GUIDANCE — применено по руководствам скила
   ============================================================ */

/* improve-text-layout-and-legibility.
   balance — только коротким заголовкам (браузер балансирует до 6 строк),
   pretty — абзацам, где висячие слова заметнее всего.
   Обе — прогрессивное улучшение: старый браузер просто проигнорирует. */
h1,h2,h3,.disp,.head,.card__h,.dir__h,.flow h3,.q summary{text-wrap:balance}
p,li,blockquote,.pain__t,.gauge__v,.pane__d{text-wrap:pretty}

/* visually-stable-font-fallbacks.
   Пока грузится Geologica, текст рисуется системным шрифтом с другой
   высотой строчных. from-font подгоняет запасной под метрику основного,
   и подмена не двигает вёрстку. Baseline с 25 июля 2024. */
body{font-size-adjust:from-font}

/* defer-rendering-heavy-content — ПРОБОВАЛ И ОТКАТИЛ.
   Руководство предписывает content-visibility:auto для секций ниже
   первого экрана. На этой странице приём дал обратный результат:
   LCP 508 -> 6472 мс, CLS 0,0015 -> 0,0643, высота прыгала на 1652px,
   якоря промахивались на сотни пикселей, шесть блоков не раскрылись.
   Причина: покадровый движок появления читает getBoundingClientRect
   каждый кадр, а у пропущенной секции размер — оценка, а не факт.
   Страница и без этого укладывается в бюджет с запасом. */

/* cross-document-transitions.
   Переход между главной и политикой — тем же перекрёстным наплывом,
   что и выход из заставки. Без скриптов, само отключается при
   prefers-reduced-motion через media в правиле анимации. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:vtOut .22s cubic-bezier(.3,0,.2,1) both}
  ::view-transition-new(root){animation:vtIn .34s cubic-bezier(.16,1,.3,1) both}
}
@keyframes vtOut{to{opacity:0;filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;filter:blur(8px);transform:scale(1.012)}}

/* ============================================================
   НОВАЯ ГЛАВНАЯ — блоки, которых не было
   ============================================================ */
.hero__eyebrow{margin-bottom:clamp(14px,1.6vw,22px);color:var(--ink-lo)}
.dim{color:var(--ink-lo)}
.sheet .dim{color:var(--on-sheet-lo)}

/* ниши по группам: не таблица, а шкала.
   У каждой группы восемь ячеек — столько, сколько в самой крупной, —
   и заполнено ровно столько, сколько ниш. Длина полосы сравнивается
   глазом быстрее, чем читаются цифры, а сами цифры остаются рядом. */
.nishi{margin-top:clamp(40px,5vw,72px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--rule)}
.nishi__hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:14px;margin-bottom:clamp(18px,2.2vw,28px)}
.nishi__tot b{font-family:var(--d);font-size:var(--t-lead);letter-spacing:-.02em;
  font-variation-settings:'SHRP' 62,'wght' 600;color:var(--ink-hi);margin-right:6px}
.nishi__l{list-style:none;display:grid;gap:0}

.ni{display:grid;grid-template-columns:minmax(132px,auto) auto 1fr auto;
  gap:clamp(14px,2vw,32px);align-items:center;
  padding:clamp(14px,1.7vw,20px) 0;border-bottom:1px solid var(--rule);
  transition:background .26s ease}
.ni:first-child{border-top:1px solid var(--rule)}
.ni:hover{background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 62%)}

.ni__g{font-size:var(--t-body);font-variation-settings:'SHRP' 50,'wght' 600;
  letter-spacing:-.01em;color:var(--ink-hi);white-space:nowrap}

/* шкала: восемь ячеек с фаской, заполненные — из того же металла */
.ni__bar{display:flex;gap:4px;flex:0 0 auto}
.ni__bar i{width:14px;height:20px;--c:4px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  background:rgba(255,255,255,.07);
  transition:background .3s cubic-bezier(.3,0,.2,1),transform .3s cubic-bezier(.3,0,.2,1)}
.ni__bar i.on{background:linear-gradient(168deg,#3A4048,#22262C 52%,#15181C)}
.ni:hover .ni__bar i.on{background:linear-gradient(168deg,#E8353C,var(--red) 54%,#9E1419);
  transform:scaleY(1.12)}
.ni:hover .ni__bar i.on:nth-child(2){transition-delay:.03s}
.ni:hover .ni__bar i.on:nth-child(3){transition-delay:.06s}
.ni:hover .ni__bar i.on:nth-child(4){transition-delay:.09s}
.ni:hover .ni__bar i.on:nth-child(5){transition-delay:.12s}
.ni:hover .ni__bar i.on:nth-child(6){transition-delay:.15s}
.ni:hover .ni__bar i.on:nth-child(7){transition-delay:.18s}
.ni:hover .ni__bar i.on:nth-child(8){transition-delay:.21s}

.ni__l{font-size:var(--t-sm);line-height:1.5;color:var(--ink-lo);
  transition:color .26s ease}
.ni:hover .ni__l{color:var(--ink)}
.ni__n{font-family:var(--m);font-size:var(--t-lead);font-variation-settings:'wght' 600;
  color:var(--ink-lo);font-variant-numeric:tabular-nums;justify-self:end;min-width:2ch;
  text-align:right;transition:color .26s ease}
.ni:hover .ni__n{color:var(--red-lit)}

@media(max-width:900px){
  .ni{grid-template-columns:1fr auto;row-gap:9px}
  .ni__bar{grid-column:1/-1;order:3}
  .ni__l{grid-column:1/-1;order:4}
}
@media (prefers-reduced-motion: reduce){
  .ni__bar i,.ni:hover .ni__bar i.on{transition:none;transform:none}
}

/* заголовок новой главной длиннее прежнего — даём ему воздух */
.hero__eyebrow + .hero__h{max-width:22ch}

/* ============================================================
   ВХОД КАРТОЧЕК НАПРАВЛЕНИЙ — «раскладка»
   Три пластины приходят снизу, слегка развёрнутые к центру,
   и садятся в ряд. Разворот у крайних зеркальный, у средней нулевой —
   получается разложенный веер, который схлопывается в строй.
   В момент посадки по лицу пластины проходит блик: это тот же
   световой штрих, что живёт на всех пластинах, просто однократно.
   Рецепт Jakub: прозрачность + сдвиг + расфокус, своя кривая.
   Масштаб от .94, не от нуля. Только transform, opacity и filter.
   ============================================================ */
.js [data-rz="deal"]{
  opacity:0;
  transform:translate3d(var(--deal-x,0),44px,0) rotate(var(--deal-r,0deg)) scale(.94);
  /* на узком экране карточки идут столбиком: боковой снос там не нужен
     и выталкивает крайнюю за край */
  filter:blur(9px);
  transform-origin:50% 120%}
.js [data-rz="deal"].warm{
  will-change:opacity,transform,filter;
  transition:
    opacity .34s cubic-bezier(.2,0,.2,1) var(--d,0ms),
    transform .62s cubic-bezier(.16,1,.3,1) var(--d,0ms),
    filter .44s cubic-bezier(.2,0,.2,1) var(--d,0ms)}
.js [data-rz="deal"].rz{opacity:1;transform:none;filter:none}

/* посадка: однократный блик по лицу. Ключевые кадры здесь уместны —
   это не то, что пользователь может перезапустить на лету. */
.js [data-rz="deal"].rz::after{
  animation:dealSeat .62s cubic-bezier(.3,0,.2,1) var(--d,0ms) both}
@keyframes dealSeat{
  0%  {opacity:0}
  45% {opacity:1}
  100%{opacity:.85}}

@media (prefers-reduced-motion: reduce){
  .js [data-rz="deal"]{opacity:1;transform:none;filter:none}
  .js [data-rz="deal"].rz::after{animation:none}
}

@media(max-width:560px){
  .js [data-rz="deal"]{--deal-x:0px!important;--deal-r:0deg!important;
    transform:translate3d(0,32px,0) scale(.96)}
}

/* плашки первого экрана стояли вплотную — зазор не был задан вовсе */
.hero__badges{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,14px)}
@media(max-width:980px){.hero__badges{flex-direction:row}}

/* колонки цифр держались на одних волосяных линиях и читались тесно */
.figs{column-gap:clamp(10px,1.4vw,22px)}
.fig{padding-right:clamp(16px,1.8vw,26px)}
.fig + .fig{padding-left:clamp(16px,1.8vw,26px)}

/* ============================================================
   СТРАНИЦА АУДИТА
   ============================================================ */
.hero--sub{padding-top:clamp(26px,3vw,44px)}
.crumbs{display:flex;align-items:center;gap:10px;margin-bottom:clamp(18px,2.2vw,30px);
  font-family:var(--m);font-size:var(--t-data);letter-spacing:.08em;color:var(--ink-lo)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-lo);transition:color .18s}
.crumbs a:hover{color:var(--ink-hi)}
.crumbs span[aria-hidden]{color:var(--rule)}

/* ---- СБОРКА: куски интерфейса слетаются в один документ ----
   Переписано целиком. Прошлая версия гоняла слова в серых рамках, и они
   гасли на месте, не долетая до центра. Теперь:
   • каждый фрагмент — настоящий кусок интерфейса: график, кольцо,
     карточка метрики, осциллограмма звонка, воронка, статусы CRM;
   • по умолчанию фрагмент стоит В ЦЕНТРЕ, анимация везёт его ИЗ разлёта
     К центру — схождение гарантировано геометрией, а не подбором цифр;
   • в собранном документе живут те же элементы, только сведённые вместе.
   Движение привязано к прокрутке. Двойная защита: экономия движения
   и @supports; без поддержки видна сразу собранная карта. */
.assy__stage{position:relative;margin-top:clamp(40px,5vw,80px);
  min-height:clamp(440px,42vw,560px);display:grid;place-items:center}
/* overflow:hidden — до входа в сцену фрагменты стоят в максимальном
   разлёте, и на средних ширинах вылезали за экран. Прошлые проверки
   мерили переполнение только в конце прокрутки и этого не видели. */
.assy__bits{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}

/* фрагмент: пластина с фаской из того же металла */
.frag{position:absolute;left:50%;top:50%;
  display:flex;flex-direction:column;gap:9px;padding:14px 16px;--c:10px;isolation:isolate;
  opacity:0;transform:translate(-50%,-50%);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  background:linear-gradient(154deg,var(--edge-lit),var(--edge-mid) 30%,var(--edge-dim));
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.frag::before{content:"";position:absolute;inset:1px;z-index:-1;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  background:var(--grain),linear-gradient(168deg,#262A30,#171A1E 54%,var(--plate-lo));
  background-size:var(--grain-size),auto;background-blend-mode:soft-light,normal}
.frag i{font-family:var(--m);font-style:normal;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-lo)}
.frag em{font-family:var(--m);font-style:normal;font-size:10.5px;color:var(--ink-lo)}
.frag__hd{display:flex;justify-content:space-between;gap:18px}
.frag__val{font-size:26px;line-height:1;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 80,'wght' 650;color:var(--ink-hi);
  font-variant-numeric:tabular-nums}
.frag__val b{font-weight:inherit;color:var(--red-lit);margin-left:1px}
.frag svg rect{fill:#3A4048}
.frag svg rect.hot{fill:var(--red)}

.frag__chart{width:132px;height:48px}
.frag--ring{flex-direction:row;align-items:center;gap:12px;padding-right:20px}
.frag--ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:#2C3036;stroke-width:6}
.ring__on{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:163.4;stroke-dashoffset:112.7}
.frag--ring .frag__val{font-size:22px}
.frag--kpi{min-width:150px}
.frag__delta{font-family:var(--m);font-size:10.5px;color:var(--red-lit)}
.frag--call{flex-direction:row;align-items:center;gap:12px}
.frag__dot{width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 4px rgba(224,31,38,.18);flex:0 0 auto}
.frag__wave{width:104px;height:24px}
.frag__wave rect{fill:#5A616B}
.frag--fun svg{width:128px;height:34px}
.frag--crm{flex-direction:row;align-items:center;gap:8px}
.chip{width:22px;height:14px;border-radius:3px;background:#2C3036}
.chip--ok{background:#6B737D}
.chip--no{background:var(--red)}

/* разлёт: смещение каждого фрагмента от центра, px */
.bit--1{--sx:-420px;--sy:-150px;--sr:-7deg}
.bit--2{--sx: 410px;--sy:-150px;--sr: 6deg}
.bit--3{--sx:-440px;--sy: 120px;--sr: 5deg}
.bit--4{--sx: 400px;--sy: 160px;--sr:-6deg}
.bit--5{--sx: -40px;--sy:-215px;--sr: 3deg}
.bit--6{--sx: 150px;--sy: 225px;--sr:-4deg}

/* собранный документ */
.assy__map{position:relative;z-index:1;width:min(460px,86%);
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:16px}
.map__hd{display:flex;justify-content:space-between;align-items:center;gap:14px}
.map__pill{font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:5px 10px;border-radius:99px;color:#fff;background:var(--red)}
.map__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.map__cell{display:flex;flex-direction:column;gap:4px;padding:12px 14px;
  border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.map__cell b{font-size:28px;line-height:1;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 80,'wght' 650;color:var(--ink-hi);font-variant-numeric:tabular-nums}
.map__cell b i{font-style:normal;color:var(--red-lit)}
.map__cell em{font-family:var(--m);font-style:normal;font-size:10.5px;letter-spacing:.06em;color:var(--ink-lo)}
.map__chart{width:100%;height:auto}
.map__chart rect{fill:#3A4048;transform-box:fill-box;transform-origin:50% 100%}
.map__chart rect.hot{fill:var(--red)}
.map__fun{display:flex;align-items:center;gap:6px;height:26px}
.map__fun span{flex:1;border-radius:3px;background:#3A4048}
.map__fun span:nth-child(1){height:100%} .map__fun span:nth-child(2){height:78%}
.map__fun span:nth-child(3){height:54%}  .map__fun span:nth-child(4){height:32%;background:var(--red)}
.assy__rows{display:flex;flex-direction:column;gap:7px}
.assy__rows span{height:7px;border-radius:2px;background:rgba(255,255,255,.08)}
.assy__rows span:nth-child(1){width:100%} .assy__rows span:nth-child(2){width:84%}
.assy__rows span:nth-child(3){width:62%}
.assy__cap{margin-top:clamp(16px,2vw,26px)}

/* ── Вариант Б по кулинарной книге design-motion-principles, §14 ──
   Раньше сборка была привязана к прокрутке: медленно крутишь — медленно
   собирается. Теперь прокрутка только ЗАПУСКАЕТ (класс .go ставит
   IntersectionObserver), а дальше сборка идёт фиксированное время:
     0 – 0,35 с  фрагменты проявляются в разлёте
     0,35 – 0,6 с  короткая пауза — глаз успевает их увидеть
     0,6 – 1,8 с  схождение в документ — те самые 1,2 секунды
   Всё завязано на .js: без скрипта сразу видна собранная карта. */
@media (prefers-reduced-motion: no-preference){
  .js .assy .frag{animation:fragIn 1.8s cubic-bezier(.16,1,.3,1) both paused}
  .js .assy .assy__map{animation:mapIn 1.1s cubic-bezier(.16,1,.3,1) .55s both paused}
  .js .assy .map__chart rect{animation:barUp .6s cubic-bezier(.16,1,.3,1) both paused}
  .js .assy .map__chart rect:nth-child(1){animation-delay:.95s}
  .js .assy .map__chart rect:nth-child(2){animation-delay:1.0s}
  .js .assy .map__chart rect:nth-child(3){animation-delay:1.05s}
  .js .assy .map__chart rect:nth-child(4){animation-delay:1.1s}
  .js .assy .map__chart rect:nth-child(5){animation-delay:1.15s}
  .js .assy .map__chart rect:nth-child(6){animation-delay:1.2s}
  .js .assy .map__chart rect:nth-child(7){animation-delay:1.25s}
  .js .assy .map__chart rect:nth-child(8){animation-delay:1.3s}
  .js .assy .map__cell,.js .assy .map__fun span,.js .assy .assy__rows span{
    animation:cellIn .5s cubic-bezier(.16,1,.3,1) 1.05s both paused}
  .js .assy__stage.go .frag,
  .js .assy__stage.go .assy__map,
  .js .assy__stage.go .map__chart rect,
  .js .assy__stage.go .map__cell,
  .js .assy__stage.go .map__fun span,
  .js .assy__stage.go .assy__rows span{animation-play-state:running}
}
/* Фрагмент: проявляется в разлёте, держится, летит к центру
   и растворяется на подлёте — чтобы не громоздиться поверх документа. */
@keyframes fragIn{
  0%  {opacity:0;transform:translate(-50%,-50%) translate(calc(var(--sx)*1.12),calc(var(--sy)*1.12)) rotate(calc(var(--sr)*1.4)) scale(.96);filter:blur(4px)}
  19% {opacity:1;transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1);filter:blur(0)}
  33% {opacity:1;transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1);filter:blur(0)}
  72% {opacity:.9;transform:translate(-50%,-50%) translate(calc(var(--sx)*.22),calc(var(--sy)*.22)) rotate(0) scale(.72);filter:blur(0)}
  86% {opacity:0;transform:translate(-50%,-50%) translate(calc(var(--sx)*.06),calc(var(--sy)*.06)) rotate(0) scale(.58);filter:blur(4px)}
  100%{opacity:0;transform:translate(-50%,-50%) translate(0,0) rotate(0) scale(.5);filter:blur(5px)}}
@keyframes mapIn{
  from{opacity:.0;transform:scale(.92);filter:blur(8px)}
  to  {opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cellIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- состав аудита ---- */
.deliv{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,3.4vw,46px)}
.deliv__i{padding:clamp(20px,2.3vw,30px);display:flex;flex-direction:column;gap:9px}
.deliv__n{font-family:var(--m);font-size:var(--t-data);letter-spacing:.14em;color:var(--red-lit)}
.deliv__i h3{font-size:var(--t-lead);line-height:1.15;letter-spacing:-.02em;
  font-variation-settings:'SHRP' 62,'wght' 600;color:var(--ink-hi);text-wrap:balance}
.deliv__i p{font-size:var(--t-sm);line-height:1.55;color:var(--ink-lo)}
@media(max-width:900px){.deliv{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.deliv{grid-template-columns:1fr}}

/* ---- условия ---- */
.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(26px,3.2vw,42px)}
.terms__i{padding:clamp(18px,2.1vw,26px);display:flex;flex-direction:column;gap:7px}
.terms__i b{font-size:var(--t-lead);line-height:1.1;letter-spacing:-.02em;
  font-variation-settings:'SHRP' 66,'wght' 650;color:var(--on-sheet);
  font-variant-numeric:tabular-nums}
.terms__i b.struck--red{color:var(--red)}
.terms__i p{font-size:var(--t-sm);line-height:1.5;color:var(--on-sheet-lo);margin-top:3px}
.terms__after{margin-top:clamp(24px,3vw,38px);font-size:var(--t-lead);max-width:64ch;
  color:var(--on-sheet);font-variation-settings:'SHRP' 30,'wght' 400}
@media(max-width:1000px){.terms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.terms{grid-template-columns:1fr}}

/* Разлетающиеся фрагменты выходили за экран на узких ширинах:
   прижимаем их внутрь и уменьшаем разлёт, а ниже 700px убираем вовсе —
   на телефоне метафора не читается, а горизонтальная прокрутка появляется. */
@media(max-width:1100px){
  .bit--1{--sx:-300px;--sy:-150px} .bit--2{--sx: 290px;--sy:-150px}
  .bit--3{--sx:-310px;--sy: 130px} .bit--4{--sx: 290px;--sy: 165px}
  .bit--5{--sx: -30px;--sy:-215px} .bit--6{--sx: 110px;--sy: 225px}
}
@media(max-width:700px){
  .assy__bits{display:none}
  .assy__stage{min-height:0}
  .assy__map{width:100%}
}
/* короткие пункты меню были 41px по ширине при норме 44 */
.hdr__nav a{min-width:44px;justify-content:center}

/* ---- превью отчёта в первом экране страницы аудита ----
   Иллюстрирует заголовок: показывает, на каком шаге уходят клиенты.
   Без единой выдуманной цифры — только шаги, ширина полос и метка утечки. */
.rep{margin:0 0 clamp(16px,1.8vw,22px);perspective:1400px}
.rep__card{padding:clamp(18px,1.9vw,24px);display:flex;flex-direction:column;gap:13px;
  transform:rotateY(-9deg) rotateX(4deg) rotate(-1deg);transform-origin:60% 50%;
  box-shadow:0 44px 80px -38px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04)}
.rep__hd{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rep__pill{font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:5px 10px;border-radius:99px;color:#fff;background:var(--red)}
.rep__ttl{font-size:var(--t-lead);line-height:1.1;letter-spacing:-.02em;
  font-variation-settings:'SHRP' 64,'wght' 600;color:var(--ink-hi)}
.rep__steps{display:flex;flex-direction:column;gap:9px}
.rep__s{position:relative;display:grid;grid-template-columns:82px 1fr;align-items:center;gap:10px}
.rep__s span{font-family:var(--m);font-size:11px;letter-spacing:.05em;color:var(--ink-lo)}
.rep__s i{display:block;height:14px;width:var(--w);border-radius:3px;
  background:linear-gradient(90deg,#3E454E,#2A2F36)}
.rep__s--leak span{color:var(--ink-hi)}
.rep__s--leak i{background:linear-gradient(90deg,#E8353C,var(--red) 60%,#A5161B);
  box-shadow:0 0 0 3px rgba(224,31,38,.16)}
.rep__tag{position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--m);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red-lit)}
.rep__foot{display:flex;align-items:flex-end;gap:14px;padding-top:4px;
  border-top:1px solid rgba(255,255,255,.06)}
.rep__bars{width:120px;height:34px;flex:0 0 auto}
.rep__bars rect{fill:#3A4048}
.rep__bars rect.hot{fill:var(--red)}
.rep__lines{flex:1;display:flex;flex-direction:column;gap:6px;padding-bottom:2px}
.rep__lines span{height:6px;border-radius:2px;background:rgba(255,255,255,.08)}
.rep__lines span:nth-child(2){width:78%}
.rep__lines span:nth-child(3){width:56%}
.rep__note{display:block;margin-top:12px;text-align:center}

@media(max-width:980px){
  .rep{display:none}
}

/* ---- снимок в первом экране страницы аудита ----
   Кадрирован до красного круга: шапка отчёта и цифры оси отрезаны,
   подписи месяцев остались мелкими и вне фокуса. Рамка — та же
   пластина с фаской, что у остальных изображений сайта. */
.shot{margin:0 0 clamp(16px,1.8vw,22px)}
.shot__frame{padding:clamp(7px,.8vw,10px);overflow:hidden}
.shot__frame img{display:block;width:100%;height:auto;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
@media(max-width:980px){.shot{display:none}}

@media(max-width:900px){
  .bit--1{--sx:-210px;--sy:-140px} .bit--2{--sx: 200px;--sy:-140px}
  .bit--3{--sx:-220px;--sy: 120px} .bit--4{--sx: 200px;--sy: 150px}
  .bit--5{--sx: -20px;--sy:-200px} .bit--6{--sx:  80px;--sy: 210px}
  .frag{padding:11px 13px}
}

/* видео в первом экране страницы аудита — та же рамка, что была у снимка */
.shot__vid{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--plate-lo);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}

/* ============================================================
   СТРАНИЦА «РОП И КОММЕРЧЕСКИЙ ДИРЕКТОР НА АУТСОРСЕ»
   Новых анимаций нет намеренно: подпись движения согласуется
   с владельцем до реализации (правило 1 руководства).
   ============================================================ */
.hero--sub .hero__badges .hero__badge .struck{font-size:clamp(26px,2.4vw,34px)}

/* боли — ваши формулировки, сеткой по две */
.rop-pains{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.2vw,42px)}
.rop-pain{display:flex;gap:16px;align-items:flex-start;padding:clamp(18px,2.1vw,26px)}
.rop-pain__n{font-family:var(--m);font-size:var(--t-data);letter-spacing:.14em;
  color:var(--red);padding-top:4px;flex:0 0 auto}
.rop-pain p{font-size:var(--t-body);line-height:1.55;color:var(--on-sheet);text-wrap:pretty}
@media(max-width:760px){.rop-pains{grid-template-columns:1fr}}

/* кейсы — обезличены, цифры крупно */
.cases-r{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(26px,3.2vw,42px)}
.case-r{padding:clamp(20px,2.3vw,28px);display:flex;flex-direction:column;gap:18px}
.case-r__hd{display:flex;flex-direction:column;gap:5px}
.case-r__hd h3{font-size:var(--t-lead);line-height:1.15;letter-spacing:-.02em;
  font-variation-settings:'SHRP' 62,'wght' 600;color:var(--on-sheet);text-wrap:balance}
.case-r__hd .data{color:var(--on-sheet-lo)}
.case-r__n{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px;
  padding-top:16px;border-top:1px solid rgba(20,22,26,.12)}
.case-r__n li{display:flex;flex-direction:column;gap:3px}
.case-r__n b{font-size:clamp(24px,2.2vw,30px);line-height:1;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 80,'wght' 650;color:var(--red);font-variant-numeric:tabular-nums}
.case-r__n .data{color:var(--on-sheet-lo)}
@media(max-width:860px){.cases-r{grid-template-columns:1fr}}

/* честное сравнение: таблица, на узком экране прокручивается внутри себя */
.cmp-wrap{margin-top:clamp(26px,3.2vw,42px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:540px;border-collapse:collapse;font-size:var(--t-body)}
.cmp th,.cmp td{text-align:left;padding:16px 18px 16px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp thead th{font-family:var(--m);font-size:var(--t-data);letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--ink-lo)}
.cmp thead th:last-child{color:var(--red-lit)}
.cmp tbody th{font-weight:500;color:var(--ink-lo);width:22%}
.cmp td{color:var(--ink)}
.cmp td:last-child{color:var(--ink-hi);font-variation-settings:'SHRP' 40,'wght' 560}
.cmp-note{margin-top:clamp(18px,2.2vw,26px);max-width:64ch;color:var(--ink-lo);font-size:var(--t-sm)}

/* три уровня */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(26px,3.2vw,42px);align-items:stretch}
.tier{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:12px}
.tier__n{font-family:var(--m);font-size:var(--t-data);letter-spacing:.14em;color:var(--red)}
.tier__h{font-size:var(--t-lead);line-height:1.12;letter-spacing:-.02em;
  font-variation-settings:'SHRP' 66,'wght' 650;color:var(--on-sheet);text-wrap:balance}
.tier__lead{font-size:var(--t-sm);color:var(--on-sheet-lo)}
.tier__l{list-style:none;display:flex;flex-direction:column;gap:9px;margin:6px 0 4px;flex:1}
.tier__l li{position:relative;padding-left:20px;font-size:var(--t-sm);line-height:1.5;color:var(--on-sheet)}
.tier__l li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--red)}
.tier__l li:first-child{color:var(--on-sheet-lo)}
.tier__foot{padding-top:16px;border-top:1px solid rgba(20,22,26,.12);display:flex;flex-direction:column;gap:5px}
.tier__price{font-size:clamp(24px,2.2vw,30px);line-height:1.05;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 80,'wght' 650;color:var(--on-sheet)}
.tier__price[data-todo]{color:var(--red);font-size:var(--t-sm);font-family:var(--m);letter-spacing:.04em}
.tier__foot .data{color:var(--on-sheet-lo)}
@media(max-width:1000px){.tiers{grid-template-columns:1fr}}

/* impeccable, all-caps-body: фразы по 38–45 знаков заглавными читаются тяжело.
   Капс оставлен только коротким меткам; длинные строки — обычным регистром. */
.case-r__hd .data,.tier__foot .data{text-transform:none;letter-spacing:.01em;font-size:var(--t-sm)}
.crumbs{letter-spacing:.03em}
.tier__per{font-family:var(--m);font-size:var(--t-data);letter-spacing:.06em;
  color:var(--on-sheet-lo);font-variation-settings:'wght' 500}

/* ---- страница amoCRM: перечень работ ---- */
.whats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.2vw,42px)}
.what{padding:clamp(18px,2.1vw,26px);display:flex;flex-direction:column;gap:9px}
.what__n{font-family:var(--m);font-size:var(--t-data);letter-spacing:.14em;color:var(--red-lit)}
.what h3{font-size:var(--t-body);line-height:1.2;letter-spacing:-.012em;
  font-variation-settings:'SHRP' 56,'wght' 600;color:var(--ink-hi);text-wrap:balance}
.what p{font-size:var(--t-sm);line-height:1.5;color:var(--ink-lo)}
@media(max-width:1200px){.whats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.whats{grid-template-columns:1fr}}
.rop-pain p b{display:block;margin-bottom:4px;color:var(--on-sheet);
  font-variation-settings:'SHRP' 50,'wght' 600}


/* ============================================================
   ТОН НАПРАВЛЕНИЯ — «разный сплав»
   Меняется только подтон тёмного металла. Красный, шрифт, фаски,
   свет сверху-слева, шапка и подвал — общие для всего сайта.
   Графит (аудит, главная) — по умолчанию, без класса.
   ============================================================ */
/* РОП и управление — вороненая сталь, тёплый подтон */
html.tone-rop{--void:#0B0A09;--plate:#1A1714;--plate-hi:#25201C;--plate-lo:#121010;
  --sunk:#0D0B0A;--face-hi:#2C2723}
/* amoCRM — холодная сталь, синеватый подтон */
html.tone-crm{--void:#090B0E;--plate:#151A20;--plate-hi:#1E242C;--plate-lo:#0F1216;
  --sunk:#0B0D11;--face-hi:#222831}
/* сайты — титан, зеленоватый холодный */
html.tone-sites{--void:#08090B;--plate:#131417;--plate-hi:#1C1E22;--plate-lo:#0D0E10;
  --sunk:#0A0B0D;--face-hi:#212329;--cu:#C9743A;--cu-lit:#E0935A}

/* ---- схема каналов в первом экране amoCRM ----
   Пять каналов сходятся в одну воронку. Однократная прорисовка линий
   при входе в кадр: прокрутка запускает, дальше фиксированное время
   (cookbook §14). При экономии движения — сразу финальный вид. */
.chan{margin:22px 0 0}
.chan__svg{display:block;width:100%;height:auto;overflow:visible}
.ch__chip rect{fill:var(--plate-hi);stroke:rgba(255,255,255,.08);stroke-width:1}
.ch__chip text{font-family:var(--m);font-size:12.5px;letter-spacing:.04em;fill:var(--ink)}
.ch__line{fill:none;stroke:rgba(210,216,226,.24);stroke-width:1.5;stroke-linecap:round}
.ch__line--main{stroke:var(--red);stroke-width:2.5}
.ch__node>rect:first-child{fill:var(--plate);stroke:rgba(255,255,255,.12);stroke-width:1}
.ch__cap{font-family:var(--m);font-size:10px;letter-spacing:.12em;fill:var(--ink-lo)}
.ch__ttl{font-size:15px;font-variation-settings:'wght' 620;fill:var(--ink-hi)}
.ch__bar{fill:#3A4452}
.ch__bar--hot{fill:var(--red)}
@media (prefers-reduced-motion: no-preference){
  .js .chan .ch__line{stroke-dasharray:1;stroke-dashoffset:1}
  .js .chan .ch__node{opacity:0;transform:translateX(-8px);transform-box:fill-box}
  .js .chan.go .ch__line{transition:stroke-dashoffset .75s cubic-bezier(.16,1,.3,1);stroke-dashoffset:0}
  .js .chan.go .ch__line:nth-child(2){transition-delay:.06s}
  .js .chan.go .ch__line:nth-child(3){transition-delay:.12s}
  .js .chan.go .ch__line:nth-child(4){transition-delay:.18s}
  .js .chan.go .ch__line:nth-child(5){transition-delay:.24s}
  .js .chan.go .ch__line--main{transition-delay:.7s}
  .js .chan.go .ch__node{opacity:1;transform:none;
    transition:opacity .45s cubic-bezier(.16,1,.3,1) .62s,transform .45s cubic-bezier(.16,1,.3,1) .62s}
}
@media(max-width:980px){.chan{max-width:420px}}

/* ---- галерея живых настроек: нативная прокрутка с привязкой ----
   Modern Web Guidance: scroll-snap без библиотек, область доступна
   с клавиатуры (tabindex), каждый снимок с размерами против сдвига. */
.gal{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,760px);
  gap:clamp(14px,1.8vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);padding:clamp(24px,3vw,40px) var(--pad) 18px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-x:contain}
.gal:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.gal__i{scroll-snap-align:start;margin:0;padding:clamp(8px,.9vw,12px);display:flex;flex-direction:column;gap:14px}
.gal__i img{display:block;width:100%;height:auto;border-radius:6px}
.gal__i figcaption{display:flex;flex-direction:column;gap:4px;padding:0 6px 6px}
.gal__i figcaption b{font-size:var(--t-body);color:var(--ink-hi);font-variation-settings:'SHRP' 56,'wght' 600}
.gal__i figcaption span{font-size:var(--t-sm);color:var(--ink-lo)}
.gal__hint{padding-top:4px}
@media(max-width:620px){.gal{grid-auto-columns:88vw}}

.tier__from{font-size:.5em;letter-spacing:.02em;margin-right:4px;color:var(--on-sheet-lo);
  font-variation-settings:'wght' 500;vertical-align:.18em}
/* ---- стоимость amoCRM ---- */
.price-crm{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(24px,2.8vw,36px)}
.price-crm__v{font-size:clamp(32px,3.4vw,48px);line-height:1;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 80,'wght' 650;color:var(--on-sheet);margin-top:6px;white-space:nowrap}
.price-crm__t{font-size:var(--t-body);line-height:1.55;color:var(--on-sheet);max-width:52ch}
@media(max-width:900px){.price-crm{grid-template-columns:1fr}}

/* ============================================================
   СТРАНИЦА САЙТОВ — первый экран, новое направление
   Сцена нейтральная (Vercel): тонкая сетка, гаснущая к краям.
   Цвет приходит из самих работ. Свет как материал (Linear):
   свечение красное → медь — продолжение металла бренда.
   Без градиентного текста: он в абсолютных запретах design-motion.
   ============================================================ */
.hs{position:relative;overflow:hidden;isolation:isolate;background:#08090B;
  padding:clamp(40px,5vw,72px) var(--pad) clamp(56px,7vw,96px);min-height:min(88vh,860px)}
.hs__grid{position:absolute;inset:0;z-index:-2;
  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:64px 64px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 68% 42%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 75% at 68% 42%,#000 25%,transparent 78%)}
.hs__glow{position:absolute;z-index:-1;width:min(1100px,95vw);aspect-ratio:1;right:-18%;top:-12%;
  background:radial-gradient(closest-side,rgba(224,31,38,.34),rgba(196,103,43,.20) 42%,rgba(196,103,43,.06) 62%,transparent 76%);
  filter:blur(24px)}
.hs__in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(24px,3vw,56px);align-items:center;min-height:inherit}
.hs__eyebrow{margin-bottom:clamp(16px,1.8vw,24px);color:#B98A6A}
.hs__h{font-size:clamp(38px,4.3vw,70px);line-height:1.02;letter-spacing:-.038em;
  font-variation-settings:'SHRP' 80,'wght' 660;color:#F4F5F7;text-wrap:balance}
.hs__h em{font-style:normal;color:var(--red-lit)}
.hs__sub{margin-top:clamp(18px,2vw,28px);max-width:46ch;font-size:var(--t-lead);line-height:1.5;color:#B4B8C0}
.hs__act{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:clamp(24px,2.8vw,40px)}

/* сцена: окна браузера стопкой в перспективе */
.hs__stage{position:relative;height:clamp(440px,44vw,640px);perspective:2300px}
.hs__rig{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.hs-win{position:absolute;left:0;top:0;width:80%;margin:0;--c:26px;
  padding:1px;transform-style:preserve-3d;transform:var(--to) translateZ(var(--lift,0px));
  clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
  background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 30%,rgba(0,0,0,.4));
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 30px 60px -40px rgba(224,31,38,.25);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .5s ease,filter .4s ease}
.hs-win>*{position:relative}
.hs-win__bar{display:flex;align-items:center;height:30px;padding:0 14px 0 34px;background:#121418;
  clip-path:polygon(calc(var(--c) - 1px) 0,100% 0,100% 100%,0 100%,0 calc(var(--c) - 1px))}
.hs-win__url{font-family:var(--m);font-size:11px;letter-spacing:.04em;color:#8E939C;
  padding:3px 10px;border-radius:5px;background:rgba(255,255,255,.05)}
.hs-win picture,.hs-win img{display:block;width:100%;height:auto}
.hs-win figcaption{position:absolute;top:7px;right:14px;color:#8E939C;font-size:10.5px}
.hs-win--1{--to:translate3d(27%,-4%,0px) rotateY(-24deg) rotateX(7deg);opacity:.8;filter:saturate(.85) brightness(.82)}
.hs-win--2{--to:translate3d(13%,26%,110px) rotateY(-24deg) rotateX(7deg);opacity:.92;filter:brightness(.9)}
.hs-win--3{--to:translate3d(-1%,57%,220px) rotateY(-24deg) rotateX(7deg)}
.hs-win:hover{--lift:70px;opacity:1;filter:none;z-index:5}

/* вход: окна «раздаются» колодой — один раз, фиксированное время */
@media (prefers-reduced-motion: no-preference){
  .js .hs:not(.go) .hs-win{opacity:0;transform:translate3d(6%,60%,-300px) rotateY(-8deg) rotateX(18deg)}
  .js .hs.go .hs-win{transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .4s ease}
  .js .hs.go .hs-win--2{transition-delay:.12s}
  .js .hs.go .hs-win--3{transition-delay:.24s}
}
@media (prefers-reduced-motion: reduce){ .hs__rig{transform:none!important} }

@media(max-width:980px){
  .hs__in{grid-template-columns:1fr}
  .hs__stage{height:clamp(260px,62vw,420px);perspective:1400px}
  .hs-win{width:88%}
  .hs-win--1{--to:translate3d(12%,0%,0px) rotateY(-16deg) rotateX(6deg)}
  .hs-win--2{--to:translate3d(6%,18%,80px) rotateY(-16deg) rotateX(6deg)}
  .hs-win--3{--to:translate3d(0%,36%,160px) rotateY(-16deg) rotateX(6deg)}
  .hs__glow{right:-40%;top:30%}
}


/* ============================================================
   СТРАНИЦА САЙТОВ — секции. У каждой своя форма: ни одной сетки
   из одинаковых прямоугольников. Второй цвет страницы — медь.
   ============================================================ */

/* ---- витрина или воронка: правая колонка «включается» построчно ---- */
.vv__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px);
  margin-top:clamp(30px,3.6vw,50px);padding-bottom:14px;border-bottom:1px solid var(--rule)}
.vv__cols span:last-child{color:var(--cu-lit)}
.vv__list{list-style:none;position:relative}
.vv__list::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:50%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(201,116,58,.07),rgba(201,116,58,.02) 70%,transparent)}
.vv__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px);
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--rule)}
.vv__bad,.vv__good{position:relative;padding-left:28px;font-size:var(--t-body);line-height:1.5;text-wrap:pretty}
.vv__bad{color:#80858E}
.vv__bad::before{content:"×";position:absolute;left:0;top:-.05em;font-size:1.25em;color:#5C6169}
.vv__good{color:#EEF0F3}
.vv__good::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--cu)}
@media (prefers-reduced-motion: no-preference){
  .js .vv__list:not(.go) .vv__good{color:#5C6169}
  .js .vv__list:not(.go) .vv__good::before{transform:scaleX(0)}
  .js .vv__list .vv__good{transition:color .5s ease}
  .js .vv__list .vv__good::before{transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .js .vv__list.go .vv__row:nth-child(2) .vv__good,.js .vv__list.go .vv__row:nth-child(2) .vv__good::before{transition-delay:.12s}
  .js .vv__list.go .vv__row:nth-child(3) .vv__good,.js .vv__list.go .vv__row:nth-child(3) .vv__good::before{transition-delay:.24s}
  .js .vv__list.go .vv__row:nth-child(4) .vv__good,.js .vv__list.go .vv__row:nth-child(4) .vv__good::before{transition-delay:.36s}
  .js .vv__list.go .vv__row:nth-child(5) .vv__good,.js .vv__list.go .vv__row:nth-child(5) .vv__good::before{transition-delay:.48s}
}
@media(max-width:760px){
  .vv__cols{display:none}
  .vv__row{grid-template-columns:1fr;gap:10px}
  .vv__list::after{display:none}
}

/* ---- работы: крупные окна в перспективе, стороны чередуются ---- */
.cws{display:flex;flex-direction:column;gap:clamp(56px,7vw,110px);
  max-width:1320px;margin:clamp(34px,4vw,56px) auto 0;padding:0 var(--pad)}
.cw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.cw--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cw--flip .cw__shot{order:2}
.cw__shot{margin:0;position:relative;perspective:1600px}
.cw__shot::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;
  background:radial-gradient(closest-side,rgba(201,116,58,.22),rgba(224,31,38,.08) 55%,transparent 75%);filter:blur(18px)}
.cw__win{--c:22px;padding:1px;
  clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
  background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 30%,rgba(0,0,0,.4));
  box-shadow:0 50px 100px -48px rgba(0,0,0,.95);
  transform:rotateY(-9deg) rotateX(4deg);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cw--flip .cw__win{transform:rotateY(9deg) rotateX(4deg)}
.cw__shot:hover .cw__win{transform:rotateY(0) rotateX(0) translateZ(30px)}
.cw__bar{display:flex;gap:6px;align-items:center;height:26px;padding-left:30px;background:#121418;
  clip-path:polygon(calc(var(--c) - 1px) 0,100% 0,100% 100%,0 100%,0 calc(var(--c) - 1px))}
.cw__bar span{width:6px;height:6px;background:#3A3E46}
.cw__bar span:first-child{background:var(--cu)}
.cw__win picture,.cw__win img{display:block;width:100%;height:auto}
.cw__kind{color:var(--cu-lit)}
.cw__h{margin-top:10px;font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.025em;
  font-variation-settings:'SHRP' 70,'wght' 640;color:#F2F3F5;text-wrap:balance}
.cw__p{margin-top:14px;font-size:var(--t-body);line-height:1.6;color:#B0B4BC;max-width:46ch}
.cw__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cw__tags li{font-family:var(--m);font-size:11px;letter-spacing:.06em;padding:6px 10px;color:#C7CBD2;
  border:1px solid rgba(255,255,255,.12);clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px)}
.cw .line{margin-top:20px;display:inline-flex}
@media (prefers-reduced-motion: no-preference){
  .js .cw:not(.go) .cw__win{opacity:0;transform:rotateY(-24deg) rotateX(6deg) translateX(-30px)}
  .js .cw--flip:not(.go) .cw__win{transform:rotateY(24deg) rotateX(6deg) translateX(30px)}
  .js .cw .cw__win{transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s ease}
}
@media(max-width:900px){
  .cw,.cw--flip{grid-template-columns:1fr}
  .cw--flip .cw__shot{order:0}
}

/* ---- бенто: ячейки разного размера, свет идёт за курсором ---- */
.bento{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.4vw,46px)}
.bn{position:relative;overflow:hidden;isolation:isolate;padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  background:linear-gradient(168deg,var(--plate-hi),var(--plate) 60%,var(--plate-lo));
  border:1px solid rgba(255,255,255,.07)}
.bn:first-child{clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px)}
.bn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(201,116,58,.20),transparent 60%)}
.bn:hover::before{opacity:1}
.bn h3{font-size:var(--t-lead);line-height:1.12;letter-spacing:-.02em;font-variation-settings:'SHRP' 62,'wght' 620;color:#F2F3F5}
.bn p{font-size:var(--t-sm);line-height:1.5;color:#A9AEB6;max-width:42ch}
.bn--big{grid-column:span 2;grid-row:span 2;justify-content:space-between}
.bn--big h3{font-size:clamp(34px,3.6vw,56px);letter-spacing:-.035em;line-height:1}
.bn--big::after{content:"";position:absolute;right:-20%;top:-30%;width:80%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(closest-side,rgba(201,116,58,.28),rgba(224,31,38,.10) 55%,transparent 75%);filter:blur(10px)}
.bn--big p{font-size:var(--t-body);color:#C3C7CE}
.bn--wide{grid-column:span 2}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bn--big,.bn--wide{grid-column:auto;grid-row:auto}}

/* ---- процесс: линия прочерчивается медью ---- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(30px,3.6vw,50px);position:relative;padding-top:34px}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(255,255,255,.08)}
.steps::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,var(--red),var(--cu));
  transform-origin:left}
.st{position:relative}
.st::before{content:"";position:absolute;left:0;top:-31px;width:10px;height:10px;background:var(--void);
  border:2px solid var(--cu);transform:rotate(45deg)}
.st__n{font-family:var(--m);font-size:var(--t-data);letter-spacing:.14em;color:var(--cu-lit)}
.st h3{margin-top:8px;font-size:var(--t-body);line-height:1.2;font-variation-settings:'SHRP' 56,'wght' 600;color:#F2F3F5}
.st p{margin-top:6px;font-size:var(--t-sm);line-height:1.45;color:#A9AEB6}
@media (prefers-reduced-motion: no-preference){
  .js .steps:not(.go)::after{transform:scaleX(0)}
  .js .steps::after{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
}
@media(max-width:1000px){
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:30px;gap:22px}
  .steps::before,.steps::after{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .steps::after{background:linear-gradient(180deg,var(--red),var(--cu));transform-origin:top}
  .st::before{left:-26px;top:4px}
  .js .steps:not(.go)::after{transform:scaleY(0)}
}

/* ---- стоимость: крупная типографика, без карточек ---- */
.px{display:grid;grid-template-columns:1fr 1fr 1.3fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.px__i{padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,34px);border-left:1px solid var(--rule)}
.px__i:first-child{border-left:0;padding-left:0}
.px__v{margin-top:10px;font-size:clamp(30px,3.2vw,48px);line-height:1;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 80,'wght' 650;color:#F2F3F5;white-space:nowrap}
.px__i--note p{font-size:var(--t-body);line-height:1.55;color:#B0B4BC;margin-bottom:20px}
@media(max-width:900px){.px{grid-template-columns:1fr}.px__i{border-left:0;border-top:1px solid var(--rule);padding-left:0}.px__i:first-child{border-top:0}}

/* свечение за окнами кейсов шире картинки и на узком экране выпирало
   за край. clip, а не hidden: не создаёт своей прокрутки */
#raboty,#vitrina{overflow-x:clip}

/* ============================================================
   ГЛАВНАЯ — новая версия
   ============================================================ */

/* ---- первый экран: видео во всю ширину ---- */
.hh{position:relative;isolation:isolate;overflow:hidden;min-height:min(92vh,920px);
  display:flex;align-items:center;padding:clamp(40px,6vw,96px) var(--pad);background:#07080A}
.hh__media{position:absolute;inset:0;z-index:-1}
.hh__still,.hh__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.hh__vid{display:none}
.js .hh__vid{display:block}
/* затемнение слева: держит контраст 4,5+ даже на крупном плане в начале видео,
   где под текстом светлые стеклянные панели (замер по самому светлому пикселю) */
.hh__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,8,10,.96) 0%,rgba(7,8,10,.92) 44%,rgba(7,8,10,.62) 56%,rgba(7,8,10,.16) 68%,rgba(7,8,10,0) 78%),
  linear-gradient(0deg,var(--void) 0%,rgba(7,8,10,0) 26%)}
.hh__in{position:relative;max-width:1320px;width:100%;margin:0 auto}
.hh__in>*{max-width:min(620px,46%)}
.hh__eyebrow{color:#D0A27E;margin-bottom:clamp(14px,1.6vw,22px)}
.hh__h{font-size:clamp(40px,4.9vw,78px);line-height:1.03;letter-spacing:-.035em;
  font-variation-settings:'SHRP' 80,'wght' 660;color:#F5F6F8;text-wrap:balance}
.hh__h em{font-style:normal;color:var(--red-lit)}
.hh__sub{margin-top:clamp(18px,2vw,28px);font-size:var(--t-lead);line-height:1.5;color:#C2C6CD}
.hh__act{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:clamp(24px,2.6vw,36px)}
.hh__trust{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;margin-top:clamp(26px,3vw,40px);
  font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9CA1A9}
.hh__trust li+li::before{content:"·";margin:0 12px;color:#5C6169}
.hh__trust a{color:#E6E8EC;display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;
  border-bottom:1px solid rgba(224,31,38,.6)}
/* уход сцены вглубь при прокрутке — классический случай, где привязка к прокрутке уместна */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .hh__media{animation:hhOut linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .hh__in{animation:hhTxt linear both;animation-timeline:view();animation-range:exit 0% exit 80%}
  }
}
@keyframes hhOut{to{transform:scale(1.08) translateY(6%);filter:brightness(.55)}}
@keyframes hhTxt{to{transform:translateY(-8%);opacity:.2}}
@media (prefers-reduced-motion: reduce){.hh__vid{display:none!important}}
@media(max-width:980px){
  .hh{flex-direction:column;align-items:stretch;min-height:0;padding-bottom:0}
  .hh__media{position:relative;order:2;inset:auto;aspect-ratio:4/5;margin:28px calc(var(--pad)*-1) 0;z-index:0}
  .hh__vid{display:none!important}
  .hh__scrim{background:linear-gradient(180deg,#07080A 0%,rgba(7,8,10,0) 22%,rgba(7,8,10,0) 70%,var(--void) 100%)}
  .hh__in>*{max-width:none}
}

/* ---- цепочка: разрывы сшиваются медью ---- */
.ch{list-style:none;display:flex;align-items:flex-start;margin-top:clamp(64px,6vw,96px)}
.ch__node{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;width:96px;text-align:center}
.ch__dot{width:18px;height:18px;transform:rotate(45deg);background:var(--void);border:2px solid #E6E8EC;margin-top:2px}
.ch__node b{font-size:var(--t-lead);font-variation-settings:'SHRP' 56,'wght' 600;color:#F2F3F5}
.ch__gap{flex:1;position:relative;height:22px;display:flex;justify-content:center}
.ch__gap::before,.ch__gap::after{content:"";position:absolute;left:0;right:0;top:10px;height:3px}
.ch__gap::before{background:repeating-linear-gradient(90deg,var(--red) 0 7px,transparent 7px 13px)}
.ch__gap::after{background:linear-gradient(90deg,var(--red),#C9743A);transform:scaleX(0);transform-origin:left}
.ch__x{position:relative;z-index:1;font-size:18px;line-height:22px;padding:0 6px;background:var(--void);color:var(--red-lit)}
.ch__gap i{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-style:normal;font-family:var(--m);font-size:11px;letter-spacing:.05em;color:#E0666B}
.chn__fix{margin-top:clamp(56px,6vw,84px);font-size:var(--t-lead);line-height:1.5;color:#C2C6CD;max-width:60ch}
.chn__fix b{color:#F2F3F5;font-weight:inherit;font-variation-settings:'wght' 620}
.js .ch.go .ch__gap::after{transform:scaleX(1);transition:transform .55s cubic-bezier(.16,1,.3,1) .5s}
.js .ch.go .ch__x{opacity:0;transform:scale(.4);transition:opacity .25s ease .5s,transform .3s ease .5s}
.js .ch.go .ch__gap i{color:#8E939B;text-decoration:line-through;transition:color .4s ease .5s}
.js .ch.go .ch__dot{border-color:#C9743A;transition:border-color .4s ease}
.js .ch.go .ch__gap:nth-child(4)::after,.js .ch.go .ch__gap:nth-child(4) .ch__x,.js .ch.go .ch__gap:nth-child(4) i{transition-delay:.72s}
.js .ch.go .ch__gap:nth-child(6)::after,.js .ch.go .ch__gap:nth-child(6) .ch__x,.js .ch.go .ch__gap:nth-child(6) i{transition-delay:.94s}
.js .ch.go .ch__gap:nth-child(8)::after,.js .ch.go .ch__gap:nth-child(8) .ch__x,.js .ch.go .ch__gap:nth-child(8) i{transition-delay:1.16s}
.js .ch.go .ch__gap:nth-child(10)::after,.js .ch.go .ch__gap:nth-child(10) .ch__x,.js .ch.go .ch__gap:nth-child(10) i{transition-delay:1.38s}
.js .chn:not(.go) .chn__fix{opacity:0;transform:translateY(10px)}
.js .chn.go .chn__fix{transition:opacity .6s ease 1.9s,transform .6s cubic-bezier(.16,1,.3,1) 1.9s}
@media (prefers-reduced-motion: reduce){
  .ch__gap::after{transform:none}.ch__x{display:none}.ch__gap i{text-decoration:line-through;color:#8E939B}
  .js .chn .chn__fix{opacity:1;transform:none}
}
@media(max-width:900px){
  .ch{flex-direction:column;align-items:flex-start;padding-left:6px}
  .ch__node{flex-direction:row;width:auto;gap:16px}
  .ch__gap{flex:none;width:2px;height:58px;margin-left:6px;justify-content:flex-start}
  .ch__gap::before,.ch__gap::after{left:0;right:auto;top:0;bottom:0;width:2px;height:auto}
  .ch__gap::before{background:repeating-linear-gradient(180deg,var(--red) 0 7px,transparent 7px 13px)}
  .ch__gap::after{background:linear-gradient(180deg,var(--red),#C9743A);transform:scaleY(0);transform-origin:top}
  .js .ch.go .ch__gap::after{transform:scaleY(1)}
  .ch__x{position:absolute;left:-9px;top:18px;padding:0}
  .ch__gap i{left:22px;top:20px;bottom:auto;transform:none}
}

/* ---- цифры: бенто разного размера ---- */
.nb{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.4vw,46px)}
.nb__c{position:relative;overflow:hidden;isolation:isolate;padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  background:linear-gradient(168deg,var(--plate-hi),var(--plate) 60%,var(--plate-lo));border:1px solid rgba(255,255,255,.07)}
.nb__c::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(201,116,58,.18),transparent 60%)}
.nb__c:hover::before{opacity:1}
.nb__v{font-size:clamp(40px,4.4vw,68px);line-height:.95;letter-spacing:-.04em;
  font-variation-settings:'SHRP' 90,'wght' 680;color:#F4F5F7;font-variant-numeric:tabular-nums}
.nb__u{font-size:var(--t-body);color:#C2C6CD}
.nb__s{font-size:var(--t-sm);color:#8E939B}
.nb__c--big{grid-row:span 2;clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px)}
.nb__c--big .nb__v{font-size:clamp(96px,11vw,176px);color:var(--red-lit)}
.nb__c--wide{grid-column:span 2}
.nb__niche{list-style:none;display:grid;gap:7px;margin-top:14px}
.nb__niche li{display:grid;grid-template-columns:128px 1fr 22px;align-items:center;gap:12px;font-size:var(--t-sm);color:#B0B4BC}
.nb__niche i{height:6px;width:calc(var(--n) / 8 * 100%);background:linear-gradient(90deg,var(--red),#C9743A)}
.nb__niche b{font-weight:500;color:#E6E8EC;text-align:right}
@media(max-width:1000px){.nb{grid-template-columns:repeat(2,1fr)}.nb__c--big{grid-row:auto;grid-column:span 2}}
@media(max-width:560px){.nb{grid-template-columns:1fr}.nb__c--big,.nb__c--wide{grid-column:auto}
  .nb__niche li{grid-template-columns:104px 1fr 20px}}

/* ---- направления: плитки в цвете своих страниц, раскрываются под курсором ---- */
.tiles{list-style:none;display:flex;gap:clamp(10px,1.2vw,16px);height:clamp(440px,38vw,540px);margin-top:clamp(28px,3.4vw,46px)}
.tile{flex:1 1 0;min-width:0;transition:flex-grow .6s cubic-bezier(.16,1,.3,1)}
.tile:hover,.tile:focus-within{flex-grow:1.9}
.tile__a{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;isolation:isolate;color:inherit;
  --c:24px;clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));border:1px solid rgba(255,255,255,.08)}
.tile__a::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg)}
.tile__media{position:relative;flex:1;min-height:0;overflow:hidden}
.tile__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.55;
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.tile__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--base) 100%)}
.tile:hover .tile__media img,.tile:focus-within .tile__media img{transform:scale(1.06);opacity:.9}
.tile__tx{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2vw,26px)}
.tile__h{font-size:var(--t-lead);line-height:1.12;letter-spacing:-.02em;font-variation-settings:'SHRP' 64,'wght' 630;color:#F4F5F7}
.tile__lead{font-size:var(--t-sm);line-height:1.45;color:#B6BAC2}
.tile__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.tile__price{font-family:var(--m);font-size:12px;letter-spacing:.04em;color:var(--acc)}
.tile__go{display:inline-flex;align-items:center;gap:6px;font-family:var(--m);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#E6E8EC;min-height:44px;white-space:nowrap}
.tile__go .key__arw{width:14px;height:14px;transition:transform .3s ease}
.tile:hover .tile__go .key__arw{transform:translateX(4px)}
.tile--audit{--base:#121316;--acc:#FF5B60;--bg:radial-gradient(120% 70% at 30% 110%,rgba(224,31,38,.35),transparent 60%),#121316}
.tile--rop{--base:#17140F;--acc:#E0A35A;--bg:radial-gradient(120% 70% at 30% 110%,rgba(224,150,70,.30),transparent 60%),#17140F}
.tile--crm{--base:#10151C;--acc:#7FB0E0;--bg:radial-gradient(120% 70% at 30% 110%,rgba(90,150,215,.28),transparent 60%),#10151C}
.tile--sites{--base:#131210;--acc:#E0935A;--bg:radial-gradient(120% 70% at 30% 110%,rgba(201,116,58,.32),transparent 60%),#131210}
.tile__ladder{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:clamp(18px,2vw,26px)}
.tile__ladder span{display:block;width:calc(46% + var(--i) * 22%);padding:10px 14px;
  font-family:var(--m);font-size:12px;letter-spacing:.06em;color:#F2E6D6;
  background:linear-gradient(90deg,rgba(224,150,70,.35),rgba(224,150,70,.08));border-left:2px solid #E0A35A}
@media(max-width:1000px){
  .tiles{flex-direction:column;height:auto}
  .tile,.tile:hover,.tile:focus-within{flex-grow:0}
  .tile__media{flex:none;height:180px}
}

/* ---- почему я: портрет стоит, факты идут рядом ---- */
.why__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,84px);align-items:start}
.why__ph{position:sticky;top:clamp(90px,10vh,120px);margin:0}
.why__ph picture,.why__ph img{display:block;width:100%;height:auto}
.why__ph img{clip-path:polygon(28px 0,100% 0,100% 100%,0 100%,0 28px)}
.why__ph figcaption{display:flex;flex-direction:column;gap:4px;margin-top:16px}
.why__ph figcaption b{font-size:var(--t-lead);font-variation-settings:'wght' 620;color:#F2F3F5}
.why__f{padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--rule)}
.why__f .data{color:#D0A27E}
.why__f p{margin-top:10px;font-size:var(--t-lead);line-height:1.55;color:#C9CDD3}
.why__f a{color:#F2F3F5;border-bottom:1px solid var(--red)}
.why .head{margin-bottom:clamp(10px,1.4vw,20px)}
@media (prefers-reduced-motion: no-preference){
  .js .why__f{opacity:.3;transition:opacity .6s ease}
  .js .why__f.on{opacity:1}
}
@media(max-width:900px){.why__in{grid-template-columns:1fr}.why__ph{position:relative;top:auto;max-width:420px}}

/* ---- первый шаг: аудит ---- */
.step1{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(28px,3.4vw,48px);position:relative;isolation:isolate;overflow:hidden;
  --c:28px;clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
  background:radial-gradient(90% 140% at 100% 50%,rgba(224,31,38,.22),transparent 60%),linear-gradient(168deg,#1B1D22,#111316);
  border:1px solid rgba(255,255,255,.08)}
.step1 .data{color:var(--red-lit)}
.step1 .head{margin:8px 0 12px}
.step1 p:not(.data){font-size:var(--t-lead);line-height:1.5;color:#C2C6CD;max-width:56ch}
.step1__r{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media(max-width:900px){.step1{grid-template-columns:1fr}}
.gal__i figcaption a{font-family:var(--m);font-size:11px;letter-spacing:.08em;color:#C7CBD2;min-height:44px;display:inline-flex;align-items:center}
/* ссылка внутри абзаца: область нажатия до 44 px, строки не сдвигаются */
.why__f a{padding:12px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- «18» по центру ячейки: выше и крупнее, как главное число блока ---- */
.nb__c--big{justify-content:center;align-items:center;text-align:center}
.nb__c--big .nb__s{max-width:22ch}

/* ---- «6 стран» с флагами: флаги загораются по одному вместе со счётчиком ---- */
.nb__c--geo{justify-content:space-between}
.nb__flags{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.nb__flags li{position:relative}
.nb__flags img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 18px -10px rgba(0,0,0,.9);
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .4s ease,filter .4s ease}
.nb__flags li:hover img{transform:translateY(-3px) scale(1.06)}
.nb__c--geo .nb__s{line-height:1.5}
@media (prefers-reduced-motion: no-preference){
  .js .nb__c--geo:not(.flags-on) .nb__flags img{opacity:.18;filter:grayscale(1)}
  .js .nb__flags li.on img{opacity:1;filter:none}
}

/* ---- карусель работ: медленная прокрутка, пауза под курсором, лупа ---- */
.gal__bar{display:flex;align-items:center;gap:10px;margin-top:clamp(18px,2vw,26px)}
.gal__btn{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:#E6E8EC;
  background:linear-gradient(168deg,var(--plate-hi),var(--plate));border:1px solid rgba(255,255,255,.12);
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);transition:background .2s ease,color .2s ease}
.gal__btn:hover{color:#fff;background:linear-gradient(168deg,#2A2E35,#1A1D22)}
.gal__btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.gal__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gal__btn .i-play{fill:currentColor;stroke:none}
.gal__btn--play .i-play{display:none}
.gal__btn--play[aria-pressed="true"] .i-pause{display:none}
.gal__btn--play[aria-pressed="true"] .i-play{display:block}
.gal__hint{margin-left:10px;color:#8E939B}
.gal--auto{display:block;overflow:hidden;padding:clamp(20px,2.4vw,32px) 0 18px;cursor:grab;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.gal--auto.is-drag{cursor:grabbing}
.gal--auto .gal__track{display:flex;gap:clamp(14px,1.8vw,24px);padding:0 var(--pad);will-change:transform}
.gal--auto .gal__i{flex:0 0 min(78vw,720px);user-select:none;-webkit-user-select:none}
.gal--auto .gal__i img{-webkit-user-drag:none;pointer-events:none}
.gal__zoom{overflow:hidden;border-radius:6px}
.gal__zoom img{display:block;width:100%;height:auto;transform-origin:var(--zx,50%) var(--zy,50%);
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.gal__i.is-zoom .gal__zoom img{transform:scale(2.1)}
@media(max-width:620px){.gal--auto .gal__i{flex-basis:84vw}.gal__hint{display:none}}
/* нижний ряд цифр: подписи одной высоты, чтобы числа стояли на одной линии */
.nb__c:not(.nb__c--big):not(.nb__c--wide):not(.nb__c--geo) .nb__u{min-height:3.1em;min-height:2lh}

/* ---- переключатель карусели: стрелки по бокам и точки ----
   Стрелки вне маскированной области — иначе маска гасила бы их вместе с краями слайдов. */
.gal-wrap{position:relative}
.gal__arrow{position:absolute;top:calc(clamp(20px,2.4vw,32px) + min(19vw,180px));z-index:3;
  width:56px;height:56px;display:grid;place-items:center;cursor:pointer;color:#F2F3F5;
  transform:translateY(-50%);border:1px solid rgba(255,255,255,.16);
  background:rgba(14,15,18,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
  transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.gal__arrow--prev{left:clamp(10px,2vw,28px)}
.gal__arrow--next{right:clamp(10px,2vw,28px)}
.gal__arrow:hover{background:var(--red);color:#fff}
.gal__arrow--prev:hover{transform:translateY(-50%) translateX(-2px)}
.gal__arrow--next:hover{transform:translateY(-50%) translateX(2px)}
.gal__arrow:active{transform:translateY(-50%) scale(.96)}
.gal__arrow:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.gal__arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gal__nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:6px}
.gal__dots{display:flex;align-items:center;gap:4px}
.gal__dot{position:relative;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0}
.gal__dot::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:3px;transform:translateY(-50%);
  background:rgba(255,255,255,.22);transition:background .3s ease,height .3s ease}
.gal__dot:hover::before{background:rgba(255,255,255,.5)}
.gal__dot[aria-current="true"]::before{background:var(--red);height:4px}
.gal__dot:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
@media(max-width:620px){
  .gal__arrow{width:44px;height:44px;top:calc(clamp(20px,2.4vw,32px) + 21vw)}
  .gal__arrow svg{width:18px;height:18px}
}
@media (prefers-reduced-motion: reduce){.gal__arrow,.gal__dot::before{transition:none}}

/* ============================================================
   СТРАНИЦА РОПА — новая версия. Второй цвет — янтарь из света ламп.
   ============================================================ */
html.tone-rop{--amb:#E0A35A;--amb-lit:#F2BA78}
.hh--rop .hh__eyebrow{color:var(--amb)}
.hh--rop .hh__h em{color:var(--amb-lit)}
.hh--rop .crumbs{margin-bottom:clamp(14px,1.6vw,22px)}
.hh--rop .hh__trust{color:#B4A898}

/* ---- боли: крупный текст, без карточек ---- */
.pl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px);margin-top:clamp(26px,3vw,40px)}
.pl li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--rule)}
.pl__n{font-family:var(--m);font-size:var(--t-data);letter-spacing:.14em;color:var(--amb);padding-top:.5em}
.pl p{font-size:clamp(18px,1.6vw,23px);line-height:1.45;color:#E4E6EA;text-wrap:pretty}
@media(max-width:820px){.pl{grid-template-columns:1fr}}

/* ---- ритм недели: заголовок стоит, пункты загораются по ходу ---- */
.rh__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,84px);align-items:start}
.rh__side{position:sticky;top:clamp(96px,12vh,140px)}
.rh__note{margin-top:14px;font-size:var(--t-lead);line-height:1.5;color:#B8BCC3;max-width:40ch}
.rh__list{list-style:none;position:relative}
.rh__i{position:relative;padding:0 0 clamp(30px,3.4vw,46px) 38px}
.rh__i::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:2px;background:rgba(255,255,255,.1)}
.rh__i:last-child::before{display:none}
.rh__i::after{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;transform:rotate(45deg);
  background:var(--void);border:2px solid var(--amb)}
.rh__when{color:var(--amb)}
.rh__i h3{margin-top:6px;font-size:clamp(22px,2vw,30px);line-height:1.1;letter-spacing:-.02em;
  font-variation-settings:'SHRP' 66,'wght' 640;color:#F3F4F6}
.rh__i p{margin-top:8px;font-size:var(--t-body);line-height:1.6;color:#B8BCC3;max-width:52ch}
@media (prefers-reduced-motion: no-preference){
  .js .rh__i{opacity:.28;transition:opacity .6s ease}
  .js .rh__i::after{transition:background .4s ease}
  .js .rh__i.on{opacity:1}
  .js .rh__i.on::after{background:var(--amb)}
  .js .rh__i.on::before{background:linear-gradient(180deg,var(--amb),rgba(224,163,90,.15))}
}
@media(max-width:900px){.rh__in{grid-template-columns:1fr}.rh__side{position:relative;top:auto}}

/* ---- 18 лет на одной линии ---- */
.tl__scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;margin-top:clamp(30px,3.6vw,50px)}
.tl__scroll:focus-visible{outline:2px solid var(--amb);outline-offset:-2px}
.tl__line{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:clamp(14px,1.6vw,24px);
  max-width:1320px;margin:0 auto;padding:34px var(--pad) 10px;position:relative;min-width:max-content}
.tl__line::before,.tl__line::after{content:"";position:absolute;left:var(--pad);right:var(--pad);top:40px;height:2px}
.tl__line::before{background:rgba(255,255,255,.1)}
.tl__line::after{background:linear-gradient(90deg,var(--red),var(--amb));transform-origin:left}
.tl__i{position:relative;padding-top:24px}
.tl__dot{position:absolute;top:0;left:0;width:14px;height:14px;transform:rotate(45deg);background:var(--void);border:2px solid var(--amb)}
.tl__y{color:var(--amb)}
.tl__i h3{margin-top:8px;font-size:var(--t-body);line-height:1.3;font-variation-settings:'SHRP' 56,'wght' 600;color:#F2F3F5;min-height:2.6em}
.tl__n{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.tl__n b{display:block;font-size:clamp(24px,2vw,32px);line-height:1;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 84,'wght' 660;color:var(--amb-lit);font-variant-numeric:tabular-nums}
.tl__n span{display:block;margin-top:4px;font-size:var(--t-sm);color:#A9AEB6}
@media (prefers-reduced-motion: no-preference){
  .js .tl__line:not(.go)::after{transform:scaleX(0)}
  .js .tl__line::after{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
  .js .tl__line:not(.go) .tl__i{opacity:0;transform:translateY(14px)}
  .js .tl__line .tl__i{transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .js .tl__line.go .tl__i:nth-child(2){transition-delay:.18s}
  .js .tl__line.go .tl__i:nth-child(3){transition-delay:.36s}
  .js .tl__line.go .tl__i:nth-child(4){transition-delay:.54s}
  .js .tl__line.go .tl__i:nth-child(5){transition-delay:.72s}
  .js .tl__line.go .tl__i:nth-child(6){transition-delay:.9s}
}
@media(max-width:760px){
  .tl__scroll{overflow:visible}
  .tl__line{grid-template-columns:1fr;min-width:0;padding:0 var(--pad) 0 calc(var(--pad) + 30px)}
  .tl__line::before,.tl__line::after{left:calc(var(--pad) + 6px);right:auto;top:0;bottom:0;width:2px;height:auto}
  .tl__line::after{background:linear-gradient(180deg,var(--red),var(--amb));transform-origin:top}
  .js .tl__line:not(.go)::after{transform:scaleY(0)}
  .tl__dot{left:-30px;top:4px}
  .tl__i{padding-top:0}
  .tl__i h3{min-height:0}
}

/* ---- три уровня лестницей: каждый следующий шире и выше ---- */
.st3s{list-style:none;display:grid;grid-template-columns:1fr 1.08fr 1.16fr;gap:clamp(12px,1.4vw,18px);
  align-items:end;margin-top:clamp(30px,3.6vw,50px)}
.st3{position:relative}
.st3__in{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);
  --c:22px;clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
  background:radial-gradient(120% 60% at 20% 0%,rgba(224,163,90,.16),transparent 60%),linear-gradient(170deg,#221D18,#17130F 60%,#120F0C);
  border-top:2px solid var(--amb)}
.st3--1 .st3__in{min-height:440px}
.st3--2 .st3__in{min-height:510px}
.st3--3 .st3__in{min-height:580px;background:radial-gradient(120% 60% at 20% 0%,rgba(224,163,90,.26),transparent 62%),linear-gradient(170deg,#2A231C,#1A1511 60%,#130F0C)}
.st3__n{color:var(--amb)}
.st3__h{font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.02em;font-variation-settings:'SHRP' 70,'wght' 650;color:#F5F2EE}
.st3__lead{font-size:var(--t-sm);color:#BDB2A5}
.st3__l{list-style:none;display:flex;flex-direction:column;gap:8px;margin:6px 0 0;flex:1}
.st3__l li{position:relative;padding-left:18px;font-size:var(--t-sm);line-height:1.5;color:#E2DCD4}
.st3__l li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:2px;background:var(--amb)}
.st3--2 .st3__l li:first-child,.st3--3 .st3__l li:first-child{color:var(--amb-lit)}
.st3__price{margin-top:14px;padding-top:14px;border-top:1px solid rgba(224,163,90,.25);
  font-size:clamp(26px,2.4vw,36px);line-height:1;letter-spacing:-.03em;font-variation-settings:'SHRP' 84,'wght' 660;color:#F7F3EE;white-space:nowrap}
.st3__price span{font-size:.5em;color:#BDB2A5;vertical-align:.18em;margin-right:4px}
.st3__price i{font-style:normal;font-family:var(--m);font-size:11px;letter-spacing:.06em;color:#BDB2A5}
.st3s__note{margin-top:18px;color:#A9AEB6;font-size:var(--t-sm)}
@media (prefers-reduced-motion: no-preference){
  .js .st3s:not(.go) .st3{opacity:0;transform:translateY(60px)}
  .js .st3s .st3{transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
  .js .st3s.go .st3--2{transition-delay:.15s}
  .js .st3s.go .st3--3{transition-delay:.3s}
}
@media(max-width:1000px){
  .st3s{grid-template-columns:1fr}
  .st3--1 .st3__in,.st3--2 .st3__in,.st3--3 .st3__in{min-height:0}
}
/* РОП: заголовок длиннее главного — шрифт мельче, колонка чуть шире, кнопка выше сгиба */
.hh--rop .hh__h{font-size:clamp(36px,4.1vw,64px)}
.hh--rop .hh__in>*{max-width:min(640px,48%)}
@media(max-width:980px){.hh--rop .hh__in>*{max-width:none}}
/* линия лет: на широком экране все шесть периодов в кадре; прокрутка — только на средних */
@media(min-width:1100px){
  .tl__scroll{overflow:visible}
  .tl__line{grid-template-columns:repeat(6,minmax(0,1fr));min-width:0}
}

/* ---- первый экран на невысоких окнах (ноутбуки 1366×768, 1536×864 с панелями браузера) ----
   Размеры считаются от высоты окна, чтобы кнопка всегда оставалась выше сгиба */
@media (min-width:981px) and (max-height:900px){
  .hh{min-height:0;align-items:flex-start;padding-top:clamp(18px,3.4vh,40px);padding-bottom:clamp(28px,5vh,56px)}
  .hh__eyebrow{margin-bottom:1.6vh}
  .hh__h{font-size:min(4.9vw,6.6vh)}
  .hh--rop .hh__h{font-size:min(4.1vw,6vh)}
  .hh__sub{margin-top:2vh;font-size:clamp(15px,2.3vh,19px)}
  .hh__act{margin-top:2.6vh}
  .hh__trust{margin-top:2.4vh}
  .hh--rop .crumbs{margin-bottom:1.4vh}
}

/* ============================================================
   РОП v3 — «дорого»: материал, глубина, точные детали
   ============================================================ */

/* ---- боли: колода карт, на обороте решение ---- */
.pn{position:relative;isolation:isolate;overflow:hidden}
.pn__amb{position:absolute;inset:-12%;z-index:-1;opacity:.42;
  background:radial-gradient(38% 48% at 18% 30%,rgba(224,163,90,.30),transparent 70%),
             radial-gradient(34% 44% at 86% 72%,rgba(224,31,38,.14),transparent 70%),
             url(../img/rop-hero-still.webp) center/cover;
  filter:blur(52px) saturate(1.15);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.pn__note{color:#C9BBAA}
.pn__deck{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(34px,4vw,56px);padding-top:24px;perspective:1700px}
.pn__card{position:relative;aspect-ratio:3/4;min-height:330px;cursor:pointer;outline:none;
  transform:rotate(var(--r,0deg)) translateY(var(--y,0px));
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.pn__card:nth-child(1){--r:-4.5deg;--y:18px}
.pn__card:nth-child(2){--r:-1.6deg;--y:4px}
.pn__card:nth-child(3){--r:1.6deg;--y:4px}
.pn__card:nth-child(4){--r:4.5deg;--y:18px}
.pn__in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.pn__card.is-flip .pn__in{transform:rotateY(180deg)}
@media (hover:hover){
  .pn__card:hover{transform:rotate(0) translateY(-14px);z-index:2}
  .pn__card:hover .pn__in{transform:rotateY(180deg)}
}
.pn__card:focus-visible{transform:rotate(0) translateY(-14px);z-index:2}
.pn__card:focus-visible .pn__in{transform:rotateY(180deg)}
.pn__card:focus-visible .pn__b{outline:2px solid #fff;outline-offset:-6px}
.pn__f,.pn__b{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,30px);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  clip-path:polygon(24px 0,100% 0,100% 100%,0 100%,0 24px)}
.pn__f{background:linear-gradient(165deg,#28221C 0%,#18140F 52%,#0F0C0A 100%);
  box-shadow:inset 0 0 0 1px rgba(224,163,90,.26),inset 0 1px 0 rgba(255,255,255,.08),0 40px 70px -40px rgba(0,0,0,.9)}
.pn__f::before{content:"";position:absolute;left:24px;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(242,186,120,.9),transparent)}
.pn__n{font-size:clamp(58px,5vw,86px);line-height:.9;letter-spacing:-.04em;font-variation-settings:'SHRP' 90,'wght' 700;
  color:transparent;-webkit-text-stroke:1.2px rgba(242,186,120,.7)}
.pn__f p{margin-top:auto;font-size:clamp(17px,1.35vw,20px);line-height:1.42;color:#EFE9E2;text-wrap:pretty}
.pn__hint{color:#E0A35A}
.pn__b{transform:rotateY(180deg);color:#1C140C;
  background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.35),transparent 55%),
             linear-gradient(160deg,#F0C28C 0%,#D8A067 50%,#BE8249 100%)}
.pn__lbl{color:#4A3219}
.pn__b p{font-size:clamp(17px,1.35vw,20px);line-height:1.45;font-variation-settings:'wght' 560;color:#1C140C}
.pn__n--b{margin-top:auto;align-self:flex-end;-webkit-text-stroke:1.2px rgba(28,20,12,.35)}
@media (prefers-reduced-motion: no-preference){
  .js .pn__deck:not(.go) .pn__card{opacity:0;transform:translateY(90px) rotate(0)}
  .js .pn__deck.go .pn__card{transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--k) * .11s),opacity .6s ease calc(var(--k) * .11s)}
}
@media (prefers-reduced-motion: reduce){.pn__in{transition:none}}
@media(max-width:1000px){.pn__deck{grid-template-columns:repeat(2,1fr)}.pn__card{--r:0deg!important;--y:0px!important}}
@media(max-width:560px){.pn__deck{grid-template-columns:1fr}.pn__card{aspect-ratio:auto;min-height:280px}}

/* ---- неделя: циферблат, стрелка ходит по шагам ---- */
.dl{position:relative;padding:clamp(56px,7vw,110px) 0}
.dl__pin{position:relative}
.dl__glow{position:absolute;left:0;top:50%;width:min(900px,70vw);aspect-ratio:1;transform:translate(-18%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(224,163,90,.22),rgba(224,31,38,.06) 55%,transparent 72%);filter:blur(20px)}
.dl__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center}
.dl__dial{position:relative;width:min(100%,520px);aspect-ratio:1;justify-self:center}
.dl__svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.dl__rim{fill:none;stroke:rgba(242,186,120,.35);stroke-width:1}
.dl__ring{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
.dl__tk{stroke:rgba(255,255,255,.22);stroke-width:1.2}
.dl__tk--l{stroke:rgba(242,186,120,.75);stroke-width:2}
.dl__track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:3}
.dl__arc{fill:none;stroke-width:3.5;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.dl__lab{font-family:var(--m);font-size:11px;letter-spacing:.16em;fill:rgba(255,255,255,.62);transition:fill .4s ease}
.dl__lab.is-on{fill:#F2BA78}
.dl__needle{transform:rotate(0deg);transition:transform .95s cubic-bezier(.3,1.35,.5,1)}
.dl__needle line{stroke-width:2.5;stroke-linecap:round}
.dl__hub{fill:#17130F;stroke:url(#brass);stroke-width:1.5}
.dl__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dl__num{font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.03em;font-variation-settings:'SHRP' 90,'wght' 680;color:#F2BA78;font-variant-numeric:tabular-nums}
.dl__of{margin-top:4px;color:#9E958A;font-size:10px}
.dl__note{margin-top:12px;font-size:var(--t-lead);line-height:1.5;color:#B9AFA3;max-width:44ch}
.dl__steps{list-style:none;display:grid;margin-top:clamp(26px,3vw,40px)}
.dl__s{grid-area:1/1;transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.dl__w{color:#E0A35A}
.dl__s h3{margin-top:8px;font-size:clamp(30px,3vw,46px);line-height:1.05;letter-spacing:-.03em;font-variation-settings:'SHRP' 76,'wght' 660;color:#F6F2EC}
.dl__s p{margin-top:12px;font-size:var(--t-lead);line-height:1.55;color:#C9C0B5;max-width:42ch}
.dl__bar{display:flex;gap:6px;margin-top:clamp(26px,3vw,40px)}
.dl__bar i{flex:1;height:3px;background:rgba(255,255,255,.12);transition:background .4s ease}
.dl__bar i.is-on{background:linear-gradient(90deg,#E0A35A,#F2BA78)}
/* без закрепления (узкий экран, экономия движения, нет JS): все пункты списком */
.dl:not(.dl--pin) .dl__s{grid-area:auto;padding:18px 0;border-top:1px solid var(--rule)}
.dl:not(.dl--pin) .dl__s h3{font-size:clamp(22px,2vw,28px)}
.dl:not(.dl--pin) .dl__bar{display:none}
/* закреплённый режим: блок стоит на экране, пока стрелка обходит пять делений */
.dl--pin{padding:0;height:calc(100vh + 4 * 62vh)}
.dl--pin .dl__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:74px}
.dl--pin .dl__s{opacity:0;transform:translateY(16px);pointer-events:none}
.dl--pin .dl__s.is-on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:899px){.dl__in{grid-template-columns:1fr}.dl__dial{width:min(100%,360px)}}
/* карта выше, цифра скромнее, текст не растёт бесконечно с шириной окна — всё помещается */
.pn__card{aspect-ratio:3/4.5;min-height:360px}
.pn__n{font-size:clamp(50px,4.2vw,70px)}
.pn__f p,.pn__b p{font-size:clamp(16px,1.2vw,18.5px)}
@media(max-width:560px){.pn__card{aspect-ratio:auto;min-height:280px}}
@media(min-width:561px) and (max-width:1000px){.pn__card{aspect-ratio:auto;height:380px;min-height:0}}

/* заголовок в два уровня: боль — крупно, предложение — мельче и янтарём. Для поисковика — один H1 */
.hh__h--two .h1__big{display:block}
.hh__h--two .h1__sub{display:block;margin-top:.32em;font-size:.5em;line-height:1.18;letter-spacing:-.02em;
  font-variation-settings:'SHRP' 70,'wght' 600}
.hh--rop .hh__h--two{font-size:clamp(40px,4.7vw,74px)}
@media (min-width:981px) and (max-height:900px){.hh--rop .hh__h--two{font-size:min(4.7vw,7vh)}}

/* ============================================================
   РОП v4 — первый экран с портретом
   ============================================================ */
.hp{position:relative;isolation:isolate;overflow:hidden;background:#0B0907;
  min-height:min(94vh,940px);display:flex;align-items:flex-end;padding:0 var(--pad)}
.hp__bg{position:absolute;inset:-6%;z-index:-2;
  background:radial-gradient(40% 55% at 72% 38%,rgba(242,186,120,.26),transparent 70%),
             radial-gradient(60% 70% at 20% 70%,rgba(224,31,38,.07),transparent 70%),
             url(../img/rop-hero-still.webp) center/cover;
  filter:blur(28px) saturate(1.1) brightness(.55);transform:translate3d(var(--bx,0),var(--by,0),0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.hp::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,9,7,.92) 0%,rgba(11,9,7,.7) 38%,rgba(11,9,7,.1) 60%,transparent 75%),
             linear-gradient(0deg,var(--void) 0%,transparent 22%)}
.hp__in{position:relative;max-width:1320px;width:100%;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:end}
.hp__copy{align-self:center;padding:clamp(40px,6vh,90px) 0 clamp(40px,7vh,100px)}
.hp__copy .hh__h{max-width:none}
.hp__eyebrow{color:var(--amb)}
.hp__ph{position:relative;margin:0;align-self:end;justify-self:center;width:100%;max-width:560px;
  transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.hp__frame{position:relative;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 64% 78% at 50% 44%,#000 60%,transparent 96%);
          mask-image:radial-gradient(ellipse 64% 78% at 50% 44%,#000 60%,transparent 96%)}
.hp__frame img{display:block;width:100%;height:auto;max-height:min(86vh,820px);object-fit:cover;object-position:50% 10%}
.hp__sweep{position:absolute;inset:-20% -60%;pointer-events:none;mix-blend-mode:soft-light;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,236,210,.9) 50%,transparent 58%);transform:translateX(-60%)}
.hp__cap{position:absolute;left:4%;bottom:clamp(20px,4vh,44px);display:flex;flex-direction:column;gap:4px;
  padding-left:14px;border-left:1px solid var(--amb)}
.hp__cap b{font-size:var(--t-body);font-variation-settings:'wght' 620;color:#F6F2EC}
.hp__cap .data{color:#C9B59C}
@media (prefers-reduced-motion: no-preference){
  .js .hp:not(.go) .hp__frame{opacity:0;transform:translateY(26px);filter:brightness(.35)}
  .js .hp .hp__frame{transition:opacity 1.2s ease .15s,transform 1.4s cubic-bezier(.16,1,.3,1) .15s,filter 1.6s ease .15s}
  .js .hp.go .hp__sweep{animation:hpSweep 1.8s cubic-bezier(.4,0,.2,1) 1.2s both}
  .js .hp:not(.go) .hp__copy>*{opacity:0;transform:translateY(18px)}
  .js .hp .hp__copy>*{transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
  .js .hp.go .hp__copy>*:nth-child(2){transition-delay:.08s}
  .js .hp.go .hp__copy>*:nth-child(3){transition-delay:.16s}
  .js .hp.go .hp__copy>*:nth-child(4){transition-delay:.3s}
  .js .hp.go .hp__copy>*:nth-child(5){transition-delay:.42s}
  .js .hp.go .hp__copy>*:nth-child(6){transition-delay:.52s}
}
@keyframes hpSweep{0%{opacity:0;transform:translateX(-60%)}15%{opacity:.8}85%{opacity:.8}100%{opacity:0;transform:translateX(60%)}}
@media (min-width:981px) and (max-height:900px){
  .hp{min-height:0}
  .hp__copy{padding:clamp(18px,3.4vh,40px) 0 clamp(28px,5vh,56px)}
  .hp__frame img{max-height:calc(100vh - 74px)}
}
@media(max-width:980px){
  .hp{display:block;padding:0 var(--pad)}
  .hp__in{grid-template-columns:1fr}
  .hp__copy{padding:28px 0 8px}
  .hp__ph{max-width:420px;margin:0 auto}
  .hp::after{background:linear-gradient(0deg,var(--void) 0%,transparent 30%)}
}

/* ============================================================
   РОП v4 — восемнадцать лет: лента эпох по горизонтали
   ============================================================ */
.ep{position:relative;padding:clamp(56px,7vw,100px) 0}
.ep__note{margin-top:12px;max-width:62ch;font-size:var(--t-body);line-height:1.55;color:#B9AFA3}
.ep__view{margin-top:clamp(24px,3vw,40px)}
.ep__track{list-style:none;display:flex;flex-direction:column;gap:18px;padding:0 var(--pad)}
.ep__p{position:relative;overflow:hidden;isolation:isolate;min-height:360px;
  --c:26px;clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));background:#0E0B09}
.ep__img{position:absolute;inset:0;z-index:-2}
.ep__img img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.ep__p::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,8,6,.94) 0%,rgba(10,8,6,.78) 36%,rgba(10,8,6,.2) 62%,transparent 80%)}
.ep__p::after{content:"";position:absolute;left:var(--c);right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(242,186,120,.8),transparent 60%)}
.ep__tx{position:relative;display:flex;flex-direction:column;height:100%;padding:clamp(24px,3vw,44px);max-width:min(520px,52%)}
.ep__yr{font-size:clamp(84px,9vw,168px);line-height:.82;letter-spacing:-.05em;font-variation-settings:'SHRP' 92,'wght' 720;
  color:transparent;-webkit-text-stroke:1.3px rgba(242,186,120,.55);margin-bottom:auto}
.ep__rng{margin-top:18px;color:#E0A35A}
.ep__tx h3{margin-top:8px;font-size:clamp(22px,2vw,30px);line-height:1.1;letter-spacing:-.02em;font-variation-settings:'SHRP' 70,'wght' 650;color:#F6F2EC}
.ep__n{list-style:none;display:flex;gap:clamp(20px,3vw,44px);margin-top:18px}
.ep__n li{display:flex;flex-direction:column;gap:4px}
.ep__n b{display:block;overflow:hidden;font-size:clamp(30px,3vw,48px);line-height:1.02;letter-spacing:-.03em;
  font-variation-settings:'SHRP' 88,'wght' 680;color:#F2BA78;font-variant-numeric:tabular-nums}
.ep__n b span{display:block}
.ep__n i{font-style:normal;font-size:var(--t-sm);color:#C4B8AA;max-width:18ch}
.ep__rail{display:none}
/* закреплённый режим: блок стоит, прокрутка листает эпохи вбок */
.ep--pin{padding:0;height:calc(100vh + 5 * 80vh)}
.ep--pin .ep__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:calc(74px + clamp(18px,3.5vh,40px)) 0 clamp(18px,3.5vh,36px)}
.ep--pin .ep__view{flex:1;min-height:0;overflow:hidden}
.ep--pin .ep__track{flex-direction:row;gap:clamp(16px,1.6vw,26px);height:100%;will-change:transform;
  padding:0 max(var(--pad),calc((100vw - 1320px) / 2))}
.ep--pin .ep__p{flex:0 0 min(76vw,1160px);height:100%;min-height:0;
  transform:scale(.94);transform-origin:50% 50%;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.ep--pin .ep__img img{filter:brightness(.45) saturate(.8);transition:filter .8s ease}
.ep--pin .ep__p.is-on{transform:scale(1)}
.ep--pin .ep__p.is-on .ep__img img{filter:none}
.ep--pin .ep__n b span{transform:translateY(105%);transition:transform .75s cubic-bezier(.16,1,.3,1)}
.ep--pin .ep__n li:nth-child(2) b span{transition-delay:.1s}
.ep--pin .ep__p.is-on .ep__n b span{transform:none}
.ep--pin .ep__rail{display:block;margin-top:clamp(14px,2.4vh,26px)}
.ep__line{position:relative;height:2px;background:rgba(255,255,255,.1)}
.ep__fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--red),#F2BA78);transform-origin:left;transform:scaleX(0)}
.ep__labs{display:flex;justify-content:space-between;margin-top:10px}
.ep__lab{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:#8E857A;transition:color .4s ease}
.ep__lab.is-on{color:#F2BA78}
@media(max-width:899px){.ep__tx{max-width:none}.ep__p::before{background:linear-gradient(0deg,rgba(10,8,6,.95) 20%,rgba(10,8,6,.5) 70%,rgba(10,8,6,.3))}}
/* портрет растворяется раньше и мягче — без читаемого прямоугольника */
.hp__frame{-webkit-mask-image:radial-gradient(ellipse 58% 74% at 50% 42%,#000 46%,transparent 90%);
          mask-image:radial-gradient(ellipse 58% 74% at 50% 42%,#000 46%,transparent 90%)}
/* правый край экрана: гасим светлое окно размытой комнаты */
.hp::after{background:linear-gradient(90deg,rgba(11,9,7,.92) 0%,rgba(11,9,7,.7) 38%,rgba(11,9,7,.1) 60%,transparent 72%,rgba(11,9,7,.55) 92%,rgba(11,9,7,.85) 100%),
             linear-gradient(0deg,var(--void) 0%,transparent 22%)}
/* в закреплённом блоке шапка и шкала — во всю ширину колонки, а не по содержимому */
.ep--pin .ep__head,.ep--pin .ep__rail{width:min(100% - 2 * var(--pad),1320px);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.ep--pin .ep__labs{padding-right:64px}
/* подпись с именем — своя тёмная подложка, как табличка: контраст не зависит от того, что на снимке под ней */
.hp__cap{padding:10px 26px 10px 14px;
  background:linear-gradient(90deg,rgba(11,9,7,.9) 0%,rgba(11,9,7,.72) 70%,rgba(11,9,7,.35) 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ep__n b span{white-space:nowrap}
/* эпохи на узком экране: фотография полосой сверху, текст под ней на тёмном — контраст не зависит от снимка */
@media(max-width:899px){
  .ep__p{display:flex;flex-direction:column;min-height:0}
  .ep__p::before{display:none}
  .ep__img{position:relative;inset:auto;z-index:0;aspect-ratio:16/9}
  .ep__img img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .ep__tx{margin-top:-64px;padding-top:0;height:auto}
  .ep__yr{margin-bottom:0;font-size:clamp(70px,20vw,110px)}
}
/* верх портрета: растворяется по добавленному запасу — без среза. Эллипс сдвинут вниз вместе с фигурой.
   Две маски пересекаются: сверху — линейная, по бокам и снизу — эллипс */
.hp__frame{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%),radial-gradient(ellipse 60% 70% at 50% 52%,#000 50%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,#000 15%),radial-gradient(ellipse 60% 70% at 50% 52%,#000 50%,transparent 92%);
  mask-composite:intersect}
.hp__frame img{object-position:50% 0}

/* ============================================================
   amoCRM v2 — технологичная: живые отчёты, свет интерфейса
   ============================================================ */
html.tone-crm{--cy:#6CB8F2;--cy-lit:#A6D6FB;--cy-dim:rgba(108,184,242,.18)}

/* ---- первый экран: живой дашборд в перспективе ---- */
.hc{position:relative;isolation:isolate;overflow:hidden;background:#07090C;min-height:min(92vh,920px);
  display:flex;align-items:center;padding:clamp(40px,6vh,80px) var(--pad)}
.hc__grid{position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(108,184,242,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(108,184,242,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 72% 45%,#000 20%,transparent 75%)}
.hc__glow{position:absolute;z-index:-1;right:-12%;top:-10%;width:min(1100px,90vw);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(108,184,242,.22),rgba(60,110,200,.10) 45%,transparent 72%);filter:blur(24px)}
.hc__in{max-width:1320px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,3vw,56px);align-items:center}
.hc__eyebrow{color:var(--cy)}
.hc__h .h1__big{font-size:1em}
.hc__h{font-size:clamp(36px,4.2vw,66px)}
.hc__h .h1__sub{color:var(--cy-lit);font-size:.44em}
.hc__trust a{border-bottom-color:rgba(108,184,242,.7)}
.hc .crumbs{margin-bottom:clamp(14px,1.6vw,22px)}
.hc__stage{position:relative;height:clamp(420px,40vw,560px);perspective:1800px}
.hc__rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(-14deg + var(--ry,0deg))) rotateX(calc(6deg + var(--rx,0deg)));
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.dw{position:absolute;padding:16px 18px;border:1px solid rgba(166,214,251,.16);
  background:linear-gradient(160deg,rgba(28,38,52,.86),rgba(12,17,24,.9));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
.dw__t{color:#8FA5BA}
.dw__v{display:block;margin-top:4px;font-size:30px;line-height:1;letter-spacing:-.03em;font-variation-settings:'wght' 660;color:#EAF4FD;font-variant-numeric:tabular-nums}
.dw--line{left:0;top:4%;width:62%;transform:translateZ(40px)}
.dw__svg{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}
.dw__ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.dw__ln--a{stroke:var(--cy)}.dw__ln--b{stroke:rgba(166,214,251,.45)}
.dw--donut{right:2%;top:0;width:36%;aspect-ratio:1;display:grid;place-items:center;transform:translateZ(90px)}
.dw--donut .dn__svg{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
.dw__c{position:relative;text-align:center}
.dw__c b{display:block;font-size:26px;letter-spacing:-.03em;font-variation-settings:'wght' 680;color:#EAF4FD;font-variant-numeric:tabular-nums}
.dw__c .data{color:#8FA5BA}
.dw--goal{left:8%;bottom:6%;width:54%;transform:translateZ(70px)}
.dw--ai{right:0;bottom:18%;width:44%;display:flex;gap:12px;align-items:flex-start;transform:translateZ(130px)}
.dw__av{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#FFB38A,#E0567E 60%,#7A3BD1);color:#fff;font-weight:700;font-size:14px}
.dw--ai p{font-size:13px;line-height:1.45;color:#D5E4F1}
.dw--ai b{display:block;font-size:12px;color:var(--cy-lit);margin-bottom:2px}
/* кольцо */
.dn__t{fill:none;stroke:rgba(255,255,255,.06)}
.dn__s{fill:none}
.dn--win{stroke:var(--cy);background:var(--cy)}
.dn--lost{stroke:rgba(166,190,214,.35);background:rgba(166,190,214,.35)}
.dn--rep{stroke:var(--cy-lit);background:var(--cy-lit)}
.dn--oth{stroke:#E0A35A;background:#E0A35A}
/* план месяца */
.gl{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:10px}
.gl li{display:grid;grid-template-columns:86px 1fr 28px 10px;align-items:center;gap:8px;font-size:12px;color:#B8C8D8}
.gl__bar{height:6px;background:rgba(255,255,255,.08);overflow:hidden}
.gl__bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#3E7FC7,var(--cy));transform-origin:left}
.gl b{font-variation-settings:'wght' 640;color:#EAF4FD;text-align:right;font-variant-numeric:tabular-nums}
.gl em{font-style:normal;color:#8FA5BA}
/* вход дашборда: виджеты собираются, линии прорисовываются */
@media (prefers-reduced-motion: no-preference){
  .js .hc:not(.go) .dw{opacity:0}
  .js .hc:not(.go) .dw--line{transform:translateZ(40px) translateY(40px)}
  .js .hc:not(.go) .dw--donut{transform:translateZ(90px) translateY(-40px)}
  .js .hc:not(.go) .dw--goal{transform:translateZ(70px) translateX(-40px)}
  .js .hc:not(.go) .dw--ai{transform:translateZ(130px) translateX(40px)}
  .js .hc .dw{transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1)}
  .js .hc.go .dw--donut{transition-delay:.12s}.js .hc.go .dw--goal{transition-delay:.24s}.js .hc.go .dw--ai{transition-delay:1.1s}
  .js .hc .dw__ln{stroke-dasharray:1;stroke-dashoffset:1}
  .js .hc.go .dw__ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .35s}
  .js .hc .dn__s{stroke-dasharray:0 999}
  .js .hc.go .dn__s{stroke-dasharray:calc(var(--len) - 1.5) 999;transition:stroke-dasharray .9s cubic-bezier(.16,1,.3,1) calc(.4s + var(--i) * .18s)}
  .js .hc .gl__bar i{transform:scaleX(0)}
  .js .hc.go .gl__bar i{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) calc(.5s + var(--i) * .12s)}
}
@media (min-width:981px) and (max-height:900px){
  .hc{min-height:0;padding:clamp(18px,3.4vh,40px) var(--pad) clamp(28px,5vh,56px)}
  .hc__h{font-size:min(4.2vw,6.4vh)}
  .hc__stage{height:min(40vw,62vh)}
}
@media(max-width:980px){
  .hc__in{grid-template-columns:1fr}
  .hc__stage{height:clamp(320px,78vw,460px)}
  .hc__rig{transform:rotateY(-8deg) rotateX(4deg)}
}

/* ---- хаос → порядок ---- */
.co__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.co__btn{flex:0 0 auto}
.co__b2{display:none}
.co.is-order .co__b1{display:none}.co.is-order .co__b2{display:inline}
.co__board{position:relative;height:470px;margin-top:clamp(28px,3.4vw,46px);
  border:1px solid rgba(166,214,251,.10);background:
  radial-gradient(60% 80% at 50% 40%,rgba(108,184,242,.06),transparent 70%),linear-gradient(180deg,rgba(16,21,28,.6),rgba(10,13,18,.6))}
.co__cols span{position:absolute;top:18px;left:calc(var(--ox) + 12px);font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cy);opacity:0;transform:translateY(-6px);transition:opacity .5s ease .5s,transform .5s ease .5s}
.co.is-order .co__cols span{opacity:1;transform:none}
.co__cols span::after{content:"";position:absolute;left:0;right:-20px;top:22px;height:1px;background:linear-gradient(90deg,var(--cy),transparent)}
.co__list{list-style:none}
.co__c{position:absolute;left:0;top:0;width:calc(25% - 24px);margin-left:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(160deg,#1A222D,#121820);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.9);
  transform:translate(var(--cx),var(--cy)) rotate(var(--cr));
  transition:transform 1s cubic-bezier(.2,.9,.25,1) calc(var(--k) * .06s),border-color .5s ease,background .5s ease}
.co__c .co__src{color:#8FA5BA}
.co__c b{font-size:15px;font-variation-settings:'wght' 600;color:#EEF4FA}
.co__st{font-size:12px;line-height:1.35}
.co__st--bad{color:#FF8A8E}
.co__st--ok{color:var(--cy-lit);display:none}
.co.is-order .co__c{transform:translate(var(--ox),var(--oy)) rotate(0);border-color:rgba(108,184,242,.35);background:linear-gradient(160deg,#18283A,#111B26)}
.co.is-order .co__st--bad{display:none}.co.is-order .co__st--ok{display:block}
/* translate в % берётся от ширины карточки — пересчитываю через ширину доски */
/* сдвиг в долях «карточка + зазор 24px»: % в translate считается от ширины самой карточки */
.co__c{transform:translate(calc(var(--cxn) * (100% + 24px)),var(--cy)) rotate(var(--cr))}
.co.is-order .co__c{transform:translate(calc(var(--oc) * (100% + 24px)),var(--oy)) rotate(0)}
@media (prefers-reduced-motion: reduce){.co__c{transition:none}}
@media(max-width:760px){
  .co__board{height:640px}
  .co__cols{display:none}
  .co__c{width:78%;margin-left:0;transform:translate(calc(var(--mcxn) * 100%),var(--mcy)) rotate(var(--cr))}
  .co.is-order .co__c{transform:translate(14.1%,var(--my)) rotate(0)}
}

/* ---- что настраиваю: бенто ---- */
.fxs{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);grid-auto-flow:dense;
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.4vw,46px)}
.fx{position:relative;overflow:hidden;isolation:isolate;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  background:linear-gradient(168deg,#18202A,#121820 60%,#0E131A);border:1px solid rgba(166,214,251,.09)}
.fx::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(108,184,242,.16),transparent 60%)}
.fx:hover::before{opacity:1}
.fx h3{font-size:var(--t-lead);line-height:1.12;letter-spacing:-.02em;font-variation-settings:'SHRP' 62,'wght' 620;color:#F0F5FA}
.fx p{font-size:var(--t-sm);line-height:1.5;color:#A9B8C6;max-width:46ch}
.fx--big{grid-column:span 2;grid-row:span 2;justify-content:space-between;clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px)}
.fx--big h3{font-size:clamp(32px,3.4vw,52px);letter-spacing:-.035em;line-height:1}
.fx--big p{font-size:var(--t-body);color:#C6D4E1}
.fx--big::after{content:"";position:absolute;right:-18%;top:-24%;width:78%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(closest-side,rgba(122,59,209,.28),rgba(108,184,242,.16) 55%,transparent 75%);filter:blur(12px)}
.fx--wide{grid-column:span 2}
@media(max-width:1000px){.fxs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fxs{grid-template-columns:1fr}.fx--big,.fx--wide{grid-column:auto;grid-row:auto}}

/* ---- цифры каждый день: отчёты ---- */
.ans{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(28px,3.4vw,46px)}
.anw{padding:clamp(18px,2vw,26px);background:linear-gradient(168deg,#141B24,#0F141B);border:1px solid rgba(166,214,251,.09);display:flex;flex-direction:column;gap:14px;min-width:0}
.anw__hd .data{color:var(--cy)}
.anw__hd h3{margin-top:4px;font-size:var(--t-lead);line-height:1.1;font-variation-settings:'wght' 620;color:#F0F5FA}
.anw--line{grid-column:span 3}
.anw--fun{grid-column:span 2}
.anw__note{font-size:var(--t-sm);color:#A9B8C6;line-height:1.5}
/* большой график */
.lc{position:relative}
.lc__svg{display:block;width:100%;height:auto;overflow:visible}
.lc__g{stroke:rgba(255,255,255,.06);stroke-width:1}
.lc__yl{font-family:var(--m);font-size:11px;fill:#6F8193}
.lc__area{fill:url(#none);fill:rgba(108,184,242,.08)}
.lc__ln{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.lc__ln--a{stroke:var(--cy)}.lc__ln--b{stroke:rgba(166,214,251,.4)}
.lc__d{fill:#0F141B;stroke:var(--cy);stroke-width:2}
.lc__cur{stroke:rgba(166,214,251,.5);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .2s ease}
.lc.is-hover .lc__cur{opacity:1}
.lc__tip{position:absolute;top:0;left:0;padding:6px 10px;font-family:var(--m);font-size:11px;letter-spacing:.04em;color:#EAF4FD;
  background:rgba(14,20,28,.95);border:1px solid rgba(108,184,242,.4);pointer-events:none;opacity:0;transition:opacity .15s ease;white-space:nowrap}
.lc.is-hover .lc__tip{opacity:1}
/* кольцо в отчёте */
.dn{position:relative;width:min(100%,220px);aspect-ratio:1;margin:0 auto}
.dn .dn__svg{width:100%;height:100%}
.dn__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dn__c b{font-size:28px;letter-spacing:-.03em;font-variation-settings:'wght' 680;color:#EAF4FD;font-variant-numeric:tabular-nums}
.dn__c .data{color:#8FA5BA}
.dn__lg{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#B8C8D8}
.dn__lg i{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px}
/* воронка повторных покупок */
.fn{list-style:none;display:flex;flex-direction:column;gap:8px}
.fn li{display:grid;grid-template-columns:86px 1fr 44px 48px;align-items:center;gap:10px;font-size:12.5px;color:#B8C8D8}
.fn__bar{height:14px;background:rgba(255,255,255,.05);overflow:hidden}
.fn__bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#2F6BB0,var(--cy));transform-origin:left}
.fn b{font-variation-settings:'wght' 650;color:#EAF4FD;text-align:right;font-variant-numeric:tabular-nums}
.fn__gap{font-family:var(--m);font-size:11px;color:#6F8193}
/* план и показатели */
.gl--big li{grid-template-columns:96px 1fr 32px 10px;font-size:13px}
.gl--big .gl__bar{height:10px}
.kp{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.kp .data{color:#8FA5BA}
.kp b{display:block;margin-top:2px;font-size:clamp(26px,2.4vw,36px);line-height:1;letter-spacing:-.03em;font-variation-settings:'wght' 680;color:#EAF4FD;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: no-preference){
  .js .an .lc__ln{stroke-dasharray:1;stroke-dashoffset:1}
  .js .an.go .lc__ln{stroke-dashoffset:0;transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1)}
  .js .an .lc__area{opacity:0}.js .an.go .lc__area{opacity:1;transition:opacity 1s ease 1.4s}
  .js .an .lc__d{opacity:0}.js .an.go .lc__d{opacity:1;transition:opacity .3s ease calc(var(--i) * .06s + .2s)}
  .js .an .dn__s{stroke-dasharray:0 999}
  .js .an.go .dn__s{stroke-dasharray:calc(var(--len) - 1.5) 999;transition:stroke-dasharray 1s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i) * .2s)}
  .js .an .fn__bar i,.js .an .gl__bar i{transform:scaleX(0)}
  .js .an.go .fn__bar i,.js .an.go .gl__bar i{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(.4s + var(--i) * .12s)}
}
@media(max-width:1000px){.ans{grid-template-columns:repeat(2,1fr)}.anw--line{grid-column:span 2}}
@media(max-width:620px){.ans{grid-template-columns:1fr}.anw--line,.anw--fun{grid-column:auto}}

/* ---- почему я ---- */
.wy__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(20px,2.4vw,32px)}
.wy__cols p{font-size:var(--t-lead);line-height:1.6;color:#C6D0DA}
.wy__cols p:first-child{padding-left:20px;border-left:2px solid var(--cy)}
@media(max-width:820px){.wy__cols{grid-template-columns:1fr}}
.pc2{background:radial-gradient(90% 140% at 100% 50%,rgba(108,184,242,.18),transparent 60%),linear-gradient(168deg,#18202A,#10151C)}
.pc2 .data{color:var(--cy)}
.pc2 .price-crm__v,.pc2 .price-crm__t{color:#EEF4FA}
/* первый экран: план и сообщение Аммы не пересекаются по горизонтали */
.dw--goal{left:0;bottom:4%;width:54%}
.dw--ai{right:0;bottom:auto;top:50%;width:42%}
/* дашборд — полотно 620×480, масштабируется целиком под сцену: расположение виджетов одинаковое на любом экране */
.hc__rig{inset:auto;left:50%;top:50%;width:620px;height:480px;
  transform:translate(-50%,-50%) scale(var(--s,1)) rotateY(calc(-14deg + var(--ry,0deg))) rotateX(calc(6deg + var(--rx,0deg)))}
.dw--line{left:0;top:30px;width:370px}
.dw--donut{left:400px;right:auto;top:0;width:210px;height:210px;aspect-ratio:auto}
.dw--ai{left:372px;right:auto;top:250px;bottom:auto;width:248px}
.dw--goal{left:0;top:320px;bottom:auto;width:346px}
@media(max-width:980px){.hc__rig{transform:translate(-50%,-50%) scale(var(--s,1)) rotateY(-8deg) rotateX(4deg)}}
.dw--line{width:356px}
.dw--ai{left:396px;width:224px}
/* ось графика и интервалы воронки: было 4,45 при норме 4,5 */
.lc__yl{fill:#8597AA}
.fn__gap{color:#8597AA}
@media(max-width:760px){.co__board{height:680px}}

/* ============================================================
   АУДИТ v2 — диагностика. Второй цвет — тепло, как на тепловизоре
   ============================================================ */
html.tone-audit{--ht:#FF7A3D;--ht-lit:#FFB36B;--ht-hot:#FFD36E}

/* ---- первый экран: заголовок по центру, полоса диагностики ---- */
.ha{position:relative;isolation:isolate;overflow:hidden;background:#090706;padding:clamp(34px,5vh,72px) 0 0}
.ha__heat{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 45% at 50% 100%,rgba(255,122,61,.22),transparent 70%),radial-gradient(30% 30% at 50% 20%,rgba(224,31,38,.08),transparent 70%)}
.ha__in{text-align:center;display:flex;flex-direction:column;align-items:center}
.ha .crumbs{justify-content:center;margin-bottom:clamp(14px,1.6vw,20px)}
.ha__eyebrow{color:var(--ht-lit)}
.ha__h{margin-top:clamp(12px,1.4vw,18px);max-width:17ch;font-size:clamp(38px,4.8vw,78px);text-wrap:balance}
.ha__h .h1__sub{max-width:36ch;margin-left:auto;margin-right:auto;color:var(--ht-lit);font-size:.4em;line-height:1.3}
.ha__act{justify-content:center}
.ha__trust{justify-content:center}
.ha__band{max-width:1320px;margin:clamp(28px,4vh,52px) auto 0;padding:0 var(--pad)}
.ha__frame{position:relative;overflow:hidden;aspect-ratio:21/8;background:#0E0B09;
  --c:28px;clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c))}
.ha__still,.ha__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.ha__vid{display:none}.js .ha__vid{display:block}
.ha__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,7,6,.75),transparent 40%),linear-gradient(90deg,rgba(9,7,6,.5),transparent 20%,transparent 80%,rgba(9,7,6,.5))}
/* уголки видоискателя */
.ha__corners{position:absolute;inset:16px;z-index:2;pointer-events:none;
  background:
   linear-gradient(var(--ht),var(--ht)) top left/22px 2px no-repeat,linear-gradient(var(--ht),var(--ht)) top left/2px 22px no-repeat,
   linear-gradient(var(--ht),var(--ht)) top right/22px 2px no-repeat,linear-gradient(var(--ht),var(--ht)) top right/2px 22px no-repeat,
   linear-gradient(var(--ht),var(--ht)) bottom left/22px 2px no-repeat,linear-gradient(var(--ht),var(--ht)) bottom left/2px 22px no-repeat,
   linear-gradient(var(--ht),var(--ht)) bottom right/22px 2px no-repeat,linear-gradient(var(--ht),var(--ht)) bottom right/2px 22px no-repeat}
/* линия сканера — один проход */
.ha__scan{position:absolute;top:0;bottom:0;left:0;width:22%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,122,61,.12) 70%,rgba(255,211,110,.75) 99%,transparent);mix-blend-mode:screen}
@media (prefers-reduced-motion: no-preference){.js .ha.go .ha__scan{animation:haScan 2.4s cubic-bezier(.45,0,.2,1) .6s both}}
@keyframes haScan{0%{opacity:0;transform:translateX(-100%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(460%)}}
.ha__lbl{position:absolute;left:28px;bottom:22px;z-index:2;color:#F3D9C4}
@media (min-width:981px) and (max-height:900px){
  .ha{padding-top:clamp(16px,3vh,36px)}
  .ha__h{font-size:min(4.8vw,6.6vh)}
  .ha__band{margin-top:3vh}
}
@media(max-width:700px){.ha__frame{aspect-ratio:4/3}.ha__h{max-width:none}}

/* ---- тепловая карта пути клиента ---- */
.hm__path{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:clamp(28px,3.4vw,46px)}
.hm__st{position:relative;height:64px;display:flex;align-items:flex-end;padding:0 12px 10px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#1B1714,#12100E);border:1px solid rgba(255,255,255,.07)}
.hm__st:first-child{clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
.hm__st b{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#A89C90;transition:color .4s ease}
.hm__heat{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .7s ease;
  background:radial-gradient(90% 120% at 50% 110%,rgba(255,211,110,.85),rgba(255,122,61,.55) 38%,rgba(224,31,38,.35) 62%,transparent 85%)}
.hm__st.hot .hm__heat{opacity:1}
.hm__st.hot b{color:#1B0F08;font-weight:600}
@media (prefers-reduced-motion: no-preference){.hm__st.hot .hm__heat{animation:hmFlare .9s ease-out}}
@keyframes hmFlare{0%{filter:brightness(2.2)}100%{filter:none}}
.hm__pains{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.hm__pains li{position:relative}
.hm__pains .pain__in{position:absolute;opacity:0;pointer-events:none}
.hm__pains .pain__l{display:flex;flex-direction:column;gap:10px;height:100%;min-height:210px;padding:16px 14px;cursor:pointer;
  background:#110F0D;border:1px solid rgba(255,255,255,.07);transition:background .35s ease,border-color .35s ease}
.hm__pains .pain__l:hover{border-color:rgba(255,179,107,.45)}
.hm__pains .pain__in:focus-visible+.pain__l{outline:2px solid var(--ht);outline-offset:2px}
.hm__pains .pain__in:checked+.pain__l{background:linear-gradient(180deg,#2A1A10,#1A110C);border-color:rgba(255,122,61,.65)}
.pain__st{display:none;color:var(--ht-lit)}
.hm__pains .pain__n{font-family:var(--m);font-size:var(--t-data);letter-spacing:.14em;color:#8F8378}
.hm__pains .pain__t{font-size:var(--t-sm);line-height:1.45;color:#E6DFD8;flex:1}
.hm__pains .pain__mark{width:22px;height:22px;border:1.5px solid rgba(255,255,255,.3);position:relative;transition:background .25s ease,border-color .25s ease}
.hm__pains .pain__in:checked+.pain__l .pain__mark{background:var(--ht);border-color:var(--ht)}
.hm__pains .pain__in:checked+.pain__l .pain__mark::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #1B0F08;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hm__gauge{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);gap:clamp(16px,2.4vw,40px);align-items:center;
  margin-top:clamp(20px,2.4vw,32px);padding:clamp(20px,2.4vw,30px);background:linear-gradient(168deg,#1A1511,#110E0C);border:1px solid rgba(255,255,255,.08)}
.hm__gauge .gauge__top{display:flex;align-items:baseline;gap:8px}
.hm__gauge .gauge__n{font-size:clamp(46px,4.4vw,68px);line-height:1;letter-spacing:-.04em;font-variation-settings:'wght' 700;color:#FFF4EA;font-variant-numeric:tabular-nums}
.hm__gauge .gauge__top .data{color:#A89C90}
.hm__gauge .gauge__bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;height:14px}
.hm__gauge .gauge__bar i{background:rgba(255,255,255,.08);transition:background .4s ease}
.hm__gauge .gauge__bar i.on:nth-child(1){background:#E0361F}.hm__gauge .gauge__bar i.on:nth-child(2){background:#EF5423}
.hm__gauge .gauge__bar i.on:nth-child(3){background:#FF7A3D}.hm__gauge .gauge__bar i.on:nth-child(4){background:#FF9A4F}
.hm__gauge .gauge__bar i.on:nth-child(5){background:#FFB86B}.hm__gauge .gauge__bar i.on:nth-child(6){background:#FFD36E}
.hm__gauge .gauge__v{font-size:var(--t-body);line-height:1.5;color:#E6DFD8;transition:opacity .24s ease}
.hm__gauge .gauge__v.swap,.hm__gauge .gauge__go.swap{opacity:0}
.hm__gauge .gauge__go{grid-column:3;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;transition:opacity .24s ease}
.hm__gauge .gauge__go:empty{display:none}
@media(max-width:1000px){
  .hm__path{display:none}
  .hm__pains{grid-template-columns:1fr 1fr}
  .pain__st{display:block}
  .hm__pains .pain__l{min-height:0}
  .hm__gauge{grid-template-columns:1fr}
  .hm__gauge .gauge__go{grid-column:auto}
}
@media(max-width:560px){.hm__pains{grid-template-columns:1fr}}

/* ---- отчёт: папка с закладками ---- */
.dc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;margin-top:clamp(28px,3.4vw,46px);align-items:start}
.dc__stack{position:relative;min-height:440px}
.dc__stack::before,.dc__stack::after{content:"";position:absolute;left:14px;right:-10px;top:14px;bottom:-14px;z-index:-1;
  background:#EDE6DC;opacity:.14;clip-path:polygon(24px 0,100% 0,100% 100%,0 100%,0 24px)}
.dc__stack::after{left:28px;right:-20px;top:28px;bottom:-28px;opacity:.07}
.dc__page{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,40px);
  background:linear-gradient(170deg,#F6F1EA,#ECE4D8);color:#1E1712;
  clip-path:polygon(24px 0,100% 0,100% 100%,0 100%,0 24px);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.dc__page[hidden]{display:flex;visibility:hidden}
.dc__ph{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid rgba(30,23,18,.14)}
.dc__ph .data{color:#8A6D55}
.dc__page h3{font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.03em;font-variation-settings:'SHRP' 70,'wght' 660;color:#1E1712}
.dc__page p{font-size:var(--t-body);line-height:1.55;color:#4A3D33;max-width:56ch}
.dc__lines{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.dc__lines i{display:block;height:7px;width:100%;background:rgba(30,23,18,.09)}
@media (prefers-reduced-motion: no-preference){
  .dc__page.is-on{animation:dcUp .55s cubic-bezier(.16,1,.3,1)}
}
@keyframes dcUp{from{transform:translateY(22px) rotate(-.6deg);opacity:.2}to{transform:none;opacity:1}}
.dc__tabs{display:flex;flex-direction:column;gap:6px;padding-top:18px}
.dc__tab{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px 10px 18px;text-align:left;cursor:pointer;
  font:inherit;font-size:var(--t-sm);line-height:1.3;color:#C9BEB2;background:#15110E;border:1px solid rgba(255,255,255,.08);border-left:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.dc__tab .data{color:var(--ht)}
.dc__tab:hover{color:#F3EBE2;transform:translateX(4px)}
.dc__tab[aria-selected="true"]{background:linear-gradient(90deg,#F3ECE2,#E6DDCF);color:#1E1712;transform:translateX(-2px)}
.dc__tab[aria-selected="true"] .data{color:#B4532A}
.dc__tab:focus-visible{outline:2px solid var(--ht);outline-offset:2px}
.dc__note{margin-top:22px;font-size:var(--t-sm);color:#9A8F84}
/* эскизы разделов — без цифр */
.sk{display:block;margin-top:6px}
.sk i{display:block}
.sk--fun{display:flex;flex-direction:column;gap:6px}.sk--fun i{height:14px;width:var(--w);background:linear-gradient(90deg,#C9432A,#E8874A)}
.sk--wave{display:flex;align-items:center;gap:4px;height:64px}.sk--wave i{flex:1;height:var(--h);background:#C9432A;opacity:.75}
.sk--chk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sk--chk i{height:30px;background:rgba(30,23,18,.07);position:relative}
.sk--chk i::before{content:"";position:absolute;left:10px;top:9px;width:12px;height:12px;border-radius:50%}
.sk--chk i.ok::before{background:#5E9C54}.sk--chk i.no::before{background:#C9432A}
.sk--bars{display:flex;align-items:flex-end;gap:10px;height:90px}.sk--bars i{flex:1;height:var(--h);background:linear-gradient(0deg,#C9432A,#E8874A)}
.sk--plan{position:relative;height:80px}.sk--plan i{position:absolute;height:10px;left:var(--x);width:var(--w);background:#E8874A}
.sk--plan i:nth-child(1){top:0}.sk--plan i:nth-child(2){top:17px}.sk--plan i:nth-child(3){top:34px}.sk--plan i:nth-child(4){top:51px}.sk--plan i:nth-child(5){top:68px}
.sk--call{display:flex;gap:10px}.sk--call i{width:64px;height:64px;border-radius:50%;background:rgba(30,23,18,.1)}.sk--call i:first-child{background:#E8874A}
@media(max-width:900px){
  .dc{grid-template-columns:1fr}
  .dc__tabs{order:-1;flex-direction:row;overflow-x:auto;padding:0 0 12px;gap:6px;scrollbar-width:none}
  .dc__tab{flex:0 0 auto;border-left:1px solid rgba(255,255,255,.08);clip-path:none}
  .dc__stack{min-height:480px}
}

/* ---- условия: крупная типографика в строку ---- */
.tm{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tm li{padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,28px);border-left:1px solid var(--rule)}
.tm li:first-child{border-left:0;padding-left:0}
.tm .data{color:var(--ht-lit)}
.tm b{display:block;margin-top:10px;font-size:clamp(28px,2.8vw,42px);line-height:1;letter-spacing:-.03em;font-variation-settings:'SHRP' 84,'wght' 660;color:#FBF4EC;white-space:nowrap}
.tm p{margin-top:12px;font-size:var(--t-sm);line-height:1.5;color:#B4A89C}
.tm__after{margin-top:22px;max-width:70ch;font-size:var(--t-body);line-height:1.6;color:#C9BEB2}
@media(max-width:900px){.tm{grid-template-columns:1fr 1fr}.tm li:nth-child(3){border-left:0;padding-left:0}.tm li:nth-child(n+3){border-top:1px solid var(--rule)}}
@media(max-width:520px){.tm{grid-template-columns:1fr}.tm li{border-left:0;padding-left:0}.tm li+li{border-top:1px solid var(--rule)}}
/* старое правило для светлого листа красило текст отмеченной боли почти чёрным — на тёмной карточке он пропадал */
.hm__pains .pain__in:checked+.pain__l,.hm__pains .pain__in:checked+.pain__l .pain__t{color:#FFF1E6}
.hm__pains .pain__in:checked+.pain__l .pain__n{color:var(--ht-lit)}
.hm__pains .pain__in:checked+.pain__l{padding-left:14px}
.hm__pains .pain__l::after{display:none}
/* свечение этапа — ровное по ширине снизу: под тёмной подписью всегда раскалённый фон, а не угасающий край */
.hm__heat{background:linear-gradient(0deg,#FFC766 0%,#FF9A4F 38%,rgba(255,122,61,.55) 62%,rgba(224,31,38,.22) 85%,transparent 100%)}
.hm__st.hot b{color:#1A0D05}
.dc__ph .data{color:#6F5340}
/* новое видео аудита: труба в средней полосе, капли ниже — кадр чуть смещён вниз, чтобы капли не срезались */
.ha__still,.ha__vid{object-position:50% 56%}
/* на телефоне 2:1: в видео вшиты чёрные полосы сверху и снизу — при 4:3 они были бы видны */
@media(max-width:700px){.ha__frame{aspect-ratio:2/1}}
/* плитка аудита на главной: теперь там труба — показываю середину кадра, а не верх */
.tile--audit .tile__media img{object-position:50% 50%}
/* подпись полосы — своя тёмная подложка: на телефоне она ложилась на светящуюся каплю */
.ha__lbl{padding:5px 10px;background:rgba(9,7,6,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:700px){.ha__lbl{left:14px;bottom:12px;font-size:10px;max-width:calc(100% - 28px)}.ha__corners{inset:8px}}

/* ============================================================
   АУДИТ — просмотрщик отчёта: тёплое стекло, живые эскизы, автопролистывание
   ============================================================ */
.rp__box{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);margin-top:clamp(30px,3.6vw,50px);align-items:center}
.rp__tabs{display:flex;flex-direction:column;gap:2px}
.rp__tab{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:center;min-height:56px;padding:12px 16px;text-align:left;cursor:pointer;
  font:inherit;font-size:var(--t-body);line-height:1.3;color:#A99D91;background:transparent;border:0;border-left:2px solid rgba(255,255,255,.08);
  transition:color .3s ease,background .3s ease,border-color .3s ease}
.rp__tab:hover{color:#F1E6DB}
.rp__tab[aria-selected="true"]{color:#FFF3E8;border-left-color:var(--ht);background:linear-gradient(90deg,rgba(255,122,61,.16),rgba(255,122,61,0) 85%)}
.rp__tab:focus-visible{outline:2px solid var(--ht);outline-offset:2px}
.rp__no{font-family:var(--m);font-size:11px;letter-spacing:.12em;color:#8F8378}
.rp__tab[aria-selected="true"] .rp__no{color:var(--ht-lit)}
.rp__bar{position:absolute;left:-2px;top:0;bottom:0;width:2px;opacity:0}
.rp__bar i{display:block;width:100%;height:calc(var(--p,0) * 100%);background:linear-gradient(180deg,#FFD36E,#FF7A3D)}
.rp.is-auto .rp__tab[aria-selected="true"] .rp__bar{opacity:1}
.rp__play{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:16px;padding:0 14px 0 12px;cursor:pointer;
  font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#B4A89C;background:transparent;border:1px solid rgba(255,255,255,.12)}
.rp__play:hover{color:#FFF3E8;border-color:rgba(255,179,107,.5)}
.rp__play:focus-visible{outline:2px solid var(--ht);outline-offset:2px}
.rp__play svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rp__play .i-play{fill:currentColor;stroke:none;display:none}
.rp__play[aria-pressed="true"] .i-pause{display:none}.rp__play[aria-pressed="true"] .i-play{display:block}
.rp__stage{perspective:1700px}
.rp__rig{position:relative;display:grid;transform-style:preserve-3d;
  transform:rotateY(calc(-5deg + var(--ry,0deg))) rotateX(calc(2deg + var(--rx,0deg)));transition:transform .8s cubic-bezier(.16,1,.3,1)}
.rp__ghost{grid-area:1/1;border:1px solid rgba(255,179,107,.10);background:linear-gradient(160deg,#1A1410,#100C0A);
  clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px)}
.rp__ghost--1{transform:translate3d(16px,16px,-40px);opacity:.6}
.rp__ghost--2{transform:translate3d(32px,32px,-80px);opacity:.3}
.rp__page{grid-area:1/1;position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,38px);min-height:440px;
  background:radial-gradient(70% 60% at 100% 0%,rgba(255,122,61,.16),transparent 62%),linear-gradient(160deg,#241B15,#16110D 58%,#110D0A);
  border:1px solid rgba(255,179,107,.2);clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transform:translateY(26px) rotateX(-6deg);filter:blur(6px);
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1),filter .55s ease}
.rp__page[hidden]{display:flex;visibility:hidden}
.rp__page.is-on{opacity:1;transform:none;filter:none}
.rp__page.is-out{opacity:0;transform:translateY(-20px) rotateX(5deg);filter:blur(4px)}
.rp__ph{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,179,107,.14);
  font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#C99C77}
.rp__page h3{margin-top:4px;font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.03em;font-variation-settings:'SHRP' 72,'wght' 660;color:#FFF3E8}
.rp__page p{font-size:var(--t-body);line-height:1.55;color:#CDBFB2;max-width:56ch}
.rp__note{margin-top:22px;font-size:var(--t-sm);color:#9A8F84}
/* ---- живые эскизы разделов (цифр нет — это форма раздела) ---- */
.v{margin-top:auto;padding-top:10px}
.v-fun__row{position:relative;height:16px;margin-bottom:16px}
.v-fun__row i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#E0361F,#FF7A3D 60%,#FFB86B);transform-origin:left;transform:scaleX(0)}
.is-on .v-fun__row i{transform:none;transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--i) * .12s)}
.v-drip{position:absolute;top:18px;left:calc(var(--w) * .92);width:6px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#FFB86B;box-shadow:0 0 8px rgba(255,160,80,.8);opacity:0}
.is-on .v-drip{animation:vDrip 1.7s cubic-bezier(.5,0,.9,.6) calc(1s + var(--i) * .35s) 3}
@keyframes vDrip{0%{opacity:0;transform:translateY(-4px) scale(.4)}15%{opacity:1;transform:none}100%{opacity:0;transform:translateY(22px) scale(.8)}}
.v-wave{position:relative;padding-top:22px}
.v-wave__t{display:flex;align-items:center;gap:3px;height:92px}
.v-wave__t i{flex:1;height:var(--h);background:#6E5C4F;transform:scaleY(.12);transition:transform .5s ease}
.is-on .v-wave__t i{transform:none;transition:transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i) * 16ms)}
.v-mark{position:absolute;top:18px;bottom:-4px;left:var(--x);width:var(--w);border:1px dashed rgba(255,122,61,.7);background:rgba(255,122,61,.12);opacity:0}
.v-mark em{position:absolute;left:0;top:-20px;font-style:normal;font-family:var(--m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ht-lit);white-space:nowrap}
.is-on .v-mark{opacity:1;transition:opacity .5s ease .9s}.is-on .v-mark--2{transition-delay:1.2s}
.v-chk{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.v-chk li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font-size:var(--t-sm);color:#D9CCBF}
.v-chk i{flex:0 0 20px;height:20px;border-radius:50%;position:relative;opacity:0;transform:scale(.4)}
.v-chk i.ok{background:#5E9C54}.v-chk i.no{background:#E0361F}
.v-chk i.ok::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #0E0B09;border-width:0 2px 2px 0;transform:rotate(45deg)}
.v-chk i.no::before,.v-chk i.no::after{content:"";position:absolute;left:9px;top:5px;width:2px;height:10px;background:#0E0B09;transform:rotate(45deg)}
.v-chk i.no::after{transform:rotate(-45deg)}
.is-on .v-chk i{opacity:1;transform:none;transition:opacity .3s ease calc(.4s + var(--i) * .18s),transform .4s cubic-bezier(.3,1.6,.5,1) calc(.4s + var(--i) * .18s)}
.v-mg{position:relative;display:flex;gap:14px;height:180px}
.v-mg__c{flex:1;position:relative}
.v-mg__c i{position:absolute;left:0;right:0;bottom:38%;height:calc(var(--h) * .6);background:linear-gradient(0deg,#E0361F,#FF7A3D 60%,#FFB86B);transform-origin:bottom;transform:scaleY(0)}
.v-mg__c--neg i{bottom:auto;top:62%;height:18%;background:linear-gradient(180deg,#E0361F,#8E1B12);transform-origin:top}
.is-on .v-mg__c i{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i) * .1s)}
.v-mg__c em{position:absolute;left:0;right:0;bottom:0;text-align:center;font-style:normal;font-family:var(--m);font-size:10px;letter-spacing:.06em;color:#A99D91}
.v-mg__c--neg em{color:#FF8A6E}
.v-mg__axis{position:absolute;left:0;right:0;top:62%;height:1px;background:rgba(255,255,255,.25)}
.v-pl__w{display:grid;grid-template-columns:96px repeat(4,1fr);font-family:var(--m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#A99D91;margin-bottom:8px}
.v-pl__w span:first-child{grid-column:2}
.v-pl__r{display:grid;grid-template-columns:96px 1fr;align-items:center;height:26px;font-size:var(--t-sm);color:#D9CCBF}
.v-pl__r span{padding-right:8px}
.v-pl__r i{position:relative;display:block;height:10px;margin-left:var(--x);width:var(--w);background:linear-gradient(90deg,#FF7A3D,#FFB86B);transform-origin:left;transform:scaleX(0)}
.is-on .v-pl__r i{transform:none;transition:transform .7s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i) * .16s)}
.v-call{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.v-call__p{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#241C16;border:1px solid rgba(255,255,255,.12)}
.v-call__p b{font-size:18px;color:#F1E6DB;font-variation-settings:'wght' 600}
.v-call__p--me{background:radial-gradient(circle at 30% 30%,#FFD36E,#FF7A3D 60%,#C9432A)}
.v-call__p--me b{color:#1A0D05}
.v-call__wave{display:flex;align-items:center;gap:4px;height:40px}
.v-call__wave i{width:4px;height:30%;background:var(--ht)}
.is-on .v-call__wave i{animation:vTalk .9s ease-in-out 4}
.v-call__wave i:nth-child(2){animation-delay:.12s}.v-call__wave i:nth-child(3){animation-delay:.24s}.v-call__wave i:nth-child(4){animation-delay:.36s}.v-call__wave i:nth-child(5){animation-delay:.48s}
@keyframes vTalk{0%,100%{height:30%}50%{height:100%}}
.v-call__t{margin-left:auto;font-family:var(--m);font-size:clamp(28px,2.6vw,40px);letter-spacing:.04em;color:#FFF3E8;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  .rp__page,.rp__rig{transition:none;filter:none}
  .v *{transition:none!important;animation:none!important}
  .v-fun__row i,.v-wave__t i,.v-mg__c i,.v-pl__r i{transform:none}.v-chk i,.v-mark{opacity:1;transform:none}
}
@media(max-width:900px){
  .rp__box{grid-template-columns:1fr}
  .rp__nav{display:flex;flex-direction:column;gap:10px}
  .rp__tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
  .rp__tab{flex:0 0 auto;grid-template-columns:auto auto;gap:8px;border-left:0;border-bottom:2px solid rgba(255,255,255,.08)}
  .rp__tab[aria-selected="true"]{border-bottom-color:var(--ht);background:linear-gradient(0deg,rgba(255,122,61,.16),transparent)}
  .rp__bar{left:0;right:0;top:auto;bottom:-2px;width:auto;height:2px}
  .rp__bar i{height:100%;width:calc(var(--p,0) * 100%)}
  .rp__play{margin-top:0;align-self:flex-start}
  .rp__rig{transform:none}
  .rp__ghost{display:none}
  .rp__page{min-height:0}
  .v-chk{grid-template-columns:1fr}
}
.v-fun__row{display:block}
/* колонка «1fr» не сжимается меньше содержимого — лента закладок раздвигала страницу. Нулевой минимум: лента листается внутри */
@media(max-width:900px){.rp__box{grid-template-columns:minmax(0,1fr)}.rp__nav,.rp__stage{min-width:0}}

/* ============================================================
   САЙТЫ v2 — первый экран: заголовок в два уровня, ноутбучные окна
   ============================================================ */
.hs__h.hh__h--two{font-size:clamp(36px,4.3vw,70px)}
.hs__h .h1__sub{color:#E8B48C;font-size:.44em;line-height:1.3}
@media (min-width:981px) and (max-height:900px){
  .hs{min-height:0;padding-top:clamp(16px,3vh,36px);padding-bottom:clamp(24px,4vh,48px)}
  .hs__h.hh__h--two{font-size:min(4.3vw,6.4vh)}
  .hs__eyebrow{margin-bottom:1.4vh}
  .hs__act{margin-top:2.4vh}
  .hs__stage{height:min(44vw,70vh)}
}

/* ============================================================
   САЙТЫ v2 — «Сайт собирается на глазах»: один макет, шесть этапов.
   Этапы накопительные: класс st-N означает «пройдено N этапов».
   ============================================================ */
.ms{position:relative;padding:clamp(56px,7vw,100px) 0}
.ms__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.4vw,80px);align-items:center}
.ms__note{margin-top:12px;font-size:var(--t-body);line-height:1.55;color:#B9AFA5;max-width:44ch}
.ms__steps{list-style:none;margin-top:clamp(20px,2.4vw,32px);display:flex;flex-direction:column}
.ms__s{display:grid;grid-template-columns:40px 1fr;gap:4px;padding:12px 0;border-top:1px solid var(--rule);transition:opacity .45s ease}
.ms__n{color:#C9743A;padding-top:4px}
.ms__s h3{font-size:var(--t-lead);line-height:1.15;font-variation-settings:'SHRP' 62,'wght' 620;color:#F5EFE8}
.ms__s p{margin-top:4px;font-size:var(--t-sm);line-height:1.45;color:#B9AFA5;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .45s ease}
.ms__bar{display:none;gap:5px;margin-top:18px}
.ms__bar i{flex:1;height:3px;background:rgba(255,255,255,.1);transition:background .4s ease}
.ms__bar i.is-on{background:linear-gradient(90deg,#C9743A,#E0935A)}
/* окно браузера */
.ms__stage{position:relative;padding:4% 8% 8% 0}
.ms__browser{position:relative;--c:20px;clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
  background:#0F0E0D;border:1px solid rgba(255,255,255,.1);box-shadow:0 60px 110px -60px rgba(0,0,0,.95)}
.ms__browser::before{content:"";position:absolute;inset:-30% -20% auto auto;width:70%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(closest-side,rgba(201,116,58,.28),transparent 72%);filter:blur(16px)}
.ms__top{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 28px;background:#161412;border-bottom:1px solid rgba(255,255,255,.06)}
.ms__top i{width:7px;height:7px;background:#3A3632}
.ms__url{margin-left:10px;padding:3px 12px;font-family:var(--m);font-size:10.5px;letter-spacing:.04em;color:#A0968C;background:rgba(255,255,255,.05)}
.ms__page{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;aspect-ratio:16/11}
/* блоки будущего сайта */
.mb{position:relative;border:1.5px dashed transparent;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),border-color .5s ease,background .6s ease}
.mb .mb{opacity:1;transform:none}
.mb__lbl{position:absolute;left:8px;top:6px;font-family:var(--m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#C9BFB5;opacity:0;transition:opacity .4s ease}
.mb b,.mb i{display:block;background:rgba(255,255,255,.12);transition:background .6s ease}
.mb--nav{display:flex;align-items:center;gap:10px;height:22px;padding:0 8px}
.mb--nav b{width:44px;height:8px}.mb--nav i{width:30px;height:5px}.mb--nav .mb__cta{margin-left:auto;width:54px;height:12px}
.mb--hero{flex:1.3;display:grid;grid-template-columns:1.15fr 1fr;gap:12px;padding:12px}
.mb__copy{display:flex;flex-direction:column;justify-content:center;gap:7px;padding-top:12px}
.mb__copy b{height:13px;width:92%}.mb__copy b+b{width:70%}.mb__copy i{height:6px;width:80%;margin-top:4px}
.mb__cta{display:block;width:40%;height:15px;background:rgba(255,255,255,.18);transition:background .6s ease}
.mb__copy .mb__cta{margin-top:8px}
.mb__img{background:rgba(255,255,255,.06);transition:background .8s ease}
.mb--row{flex:.8;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:1;transform:none;border:0}
.mb--card{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px;border:1.5px dashed transparent;opacity:0;transform:translateY(10px)}
.mb--card .mb__ico{width:18px;height:18px;margin-bottom:auto;margin-top:14px}
.mb--card b{height:6px;width:86%}.mb--card b+b{width:60%}
.mb--bottom{flex:.9;display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:1;transform:none;border:0}
.mb--calc,.mb--form{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px;border:1.5px dashed transparent;opacity:0;transform:translateY(10px)}
.mb--calc i,.mb--form i{height:12px}
.mb--calc .mb__range{height:4px;margin-top:4px}
.mb__btn{display:block;height:15px;width:52%;background:rgba(255,255,255,.18);transition:background .6s ease}
/* этап 0 — только схема воронки */
.ms__funnel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;transition:opacity .5s ease,transform .6s ease}
.ms__funnel span{width:calc(var(--w) * .7);padding:7px 0;text-align:center;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#F5E6D8;background:linear-gradient(90deg,rgba(201,116,58,.35),rgba(224,147,90,.5),rgba(201,116,58,.35));border:1px solid rgba(224,147,90,.5)}
/* этап 1 — прототип: серые блоки пунктиром, подписи */
.ms.st-1 .ms__funnel{opacity:0;transform:scale(.94)}
.ms.st-1 .mb,.ms.st-1 .mb--card,.ms.st-1 .mb--calc,.ms.st-1 .mb--form{opacity:1;transform:none;border-color:rgba(255,255,255,.26)}
.ms.st-1 .mb--row,.ms.st-1 .mb--bottom{border-color:transparent}
.ms.st-1 .mb__lbl{opacity:1}
.ms.st-1 .mb--card{transition-delay:calc(var(--i) * .08s)}
/* этап 2 — дизайн: цвета, картинка, заголовки */
.ms.st-2 .mb,.ms.st-2 .mb--card,.ms.st-2 .mb--calc,.ms.st-2 .mb--form{border-color:transparent;border-style:solid}
.ms.st-2 .mb__lbl{opacity:0}
.ms.st-2 .mb--nav{background:#171513}
.ms.st-2 .mb--nav b{background:#F3ECE4}
.ms.st-2 .mb--hero{background:linear-gradient(135deg,#1C1714,#120F0D)}
.ms.st-2 .mb__copy b{background:#F7F1EA}
.ms.st-2 .mb__copy i{background:rgba(247,241,234,.4)}
.ms.st-2 .mb__cta,.ms.st-2 .mb__btn{background:linear-gradient(90deg,#E01F26,#C9743A)}
.ms.st-2 .mb__img{background:radial-gradient(60% 70% at 60% 40%,#E0935A,#9B4E24 55%,#2A1A12)}
.ms.st-2 .mb--card,.ms.st-2 .mb--calc,.ms.st-2 .mb--form{background:#171412}
.ms.st-2 .mb--card .mb__ico{background:linear-gradient(135deg,#E0935A,#C9743A)}
.ms.st-2 .mb--card b,.ms.st-2 .mb--calc i,.ms.st-2 .mb--form i{background:rgba(247,241,234,.22)}
.ms.st-2 .mb--calc .mb__range{background:linear-gradient(90deg,#C9743A 62%,rgba(255,255,255,.15) 62%)}
/* этап 3 — сборка: мобильная версия и код */
.ms__phone{position:absolute;right:0;bottom:0;width:24%;aspect-ratio:9/18;padding:5px;border-radius:18px;background:#1B1917;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);opacity:0;transform:translate(30px,20px) rotate(4deg);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.ms__phone-in{height:100%;border-radius:13px;overflow:hidden;background:#12100E;display:flex;flex-direction:column;gap:6px;padding:10px 8px}
.ms__phone-in b{height:6px;width:40%;background:#F3ECE4}
.mp__img{height:28%;background:radial-gradient(60% 70% at 60% 40%,#E0935A,#9B4E24 55%,#2A1A12)}
.ms__phone-in i{height:6px;background:rgba(247,241,234,.35)}.ms__phone-in i+i{width:70%}
.ms__phone-in .mb__cta{width:60%;height:12px;background:linear-gradient(90deg,#E01F26,#C9743A)}
.mp__card{flex:1;background:#1B1815}
.ms__code{position:absolute;top:10px;right:10px;padding:4px 8px;font-family:var(--m);font-size:11px;color:#E0935A;border:1px solid rgba(224,147,90,.5);background:rgba(14,12,10,.85);opacity:0;transition:opacity .4s ease}
.ms.st-3 .ms__phone{opacity:1;transform:none}
.ms.st-3 .ms__code{opacity:1}
/* этап 4 — заявка из формы уходит в amoCRM */
.ms__toast{position:absolute;right:12px;bottom:12px;display:flex;gap:10px;align-items:center;padding:10px 12px;max-width:62%;
  background:rgba(20,26,34,.95);border:1px solid rgba(108,184,242,.45);box-shadow:0 20px 40px -20px rgba(0,0,0,.9);opacity:0;transform:translate(-30%,10px) scale(.9);
  transition:opacity .45s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.ms__toast-i{flex:0 0 10px;height:10px;border-radius:50%;background:#6CB8F2;box-shadow:0 0 0 4px rgba(108,184,242,.2)}
.ms__toast b{display:block;font-size:12px;color:#EAF4FD;font-variation-settings:'wght' 620}
.ms__toast span{display:block;font-family:var(--m);font-size:10px;color:#9FC3E2;margin-top:2px}
.ms.st-4 .ms__toast{opacity:1;transform:translate(0,-160%) scale(1)}
.ms.st-4 .mb--form{box-shadow:inset 0 0 0 1.5px rgba(108,184,242,.6)}
/* этап 5 — запуск: график заявок */
.ms__chart{position:absolute;left:-6%;top:22%;width:30%;padding:10px 12px;background:rgba(18,16,14,.92);border:1px solid rgba(224,147,90,.35);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.ms__chart .data{display:block;font-size:9.5px;color:#C9BFB5}
.ms__chart svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.ms__chart path{fill:none;stroke:#E0935A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease .3s}
.ms.st-5 .ms__chart{opacity:1;transform:none}
.ms.st-5 .ms__chart path{stroke-dashoffset:0}
/* закреплённый режим: блок стоит на экране, этапы идут по прокрутке */
.ms--pin{padding:0;height:calc(100vh + 5 * 65vh)}
.ms--pin .ms__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:74px}
.ms--pin .ms__s{opacity:.35}
.ms--pin .ms__s.is-on{opacity:1}
.ms--pin .ms__s.is-on p{max-height:4em;opacity:1}
.ms--pin .ms__bar{display:flex}
/* без закрепления (телефон, экономия движения): готовый сайт и все этапы списком */
.ms:not(.ms--pin) .ms__s p{max-height:none;opacity:1}
@media (prefers-reduced-motion: reduce){.ms *{transition:none!important}}
@media (min-width:900px) and (max-height:820px){.ms--pin .ms__s{padding:8px 0}.ms--pin .ms__note{display:none}}
@media(max-width:899px){
  .ms__in{grid-template-columns:1fr}
  .ms__stage{order:-1;padding:0 12% 10% 0;margin-bottom:8px}
  .ms__chart{left:auto;right:-2%;top:-6%;width:40%}
}
/* вложенные блоки до этапа прототипа скрыты — иначе они просвечивали под схемой воронки */
.ms .mb--row .mb--card,.ms .mb--bottom .mb--calc,.ms .mb--bottom .mb--form{opacity:0;transform:translateY(10px)}
.ms.st-1 .mb--row .mb--card,.ms.st-1 .mb--bottom .mb--calc,.ms.st-1 .mb--bottom .mb--form{opacity:1;transform:none}
/* телефон слева, уведомление справа от формы, график поверх картинки — никто никого не закрывает */
.ms__stage{padding:4% 0 8% 8%}
.ms__phone{right:auto;left:0;transform:translate(-30px,20px) rotate(-4deg)}
.ms.st-3 .ms__phone{transform:none}
.ms__chart{left:auto;right:4%;top:15%;width:34%}
@media(max-width:899px){.ms__stage{padding:0 0 10% 12%}.ms__chart{right:3%;top:12%;width:40%}}
/* свечение за окном браузера выходит за правый край окна — обрезаю по краю секции.
   clip, а не hidden: не создаёт своей прокрутки и не ломает закрепление блока */
#kak{overflow-x:clip}
/* «Прокручивайте — соберётся» — правда только в закреплённом режиме */
.ms__note-pin{display:none}.ms--pin .ms__note-pin{display:inline}.ms--pin .ms__note-st{display:none}
/* главная: заголовок в два уровня — срочность в самом заголовке */
.hh__h--main .h1__big em{font-style:normal;color:var(--red-lit)}
.hh__h--main .h1__sub{color:#F3C9A8}
/* два номера после «Позвонить»: страна мелкой меткой */
.tel{display:inline-flex;flex-wrap:wrap;gap:10px}
.tel__cc{font-family:var(--m);font-size:10px;letter-spacing:.1em;opacity:.75;margin-left:6px}
.ftr .tel{flex-direction:column;gap:2px}

/* ---- плашка согласия на cookie: не перекрывает кнопку «наверх», не мешает читать ---- */
.cc{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:60;max-width:min(560px,calc(100vw - 24px));
  display:flex;flex-direction:column;gap:12px;padding:16px 18px;color:#E6E1DA;
  background:rgba(16,15,14,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
.cc[hidden]{display:none}
.cc__t{font-size:var(--t-sm);line-height:1.5;color:#D6D0C8}
.cc__t a{color:#F2EDE6;border-bottom:1px solid rgba(224,31,38,.7);padding:12px 0;margin:-12px 0}
.cc__act{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.cc__yes{min-height:44px}
.cc__no{min-height:44px;padding:0 6px;font:inherit;font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#C9C2B8;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.3);cursor:pointer}
.cc__no:hover{color:#fff}
.cc__no:focus-visible,.cc__t a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
html.cc-open .totop{bottom:calc(clamp(12px,2vw,24px) + 8px)}
@media(max-width:620px){
  .cc{left:8px;right:8px;bottom:8px;max-width:none}
  html.cc-open .totop{display:none}
}
/* страница согласия: текущий выбор и кнопки */
.cs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:18px 0 24px;padding:16px 18px;border:1px solid var(--rule);background:rgba(255,255,255,.03)}
.cs__st{margin:0;font-family:var(--m);font-size:12px;letter-spacing:.06em}
.cs__act{display:flex;gap:12px;align-items:center}
.doc .crumbs{margin-bottom:18px}
/* экономия движения: вывод под цепочкой виден сразу, не ждёт анимации (правило должно быть сильнее «спрятать до анимации») */
@media (prefers-reduced-motion: reduce){.js .chn:not(.go) .chn__fix,.js .chn .chn__fix{opacity:1;transform:none}}
/* ссылки в плашке согласия — 44 px по высоте */
.cc__t a{padding:13px 0;margin:-13px 0}
/* строка цен на сайты: три цены в ряд, эквивалент в долларах мелко, приписка с кнопкой строкой ниже */
.px--3{grid-template-columns:repeat(3,1fr)}
.px--3 .px__i--note{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-right:0}
.px--3 .px__i--note p{margin-bottom:0;max-width:62ch}
.px__fx{margin-top:8px;font-family:var(--m);font-size:13px;letter-spacing:.06em;color:#A9AEB6}
@media(max-width:820px){.px--3{grid-template-columns:1fr}}