/* Дизайн-система «Схема», перенесённая со слайда на веб.
   Слайд считался в cqw, сайт считается в px по модулю 6.
   Правила те же: однотонные поля, тонкая линия, рамка вокруг части,
   скруглений нет, теней нет, словарь маркетинговый. */

:root{
  --paper:#FFFFFF; --ink:#151318; --ink-2:#545158;
  --line:#B9B6BE; --hair:#D6D2DB;
  --accent:#7D2EBD; --on-accent:#FFFFFF;
  --act:#FFD600; --act-on:#151318;

  --s1:6px; --s2:12px; --s3:18px; --s4:24px; --s5:36px;
  --s6:48px; --s7:72px; --s8:96px; --s9:144px;

  --page:1440px; --margin:72px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* Полоса прокрутки в фирменном сиреневом (R265). Цвет записан числом,
     а не переменной: --accent внутри чёрного и жёлтого поля другой,
     а полоса у документа одна и меняться на прокрутке не должна. */
  scrollbar-width:thin;scrollbar-color:#7D2EBD #F1EEF5}
/* Старым сборкам WebKit стандартное свойство неизвестно — им рисуем сами.
   Только им: собственные правила webkit заодно превращают исчезающую
   полосу macOS в постоянную, и это заметно меняет поведение страницы. */
@supports not (scrollbar-color: auto){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:#F1EEF5}
  ::-webkit-scrollbar-thumb{background:#7D2EBD}
  ::-webkit-scrollbar-thumb:hover{background:#661F9C}
}
/* Кнопки внутри страницы ведут к форме заявки внизу (R306). Шапка липкая,
   поэтому якорь опускаем из-под неё, а прокрутку делаем плавной — резкий
   скачок на длинной странице читается как перезагрузка. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
#zayavka{scroll-margin-top:96px}
@media (max-width:900px){ #zayavka{scroll-margin-top:72px} }

body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Geologica,system-ui,sans-serif;font-weight:300;line-height:1.55;
  font-size:17px;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;print-color-adjust:exact;-webkit-print-color-adjust:exact}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ─── четыре однотонных поля ─── */
.field{background:var(--paper);color:var(--ink)}
.field--black{--paper:#0B0B0B;--ink:#FFFFFF;--ink-2:#B9B6BE;--line:#55525A;--hair:#3A383F;
  --accent:#AC63F3;--on-accent:#17091F}
.field--violet{--paper:#7D2EBD;--ink:#FFFFFF;--ink-2:#E7D8F8;--line:#B98BE4;--hair:#9A5AD0;
  --accent:#FFD600;--on-accent:#151318}
.field--yellow{--paper:#FFD600;--ink:#151318;--ink-2:#5A4D00;--line:#B79A00;--hair:#D9B800;
  --accent:#151318;--on-accent:#FFD600;--act:#151318;--act-on:#FFD600}
.field{background:var(--paper);color:var(--ink)}
::selection{background:var(--act);color:var(--act-on)}
/* Плашка — выделение фразы цветом действия. Знак препинания входит внутрь плашки,
   иначе он отрывается на ширину поля. Одна на слайд, только по Geologica. */
.mark{background:var(--act);color:var(--act-on);padding:.05em .3em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ─── сетка страницы ─── */
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--margin)}
.sec{padding:var(--s8) 0}          /* белое к белому: 96 сверху и снизу */
.sec--wide{padding:var(--s9) 0}    /* цветное поле дышит шире: 144 */
.sec--tight{padding:var(--s7) 0}

/* ─── типографика ───
   Веб-шкала кеглей, шаг задан в DESIGN.md → Typography → «Шкала для веба»:
   12 · 15 · 17 · 20 · 26 · 34 · 46 · 54 · 76. Промежуточных значений нет. */
.d{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;line-height:1.06;margin:0}
.h1{font-size:clamp(46px,5.2vw,76px)}
.h2{font-size:clamp(34px,3.2vw,46px)}
.h3{font-size:clamp(20px,1.7vw,26px)}
.t{font-weight:300;line-height:1.55;margin:0}
.t b,.t strong{font-weight:500}
.lead{font-size:20px;line-height:1.55}
.l{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;font-size:12px;line-height:1.4;color:var(--ink-2);margin:0}
.n{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.01em;line-height:.94;
  font-size:17px;font-variant-numeric:tabular-nums;margin:0}
.muted{color:var(--ink-2)}
.accent{color:var(--accent)}

/* ─── шапка раздела: подпись, правило, заголовок ─── */
.head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4) var(--s6);
  flex-wrap:wrap;padding-bottom:var(--s4);border-bottom:2px solid var(--ink);margin-bottom:var(--s7)}
/* В шапке бывает четыре элемента: заголовок, подпись, ссылка «Все кейсы»
   и стрелки карусели. Заголовок забирает свободное место, остальные
   не разрываются на две строки — иначе шапка выглядит поехавшей (R283). */
.head>h2{flex:1 1 auto}
.head>p.l{flex:0 1 auto}
.head>.a-serv__more,.head>.car__nav{flex:none;white-space:nowrap}

/* ─── звено: единица системы ─── */
.box{border:1px solid var(--ink);padding:var(--s4) var(--s4);background:transparent}
.box--key{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.box--muted{border-color:var(--line);color:var(--ink-2)}
.box__t{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;line-height:1.1;font-size:18px;color:inherit}
.box__s{color:var(--ink-2);font-size:15px;margin-top:var(--s1);line-height:1.45}
.box--key .box__s{color:inherit;opacity:.85}

/* ─── связь между звеньями ─── */
.link{flex:1 1 auto;height:0;border-top:1px solid var(--line);align-self:center;min-width:18px}
.steps{display:flex;align-items:stretch}
.steps .box{flex:0 0 auto;padding:var(--s2) var(--s3)}
.steps .box__t{font-size:12px}

/* ─── действие ─── */
.btn{display:inline-flex;align-items:center;gap:var(--s3);background:var(--act);color:var(--act-on);
  font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  font-size:17px;padding:var(--s3) var(--s6);border:0}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn svg{width:20px;height:20px;transition:transform .18s cubic-bezier(.2,.7,.3,1)}
/* Стрелка подаётся вперёд под курсором — движение подсказывает, что кнопка ведёт дальше */
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.btn svg{transition:none}.btn:hover svg,.btn:focus-visible svg{transform:none}}

/* ─── галочка и стрелка ─── */
.tick{display:grid;grid-template-columns:22px 1fr;gap:var(--s2);align-items:start}
.tick svg{width:22px;height:22px;color:var(--accent);margin-top:2px}
.ticks{display:flex;flex-direction:column;gap:var(--s3)}

/* ─── цифра с подписью ─── */
.stat .n{font-size:clamp(34px,3.6vw,54px)}
.stat .l{margin-top:var(--s2)}

/* ─── шапка сайта ─── */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding:var(--s4) 0;border-bottom:1px solid var(--hair)}
/* Кегль общий для всех пунктов: у «Услуги» и «О компании» он задаётся
   кнопкой .mm__t и равен 17 px — прямые ссылки набираем так же (R141) */
.nav__menu{display:flex;gap:var(--s5);font-size:17px}
.nav__menu > a{border-bottom:1px solid transparent;padding-bottom:2px}
/* Логотип — ссылка на главную (R165), поэтому сбрасываем оформление ссылки */
/* Размер знака задан здесь, а не инлайном в шапке: инлайн перебивал
   и медиазапросы, и уменьшение логотипа при прокрутке. На телефоне знак
   меньше — с крупным шапка не помещается в экран и страница едет вбок,
   бургер уходит за правый край (R282). */
.lock{--h:32px}
@media (max-width:900px){ .lock{--h:24px} }
.lock{position:relative;height:calc(294 / 256 * var(--h));width:calc(1419 / 256 * var(--h));
  flex:none;display:block;text-decoration:none;border:0;
  transition:opacity .16s ease}
.lock:hover{opacity:.82}
.lock__m{position:absolute;left:0;top:0;height:var(--h)}
.lock__w{position:absolute;left:calc(623 / 256 * var(--h));top:0;height:calc(294 / 256 * var(--h));width:auto}

/* ─── подвал ─── */
.foot{padding:var(--s7) 0 var(--s6)}
.foot__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s6);
  padding-bottom:var(--s6);border-bottom:1px solid var(--hair)}
.foot__cols a{display:block;font-size:15px;color:var(--ink-2);padding:3px 0}
.foot__bottom{display:flex;justify-content:space-between;gap:var(--s5);padding-top:var(--s4);
  font-size:12px;color:var(--ink-2)}

/* ─── пометка «демонстрация» на макете ─── */
.demo{position:fixed;right:0;top:0;z-index:9;pointer-events:none;background:var(--act);color:#151318;
  font-family:'JetBrains Mono',monospace;letter-spacing:.12em;
  font-size:12px;text-transform:uppercase;padding:6px 12px}

/* ═══ Адаптив ═══════════════════════════════════════════════════════════════
   Три ступени, записаны в DESIGN.md → Layout:
   ≤1200 планшет боком · ≤900 планшет стоя и меню в панель · ≤600 телефон.
   Кегли уже сжимаются через clamp, здесь перестраивается сетка. */

/* бургер и выдвижная панель меню */
.burger{display:none;width:44px;height:44px;border:1px solid var(--ink);background:var(--paper);
  cursor:pointer;padding:0;position:relative;z-index:60;flex:none}
.burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);
  transition:transform .2s ease-out,opacity .15s ease-out}
.burger i:nth-child(1){top:14px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:28px}
[data-nav="open"] .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
[data-nav="open"] .burger i:nth-child(2){opacity:0}
[data-nav="open"] .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__mobile{display:none}

@media (max-width:1200px){
  :root{--margin:48px}
  .sec{padding:var(--s7) 0}
  .sec--wide{padding:var(--s8) 0}
  .sec--tight{padding:var(--s6) 0}
  .nav__menu{gap:var(--s4)}
  .foot__cols{grid-template-columns:1.6fr 1fr 1fr;gap:var(--s6) var(--s5)}
}

@media (max-width:900px){
  :root{--margin:36px}
  .head{flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s6)}
  .burger{display:block}
  .nav{gap:var(--s4)}
  .nav__mobile{display:block;margin-top:var(--s6);padding-top:var(--s5);
    border-top:1px solid var(--hair)}
  /* меню уезжает в панель во всю высоту */
  .nav__menu{position:fixed;inset:0 0 0 auto;width:min(420px,100%);z-index:50;
    background:var(--paper);border-left:1px solid var(--hair);
    display:flex;flex-direction:column;align-items:stretch;gap:var(--s4);
    padding:calc(var(--s8) + var(--s3)) var(--margin) var(--s7);
    overflow-y:auto;font-size:20px;
    transform:translateX(100%);visibility:hidden;
    transition:transform .25s ease-out,visibility .25s}
  [data-nav="open"] .nav__menu{transform:none;visibility:visible;box-shadow:0 0 0 100vmax rgba(11,11,11,.5)}
  .nav__menu > a{border-bottom:0;padding:var(--s2) 0}
  .steps{flex-wrap:wrap;gap:var(--s2)}
  .steps .link{display:none}
  .steps .box{flex:1 1 auto}
  .foot__cols{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  .nav__menu,.burger i{transition:none}
}

@media (max-width:600px){
  :root{--margin:24px}
  .sec{padding:var(--s6) 0}
  .sec--wide{padding:var(--s7) 0}
  .sec--tight{padding:var(--s5) 0}
  .lead{font-size:18px}
  .head{margin-bottom:var(--s5)}
  .foot{padding:var(--s6) 0 var(--s5)}
  .foot__cols{grid-template-columns:1fr;gap:var(--s5)}
  .foot__bottom{flex-direction:column;gap:var(--s2)}
  .btn{padding:var(--s3) var(--s5);font-size:15px}
  .demo{display:none}   /* метка макета мешает читать на узком экране */
}