/* Стили лендинга Chipsa: страница и политика конфиденциальности.
   Устройство стилей: 1) токены → 2) база → 3) компоненты (.btn, .chip, .card, .dot, .lead…) → 4) секции → 5) ховеры/нажатия
   → 6) десктоп (≥1024px: меняются токены и раскладка, размеры растут с шириной до 4K) → 7) «уменьшить анимацию». */

/* Onest с нашего сервера (OFL), вариативный: один файл на все начертания */
@font-face{font-family:"Onest";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 400;font-display:swap;src:url(fonts/unbounded-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 400;font-display:swap;src:url(fonts/unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 400;font-display:swap;src:url(fonts/unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== 1. Токены ===== */
:root{
  /* цвет */
  --bg:#0b0b0b; --fill:#212121; --fill-2:#2e2e2e; --fill-3:#3a3a3a;
  --fg:#f4f4f1; --fg-a:rgba(244,244,241,.72); --soft:#c8c9c5; --dim:#a5a7a3; --light-hi:#fff; --light-lo:#d9d9d4;
  --yellow:#ffce00; --yellow-hi:#ffd93d; --yellow-lo:#e6b800; --yellow-tint:#3a3418; --yellow-tint-hi:#4a4220;
  --ink:#000;  /* текст на жёлтом и светлом */
  --glass:rgba(36,36,36,.72); --blur:12px;  /* полупрозрачная кнопка поверх видео */
  --scrim:color-mix(in srgb,var(--bg) 90%,transparent);  /* затемнение под всплывающим видео */
  /* затенение первого экрана: сверху под логотип, снизу — переход в фон страницы */
  --hero-shade:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 55%,transparent) 0%,transparent 22%,transparent 40%,color-mix(in srgb,var(--bg) 85%,transparent) 76%,var(--bg) 100%);
  --shadow:0 10px 30px rgba(0,0,0,.5); --shadow-l:0 20px 50px rgba(0,0,0,.55);
  --glow-y:0 14px 40px color-mix(in srgb,var(--yellow) 28%,transparent); --glow-l:0 14px 40px color-mix(in srgb,var(--light-hi) 18%,transparent);
  /* шрифт и размеры текста */
  --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --font-display:"Unbounded","Onest",system-ui,sans-serif; --fw-display:200; --fw-h2:200;
  --fs-xs:13.5px; --fs-s:16px; --fs-body:17px; --fs-m:18px; --fs-btn:16.5px; --fs-chip:min(15.5px,4.1vw); --fs-badge:13px;
  --fs-card:22px; --fs-lead:24px; --fs-note:26px; --fs-xl:30px;
  --fs-thesis:clamp(27px,7.6vw,34px); --fs-h3:clamp(30px,8vw,44px); --fs-h2:clamp(40px,11.5vw,52px);
  --fs-h1:clamp(46px,13.4vw,62px); --fs-h1-s:calc(var(--fs-h1) / 1.2); --fs-hero-sub:calc(var(--fs-m) * 1.5);
  --rev-w:82%; --geo-line:4px; --geo-city:9px; --geo-home:11px; --geo-label:13px; --geo-land:#4a4a48; --geo-dots:url(img/world-dots-m.svg); --fs-num:clamp(100px,31vw,160px);
  /* межстрочное и трекинг */
  --lh-display:.96; --lh-head:1.04; --lh-lead:1.28; --lh-card:1.35; --lh-text:1.55;
  --tr-display:-.045em; --tr-head:-.04em; --tr-thesis:-.02em; --tr-lead:-.015em;
  /* отступы: --s1…--s3 — между блоками; --s-3xs…--s-s — мелкие зазоры внутри компонента */
  --g:20px; --s1:22px; --s15:30px; --s2:44px; --s25:96px; --s3:128px;
  --s-3xs:4px; --s-2xs:6px; --s-xs:10px; --s-s:14px;
  --page-top:22px;  /* отступ логотипа и плашки от верха экрана */
  /* формы */
  --r:24px; --r-s:20px; --pill:999px; --btn-h:52px; --btn-h-s:34px; --btn-h-xs:32px; --ico:36px; --avatar:64px; --medal:34px; --tier:56px; --rule:1px;
  --logo-w:118px; --logo-w-foot:110px; --pop-w:320px;
  /* кнопки внизу экрана: ширина пары на телефоне, отступ от края; --dock-clear — сколько места оставить под ними */
  --dock-w:452px; --dock-pad:14px; --dock-clear:calc(var(--btn-h) + var(--dock-pad) * 2 + var(--s1));
  /* движение: длительности, кривые, сдвиги появления */
  --dur-xs:.25s; --dur-s:.35s; --dur-m:.5s; --dur-l:.7s; --dur-xl:1s; --dur-2xl:1.6s; --dur-3xl:2.2s; --dur-ticker:60s;
  --ease:cubic-bezier(.2,.75,.15,1); --ease-io:cubic-bezier(.65,0,.25,1); --ease-out:cubic-bezier(.25,.1,.25,1);
  --ease-in:cubic-bezier(.55,0,1,.45); --ease-spin:cubic-bezier(.12,.8,.18,1);
  --move-s:10px; --move-m:16px; --move-l:24px; --move-xl:32px;
  color-scheme:dark;
}

/* ===== 2. База ===== */
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-body)/var(--lh-text) var(--font);font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
img,video{max-width:100%}
/* текст только для скринридеров */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
p{margin:0;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.page{margin:0 auto;padding-bottom:calc(var(--dock-clear) + env(safe-area-inset-bottom,0px));overflow:clip}
/* без JS: кнопки, которые работают только со скриптом, не показываем */
html:not(.js) .dock,html:not(.js) .rev-nav{display:none}

/* ===== 3. Компоненты ===== */
/* текст */
.lead{font:300 var(--fs-lead)/var(--lh-lead) var(--font);letter-spacing:var(--tr-lead)}
.muted{color:var(--soft);font-size:var(--fs-s);line-height:var(--lh-text)}
/* роли текста: одна роль — один стиль на всех страницах */
.desc{color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-text)}  /* описание: кейс, шаг, ответ */
.step b,.faq-q,.who b,.pkg h3,.promo-pop b,.doc h2{font:400 var(--fs-card)/var(--lh-card) var(--font);letter-spacing:var(--tr-lead)}  /* заголовок карточки */
.offer p:not(.label),.rev blockquote{font:400 var(--fs-m)/var(--lh-text) var(--font)}  /* текст в карточке; на десктопе — --fs-card */
.case-meta,.label{font-size:var(--fs-s);font-weight:500;color:var(--yellow)}  /* метка: отрасль, номер шага, оффер, время */
.y{color:var(--yellow)}
.h2{margin:0 var(--g);font:var(--fw-h2) var(--fs-h2)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head)}
.h2 em{font-style:normal;color:var(--dim)}

/* жёлтая точка (+ пульс) */
.dot{display:inline-block;flex:none;width:.45em;height:.45em;border-radius:50%;background:var(--yellow)}
.dot.ping{box-shadow:0 0 0 0 color-mix(in srgb,var(--yellow) 60%,transparent);animation:ping var(--dur-3xl) infinite}
@keyframes ping{70%{box-shadow:0 0 0 .5em transparent}100%{box-shadow:0 0 0 0 transparent}}

/* кнопка: одна высота, текст и иконка строго по центру */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:var(--btn-h);padding:0 1.25em;border:0;border-radius:var(--pill);
  font-size:var(--fs-btn);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background var(--dur-s),color var(--dur-s),transform var(--dur-xs) var(--ease),box-shadow var(--dur-s),opacity var(--dur-s)}
.btn svg{width:1.15em;height:1.15em;flex:none;transform:translateY(-.08em)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-light{background:var(--fg);color:var(--ink)}
.btn-dark{background:var(--fill-2);color:var(--fg)}
.btn-glass{background:var(--glass);color:var(--fg);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.btn-s{height:var(--btn-h-s);padding:0 1em;font-size:var(--fs-xs);gap:.6em}
.btn-icon{width:var(--btn-h);padding:0;overflow:hidden}  /* петля стрелки не выходит за круг */
/* круглая иконка внутри кнопки (стрелка ссылки) */
.ico{display:grid;place-items:center;flex:none;width:var(--ico);height:var(--ico);border-radius:50%;background:var(--yellow);color:var(--ink);font-style:normal;transition:transform var(--dur-s) var(--ease)}
.ico svg{transform:none}  /* в круге значок по центру: подъём .btn svg — только для значка рядом с текстом */

/* «перекат» подписи: текст уезжает вверх, снизу приезжает копия */
.roll{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2;vertical-align:top}  /* top: без запаса под базовой линией — надпись по центру кнопки */
.roll>span{display:block;transition:transform var(--dur-m) var(--ease)}

/* чипс фильтра */
.chip{border:0;cursor:pointer;background:var(--fill-2);border-radius:var(--pill);padding:.65em .85em .7em;font-size:var(--fs-chip);font-weight:500;line-height:1;transition:background var(--dur-xs),color var(--dur-xs),transform var(--dur-xs) var(--ease)}
.chip[aria-pressed="true"]{background:var(--yellow);color:var(--ink)}

/* ссылка внутри текста */
.link{color:var(--fg);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:.2em;transition:text-decoration-color var(--dur-s)}
.link:hover{text-decoration-color:var(--yellow)}

/* карточка-подложка */
.card{background:var(--fill);border-radius:var(--r)}
.card.hov,.card.hov *{transition:background var(--dur-s) var(--ease-out),color var(--dur-s) var(--ease-out)}

/* жёлтая метка на превью */
.badge{position:absolute;z-index:1;left:.9em;top:.9em;font-size:var(--fs-badge);font-weight:600;line-height:1;background:var(--yellow);color:var(--ink);padding:.55em .95em;border-radius:var(--pill)}
.badge:has(.badge-ico){display:flex;align-items:center;gap:.45em}
.badge-ico{width:auto;height:1.45em;margin:-.3em 0}  /* медаль награды — силуэт как у .medal */

/* появление: работает только с JS, без него всё видно сразу */
.js .rv{opacity:0;transform:translateY(var(--move-xl));transition:opacity var(--dur-xl) var(--ease),transform var(--dur-xl) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .card.hov.rv{transition:opacity var(--dur-xl) var(--ease),transform var(--dur-xl) var(--ease),background var(--dur-s) var(--ease-out),color var(--dur-s) var(--ease-out)}  /* карточка с ховером: появление + инверсия */
/* слова под маской: выезжают снизу */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.w>span{display:inline-block}
.js .split .w>span{transform:translateY(110%);transition:transform var(--dur-xl) var(--ease);transition-delay:calc(var(--i) * .06s)}
.js .split.in .w>span{transform:none}

/* ===== 4. Секции ===== */
/* герой */
.hero{position:relative;height:100svh;min-height:560px;background:var(--ink);overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 40%}
.js .hero video{animation:fadein var(--dur-2xl) var(--ease-out) both}
@keyframes fadein{from{opacity:0}}
.hero::after{content:"";position:absolute;inset:0;background:var(--hero-shade)}
.logo{position:absolute;z-index:2;left:var(--g);top:calc(var(--page-top) + env(safe-area-inset-top,0px));width:var(--logo-w);transition:opacity var(--dur-s)}
.logo img{display:block;width:100%;height:auto}
.hero-txt{position:absolute;z-index:2;left:var(--g);right:var(--g);bottom:calc(var(--dock-clear) + env(safe-area-inset-bottom,0px))}
h1{margin:0;font:var(--fw-display) var(--fs-h1)/var(--lh-display) var(--font-display);letter-spacing:var(--tr-display)}
.js h1 .w>span{transform:translateY(105%);animation:up var(--dur-xl) var(--ease) forwards;animation-delay:calc(.25s + var(--i) * .07s)}
@keyframes up{to{transform:none}}
.hero-sub{margin-top:var(--s1);max-width:24ch;font-size:var(--fs-hero-sub);line-height:var(--lh-lead);color:var(--soft)}
.js .hero-sub{animation:subin var(--dur-xl) .9s var(--ease) both}
@keyframes subin{from{opacity:0;transform:translateY(var(--move-m))}}
/* герой-лента: высота по ролику 3:4, два видео сменяют друг друга затуханием, отрасль в подзаголовке меняется вместе с ними */
.js .hero-reel video{animation:none}
.reel-v{opacity:0;transition:opacity var(--dur-l) var(--ease-out)}
.reel-v.on{opacity:1}
/* телефон и планшет: ролик 3:4 с заголовком поверх, подзаголовок — отдельным блоком под роликом */
@media (max-width:1023px){
  .hero-reel{--hero-shade:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 50%,transparent) 0%,transparent 18%,transparent 52%,color-mix(in srgb,var(--bg) 80%,transparent) 82%,var(--bg) 100%);
    display:grid;height:auto;min-height:0;background:var(--bg)}
  .hero-reel::before{content:"";grid-area:1/1;aspect-ratio:3/4}
  .hero-reel video,.hero-reel .poster{bottom:auto;height:auto;aspect-ratio:3/4}
  .hero-reel::after{bottom:auto;aspect-ratio:3/4}
  .hero-reel .hero-txt{display:contents}
  .hero-reel h1{grid-area:1/1;align-self:end;position:relative;z-index:2;margin:0 var(--g) var(--s1)}
  .hero-reel .hero-sub{position:relative;z-index:2;margin:var(--s1) var(--g) 0}
}
.hero-reel h1{font-size:var(--fs-h1-s)}
.hero-reel .hero-sub{color:var(--fg-a)}
.hero-ind{display:block;transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-m) var(--ease)}
.hero-ind.out{opacity:0;transform:translateY(-.5em)}
.hero-ind.pre{opacity:0;transform:translateY(.5em);transition:none}

/* плашка спецпредложения со всплывающей карточкой */
.promo{position:absolute;z-index:4;right:var(--g);top:calc(var(--page-top) - var(--s-3xs) + env(safe-area-inset-top,0px))}
/* всплывашка раскрывается кругом из плашки (--from — центр круга у точки плашки), затем выезжают заголовок и текст */
.promo-pop{--from:calc(100% - 24px) -24px;position:absolute;right:0;top:calc(100% + var(--s-xs));width:min(var(--pop-w),calc(100vw - 2 * var(--g)));padding:var(--s1);border-radius:var(--r-s);box-shadow:var(--shadow-l);
  clip-path:circle(150% at var(--from));transform-origin:top right;transition:clip-path var(--dur-l) var(--ease),transform var(--dur-l) var(--ease),opacity var(--dur-s) var(--ease-out)}
.promo-pop[hidden]{display:block;clip-path:circle(0 at var(--from));transform:translateY(calc(var(--move-s) * -1)) scale(.96);opacity:0;pointer-events:none;visibility:hidden;transition:clip-path var(--dur-s) var(--ease-io),transform var(--dur-s) var(--ease-io),opacity var(--dur-xs) var(--ease-out) .1s,visibility 0s var(--dur-s)}
.promo-pop>b,.promo-pop>.muted,.promo-x{transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease);transition-delay:.15s}
.promo-pop>.muted{transition-delay:.24s}
.promo-x{transition-delay:.3s}
.promo-pop[hidden]>b,.promo-pop[hidden]>.muted,.promo-pop[hidden] .promo-x{opacity:0;transform:translateY(var(--move-s));transition-delay:0s}
.promo-pop b{display:block;padding-right:calc(var(--btn-h-xs) - var(--s-3xs))}  /* место под крестик */
.promo-pop .muted{margin-top:var(--s-xs)}
.promo-x{position:absolute;right:var(--s-xs);top:var(--s-xs);width:var(--btn-h-xs);height:var(--btn-h-xs);padding:0;font-size:var(--fs-xs)}

@media (max-width:359px){.promo-pre{display:none}}

/* строка-вход под первым экраном: короткие ссылки к нужному разделу для разных читателей */
.entry{margin:var(--s15) var(--g) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-xs);font-size:var(--fs-m);line-height:var(--lh-card)}

/* тезис: слова проявляются по скроллу */
.thesis{padding:var(--s3) var(--g) 0}
.thesis p{font:300 var(--fs-thesis)/var(--lh-lead) var(--font);letter-spacing:var(--tr-thesis);text-indent:22%}
.thesis .t{transition:opacity var(--dur-xs) linear}
.js .thesis .t{opacity:.42}
.js .thesis .t.on{opacity:1}

/* цифры */
.numbers{padding:var(--s3) var(--g) 0}
.n-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-xs)}
.n-row+.n-row{margin-top:var(--s2);flex-direction:row-reverse}
.n-row .lead{padding-bottom:var(--s-2xs);max-width:9ch;text-align:right}
.n-row+.n-row .lead{text-align:left}
.n-big{font:var(--fw-display) var(--fs-num)/.9 var(--font-display)}
.share{margin-top:var(--s2)}  /* тот же шаг, что между 16 и 125 */
.share .lead{margin-top:var(--s1);max-width:20ch}
.cells{margin-top:var(--s15);display:grid;grid-template-columns:repeat(25,1fr);gap:var(--s-3xs)}
.cells i{aspect-ratio:1;border-radius:50%;background:var(--fill-2);transition:background var(--dur-s) var(--ease-out);transition-delay:calc(var(--i) * 18ms)}
.cells.in i.on,html:not(.js) .cells i.on{background:var(--yellow)}
/* механический счётчик: цифры прокручиваются снизу вверх */
.odo{display:inline-flex}
.odo-col{display:inline-block;height:.9em;overflow:hidden;vertical-align:top}
.odo-strip{display:flex;flex-direction:column;align-items:flex-start;transition:transform var(--dur-3xl) var(--ease-spin);transition-delay:calc(var(--c) * .14s)}
.odo-strip span{display:block;width:max-content;height:.9em;line-height:.9em}
/* награды */
.awards{margin-top:var(--s25)}
.awards>.lead{margin-bottom:calc(var(--s15) + var(--s-3xs))}
.awards>.lead b{font-weight:400}
.aw{display:flex;flex-direction:column;gap:var(--s15)}
.aw-item{display:flex;flex-direction:column;gap:var(--s-s)}
.aw-item b{display:block;font-weight:500;font-size:var(--fs-m);line-height:var(--lh-card)}
.aw-item .muted{display:block}
.medals{display:flex;gap:var(--s-2xs)}
.medal{display:block;width:var(--medal);height:auto;aspect-ratio:34/46;transition:transform var(--dur-l) var(--ease),opacity var(--dur-m) var(--ease-out);transition-delay:calc(.2s + var(--i) * .09s)}
.js .awards:not(.in) .medal{transform:translateY(calc(var(--move-m) * -1)) scale(.6);opacity:0}

/* цвет проекта: фон страницы подкрашивается им при наведении на кейс (скрипт ставит body.tinted и --page-tint);
   сборка оставляет только правила кейсов, которые есть на странице (формат правила менять вместе с tint_only в build.py) */
.case:has([data-case=designedcells]){--tint:#4fb79a} .case:has([data-case=chairs]){--tint:#c8955f}
.case:has([data-case=vki]){--tint:#d0243a} .case:has([data-case=energoline]){--tint:#d8260d}
.case:has([data-case=opora]){--tint:#d84e65} .case:has([data-case=vileda]){--tint:#2f8fd0}
.case:has([data-case=ray]){--tint:#6f8fa8} .case:has([data-case=ist]){--tint:#2d46d8}
.case:has([data-case=artlife]){--tint:#3fae7a} .case:has([data-case=pravda]){--tint:#d8783e}
.case:has([data-case=mockups]){--tint:#d86392} 

.case:has([data-case=control]){--tint:#9aa8a0}
.case:has([data-case=zola]){--tint:#d8443a} .case:has([data-case=anorsi]){--tint:#6fb06a} 
body{transition:background-color var(--dur-l) var(--ease-out)}
body.tinted{background-color:color-mix(in srgb,var(--page-tint) 16%,var(--bg))}

/* работы */
.works{padding-top:var(--s3)}
.chips{position:sticky;top:0;z-index:5;margin-top:var(--s15);padding:calc(var(--s-xs) + env(safe-area-inset-top,0px)) var(--g) var(--s-s);display:flex;flex-wrap:wrap;gap:var(--s-2xs)}
.list{display:flex;flex-direction:column;gap:calc(var(--s25) + var(--s-3xs));padding-top:calc(var(--s2) + var(--s-xs));transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-m) var(--ease)}
.list.out{opacity:0;transform:translateY(var(--move-m))}
/* телефон: в длинной подборке сначала 5 работ, остальные — по кнопке «More work» */
.more{display:flex;margin:var(--s2) var(--g) 0;width:calc(100% - 2 * var(--g))}
.more[hidden]{display:none}
@media (max-width:1023px){.list.cut>.case:nth-child(n+6){display:none}}  /* .cut ставит скрипт */
@media (min-width:1024px){.more{display:none}}
.case>*{margin-inline:var(--g)}
.case-meta{margin-bottom:var(--s-2xs)}
.case h3{margin-top:0;margin-bottom:var(--s1);font:var(--fw-display) var(--fs-h3)/var(--lh-display) var(--font-display);letter-spacing:var(--tr-display);hyphens:auto;overflow-wrap:break-word}  /* длинное слово на телефоне переносится, а не вылезает за край */
.case h3 .w,.case h3 .w>span{max-width:100%}  /* слова заголовка обёрнуты в inline-block для анимации - без этого перенос не срабатывает */
.case .desc{margin-top:var(--s15)}
.quote{margin-block:0}  /* цитата клиента в карточке кейса: текст + .who с фото */
.quote blockquote{margin-inline:0}
.quote .who{margin-top:var(--s-s)}
.go{display:flex;justify-content:space-between;height:calc(var(--ico) + var(--s-s) * 2);margin-top:var(--s1);padding:0 var(--s-s) 0 1.25em;font-size:var(--fs-m)}
/* превью: рамка раскрывается при появлении, видео двигается внутри с параллаксом */
.frame{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--fill);clip-path:inset(0 round var(--r));transition:clip-path var(--dur-xl) var(--ease),transform var(--dur-xs) var(--ease)}
/* рамка фокуса — поверх видео на слое ::after, внутри рамки: снаружи её срезал бы clip-path, а на самой ссылке её закрывает видео */
.frame:focus-visible{outline:0}
.frame:focus-visible::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;outline:2px solid var(--yellow);outline-offset:-3px;pointer-events:none}
.js .case:not(.in) .frame{clip-path:inset(14% 8% round var(--r))}
.par{position:absolute;inset:-9% 0;will-change:transform;transition:scale var(--dur-l) var(--ease)}
.par img,.par video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-2xl) var(--ease)}
.js .case:not(.in) .par :is(img,video){transform:scale(1.18)}
.peek{display:none}

/* ряд фактов с жёлтыми точками: условия, технологии */
.facts{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--g);font-size:var(--fs-m);line-height:var(--lh-card)}
.facts li{display:flex;align-items:baseline;gap:.6em}

/* секция-обёртка (английская главная): поля по краям; на десктопе — сетка 12 колонок, по умолчанию во всю ширину */
.sec{padding-top:var(--s3)}
.sec>*:not(.h2){margin-inline:var(--g)}

/* как работаем: шаги карточками (на телефоне — лента со свайпом), цены, технологии */
.how>.steps{margin:var(--s2) 0 0;padding:0 var(--g);list-style:none;display:flex;gap:var(--s1);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:var(--g)}
.steps::-webkit-scrollbar{display:none}
.step{flex:0 0 78%;scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s-xs);padding:var(--s1)}
.sec-note{margin-top:var(--s1)}  /* примечание под блоком секции */
.sec-aside{margin-top:var(--s2)}

/* с экрана на площадку (Expo): фото с выставки 3:4 — на телефоне лента со свайпом, на десктопе три в ряд */
.sec>.venue-row{margin:var(--s2) 0 0;padding:0 var(--g);display:flex;gap:var(--s1);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:var(--g)}
.venue-row::-webkit-scrollbar{display:none}
.venue-row :is(img,video){flex:0 0 78%;min-width:0;scroll-snap-align:start;display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:var(--r)}
/* под пакетами (Expo): две карточки-условия — переиспользование и работа на подрядчика */
/* довод под пакетами - обычным текстом во всю ширину, без плашки: метка + лид */
.pkg-note{margin-top:var(--s2)}
.pkg-note .lead{margin-top:var(--s-xs)}
/* Expo: раздел для агентств и AV-подрядчиков - без карточек, чтобы не сливался с пакетами: принципы списком с точками, ставки крупными цифрами .prices, кнопка PDF */
.partners>.partners-how{margin-top:var(--s2);font-size:var(--fs-m);line-height:var(--lh-card)}
.partners>.prices{margin-top:var(--s2)}
.partners>.prices b{font:600 var(--fs-card)/var(--lh-card) var(--font);letter-spacing:0}  /* ставки - обычным жирным шрифтом, а не крупными цифрами: читаются как прайс, а не как акцент */
.partners>.go{margin-top:var(--s2)}
.prices{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
.prices li{display:flex;flex-direction:column;gap:var(--s-2xs)}
/* список с иконками: жёлтая линейная иконка 1.4em и текст */
.ilist{margin:var(--s2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--fs-m);line-height:var(--lh-card)}
.ilist li{display:flex;align-items:flex-start;gap:.75em}
.ilist svg{flex:none;width:1.4em;height:1.4em;margin-top:-.1em;color:var(--yellow)}

/* вопросы: карточки-аккордеон; ответ раскрывается по высоте (grid-rows) с проявлением, «+» поворачивается в «×»;
   свёрнутый ответ скрыт и от скринридеров (visibility после сворачивания) */
.faq-list{margin-top:var(--s2);display:flex;flex-direction:column;gap:var(--s1)}
.faq-item h3{margin:0}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);width:100%;padding:var(--s1);border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.faq-q .ico{transition:transform var(--dur-s) var(--ease)}
.faq-a{display:grid;grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 var(--s1) var(--s1);max-width:52ch}
.js .faq-a{grid-template-rows:0fr;transition:grid-template-rows var(--dur-m) var(--ease-io)}
.js .faq-a>div{visibility:hidden;transition:visibility 0s var(--dur-m)}
.js .faq-a p{opacity:0;transform:translateY(calc(var(--move-s) * -1));transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-m) var(--ease),color var(--dur-s) var(--ease-out)}
.js .faq-item.open .faq-a{grid-template-rows:1fr}
.js .faq-item.open .faq-a>div{visibility:visible;transition-delay:0s}
.js .faq-item.open .faq-a p{opacity:1;transform:none}
.faq-item.open .faq-q .ico{transform:rotate(45deg)}

/* отзывы: по одному, свайп и стрелки; стрелки со счётчиком — под лентой (на десктопе — справа на уровне заголовка) */
.rev-track{margin-top:var(--s2);display:flex;gap:var(--g);-webkit-mask:linear-gradient(90deg,var(--ink) calc(var(--rev-w) + var(--g)),transparent);mask:linear-gradient(90deg,var(--ink) calc(var(--rev-w) + var(--g)),transparent);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.rev-track:focus-visible{-webkit-mask:none;mask:none}  /* в фокусе — без растворения, иначе маска срезает рамку */
.rev-track::-webkit-scrollbar{display:none}
.rev-track::after{content:"";flex:0 0 calc(100% - var(--rev-w) - var(--g))}  /* хвост: последний отзыв доезжает до левого края */
.rev{flex:0 0 var(--rev-w);margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s15)}
.rev blockquote{margin:0;max-width:44ch}
.rev-nav{margin-top:var(--s1);display:flex;align-items:center;gap:var(--s-s);flex:none}
.rev-count{font-size:var(--fs-m);font-variant-numeric:tabular-nums;color:var(--soft)}
.rev-nav .btn:disabled{opacity:.35;pointer-events:none}

/* команда в контактах: портреты внахлёст */
.team{margin-top:var(--s1);display:flex;flex-direction:column;gap:var(--s-s)}
.team-faces{display:flex;flex-wrap:wrap;row-gap:var(--s-xs);padding:0 calc(var(--avatar) * .36) 0 0;margin:0;list-style:none}
.team-faces li{margin-right:calc(var(--avatar) * -.36)}
.team-faces img{display:block;width:var(--avatar);height:var(--avatar);border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--bg)}

/* карта: студия и города клиентов (точки суши — маска img/world-dots.svg, дуги, города и подписи — SVG в той же проекции; размеры — в единицах карты 1000×459) */
.sec-lead{margin-top:var(--s1);max-width:24ch}
.geo-time{margin-top:calc(var(--fs-lead) * var(--lh-lead))}
.geo-map{position:relative;margin-top:var(--s2);aspect-ratio:1000/459}
.geo-map::before{content:"";position:absolute;inset:0;background:var(--geo-land);-webkit-mask:var(--geo-dots) 0 0/100% 100% no-repeat;mask:var(--geo-dots) 0 0/100% 100% no-repeat}
.geo-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.geo .arc{fill:none;stroke:var(--yellow);stroke-width:var(--geo-line);stroke-linecap:round;stroke-dasharray:1 1}
.geo .city{r:var(--geo-city);fill:var(--fg);transform-box:fill-box;transform-origin:center}
.geo .home{r:var(--geo-home);fill:var(--yellow)}
.geo .home-ring{r:var(--geo-home);fill:none;stroke:var(--yellow);stroke-width:var(--geo-line);transform-box:fill-box;transform-origin:center;animation:ring var(--dur-3xl) var(--ease) infinite}
.geo .lbls{display:none;font-size:var(--geo-label);font-weight:500;fill:var(--fg)}
.geo .home-lbl{fill:var(--yellow)}
.js .geo-map .arc{stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-2xl) var(--ease-io);transition-delay:calc(.3s + var(--i) * .12s)}
.js .geo-map.in .arc{stroke-dashoffset:0}
.js .geo-map .city,.js .geo-map .lbl{opacity:0;transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease);transition-delay:calc(1.5s + var(--i) * .12s)}
.js .geo-map .city{transform:scale(0)}
.js .geo-map.in .city,.js .geo-map.in .lbl{opacity:1;transform:none}
@keyframes ring{from{transform:scale(1);opacity:1}to{transform:scale(3);opacity:0}}
.geo-list{margin-top:var(--s15);font-size:var(--fs-m);line-height:var(--lh-text);color:var(--soft)}
.geo-facts{margin-top:var(--s15)}

/* контакт */
.contact{padding-top:var(--s3)}
.contact .h2{margin-bottom:var(--s2)}
.contact>.who,.contact>.team,.contact>.ways,.contact>.offer,.contact>.foot{margin-inline:var(--g)}
.who{display:flex;align-items:center;gap:var(--s-s)}
.who img{width:var(--avatar);height:var(--avatar);border-radius:50%;object-fit:cover;flex:none}
.who b{display:block}
.ways{margin-top:var(--s2);display:flex;flex-direction:column;gap:var(--s1)}
.ways a{display:block;width:fit-content;font:300 var(--fs-xl)/var(--lh-head) var(--font);letter-spacing:var(--tr-thesis)}
.ways a span{display:block;margin-top:var(--s-3xs);font-size:var(--fs-s);font-weight:400;letter-spacing:0;color:var(--dim)}
/* карточка спецпредложения */
.offer{margin-top:var(--s2);padding:var(--s1)}
.label{display:flex;align-items:center;gap:.6em}
.offer p+p{margin-top:var(--s-xs)}  /* отступ только между абзацами: у метки сверху нет — поля карточки равные */
.ticker{display:none}
/* пакеты услуг: карточки с подписью, заголовком, списком и ценой; ниже — поддержка и условия */
.pkg-list{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s2)}
.pkg{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:var(--s1)}
/* буква пакета — жёлтый треугольник в правом верхнем углу карточки, отрезанный по диагонали */
.pkg-tier{position:absolute;right:0;top:0;width:var(--tier);height:var(--tier);padding:.32em .5em 0 0;text-align:right;background:var(--yellow);color:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%);font:600 var(--fs-card)/1 var(--font)}
.pkg h3{margin:0 0 var(--s-xs)}
.pkg ul,.terms ul,.partners-how{margin:var(--s1) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s-xs)}
.pkg li,.terms li,.partners-how li{display:flex;align-items:baseline;gap:.7em}  /* список с точками .dot */
.pkg-price{margin-top:auto;padding-top:var(--s15);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--s1)}
.pkg-price b{white-space:nowrap}
.pkg-price b,.prices b{font:var(--fw-display) var(--fs-xl)/1 var(--font-display);letter-spacing:var(--tr-head)}
.pkg-badge{position:static;display:inline-block;margin-left:.6em;vertical-align:.1em}
.terms{margin-top:var(--s2);padding-top:var(--s2);border-top:var(--rule) solid var(--dim);display:flex;flex-direction:column;gap:var(--s1)}  /* линия: общие условия, а не часть пакета */
.terms :is(p:not(.case-meta),ul){font-size:var(--fs-m);line-height:var(--lh-card)}
.terms ul{margin:0;gap:0}  /* строки в ритм соседних колонок */
.terms p+p{margin-top:var(--s-xs)}  /* цена поддержки и абзац про оплату - раздельно */

/* подвал: логотип слева, реквизиты и ссылки справа */
.foot{margin-top:var(--s3);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--s1);font-size:var(--fs-s);line-height:var(--lh-text);color:var(--dim)}
.foot-logo{display:block;flex:none;width:var(--logo-w-foot);height:auto;margin-top:.3em}
.foot-info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3xs)}  /* телефон: логотип сверху, реквизиты под ним по левому краю - длинные строки не рвутся по словам */
.foot-req{display:flex;flex-direction:column;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--s-3xs) var(--s1)}
.foot a{color:var(--soft);transition:color var(--dur-s)}

/* уведомление о cookie: над кнопками, закрывается один раз */
.cookie{position:fixed;z-index:10;left:var(--dock-pad);right:var(--dock-pad);bottom:calc(var(--dock-pad) + var(--btn-h) + var(--s-xs) + env(safe-area-inset-bottom,0px));max-width:var(--dock-w);margin:0 auto;padding:var(--s-s) var(--s-s) var(--s-s) calc(var(--s-s) + var(--s-3xs));display:flex;align-items:center;gap:var(--s-s);font-size:var(--fs-s);line-height:var(--lh-text);color:var(--soft);box-shadow:var(--shadow);transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-m) var(--ease)}
.cookie[hidden]{display:flex;opacity:0;transform:translateY(var(--move-s));pointer-events:none;visibility:hidden;transition:opacity var(--dur-xs) var(--ease-out),transform var(--dur-s) var(--ease),visibility 0s var(--dur-s)}
.cookie-consent{flex-wrap:wrap}
.cookie-consent p{flex:1 1 100%}
.cookie-btns{display:flex;flex:none;gap:var(--s-xs);margin-left:auto}
.cookie .btn{flex:none}
@media (max-width:1023px){
  .cookie-consent{flex-wrap:nowrap;gap:var(--s-xs);padding:var(--s-xs) var(--s-xs) var(--s-xs) var(--s-s);font-size:var(--fs-xs);line-height:var(--lh-card)}
  .cookie-consent p{flex:1 1 auto}
  .cookie-consent .btn-s{padding:0 .8em}
}

/* всплывающее видео: затемнение проявляется, ролик поднимается и увеличивается из центра */
.vmodal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:calc(var(--btn-h) + var(--s-3xs) + env(safe-area-inset-top,0px)) var(--g) calc(var(--g) + env(safe-area-inset-bottom,0px));background:var(--scrim);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));transition:opacity var(--dur-s) var(--ease-out)}
.vmodal[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-xs) var(--ease-out),visibility 0s var(--dur-xs)}
.vmodal video{display:block;width:min(100%,calc((100svh - 140px) * 16 / 9));aspect-ratio:16/9;border-radius:var(--r);background:var(--fill);transition:transform var(--dur-m) var(--ease),opacity var(--dur-s) var(--ease-out)}
.vmodal[hidden] video{transform:translateY(var(--move-l)) scale(.94);opacity:0}
.lock{overflow:hidden}
.vmodal-x{position:absolute;top:calc(var(--s-s) + env(safe-area-inset-top,0px));right:var(--g)}

/* текстовая страница: политика конфиденциальности */
.doc{max-width:760px;margin:0 auto;padding:calc(var(--s15) + env(safe-area-inset-top,0px)) var(--g) var(--s3)}
.doc .logo{position:static;display:block}
.doc h1{margin-top:var(--s3);font-size:var(--fs-h2);line-height:var(--lh-head);hyphens:auto;overflow-wrap:break-word}
.doc h2{margin:var(--s2) 0 0}
.doc p,.doc li{color:var(--soft)}
.doc p{margin-top:var(--s1)}
.doc ul{margin:var(--s1) 0 0;padding-left:1.2em}
.doc li+li{margin-top:.4em}
.doc .btn{margin-top:var(--s2)}
.doc .foot{margin-top:var(--s3)}


/* кнопки внизу: двигается только отступ пары (одно свойство — без рывков), стрелка — только прозрачность и сдвиг */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:9;padding:0 var(--dock-pad) calc(var(--dock-pad) + env(safe-area-inset-bottom,0px));pointer-events:none}
.dock-in{position:relative;max-width:var(--dock-w);margin:0 auto}
.dock .btn{pointer-events:auto;box-shadow:var(--shadow)}
.pair{display:flex;gap:var(--s-xs);transition:margin-right var(--dur-l) var(--ease-io)}
.pair .btn{flex:1 1 0;min-width:0}
.dock.up-on .pair{margin-right:calc(var(--btn-h) + var(--s-xs))}
.dock.up-on .pair .btn{padding-inline:.75em}  /* узкая пара: меньше поля, чтобы подпись не обрезалась */
.b-up{position:absolute;right:0;top:0;overflow:hidden;transition:opacity var(--dur-m) var(--ease-out) .2s,transform var(--dur-l) var(--ease) .1s,background var(--dur-s),visibility 0s}
.b-up svg{transition:transform var(--dur-l) var(--ease) .15s}
/* скрытая стрелка недоступна и с клавиатуры: visibility выключается после исчезновения */
.b-up.off{opacity:0;transform:translateX(var(--move-l)) scale(.7);pointer-events:none;visibility:hidden;box-shadow:none;transition:opacity var(--dur-xs) var(--ease-out),transform var(--dur-m) var(--ease),visibility 0s var(--dur-m)}
.b-up.off svg{transform:translateY(var(--move-m))}

/* ===== 5. Ховеры (мышь) и нажатия (тач) ===== */
@media (hover:hover) and (pointer:fine){
  .btn:hover .roll>span{transform:translateY(-100%)}
  .btn-yellow:hover{background:var(--yellow-hi);box-shadow:var(--glow-y)}
  .btn-light:hover{background:var(--light-hi);box-shadow:var(--glow-l)}
  .btn-dark:hover,.btn-glass:hover{background:var(--fill-3)}
  .go:hover{background:var(--fg);color:var(--ink)}
  .go:hover .ico{transform:rotate(45deg)}
  .go:hover .ico.play{transform:scale(1.15)}
  /* ── система ховеров ──
     текст кнопки — перекат (.roll); круглая иконка .ico — поворот (↗ 45°, + 90°);
     кнопка-стрелка — петля: стрелка уходит по направлению и возвращается с другой стороны (.b-up, .loop-l, .loop-r);
     карточка .card.hov — инверсия (светлый фон, тёмный текст), подпись data-scramble «расшифровывается» заново (скрипт) */
  .b-up:not(.off):hover svg,.loop-l:not(:disabled):hover svg,.loop-r:not(:disabled):hover svg{animation:arrowloop var(--dur-l)}
  .b-up{--loop-x:0%;--loop-y:-140%}
  .loop-l{--loop-x:-140%;--loop-y:0%}
  .loop-r{--loop-x:140%;--loop-y:0%}
  /* уходит с разгоном, возвращается с другой стороны с торможением */
  @keyframes arrowloop{
    0%{animation-timing-function:var(--ease-in)}
    45%{transform:translate(var(--loop-x),var(--loop-y))}
    46%{transform:translate(calc(var(--loop-x) * -1),calc(var(--loop-y) * -1));animation-timing-function:var(--ease)}
    100%{transform:none}}
  .card.hov:hover{background:var(--fg);color:var(--bg)}  /* инверсия: светлая карточка, тёмный текст */
  .card.hov:hover :is(.desc,.muted){color:var(--fill-3)}
  .card.hov:hover :is(.case-meta,.label,.y){color:var(--bg)}
  .card.hov:hover .dot{background:var(--bg)}
  .faq-q:hover .ico{transform:rotate(90deg)}
  .faq-item.open .faq-q:hover .ico{transform:rotate(135deg)}
  .promo-btn:hover .dot{transform:scale(1.4)}
  .promo-btn .dot{transition:transform var(--dur-s) var(--ease)}
  .chip:not([aria-pressed="true"]):hover{background:var(--fill-3);transform:translateY(-2px)}
  .logo:hover{opacity:.75}
  .foot a:hover{color:var(--yellow)}
  /* контакты: жёлтая линия прорисовывается слева направо */
  .ways a{background:linear-gradient(var(--yellow),var(--yellow)) 0 1.08em/0 2px no-repeat;transition:background-size var(--dur-m) var(--ease)}
  .ways a:hover{background-size:100% 2px}
  /* превью: видео чуть приближается, за курсором едет круг «Открыть» */
  .frame{cursor:none}
  .frame:hover .par{scale:1.05}
  .peek{display:grid;place-items:center;position:absolute;z-index:2;left:var(--mx,50%);top:var(--my,50%);width:clamp(92px,6vw,220px);aspect-ratio:1;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:var(--fs-s);font-weight:500;pointer-events:none;transform:translate(-50%,-50%) scale(0);transition:transform var(--dur-m) var(--ease)}
  .frame:hover .peek{transform:translate(-50%,-50%) scale(1)}
}
@media (hover:none){
  .btn:active,.chip:active{transform:scale(.95)}
  .b-up:active{transform:none;filter:brightness(1.4)}
  .btn-yellow:active{background:var(--yellow-lo)}
  .btn-light:active{background:var(--light-lo)}
  .go:active{transform:scale(.98);background:var(--fg);color:var(--ink)}
  .go:active .ico{transform:rotate(45deg)}
  .go:active .ico.play{transform:scale(1.15)}
  .frame:active{transform:scale(.97)}
  .ways a:active{opacity:.55}
}

/* ===== 6. Десктоп: меняются токены и раскладка ===== */
@media (min-width:1024px){
  :root{
    --fs-xs:clamp(14px,.9vw,34px); --fs-s:clamp(16px,1vw,38px); --fs-body:clamp(17px,.42vw + 11px,30px); --fs-m:clamp(18px,1.2vw,46px);
    --fs-btn:clamp(16.5px,1.05vw,40px); --fs-chip:clamp(16px,1.05vw,40px); --fs-badge:clamp(13px,.8vw,30px);
    --fs-card:clamp(22px,1.55vw,62px); --fs-lead:clamp(24px,1.7vw,68px); --fs-note:clamp(28px,2.5vw,100px); --fs-xl:clamp(30px,2.6vw,104px);
    --fs-thesis:clamp(36px,3.7vw,150px); --fs-h3:clamp(40px,3.4vw,140px); --fs-h2:clamp(56px,5.2vw,220px);
    --fs-h1:clamp(64px,6.6vw,280px); --fs-h1-s:calc(var(--fs-h1) / 1.5); --fs-num:clamp(150px,15vw,620px);
    --g:clamp(40px,4.2vw,180px); --s1:clamp(22px,1.6vw,64px); --s15:clamp(30px,2.3vw,92px); --s2:clamp(40px,3vw,120px); --s25:clamp(96px,8.5vw,340px); --s3:clamp(140px,12vw,480px);
    --s-3xs:clamp(4px,.28vw,14px); --s-2xs:clamp(6px,.42vw,20px); --s-xs:clamp(10px,.7vw,34px); --s-s:clamp(14px,1vw,48px);
    --page-top:clamp(28px,2.4vw,90px);
    --lh-lead:1.2; --lh-card:1.3;
    --col-l:1 / span 6; --col-r:7 / -1;  /* две равные половины сетки 12 колонок: левая и правая */
    /* метрики шрифтов: верх заглавной буквы от верха строки, доля кегля (замер canvas measureText) — для выравнивания по верху букв */
    --cap-h2:.144; --cap-lead:.232; --cap-num:.075;
    --xh-h2:.334;  /* верх строчных заголовка */
    --base-h2:.146; --base-label:.431;  /* базовая линия от низа строки: заголовок, метка .label */
    --r:clamp(24px,1.6vw,56px); --r-s:clamp(20px,1.3vw,48px);
    --btn-h:clamp(52px,3.4vw,130px); --btn-h-s:clamp(36px,2.4vw,92px); --btn-h-xs:clamp(32px,2vw,76px); --ico:clamp(36px,2.2vw,84px); --avatar:clamp(64px,4.4vw,170px); --medal:clamp(34px,2.3vw,90px); --tier:clamp(72px,5vw,200px);
    --logo-w:clamp(150px,9vw,360px); --logo-w-foot:var(--logo-w); --pop-w:clamp(320px,22vw,840px);
    --dock-pad:clamp(18px,1.4vw,56px);
    --hero-shade-side:linear-gradient(to right,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 38%,transparent 62%);  /* под текстом слева, когда в ролике свой текст */
    --hero-shade:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 50%,transparent) 0%,transparent 18%,transparent 45%,color-mix(in srgb,var(--bg) 80%,transparent) 82%,var(--bg) 100%);
    --rev-w:calc((100% - var(--g)) / 2); --geo-line:1.4px; --geo-city:5px; --geo-home:6px; --geo-dots:url(img/world-dots.svg);
  }
  .page{max-width:none}

  .hero{height:100vh;min-height:640px}
  .hero-reel{--hero-shade:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 50%,transparent) 0%,transparent 18%,transparent 48%,color-mix(in srgb,var(--bg) 88%,transparent) 84%,var(--bg) 100%)}
  .hero-reel::after{background:var(--hero-shade-side),var(--hero-shade)}
  .hero-txt{right:auto;top:0;bottom:0;max-width:calc((100vw - 3 * var(--g)) / 2);display:flex;flex-direction:column;justify-content:center}

  .thesis p{text-indent:33%;padding-right:12vw}
  .entry{flex-direction:row;gap:var(--s2)}

  .numbers{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
  /* цифры стоят по тем же колонкам, что и подпись с сеткой точек ниже: 16 — от 1-й, 125 — от 6-й (левый край сетки) */
  .n-row,.n-row+.n-row{grid-column:var(--col-l);margin:0;flex-direction:column;align-items:flex-start;gap:var(--s-s)}
  .n-row+.n-row{grid-column:var(--col-r)}
  .n-row .lead,.n-row+.n-row .lead{max-width:none;text-align:left;padding:0}
  .share{margin-top:var(--s25);grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end}
  .share>.n-big,.share .lead{grid-column:var(--col-l)}
  .share .lead{grid-row:2;max-width:18ch}
  .cells{grid-column:var(--col-r);grid-row:1 / span 2;align-self:start;margin:calc(var(--fs-num) * var(--cap-num)) 0 0}
  .awards{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g)}
  .awards>.lead{margin:0}
  .aw{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g)}

  .chips{flex-wrap:nowrap;gap:var(--s-xs);padding:var(--s-s) var(--g);margin-top:var(--s2)}
  .list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);row-gap:var(--s25);padding:var(--s2) var(--g) 0}
  /* кейс: описание слева, кнопка сайта справа на той же линии; правая колонка сдвинута «лесенкой» */
  .case{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s1);align-content:start;align-self:start}
  .case:nth-child(even){margin-top:clamp(160px,16vw,640px)}
  .case>*{margin-inline:0;grid-column:1 / -1}
  .case :is(.desc,.quote){grid-column:1}
  .case .go{grid-column:2;align-self:start;gap:var(--s1);margin-top:var(--s15)}

  .pkg-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
  .pkg{padding:var(--s2)}
  .terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g)}  /* колонки как у карточек пакетов */
  .br-m{display:none}  /* перенос только на телефоне */
  .facts{display:flex;flex-wrap:wrap;justify-content:space-between;white-space:nowrap}
  .sec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:var(--s3) var(--g) 0}
  .sec>*{grid-column:1 / -1}
  .sec>*:not(.h2){margin-inline:0}
  .sec>.h2{margin:0}
  .how>.steps{grid-column:var(--col-l);flex-direction:column;overflow:visible;padding-inline:0}
  .step{flex:none;display:grid;grid-template-columns:5.5em 1fr;column-gap:var(--s1);row-gap:var(--s-2xs)}
  .step .case-meta{grid-row:1 / span 2;margin:0}
  .sec-aside{grid-column:var(--col-r);grid-row:2 / span 2;margin-top:var(--s2)}
  .sec-note{grid-column:var(--col-l)}
  .sec>.venue-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);padding:0;overflow:visible}
  .venue-row :is(img,video){width:100%}
  .partners>.partners-how{grid-column:var(--col-l);grid-row:3;padding-right:var(--g)}
  .partners>.prices{grid-column:var(--col-r);grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s15) var(--g)}
  .partners>.go{grid-column:var(--col-r);grid-row:4;justify-self:start;gap:var(--s1)}
  .sec>.h2,.sec>.sec-lead{grid-column:var(--col-l)}
  .works>.h2{width:calc((100% - 3 * var(--g)) / 2)}  /* заголовок — в левой половине, как в секциях-сетках */
  .sec-lead,.hero-sub,.rev blockquote{max-width:none}  /* ширину текста задаёт колонка */
  .faq-list{grid-column:var(--col-r);margin-top:calc(var(--fs-h2) * var(--cap-h2))}
  .reviews>.h2{grid-column:1 / span 8}  /* заголовок в одну строку; стрелки — в оставшихся колонках справа */
  .reviews>.rev-nav{grid-column:9 / -1;grid-row:1;justify-self:end;align-self:end;margin:0}
  .offer p:not(.label),.rev blockquote{font-size:var(--fs-card);line-height:var(--lh-card)}
  .sec-side{align-items:start}  /* заголовок слева, лид — справа на уровне заголовка */
  .sec-side>.h2{grid-row:1 / span 2}
  .sec-side>.sec-lead,.geo-time{grid-column:var(--col-r)}
  .sec-side>.sec-lead{margin-top:calc(var(--fs-h2) * var(--xh-h2) - var(--fs-lead) * var(--cap-lead))}  /* верх букв лида = верх строчных заголовка */
  .geo-time{align-self:end;margin:0 0 calc(var(--fs-h2) * var(--base-h2) - var(--fs-s) * var(--base-label))}  /* базовая линия = базовая линия последней строки заголовка */
  .geo .lbls{display:block}
  .geo-list{display:none}
  .contact{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:var(--s3) var(--g) 0;align-items:start}
  .contact .h2{grid-column:var(--col-l);margin:0 0 var(--s2)}
  .contact>.who,.contact>.team,.contact>.ways{grid-column:var(--col-l);margin-inline:0}
  .contact>.offer{grid-column:var(--col-r);grid-row:2 / span 3;margin:0;align-self:end;padding:var(--s2)}
  .contact>.foot{grid-column:1 / -1;margin:clamp(48px,3.6vw,140px) 0 0}
  /* финал: бегущая строка отраслей и подвал */
  .ticker{display:block;grid-column:1 / -1;margin:var(--s3) calc(var(--g) * -1) 0;overflow-x:clip;white-space:nowrap;font:var(--fw-display) clamp(44px,4.4vw,180px)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head);color:var(--dim)}
  /* обрезаем только по горизонтали: выносные элементы букв (у, р, д) не срезаются ни в одном шрифте */
  .ticker-in{display:inline-flex;animation:ticker var(--dur-ticker) linear infinite}
  .ticker-in span{padding-right:.3em}
  @keyframes ticker{to{transform:translateX(-50%)}}
  .foot{flex-direction:row;align-items:flex-start}  /* логотип по верху первой строки реквизитов */
  .foot-info{flex-direction:row;align-items:flex-start;gap:var(--s2);min-width:0}
  .foot-req{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:0 .3em}
  .foot-req>span{white-space:nowrap}  /* части реквизитов переносятся целиком, а не по словам */

  /* текстовая страница: сетка лендинга — разделы слева, текст справа */
  .doc{max-width:none;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:baseline;padding:var(--page-top) var(--g) var(--s3)}
  .doc>*{grid-column:5 / span 7}
  .doc>.logo{grid-column:1 / span 3}
  .doc h1{grid-column:1 / -1;hyphens:manual}
  .doc h1+p{grid-column:1 / span 7}
  .doc h2{grid-column:1 / span 4;margin-top:var(--s25)}
  .doc h2+p{margin-top:var(--s25)}
  .doc .btn{justify-self:start}
  .doc>.foot{grid-column:1 / -1}

  /* кнопки внизу справа: по контенту, одинаковой ширины */
  .dock{padding:0 var(--g) var(--dock-pad)}
  .dock-in{max-width:none;width:max-content;margin:0 0 0 auto}
  .pair .btn{flex:0 0 9.6em}
  .vmodal{padding:var(--s2) var(--g)}
  .vmodal-x{top:var(--s1)}
  .cookie{left:auto;right:var(--g);bottom:calc(var(--dock-pad) + var(--btn-h) + var(--s-xs));max-width:clamp(440px,28vw,1080px)}
}

/* ===== 7. Уменьшить анимацию: всё сразу в конечном состоянии ===== */
@media (prefers-reduced-motion:reduce){
  :root{--dur-xs:.01ms; --dur-s:.01ms; --dur-m:.01ms; --dur-l:.01ms; --dur-xl:.01ms; --dur-2xl:.01ms; --dur-3xl:.01ms}  /* скрипт берёт длительности отсюда же */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html,.rev-track{scroll-behavior:auto}
  .js .thesis .t{opacity:1}
  .ticker-in{animation:none!important}
}