:root{
  /* ——— ЕДИНАЯ ПАЛИТРА ———
     Светлый тёплый лист, оранжевый акцент, тёмно-синие детали.
     Тёмной темы у сайта нет: один набор значений на все страницы. */

  --fgc:11,26,58;                 /* текст — тёмно-синий, в каналах RGB */
  --bg:#FBF8F4;                   /* тёплая слоновая кость */

  /* Акцент. --cyan — заливки, точки, полосы, кольцо фокуса.
     --ice — тот же акцент в тексте: темнее, контраст 4.9 к фону. */
  --cyan:#EA580C;--ice:#C2410C;--accent-rgb:234,88,12;--on-accent:#fff;
  --brand:#F97316;--deep:#0B1A3A;--navy:#12275C;

  --pill-bg:#EA580C;--pill-fg:#fff;--pill-bg-h:#C2410C;
  --card-bg:linear-gradient(135deg,#ffffff,rgba(255,255,255,.92));
  --card-bg-pro:linear-gradient(135deg,#ffffff,#FFF2E6);
  /* Именно градиент, а не #ffffff. Обычное состояние карточки —
     градиент; браузер умеет плавно менять градиент на градиент, но не
     градиент на сплошной цвет. Из-за прежнего плоского значения
     карточка при наведении на полсекунды становилась прозрачной. */
  --card-bg-h:linear-gradient(135deg,#ffffff,#ffffff);
  --card-bd:rgba(11,26,58,.12);
  --mock-bg:rgba(255,255,255,.96);
  --side-bg:rgba(11,26,58,.035);
  --glass-bg:rgba(255,255,255,.76);
  --glass-edge-1:rgba(11,26,58,.14);
  --glass-edge-2:rgba(11,26,58,.05);
  --glass-inset:rgba(255,255,255,.9);
  --glow-c:rgba(234,88,12,.10);
  --wm-1:rgba(11,26,58,.9);--wm-2-flat:#C2410C;
  --wm-grad:linear-gradient(to right,#0B1A3A 0%,#12275C 24%,#B24A12 62%,#F97316 100%);
  --shiny-grad:linear-gradient(to right,#0B1A3A 0%,#1B3A78 12.5%,#C2410C 32.5%,#F97316 50%,#C2410C 67.5%,#1B3A78 87.5%,#0B1A3A 100%);
  --veil:radial-gradient(160% 90% at 50% -20%,rgba(249,115,22,.09),transparent 72%),
         radial-gradient(150% 80% at 50% 120%,rgba(18,39,92,.05),transparent 75%),
         linear-gradient(to bottom,rgba(251,248,244,.56),rgba(251,248,244,.76));
  --bg-op:.62;
  --red:#BE123C;--amb:#8A5A12;--ok:#15803D;--err:#BE123C;
  --req-fg:#12275C;--req-bg:rgba(18,39,92,.06);--req-bd:rgba(18,39,92,.2);

  --wrap:1160px;--pad:24px;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
body{margin:0;background:var(--bg);color:rgb(var(--fgc));font-size:16px;line-height:1.6;overflow-x:hidden}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html:not(.is-smooth){scroll-behavior:smooth}
::selection{background:rgba(var(--accent-rgb),.26)}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;overflow-wrap:break-word}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--pill-bg);color:var(--pill-fg);padding:12px 18px;z-index:300}
.skip:focus{left:12px;top:12px}

#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--bg-op)}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--veil)}
.page{position:relative;z-index:10}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--deep),var(--cyan));transform:scaleX(0);transform-origin:0 50%}
#smooth{position:relative;z-index:10}
html.is-smooth #smooth{position:fixed;top:0;left:0;width:100%;will-change:transform;z-index:10}

.rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ——— шапка ——— */
.nav{position:relative;z-index:60;padding-top:22px}
.nav__in{display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:rgb(var(--fgc))}
.mark{height:24px;width:auto;flex:none;color:rgb(var(--fgc));transition:color .3s}
.brand:hover .mark{color:var(--ice)}
.brand b{font-size:15px;font-weight:700;letter-spacing:.16em}
.nav__links{display:none;gap:30px;margin-left:auto;margin-right:auto}
@media(min-width:940px){.nav__links{display:flex}}
.nav__links a{color:rgba(var(--fgc),.88);font-size:14px;font-weight:500;text-decoration:none;transition:color .25s}
.nav__links a:hover{color:var(--ice)}
.nav__right{margin-left:auto}
@media(min-width:940px){.nav__right{margin-left:0}}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  background:var(--pill-bg);color:var(--pill-fg);font-weight:500;font-size:14px;padding:12px 20px;border:none;cursor:pointer;
  text-decoration:none;transition:background .25s,transform .12s}
.pill:hover{background:var(--pill-bg-h)}
.pill:active{transform:scale(.98)}
.pill svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.pill:hover .chev{transform:translateX(2px)}
.pill--ghost{background:transparent;color:rgb(var(--fgc));border:1px solid rgba(var(--fgc),.18)}
.pill--ghost:hover{background:rgba(var(--fgc),.07)}
.pill--full{width:100%}

/* ——— герой ——— */
.hero{padding:64px 0 72px;text-align:center;display:flex;flex-direction:column;align-items:center}
@media(min-width:768px){.hero{padding:104px 0 80px}}
.hero h1{font-size:clamp(38px,8vw,72px);font-weight:600;line-height:.92;letter-spacing:-.03em}
/* Бегущий блик по заливке.

   Зернистость (filter:url(#c3-noise)) отсюда убрана намеренно. Фильтр
   SVG пересчитывается заново в каждом кадре, в котором меняется его
   вход, — а вход здесь меняется всегда: блик едет шесть секунд по
   кругу без остановки. На новой машине это незаметно, на ноутбуке
   постарше именно эта строка съедала кадры на первом экране. Сама
   крупинка была на грани различимости, движение блика — нет. */
.shiny{background-image:var(--shiny-grad);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:shiny 6s linear infinite}
@keyframes shiny{0%{background-position:-200% center}100%{background-position:200% center}}

/* ——— тот же блик, но разобранный на буквы ———

   Раньше строка с заливкой не резалась на буквы и от курсора уезжала
   целиком — одним куском, тогда как соседняя строка рассыпалась по
   буквам. Это и был эффект «некоторые строчки просто съезжают вниз».

   Резать её мешала сама заливка: она держится на background-clip:text,
   то есть рисуется фоном элемента и обрезается по его буквам. У
   отдельной буквы свой фон, и каждая получила бы весь градиент
   целиком — вместо одной радуги на строку вышло бы по радуге на букву.

   Решение — арифметика вместо запрета. Картинка градиента у каждой
   буквы задаётся той же ширины, что была у всей строки, и сдвигается
   назад ровно на смещение буквы от начала строки. Куски снова
   складываются в одну непрерывную радугу, а блик едет по ним общей
   волной. Ширину строки и смещение каждой буквы измеряет site-fx.js. */
.shiny-split{background:none;color:inherit;-webkit-text-fill-color:currentColor;animation:none}
.shiny-split .rl{
  background-image:var(--shiny-grad);
  background-size:calc(var(--shiny-w,640px) * 2) auto;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shiny-split 6s linear infinite;
}
@keyframes shiny-split{
  0%{background-position:calc(var(--shiny-w,640px) * 2 + var(--sx,0px)) center}
  100%{background-position:calc(var(--shiny-w,640px) * -2 + var(--sx,0px)) center}
}
.hero__lead{margin-top:32px;color:rgba(var(--fgc),.78);max-width:37rem;font-size:16px;line-height:1.55}
.hero__chain{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  font-size:12.5px;color:rgba(var(--fgc),.72)}
.hero__chain span{padding:5px 12px;border-radius:999px;border:1px solid rgba(var(--fgc),.14);
  background:rgba(var(--fgc),.04)}
.hero__chain i{font-style:normal;color:var(--cyan);font-size:13px}
.hero__cta{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero__note{font-size:12px;color:rgba(var(--fgc),.62)}

/* ——— макет ——— */
/* Размытия подложки здесь нет: фон макета непрозрачен на 96 %, то есть
   размывать под ним нечего. А стоило это дорого — под макетом течёт
   живой фон, и браузер честно пересчитывал размытие на всю его площадь
   в каждом кадре. */
.mock{margin-top:24px;margin-bottom:64px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(var(--fgc),.12);background:var(--mock-bg)}
@media(min-width:768px){.mock{margin-bottom:96px}}
.mock__bar{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(var(--fgc),.08)}
/* Кружки в строке заголовка макета. Раньше это были нарисованные
   точки; теперь настоящие кнопки, поэтому им нужен сброс: у кнопки
   свои поля, рамка и шрифт, и без сброса три ровных кружка
   превращаются в три серых прямоугольника. */
.dot{width:12px;height:12px;border-radius:50%;margin-right:8px;
  padding:0;border:none;font:inherit;flex:none;cursor:pointer;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.dot--red{background:#ff5f57}
.dot--amber{background:#febc2e}
.dot--green{background:#28c840}
.dot:hover{transform:scale(1.22)}
.dot:active{transform:scale(.9)}
.dot[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(var(--fgc),.22)}
.mock__title{margin:0 auto;font-size:12px;color:rgba(var(--fgc),.68);transform:translateX(-30px)}
.mock__body{display:grid;grid-template-columns:repeat(12,1fr);min-height:540px}
@media(max-width:900px){.mock__body{grid-template-columns:1fr;min-height:0}}

.side{grid-column:span 3;border-right:1px solid rgba(var(--fgc),.08);background:var(--side-bg);padding:16px}
.side__btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  border-radius:8px;background:var(--pill-bg);color:var(--pill-fg);font-size:12px;font-weight:600;padding:9px 12px;font-family:inherit}
.side__nav{margin-top:18px;display:grid;gap:2px}
.side__nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;
  color:rgba(var(--fgc),.75);text-decoration:none;transition:background .2s,color .2s}
.side__nav a:hover{background:rgba(var(--fgc),.05);color:rgb(var(--fgc))}
.side__nav a.on{background:rgba(var(--fgc),.1);color:rgb(var(--fgc))}
.side__nav i{margin-left:auto;font-style:normal;font-size:11px;color:rgba(var(--fgc),.55)}
.side__cap{margin-top:22px;margin-bottom:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--fgc),.5)}
.side__tag{display:flex;align-items:center;gap:10px;padding:6px 10px;font-size:13px;color:rgba(var(--fgc),.75)}
.side__tag b{width:8px;height:8px;border-radius:50%;flex:none}
@media(max-width:900px){.side{grid-column:auto;border-right:none;border-bottom:1px solid rgba(var(--fgc),.08)}}

.list{grid-column:span 4;border-right:1px solid rgba(var(--fgc),.08);display:flex;flex-direction:column}
.list__search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(var(--fgc),.08);
  font-size:13px;color:rgba(var(--fgc),.55)}
.row{padding:13px 16px;border-bottom:1px solid rgba(var(--fgc),.06);transition:background .2s}
.row:hover{background:rgba(var(--fgc),.03)}
.row.on{background:rgba(var(--fgc),.06);box-shadow:inset 2px 0 0 var(--cyan)}
.row__n{font-size:13px;font-weight:600;line-height:1.35}
.row__s{margin-top:5px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(var(--fgc),.6)}
.chip{font-size:10.5px;padding:2px 8px;border-radius:999px;border:1px solid rgba(var(--fgc),.16)}
.chip--red{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.chip--amb{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 35%,transparent)}
.chip--grey{color:rgba(var(--fgc),.6)}
@media(max-width:900px){.list{grid-column:auto;border-right:none}}

.read{grid-column:span 5;display:flex;flex-direction:column}
@media(max-width:900px){.read{grid-column:auto}}
.read__bar{display:flex;align-items:center;gap:4px;padding:10px 14px;border-bottom:1px solid rgba(var(--fgc),.08)}
.ico{width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  color:rgba(var(--fgc),.72);border:none;background:transparent;cursor:pointer;transition:background .2s,color .2s}
.ico:hover{background:rgba(var(--fgc),.06);color:rgb(var(--fgc))}
.ico svg{width:15px;height:15px}
.read__body{padding:20px;display:flex;flex-direction:column;gap:15px}
.read__h{font-size:18px;font-weight:600;line-height:1.3}
.read__meta{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(var(--fgc),.68)}
.ava{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--cyan),var(--deep));flex:none}
.tagpill{margin-left:auto;font-size:11px;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(var(--fgc),.14);color:rgba(var(--fgc),.75)}

.stepper{display:flex;gap:5px}
.stepper div{flex:1;height:3px;border-radius:2px;background:rgba(var(--fgc),.12);overflow:hidden;position:relative}
.stepper div.done::after{content:'';position:absolute;inset:0;background:var(--cyan);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) var(--sd,0s)}
.mock.in .stepper div.done::after{transform:scaleX(1)}
.stepper__l{display:flex;gap:5px;margin-top:7px}
.stepper__l span{flex:1;text-align:center;font-size:9.5px;letter-spacing:.02em;color:rgba(var(--fgc),.5)}
.stepper__l span.on{color:var(--cyan)}

.sum{border-radius:10px;padding:14px}
.sum__h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ice);margin-bottom:8px}
.sum p{font-size:13px;color:rgba(var(--fgc),.85);line-height:1.55}
.read__body>p{font-size:13.5px;color:rgba(var(--fgc),.82);line-height:1.6}
.read__body>p b{color:rgb(var(--fgc));font-weight:600}
.att{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;
  padding:7px 12px;border-radius:8px;border:1px solid rgba(var(--fgc),.18);color:rgba(var(--fgc),.82)}
.demo{font-size:11px;color:rgba(var(--fgc),.5);text-align:right;padding:8px 16px}

/* ——— стекло ——— */
.glass{background:var(--glass-bg);backdrop-filter:blur(4px);
  border:none;box-shadow:inset 0 1px 1px var(--glass-inset);position:relative;overflow:hidden}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,var(--glass-edge-1) 0%,var(--glass-edge-2) 20%,
    transparent 40%,transparent 60%,var(--glass-edge-2) 80%,var(--glass-edge-1) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ——— секции ——— */
.sec{padding:80px 0}
@media(min-width:768px){.sec{padding:110px 0}}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(var(--fgc),.85)}
.eyebrow b{width:6px;height:6px;border-radius:50%;background:rgb(var(--fgc));flex:none}
.eyebrow em{font-style:normal;padding:2px 8px;border-radius:999px;border:1px solid rgba(var(--fgc),.12);
  color:rgba(var(--fgc),.55);font-size:12px}
.h2{margin-top:20px;font-size:clamp(28px,4.6vw,48px);line-height:1.02;letter-spacing:-.025em}
.sub{margin-top:24px;color:rgba(var(--fgc),.78);font-size:16px;line-height:1.6;max-width:33rem}
.split{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1.05fr;gap:60px}}
.chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:12px;color:rgba(var(--fgc),.86);padding:6px 12px;border-radius:999px;
  border:1px solid rgba(var(--fgc),.12);background:rgba(var(--fgc),.03)}

/* ——— цепочка этапов ——— */
.chain{border-radius:16px;padding:20px}
.stage{border-radius:12px;padding:16px 18px;margin-bottom:10px;position:relative}
.stage:last-child{margin-bottom:0}
.stage__h{display:flex;align-items:center;gap:12px}
.stage__n{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--on-accent);background:var(--cyan)}
.stage__t{font-size:15px;font-weight:600}
.stage p{margin-top:9px;padding-left:38px;font-size:13px;color:rgba(var(--fgc),.72);line-height:1.55}
.stage--last .stage__n{background:var(--ice)}

/* ——— результат ——— */
.trio{display:grid;gap:16px;margin-top:44px}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,1fr)}}
.deliv{border-radius:16px;padding:24px;transform-style:preserve-3d;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.deliv svg{width:26px;height:26px;color:var(--ice)}
.deliv h3{margin-top:14px;font-size:16px}
.deliv p{margin-top:10px;font-size:13.5px;color:rgba(var(--fgc),.78);line-height:1.6}
.deliv ul{margin-top:16px;padding-top:16px;border-top:1px solid rgba(var(--fgc),.1)}
.deliv li{font-size:12.5px;color:rgba(var(--fgc),.66);margin-top:6px}

/* ——— тарифы ——— */
.c3-pricing-section{position:relative;padding:40px 20px 80px;display:flex;flex-direction:column;
  align-items:center;overflow-x:hidden}
.c3-watermark-container{position:relative;width:100%;max-width:1160px;text-align:center;margin-top:40px;z-index:2}
/* Зернистость убрана по той же причине, что и у бегущего блика: строки
   водяного знака расходятся в стороны, пока секция идёт через экран,
   то есть вход фильтра меняется в каждом кадре и фильтр каждый кадр
   считается заново — на огромной надписи в 8rem. Именно отсюда и
   бралось «пролагивание» в тарифах: карточки были ни при чём. */
.c3-watermark-main{font-size:8rem;font-weight:800;line-height:.9;letter-spacing:-.05em;
  display:flex;flex-direction:column;align-items:center}
.c3-watermark-line-1{color:var(--wm-1)}
.c3-watermark-line-2{background:var(--wm-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.c3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%;max-width:1160px;
  margin-top:56px;position:relative;z-index:3}
/* Наведение на карточку тарифа: почему здесь перечислены свойства, а
   не стоит короткое transition:all.

   Симптом был такой: карточка на секунду становилась прозрачной,
   сквозь неё проступал фон, и только потом она подсвечивалась. Причина
   в паре значений. Обычное состояние — ГРАДИЕНТ (картинка), наведённое
   было СПЛОШНЫМ цветом. Между картинкой и цветом браузеру нечего
   плавно менять: картинка исчезает мгновенно, а цвет под ней
   наливается те самые 0.6 секунды. Полсекунды карточка стоит пустой.

   Поэтому наведённое состояние тоже стало градиентом (см. --card-bg-h),
   и переход снова идёт от картинки к картинке.

   Вторая половина беды — само слово all. Под него попадал и transform,
   который дуге тарифов приходится переписывать в каждом кадре: каждый
   кадр начинался новый шестисотмиллисекундный переход, и карточка
   ехала с отставанием от прокрутки. Теперь в списке ровно то, что
   меняется при наведении.

   Размытие подложки (backdrop-filter) снято. Фон карточки непрозрачен
   на 92–100 %, то есть размывать под ним было нечего — а стоило это
   пересчёта размытия под шестью карточками в каждом кадре, пока они
   катятся по дуге поверх живого фона. */
.c3-card{background:var(--card-bg);
  border:1px solid var(--card-bd);border-radius:34px;
  padding:38px 22px;min-height:560px;display:flex;flex-direction:column;
  transition:background-image .45s var(--ease),background-color .45s var(--ease),
             border-color .45s var(--ease),box-shadow .45s var(--ease);
  overflow:hidden;position:relative}
.c3-card::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(var(--fgc),.1) 0%,rgba(var(--fgc),0) 50%);pointer-events:none}
.c3-card:hover{background:var(--card-bg-h);border-color:rgba(var(--accent-rgb),.65);transform:translateY(-12px) scale(1.01)}
/* Подъём карточки при наведении нужен только там, где карточки лежат
   обычной сеткой. На дуге их положение считает скрипт, и переход по
   transform там спорил бы с ним кадр за кадром. */
.c3-pricing-section:not(.arc-on) .c3-card{transition:background-image .45s var(--ease),
  background-color .45s var(--ease),border-color .45s var(--ease),
  box-shadow .45s var(--ease),transform .45s var(--ease)}
.c3-card-pro{background:var(--card-bg-pro)}
.c3-tier-small{font-size:1rem;font-weight:400;color:rgba(var(--fgc),.78)}
.c3-tier-large{font-size:1.9rem;font-weight:500;letter-spacing:-.02em;color:rgb(var(--fgc));margin-top:8px;line-height:1.1}
.c3-desc{font-size:.85rem;color:rgba(var(--fgc),.62);min-height:5.5em;margin-top:14px;margin-bottom:28px;line-height:1.5}
.c3-list li{display:flex;align-items:flex-start;gap:12px;font-size:.85rem;color:rgba(var(--fgc),.92);
  margin-bottom:15px;line-height:1.4}
.c3-check{width:24px;height:24px;border-radius:50%;background:rgba(var(--fgc),.14);color:rgb(var(--fgc));
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.c3-check svg{width:12px;height:12px}
.c3-btn{background:var(--pill-bg);color:var(--pill-fg);padding:10px 26px;border-radius:100px;font-weight:600;font-size:.85rem;
  margin-top:auto;border:none;cursor:pointer;align-self:center;transition:all .3s var(--ease);font-family:inherit}
.c3-btn:hover{background:var(--pill-bg-h);transform:scale(1.02);box-shadow:0 8px 24px rgba(var(--fgc),.15)}
.c3-foot{max-width:1160px;width:100%;margin-top:26px;font-size:12.5px;color:rgba(var(--fgc),.55);text-align:right;padding-right:8px}
@media(max-width:1200px) and (min-width:1025px){
  .c3-grid{grid-template-columns:repeat(2,1fr)}
  .c3-card{min-height:0}
}
@media(max-width:1024px){
  .c3-watermark-main{font-size:clamp(1.9rem,8.6vw,3.2rem);filter:none}
  .c3-watermark-line-2{background:none;-webkit-text-fill-color:var(--wm-2-flat);color:var(--wm-2-flat)}
  .c3-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:calc(100% + 40px);
    margin-left:-20px;padding:4px 20px 8px;gap:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .c3-grid::-webkit-scrollbar{display:none}
  .c3-card{flex:0 0 min(300px,80vw);scroll-snap-align:center;min-height:0}
  .c3-foot{text-align:center;padding:0 20px}
}

/* ——— финал и контакты ——— */
.cta{border-radius:24px;padding:56px 28px;text-align:center;position:relative;overflow:hidden}
@media(min-width:768px){.cta{padding:84px 32px}}
.cta__glow{position:absolute;inset:0;opacity:.3;pointer-events:none;
  background:radial-gradient(600px circle at 50% 0%,var(--glow-c),transparent 70%)}
.cta h2{font-size:clamp(30px,5.2vw,58px);line-height:1.03;letter-spacing:-.03em;position:relative}
.cta p{margin:24px auto 0;max-width:32rem;font-size:14px;line-height:1.6;color:rgba(var(--fgc),.78);position:relative}
.cta__b{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;position:relative}
.contacts{display:grid;gap:40px;margin-top:56px;align-items:start}
@media(min-width:900px){.contacts{grid-template-columns:1fr 1fr;gap:60px}}
.dl dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--fgc),.58);margin-top:26px}
.dl dt:first-child{margin-top:0}
.dl dd{margin:6px 0 0;font-size:16px}
.dl dd small{display:block;font-size:13px;color:rgba(var(--fgc),.55);margin-top:4px}
.dl a{text-decoration:none;border-bottom:1px solid rgba(var(--fgc),.28);transition:border-color .25s}
.dl a:hover{border-color:var(--cyan)}
.dl dd.contact-address{line-height:1.5}
.contact-note{display:block;font-size:13px;color:rgba(var(--fgc),.55);margin-top:4px;line-height:1.5}
.contact-note--notice{margin-top:9px;padding:9px 12px;border-left:1px solid rgba(var(--accent-rgb),.8);border-radius:0 10px 10px 0;background:rgba(var(--accent-rgb),.075);color:rgba(var(--fgc),.78)}
.contact-extra{margin-top:30px;padding:20px;border:1px solid rgba(var(--fgc),.11);border-radius:16px;background:rgba(var(--fgc),.025)}
.contact-extra + .contact-extra{margin-top:14px}
.contact-extra__title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--fgc),.58);margin-bottom:12px}
.contact-extra__text{font-size:14px;line-height:1.65;color:rgba(var(--fgc),.76);margin-bottom:14px}
.contact-chips{display:flex;flex-wrap:wrap;gap:8px}
.contact-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(var(--fgc),.12);border-radius:999px;background:rgba(var(--fgc),.035);font-size:12.5px;line-height:1;color:rgba(var(--fgc),.84)}
.contact-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(var(--accent-rgb),.45)}
.contact-chip--link{text-decoration:none!important;border-bottom:1px solid rgba(var(--fgc),.12)!important;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)!important}
.contact-chip--link:hover{transform:translateY(-1px);border-color:rgba(var(--accent-rgb),.45)!important;background:rgba(var(--accent-rgb),.08)}
.payment-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.payment-item{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid rgba(var(--fgc),.1);border-radius:12px;background:rgba(var(--fgc),.025);font-size:12.5px;color:rgba(var(--fgc),.82)}
.payment-item::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(var(--accent-rgb),.12);color:var(--ice);font-size:11px;font-weight:800;flex:none}
@media(max-width:520px){.contact-extra{padding:17px}.payment-list{grid-template-columns:1fr}}

.form{border-radius:16px;padding:24px;align-self:start;height:max-content}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(var(--fgc),.62);margin-bottom:8px;transition:color .25s}
.field input,.field textarea{width:100%;background:rgba(var(--fgc),.02);border:1px solid rgba(var(--fgc),.14);
  border-radius:10px;padding:13px 14px;color:rgb(var(--fgc));font-family:inherit;font-size:16px;transition:border-color .25s}
.field input:focus,.field textarea:focus{border-color:var(--cyan);outline:none}
.field:focus-within label{color:var(--ice)}
.field textarea{resize:vertical;min-height:96px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.two-col{grid-template-columns:1fr}}
.consents{display:grid;gap:16px;margin:8px 0 22px}
.consent-block{padding:0}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:rgba(var(--fgc),.78);margin:0;cursor:pointer}
.consent input{margin-top:3px;accent-color:var(--cyan);width:17px;height:17px;flex:none;cursor:pointer}
.consent__text{line-height:1.5}
.consent-required{display:inline-flex;align-items:center;margin-left:7px;padding:2px 7px;border-radius:999px;
  color:var(--req-fg);background:var(--req-bg);border:1px solid var(--req-bd);font-size:10px;font-weight:700;white-space:nowrap}
.consent-link{display:inline-block;margin:5px 0 0 28px;font-size:12px;line-height:1.45;color:rgba(var(--fgc),.62);
  text-decoration:underline;text-decoration-color:rgba(var(--fgc),.3);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.consent-link:hover{color:var(--ice);text-decoration-color:var(--ice)}
.dl-ico{width:12px;height:12px;vertical-align:-1px;margin-left:3px;opacity:.75;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
a:hover .dl-ico{transform:translateY(2px);opacity:1}
.status{font-size:12.5px;margin-top:12px;min-height:18px;color:rgba(var(--fgc),.68)}
.status[data-state="ok"]{color:var(--ok)}
.status[data-state="err"]{color:var(--err)}

/* ——— подтверждение отправки формы ——— */
.success-modal[hidden]{display:none}
.success-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px}
.success-modal__backdrop{position:absolute;inset:0;background:rgba(2,10,24,.62);backdrop-filter:blur(10px)}
.success-modal__card{position:relative;width:min(440px,100%);border-radius:24px;padding:34px 28px 28px;text-align:center;
  background:var(--bg);color:rgb(var(--fgc));border:1px solid rgba(var(--fgc),.16);
  box-shadow:0 30px 100px rgba(0,0,0,.32);animation:success-pop .38s var(--ease) both}
.success-modal__icon{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.12);color:var(--cyan);border:1px solid rgba(var(--accent-rgb),.26)}
.success-modal__icon svg{width:28px;height:28px}
.success-modal__card h2{font-size:clamp(24px,5vw,32px);line-height:1.08}
.success-modal__card p{margin:14px auto 24px;max-width:330px;color:rgba(var(--fgc),.72);font-size:14px;line-height:1.6}
.success-modal__card .pill{min-width:150px}
@keyframes success-pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.success-modal__card{animation:none}}
.foot{border-top:1px solid rgba(var(--fgc),.1);padding:26px 0 44px;font-size:12.5px;color:rgba(var(--fgc),.58)}
.foot__in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}


/* ——— дополнительная динамика и интерактив ——— */
.hero h1.in{animation:hero-float 7s var(--ease) infinite alternate}
@keyframes hero-float{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-8px,0)}}
.hero__chain span{animation:chain-float 4.8s var(--ease) infinite alternate;animation-delay:calc(var(--i,0)*-.45s)}
.hero__chain span:nth-of-type(1){--i:1}.hero__chain span:nth-of-type(2){--i:2}.hero__chain span:nth-of-type(3){--i:3}
.hero__chain span:nth-of-type(4){--i:4}.hero__chain span:nth-of-type(5){--i:5}
@keyframes chain-float{to{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.32);background:rgba(var(--accent-rgb),.055)}}
.eyebrow b{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45);animation:signal 2.4s ease-out infinite}
@keyframes signal{70%,100%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}}

.mock{isolation:isolate;--mx:50%;--my:50%;box-shadow:0 35px 90px -54px rgba(var(--accent-rgb),.46)}
/* Здесь была бесконечная оранжевая полоса, каждые семь секунд
   проезжавшая слева направо по белому макету (@keyframes mock-scan на
   .mock::before, с наложением multiply). Убрана по просьбе владельца:
   макет — не витрина спецэффектов, а рабочий экран, и постоянно
   ползущий по нему оранжевый отсвет мешает читать то, ради чего он
   на странице.

   Заодно это была недешёвая мелочь: анимация background-position — это
   перерисовка, а mix-blend-mode поверх неё заставлял браузер каждый
   кадр ещё и смешивать слой со всем, что под ним, на всю площадь
   макета.

   Свечение под курсором (.mock::after) осталось: оно отвечает на
   движение руки, а не живёт само по себе. */
.mock::after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(var(--accent-rgb),.115),transparent 67%)}
.mock__bar,.mock__body{position:relative;z-index:3}
/* Кружки больше не пульсируют сами по себе.

   Раньше все три бесконечно «дышали» (@keyframes dot-pulse: яркость и
   масштаб). Пока это были нарисованные точки, вопросов не возникало.
   Но теперь это кнопки, и у них есть отклик на наведение — а анимация
   в CSS сильнее перехода: собственный масштаб от dot-pulse просто
   перебивал увеличение под курсором, и нажимаемость кружка ничем не
   показывалась. Плюс это была вечная перерисовка трёх элементов на
   каждой странице.

   Отклик остался, но теперь он отвечает на человека, а не идёт сам. */

.side__btn{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.side__btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(var(--fgc),.8)}
.side__nav button,.side__tag{width:100%;border:0;font-family:inherit;text-align:left;cursor:pointer}
.side__nav button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;
  color:rgba(var(--fgc),.75);background:transparent;transition:background .2s,color .2s,transform .2s var(--ease)}
.side__nav button:hover{background:rgba(var(--fgc),.05);color:rgb(var(--fgc));transform:translateX(3px)}
.side__nav button.on{background:rgba(var(--fgc),.1);color:rgb(var(--fgc));box-shadow:inset 2px 0 0 var(--cyan)}
.side__nav button i{margin-left:auto;font-style:normal;font-size:11px;color:rgba(var(--fgc),.55)}
.side__tag{border-radius:8px;background:transparent;transition:background .2s,color .2s,transform .2s var(--ease)}
.side__tag:hover{background:rgba(var(--fgc),.045);color:rgb(var(--fgc));transform:translateX(3px)}
.side__tag.on{background:rgba(var(--accent-rgb),.09);color:rgb(var(--fgc));box-shadow:inset 2px 0 0 var(--cyan)}

.list__search{position:relative}
.list__search input{width:100%;border:0;background:transparent;color:rgb(var(--fgc));font:inherit;font-size:13px;outline:0;padding:0}
.list__search input::placeholder{color:rgba(var(--fgc),.48)}
.finding-list{display:flex;flex-direction:column;min-height:0}
.row{width:100%;border:0;color:rgb(var(--fgc));background:transparent;text-align:left;font-family:inherit;cursor:pointer;
  transform-origin:50% 0;animation:row-in .42s var(--ease) both;animation-delay:calc(var(--ri,0)*45ms)}
.row:hover{background:rgba(var(--fgc),.04);transform:translateX(3px)}
.row.on{background:rgba(var(--fgc),.065);box-shadow:inset 2px 0 0 var(--cyan)}
@keyframes row-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.empty-findings{padding:28px 18px;color:rgba(var(--fgc),.55);font-size:12px;text-align:center}

.ico{position:relative}.ico.is-active{background:rgba(var(--accent-rgb),.13);color:var(--ice);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.2)}
.ico::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,5px);
  opacity:0;pointer-events:none;white-space:nowrap;background:var(--pill-bg);color:var(--pill-fg);border-radius:6px;padding:5px 8px;font-size:10px;
  transition:opacity .2s,transform .2s;z-index:20}
.ico:hover::after{opacity:1;transform:translate(-50%,0)}
.read__body{transition:opacity .18s,transform .18s}.read__body.is-switching{opacity:.2;transform:translateY(5px)}
.read__meta{flex-wrap:wrap}.read__meta-main{min-width:180px}.read__status{font-size:10px;padding:3px 8px;border-radius:999px;
  color:var(--ice);background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.2)}
.att{border:1px solid rgba(var(--fgc),.18);background:transparent;font-family:inherit;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
.att:hover{background:rgba(var(--fgc),.055);border-color:rgba(var(--accent-rgb),.4);transform:translateY(-2px)}
.map-toast{position:fixed;z-index:260;left:50%;bottom:94px;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  max-width:min(88vw,420px);padding:10px 14px;border-radius:12px;background:var(--pill-bg);color:var(--pill-fg);
  font-size:12px;font-weight:600;box-shadow:0 18px 55px rgba(0,0,0,.35);transition:opacity .28s,transform .28s var(--ease)}
.map-toast.show{opacity:1;transform:translate(-50%,0)}

.stage{transition:transform .35s var(--ease),background .35s,border-color .35s}
.stage:hover{transform:translateX(8px);background:rgba(var(--fgc),.065)}
.c3-card{transform-style:preserve-3d}.c3-card>*{position:relative;z-index:2}
.c3-card::after{content:'';position:absolute;inset:-35%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.12),transparent 55%);opacity:0;transform:translate3d(-18%,18%,0);
  transition:opacity .45s,transform .7s var(--ease)}
.c3-card:hover::after{opacity:1;transform:translate3d(18%,-18%,0)}

/* встроенный вертикальный скролл сайта */
.site-scroll{position:fixed;z-index:220;right:12px;top:50%;transform:translateY(-50%);width:26px;height:min(40vh,345px);
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.site-scroll__rail{position:relative;pointer-events:auto;width:8px;height:100%;padding:0;border:0;cursor:ns-resize;
  border-radius:999px;background:linear-gradient(180deg,rgba(var(--fgc),.14),rgba(var(--fgc),.08));
  box-shadow:inset 0 0 0 1px rgba(var(--fgc),.08),0 0 0 1px rgba(7,16,29,.18),0 14px 36px rgba(0,0,0,.34);
  backdrop-filter:blur(12px)}
.site-scroll__rail::before{content:'';position:absolute;inset:-10px;pointer-events:none;border-radius:999px;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.12),transparent 68%);opacity:0;transition:opacity .2s}
.site-scroll__rail:hover::before,.site-scroll__rail:focus-visible::before{opacity:1}
.site-scroll__thumb{position:absolute;left:50%;top:0;width:8px;height:58px;transform:translate(-50%,0);border-radius:999px;
  background:linear-gradient(180deg,rgba(var(--fgc),.95),rgba(var(--fgc),.78));box-shadow:0 6px 18px rgba(var(--fgc),.18);
  transition:transform .1s linear,background .2s}
.site-scroll__rail:hover .site-scroll__thumb,.site-scroll__rail:focus-visible .site-scroll__thumb{background:linear-gradient(180deg,rgb(var(--fgc)),var(--cyan))}
body.is-dragging-scroll,body.is-dragging-scroll *{cursor:ns-resize!important;user-select:none}
@media(max-width:900px){.site-scroll{right:9px;height:min(34vh,280px)}}
@media(max-width:640px),(pointer:coarse){.site-scroll{display:none}}

/* ——— правая часть шапки ——— */
.nav__right{display:flex;align-items:center;gap:12px}

/* ═══════════════════════════════════════════════
   АДАПТАЦИЯ: планшеты и телефоны
   ═══════════════════════════════════════════════ */

/* — бургер и выдвижное меню — */
.burger{display:none;position:relative;width:44px;height:44px;flex:none;padding:0;cursor:pointer;
  border:1px solid rgba(var(--fgc),.2);border-radius:12px;background:rgba(var(--fgc),.06);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.burger:hover{background:rgba(var(--fgc),.12)}
.burger span{position:absolute;left:13px;width:18px;height:2px;border-radius:2px;background:rgb(var(--fgc));
  transition:transform .4s var(--ease),opacity .25s var(--ease)}
.burger span:nth-child(1){top:16px}
/* Средняя полоска схлопывается влево масштабом, а не шириной:
   ширина — свойство раскладки, масштаб считает композитор.
   Точка отсчёта своя, повороты крайних полосок идут от центра. */
.burger span:nth-child(2){top:21px;width:13px;transform-origin:0 50%}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:250;display:none}
.mnav.is-open{display:block}
.mnav__bg{position:absolute;inset:0;background:rgba(var(--fgc),.32);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .38s var(--ease)}
.mnav.is-in .mnav__bg{opacity:1}
.mnav__sheet{position:absolute;top:0;left:0;right:0;padding:86px 22px 26px;background:var(--bg);
  border-bottom:1px solid rgba(var(--fgc),.12);box-shadow:0 26px 70px rgba(0,0,0,.28);
  transform:translateY(-101%);transition:transform .48s var(--ease)}
.mnav.is-in .mnav__sheet{transform:none}
.mnav__sheet a{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;
  font-size:17px;font-weight:600;text-decoration:none;color:rgb(var(--fgc));
  border-bottom:1px solid rgba(var(--fgc),.09);
  opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--mi,1)*40ms)}
.mnav.is-in .mnav__sheet a{opacity:1;transform:none}
.mnav__sheet .pill{margin-top:20px;border-bottom:none;justify-content:center;padding:16px 20px;
  color:var(--pill-fg);font-size:15px}
html.menu-open{overflow:hidden}

/* — планшеты: карта бизнеса в две колонки, панель этапов сверху — */
@media(max-width:1024px){
  .mock__body{min-height:0}
  .side{grid-column:1/-1;border-right:none;border-bottom:1px solid rgba(var(--fgc),.08);
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 16px}
  .side__btn{width:auto;flex:none;padding:10px 14px}
  .side__cap{display:none}
  .side__nav{flex:1 1 100%;margin-top:0;display:flex;gap:6px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .side__nav::-webkit-scrollbar{display:none}
  .side__nav button{flex:none;white-space:nowrap;padding:9px 13px}
  .side__nav button i{margin-left:7px}
  .side__tag{width:auto;flex:none;white-space:nowrap;padding:9px 13px}
  .list{grid-column:span 5;border-right:1px solid rgba(var(--fgc),.08)}
  .read{grid-column:span 7}
}

/* — телефоны — */
@media(max-width:760px){
  .list,.read{grid-column:1/-1}
  .list{border-right:none;border-bottom:1px solid rgba(var(--fgc),.08)}
  .finding-list{max-height:330px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mock__title{transform:none;font-size:11.5px}
  .read__body{padding:18px 16px;gap:14px}
  .read__h{font-size:17px}
  .stepper__l span{font-size:9px;line-height:1.15;letter-spacing:-.01em}
  .trio{grid-template-columns:1fr}
  .cta{padding:44px 20px;border-radius:20px}
  .hero{padding:44px 0 56px}
  .hero__chain{gap:6px;font-size:12px}
  .contacts{margin-top:44px}
}

@media(max-width:939px){
  .nav__links{display:none}
  .burger{display:block}
  .pill--cta{display:none}          /* заявка переезжает в меню */
  .nav__in{gap:14px}
  .nav__right{margin-left:auto;gap:10px}
}

/* — 2 колонки для карточек результата на планшете в портрете — */
@media(min-width:620px) and (max-width:899px){
  .trio{grid-template-columns:repeat(2,1fr)}
}

/* — узкие экраны — */
@media(max-width:480px){
  :root{--pad:16px}
  .brand b{font-size:13px;letter-spacing:.12em}
  .mark{height:20px}
  .hero h1{font-size:clamp(30px,9vw,44px)}
  .sec{padding:64px 0}
  .h2{font-size:clamp(24px,7vw,32px)}
  .side{padding:12px}
  .side__btn{font-size:11.5px}
  .c3-card{padding:30px 20px;border-radius:26px}
  .c3-tier-large{font-size:1.7rem}
  .form{padding:18px}
  .foot__in{flex-direction:column;gap:10px}
}

/* — увеличенные цели нажатия на сенсорных экранах — */
@media(pointer:coarse){
  .ico{width:40px;height:40px;border-radius:10px}
  .ico svg{width:18px;height:18px}
  .ico::after{display:none}          /* подсказки по наведению не нужны */
  .row{padding:16px}
  .side__nav button,.side__tag{min-height:42px}
  .nav__links a{padding:8px 0}
  .dl a{padding:2px 0}
  .burger,.pill,.c3-btn,.side__btn,.row,.att{touch-action:manipulation}
  .c3-btn{padding:14px 30px}
  .consent input{width:20px;height:20px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
}


/* ——— Защита материалов от бытового копирования ——— */
html.copy-protected body,
html.copy-protected body *:not(input):not(textarea):not([contenteditable="true"]){
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
html.copy-protected input,
html.copy-protected textarea,
html.copy-protected [contenteditable="true"]{
  -webkit-user-select:text;user-select:text;
}
img,svg,canvas{-webkit-user-drag:none}
.protection-note{position:fixed;right:18px;bottom:18px;z-index:500;max-width:min(340px,calc(100vw - 36px));
  padding:11px 14px;border-radius:12px;background:var(--pill-bg);color:var(--pill-fg);font-size:12px;
  box-shadow:0 16px 45px rgba(0,0,0,.28);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s,transform .22s}
.protection-note.is-visible{opacity:1;transform:none}
.form-trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;
  overflow:hidden!important;opacity:0!important;pointer-events:none!important}


/* Mobile map controls for desktop and mobile */
.mobile-map-back{display:none}
.read__actions{display:flex;align-items:center;gap:4px;width:100%}

/* ═══════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ 2026 V3 — компактная компоновка
   ═══════════════════════════════════════════════ */
@media (max-width:760px){
  :root{--pad:20px}
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:15px;line-height:1.5}
  /* Фоновое поле и вуаль здесь намеренно НЕ переопределяются.
     Раньше на телефоне стояло #bg{opacity:.32} и почти чёрная вуаль —
     для обеих тем сразу, а ниже полная яркость возвращалась только
     светлой. В итоге тёмная тема на телефоне выглядела плоско-чёрной,
     и анимацию было еле видно. Обе темы используют общие значения
     --bg-op и --veil, как на компьютере. */
  .wrap{width:100%;max-width:100%;padding-left:var(--pad);padding-right:var(--pad)}

  .nav{padding-top:18px}
  .nav__in{min-width:0;gap:12px}
  .brand{min-width:0;gap:9px}
  .brand b{font-size:13px;letter-spacing:.14em;white-space:nowrap}
  .mark{height:21px}
  .nav__right{gap:9px}
  .burger{width:42px;height:42px}

  .hero{padding-top:52px;padding-bottom:56px}
  .hero h1{width:100%;font-size:clamp(40px,11.5vw,54px);line-height:.96;letter-spacing:-.035em}
  .hero__lead{margin-top:30px;max-width:38rem;font-size:16px;line-height:1.52}
  .hero__chain{margin-top:24px;gap:7px 5px}
  .hero__chain span{padding:6px 11px;font-size:12px}
  .hero__chain i{font-size:13px}
  .hero__cta{width:100%;margin-top:28px}
  .hero__cta .pill{width:min(100%,360px);min-height:52px;padding:13px 18px;font-size:15px}
  .hero__note{font-size:12px}

  /* Compact fully functional mobile-app view */
  .mock{width:min(100%,420px);margin:8px auto 60px;border-radius:24px;overflow:hidden;backdrop-filter:none;box-shadow:0 24px 70px -42px rgba(var(--accent-rgb),.55)}
  .mock::after{display:none}
  .mock__bar{min-height:48px;padding:10px 13px}
  .mock__title{min-width:0;transform:none;padding-right:2px;font-size:11px;line-height:1.25;text-align:center}
  .dot{width:9px;height:9px;margin-right:5px;animation:none!important}
  .mock__body{position:relative;display:flex;flex-direction:column;height:610px;min-height:0;overflow:hidden}

  .side{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:11px;border-right:0;border-bottom:1px solid rgba(var(--fgc),.09);background:var(--side-bg);flex:none}
  .side__btn{grid-column:1/-1;width:100%;min-height:40px;padding:9px 12px;font-size:12px;border-radius:10px}
  .side__nav{grid-column:1/-1;display:flex;width:100%;margin:0;padding:0 0 3px;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .side__nav::-webkit-scrollbar{display:none}
  .side__nav button{flex:0 0 auto;min-height:36px;padding:7px 10px;font-size:11px;white-space:nowrap;scroll-snap-align:start}
  .side__nav button i{margin-left:5px;font-size:10px}
  .side__cap{display:none}
  .side__tag{display:flex;width:100%;min-height:35px;margin:0;padding:7px 9px;font-size:11px;white-space:normal;line-height:1.2;justify-content:flex-start}
  .side__tag b{width:7px;height:7px}

  .list{display:flex;flex:1;min-height:0;flex-direction:column;width:100%;border-right:0;border-bottom:0}
  .list__search{flex:none;min-height:46px;padding:12px 14px}
  .list__search input{min-width:0;font-size:15px}
  .finding-list{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .row{min-width:0;padding:14px 15px}
  .row__n{max-width:100%;font-size:13px;line-height:1.32;white-space:normal;overflow-wrap:anywhere}
  .row__s{margin-top:6px;flex-wrap:wrap;font-size:11px}
  .chip{font-size:10px;padding:2px 7px}
  .demo{flex:none;padding:8px 12px;font-size:10px;text-align:center}

  .read{position:absolute;inset:0;z-index:8;display:flex;width:100%;min-width:0;flex-direction:column;background:var(--bg);transform:translateX(102%);opacity:0;pointer-events:none;transition:transform .38s var(--ease),opacity .25s ease}
  .mock.mobile-detail-open .read{transform:none;opacity:1;pointer-events:auto}
  .read__bar{display:flex;flex:none;align-items:center;gap:8px;min-height:50px;padding:7px 10px;border-bottom:1px solid rgba(var(--fgc),.09);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}
  .mobile-map-back{display:inline-flex;align-items:center;gap:5px;flex:none;height:34px;padding:0 10px;border:1px solid rgba(var(--fgc),.14);border-radius:9px;background:rgba(var(--fgc),.04);color:rgb(var(--fgc));font:600 11px/1 inherit;cursor:pointer}
  .mobile-map-back svg{width:14px;height:14px}
  .read__actions{justify-content:flex-end;gap:2px;min-width:0}
  .read__actions .ico{width:34px;height:34px;border-radius:8px}
  .read__actions .ico svg{width:15px;height:15px}
  .read__body{display:flex;flex:1;min-height:0;min-width:0;padding:17px 15px 20px;gap:14px;overflow-y:auto;overscroll-behavior:contain}
  .read__body>*{min-width:0;max-width:100%}
  .read__h{font-size:17px;line-height:1.28;overflow-wrap:anywhere}
  .read__meta{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;font-size:11px}
  .ava{width:26px;height:26px}
  .read__meta-main{min-width:0;overflow-wrap:anywhere}
  .read__status,.tagpill{margin-left:0;justify-self:start;font-size:9px}
  .tagpill{grid-column:2}
  .stepper{gap:3px}
  .stepper__l{gap:2px}
  .stepper__l span{min-width:0;font-size:7.5px;overflow-wrap:anywhere}
  .sum{padding:13px;border-radius:9px}
  .sum__h{font-size:11px;margin-bottom:7px}
  .sum p,.read__body>p{font-size:13px;line-height:1.48;overflow-wrap:anywhere}
  .att{max-width:100%;padding:7px 10px;font-size:11px;white-space:normal;overflow-wrap:anywhere}

  /* Tighter section rhythm */
  .wrap.sec{padding-top:58px;padding-right:var(--pad);padding-bottom:58px;padding-left:var(--pad)}
  .split{display:block}
  [data-pin]{transform:none!important}
  .eyebrow{font-size:12px}
  .h2{margin-top:14px;max-width:100%;font-size:clamp(31px,8.8vw,40px);line-height:1.03;overflow-wrap:anywhere}
  .sub{margin-top:17px;max-width:100%;font-size:14px;line-height:1.5}
  .chips{margin-top:20px;gap:7px}
  .chips span{padding:6px 10px;font-size:11px}

  .chain{margin-top:28px;padding:8px;border-radius:18px}
  .stage{padding:14px 13px;margin-bottom:8px;border-radius:13px}
  .stage:hover{transform:none}
  .stage__h{gap:10px}
  .stage__n{width:27px;height:27px;font-size:11px}
  .stage__t{font-size:15px}
  .stage p{margin-top:9px;padding-left:0;font-size:12.5px;line-height:1.44}

  .trio{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
  .deliv{min-height:0;padding:19px 17px;border-radius:17px;transform:none!important}
  .deliv svg{width:22px;height:22px}
  .deliv h3{margin-top:10px;font-size:17px}
  .deliv p{margin-top:7px;font-size:12.5px;line-height:1.46}
  .deliv ul{margin-top:12px;padding-top:11px}
  .deliv li{font-size:11.5px;margin-top:5px}

  /* Restore horizontal swipe for service packages */
  .c3-pricing-section{padding:48px 0 60px;overflow:hidden}
  .c3-watermark-container{padding:0 var(--pad);margin-top:0}
  .c3-watermark-main{font-size:clamp(34px,9.6vw,46px);line-height:.98}
  .c3-grid{display:flex;grid-template-columns:none;width:calc(100% + 40px);max-width:none;margin:30px 0 0 -20px;padding:4px 20px 12px;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .c3-grid::-webkit-scrollbar{display:none}
  .c3-card{flex:0 0 min(306px,82vw);width:auto;min-height:0;padding:25px 19px;border-radius:24px;transform:none!important;scroll-snap-align:center}
  .c3-card:hover{transform:none}
  .c3-tier-small{font-size:13px}
  .c3-tier-large{font-size:24px}
  .c3-desc{min-height:0;margin:11px 0 19px;font-size:12px}
  .c3-list li{gap:9px;margin-bottom:10px;font-size:12px}
  .c3-check{width:21px;height:21px}
  .c3-btn{width:100%;min-height:46px;margin-top:10px;padding:11px 18px;font-size:13px}
  .c3-foot{padding:0 var(--pad);margin-top:14px;font-size:11px;line-height:1.4;text-align:left}

  .cta{padding:38px 18px;border-radius:20px}
  .cta h2{font-size:clamp(30px,8.7vw,40px)}
  .cta p{margin-top:17px;font-size:13px}
  .cta__b{display:grid;grid-template-columns:1fr;gap:8px;margin-top:23px}
  .cta__b .pill{width:100%;min-height:47px;padding:11px 16px}

  .contacts{display:block;margin-top:34px}
  #contact .contacts>.rv{padding:0 2px}
  .dl dt{margin-top:20px;font-size:10px}
  .dl dt:first-child{margin-top:0}
  .dl dd{max-width:100%;margin-top:4px;font-size:15px;overflow-wrap:anywhere}
  .dl dd small{font-size:11px}
  .form{margin-top:30px;padding:17px 15px;border-radius:18px}
  .two-col{grid-template-columns:1fr;gap:0}
  .field{margin-bottom:13px}
  .field label{margin-bottom:6px;font-size:10px}
  .field input,.field textarea{min-height:46px;padding:11px 12px;border-radius:9px;font-size:15px}
  .field textarea{min-height:92px}
  .consents{margin:5px 0 16px}
  .consent{font-size:11px}
  .consent input{width:18px;height:18px}
  .consent-required{margin-left:4px;font-size:8px}
  .consent-link{margin:4px 0 0 27px;font-size:10px}
  .form .pill--full{min-height:48px}
  .foot{padding:24px 0 34px}
  .foot__in{display:grid;gap:10px;font-size:11px}

  .hero h1.in,.hero__chain span,.eyebrow b,.dot{animation:none!important}
  .glass{backdrop-filter:blur(7px)}
}

@media(max-width:390px){
  :root{--pad:16px}
  .hero h1{font-size:38px}
  .mock__body{height:580px}
  .side{padding:9px;gap:6px}
  .side__tag{font-size:10px;padding:6px 7px}
  .read__actions .ico{width:31px;height:31px}
  .h2{font-size:30px}
  .c3-card{flex-basis:min(292px,84vw)}
}

/* === Исправление мобильной формы: содержимое строго внутри рамки === */
@media (max-width: 760px) {
  #contactForm.form {
    width: 100%;
    max-width: 100%;
    margin: 30px 0 0;
    padding: 26px 22px 24px !important;
    overflow: hidden;
  }

  #contactForm > .two-col,
  #contactForm > .field,
  #contactForm > .consents,
  #contactForm > .pill--full,
  #contactForm > .status,
  #contactForm .field,
  #contactForm .consent-block,
  #contactForm .consent,
  #contactForm .consent__text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #contactForm .field input,
  #contactForm .field textarea,
  #contactForm .pill--full {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #contactForm .consent {
    align-items: flex-start;
    padding-right: 2px;
  }

  #contactForm .consent__text,
  #contactForm .consent-link {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #contactForm .consent-required {
    white-space: normal;
  }

  #contactForm .consent-link {
    max-width: calc(100% - 28px);
  }
}

@media (max-width: 390px) {
  #contactForm.form {
    padding: 24px 18px 22px !important;
  }
}


/* Блок «светлая мобильная тема совпадает с компьютерной» удалён.
   Он возвращал полную яркость фона только светлой теме, а тёмная
   оставалась с приглушённым полем и почти чёрной вуалью — отсюда
   и брался плоский чёрный фон на телефоне. Теперь мобильных
   переопределений фона нет вовсе, и обе темы работают одинаково. */


/* ——— верхние вкладки компании ——— */
.company-tabs{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.company-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(var(--fgc),.12);background:rgba(var(--fgc),.025);color:rgba(var(--fgc),.72);
  font-size:12.5px;font-weight:500;text-decoration:none;transition:background .25s,border-color .25s,color .25s,transform .2s var(--ease)}
.company-tabs a:hover{background:rgba(var(--fgc),.065);border-color:rgba(var(--accent-rgb),.35);color:rgb(var(--fgc));transform:translateY(-1px)}
.company-tabs a[aria-current="page"]{background:rgba(var(--accent-rgb),.09);border-color:rgba(var(--accent-rgb),.38);color:var(--ice)}
@media(max-width:939px){.company-tabs{display:none}}

/* ——— внутренние страницы ——— */
.inner-hero{padding:74px 0 60px;text-align:left}
@media(min-width:768px){.inner-hero{padding:110px 0 82px}}
.inner-hero .eyebrow{justify-content:flex-start}
.inner-hero h1{margin-top:22px;max-width:920px;font-size:clamp(40px,7vw,76px);font-weight:600;line-height:.96;letter-spacing:-.035em}
.inner-hero .sub{max-width:690px;font-size:16px;margin-top:28px}
.inner-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.inner-actions .pill--ghost{background:rgba(var(--fgc),.025)}
.page-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(var(--fgc),.13),transparent)}
.info-grid{display:grid;gap:16px;margin-top:42px}
@media(min-width:760px){.info-grid.cols-2{grid-template-columns:repeat(2,1fr)}.info-grid.cols-3{grid-template-columns:repeat(3,1fr)}.info-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.info-card{border-radius:18px;padding:24px;min-height:190px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.info-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -42px rgba(var(--accent-rgb),.65)}
.info-card .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(var(--accent-rgb),.12);color:var(--ice);font-size:11px;font-weight:700}
.info-card .kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--fgc),.52)}
.info-card h3{margin-top:16px;font-size:18px;line-height:1.25}
.info-card p{margin-top:11px;font-size:13.5px;line-height:1.62;color:rgba(var(--fgc),.72)}
.info-card ul{margin-top:16px;padding-top:14px;border-top:1px solid rgba(var(--fgc),.09)}
.info-card li{position:relative;padding-left:16px;margin-top:7px;font-size:12.5px;line-height:1.5;color:rgba(var(--fgc),.66)}
.info-card li::before{content:'';position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.metric-card{border-radius:18px;padding:22px;min-height:138px;display:flex;flex-direction:column;justify-content:space-between}
.metric-card b{font-size:22px;font-weight:600;letter-spacing:-.025em}
.metric-card span{margin-top:18px;font-size:12.5px;line-height:1.45;color:rgba(var(--fgc),.58)}
.text-block{max-width:760px}
.text-block p{margin-top:16px;font-size:15px;line-height:1.75;color:rgba(var(--fgc),.76)}
.case-stack{display:grid;gap:18px;margin-top:42px}
.case-card{border-radius:22px;padding:26px}
.case-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.case-type{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--fgc),.54)}
.case-tag{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.24);color:var(--ice);background:rgba(var(--accent-rgb),.055)}
.case-card h3{margin-top:14px;font-size:clamp(22px,3vw,30px);line-height:1.15;max-width:780px}
.case-cols{display:grid;gap:18px;margin-top:24px}
@media(min-width:820px){.case-cols{grid-template-columns:1fr 1fr 1fr}}
.case-col{padding-top:15px;border-top:1px solid rgba(var(--fgc),.1)}
.case-col b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--fgc),.5)}
.case-col p{margin-top:9px;font-size:13px;line-height:1.62;color:rgba(var(--fgc),.72)}
.management-card{display:grid;gap:28px;align-items:center;border-radius:24px;padding:28px;margin-top:42px}
@media(min-width:820px){.management-card{grid-template-columns:220px 1fr;padding:34px}}
.management-mark{aspect-ratio:1;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(var(--fgc),.025));border:1px solid rgba(var(--fgc),.1)}
.management-mark svg{width:42%;height:auto;color:rgb(var(--fgc));opacity:.9}
.management-copy .kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--fgc),.52)}
.management-copy h2{margin-top:10px;font-size:clamp(28px,4vw,42px);line-height:1.05}
.management-copy .role{margin-top:9px;color:var(--ice);font-size:13px;font-weight:600}
.management-copy p{margin-top:18px;max-width:690px;color:rgba(var(--fgc),.74);font-size:14px;line-height:1.7}
.page-cta{margin:28px 0 92px;border-radius:24px;padding:36px 26px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.page-cta h2{font-size:clamp(26px,4vw,40px);line-height:1.05;max-width:640px}
.page-cta p{margin-top:10px;max-width:620px;color:rgba(var(--fgc),.66);font-size:13.5px;line-height:1.6}
.page-cta__buttons{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:560px){.inner-hero{padding-top:58px}.info-card,.case-card,.management-card{padding:20px}.page-cta{margin-bottom:62px;padding:26px 20px}.page-cta__buttons{width:100%}.page-cta__buttons .pill{flex:1}}


/* ═══════════════════════════════════════════════
   КЕЙСЫ
   ═══════════════════════════════════════════════ */

/* Оговорка про компании, которые попросили не публиковать работу.
   Стоит сразу под вступлением и намеренно набрана спокойно: это не
   оправдание, а объяснение. */
.case-note{
  margin-top:34px;padding:22px 24px;border-radius:18px;
  border:1px solid rgba(var(--fgc),.12);
  background:rgba(var(--fgc),.025);
  max-width:760px;
}
.case-note p{font-size:14px;line-height:1.7;color:rgba(var(--fgc),.72)}
.case-note p + p{margin-top:12px}
.case-note b{color:rgb(var(--fgc));font-weight:600}

/* Плитка кейса — ссылка на отдельную страницу. Кликабельна целиком,
   поэтому у неё заметное состояние наведения и видимый фокус с клавиатуры. */
.case-tile{
  display:block;text-decoration:none;color:inherit;
  border-radius:22px;padding:28px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.case-tile:hover{transform:translateY(-4px);box-shadow:0 30px 70px -46px rgba(var(--accent-rgb),.75)}
.case-tile__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-size:13px;font-weight:600;color:var(--ice);
}
.case-tile__go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.case-tile:hover .case-tile__go svg{transform:translateX(4px)}
@media(max-width:560px){.case-tile{padding:22px}}

/* Шапка страницы кейса: заказчик, услуга, срок — одной строкой. */
.case-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.case-meta span{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:999px;
  border:1px solid rgba(var(--fgc),.13);background:rgba(var(--fgc),.03);
  font-size:12.5px;color:rgba(var(--fgc),.78);
}
.case-meta span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none;
}

/* Снимок экрана в рамке.
   Скриншоты карточки светлые. На тёмной теме без рамки они выглядели бы
   как вырезанные из другого сайта прямоугольники, поэтому каждому даём
   кант, скругление и мягкую тень — снимок читается как вложенный
   документ, а не как дыра в макете. */
.shot{margin:0}
.shot figcaption{
  margin-top:12px;font-size:12.5px;line-height:1.5;
  color:rgba(var(--fgc),.58);
}
.shot__frame{
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(var(--fgc),.16);
  background:rgba(var(--fgc),.04);
  box-shadow:0 22px 50px -34px rgba(0,0,0,.6);
  line-height:0;
}
.shot__frame img{width:100%;height:auto;display:block}
/* Вертикальные снимки телефона не растягиваем на всю колонку. */
.shot--phone .shot__frame{max-width:340px}
.shot--wide .shot__frame{border-radius:14px}

.shot-grid{display:grid;gap:24px;margin-top:34px}
@media(min-width:760px){.shot-grid.cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.shot-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:759px){.shot-grid{gap:30px}}
/* На всю ширину снимок телефона распускаем только на самом телефоне.
   На планшете и шире он должен остаться узким — иначе интерфейс
   мобильного приложения растягивается на пол-экрана и выглядит
   как чужая вставка, а не как снимок с телефона. */
@media(max-width:520px){.shot--phone .shot__frame{max-width:100%}}

/* «Было / стало». Снимка «до» не существует: карточка была пустой и
   никто её не фотографировал. Поэтому слева честный текст, справа —
   снимок того, что получилось. Придумывать скриншот «до» мы не будем. */
.then-now{display:grid;gap:26px;margin-top:36px;align-items:start}
@media(min-width:900px){.then-now{grid-template-columns:1fr 1fr;gap:40px}}
.then-now__side{border-radius:20px;padding:26px}
.then-now__label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(var(--fgc),.5);
}
.then-now__side h3{margin-top:14px;font-size:clamp(20px,2.4vw,26px);line-height:1.15}
.then-now__side p{margin-top:14px;font-size:14px;line-height:1.7;color:rgba(var(--fgc),.74)}
.then-now__list{margin-top:18px;padding-top:16px;border-top:1px solid rgba(var(--fgc),.1)}
.then-now__list li{
  position:relative;padding-left:18px;margin-top:9px;
  font-size:13px;line-height:1.55;color:rgba(var(--fgc),.66);
}
.then-now__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:rgba(var(--fgc),.3);
}
@media(max-width:560px){.then-now__side{padding:20px}}

/* Строка показателей результата. */
.metric-row{display:grid;gap:14px;margin-top:34px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.metric-row{grid-template-columns:repeat(4,1fr)}}
.metric{
  border-radius:16px;padding:20px 18px;
  border:1px solid rgba(var(--fgc),.11);background:rgba(var(--fgc),.025);
}
.metric b{
  display:block;font-size:clamp(24px,3.4vw,34px);font-weight:600;
  letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.metric span{
  display:block;margin-top:12px;font-size:12px;line-height:1.45;
  color:rgba(var(--fgc),.58);
}
.metric--signal b{color:var(--ice)}

/* Этап работы: номер, заголовок, описание, снимок. Здесь важнее
   порядок, чем плитка, поэтому не карточки, а строки с линией. */
.work-step{padding:28px 0;border-top:1px solid rgba(var(--fgc),.12)}
.work-step:first-child{border-top:0;padding-top:0}
.work-step__top{display:flex;align-items:baseline;gap:14px}
.work-step__no{
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ice);flex:none;
}
.work-step h3{font-size:clamp(17px,2vw,21px);line-height:1.2}
.work-step p{margin-top:12px;font-size:14px;line-height:1.72;color:rgba(var(--fgc),.72);max-width:70ch}
.work-step .shot{margin-top:24px}

/* На широком экране текст и снимок идут не друг под другом, а рядом.
   Скриншот телефона имеет пропорции 760x1571: поставленный под текст,
   он растягивал каждый шаг почти на экран, а справа от него оставалось
   пустое поле. */
@media(min-width:900px){
  .work-step{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(250px,24vw,330px);
    /* Третья строка — пустая и тянущаяся. Без неё высокий снимок,
       занимающий обе строки, раздаёт свою высоту между ними: первая
       строка раздувается вдвое и утягивает абзац к середине блока.
       Здесь весь остаток достаётся третьей строке, а заголовок и текст
       остаются прижатыми к верху, как и положено. */
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(26px,3.2vw,52px);
    align-items:start;padding:34px 0;
  }
  .work-step__top{grid-column:1;grid-row:1}
  .work-step p{grid-column:1;grid-row:2;max-width:none}
  .work-step .shot--phone{grid-column:2;grid-row:1/span 3;margin-top:2px}
  .work-step .shot--phone .shot__frame{max-width:100%}
  /* Широкий снимок в узкой колонке нечитаем: он короткий и растянутый.
     Такие остаются во всю ширину, но уже под текстом. */
  .work-step .shot:not(.shot--phone){grid-column:1/-1;grid-row:4;margin-top:20px}
  .work-step .shot:not(.shot--phone) .shot__frame{max-width:820px}
}

/* Единая верхняя навигация: главная + страницы компании + разделы главной */
.nav.wrap{max-width:1480px}
.nav__in{gap:22px}
.nav__links{gap:14px;flex:1;justify-content:center;min-width:0}
.nav__links a{font-size:13px;white-space:nowrap}
.nav__links a[aria-current="page"]{color:var(--ice)}
@media(min-width:1240px){
  .nav__links{display:flex}
  .nav__right{margin-left:0}
}
@media(max-width:1239px){
  .nav__links{display:none}
  .burger{display:block}
  .pill--cta{display:none}
  .nav__in{gap:14px}
  .nav__right{margin-left:auto;gap:10px}
}




/* Плавный переход между отдельными страницами без нативного cross-document
   View Transition: так якорная прокрутка не конфликтует с восстановлением
   позиции браузером. */
html { background: var(--bg); }
body {
  animation: pattern-page-enter .72s cubic-bezier(.22,1,.36,1) both;
}
html.page-leaving body {
  animation: none !important;
  opacity: 0;
  transition: opacity .42s cubic-bezier(.4,0,.2,1);
}
@keyframes pattern-page-enter {
  0%, 16% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation-duration: .01ms; }
  html.page-leaving body { transition-duration: .01ms; }
}



/* ═══════════════════════════════════════════════
   ЗАКРЕПЛЁННАЯ ВЕРХНЯЯ НАВИГАЦИЯ
   Шапка вынесена из smooth-контейнера, чтобы не
   уезжать вместе с виртуальной прокруткой страницы.
   ═══════════════════════════════════════════════ */
.nav{
  position:fixed!important;
  top:0;left:0;right:0;width:100%;
  z-index:210;
  padding-top:0!important;
  isolation:isolate;
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  backdrop-filter:blur(16px) saturate(125%);
}
.nav.wrap{
  max-width:none!important;
  padding-left:0!important;
  padding-right:0!important;
}
.nav::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--bg);
  opacity:.82;
  border-bottom:1px solid rgba(var(--fgc),.08);
  box-shadow:0 10px 34px rgba(0,0,0,.08);
  pointer-events:none;
}
.nav__in{
  position:relative;
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:18px var(--pad);
}
/* Компенсируем высоту вынесенной из потока шапки. */
#smooth{padding-top:84px}
@media(max-width:760px){
  .nav__in{padding-top:14px;padding-bottom:14px}
  #smooth{padding-top:72px}
}


/* ——— страница «О компании»: история и направления ——— */
.story-grid{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.story-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:54px}}
.founder-card{border-radius:24px;padding:28px;position:relative;overflow:hidden}
.founder-card::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;bottom:-100px;background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 68%);pointer-events:none}
.founder-card__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--fgc),.52)}
.founder-card h2{margin-top:14px;font-size:clamp(30px,4vw,46px);line-height:1.02}
.founder-card p{margin-top:18px;color:rgba(var(--fgc),.74);font-size:14.5px;line-height:1.75;max-width:610px}
.founder-sign{margin-top:26px;padding-top:20px;border-top:1px solid rgba(var(--fgc),.1);display:flex;align-items:center;gap:12px}
.founder-sign__mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.2);color:var(--ice);font-size:13px;font-weight:700}
.founder-sign b{display:block;font-size:13px}.founder-sign span{display:block;margin-top:2px;font-size:11.5px;color:rgba(var(--fgc),.55)}
.timeline{display:grid;gap:12px}
.timeline-item{display:grid;grid-template-columns:84px 1fr;gap:18px;border-radius:18px;padding:20px;border:1px solid rgba(var(--fgc),.1);background:rgba(var(--fgc),.025);transition:transform .3s var(--ease),border-color .3s}
.timeline-item:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.28)}
.timeline-date{font-size:12px;font-weight:700;color:var(--ice);letter-spacing:.02em}
.timeline-item h3{font-size:16px;line-height:1.25}.timeline-item p{margin-top:7px;font-size:13px;line-height:1.62;color:rgba(var(--fgc),.68)}
@media(max-width:560px){.timeline-item{grid-template-columns:1fr;gap:8px}.founder-card{padding:22px}}
.origin-moment{margin-top:18px;border-radius:22px;padding:28px;display:grid;gap:22px;align-items:center}
@media(min-width:820px){.origin-moment{grid-template-columns:.76fr 1.24fr;padding:32px}}
.origin-quote{font-size:clamp(25px,3.6vw,40px);font-weight:600;line-height:1.08;letter-spacing:-.03em}
.origin-quote span{color:var(--ice)}
.origin-copy p{font-size:14px;line-height:1.75;color:rgba(var(--fgc),.73)}
.origin-copy p+p{margin-top:14px}
.principle{margin-top:42px;border-radius:26px;padding:34px;position:relative;overflow:hidden}
.principle::before{content:'';position:absolute;inset:auto -15% -60% 40%;height:260px;background:radial-gradient(circle,rgba(var(--accent-rgb),.12),transparent 68%);pointer-events:none}
.principle__kicker{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--fgc),.5)}
.principle h2{margin-top:13px;max-width:900px;font-size:clamp(31px,5vw,54px);line-height:1.02}
.principle p{margin-top:18px;max-width:790px;font-size:14px;line-height:1.75;color:rgba(var(--fgc),.7)}
.service-track{display:grid;gap:14px;margin-top:34px}
@media(min-width:760px){.service-track{grid-template-columns:repeat(2,1fr)}}
.service-track__item{border-radius:20px;padding:24px;min-height:178px;display:flex;flex-direction:column;border:1px solid rgba(var(--fgc),.1);background:rgba(var(--fgc),.025)}
.service-track__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.service-track__num{font-size:11px;font-weight:700;color:var(--ice)}
.service-track__tag{font-size:10.5px;padding:4px 8px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.2);color:rgba(var(--fgc),.64)}
.service-track__item h3{margin-top:20px;font-size:19px;line-height:1.22}
.service-track__item p{margin-top:10px;font-size:13px;line-height:1.62;color:rgba(var(--fgc),.68)}
.scope-strip{display:grid;gap:14px;margin-top:28px}
@media(min-width:760px){.scope-strip{grid-template-columns:repeat(5,1fr)}}
.scope-pill{border-radius:16px;padding:18px 16px;min-height:118px;border:1px solid rgba(var(--fgc),.1);background:rgba(var(--fgc),.022)}
.scope-pill b{display:block;font-size:13px;line-height:1.25}.scope-pill span{display:block;margin-top:9px;font-size:11.5px;line-height:1.45;color:rgba(var(--fgc),.56)}
.about-note{margin-top:28px;font-size:12.5px;line-height:1.7;color:rgba(var(--fgc),.58);max-width:820px}


/* ——— руководство компании: карточки основателей ——— */
.executive-stack{display:grid;gap:22px;margin-top:42px}
.executive-card{display:grid;grid-template-columns:minmax(260px,34%) 1fr;border-radius:26px;overflow:hidden;align-items:stretch;min-height:520px}
.executive-card--reverse{grid-template-columns:1fr minmax(260px,34%)}
.executive-card--reverse .executive-photo{order:2}
.executive-card--reverse .executive-copy{order:1}
.executive-photo{position:relative;min-height:100%;background:rgba(var(--fgc),.035);overflow:hidden}
.executive-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.18) 100%)}
.executive-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transition:transform .9s var(--ease)}
.executive-card:hover .executive-photo img{transform:scale(1.018)}
.executive-copy{padding:38px 40px 36px;display:flex;flex-direction:column;justify-content:center}
.executive-kicker{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--fgc),.5)}
.executive-kicker::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--cyan)}
.executive-name{margin-top:13px;font-size:clamp(30px,4.2vw,48px);line-height:.98;letter-spacing:-.035em}
.executive-roles{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.executive-role{display:inline-flex;align-items:center;min-height:29px;padding:5px 10px;border:1px solid rgba(var(--accent-rgb),.22);border-radius:999px;background:rgba(var(--accent-rgb),.055);color:var(--ice);font-size:11.5px;font-weight:600}
.executive-role--muted{border-color:rgba(var(--fgc),.12);background:rgba(var(--fgc),.03);color:rgba(var(--fgc),.72)}
.executive-lead{margin-top:23px;font-size:16px;line-height:1.68;color:rgba(var(--fgc),.82);max-width:760px}
.executive-quote{margin-top:22px;padding:17px 20px;border-left:1px solid var(--cyan);border-radius:0 16px 16px 0;background:rgba(var(--accent-rgb),.065);color:rgba(var(--fgc),.78);font-size:13.5px;line-height:1.67}
.executive-copy p.executive-body{margin-top:18px;color:rgba(var(--fgc),.7);font-size:14px;line-height:1.72;max-width:760px}
.executive-focus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:24px}
.executive-focus div{padding:13px 14px;border-radius:14px;border:1px solid rgba(var(--fgc),.09);background:rgba(var(--fgc),.025)}
.executive-focus b{display:block;font-size:11.5px;font-weight:600;color:rgb(var(--fgc))}
.executive-focus span{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:rgba(var(--fgc),.54)}
/* Подпись под тройкой зон ответственности: она читается как итог всей
   карточки, поэтому набрана мельче основного текста и по центру —
   иначе выглядела бы четвёртым, обрубленным пунктом сетки. */
.executive-closer{margin-top:14px;text-align:center;font-size:12.5px;line-height:1.5;
  color:rgba(var(--fgc),.6);font-style:italic}
.leadership-note{margin-top:22px;border-radius:22px;padding:28px 30px;display:grid;gap:18px;align-items:center}
@media(min-width:820px){.leadership-note{grid-template-columns:.85fr 1.15fr}}
.leadership-note h3{font-size:clamp(23px,3vw,32px);line-height:1.1}
.leadership-note p{font-size:14px;line-height:1.72;color:rgba(var(--fgc),.7)}
.leadership-pair{display:grid;gap:14px;margin-top:36px}
@media(min-width:760px){.leadership-pair{grid-template-columns:repeat(3,1fr)}}
.leadership-pair .info-card{min-height:170px}
@media(max-width:819px){
  .executive-card,.executive-card--reverse{grid-template-columns:1fr;min-height:0}
  .executive-card--reverse .executive-photo,.executive-card--reverse .executive-copy{order:initial}
  /* Высоту рамки задаёт сам снимок, и больше ничто.

     Так пришлось сделать после того, как портреты пропали на телефонах.
     Разбор: карточка — это grid, а его ячейки по умолчанию растягиваются
     по высоте строки (align-self:stretch). Растяжение отменяет заданную
     контейнеру пропорцию aspect-ratio, и высота строки начинает браться
     из содержимого. Если снимок при этом вынут из потока, содержимого
     не остаётся — строка схлопывается в ноль вместе с рамкой.

     Поэтому: контейнеру никаких пропорций и никакого растяжения,
     снимок остаётся в потоке, кадрирование 4:5 задаётся самому снимку.
     Даже если пропорция не поддерживается, у картинки есть собственные
     размеры 900×1200 — она просто станет чуть выше, но не исчезнет. */
  .executive-photo{aspect-ratio:auto;min-height:0;align-self:start}
  .executive-photo img{
    position:static;display:block;
    width:100%;height:auto;
    aspect-ratio:4/5;object-fit:cover;
  }
  .executive-copy{padding:26px 24px 28px}
}
@media(max-width:560px){
  .executive-stack{gap:16px;margin-top:30px}
  .executive-card{border-radius:20px}
  .executive-copy{padding:22px 19px 24px}
  .executive-focus{grid-template-columns:1fr}
  .executive-lead{font-size:15px}
  .executive-quote{padding:14px 15px}
  .leadership-note{padding:22px 20px}
}

/* Единая верхняя навигация: главная + страницы компании + разделы главной */
.nav.wrap{max-width:1480px}
.nav__in{gap:22px}
.nav__links{gap:14px;flex:1;justify-content:center;min-width:0}
.nav__links a{font-size:13px;white-space:nowrap}
.nav__links a[aria-current="page"]{color:var(--ice)}
@media(min-width:1240px){
  .nav__links{display:flex}
  .nav__right{margin-left:0}
}
@media(max-width:1239px){
  .nav__links{display:none}
  .burger{display:block}
  .pill--cta{display:none}
  .nav__in{gap:14px}
  .nav__right{margin-left:auto;gap:10px}
}




/* Плавный переход между отдельными страницами без нативного cross-document
   View Transition: так якорная прокрутка не конфликтует с восстановлением
   позиции браузером. */
html { background: var(--bg); }
body {
  animation: pattern-page-enter .72s cubic-bezier(.22,1,.36,1) both;
}
html.page-leaving body {
  animation: none !important;
  opacity: 0;
  transition: opacity .42s cubic-bezier(.4,0,.2,1);
}
@keyframes pattern-page-enter {
  0%, 16% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation-duration: .01ms; }
  html.page-leaving body { transition-duration: .01ms; }
}



/* ═══════════════════════════════════════════════
   ЗАКРЕПЛЁННАЯ ВЕРХНЯЯ НАВИГАЦИЯ
   Шапка вынесена из smooth-контейнера, чтобы не
   уезжать вместе с виртуальной прокруткой страницы.
   ═══════════════════════════════════════════════ */
.nav{
  position:fixed!important;
  top:0;left:0;right:0;width:100%;
  z-index:210;
  padding-top:0!important;
  isolation:isolate;
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  backdrop-filter:blur(16px) saturate(125%);
}
.nav.wrap{
  max-width:none!important;
  padding-left:0!important;
  padding-right:0!important;
}
.nav::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--bg);
  opacity:.82;
  border-bottom:1px solid rgba(var(--fgc),.08);
  box-shadow:0 10px 34px rgba(0,0,0,.08);
  pointer-events:none;
}
.nav__in{
  position:relative;
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:18px var(--pad);
}
/* Компенсируем высоту вынесенной из потока шапки. */
#smooth{padding-top:84px}
@media(max-width:760px){
  .nav__in{padding-top:14px;padding-bottom:14px}
  #smooth{padding-top:72px}
}