/* ============================================================
   Первый экран design-site.pro — наш код.
   Ни одного класса из чужих шаблонов: префикс ds- («design-site»).
   Размеры и поведение сняты замерами с референса, разметка своя.
   ============================================================ */

/* ── шрифты ─────────────────────────────────────────────────── */
@font-face{font-family:'Alumni Sans';font-weight:400 800;font-display:swap;
  src:url('../fonts/alumni-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Alumni Sans';font-weight:400 800;font-display:swap;
  src:url('../fonts/alumni-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122}
@font-face{font-family:'Onest';font-weight:400 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-weight:400 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+2000-206F,U+2122}
@font-face{font-family:'Caveat';font-weight:400 600;font-display:swap;
  src:url('../fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-weight:400 600;font-display:swap;
  src:url('../fonts/caveat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122}
/* Знак ₽ (U+20BD) не входит ни в одно подмножество выше — браузер рисовал его
   запасным системным шрифтом, у каждого посетителя по-своему. Вырезан из полных
   шрифтов Google Fonts (OFL) одним глифом, ~1 КБ на семейство, грузится только
   там, где на странице есть рубль. */
@font-face{font-family:'Alumni Sans';font-weight:400 800;font-display:swap;
  src:url('../fonts/alumni-sans-rub.woff2') format('woff2');unicode-range:U+20BD}
@font-face{font-family:'Onest';font-weight:400 600;font-display:swap;
  src:url('../fonts/onest-rub.woff2') format('woff2');unicode-range:U+20BD}
@font-face{font-family:'Caveat';font-weight:400 600;font-display:swap;
  src:url('../fonts/caveat-rub.woff2') format('woff2');unicode-range:U+20BD}

/* ── токены ─────────────────────────────────────────────────── */
:root{
  --ds-blue:#2E9BD6;
  --ds-blue-dark:#1B6FBF;
  --ds-ink:#111;
  --ds-gray:#6B7280;
  --ds-gray-soft:#8FA3C4;
  --ds-line:rgba(224,224,224,.63);
  --ds-tile:#EAF4FD;
  /* фон кнопок .ds-btn (и «Читать» в блоге — это .ds-btn.ds-btn--sm): белый текст, самая светлая точка #2478BD даёт 4,67:1 (AA);
     в обеих темах один фон (--ds-blue-dark в тёмной теме светлый #8CC8EE и давал 1,8:1). Раньше градиент начинался с #2C86C4 — 3,95:1 */
  --ds-btn-fon:linear-gradient(180deg,#2478BD,#1B6FBF);
  --ds-container-w:1400px;
  /* колонка с иллюстрацией и парная к ней: одни на все блоки */
  --ds-col-side:.8fr;
  --ds-col-wide:1.2fr;
  --ds-gutter:20px;
  --ds-font-text:'Onest',system-ui,sans-serif;
  --ds-font-display:'Alumni Sans','Onest',sans-serif;
  --ds-font-hand:'Caveat',cursive;
}

/* ── тёмная тема ────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --ds-ink:#E8ECF2;
  --ds-gray:#9AA6B8;
  --ds-gray-soft:#6E7F99;
  --ds-line:rgba(255,255,255,.14);
  --ds-tile:#17304A;
  --ds-bg:#0E1116;
  --ds-bg-card:#161B22;
  --ds-badge:#1B2129;
  /* На тёмной плитке #17304A тёмно-синий давал контраст 2.6 — ниже нормы,
     поэтому в тёмной теме «тёмный синий» светлее фона, а не темнее. */
  --ds-blue-dark:#8CC8EE;
  --ds-nav-ink:#C2CBD8;
  --ds-lead-ink:#CBD4E0;
}
:root{--ds-bg:#fff;--ds-bg-card:#fff;--ds-badge:#F2F2F2;
  --ds-nav-ink:#616161;--ds-lead-ink:#575757}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;overflow-x:hidden;background:var(--ds-bg);color:var(--ds-ink);
  transition:background .25s ease,color .25s ease;
  font:400 16px/1.5 var(--ds-font-text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── сетка: контейнер и вертикальные направляющие ───────────── */
.ds-strip{position:relative;padding:0 var(--ds-gutter)}
/* Контекст наложения один на всю страницу: <main> (и подвал отдельно). Линии
   с z-index:-1 лежат в нём под всем содержимым, а искры (z-index:5) —
   над всем. Раньше каждый контейнер был своим контекстом (z-index:0), и линии
   следующей секции рисовались поверх искр предыдущей: контексты равного уровня
   идут в порядке разметки, внутренний z-index искры за их границу не выходит. */
main,.ds-footer{isolation:isolate}
.ds-container{max-width:var(--ds-container-w);margin:0 auto;position:relative}
/* вертикальные линии по краям контейнера: идут под контентом, а не поверх
   искорок и заголовка */
.ds-container::before,.ds-container::after{content:"";position:absolute;top:0;bottom:0;
  width:1px;background:var(--ds-line);z-index:-1}
.ds-container::before{left:0}
.ds-container::after{right:0}

/* ── шапка: см. assets/css/shapka.css ─────────────────────────── */

/* переключатель темы */
.ds-theme{width:52px;height:28px;border:1px solid var(--ds-line);border-radius:90px;
  background:var(--ds-bg);color:var(--ds-ink);display:flex;align-items:center;padding:3px;cursor:pointer}
.ds-theme__knob{width:20px;height:20px;border-radius:50%;background:var(--ds-bg);
  box-shadow:0 1px 3px rgba(0,0,0,.18);display:grid;place-items:center;
  transition:transform .25s ease}
.ds-theme[aria-pressed="true"] .ds-theme__knob{transform:translateX(24px)}
/* иконка показывает текущую тему: светлая — солнце, тёмная — месяц */
.ds-theme__knob svg{grid-area:1/1}
.ds-theme__moon{display:none}
.ds-theme[aria-pressed="true"] .ds-theme__sun{display:none}
.ds-theme[aria-pressed="true"] .ds-theme__moon{display:block}

/* логотип-аватар с точечным кольцом */
.ds-logo{width:42px;height:42px;border-radius:50%;background:var(--ds-blue);
  display:grid;place-items:center;position:relative;
  font:700 19px/1 var(--ds-font-display);color:#0B2740;letter-spacing:.02em}
.ds-logo::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px dotted var(--ds-blue);opacity:.55}
.ds-logo img,.ds-logo svg{width:26px;height:26px}

/* прокрутка букв у пунктов (шапка и подвал): две копии буквы друг над другом.
   В разметке буква одна (текст ссылки читается один раз), вторую даёт ::after
   из data-b; i вдвое выше строки, поэтому при наведении сдвиг на -50%. */
/* Строчная раскладка (не flex): при выделении и копировании буквы идут одной
   строкой «Работы», а не по букве на строку. line-height:0 у обёртки — чтобы
   высоту строки задавали сами буквы (1.25em), а не шрифт родителя. */
.ds-letters{display:block;white-space:nowrap;line-height:0}
.ds-letter{display:inline-block;vertical-align:top;overflow:hidden;height:1.25em;line-height:1.25em}
.ds-letter + .ds-letter{margin-left:.04em}
.ds-letter i{display:inline-block;vertical-align:top;font-style:normal;
  transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.ds-letter i::after{content:attr(data-b);display:block}

/* круглые иконки контактов */
/* Плашки как в строке услуг: та же заливка и то же скругление,
   чтобы шапка и первый экран читались одним набором. */
.ds-iconbtn{width:40px;height:40px;border-radius:12px;border:0;
  display:grid;place-items:center;flex:none;
  background:var(--ds-tile);color:var(--ds-blue-dark);
  transition:background-color .2s ease,color .2s ease,transform .2s ease}
.ds-iconbtn:hover{background:var(--ds-blue);color:#fff;transform:translateY(-1px)}

/* Подсказки под иконками. Чистый CSS: текст берётся из data-tip,
   хвостик рисуем вторым псевдоэлементом. */
.ds-iconbtn[data-tip]{position:relative}
.ds-iconbtn[data-tip]::after,
.ds-iconbtn[data-tip]::before{
  position:absolute;left:50%;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.ds-iconbtn[data-tip]::after{
  content:attr(data-tip);top:calc(100% + 10px);
  transform:translate(-50%,-4px);
  background:var(--ds-ink);color:var(--ds-bg);
  padding:7px 11px;border-radius:9px;white-space:nowrap;
  font:500 12px/1 var(--ds-font-text);letter-spacing:.01em;
  box-shadow:0 10px 24px -12px rgba(17,17,17,.55)}
.ds-iconbtn[data-tip]::before{
  content:"";top:calc(100% + 4px);
  transform:translate(-50%,-4px);
  border:5px solid transparent;border-bottom-color:var(--ds-ink)}
.ds-iconbtn[data-tip]:hover::after,
.ds-iconbtn[data-tip]:hover::before,
.ds-iconbtn[data-tip]:focus-visible::after,
.ds-iconbtn[data-tip]:focus-visible::before{opacity:1;transform:translate(-50%,0)}

/* кнопки */
.ds-btn{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;white-space:nowrap;
  border-radius:100px;color:#fff;font:600 16px/1 var(--ds-font-text);
  /* Белый на светло-синем давал 3.1:1 при норме 4.5 — фон на токене --ds-btn-fon (самая светлая точка 4,67:1) */
  padding:16px 26px;background-image:var(--ds-btn-fon);
  box-shadow:0 18px 30px -18px rgba(27,111,191,.75);
  transition:transform .2s ease,box-shadow .2s ease}
.ds-btn:hover{transform:translateY(-2px);box-shadow:0 22px 34px -18px rgba(27,111,191,.85)}
.ds-btn--sm{padding:12px 20px;font-size:15px}
.ds-btn__трубка{display:none}
.ds-btn__arrow{transition:transform .2s ease}
.ds-btn:hover .ds-btn__arrow{transform:translateX(4px)}

/* ── первый экран ───────────────────────────────────────────── */
.ds-hero{position:relative}
/* Отступ от шапки до верхней линии — 123 px, как в референсе. Держим его
   падингом контейнера, а не внешним отступом рамки: внешний схлопывается,
   и боковые направляющие обрывались на этом промежутке. */
.ds-hero > .ds-container{padding-top:123px}
.ds-hero__frame{position:relative;min-height:600px;
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 24px;border-bottom:1px solid var(--ds-line)}
/* горизонтальная линия сверху рамки */
.ds-hero__frame::before{content:"";position:absolute;left:0;right:0;top:0;
  height:1px;background:var(--ds-line);z-index:-1}
/* искорки по углам рамки */
.ds-spark{position:absolute;width:12px;height:12px;color:var(--ds-ink);z-index:5}
.ds-spark--tl{left:-6px;top:-6px}
.ds-spark--tr{right:-6px;top:-6px}
.ds-spark--bl{left:-6px;bottom:-6px}
.ds-spark--br{right:-6px;bottom:-6px}
/* Искорка без подложки и поверх всего: линии проходят под ней,
   но сама она нигде не оказывается перекрыта плашками и картинками. */
.ds-spark{z-index:5}

/* Бейдж сидит верхом на линии рамки: она проходит через его середину,
   а фон бейджа её перекрывает — приём из референса. */
.ds-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2;
  margin:0;white-space:nowrap;
  background:var(--ds-badge);border-radius:90px;padding:14px 22px;
  font:500 18px/1 var(--ds-font-display);letter-spacing:.01em}

/* заголовок: слово — портрет — слово */
.ds-title{display:flex;align-items:flex-end;justify-content:center;gap:16px;
  margin:26px 0 0;font:600 200px/.9 var(--ds-font-display);
  letter-spacing:0;text-transform:uppercase}
.ds-title__word{flex:1 0 0;width:1px}
.ds-title__word--left{text-align:right}
.ds-title__word--right{color:transparent;
  background-image:linear-gradient(180deg,var(--ds-blue) 0%,var(--ds-blue-dark) 100%);
  -webkit-background-clip:text;background-clip:text}
/* портрет опускается к базовой линии текста, а не к низу строки */
.ds-title__portrait{flex:none;width:158px;height:190px;margin-bottom:30px;
  border-radius:24px;overflow:hidden}
.ds-title__portrait img,
.ds-title__portrait video{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block}

.ds-lead{max-width:600px;margin:22px auto 0;text-align:center;
  font:400 16px/1.6 var(--ds-font-text);color:var(--ds-lead-ink)}
/* каретка живёт только пока идёт набор */
.ds-lead--typing::after{content:"";display:inline-block;width:2px;height:1.05em;
  margin-left:2px;vertical-align:-.16em;background:var(--ds-blue);
  animation:ds-caret .9s steps(1,end) infinite}
@keyframes ds-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* строка услуг */
.ds-features{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:0;
  margin:38px 0 48px}
.ds-feature{display:flex;align-items:center;gap:11px;padding:0 26px}
.ds-feature+.ds-feature{border-left:1px solid var(--ds-line)}
.ds-feature__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:var(--ds-tile);color:var(--ds-blue-dark);flex:none}
.ds-feature__text{display:flex;flex-direction:column;line-height:1.25}
.ds-feature__text b{font-weight:600;font-size:15px}
.ds-feature__text i{font-style:normal;font-size:13px;color:var(--ds-gray)}

.ds-cta{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.ds-reply{display:flex;align-items:center;gap:9px;color:var(--ds-gray);font-size:15px}
.ds-reply__dot{width:9px;height:9px;border-radius:50%;background:#34C759;flex:none}


/* ── работы ─────────────────────────────────────────────────── */
.ds-works{position:relative}
.ds-works > .ds-container{padding:96px 0 0}
.ds-works__head{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 24px 34px}
.ds-works__head::before,.ds-works__head::after{content:"";position:absolute;
  top:-96px;bottom:0;width:1px;background:var(--ds-line);z-index:-1}
.ds-works__head::before{left:0}
.ds-works__head::after{right:0}
.ds-works__title{margin:0;font:600 100px/1.1 var(--ds-font-display);
  text-transform:uppercase;letter-spacing:-.01em}
/* тёмная кнопка — как в оригинале, контрастом к синей в шапке */
.ds-btn--dark{background-image:none;background:var(--ds-ink);color:var(--ds-bg);
  box-shadow:0 16px 28px -20px rgba(17,17,17,.7)}
.ds-btn--dark:hover{box-shadow:0 20px 32px -20px rgba(17,17,17,.8)}

/* Лента выходит за правый край контейнера: обрезанная карточка сама
   подсказывает, что список можно листать, и стрелки не нужны. */
.ds-works__lane{position:relative;padding:22px 0 26px}
.ds-works__lane::before,.ds-works__lane::after{content:"";position:absolute;
  left:calc(50% - 50vw);width:100vw;height:1px;background:var(--ds-line)}
.ds-works__lane::before{top:0}
.ds-works__lane::after{bottom:0}
/* Боковые направляющие в этом блоке не нужны: лента выходит за контейнер,
   и линии резали бы карточки посередине. Вместо них — линии сверху и снизу. */
.ds-works > .ds-container::before,
.ds-works > .ds-container::after{content:none}
/* Лента едет сама, но её можно и пролистать руками: движение сделано
   прокруткой (scrollLeft из app.js), а не CSS-анимацией — иначе одно
   мешало бы другому. Дорожка вдвое длиннее видимой части: доехав до
   середины, скрипт молча отматывает назад, и шва не видно.
   Полосу прокрутки прячем — вместо неё курсор-ладонь и подсказка. */
.ds-works__viewport{overflow-x:auto;overflow-y:hidden;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;cursor:grab;
  -webkit-user-select:none;user-select:none}
.ds-works__viewport::-webkit-scrollbar{display:none}
.ds-works__viewport[data-тянут]{cursor:grabbing}
.ds-works__viewport:focus-visible{outline:2px solid var(--ds-blue);outline-offset:-4px}
.ds-works__track{list-style:none;margin:0;padding:0;
  display:flex;width:max-content;gap:26px}

.ds-work{flex:0 0 620px}
/* Клоны для бесшовной петли: читалке их видеть незачем. */
.ds-work--clone{pointer-events:none}
.ds-work__link{display:block;text-decoration:none;color:inherit}

/* Рамка карточки: плашка из палитры, пока картинки нет (заглушки). С обложкой кейса
   рамка прозрачная и картинка идёт во всю плашку (правило «Карточка работы» ниже):
   обложка — готовая сцена в стиле сайта с настоящим снимком внутри. */
.ds-work__frame{display:flex;align-items:center;justify-content:center;
  height:430px;padding:26px;
  border-radius:24px;background:var(--ds-tile);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
/* Рамка на flex, а не grid: в grid строка растягивалась по картинке,
   процент от неё разрешался в натуральную величину, и высокий телефон
   вылезал за карточку. В flex с заданной высотой ограничение работает. */
.ds-work__shot{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(22,50,92,.22));
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.ds-work__link:hover .ds-work__frame{transform:translateY(-6px);
  box-shadow:0 30px 52px -30px rgba(17,34,64,.5)}
.ds-work__link:hover .ds-work__shot{transform:scale(1.04)}

.ds-work__foot{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding:18px 4px 0}
.ds-work__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ds-work__name{font:600 16px/1.3 var(--ds-font-text);
  transition:color .25s ease}
.ds-work__kind{color:var(--ds-gray);font:400 14px/1.35 var(--ds-font-text)}
/* итог с цифрой — синим, как в макете: результат читается раньше названия */
.ds-work__kind--itog{color:var(--ds-blue-dark);font-size:13.5px}
.ds-work__link:hover .ds-work__name{color:var(--ds-blue-dark)}

/* Статус кейса: точка и слова. Один стиль на карточку главной, чип ленты /raboty/ и паспорт кейса.
   Цвет точки: работает — зелёный, в работе — янтарный, готов/собран — синий. */
.ds-status{--ds-status-dot:var(--ds-blue);display:inline-flex;align-items:baseline;gap:7px}
.ds-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--ds-status-dot);transform:translateY(-1px)}
.ds-status--ok{--ds-status-dot:#1F9D57}
.ds-status--wip{--ds-status-dot:#D9901A}
:root[data-theme="dark"] .ds-status--ok{--ds-status-dot:#4CD18A}
:root[data-theme="dark"] .ds-status--wip{--ds-status-dot:#F0B24A}
.ds-work__status{color:var(--ds-gray);font:400 13px/1.35 var(--ds-font-text)}
.ds-work__arrow{flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--ds-tile);color:var(--ds-blue-dark);
  transition:background-color .25s ease,color .25s ease,transform .25s ease}
.ds-work__link:hover .ds-work__arrow{background:var(--ds-blue);color:#fff;transform:translateX(3px)}

/* Заглушки вместо реальных работ: живые проекты временно сняты.
   Карточка сохраняет геометрию, но не кликается и не подсвечивается —
   пустое место честно выглядит пустым, а не сломанной ссылкой. */
.ds-work--stub .ds-work__link{cursor:default}
.ds-work--stub .ds-work__frame{
  background:repeating-linear-gradient(-45deg,
    var(--ds-tile) 0 14px, rgba(22,50,92,.05) 14px 28px)}
.ds-work__plug{display:grid;place-items:center;width:84px;height:84px;
  border-radius:50%;background:var(--ds-bg,#fff);color:var(--ds-gray)}
.ds-work--stub .ds-work__name,
.ds-work--stub .ds-work__kind{color:var(--ds-gray)}
.ds-work--stub .ds-work__arrow{opacity:.45}

@media (max-width:1200px){
  .ds-works > .ds-container{padding:72px 0 0}
  .ds-works__title{font-size:72px}
  .ds-work{flex:0 0 480px}
  .ds-work__frame{height:340px;padding:20px}
}
@media (max-width:809px){
  .ds-works > .ds-container{padding:56px 0 0}
  .ds-works__head{flex-direction:column;align-items:flex-start;gap:16px;padding:0 12px 24px}
  .ds-works__title{font-size:52px}
  .ds-works__track{gap:14px;padding:0 12px 8px}
  .ds-work{flex:0 0 300px}
  .ds-work__frame{height:230px;padding:14px;border-radius:18px}
  .ds-work__foot{padding-top:14px}
  .ds-work__name{font-size:15px}
  .ds-work__kind--itog{font-size:12.5px}
}

/* ── парящие плашки и рукописные надписи ────────────────────── */
.ds-card{position:absolute;display:flex;align-items:center;gap:12px;
  padding:12px 18px 12px 13px;background:var(--ds-bg-card);border-radius:18px;
  box-shadow:0 14px 34px -18px rgba(22,50,92,.45),0 2px 6px rgba(22,50,92,.06)}
.ds-card--clients{left:2%;top:4%;animation:ds-float-left 7s ease-in-out infinite}
.ds-card--launch{right:2%;bottom:4%;animation:ds-float-right 8.5s ease-in-out infinite .9s}

/* у каждой плашки свой период и задержка, иначе движение читается как рывок */
@keyframes ds-float-left{
  0%,100%{transform:translateY(0) rotate(-2.4deg)}
  50%{transform:translateY(-12px) rotate(-.6deg)}}
@keyframes ds-float-right{
  0%,100%{transform:translateY(0) rotate(2.2deg)}
  50%{transform:translateY(-14px) rotate(.5deg)}}

.ds-note{position:absolute;font-family:var(--ds-font-hand);font-size:30px;
  line-height:1.05;color:var(--ds-gray-soft)}
.ds-note--left{left:2%;bottom:7%;transform:rotate(-7deg)}
.ds-note--right{right:2%;top:5%;transform:rotate(5deg);text-align:right}
/* Строки скрыты до конца набора абзаца, затем раскрываются одна за другой.
   width:fit-content обязателен: без него clip-path режет всю ширину блока,
   и у правой надписи текст выезжал бы в последний момент. */
.ds-note span{display:block;width:fit-content;
  clip-path:inset(-25% 100% -25% 0);opacity:0;
  transition:clip-path .55s cubic-bezier(.3,.7,.3,1),opacity .3s ease}
.ds-note--right span{margin-left:auto}
/* Запас по краям обязателен: у рукописного шрифта хвосты букв выходят
   за коробку строки, и ровный inset(0) срезал их справа и снизу. */
.ds-note--ready span{clip-path:inset(-25% -25% -25% 0);opacity:1}
.ds-note--ready span:nth-child(2){transition-delay:.3s}
.ds-note--ready span:nth-child(3){transition-delay:.6s}

@media (prefers-reduced-motion:reduce){
  .ds-card{animation:none}
  .ds-card--clients{transform:rotate(-2.4deg)}
  .ds-card--launch{transform:rotate(2.2deg)}
  .ds-letter i,.ds-btn,.ds-btn__arrow{transition:none}
  .ds-note span{clip-path:none;opacity:1;transition:none}
  .ds-lead--typing::after{display:none}
  .ds-iconbtn[data-tip]::after,.ds-iconbtn[data-tip]::before{transition:opacity .18s ease}
}

/* ── планшет ────────────────────────────────────────────────── */
/* ── шапка и первый экран на планшете (одобренный вариант А) ─────
   Логотип уходит влево, меню встаёт рядом с ним, справа — связь и кнопка.
   Плашки не прячем, как раньше, а ставим по бокам от аватара: на узком
   холсте они и есть главная подпись к персонажу. */
@media (max-width:1199px){

  .ds-hero > .ds-container{padding-top:72px}
  .ds-hero__frame{min-height:auto;padding:52px 24px 40px}
  /* h1 растворяем в сетке экрана: так плашки, аватар и слова заголовка
     становятся ячейками одной раскладки, а разметка остаётся прежней */
  .ds-hero__frame{display:grid;grid-template-columns:1fr auto 1fr;column-gap:16px;
    justify-items:center;align-items:center;row-gap:8px}
  .ds-title{display:contents}
  .ds-card--clients,.ds-card--launch{position:static;grid-row:1;
    max-width:250px;padding:11px 15px 11px 11px}
  .ds-card--clients{grid-column:1;justify-self:end}
  .ds-card--launch{grid-column:3;justify-self:start}
  .ds-title__portrait{grid-column:2;grid-row:1;width:150px;height:178px;margin:0}
  .ds-title__word{grid-row:2;flex:none;width:auto;font-size:86px;line-height:.9}
  .ds-title__word--left{grid-column:1 / 3;justify-self:end;padding-right:8px}
  .ds-title__word--right{grid-column:3 / 4;justify-self:start;text-align:left}
  .ds-lead,.ds-features,.ds-cta{grid-column:1 / -1}
  .ds-lead{max-width:560px;margin-left:auto;margin-right:auto;font-size:16px}
  .ds-note{display:none}                           /* рукописный декор рассчитан на широкий холст */
  .ds-features{max-width:620px;margin-left:auto;margin-right:auto}
  .ds-feature{flex:0 0 50%;padding:10px 16px}
  .ds-feature+.ds-feature{border-left:0}
}

/* ── телефон ────────────────────────────────────────────────── */
/* ── шапка и первый экран на телефоне (вариант А) ────────────────
   Меню убрано: на 390 px оно не читается. Вместо него — иконки связи,
   по которым и приходят обращения: почта, MAX, телефон. */
@media (max-width:809px){
  .ds-logo{width:40px;height:40px;font-size:17px}
  .ds-iconbtn{width:38px;height:38px}
  .ds-btn--sm{padding:10px 14px;font-size:12.5px}
  .ds-theme{width:46px;height:26px}

  .ds-hero > .ds-container{padding-top:52px}
  .ds-hero__frame{padding:40px 14px 30px;row-gap:6px;column-gap:8px}
  .ds-title__portrait{grid-column:2;width:104px;height:124px}
  /* плашки ужимаем до подписи и не даём им наезжать на аватар:
     ширину задаёт колонка, текст переносится в две-три строки */
  .ds-card--clients,.ds-card--launch{max-width:none;width:100%;
    padding:8px 9px;border-radius:14px;gap:8px}
  .ds-card .ds-feature__text{min-width:0}
  .ds-card .ds-feature__icon{width:30px;height:30px}
  .ds-card .ds-feature__text b{font-size:13px;line-height:1.25}
  .ds-card .ds-feature__text i{font-size:12px;line-height:1.25}
  .ds-title__word{grid-row:2;font-size:54px}
  .ds-title__word--left{padding-right:6px}
  .ds-lead{font-size:15px;margin-top:14px}
  .ds-features{gap:14px 0}
  .ds-feature{flex:0 0 50%;padding:0 10px}
  .ds-feature+.ds-feature{border-left:0}
  .ds-cta{flex-direction:column;gap:12px}
  .ds-cta .ds-btn{width:100%;justify-content:center}
}

/* ── о себе ──────────────────────────────────────────────────── */
.ds-about{position:relative}
.ds-about > .ds-container{padding:120px 0 0}
.ds-about__title{margin:0 0 54px;text-align:center;
  font:600 110px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em}

/* Вариант C «Выноски»: на сцене персонаж по центру, четыре результата стоят
   по краям на абсолютных позициях, каждый со своей линией к фигуре и крестиком
   на конце. Ниже — «Почему со мной проще» в четыре графы, «С чем работаю»
   и строка «Ниши». Линии и крестики — те же токены, что у рамок сайта. */
/* рамка блока: на её углах сидят искорки, как у первого экрана */
.ds-about__frame{position:relative;border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}

/* плашка-подзаголовок */
.ds-about__kicker{margin:0;padding:15px 24px;background:var(--ds-tile);
  font:600 21px/1.2 var(--ds-font-display);text-transform:uppercase;letter-spacing:.01em}

.ds-about__stage{container-type:inline-size;position:relative;height:640px;border-bottom:1px solid var(--ds-line)}
.ds-about__stage .ds-about__figure{position:absolute;inset:0;margin:0;padding:36px 0 0;
  display:flex;align-items:flex-end;justify-content:center}
.ds-about__photo{height:604px;width:auto;max-width:none;display:block}
.ds-about__stage .ds-about__kicker{position:absolute;left:0;top:0;z-index:2;
  border-right:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}

/* выноска: линия от края колонки до фигуры (длина --len) и крестик на её конце */
.ds-about__call{position:absolute;width:300px;z-index:2}
.ds-about__call::after{content:"";position:absolute;top:0;height:1px;background:var(--ds-ink);opacity:.35}
/* Конец линии считается от середины сцены: --d — расстояние от оси фигуры.
   Так линия не заходит на персонажа при любой ширине сцены (cqw — ширина
   сцены, а не окна), фигура всегда по центру и одного размера. */
.ds-about__call--l{left:40px}
.ds-about__call--l::after{left:0;width:calc(50cqw - var(--d) - 40px)}
.ds-about__call--r{right:40px;text-align:right}
.ds-about__call--r::after{right:0;width:calc(50cqw - var(--d) - 40px)}
.ds-about__call--1{top:120px;--d:210px}
.ds-about__call--2{top:370px;--d:250px}
.ds-about__call--3{top:180px;--d:230px}
.ds-about__call--4{top:420px;--d:280px}

/* текст выноски: крупный заголовок и серая подпись */
.ds-about__call-text{margin:0;display:flex;flex-direction:column;gap:8px;padding:18px 0 16px}
.ds-about__call-text b{font:600 40px/1 var(--ds-font-display);letter-spacing:-.01em}
.ds-about__call-text span{font:400 16px/1.4 var(--ds-font-text);color:var(--ds-gray)}
.ds-about__call--r .ds-about__call-text{align-items:flex-end}
/* на широком экране заголовок в одну строку; <br class="ds-br"> — смысловой перенос,
   включается только в тёмной теме на узкой сцене, где колонка выноски уже (см. ниже) */
.ds-br{display:none}
@media (min-width:1200px){
  .ds-about__call-text b{white-space:nowrap}
}

/* ряд под сценой: инструменты слева, ниши справа, между ними линия рамки */
.ds-about__row{display:grid;grid-template-columns:1fr 1fr}
.ds-about__niches{border-left:1px solid var(--ds-line)}
.ds-about__tools,.ds-about__niches{padding:24px}
.ds-about__label{margin:0 0 16px;font:600 18px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ds-gray)}
.ds-tools{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ds-tools li{display:flex;align-items:center;gap:12px;min-width:0;padding:11px 0}
.ds-tools li + li{border-top:1px solid var(--ds-line)}
.ds-tools li:first-child{padding-top:4px}
/* монограмма вместо чужого логотипа: не тянем бренд-файлы в макет */
.ds-tools u{flex:none;text-decoration:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--ds-tile);color:var(--ds-blue-dark);font:600 17px/1 var(--ds-font-display)}
.ds-tools span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ds-tools b{font:600 16px/1.2 var(--ds-font-text)}
.ds-tools i{font-style:normal;color:var(--ds-gray);font:400 13px/1.35 var(--ds-font-text)}
/* метки-«таблетки» переносятся по строкам */
.ds-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ds-pills li{padding:7px 14px;border-radius:100px;border:1px solid var(--ds-line);color:var(--ds-gray);font:400 14px/1.3 var(--ds-font-text)}

@media (max-width:1199px){
  .ds-about > .ds-container{padding-top:92px}
  .ds-about__title{font-size:72px;margin-bottom:42px}
  /* Сцена складывается в столбик: фото сверху, под ним плашка и выноски
     друг под другом, каждая со своей линией и крестиком на правом краю. */
  .ds-about__stage{height:auto;display:flex;flex-direction:column;background:transparent}
  .ds-about__stage .ds-about__figure{position:static;padding:20px 14px 0;justify-content:center}
  .ds-about__photo{height:auto;max-width:100%;max-height:420px}
  .ds-about__stage .ds-about__kicker{position:static;order:2;border-right:0;border-bottom:0;border-top:1px solid var(--ds-line)}
  .ds-about__calls{order:3;display:block;padding:8px 0}
  .ds-about__call{position:relative;width:auto;text-align:left;margin:22px 14px 0}
  .ds-about__call--l,.ds-about__call--r{left:auto;right:auto}
  .ds-about__call::after{left:0;right:0;width:auto}
  .ds-about__call--1,.ds-about__call--2,.ds-about__call--3,.ds-about__call--4{top:auto}
  .ds-about__call--r .ds-about__call-text{align-items:flex-start}
  .ds-about__call-text{padding:14px 0 10px;gap:4px}
  .ds-about__call-text b{font-size:38px}
  .ds-about__row{grid-template-columns:1fr}
  .ds-about__niches{border-left:0;border-top:1px solid var(--ds-line)}
}

@media (max-width:809px){
  .ds-about > .ds-container{padding-top:72px}
  .ds-about__title{font-size:52px;margin-bottom:30px}
  .ds-about__photo{max-height:320px}
  .ds-about__kicker{padding:14px;font-size:19px}
  .ds-about__call-text span{font-size:15px}
  .ds-about__tools,.ds-about__niches{padding:18px 14px}
}

/* ── услуги ──────────────────────────────────────────────────── */
.ds-services{position:relative}
.ds-services > .ds-container{padding:0;border-bottom:1px solid var(--ds-line)}

/* бегущая строка-заголовок: лента из повторов едет влево бесконечно.
   Дублируем набор дважды и сдвигаем ровно на половину — шва не видно. */
.ds-ticker{margin:-1px 0 0;padding:44px 0 48px;
  border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
/* Линии — по контейнеру, чтобы стыковались с сеткой соседних блоков,
   а сама лента выходит за него до краёв экрана: строка должна казаться
   бесконечной, а не упираться в границу блока. */
.ds-ticker__viewport{display:block;overflow:hidden;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ds-ticker__track{display:flex;width:max-content;animation:ds-бег 26s linear infinite}
.ds-ticker__item{display:inline-flex;align-items:center;gap:40px;padding-right:40px;
  font:600 104px/.95 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em;
  white-space:nowrap}
.ds-ticker__item i{font-style:normal;color:var(--ds-gray);
  font:400 15px/1.3 var(--ds-font-text);text-transform:none;letter-spacing:0;
  white-space:nowrap}
@keyframes ds-бег{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ds-ticker__track{animation:none}}

/* строки услуг: номер, название, капсула с ценой, плюс */
.ds-srv__wrap{position:relative}
/* Боковые направляющие идут только вдоль списка услуг: в полосе с бегущей
   строкой они резали её пополам, как рамка. */
.ds-services > .ds-container::before,
.ds-services > .ds-container::after{content:none}
.ds-srv__wrap::before,.ds-srv__wrap::after{content:"";position:absolute;top:0;bottom:0;
  width:1px;background:var(--ds-line);z-index:-1}
.ds-srv__wrap::before{left:0}
.ds-srv__wrap::after{right:0}
.ds-srv{list-style:none;margin:0;padding:0}
.ds-srv > li + li{border-top:1px solid var(--ds-line)}
.ds-srv__item summary{display:flex;align-items:center;gap:22px;padding:26px 28px;cursor:pointer;
  list-style:none;transition:background-color .25s ease}
.ds-srv__item summary::-webkit-details-marker{display:none}
.ds-srv__item summary:hover{background:color-mix(in srgb,var(--ds-tile) 55%,transparent)}
.ds-srv__item summary:focus-visible{outline:2px solid var(--ds-blue);outline-offset:-4px}
.ds-srv__no{flex:0 0 20px;color:var(--ds-gray);font:500 14px/1 var(--ds-font-text);
  letter-spacing:.08em;padding-top:6px}
.ds-srv__head{display:flex;flex-direction:column;gap:6px;min-width:0}
.ds-srv__name{font:600 24px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em}
.ds-srv__sub{color:var(--ds-gray);font:400 14px/1.35 var(--ds-font-text)}
.ds-srv__tag{margin-left:auto;padding:9px 17px;border-radius:90px;background:var(--ds-tile);
  color:var(--ds-blue-dark);font:500 14px/1.2 var(--ds-font-text);white-space:nowrap}
/* плюс рисуем двумя линиями: при раскрытии вертикальная исчезает и остаётся минус */
.ds-srv__plus{flex:none;position:relative;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--ds-line);transition:background-color .25s ease,border-color .25s ease}
.ds-srv__plus::before,.ds-srv__plus::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--ds-ink);transition:transform .3s cubic-bezier(.2,.7,.3,1),background-color .25s ease}
.ds-srv__plus::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.ds-srv__plus::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.ds-srv__item[open] .ds-srv__plus{background:var(--ds-blue);border-color:transparent}
.ds-srv__item[open] .ds-srv__plus::before,
.ds-srv__item[open] .ds-srv__plus::after{background:#fff}
.ds-srv__item[open] .ds-srv__plus::after{transform:translate(-50%,-50%) scaleY(0)}

.ds-srv__body{display:grid;grid-template-columns:1.1fr 1fr;gap:26px 40px;
  /* левый край тела = отступ строки 28 + номер 20 + зазор 22: текст встаёт под название */
  padding:0 28px 30px 70px;color:var(--ds-gray);font:400 16px/1.6 var(--ds-font-text)}
.ds-srv__body p{margin:0;max-width:44ch}
.ds-srv__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ds-srv__list li{position:relative;padding-left:22px;color:var(--ds-ink);font-size:15px}
.ds-srv__list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--ds-blue)}

@media (max-width:1199px){
  .ds-ticker{padding:32px 0 34px}
  .ds-ticker__item{font-size:76px;gap:30px;padding-right:30px}
  .ds-srv__item summary{gap:18px;padding:22px 24px}
  .ds-srv__body{grid-template-columns:1fr;gap:18px;padding:0 24px 26px 62px}
}

@media (max-width:809px){
  .ds-ticker__item{font-size:52px;gap:20px;padding-right:20px}
  .ds-ticker__item i{font-size:12px}
  /* на телефоне название переносим под номер, цена остаётся в строке номера */
  .ds-srv__item summary{flex-wrap:wrap;gap:10px 12px;padding:18px 14px}
  .ds-srv__head{flex:1 1 100%;order:2}
  .ds-srv__name{font-size:20px}
  .ds-srv__sub{font-size:13px}
  .ds-srv__no{order:1;padding-top:0}
  /* как в макете: номер, цена и плюс одной строкой, под ними название и состав */
  .ds-srv__tag{order:1;margin-left:auto;font-size:13px;padding:7px 14px}
  .ds-srv__plus{order:1;width:30px;height:30px}
  .ds-srv__body{padding:0 14px 22px;font-size:15px}
}

/* ── процесс ─────────────────────────────────────────────────── */
.ds-process{position:relative}
.ds-process > .ds-container{padding:110px 0 0}
.ds-process__title{margin:0 0 46px;padding:0 28px;
  font:600 110px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em}

/* Слева узкая колонка с панелями, справа широкая с липкой иллюстрацией —
   она держится на месте, пока слева проходят все шаги. */
.ds-process__grid{position:relative;display:grid;grid-template-columns:var(--ds-col-wide) var(--ds-col-side);
  border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
.ds-process__steps{display:flex;flex-direction:column}
.ds-step{padding:44px 28px 48px;display:flex;flex-direction:column;gap:14px}
.ds-step + .ds-step{border-top:1px solid var(--ds-line)}
/* чередование фона, чтобы шаги читались как отдельные панели, а не список */
.ds-step:nth-child(even){background:color-mix(in srgb,var(--ds-tile) 45%,transparent)}
.ds-step__no{margin:0;color:var(--ds-blue-dark);
  font:600 15px/1 var(--ds-font-text);letter-spacing:.12em}
.ds-step__name{margin:0;font:600 40px/1.05 var(--ds-font-display);
  text-transform:uppercase;letter-spacing:-.01em}
.ds-step__text{margin:0;max-width:44ch;color:var(--ds-gray);
  font:400 16px/1.6 var(--ds-font-text)}

.ds-step--cta{background:var(--ds-badge);gap:16px}
.ds-step--cta .ds-step__name,
.ds-step--cta .ds-step__text{color:var(--ds-ink)}
:root[data-theme="dark"] .ds-step--cta .ds-step__name{color:#fff}
.ds-step__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.ds-step__mail{color:var(--ds-blue-dark);text-decoration:none;
  font:500 15px/1.2 var(--ds-font-text);border-bottom:1px solid currentColor;padding-bottom:2px}
.ds-step__mail:hover{color:var(--ds-blue)}

.ds-process__side{border-left:1px solid var(--ds-line);background:var(--ds-tile)}
.ds-process__sticky{position:sticky;top:132px;display:flex;flex-direction:column;
  align-items:center;gap:18px;padding:52px 32px}
.ds-process__hint{margin:0;text-align:center;color:var(--ds-blue-dark);
  font:400 30px/1.15 var(--ds-font-hand)}

@media (max-width:1199px){
  .ds-process > .ds-container{padding-top:88px}
  .ds-process__title{font-size:72px;margin-bottom:34px}
  .ds-step{padding:34px 24px 38px}
  .ds-step__name{font-size:32px}
  .ds-process__sticky{top:110px;padding:40px 24px}
}

@media (max-width:809px){
  .ds-process > .ds-container{padding-top:64px}
  .ds-process__title{font-size:52px;padding:0 12px;margin-bottom:24px}
  /* на телефоне липкая колонка перекрывала бы половину экрана — раскладываем в один столбец */
  .ds-process__grid{grid-template-columns:1fr}
  .ds-process__side{grid-row:1;border-left:0;border-bottom:1px solid var(--ds-line)}
  .ds-process__sticky{position:static;padding:28px 14px}
  .ds-process__hint{font-size:24px}
  .ds-step{padding:26px 14px 30px}
  .ds-step__name{font-size:26px}
  .ds-step__text{font-size:15px}
}

/* ── отзывы ──────────────────────────────────────────────────── */
.ds-review{position:relative}
.ds-review > .ds-container{padding:88px 0 0}
.ds-review__title{margin:0 0 34px;padding:0 28px;
  font:600 110px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em}

/* зеркало «Процесса»: иллюстрация слева, содержание справа */
.ds-review__grid{position:relative;display:grid;grid-template-columns:var(--ds-col-side) var(--ds-col-wide);
  border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
.ds-review__side{position:relative;background:var(--ds-tile);
  display:flex;align-items:center;justify-content:center;padding:64px 26px 24px}
.ds-review__img{max-width:100%;max-height:min(420px,46vh);width:auto;height:auto;display:block}
/* ролик-звезда 2:3: высота задана, ширина по пропорции (общее правило роликов ниже по файлу
   даёт width:100% и max-height:none, поэтому селектор тяжелее) */
.ds-review__side .ds-review__img{width:auto;max-width:100%;height:min(520px,60vh);max-height:none}
@media (max-width:1199px){.ds-review__side .ds-review__img{height:min(400px,50vh)}}
@media (max-width:809px){.ds-review__side .ds-review__img{height:300px}}
/* пузырь как в шаблоне: реплика, из которой растёт вся секция */
.ds-review__bubble{position:absolute;top:34px;left:50%;transform:translateX(-50%);margin:0;
  background:var(--ds-tile);border:1px solid rgba(27,111,191,.16);border-radius:90px 90px 90px 6px;padding:12px 20px;
  white-space:nowrap;font:500 16px/1 var(--ds-font-display);
  box-shadow:0 14px 30px -20px rgba(22,50,92,.55)}

.ds-review__body{border-left:1px solid var(--ds-line);
  padding:38px 32px 34px;display:flex;flex-direction:column;gap:22px}
.ds-review__stars{margin:0;display:flex;gap:5px;color:var(--ds-blue)}
/* Звёзды лежат внутри каждого слайда (у каждого отзыва своя оценка); зазор
   до цитаты прежний: у слайда gap 26, у колонки был 22 (20 на телефоне). */
.ds-review__item .ds-review__stars{margin-bottom:-4px}

/* Все отзывы лежат в одной ячейке сетки: блок держит высоту самого
   длинного, и при листании ничего не прыгает. */
.ds-review__slides{display:grid;flex:1}
.ds-review__item{grid-area:1 / 1;margin:0;display:flex;flex-direction:column;gap:26px;
  visibility:hidden;opacity:0;transition:opacity .3s ease}
.ds-review__item[data-активен]{visibility:visible;opacity:1}
.ds-review__quote{margin:0;max-width:24ch;
  font:600 38px/1.15 var(--ds-font-display);letter-spacing:-.01em}
.ds-review__author{display:flex;align-items:center;gap:14px}
.ds-review__avatar{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--ds-tile);color:var(--ds-gray);font:600 20px/1 var(--ds-font-display)}
.ds-review__who{display:flex;flex-direction:column;gap:2px}
.ds-review__who b{font:600 17px/1.2 var(--ds-font-text)}
.ds-review__who i{font-style:normal;color:var(--ds-gray);font:400 14px/1.3 var(--ds-font-text)}

.ds-review__nav{display:flex;align-items:center;gap:14px}
.ds-review__arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--ds-line);border-radius:50%;background:transparent;
  color:var(--ds-ink);cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.ds-review__arrow:hover{background:var(--ds-blue);color:#fff;border-color:transparent}
.ds-review__arrow:focus-visible{outline:2px solid var(--ds-blue);outline-offset:3px}
.ds-review__counter{margin:0;color:var(--ds-gray);font:500 14px/1 var(--ds-font-text);letter-spacing:.06em}
.ds-review__counter span{color:var(--ds-ink)}

/* ── сертификаты ───────────────────────────────────────────────
   Лента документов: четыре листа веером, под каждым паспорт. */
.ds-cert{position:relative}
.ds-cert > .ds-container{padding:110px 0 0}
.ds-cert__grid{position:relative;border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
.ds-cert__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-cert__item{display:flex}
.ds-cert__fig{margin:0;display:flex;flex-direction:column;width:100%}
.ds-cert__shot{display:block;background:var(--ds-tile);padding:96px 44px 56px;outline-offset:-4px}
.ds-cert__shot img{width:100%;height:auto;border-radius:8px;
  box-shadow:0 1px 0 rgba(22,50,92,.10),0 30px 50px -28px rgba(22,50,92,.55);
  transform:rotate(var(--ds-cert-r,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ds-cert__item:nth-child(1){--ds-cert-r:-3deg}
.ds-cert__item:nth-child(2){--ds-cert-r:-1deg}
.ds-cert__item:nth-child(3){--ds-cert-r:1deg}
.ds-cert__item:nth-child(4){--ds-cert-r:3deg}
.ds-cert__shot:hover img,.ds-cert__shot:focus-visible img{transform:rotate(0) translateY(-4px)}
.ds-cert__shot:focus-visible{outline:2px solid var(--ds-blue-dark)}
.ds-cert__cap{flex:1;display:flex;flex-direction:column;gap:6px;padding:24px 28px 28px;border-top:1px solid var(--ds-line)}
.ds-cert__item + .ds-cert__item .ds-cert__cap{border-left:1px solid var(--ds-line)}
.ds-cert__name{font:600 30px/1.05 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.005em}
.ds-cert__lvl{color:var(--ds-blue-dark);font:500 15px/1.35 var(--ds-font-text)}
.ds-cert__meta{margin-top:auto;display:flex;flex-wrap:wrap;column-gap:10px;color:var(--ds-gray);font:400 15px/1.4 var(--ds-font-text);font-variant-numeric:tabular-nums}
.ds-cert__meta b{color:var(--ds-ink);font-weight:500;user-select:all}
.ds-cert__hand{position:absolute;z-index:2;left:44px;top:28px;margin:0;color:var(--ds-blue-dark);font:400 30px/1.15 var(--ds-font-hand);transform:rotate(-2deg);pointer-events:none}
.ds-cert__arrow{position:absolute;z-index:2;left:360px;top:30px;width:96px;color:var(--ds-blue-dark);opacity:.6;pointer-events:none}
.ds-cert__note{margin:0;padding:18px 28px 0;color:var(--ds-gray);font:400 15px/1.45 var(--ds-font-text)}
@media (max-width:1199px){
  .ds-cert > .ds-container{padding-top:88px}
  .ds-cert__shot{padding:80px 22px 40px}
  .ds-cert__item:nth-child(1){--ds-cert-r:-2deg}
  .ds-cert__item:nth-child(4){--ds-cert-r:2deg}
  .ds-cert__cap{padding:20px 18px 24px}
  .ds-cert__name{font-size:24px}
  .ds-cert__lvl,.ds-cert__meta{font-size:14px}
  .ds-cert__hand{left:24px;top:22px;font-size:26px}
  .ds-cert__arrow{left:300px;top:24px;width:80px}
}
@media (max-width:809px){
  .ds-cert > .ds-container{padding-top:64px}
  .ds-cert__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-cert__shot{padding:20px 16px 24px}
  .ds-cert__item:nth-child(-n+2) .ds-cert__shot{padding-top:64px}
  .ds-cert__item:nth-child(odd){--ds-cert-r:-2deg}
  .ds-cert__item:nth-child(even){--ds-cert-r:2deg}
  .ds-cert__item + .ds-cert__item .ds-cert__cap{border-left:0}
  .ds-cert__item:nth-child(even) .ds-cert__cap{border-left:1px solid var(--ds-line)}
  .ds-cert__item:nth-child(n+3) .ds-cert__shot{border-top:1px solid var(--ds-line)}
  .ds-cert__cap{padding:16px 14px 20px;gap:4px}
  .ds-cert__name{font-size:22px}
  .ds-cert__lvl,.ds-cert__meta{font-size:13px}
  .ds-cert__meta{flex-direction:column}
  .ds-cert__hand{left:14px;top:18px;font-size:24px}
  .ds-cert__arrow{display:none}
  .ds-cert__note{padding:16px 12px 0;font-size:14px}
}
@media (max-width:359px){.ds-cert__cap{padding-inline:10px}.ds-cert__lvl{font-size:12px}}
@media (prefers-reduced-motion:reduce){.ds-cert__shot img{transition:none}}

@media (max-width:1199px){
  .ds-review > .ds-container{padding-top:88px}
  .ds-review__title{font-size:72px;margin-bottom:34px}
  .ds-review__quote{font-size:34px;max-width:28ch}
  .ds-review__body{padding:34px 24px 32px}
  .ds-review__img{max-height:min(340px,40vh)}
}

@media (max-width:809px){
  .ds-review > .ds-container{padding-top:64px}
  .ds-review__title{font-size:52px;padding:0 12px;margin-bottom:24px}
  .ds-review__grid{grid-template-columns:1fr}
  .ds-review__side{padding:64px 14px 0}
  .ds-review__img{max-height:250px}
  .ds-review__body{border-left:0;border-top:1px solid var(--ds-line);padding:26px 14px 28px;gap:20px}
  .ds-review__item .ds-review__stars{margin-bottom:-6px}
  .ds-review__quote{font-size:26px;max-width:none}
}

/* ── вопросы ─────────────────────────────────────────────────── */
.ds-faq{position:relative}
.ds-faq > .ds-container{padding:110px 0 0}
.ds-faq__title{margin:0 0 46px;padding:0 28px;
  font:600 110px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em}

.ds-faq__grid{position:relative;display:grid;grid-template-columns:var(--ds-col-side) var(--ds-col-wide);
  border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
.ds-faq__side{background:var(--ds-tile);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:64px 30px}
/* знак вопроса вместо иллюстрации: тот же приём, что в шаблоне,
   но своими средствами — крупная типографика вместо чужой картинки */
.ds-faq__mark{font:600 200px/.8 var(--ds-font-display);color:var(--ds-blue);
  text-shadow:0 22px 40px rgba(46,155,214,.25)}

/* Сцена блока вопросов: ролик по центру, вокруг — парящие знаки.
   Знаки набраны тем же шрифтом, что заголовки, и живут в вёрстке:
   так их форма и цвет наши, а не то, во что их превратит генератор. */
.ds-faq__сцена{position:relative;width:100%;display:grid;place-items:center}
.ds-faq__img{position:relative;z-index:1;display:block;
  max-width:100%;max-height:min(440px,50vh);width:auto;height:auto}
/* Знаки лежат НАД роликом: кадр растянут во всю ширину плашки и
   непрозрачен, под ним их попросту не видно. Фон у кадра белый, так что
   поверх они читаются, а персонаж стоит по центру и их не задевает. */
.ds-faq__знак{position:absolute;left:var(--п);top:var(--в);z-index:2;
  font:600 var(--р,54px)/1 var(--ds-font-display);color:var(--ds-blue);opacity:.5;
  animation:ds-парит var(--т,8s) ease-in-out var(--з,0s) infinite}
@keyframes ds-парит{
  0%,100%{transform:translate3d(0,0,0) rotate(-5deg)}
  50%{transform:translate3d(0,-16px,0) rotate(5deg)}
}
@media (prefers-reduced-motion:reduce){.ds-faq__знак{animation:none}}
.ds-faq__hint{margin:0;max-width:18ch;text-align:center;color:var(--ds-blue-dark);
  font:400 26px/1.2 var(--ds-font-hand)}

.ds-faq__list{border-left:1px solid var(--ds-line)}
.ds-faq__item + .ds-faq__item{border-top:1px solid var(--ds-line)}
.ds-faq__item summary{display:flex;align-items:center;gap:20px;justify-content:space-between;
  padding:26px 28px;cursor:pointer;list-style:none;
  font:600 26px/1.25 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em;
  transition:background-color .25s ease}
.ds-faq__item summary::-webkit-details-marker{display:none}
.ds-faq__item summary:hover{background:color-mix(in srgb,var(--ds-tile) 55%,transparent)}
.ds-faq__item summary:focus-visible{outline:2px solid var(--ds-blue);outline-offset:-4px}
.ds-faq__item[open] .ds-srv__plus{background:var(--ds-blue);border-color:transparent}
.ds-faq__item[open] .ds-srv__plus::before,
.ds-faq__item[open] .ds-srv__plus::after{background:#fff}
.ds-faq__item[open] .ds-srv__plus::after{transform:translate(-50%,-50%) scaleY(0)}
.ds-faq__answer{padding:0 28px 28px}
/* Подвал списка: кнопка на границе с пустотой под последним вопросом. */
.ds-faq__foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:28px;border-top:1px solid var(--ds-line)}
.ds-faq__answer p{margin:0;max-width:62ch;color:var(--ds-gray);
  font:400 16px/1.6 var(--ds-font-text)}

@media (max-width:1199px){
  .ds-faq > .ds-container{padding-top:88px}
  .ds-faq__title{font-size:72px;margin-bottom:34px}
  .ds-faq__mark{font-size:150px}
  .ds-faq__img{max-height:min(360px,42vh)}
  .ds-faq__item summary{font-size:22px;padding:22px 24px}
  .ds-faq__answer{padding:0 24px 24px}
  .ds-faq__foot{padding:24px;gap:16px}
}

@media (max-width:809px){
  .ds-faq > .ds-container{padding-top:64px}
  .ds-faq__title{font-size:52px;padding:0 12px;margin-bottom:24px}
  .ds-faq__grid{grid-template-columns:1fr}
  .ds-faq__side{padding:34px 16px;gap:10px}
  .ds-faq__mark{font-size:110px}
  .ds-faq__img{max-height:270px}
  .ds-faq__знак{font-size:calc(var(--р,54px) * .7)}
  .ds-faq__hint{font-size:22px}
  .ds-faq__list{border-left:0;border-top:1px solid var(--ds-line)}
  .ds-faq__item summary{font-size:19px;padding:18px 14px;gap:14px}
  .ds-faq__answer{padding:0 14px 20px}
  .ds-faq__foot{padding:20px 14px;gap:14px}
  .ds-faq__foot .ds-btn{width:100%;justify-content:center}
  .ds-faq__answer p{font-size:15px}
}

/* ── контакты ────────────────────────────────────────────────── */
.ds-contacts{position:relative}
.ds-contacts > .ds-container{padding:110px 0 0}
.ds-contacts__title{margin:0 0 46px;padding:0 28px;
  font:600 110px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em}

.ds-contacts__grid{position:relative;display:grid;grid-template-columns:var(--ds-col-side) var(--ds-col-wide);
  border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
.ds-contacts__side{position:relative;background:var(--ds-tile);
  display:flex;align-items:flex-end;justify-content:center;padding:70px 26px 0}
.ds-contacts__img{max-width:100%;max-height:360px;width:auto;height:auto;display:block}
.ds-contacts__bubble{position:absolute;top:34px;left:50%;transform:translateX(-50%);margin:0;
  background:var(--ds-tile);border:1px solid rgba(27,111,191,.16);border-radius:90px 90px 6px 90px;padding:12px 20px;
  white-space:nowrap;font:500 16px/1 var(--ds-font-display);
  box-shadow:0 14px 30px -20px rgba(22,50,92,.55)}

.ds-contacts__body{border-left:1px solid var(--ds-line);padding:44px 32px 42px;
  display:flex;flex-direction:column;gap:30px}
.ds-contacts__lead{margin:0;max-width:52ch;color:var(--ds-gray);
  font:400 17px/1.6 var(--ds-font-text)}

.ds-contacts__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
/* строка-ссылка: вся площадь кликабельна, стрелка подсказывает переход */
.ds-contact{display:flex;align-items:center;gap:16px;padding:16px 20px;
  border:1px solid var(--ds-line);border-radius:18px;text-decoration:none;color:inherit;
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease}
.ds-contact:hover{background:var(--ds-tile);border-color:transparent;transform:translateX(3px)}
.ds-contact__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--ds-tile);color:var(--ds-blue-dark)}
.ds-contact:hover .ds-contact__icon{background:var(--ds-bg-card,#fff)}
.ds-contact__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-contact__text b{font:600 17px/1.2 var(--ds-font-text)}
.ds-contact__text i{font-style:normal;color:var(--ds-gray);font:400 14px/1.3 var(--ds-font-text);
  overflow:hidden;text-overflow:ellipsis}
.ds-contact__arrow{margin-left:auto;flex:none;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;background:var(--ds-tile);color:var(--ds-blue-dark);
  transition:background-color .25s ease,color .25s ease}
.ds-contact:hover .ds-contact__arrow{background:var(--ds-blue);color:#fff}

.ds-contacts__foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ds-contacts__hours{margin:0;display:flex;align-items:center;gap:9px;
  color:var(--ds-gray);font:400 15px/1.3 var(--ds-font-text)}

@media (max-width:1199px){
  .ds-contacts > .ds-container{padding-top:88px}
  .ds-contacts__title{font-size:72px;margin-bottom:34px}
  .ds-contacts__body{padding:34px 24px 34px;gap:24px}
  .ds-contacts__img{max-height:290px}
}

@media (max-width:809px){
  .ds-contacts > .ds-container{padding-top:64px}
  .ds-contacts__title{font-size:52px;padding:0 12px;margin-bottom:24px}
  .ds-contacts__grid{grid-template-columns:1fr}
  .ds-contacts__side{padding:60px 14px 0}
  .ds-contacts__img{max-height:220px}
  .ds-contacts__body{border-left:0;border-top:1px solid var(--ds-line);padding:26px 14px 30px}
  .ds-contacts__lead{font-size:15px}
  .ds-contact{padding:13px 14px;gap:12px}
  .ds-contact__text b{font-size:15.5px}
  .ds-contact__text i{font-size:13px}
}

/* ── начать проект ───────────────────────────────────────────── */
.ds-start{position:relative}
.ds-start > .ds-container{padding:0}
/* лента идёт за края экрана — вертикальные направляющие резали бы её */
.ds-start > .ds-container::before,
.ds-start > .ds-container::after{content:none}
.ds-start__link{display:block;text-decoration:none;color:inherit;
  padding:54px 0 58px;border-top:1px solid var(--ds-line);
  transition:background-color .3s ease}
.ds-start__link:hover{background:color-mix(in srgb,var(--ds-tile) 45%,transparent)}
.ds-start__link:focus-visible{outline:2px solid var(--ds-blue);outline-offset:-4px}
/* лента шире контейнера, как у заголовка услуг: линии по сетке, текст за обрез */
.ds-start__viewport{display:block;overflow:hidden;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ds-start__track{display:flex;width:max-content;animation:ds-бег 34s linear infinite}
.ds-start__item{display:inline-flex;align-items:center;gap:34px;padding-right:34px;
  font:600 96px/.95 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.01em;
  white-space:nowrap}
.ds-start__dot{display:grid;place-items:center;width:62px;height:62px;flex:none;
  border-radius:50%;background:var(--ds-blue);color:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.ds-start__link:hover .ds-start__dot{transform:translateX(4px) rotate(-8deg)}
@media (prefers-reduced-motion:reduce){.ds-start__track{animation:none}}

/* ── подвал ──────────────────────────────────────────────────── */
.ds-footer{position:relative;padding-bottom:40px}
.ds-footer > .ds-container{padding:0}
.ds-footer__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;
  padding:34px 28px 0;border-top:1px solid var(--ds-line)}
.ds-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ds-footer__who{margin:0;display:flex;flex-direction:column;gap:2px}
.ds-footer__who b{font:600 16px/1.2 var(--ds-font-text)}
.ds-footer__who i{font-style:normal;color:var(--ds-gray);font:400 13.5px/1.3 var(--ds-font-text)}
.ds-footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
/* та же прокрутка букв, что в шапке: буквы сдвигаются вверх по одной */
.ds-footer__nav a{display:flex;gap:.03em;color:var(--ds-ink);text-decoration:none;
  font:500 15px/1.4 var(--ds-font-text);padding:3px 0;transition:color .25s ease}
.ds-footer__nav a:hover{color:var(--ds-blue)}
.ds-footer__nav a:hover .ds-letter i{transform:translateY(-50%)}
.ds-footer__side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ds-footer__mail{color:var(--ds-ink);text-decoration:none;font:500 15px/1.3 var(--ds-font-text);
  border-bottom:1px solid var(--ds-line);padding-bottom:2px;transition:color .25s ease}
.ds-footer__mail:hover{color:var(--ds-blue)}
/* Копирайт двумя строками по смыслу: кто и реквизиты. Строка реквизитов не рвётся. */
.ds-footer__copy{margin:0;color:var(--ds-gray);font:400 13.5px/1.4 var(--ds-font-text);text-align:left}
.ds-footer__copy > span{display:block}

@media (max-width:1199px){
  .ds-start__link{padding:40px 0 44px}
  .ds-start__item{font-size:68px;gap:26px;padding-right:26px}
  .ds-start__dot{width:52px;height:52px}
}

@media (max-width:809px){
  .ds-start__link{padding:30px 0 32px}
  .ds-start__item{font-size:46px;gap:18px;padding-right:18px}
  .ds-start__dot{width:40px;height:40px}
  /* в подвале три колонки не помещаются: складываем в столбец по левому краю */
  .ds-footer__row{grid-template-columns:1fr;gap:22px;padding:26px 14px 0;text-align:left}
  .ds-footer__nav{justify-content:flex-start;gap:6px 16px}
  .ds-footer__side{align-items:flex-start}
  .ds-footer__copy{text-align:left}
}

/* ── юридические документы в подвале ─────────────────────────── */
.ds-footer__legal{margin-top:28px;padding:20px 28px 0;border-top:1px solid var(--ds-line);
  display:flex;flex-direction:column;gap:10px}
.ds-footer__docs{display:flex;flex-wrap:wrap;gap:6px 22px}
.ds-footer__docs a{color:var(--ds-gray);text-decoration:none;padding:4px 0;
  font:400 13.5px/1.5 var(--ds-font-text);border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease}
.ds-footer__docs a:hover{color:var(--ds-blue-dark);border-bottom-color:currentColor}
.ds-footer__note{margin:0;max-width:70ch;color:var(--ds-gray-soft);
  font:400 12.5px/1.5 var(--ds-font-text)}

@media (max-width:809px){
  .ds-footer__legal{margin-top:22px;padding:18px 14px 0;gap:8px}
  .ds-footer__docs{gap:6px 16px}
  .ds-footer__docs a{font-size:13px}
}

/* ── баннер о cookie ─────────────────────────────────────────── */
/* Плашка синяя: на белом фоне страницы светлая карточка терялась,
   а баннер должен быть замечен с первого взгляда. */
/* Раскладка (ТЗ ui-designer, вариант Б): ≥810 — карточка 400 px справа снизу; ≤809 — нижний лист
   во всю ширину. Обе кнопки видны всегда; раскрывается и прокручивается только «Подробнее». */
.ds-cookie{position:fixed;right:16px;bottom:16px;z-index:40;
  width:400px;max-width:calc(100vw - 32px);max-height:min(70dvh,560px);
  display:flex;flex-direction:column;gap:14px;
  padding:18px 20px 20px;border-radius:20px;color:#fff;
  /* Начало градиента — #1B6FBF (--ds-blue-dark светлой темы): белый текст даёт ≥4,5:1
     на всей плашке. Прежний старт --ds-blue (#2E9BD6) давал 3,1:1. */
  --ds-cookie-akcent:#1B6FBF;
  background-image:linear-gradient(135deg,var(--ds-cookie-akcent) 0%,color-mix(in srgb,var(--ds-cookie-akcent) 78%,#000) 100%);
  box-shadow:0 30px 60px -30px rgba(27,111,191,.85);
  animation:ds-куки .45s cubic-bezier(.2,.7,.3,1) both}
.ds-cookie[hidden]{display:none}
@keyframes ds-куки{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ds-cookie{animation:none}}

.ds-cookie__text{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}
.ds-cookie__body{margin:0;color:#fff;font:400 14px/20px var(--ds-font-text)}
/* «Подробнее»: кнопка, не ссылка; в тексте идёт сразу за коротким абзацем */
.ds-cookie__more{margin:0 0 0 4px;padding:0;border:0;border-bottom:1px solid rgba(255,255,255,.55);border-radius:0;
  background:none;color:#fff;cursor:pointer;font:500 14px/20px var(--ds-font-text)}
.ds-cookie__more:hover{border-bottom-color:#fff}
.ds-cookie__more:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* раскрытая часть — единственное, что прокручивается */
.ds-cookie__full{min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.22)}
.ds-cookie__full[hidden]{display:none}
.ds-cookie__full .ds-cookie__body{font-size:14px}
.ds-cookie__links{margin:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.ds-cookie__links a{color:#fff;text-decoration:none;
  font:500 13px/1.4 var(--ds-font-text);border-bottom:1px solid rgba(255,255,255,.45)}
.ds-cookie__links a:hover{border-bottom-color:#fff}

/* Тёмная тема: --ds-blue-dark здесь светлый (#8CC8EE) и градиент на нём светлел до 1,8:1
   с белым текстом, поэтому плашка — тёмная плитка, а цвет текста кнопки «Принимаю» остаётся #1B6FBF. */
:root[data-theme="dark"] .ds-cookie{background-image:none;background-color:var(--ds-tile);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}

/* кнопки сеткой и одной ширины: отказ не должен выглядеть мельче согласия; «Только необходимые» слева */
.ds-cookie__actions{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ds-cookie__btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:44px;padding:0 8px;
  border:0;border-radius:90px;cursor:pointer;white-space:nowrap;font:600 14px/1 var(--ds-font-text);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.ds-cookie__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ds-cookie__btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.ds-cookie__btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ds-cookie__btn--main{background:#fff;color:var(--ds-cookie-akcent);box-shadow:0 12px 24px -16px rgba(9,42,71,.9)}
.ds-cookie__btn--main:hover{background:#F2F8FE}

/* Угловая карточка компактнее (ревизия 26.10): 360 × ~150 вместо 400 × 177 — закрывает меньше
   от карточек блога и шапки статьи, пока человек не выбрал. Текст тот же, ничего не убрано. */
@media (min-width:810px){
  .ds-cookie{right:12px;bottom:12px;width:360px;gap:10px;padding:14px 16px 16px;border-radius:18px}
  .ds-cookie__text{gap:8px}
  .ds-cookie__body,.ds-cookie__more,.ds-cookie__full .ds-cookie__body{font-size:13px;line-height:18px}
  .ds-cookie__btn{height:40px;font-size:13px}
}

@media (max-width:809px){
  .ds-cookie{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:min(72dvh,560px);
    gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .ds-cookie__btn{height:48px}
}
@media (max-width:374px){
  .ds-cookie__actions{grid-template-columns:minmax(0,1fr)}
  .ds-cookie__btn{height:44px}
}
/* Низкий экран телефона (360×640, 320×568): лист компактнее, обе кнопки в ряд, текст тот же —
   иначе он закрывает главную кнопку первого экрана. */
@media (max-width:809px) and (max-height:680px){
  .ds-cookie{gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .ds-cookie__text{gap:6px}
  .ds-cookie__body,.ds-cookie__more,.ds-cookie__full .ds-cookie__body{font-size:13px;line-height:17px}
  .ds-cookie__actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ds-cookie__btn{height:40px;padding:0 4px;font-size:13px}
}

/* ── смена роликов в «Процессе» ──────────────────────────────── */
/* Ролики лежат друг на друге в одной ячейке: колонка держит высоту
   самого высокого, и при переключении ничего не прыгает. */
.ds-process__экран{display:grid;width:100%}
.ds-process__img{grid-area:1 / 1;width:100%;height:auto;display:block;
  opacity:0;transition:opacity .4s ease}
.ds-process__img[data-активен]{opacity:1}
@media (prefers-reduced-motion:reduce){.ds-process__img{transition:none}}

/* Текст для читалки, невидимый глазом: подписи к звёздам-переключателям. */
.ds-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Кнопка уходит к правому краю строки навигации — стрелки и счётчик слева. */
.ds-review__add{margin-left:auto}

/* max-width:none — у <dialog> в браузере свой потолок «100% − 6px − 2em»,
   из-за него окно на телефоне не дотягивалось до заданной ширины. */
/* Браузеры без <dialog> (Safari до 15.4) иначе рисуют окна прямо в потоке. */
.ds-modal:not([open]){display:none}
.ds-modal{width:min(620px,calc(100vw - 32px));max-width:none;max-height:min(88vh,880px);
  padding:0;border:0;border-radius:24px;overflow:hidden;
  background:var(--ds-bg-card,#fff);color:var(--ds-ink);
  box-shadow:0 44px 80px -44px rgba(9,42,71,.6)}
.ds-modal[open]{display:flex;flex-direction:column;
  animation:ds-окно .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes ds-окно{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.ds-modal::backdrop{background:rgba(10,24,40,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:ds-окно-фон .32s ease both}
@keyframes ds-окно-фон{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ds-modal[open],.ds-modal::backdrop{animation:none}
}

.ds-modal__close{position:absolute;top:16px;right:16px;z-index:2;
  display:grid;place-items:center;width:38px;height:38px;padding:0;
  border:1px solid var(--ds-line);border-radius:50%;background:var(--ds-bg-card,#fff);
  color:var(--ds-gray);cursor:pointer;transition:color .2s ease,border-color .2s ease}
.ds-modal__close:hover{color:var(--ds-ink);border-color:var(--ds-gray)}
.ds-modal__close:focus-visible{outline:2px solid var(--ds-blue);outline-offset:3px}

/* Прокручивается форма, а не всё окно: крестик остаётся на месте. */
.ds-modal__form{display:flex;flex-direction:column;gap:20px;
  padding:48px 40px 40px;overflow:auto}
.ds-modal__form[hidden]{display:none}
.ds-modal__kicker{margin:0;color:var(--ds-blue);
  font:500 24px/1 var(--ds-font-hand)}
.ds-modal__title{margin:0;font:600 46px/1.05 var(--ds-font-display);
  text-transform:uppercase;letter-spacing:-.01em}
.ds-modal__lead{margin:0 0 4px;max-width:46ch;color:var(--ds-gray);
  font:400 15px/1.55 var(--ds-font-text)}

.ds-field{display:flex;flex-direction:column;gap:8px}
.ds-field__label{font:500 14px/1.2 var(--ds-font-text);color:var(--ds-gray);letter-spacing:.02em}
.ds-field__label i{font-style:normal;color:var(--ds-blue)}
.ds-field__input{width:100%;font:400 16px/1.45 var(--ds-font-text);color:var(--ds-ink);
  background:var(--ds-bg);border:1px solid var(--ds-line);border-radius:14px;padding:12px 16px;
  transition:border-color .2s ease,box-shadow .2s ease}
.ds-field__input::placeholder{color:var(--ds-gray-soft)}
.ds-field__input:focus{outline:0;border-color:var(--ds-blue);
  box-shadow:0 0 0 3px rgba(46,155,214,.18)}
/* :user-invalid, а не :invalid — иначе пустое поле краснеет до первого касания */
.ds-field__input:user-invalid{border-color:#D6453E}
.ds-field__input--area{resize:vertical;min-height:124px}

/* Радиокнопка оценки скрыта, звёзды рисует страница /otzyvy/ (parts/otzyvy.css); окна «Оставить отзыв» больше нет */
.ds-rating__radio{position:absolute;width:0;height:0;opacity:0}

.ds-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.ds-check__box{flex:none;width:19px;height:19px;margin:2px 0 0;accent-color:var(--ds-blue);cursor:pointer}
.ds-check__text{font:400 13.5px/1.5 var(--ds-font-text);color:var(--ds-gray)}
.ds-check__text a{color:var(--ds-blue-dark);text-decoration:none;
  border-bottom:1px solid rgba(27,111,191,.35)}
.ds-check__text a:hover{border-bottom-color:var(--ds-blue-dark)}
/* Справочная строка под галочкой согласия: ссылка на политику, не часть согласия. */
.ds-check__sprav{margin:-8px 0 0 31px;font:400 12.5px/1.4 var(--ds-font-text);color:var(--ds-gray)}
/* цель касания ссылки — не меньше 24 px по высоте (отступ, а не кегль) */
.ds-check__sprav a{display:inline-block;padding:2px 0;line-height:20px;color:var(--ds-blue-dark);text-decoration:none;border-bottom:1px solid rgba(27,111,191,.35)}

.ds-modal__actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:4px}
/* Замечание под полем: своё, а не браузерная всплывашка — она исчезает
   по первому клику и не читается экранной читалкой. */
.ds-field__error{margin:0;color:#D6453E;font:400 13px/1.4 var(--ds-font-text)}
.ds-field__error[hidden]{display:none}
.ds-field--плохо .ds-field__input{border-color:#D6453E}
.ds-check.ds-field--плохо .ds-check__box{outline:2px solid #D6453E;outline-offset:2px}
.ds-check.ds-field--плохо{flex-wrap:wrap}
.ds-check.ds-field--плохо .ds-check__text{flex:1 1 0;min-width:0}
.ds-check.ds-field--плохо .ds-field__error{flex:1 0 100%;margin-left:31px}

/* Пока письмо уходит: кнопка занята, поля не редактируются — иначе человек
   правит текст, который уже улетел. */
.ds-modal__form--шлём .ds-field__input,
.ds-modal__form--шлём .ds-check__box{opacity:.6;pointer-events:none}
.ds-modal__form--шлём .ds-btn[type="submit"] .ds-btn__arrow{
  animation:ds-шлём 1s linear infinite;transform-origin:50% 50%}
@keyframes ds-шлём{to{transform:translateX(6px);opacity:.25}}

.ds-modal__error{margin:0;color:#D6453E;font:400 13.5px/1.5 var(--ds-font-text);scroll-margin-bottom:24px}
.ds-modal__error[hidden]{display:none}
/* Ссылки в строке ошибки («почту», «MAX», Telegram) того же цвета, что текст, — их выдаёт подчёркивание. */
.ds-modal__error a{color:inherit;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ds-modal__error a:hover{text-decoration-thickness:2px}

.ds-modal__готово{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:56px 40px 40px}
.ds-modal__готово[hidden]{display:none}
.ds-modal__галка{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:var(--ds-tile);color:var(--ds-blue-dark)}

/* Пока окно открыто, страница под ним стоит на месте. */
body.ds-модалка{overflow:hidden}

@media (max-width:1199px){
  .ds-modal__form{padding:40px 32px 32px}
  .ds-modal__готово{padding:48px 32px 32px}
}
@media (max-width:809px){
  .ds-modal{width:calc(100vw - 20px);max-height:92vh;max-height:92dvh;border-radius:20px}
  .ds-modal__form{padding:40px 18px 26px;gap:18px}
  .ds-modal__готово{padding:44px 18px 28px}
  .ds-modal__title{font-size:38px}
  .ds-modal__lead{font-size:14px}
  .ds-review__nav{flex-wrap:wrap}
  .ds-review__add{margin-left:0;width:100%;justify-content:center}
  .ds-modal__actions .ds-btn{width:100%;justify-content:center}
}


/* ── телефон: правки после разбора адаптива (24.09.2026) ──────────
   Замеры показали три беды на 320–414: шапка не сжималась и растягивала
   страницу до 402 px, сетка первого экрана была шире холста, а список
   обещаний разъезжался из-за несброшенного padding у <ul>. Ниже — лечение;
   блок держим последним, чтобы он перекрывал ранние телефонные правила. */
@media (max-width:809px){
  .ds-iconbtn{width:44px;height:44px}
  /* Тумблер темы маленький нарочно — расширяем зону нажатия, не трогая вид. */
  .ds-theme{position:relative}
  .ds-theme::before{content:"";position:absolute;inset:-9px}

  /* Первый экран: портрет сверху, слова под ним, плашки в две колонки. */
  .ds-hero__frame{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .ds-title__portrait{grid-column:1 / -1;grid-row:1;justify-self:center}
  .ds-title__word{grid-row:2}
  .ds-title__word--left{grid-column:1;justify-self:end;padding-right:6px}
  .ds-title__word--right{grid-column:2;justify-self:start}
  .ds-card--clients,.ds-card--launch{position:static;grid-row:3;justify-self:stretch;
    width:auto;max-width:none;margin-top:6px}
  .ds-card--clients{grid-column:1}
  .ds-card--launch{grid-column:2}

  /* Обещания: на телефоне в одну колонку — в двух «Полный цикл» и «Яндекс
     Карты» ломались на две строки. Две колонки возвращаем с 600 px. */
  .ds-features{justify-self:stretch;display:grid;grid-template-columns:1fr;
    gap:14px;max-width:none;justify-items:start}
  .ds-feature{flex:none;padding:0}
  .ds-feature+.ds-feature{border-left:0}

  /* Кегли: всё ниже 12 px поисковики считают нечитаемым на телефоне. */
  .ds-btn--sm{font-size:14px}
  .ds-contact__text i{font-size:14px}
  .ds-footer__docs a{font-size:14px}

  /* Области касания в подвале и у почты. */
  .ds-footer__nav a,.ds-footer__docs a{padding:8px 0}
  /* Юридические ссылки — столбцом, как на остальных страницах (parts/zy-pravki.css п.12):
     главная parts не грузит, и подвал у неё был на 31 px выше. */
  .ds-footer__docs{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0}
  .ds-footer__docs a,.ds-footer__docs .ds-footer__cookie{padding:4px 0;font-size:14px;line-height:20px}
  .ds-footer__mail,.ds-step__mail{display:inline-block;padding:8px 0 2px}

  /* Зелёная точка «на связи» висела между строк при переносе. */
  .ds-contacts__hours{align-items:flex-start}
  .ds-contacts__hours .ds-reply__dot{margin-top:6px}

  /* Ролик «Процесса» единственный был без потолка — на 768 занимал пол-экрана. */
  .ds-process__экран{max-width:304px;margin:0 auto}
}

/* На узких телефонах плашки складываем в столбик: в 141 px текст ломается. */
@media (max-width:360px){
  .ds-card--clients,.ds-card--launch{grid-column:1 / -1}
}

@media (min-width:600px) and (max-width:809px){
  .ds-features{grid-template-columns:1fr 1fr;gap:14px 8px}
}

/* Планшет: ролик процесса и подвал. */
@media (min-width:810px) and (max-width:1199px){
  .ds-process__экран{max-width:398px;margin:0 auto}
  .ds-footer__row{grid-template-columns:auto 1fr;gap:22px 30px;padding:30px 28px 0}
  .ds-footer__nav{grid-column:1 / -1;grid-row:2;justify-content:flex-start}
  /* Почта и реквизиты — справа в первой строке, как на широком экране, а не отдельной третьей строкой с кривым краем. */
  .ds-footer__side{grid-column:2;grid-row:1}
  .ds-review__add,.ds-faq__foot .ds-btn{max-width:420px}
}

@media (min-width:1200px){
  .ds-process__экран{max-width:515px;margin:0 auto}
}

/* Слои у всплывающих элементов — чтобы порядок не зависел от порядка в разметке. */
.ds-review__bubble,.ds-contacts__bubble{z-index:2}
.ds-card{z-index:3}
.ds-note{z-index:1}

/* ⚠️ На html нельзя вешать overflow ни в каком виде: при overflow-x:clip
   вторая ось становится auto, html превращается в контейнер прокрутки,
   и весь position:sticky на странице умирает — липкая шапка и липкий
   персонаж в «О себе» просто перестают липнуть. Держим только на body:
   переполнения после правок адаптива нет (замер 320–1440), страховка
   на html не нужна. */

/* Ловушка для ботов: поле есть в разметке, но человеку невидимо. */
.ds-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Кнопка «Настройки cookie» выглядит как соседние ссылки подвала. */
.ds-footer__cookie{padding:4px 0;border:0;background:none;cursor:pointer;
  color:var(--ds-gray);font:400 13.5px/1.5 var(--ds-font-text);
  border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.ds-footer__cookie:hover{color:var(--ds-ink);border-bottom-color:var(--ds-line)}

/* ── бургер и меню: см. assets/css/shapka.css ─────────────────── */

/* ── ролики блоков: оригинал на своём белом фоне ──────────────────
   Прозрачность убрана намеренно: вырезание фона на тёмной теме лезло
   то светлым ореолом вокруг обуви, то съеденными кроссовками — они
   того же цвета, что пол. Раз у ролика белый фон, то и колонка под ним
   белая в обеих темах: иначе ролик читается наклеенным прямоугольником
   поверх синей плашки. */
/* С 1.7.1 видео на сайте нет: в рамках стоят обычные картинки на белом фоне.
   Фон плашки #fff должен совпадать с фоном исходника персонажа. */
:root{--ds-кадр:#fff}

.ds-about__photo,
.ds-process__img,
.ds-review__img,
.ds-faq__img,
.ds-contacts__img{background:var(--ds-кадр)}

.ds-process__side,
.ds-review__side,
.ds-faq__side,
.ds-contacts__side{background:var(--ds-кадр)}

/* Подписи на этой подложке всегда на светлом, поэтому в тёмной теме
   их цвет берём от светлой — иначе светлый текст на белом пропадёт. */
:root[data-theme="dark"] .ds-review__side,
:root[data-theme="dark"] .ds-faq__side,
:root[data-theme="dark"] .ds-contacts__side,
:root[data-theme="dark"] .ds-process__side{
  /* color задаём явно: он наследуется уже вычисленным, и без этой строки
     подпись в пузыре осталась бы светлой — белым по белому. */
  color:#111;
  --ds-ink:#111;
  --ds-gray:#6B7280;
  --ds-blue-dark:#1B6FBF;
  --ds-bg-card:#fff;
  --ds-badge:#EDEDED;
  --ds-tile:#EAF4FD;
  --ds-line:rgba(224,224,224,.63);
}

/* ── ролик занимает плашку целиком ───────────────────────────────
   Раньше у ролика был потолок по высоте и поля по бокам — он висел
   картинкой в середине колонки. Теперь колонка ему по размеру:
   боковые поля убраны, ширина полная, высота считается от пропорций.
   Подписи и пузыри остаются со своими отступами. */
.ds-process__img,
.ds-review__img,
.ds-faq__img,
.ds-contacts__img{width:100%;max-width:none;max-height:none;height:auto;display:block}

.ds-process__sticky{padding-left:0;padding-right:0}
.ds-review__side{padding-left:0;padding-right:0}
.ds-faq__side{padding-left:0;padding-right:0}
.ds-contacts__side{padding-left:0;padding-right:0}

/* Рукописным подписям поля вернуть: они не должны прилипать к краю. */
.ds-faq__hint,.ds-process__hint{padding-left:20px;padding-right:20px}

@media (max-width:1199px){
  .ds-process__sticky,
  .ds-review__side,.ds-faq__side,.ds-contacts__side{padding-left:0;padding-right:0}
}

/* Внешний контур плашек с роликами.
   Боковые линии контейнера идут под контентом (z-index:-1), и раньше край
   плашки читался сам собой: голубая заливка на белом фоне секции. Заливка
   стала белой — контур пропал, и секции повисли без боковой рамки.
   Поэтому край рисуем границей самой колонки: цвет берётся из --ds-line,
   а он внутри плашки переопределён на серый, значит линия видна и в тёмной
   теме. Внешняя сторона у «Процесса» правая, у остальных — левая. */
.ds-review__side,
.ds-faq__side,
.ds-contacts__side{border-left:1px solid var(--ds-line)}
.ds-process__side{border-right:1px solid var(--ds-line)}

/* В одну колонку плашка занимает всю ширину — обе стороны наружные. */
@media (max-width:1199px){
  .ds-review__side,
  .ds-faq__side,
  .ds-contacts__side,
  .ds-process__side{border-left:1px solid var(--ds-line);border-right:1px solid var(--ds-line)}
}

/* ── Статьи на главной ────────────────────────────────────────────
   Три карточки в ряд с общими рамками — той же природы, что карточки
   услуг: сетка держится на линиях, а не на тенях и скруглениях. */
.ds-blog{position:relative}
.ds-blog > .ds-container{padding:110px 0 0}
/* Лента статей: едет сама, как «Работы» (app.js), но внутри боковых линий рамки —
   окно не шире контейнера, карточки обрезаются по линиям. Между карточками —
   линия-граница без зазора, поэтому половина дорожки равна ровно одному набору. */
/* Боковые линии рамки блока лежат поверх ленты: белые обложки, уезжая под край,
   иначе перекрывали бы их. Линия по-прежнему та же (токен и толщина контейнера). */
.ds-blog > .ds-container::before,
.ds-blog > .ds-container::after{z-index:3;pointer-events:none}
.ds-blog__viewport{overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line);
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;cursor:grab;
  -webkit-user-select:none;user-select:none}
.ds-blog__viewport::-webkit-scrollbar{display:none}
.ds-blog__viewport[data-тянут]{cursor:grabbing}
.ds-blog__viewport:focus-visible{outline:2px solid var(--ds-blue);outline-offset:-4px}
.ds-blog__track{list-style:none;margin:0;padding:0;display:flex;width:max-content}
.ds-blog__item{flex:0 0 466px;border-left:1px solid var(--ds-line)}
.ds-blog__item:first-child{border-left:0}
.ds-blog__link{display:flex;flex-direction:column;gap:12px;height:100%;padding:30px 28px 34px;
  text-decoration:none;color:inherit;transition:background .18s ease}
.ds-blog__link:hover{background:var(--ds-tile)}
.ds-blog__date{color:var(--ds-blue-dark);font:500 13px/1 var(--ds-font-text);
  text-transform:uppercase;letter-spacing:.07em}
.ds-blog__name{font:600 27px/1.12 var(--ds-font-display);text-transform:uppercase;letter-spacing:.005em}
.ds-blog__text{color:var(--ds-gray);font:400 16px/1.5 var(--ds-font-text)}
.ds-blog__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  color:var(--ds-blue-dark);font:500 15px/1 var(--ds-font-text)}

@media (max-width:1199px){
  .ds-blog > .ds-container{padding-top:88px}
  .ds-blog__item{flex-basis:400px}
}
@media (max-width:809px){
  .ds-blog > .ds-container{padding-top:64px}
  .ds-blog__item{flex-basis:300px}
  .ds-blog__link{padding:26px 20px 30px}
  .ds-blog__name{font-size:24px}
}

/* Ссылка на полную страницу услуги внутри раскрытой карточки. */
.ds-srv__link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  color:var(--ds-blue-dark);text-decoration:none;font:500 16px/1 var(--ds-font-text);
  border-bottom:1px solid transparent}
.ds-srv__link:hover{border-bottom-color:currentColor}

/* ── Искорки поверх всего ─────────────────────────────────────────
   Искра стоит на пересечении линий и должна читаться целиком. Блоки, на углах
   которых она стоит, НЕ получают z-index: иначе каждый становится своим
   контекстом наложения, и искра внутри него (z-index:5) проигрывает любому
   соседу того же уровня, что идёт позже в разметке (так линии и плашки
   следующей секции ложились поверх нижних искр). Без z-index у блока искра
   участвует в общем контексте <main> и всегда выше линий (-1) и содержимого. */
/* Внутренние страницы: те же искры на углах шапки, сеток и призыва. */
.ds-page__head,
.ds-grid,
.ds-cta,
.ds-post__shot{position:relative}

/* ── Карточка работы: одна подложка, а не две ─────────────────────
   Обложка кейса — это мокап ноутбука, у которого фон уже той же плашки
   (--ds-tile). Если под ним оставить ещё и фон рамки с отступами, видно
   рамку в рамке: два одинаковых прямоугольника со скруглениями.
   Поэтому под снимком рамка прозрачная, а фон остаётся только у заглушек,
   где показывать нечего. */
.ds-work__frame:has(.ds-work__shot){background:transparent;padding:0;
  height:auto;aspect-ratio:16/10}
.ds-work__frame:has(.ds-work__shot) .ds-work__shot{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;border-radius:24px;filter:none}
/* Волосяная внутренняя обводка: светлый верх снимка (Полипласт, КвадроСочи) иначе тает в фоне страницы. */
.ds-work__frame:has(.ds-work__shot){position:relative}
.ds-work__frame:has(.ds-work__shot)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(22,50,92,.08);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ds-blue-dark) 8%,transparent)}

/* Тот же случай на внутренних страницах: у карточки-плитки снимок
   рисуется во всю ширину, своя подложка ему не нужна. */
.ds-plate__shot{background:transparent}

/* Обложка статьи в блоке на главной. Пропорция та же, что в ленте блога,
   чтобы карточки не прыгали по высоте, когда у одной статьи картинка
   шире другой. */
.ds-blog__shot{display:block;margin:0 0 4px;overflow:hidden;border-radius:14px;background:var(--ds-tile)}
.ds-blog__shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
/* Тёмная тема: белый кадр под обрез ячейки выглядел заплаткой — обложка
   ложится на белую скруглённую плашку с полем карточки вокруг, как персонажи
   в zz-plashki.css и обложки ленты блога. */
:root[data-theme="dark"] .ds-blog__shot{margin:0 0 20px;border-radius:24px;background:#fff}
@media (max-width:809px){
  :root[data-theme="dark"] .ds-blog__shot{border-radius:20px}
}

/* ── Окна форм всегда светлые ─────────────────────────────────────
   В тёмной теме форма на тёмном фоне читается как системное окно
   и теряет связь с сайтом: поля сливаются с фоном, а галочка согласия
   выглядит выключенной. Поэтому внутри окна переопределяем палитру
   на светлую — и в светлой теме, и в тёмной окно выглядит одинаково.
   Цвет текста задаём явно: он наследуется уже вычисленным, переменной
   его не перекрыть. */
:root[data-theme="dark"] .ds-modal,
:root[data-theme="dark"] .ds-menu{
  color:#111;
  --ds-ink:#111;
  --ds-gray:#6B7280;
  --ds-blue-dark:#1B6FBF;
  --ds-bg:#fff;
  --ds-bg-card:#fff;
  --ds-tile:#EAF4FD;
  --ds-badge:#F2F2F2;
  --ds-line:rgba(224,224,224,.63);
  background:#fff;
}

/* ── телефон: первый экран «визиткой» (26.09.2026) ───────────────────
   Портрет над заголовком отодвигал содержимое вниз: до «Делаю сайты» было
   почти 500 px, кнопка уходила за второй экран. Собираем как визитку —
   портрет слева, слова справа в две строки, — а порядок ставим такой:
   визитка, лид, кнопка, плашки, обещания — как в макете Figma: кнопка
   сразу под лидом попадает в первый экран. Блок держим последним в файле,
   чтобы он перекрывал ранние телефонные правила. */
@media (max-width:809px){
  .ds-hero__frame{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;
    row-gap:0;align-content:start;padding-top:32px}
  /* Приветствие повторяет то, что и так скажут лицо и заголовок. */
  .ds-badge{display:none}

  .ds-title{grid-column:1 / -1;grid-row:1;display:grid;
    grid-template-columns:104px minmax(0,1fr);column-gap:14px;align-items:center;
    margin:0;font-size:52px;line-height:.92}
  .ds-title__portrait{grid-column:1;grid-row:1 / span 2;
    width:104px;height:104px;margin:0;justify-self:start}
  .ds-title__word{flex:none;width:auto;text-align:left;padding:0}
  .ds-title__word--left{grid-column:2;grid-row:1;align-self:end;justify-self:start}
  .ds-title__word--right{grid-column:2;grid-row:2;align-self:start;justify-self:start}

  .ds-lead{grid-column:1 / -1;grid-row:2;max-width:none;margin:16px 0 0;text-align:left}

  .ds-card--clients,.ds-card--launch{grid-row:4;margin-top:28px}
  .ds-card--clients{grid-column:1}
  .ds-card--launch{grid-column:2}

  .ds-cta{grid-column:1 / -1;grid-row:3;margin-top:22px;flex-direction:column;gap:10px}

  /* Плашки столбиком: крупный значок сверху, под ним название и подпись.
     В строку значок съедал половину узкой карточки, и «Больше клиентов»
     ломалось пополам рядом с ним. */
  .ds-card{flex-direction:column;align-items:flex-start;gap:14px;padding:16px}
  .ds-card .ds-feature__icon{width:52px;height:52px;border-radius:16px}
  .ds-card .ds-feature__icon svg{width:24px;height:24px}
  .ds-card .ds-feature__text b{font-size:15px}
  .ds-card .ds-feature__text i{font-size:13.5px}

  /* Обещания — под кнопкой, в две колонки: кегли здесь мельче основного
     текста, и «Полный цикл» с «Яндекс Картами» в строку помещаются. */
  .ds-features{grid-column:1 / -1;grid-row:5;margin:24px 0 0;
    grid-template-columns:1fr 1fr;gap:20px 10px;justify-items:start}
  .ds-feature__text b{font-size:14px}
  .ds-feature__text i{font-size:12.5px}
}

/* На самых узких плашки тоже в строку (Александр, 04.10.2026: столбик
   занимал пол-экрана). В ~140 px помещаемся за счёт меньших полей,
   значка и кегля. */
@media (max-width:360px){
  .ds-card{padding:12px;gap:10px}
  .ds-card .ds-feature__icon{width:40px;height:40px;border-radius:12px}
  .ds-card .ds-feature__icon svg{width:20px;height:20px}
  .ds-card .ds-feature__text b{font-size:13.5px}
  .ds-card .ds-feature__text i{font-size:12px}
  .ds-features{grid-template-columns:1fr}
}

/* ── Телефон: статьи слайдером (Александр, 04.10.2026) ──────────────
   Три карточки столбиком занимали три экрана. Лента листается пальцем,
   край следующей карточки виден — понятно, что есть продолжение. */

@media (max-width:389px){
  .ds-logo{width:36px;height:36px}
}

/* ── п.7: флажки и поля форм ───────────────────────────────────────────
   Лежит здесь, а не в parts: модальное окно заявки есть и на главной.
   Границы полей были --ds-line (1,3:1), нужно ≥3:1: берём --ds-gray, он даёт
   4,3–7,3:1 и на белом, и на голубой плитке, и на тёмных фонах.
   Флажок рисуем сами: родной в тёмной теме — ярко-белый квадрат. */
.ds-field__input{border-color:var(--ds-gray)}
.ds-check__box{appearance:none;-webkit-appearance:none;display:grid;place-content:center;
  background:var(--ds-bg);border:1.5px solid var(--ds-gray);border-radius:5px;transition:background .15s ease,border-color .15s ease}
.ds-check__box::after{content:"";width:10px;height:6px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .12s ease}
.ds-check__box:checked{background:#1B6FBF;border-color:#1B6FBF}
.ds-check__box:checked::after{transform:rotate(-45deg) scale(1)}
.ds-check__box:focus-visible{outline:2px solid var(--ds-blue);outline-offset:2px}

/* ── Главная, тёмная тема: ролики стоят на скруглённых белых плашках ───
   Те же правила, что у персонажей внутренних страниц (parts/zz-plashki.css):
   вокруг фигуры 24–32 px, все четыре угла скруглены, от линий раздела не
   меньше 24 px. Колонка-подложка в тёмной теме прозрачна, плашкой становится
   сама карточка с роликом; подписи и пузыри лежат на плашке и берут светлые
   цвета из переопределений выше. Ролики внутри играют как прежде. */
:root[data-theme="dark"]{--ds-pl-gl-p:28px;--ds-pl-gl-r:24px;--ds-pl-gl-m:24px}

:root[data-theme="dark"] .ds-process__side{background:transparent;border-left:0;border-right:0}

:root[data-theme="dark"] .ds-process__sticky{box-sizing:border-box;background:var(--ds-кадр);border-radius:var(--ds-pl-gl-r);
  margin:var(--ds-pl-gl-m);padding:var(--ds-pl-gl-p)}
:root[data-theme="dark"] .ds-process__sticky{color:#111;--ds-ink:#111;--ds-gray:#6B7280;--ds-blue-dark:#1B6FBF;--ds-tile:#EAF4FD}

/* отзывы, вопросы, контакты: плашкой становится сама колонка */
:root[data-theme="dark"] .ds-review__side,
:root[data-theme="dark"] .ds-faq__side,
:root[data-theme="dark"] .ds-contacts__side{box-sizing:border-box;border:0;border-radius:var(--ds-pl-gl-r);
  margin:var(--ds-pl-gl-m);padding-left:var(--ds-pl-gl-p);padding-right:var(--ds-pl-gl-p)}
:root[data-theme="dark"] .ds-review__side{padding-bottom:var(--ds-pl-gl-p)}
:root[data-theme="dark"] .ds-faq__side{padding-top:64px;padding-bottom:var(--ds-pl-gl-p)}
:root[data-theme="dark"] .ds-contacts__side{padding-bottom:var(--ds-pl-gl-p)}
:root[data-theme="dark"] .ds-review__img,
:root[data-theme="dark"] .ds-faq__img,
:root[data-theme="dark"] .ds-contacts__img,
:root[data-theme="dark"] .ds-process__img{border-radius:calc(var(--ds-pl-gl-r) - 8px)}

/* «О себе»: сцена прозрачна, персонаж — на скруглённой белой плашке,
   линии выносок идут над ней и читаются на тёмном и на белом. */
:root[data-theme="dark"] .ds-about__stage{background:transparent}
:root[data-theme="dark"] .ds-about__stage .ds-about__figure{padding:24px 0}
:root[data-theme="dark"] .ds-about__photo{height:592px;padding:0;border-radius:24px}
:root[data-theme="dark"] .ds-about__call{z-index:auto}
/* текст выносок лежит на тёмном и не должен заходить на белую плашку:
   ширина колонки выноски — от края сцены до плашки (302 px от оси) */
@media (min-width:1200px){
  :root[data-theme="dark"] .ds-about__call{width:min(300px,calc(50cqw - 348px))}
  @container (max-width:1300px){
    :root[data-theme="dark"] .ds-br{display:inline}
  }
}
:root[data-theme="dark"] .ds-about__call::after{background:#E8ECF2;opacity:.6;mix-blend-mode:difference}

@media (max-width:1199px){
  :root[data-theme="dark"]{--ds-pl-gl-p:24px;--ds-pl-gl-r:22px}
  :root[data-theme="dark"] .ds-review__side,
  :root[data-theme="dark"] .ds-faq__side,
  :root[data-theme="dark"] .ds-contacts__side,
  :root[data-theme="dark"] .ds-process__side{border-left:0;border-right:0;border-bottom:0}
  :root[data-theme="dark"] .ds-about__stage .ds-about__figure{padding:16px}
  :root[data-theme="dark"] .ds-about__photo{height:auto;padding:16px}
}
@media (max-width:809px){
  :root[data-theme="dark"]{--ds-pl-gl-p:20px;--ds-pl-gl-r:20px}
  :root[data-theme="dark"] .ds-review__side,
  :root[data-theme="dark"] .ds-faq__side,
  :root[data-theme="dark"] .ds-contacts__side{margin:var(--ds-pl-gl-m) 20px}
  :root[data-theme="dark"] .ds-process__sticky{margin:var(--ds-pl-gl-m) 20px}
}

/* не рвать то, что склеено фильтром неразрывных пробелов (inc/stranicy-nbsp.php); здесь, а не в parts —
   главная грузит только styles.css. Диапазон с единицей («4–8 недель») на узком экране может перенестись
   только по пробелу перед единицей: числа с тире держит внутренняя .ds-nowrap. Домен и почта — никогда. */
.ds-nowrap{white-space:nowrap}
@media (max-width:360px){.ds-nowrap--diap{white-space:normal}}

/* одно слово в последней строке абзаца не оставлять: браузер сам подбирает переносы (Chrome, Safari 26+; остальные — как раньше) */
p,li,dd,figcaption{text-wrap:pretty}